survey-creator-core 1.9.109 → 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.109
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 {
@@ -294,6 +294,7 @@ svc-tab-json-editor-textarea {
294
294
  justify-content: center;
295
295
  width: 100%;
296
296
  height: 100%;
297
+ box-shadow: inset 0px -1px 0px 0px var(--sjs-border-inside, var(--border-inside, rgba(0, 0, 0, 0.16)));
297
298
  }
298
299
 
299
300
  @media screen and (-webkit-min-device-pixel-ratio: 0) {
@@ -321,10 +322,10 @@ svc-tab-test {
321
322
  border: 0;
322
323
  }
323
324
  .svc-test-tab__content .svc-plugin-tab__content .svc-preview__test-again {
324
- width: calc(33 * var(--sjs-base-unit, var(--base-unit, 8px)));
325
+ width: calc(33 * (var(--sjs-base-unit, var(--base-unit, 8px))));
325
326
  margin-left: auto;
326
327
  margin-right: auto;
327
- margin-bottom: 72px;
328
+ margin-bottom: calc(12 * (var(--sjs-base-unit, var(--base-unit, 8px))));
328
329
  margin-top: 8px;
329
330
  }
330
331
 
@@ -347,7 +348,7 @@ svc-tab-test {
347
348
  left: 0;
348
349
  right: 0;
349
350
  justify-content: center;
350
- gap: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
351
+ gap: var(--sjs-base-unit, var(--base-unit, 8px));
351
352
  }
352
353
  .svc-test-tab__content-actions .sv-action-bar.sv-action-bar--pages .sv-action__content {
353
354
  padding: 0;
@@ -356,13 +357,14 @@ svc-tab-test {
356
357
  margin: 0;
357
358
  }
358
359
  .svc-test-tab__content-actions .sv-action-bar-item {
359
- 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);
360
362
  font-style: normal;
361
363
  font-weight: 600;
362
- font-size: calc(0.75 * var(--sjs-font-size, calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)))));
363
- 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)))));
364
366
  width: 100%;
365
- height: calc(4 * var(--sjs-base-unit, var(--base-unit, 8px)));
367
+ height: calc(4 * (var(--sjs-base-unit, var(--base-unit, 8px))));
366
368
  }
367
369
  .svc-test-tab__content-actions .svc-page-selector {
368
370
  max-width: 50%;
@@ -379,7 +381,7 @@ svc-tab-test {
379
381
  font-family: var(--font-family);
380
382
  font-style: normal;
381
383
  font-weight: 400;
382
- 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))));
383
385
  color: var(--sjs-general-forecolor, var(--foreground, #161616));
384
386
  text-align: center;
385
387
  overflow: hidden;
@@ -397,15 +399,15 @@ svc-tab-test {
397
399
  }
398
400
 
399
401
  .sl-table__cell.st-table__cell--actions:first-of-type .sv-action-bar {
400
- margin-top: calc(-0.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
401
- 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))));
402
404
  }
403
405
 
404
406
  .sl-table .sl-table__detail-button.sl-table__detail-button {
405
- width: calc(6 * var(--sjs-base-unit, var(--base-unit, 8px)));
406
- 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))));
407
409
  box-sizing: border-box;
408
- 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))));
409
411
  padding: 0;
410
412
  }
411
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 {
@@ -417,8 +419,8 @@ svc-tab-test {
417
419
  }
418
420
 
419
421
  .sl-table__remove-button .sv-action-bar-item {
420
- border-radius: calc(12.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
421
- 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));
422
424
  cursor: pointer;
423
425
  }
424
426
  .sl-table__remove-button .sv-action-bar-item:hover:enabled, .sl-table__remove-button .sv-action-bar-item.sv-focused--by-key {
@@ -440,8 +442,8 @@ svc-tab-test {
440
442
 
441
443
  .sl-table__row #remove-row .sv-action-bar-item {
442
444
  border: none;
443
- width: calc(5 * var(--sjs-base-unit, var(--base-unit, 8px)));
444
- 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))));
445
447
  }
446
448
  .sl-table__row #remove-row .sv-action-bar-item__icon use {
447
449
  fill: var(--sjs-special-red, var(--red, #e60a3e));
@@ -456,17 +458,18 @@ svc-tab-test {
456
458
  .sl-table__cell .svc-action-button:focus,
457
459
  .sl-table__cell .svc-action-button:hover:enabled,
458
460
  .sl-table__cell .svc-action-button:focus:enabled {
461
+ --medium-bold-font-size: var(--sjs-base-unit, var(--base-unit, 8px));
459
462
  font-family: var(--font-family);
460
463
  font-style: normal;
461
464
  font-weight: bold;
462
- font-size: calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
463
- 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));
464
467
  background: transparent;
465
468
  color: var(--sjs-general-forecolor, var(--foreground, #161616));
466
469
  outline: none;
467
470
  border: none;
468
471
  box-shadow: none;
469
- 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))));
470
473
  overflow: hidden;
471
474
  display: -webkit-box;
472
475
  -webkit-line-clamp: 3;
@@ -476,10 +479,10 @@ svc-tab-test {
476
479
  .sl-table__cell {
477
480
  color: var(--sjs-general-forecolor, var(--foreground, #161616));
478
481
  font-weight: bold;
479
- 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))));
480
483
  font-family: var(--font-family);
481
484
  vertical-align: top;
482
- 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;
483
486
  width: 100%;
484
487
  }
485
488
 
@@ -518,14 +521,14 @@ svc-tab-test {
518
521
  text-align: left;
519
522
  }
520
523
  .sl-table tbody tr:last-of-type .sl-table__cell {
521
- 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))));
522
525
  }
523
526
  .sl-table tr:first-of-type .sl-table__cell {
524
- 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))));
525
528
  }
526
529
  .sl-table td:first-of-type,
527
530
  .sl-table th:first-of-type {
528
- 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))));
529
532
  }
530
533
  .sl-table td:first-of-type .sv-action-bar,
531
534
  .sl-table th:first-of-type .sv-action-bar {
@@ -533,7 +536,7 @@ svc-tab-test {
533
536
  }
534
537
  .sl-table td:last-of-type,
535
538
  .sl-table th:last-of-type {
536
- 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))));
537
540
  }
538
541
 
539
542
  .sl-panel .sl-panel__footer {
@@ -547,12 +550,12 @@ svc-tab-test {
547
550
  }
548
551
  .sl-panel .sl-panel__footer button.sl-panel__done-button {
549
552
  width: 100%;
550
- 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;
551
554
  color: var(--sjs-primary-backcolor, var(--primary, #19b394));
552
555
  background-color: var(--sjs-primary-backcolor-light, var(--primary-light, rgba(25, 179, 148, 0.1)));
553
556
  font-family: var(--font-family);
554
- font-size: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
555
- 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))));
556
559
  display: flex;
557
560
  align-items: center;
558
561
  vertical-align: baseline;
@@ -579,7 +582,7 @@ svc-tab-test {
579
582
  .sl-question {
580
583
  display: flex;
581
584
  align-items: center;
582
- 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))));
583
586
  }
584
587
 
585
588
  .sl-row {
@@ -593,7 +596,7 @@ svc-tab-test {
593
596
  }
594
597
 
595
598
  .sl-question__header--left {
596
- margin-right: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
599
+ margin-right: var(--sjs-base-unit, var(--base-unit, 8px));
597
600
  }
598
601
 
599
602
  .sl-row .sd-scrollable-container:not(.sd-scrollable-container--compact) {
@@ -602,8 +605,8 @@ svc-tab-test {
602
605
 
603
606
  .sl-question__title {
604
607
  color: var(--sjs-general-forecolor, var(--foreground, #161616));
605
- font-size: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
606
- 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))));
607
610
  margin: 0;
608
611
  font-weight: 600;
609
612
  }
@@ -612,19 +615,19 @@ svc-tab-test {
612
615
  }
613
616
 
614
617
  .sl-row--multiple .sl-question {
615
- padding-right: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
618
+ padding-right: var(--sjs-base-unit, var(--base-unit, 8px));
616
619
  }
617
620
 
618
621
  .svc-logic-question-value {
619
622
  --sd-base-padding: calc(5 * var(--sjs-base-unit, var(--base-unit, 8px)));
620
623
  --sd-base-vertical-padding: calc(4 * var(--sjs-base-unit, var(--base-unit, 8px)));
621
624
  --sd-page-vertical-padding: calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
622
- padding-right: calc(5 * var(--sjs-base-unit, var(--base-unit, 8px)));
623
- 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))));
624
627
  }
625
628
 
626
629
  .svc-logic_trigger-editor {
627
- 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))));
628
631
  }
629
632
 
630
633
  .svc-logic_trigger-editor .svc-logic-question-value {
@@ -636,7 +639,7 @@ svc-tab-test {
636
639
  }
637
640
 
638
641
  .spg-comment.sl-comment {
639
- height: calc(17 * var(--sjs-base-unit, var(--base-unit, 8px)));
642
+ height: calc(17 * (var(--sjs-base-unit, var(--base-unit, 8px))));
640
643
  }
641
644
  .svc-tab-translation {
642
645
  width: 100%;
@@ -647,15 +650,15 @@ svc-tab-test {
647
650
  .st-properties {
648
651
  background-color: var(--sjs-general-backcolor-dim, var(--background-dim, #f3f3f3));
649
652
  flex-grow: 1;
650
- padding-right: calc(4 * var(--sjs-base-unit, var(--base-unit, 8px)));
651
- padding-left: calc(4 * var(--sjs-base-unit, var(--base-unit, 8px)));
652
- 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))));
653
656
  }
654
657
  .st-properties .spg-table .spg-table__cell:first-of-type {
655
- width: calc(5 * var(--sjs-base-unit, var(--base-unit, 8px)));
658
+ width: calc(5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
656
659
  }
657
660
  .st-properties .spg-table .spg-table__question-wrapper {
658
- 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));
659
662
  }
660
663
  .st-properties .spg-table .spg-table__question-wrapper .spg-checkbox {
661
664
  margin: 0;
@@ -669,10 +672,11 @@ svc-tab-test {
669
672
  }
670
673
 
671
674
  .st-no-strings {
675
+ --center-text-font-size: var(--sjs-base-unit, var(--base-unit, 8px));
672
676
  font-family: var(--font-family);
673
677
  font-style: normal;
674
678
  font-weight: 400;
675
- font-size: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
679
+ font-size: calc(2 * var(--center-text-font-size));
676
680
  color: var(--sjs-general-forecolor, var(--foreground, #161616));
677
681
  width: 100%;
678
682
  position: absolute;
@@ -709,7 +713,7 @@ svc-tab-test {
709
713
  }
710
714
 
711
715
  .st-property-panel .spg-panel__content .spg-row:first-child {
712
- 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))));
713
717
  }
714
718
 
715
719
  .st-strings-header .st-table__cell {
@@ -723,19 +727,20 @@ svc-tab-test {
723
727
 
724
728
  .st-title.st-panel__title,
725
729
  .st-table__cell.st-table__cell--header {
726
- 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);
727
732
  font-style: normal;
728
733
  font-weight: 600;
729
- font-size: calc(0.75 * var(--sjs-font-size, calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)))));
730
- 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)))));
731
736
  color: var(--sjs-general-forecolor-light, var(--foreground-light, #909090));
732
737
  text-align: left;
733
738
  }
734
739
 
735
740
  .st-title.st-panel__title {
736
- height: calc(4 * var(--sjs-base-unit, var(--base-unit, 8px)));
737
- line-height: calc(4 * var(--sjs-base-unit, var(--base-unit, 8px)));
738
- 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))));
739
744
  margin: 0;
740
745
  background-color: var(--sjs-general-backcolor-dim-light, var(--background-dim-light, #f9f9f9));
741
746
  border-bottom: 1px solid var(--sjs-border-light, var(--border-light, #eaeaea));
@@ -752,26 +757,27 @@ svc-tab-test {
752
757
  box-sizing: border-box;
753
758
  background-color: var(--sjs-general-backcolor, var(--background, #fff));
754
759
  border-bottom: 1px solid var(--sjs-border-light, var(--border-light, #eaeaea));
755
- padding: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px))) 0;
760
+ padding: var(--sjs-base-unit, var(--base-unit, 8px)) 0;
756
761
  }
757
762
 
758
763
  td.st-table__cell:first-of-type {
759
- 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);
760
766
  font-style: normal;
761
767
  font-weight: 600;
762
- font-size: calc(1 * var(--sjs-font-size, calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)))));
763
- 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));
764
770
  color: var(--sjs-general-forecolor, var(--foreground, #161616));
765
771
  max-width: 300px;
766
- 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))));
767
773
  }
768
774
  td.st-table__cell:first-of-type span {
769
775
  display: inline-block;
770
- 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))));
771
777
  }
772
778
 
773
779
  .st-panel-indent .st-table__cell:first-of-type span {
774
- 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))));
775
781
  }
776
782
 
777
783
  .st-table {
@@ -782,10 +788,11 @@ td.st-table__cell:first-of-type span {
782
788
  }
783
789
 
784
790
  .st-comment {
785
- 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);
786
793
  font-style: normal;
787
- font-size: calc(1 * var(--sjs-font-size, calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)))));
788
- 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));
789
796
  display: block;
790
797
  width: calc(100% - 3 * var(--sjs-base-unit, var(--base-unit, 8px)));
791
798
  border: unset;
@@ -797,9 +804,34 @@ td.st-table__cell:first-of-type span {
797
804
  }
798
805
 
799
806
  .sd-translation-line-skeleton {
800
- 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))));
801
808
  background-color: var(--sjs-general-backcolor-dim, var(--background-dim, #f3f3f3));
802
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
+ }
803
835
  .svc-tab-logic-edit {
804
836
  width: 100%;
805
837
  height: 100%;
@@ -831,23 +863,23 @@ td.st-table__cell:first-of-type span {
831
863
  }
832
864
 
833
865
  .svc-logic-paneldynamic div.svc-logic-operator {
834
- height: calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
866
+ height: calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
835
867
  box-sizing: content-box;
836
868
  }
837
869
 
838
870
  .svc-logic-paneldynamic .svc-logic-operator {
839
871
  -webkit-appearance: none;
840
872
  appearance: none;
841
- padding: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px))) calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
842
- 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))));
843
875
  border: none;
844
876
  outline: none;
845
877
  font-weight: 600;
846
878
  font-family: var(--font-family);
847
- 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))));
848
880
  color: var(--sjs-general-forecolor-light, var(--foreground-light, #909090));
849
- height: calc(5 * var(--sjs-base-unit, var(--base-unit, 8px)));
850
- 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))));
851
883
  cursor: pointer;
852
884
  }
853
885
  .svc-logic-paneldynamic .svc-logic-operator option {
@@ -913,11 +945,11 @@ td.st-table__cell:first-of-type span {
913
945
 
914
946
  .svc-logic-condition-remove.svc-icon-remove {
915
947
  display: none;
916
- width: calc(5 * var(--sjs-base-unit, var(--base-unit, 8px)));
917
- 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))));
918
950
  background-repeat: no-repeat;
919
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");
920
- 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))));
921
953
  background-position: center;
922
954
  }
923
955
 
@@ -932,7 +964,7 @@ td.st-table__cell:first-of-type span {
932
964
  }
933
965
 
934
966
  .svc-logic-condition-remove-question {
935
- height: calc(5 * var(--sjs-base-unit, var(--base-unit, 8px)));
967
+ height: calc(5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
936
968
  }
937
969
 
938
970
  .svc-logic-paneldynamic__button.svc-logic-paneldynamic__remove-btn {
@@ -946,7 +978,7 @@ td.st-table__cell:first-of-type span {
946
978
  .svc-logic-operator--action.sl-paneldynamic__add-btn.sl-paneldynamic__add-btn,
947
979
  .svc-logic-operator--operator.sl-paneldynamic__add-btn.sl-paneldynamic__add-btn {
948
980
  color: var(--sjs-general-forecolor-light, var(--foreground-light, #909090));
949
- 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))));
950
982
  }
951
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,
952
984
  .svc-logic-operator--operator.sl-paneldynamic__add-btn.sl-paneldynamic__add-btn:hover,
@@ -962,17 +994,17 @@ td.st-table__cell:first-of-type span {
962
994
  top: 35%;
963
995
  }
964
996
  .svc-logic-tab__content.svc-logic-tab__empty .svc-logic-tab__content-action {
965
- width: calc(33 * var(--sjs-base-unit, var(--base-unit, 8px)));
966
- 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))));
967
999
  }
968
1000
  .svc-logic-tab__content .svc-logic-tab__content-action {
969
1001
  margin-left: 25%;
970
1002
  margin-right: 25%;
971
- 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))));
972
1004
  }
973
1005
  .svc-logic-tab__content .svc-logic-tab__content-action--disabled {
974
1006
  cursor: default;
975
- 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;
976
1008
  }
977
1009
  .svc-logic-tab__content .svc-logic-tab__content-action--disabled:focus, .svc-logic-tab__content .svc-logic-tab__content-action--disabled:hover {
978
1010
  background-color: var(--sjs-general-backcolor, var(--background, #fff));
@@ -1031,16 +1063,20 @@ td.st-table__cell:first-of-type span {
1031
1063
  white-space: nowrap;
1032
1064
  }
1033
1065
 
1066
+ .sl-list__item-body {
1067
+ padding-block: calc(1.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
1068
+ }
1069
+
1034
1070
  .svc-logic-placeholder {
1035
- width: calc(78 * var(--sjs-base-unit, var(--base-unit, 8px)));
1071
+ width: calc(78 * (var(--sjs-base-unit, var(--base-unit, 8px))));
1036
1072
  min-width: 100%;
1037
1073
  max-width: 100%;
1038
1074
  box-sizing: border-box;
1039
- 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))));
1040
1076
  background: var(--sjs-general-backcolor, var(--background, #fff));
1041
1077
  box-shadow: var(--sjs-shadow-small, 0px 1px 2px 0px rgba(0, 0, 0, 0.15));
1042
- border-radius: calc(0.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
1043
- 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))));
1044
1080
  }
1045
1081
 
1046
1082
  .sv-popup--overlay .svc-logic-placeholder {
@@ -1051,12 +1087,12 @@ td.st-table__cell:first-of-type span {
1051
1087
  font-family: var(--font-family);
1052
1088
  font-style: normal;
1053
1089
  font-weight: 400;
1054
- font-size: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
1055
- 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))));
1056
1092
  text-align: center;
1057
1093
  color: var(--sjs-general-forecolor-light, var(--foreground-light, #909090));
1058
1094
  display: block;
1059
- 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))));
1060
1096
  }
1061
1097
 
1062
1098
  .svc-logic-tab__leave-apply-button {
@@ -1090,7 +1126,7 @@ svc-tab-designer {
1090
1126
  }
1091
1127
 
1092
1128
  .svc-tab-designer--with-place-holder .svc-designer-header {
1093
- 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))));
1094
1130
  }
1095
1131
 
1096
1132
  .svc-tab-designer .svc-designer-header .sd-container-modern__title {
@@ -1103,14 +1139,14 @@ svc-tab-designer {
1103
1139
  display: flex;
1104
1140
  }
1105
1141
  .svc-tab-designer .sd-container-modern {
1106
- 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))));
1107
1143
  width: 100%;
1108
1144
  box-sizing: border-box;
1109
1145
  margin-left: auto;
1110
1146
  margin-right: auto;
1111
1147
  }
1112
1148
  .svc-tab-designer .sd-container-modern.sd-container-modern--static {
1113
- 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))));
1114
1150
  }
1115
1151
  .svc-tab-designer .sd-container-modern.sd-container-modern--responsive {
1116
1152
  max-width: initial;
@@ -1134,16 +1170,16 @@ svc-tab-designer {
1134
1170
  flex-direction: column;
1135
1171
  align-items: center;
1136
1172
  justify-content: center;
1137
- padding: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
1173
+ padding: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
1138
1174
  box-sizing: border-box;
1139
1175
  }
1140
1176
 
1141
1177
  .svc-designer-placeholder-page {
1142
- 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))));
1143
1179
  }
1144
1180
 
1145
1181
  .svc-designer-placeholder-page .svc-page__footer {
1146
- width: calc(33 * var(--sjs-base-unit, var(--base-unit, 8px)));
1182
+ width: calc(33 * (var(--sjs-base-unit, var(--base-unit, 8px))));
1147
1183
  margin: auto;
1148
1184
  }
1149
1185
 
@@ -1164,10 +1200,10 @@ svc-tab-designer {
1164
1200
  margin-left: 0;
1165
1201
  }
1166
1202
  .svc-creator--mobile .svc-question__content--selected .svc-rating-question-controls {
1167
- bottom: calc(10 * var(--sjs-base-unit, var(--base-unit, 8px)));
1203
+ bottom: calc(10 * (var(--sjs-base-unit, var(--base-unit, 8px))));
1168
1204
  }
1169
1205
  .svc-creator--mobile .svc-page {
1170
- margin-top: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
1206
+ margin-top: var(--sjs-base-unit, var(--base-unit, 8px));
1171
1207
  }
1172
1208
  .svc-creator--mobile .svc-page__content {
1173
1209
  padding-left: 0;
@@ -1178,26 +1214,26 @@ svc-tab-designer {
1178
1214
  margin: 0;
1179
1215
  }
1180
1216
  .svc-creator--mobile .svc-page__content.svc-page__content--selected .sd-page__title {
1181
- 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;
1182
1218
  }
1183
1219
  .svc-creator--mobile .svc-page__content .sd-page {
1184
- 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))));
1185
1221
  }
1186
1222
  .svc-creator--mobile .svc-page__content .svc-page__footer {
1187
- margin-left: calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
1188
- 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))));
1189
1225
  }
1190
1226
  .svc-creator--mobile .svc-question__content {
1191
- 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))));
1192
1228
  }
1193
1229
  .svc-creator--mobile .svc-question__content.svc-question__content--selected {
1194
- 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))));
1195
1231
  }
1196
1232
  .svc-creator--mobile .svc-tab-designer {
1197
1233
  justify-content: initial;
1198
1234
  }
1199
1235
  .svc-creator--mobile .svc-tab-designer .sd-title.sd-container-modern__title {
1200
- padding: calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
1236
+ padding: calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
1201
1237
  flex-direction: column-reverse;
1202
1238
  align-items: flex-start;
1203
1239
  }
@@ -1205,19 +1241,19 @@ svc-tab-designer {
1205
1241
  margin-top: 0;
1206
1242
  }
1207
1243
  .svc-creator--mobile .svc-tab-designer .sd-title.sd-container-modern__title .svc-logo-image-placeholder {
1208
- margin-left: calc(-2 * var(--sjs-base-unit, var(--base-unit, 8px)));
1209
- 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))));
1210
1246
  }
1211
1247
  .svc-creator--mobile .svc-tab-designer .sd-title.sd-container-modern__title h3 {
1212
1248
  margin: 0;
1213
- font-size: calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
1214
- 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))));
1215
1251
  }
1216
1252
  .svc-creator--mobile .svc-tab-designer .sd-title.sd-container-modern__title h5 {
1217
1253
  margin: 0;
1218
1254
  }
1219
1255
  .svc-creator--mobile .svc-tab-designer .sd-container-modern {
1220
- 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))));
1221
1257
  padding: 0;
1222
1258
  }
1223
1259
  .svc-creator--mobile .svc-properties-wrapper {
@@ -1225,13 +1261,13 @@ svc-tab-designer {
1225
1261
  }
1226
1262
  .svc-creator--mobile .svc-question__content-actions {
1227
1263
  width: calc(100% - 3 * var(--sjs-base-unit, var(--base-unit, 8px)));
1228
- left: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
1264
+ left: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
1229
1265
  }
1230
1266
  .svc-creator--mobile .svc-question__content-actions .sv-action-bar-item {
1231
1267
  border: 0;
1232
1268
  }
1233
1269
  .svc-creator--mobile .svc-page__content-actions .sv-action-bar {
1234
- padding-right: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
1270
+ padding-right: var(--sjs-base-unit, var(--base-unit, 8px));
1235
1271
  }
1236
1272
  .svc-creator--mobile .svc-page__content-actions .sv-action-bar .sv-action .sv-action__content {
1237
1273
  padding-right: 0;
@@ -1258,10 +1294,10 @@ svc-tab-test {
1258
1294
  border: 0;
1259
1295
  }
1260
1296
  .svc-test-tab__content .svc-plugin-tab__content .svc-preview__test-again {
1261
- width: calc(33 * var(--sjs-base-unit, var(--base-unit, 8px)));
1297
+ width: calc(33 * (var(--sjs-base-unit, var(--base-unit, 8px))));
1262
1298
  margin-left: auto;
1263
1299
  margin-right: auto;
1264
- margin-bottom: 72px;
1300
+ margin-bottom: calc(12 * (var(--sjs-base-unit, var(--base-unit, 8px))));
1265
1301
  margin-top: 8px;
1266
1302
  }
1267
1303
 
@@ -1284,7 +1320,7 @@ svc-tab-test {
1284
1320
  left: 0;
1285
1321
  right: 0;
1286
1322
  justify-content: center;
1287
- gap: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
1323
+ gap: var(--sjs-base-unit, var(--base-unit, 8px));
1288
1324
  }
1289
1325
  .svc-test-tab__content-actions .sv-action-bar.sv-action-bar--pages .sv-action__content {
1290
1326
  padding: 0;
@@ -1293,13 +1329,14 @@ svc-tab-test {
1293
1329
  margin: 0;
1294
1330
  }
1295
1331
  .svc-test-tab__content-actions .sv-action-bar-item {
1296
- 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);
1297
1334
  font-style: normal;
1298
1335
  font-weight: 600;
1299
- font-size: calc(0.75 * var(--sjs-font-size, calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)))));
1300
- 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)))));
1301
1338
  width: 100%;
1302
- height: calc(4 * var(--sjs-base-unit, var(--base-unit, 8px)));
1339
+ height: calc(4 * (var(--sjs-base-unit, var(--base-unit, 8px))));
1303
1340
  }
1304
1341
  .svc-test-tab__content-actions .svc-page-selector {
1305
1342
  max-width: 50%;
@@ -1318,23 +1355,24 @@ svc-tab-test {
1318
1355
 
1319
1356
  .svc-notifier {
1320
1357
  position: absolute;
1321
- bottom: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
1322
- 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));
1323
1360
  background: var(--sjs-general-backcolor, var(--background, #fff));
1324
1361
  opacity: 0;
1325
- 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))));
1326
1363
  box-shadow: var(--sjs-shadow-medium, 0px 2px 6px 0px rgba(0, 0, 0, 0.1));
1327
- 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))));
1328
1365
  color: var(--sjs-general-forecolor, var(--foreground, #161616));
1329
- 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))));
1330
1367
  text-align: center;
1331
1368
  z-index: 1600;
1332
1369
  visibility: hidden;
1333
- 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);
1334
1372
  font-style: normal;
1335
1373
  font-weight: 600;
1336
- font-size: calc(0.75 * var(--sjs-font-size, calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)))));
1337
- 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)))));
1338
1376
  }
1339
1377
 
1340
1378
  .svc-notifier.svc-notifier--error {
@@ -1345,7 +1383,7 @@ svc-tab-test {
1345
1383
 
1346
1384
  .svc-creator--mobile .svc-notifier {
1347
1385
  left: 0;
1348
- bottom: calc(6 * var(--sjs-base-unit, var(--base-unit, 8px)));
1386
+ bottom: calc(6 * (var(--sjs-base-unit, var(--base-unit, 8px))));
1349
1387
  width: 100%;
1350
1388
  box-sizing: border-box;
1351
1389
  opacity: 1;
@@ -1448,10 +1486,10 @@ survey-creator ::-webkit-scrollbar-thumb:hover,
1448
1486
 
1449
1487
  .svc-creator__banner {
1450
1488
  position: absolute;
1451
- bottom: calc(-4 * var(--sjs-base-unit, var(--base-unit, 8px)));
1489
+ bottom: calc(-4 * (var(--sjs-base-unit, var(--base-unit, 8px))));
1452
1490
  width: 100%;
1453
- height: calc(4 * var(--sjs-base-unit, var(--base-unit, 8px)));
1454
- 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))));
1455
1493
  background-color: var(--sjs-secondary-backcolor, var(--secondary, #ff9814));
1456
1494
  text-align: center;
1457
1495
  overflow: hidden;
@@ -1465,7 +1503,7 @@ survey-creator ::-webkit-scrollbar-thumb:hover,
1465
1503
  height: 100%;
1466
1504
  background-color: var(--sjs-general-backcolor, var(--background, #fff));
1467
1505
  /* Shadow / Medium */
1468
- 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))));
1469
1507
  box-shadow: var(--sjs-shadow-medium, 0px 2px 6px 0px rgba(0, 0, 0, 0.1));
1470
1508
  transition: max-width 0.1s ease-in-out, padding 0.2s ease-in-out;
1471
1509
  }
@@ -1474,7 +1512,7 @@ survey-creator ::-webkit-scrollbar-thumb:hover,
1474
1512
  color: var(--sjs-primary-forecolor, var(--primary-foreground, #fff));
1475
1513
  font-family: var(--font-family);
1476
1514
  font-weight: bold;
1477
- 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))));
1478
1516
  text-transform: uppercase;
1479
1517
  vertical-align: middle;
1480
1518
  }
@@ -1484,9 +1522,9 @@ survey-creator ::-webkit-scrollbar-thumb:hover,
1484
1522
  }
1485
1523
 
1486
1524
  .sv-drag-drop-ghost {
1487
- 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))));
1488
1526
  width: 100%;
1489
- 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))));
1490
1528
  background: var(--sjs-secondary-backcolor, var(--secondary, #ff9814));
1491
1529
  position: absolute;
1492
1530
  }
@@ -1498,11 +1536,11 @@ survey-creator ::-webkit-scrollbar-thumb:hover,
1498
1536
 
1499
1537
  .sv-drag-drop-ghost--item-value-bottom {
1500
1538
  top: initial;
1501
- 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))));
1502
1540
  }
1503
1541
 
1504
1542
  .sv-list__filter {
1505
- margin-bottom: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
1543
+ margin-bottom: var(--sjs-base-unit, var(--base-unit, 8px));
1506
1544
  }
1507
1545
  .sd-element__title .svc-string-editor {
1508
1546
  display: inline-block;
@@ -1555,12 +1593,12 @@ survey-creator ::-webkit-scrollbar-thumb:hover,
1555
1593
  z-index: 20;
1556
1594
  padding: 0px;
1557
1595
  vertical-align: top;
1558
- margin-inline-start: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
1559
- 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))));
1560
1598
  font-family: var(--font-family);
1561
1599
  font-weight: 400;
1562
1600
  color: var(--sjs-general-forecolor-light, var(--foreground-light, #909090));
1563
- 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))));
1564
1602
  }
1565
1603
 
1566
1604
  .svc-string-editor__border {
@@ -1574,9 +1612,9 @@ survey-creator ::-webkit-scrollbar-thumb:hover,
1574
1612
  }
1575
1613
 
1576
1614
  .svc-string-editor__error {
1577
- margin-left: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
1578
- line-height: calc(4 * var(--sjs-base-unit, var(--base-unit, 8px)));
1579
- 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))));
1580
1618
  color: red;
1581
1619
  display: none;
1582
1620
  }
@@ -1585,9 +1623,9 @@ survey-creator ::-webkit-scrollbar-thumb:hover,
1585
1623
  position: absolute;
1586
1624
  left: 100%;
1587
1625
  height: 100%;
1588
- width: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
1626
+ width: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
1589
1627
  top: 0;
1590
- 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))));
1591
1629
  z-index: 12;
1592
1630
  display: none;
1593
1631
  align-items: center;
@@ -1604,9 +1642,9 @@ survey-creator ::-webkit-scrollbar-thumb:hover,
1604
1642
  }
1605
1643
 
1606
1644
  .svc-string-editor__button--edit {
1607
- height: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
1608
- width: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
1609
- 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));
1610
1648
  }
1611
1649
  .svc-string-editor__button--edit .sv-svg-icon {
1612
1650
  vertical-align: bottom;
@@ -1623,26 +1661,26 @@ survey-creator ::-webkit-scrollbar-thumb:hover,
1623
1661
  display: flex;
1624
1662
  top: 0;
1625
1663
  bottom: 0;
1626
- left: calc(-0.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
1627
- 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))));
1628
1666
  border-radius: 3px;
1629
- 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);
1630
1668
  }
1631
1669
 
1632
1670
  .svc-string-editor:focus-within .svc-string-editor__border {
1633
1671
  display: flex;
1634
- top: calc(-0.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
1635
- bottom: calc(-0.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
1636
- left: calc(-1 * var(--sjs-base-unit, var(--base-unit, 8px)));
1637
- 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))));
1638
1676
  border-radius: 3px;
1639
1677
  box-sizing: content-box;
1640
1678
  background-color: var(--sjs-general-backcolor, var(--background, #fff));
1641
- 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));
1642
1680
  }
1643
1681
 
1644
1682
  .svc-string-editor.svc-string-editor--error:focus-within .svc-string-editor__border {
1645
- 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));
1646
1684
  }
1647
1685
 
1648
1686
  .sd-boolean .sv-string-editor:focus-within {
@@ -1650,7 +1688,7 @@ survey-creator ::-webkit-scrollbar-thumb:hover,
1650
1688
  }
1651
1689
 
1652
1690
  .sd-rating .sd-rating__item:focus-within {
1653
- 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));
1654
1692
  }
1655
1693
  .sd-rating:not(.sd-rating__min-text) .svc-string-editor:focus-within .svc-string-editor__border {
1656
1694
  display: none;
@@ -1658,12 +1696,12 @@ survey-creator ::-webkit-scrollbar-thumb:hover,
1658
1696
 
1659
1697
  .sd-table__cell--actions .svc-string-editor__button--done,
1660
1698
  .sd-matrixdynamic__add-btn .svc-string-editor__button--done {
1661
- width: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
1699
+ width: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
1662
1700
  }
1663
1701
 
1664
1702
  .sd-table__cell--column-title .svc-matrix-cell:not(:focus):focus-within .svc-matrix-cell--selected {
1665
- border: calc(0.25 * var(--sjs-base-unit, var(--base-unit, 8px))) solid var(--sjs-primary-backcolor, var(--primary, #19b394));
1666
- 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))));
1667
1705
  display: block;
1668
1706
  }
1669
1707
  .sd-table__cell--column-title .svc-string-editor:focus-within .svc-string-editor__border {
@@ -1671,8 +1709,8 @@ survey-creator ::-webkit-scrollbar-thumb:hover,
1671
1709
  }
1672
1710
 
1673
1711
  .sd-item__control-label .svc-string-editor:focus-within .svc-string-editor__border {
1674
- left: calc(-0.7 * var(--sjs-base-unit, var(--base-unit, 8px)));
1675
- 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))));
1676
1714
  }
1677
1715
 
1678
1716
  .svc-string-editor:hover ~ .sd-question__required-text, .svc-string-editor:focus-within ~ .sd-question__required-text {
@@ -1681,16 +1719,16 @@ survey-creator ::-webkit-scrollbar-thumb:hover,
1681
1719
  .svc-btn {
1682
1720
  display: flex;
1683
1721
  align-items: center;
1684
- height: calc(7 * var(--sjs-base-unit, var(--base-unit, 8px)));
1685
- 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))));
1686
1724
  vertical-align: baseline;
1687
1725
  text-align: center;
1688
1726
  background-color: var(--sjs-general-backcolor, var(--background, #fff));
1689
1727
  box-shadow: var(--sjs-shadow-small, 0px 1px 2px 0px rgba(0, 0, 0, 0.15));
1690
- 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))));
1691
1729
  cursor: pointer;
1692
1730
  user-select: none;
1693
- 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;
1694
1732
  }
1695
1733
  .svc-btn .svc-text {
1696
1734
  display: flex;
@@ -1710,14 +1748,14 @@ survey-creator ::-webkit-scrollbar-thumb:hover,
1710
1748
 
1711
1749
  .svc-action-button {
1712
1750
  display: inline-block;
1713
- 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))));
1714
1752
  box-sizing: border-box;
1715
- 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))));
1716
1754
  color: var(--sjs-primary-backcolor, var(--primary, #19b394));
1717
1755
  font-weight: 600;
1718
- font-size: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
1719
- line-height: calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
1720
- 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;
1721
1759
  }
1722
1760
  .svc-action-button:focus, .svc-action-button:hover {
1723
1761
  background-color: var(--sjs-primary-backcolor-light, var(--primary-light, rgba(25, 179, 148, 0.1)));
@@ -1740,9 +1778,9 @@ svc-page-navigator,
1740
1778
 
1741
1779
  .svc-page-navigator__navigator-icon {
1742
1780
  display: block;
1743
- height: calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
1744
- width: calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
1745
- 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))));
1746
1784
  border-radius: 50%;
1747
1785
  cursor: pointer;
1748
1786
  }
@@ -1751,9 +1789,9 @@ svc-page-navigator,
1751
1789
  }
1752
1790
 
1753
1791
  .svc-page-navigator__selector {
1754
- width: calc(5.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
1755
- height: calc(5.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
1756
- 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))));
1757
1795
  }
1758
1796
 
1759
1797
  survey-creator .svc-page-navigator__selector:hover, survey-creator .svc-page-navigator__selector:focus,
@@ -1781,20 +1819,20 @@ survey-creator .svc-page-navigator__selector:hover .svc-page-navigator__navigato
1781
1819
  }
1782
1820
 
1783
1821
  .svc-page-navigator__popup {
1784
- 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))));
1785
1823
  }
1786
1824
 
1787
1825
  .svc-tab-designer--with-page-navigator .svc-tab-designer_content {
1788
- 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))));
1789
1827
  }
1790
1828
 
1791
1829
  .svc-tab-designer__page-navigator {
1792
- 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))));
1793
1831
  position: absolute;
1794
- 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;
1795
1833
  top: 0;
1796
1834
  bottom: 0;
1797
- right: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
1835
+ right: var(--sjs-base-unit, var(--base-unit, 8px));
1798
1836
  }
1799
1837
 
1800
1838
  .svc-creator__toolbox--right .svc-tab-designer--with-page-navigator .svc-tab-designer_content,
@@ -1802,21 +1840,21 @@ survey-creator .svc-page-navigator__selector:hover .svc-page-navigator__navigato
1802
1840
  [style*="direction:rtl"] .svc-tab-designer--with-page-navigator .svc-tab-designer_content,
1803
1841
  [style*="direction: rtl"] .svc-tab-designer--with-page-navigator .svc-tab-designer_content {
1804
1842
  margin-right: 0;
1805
- 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))));
1806
1844
  }
1807
1845
  .svc-creator__toolbox--right .svc-tab-designer__page-navigator,
1808
1846
  [dir=rtl] .svc-tab-designer__page-navigator,
1809
1847
  [style*="direction:rtl"] .svc-tab-designer__page-navigator,
1810
1848
  [style*="direction: rtl"] .svc-tab-designer__page-navigator {
1811
1849
  right: unset;
1812
- left: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
1850
+ left: var(--sjs-base-unit, var(--base-unit, 8px));
1813
1851
  }
1814
1852
  svc-page-navigator-item,
1815
1853
  .svc-page-navigator-item {
1816
1854
  display: block;
1817
- width: calc(5.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
1818
- height: calc(4.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
1819
- 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))));
1820
1858
  cursor: pointer;
1821
1859
  position: relative;
1822
1860
  }
@@ -1857,22 +1895,22 @@ svc-page-navigator-item,
1857
1895
  }
1858
1896
 
1859
1897
  .svc-page-navigator-item--selected .svc-page-navigator-item__dot {
1860
- width: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
1861
- 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));
1862
1900
  right: calc(50% - 1.5 * var(--sjs-base-unit, var(--base-unit, 8px)) / 2);
1863
1901
  top: calc(50% - 1.5 * var(--sjs-base-unit, var(--base-unit, 8px)) / 2);
1864
1902
  background: var(--sjs-general-backcolor, var(--background, #fff));
1865
- 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));
1866
1904
  }
1867
1905
 
1868
1906
  .svc-page-navigator-item__banner {
1869
1907
  overflow: hidden;
1870
1908
  white-space: nowrap;
1871
1909
  text-overflow: ellipsis;
1872
- 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))));
1873
1911
  display: flex;
1874
1912
  align-items: center;
1875
- 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))));
1876
1914
  animation: 0.5s ease-in;
1877
1915
  padding: 0;
1878
1916
  opacity: 0;
@@ -1881,8 +1919,8 @@ svc-page-navigator-item,
1881
1919
  .svc-page-navigator-item__banner .svc-page-navigator-item__dot {
1882
1920
  position: absolute;
1883
1921
  display: inline-block;
1884
- top: calc(1.75 * var(--sjs-base-unit, var(--base-unit, 8px)));
1885
- 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))));
1886
1924
  }
1887
1925
 
1888
1926
  .svc-creator__toolbox--right .svc-page-navigator-item__banner,
@@ -1897,20 +1935,20 @@ svc-page-navigator-item,
1897
1935
  [style*="direction:rtl"] .svc-page-navigator-item__banner .svc-page-navigator-item__dot,
1898
1936
  [style*="direction: rtl"] .svc-page-navigator-item__banner .svc-page-navigator-item__dot {
1899
1937
  right: unset;
1900
- 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))));
1901
1939
  }
1902
1940
 
1903
1941
  .svc-page-navigator-item-content:not(.svc-page-navigator-item--disabled) .svc-page-navigator-item__banner .svc-page-navigator-item__dot {
1904
- width: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
1905
- 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));
1906
1944
  border: none;
1907
1945
  background: var(--sjs-primary-backcolor, var(--primary, #19b394));
1908
1946
  }
1909
1947
 
1910
1948
  .svc-page-navigator-item-content:not(.svc-page-navigator-item--selected):hover .svc-page-navigator-item__banner,
1911
1949
  .svc-page-navigator-item-content:not(.svc-page-navigator-item--selected):focus .svc-page-navigator-item__banner {
1912
- 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)));
1913
- 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))));
1914
1952
  opacity: 1;
1915
1953
  }
1916
1954
 
@@ -1922,7 +1960,7 @@ svc-page-navigator-item,
1922
1960
  [style*="direction:rtl"] .svc-page-navigator-item-content:not(.svc-page-navigator-item--selected):focus .svc-page-navigator-item__banner,
1923
1961
  [style*="direction: rtl"] .svc-page-navigator-item-content:not(.svc-page-navigator-item--selected):hover .svc-page-navigator-item__banner,
1924
1962
  [style*="direction: rtl"] .svc-page-navigator-item-content:not(.svc-page-navigator-item--selected):focus .svc-page-navigator-item__banner {
1925
- 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))));
1926
1964
  }
1927
1965
 
1928
1966
  .svc-page-navigator-item--disabled .svc-page-navigator-item__banner {
@@ -1934,31 +1972,31 @@ svc-page {
1934
1972
  }
1935
1973
 
1936
1974
  .svc-page {
1937
- 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))));
1938
1976
  }
1939
1977
  .svc-page .sd-page__title {
1940
- 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;
1941
1979
  }
1942
1980
 
1943
1981
  .svc-page__content {
1944
1982
  position: relative;
1945
- border-radius: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
1946
- 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))));
1947
1985
  box-sizing: border-box;
1948
1986
  width: 100%;
1949
1987
  outline: none;
1950
1988
  }
1951
1989
  .svc-page__content .sd-page {
1952
1990
  margin: 0;
1953
- 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))));
1954
1992
  }
1955
1993
 
1956
1994
  .svc-page__content-actions {
1957
1995
  position: absolute;
1958
1996
  display: none;
1959
- top: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
1997
+ top: var(--sjs-base-unit, var(--base-unit, 8px));
1960
1998
  inset-inline-end: 0;
1961
- 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))));
1962
2000
  z-index: 1;
1963
2001
  }
1964
2002
 
@@ -1981,9 +2019,9 @@ svc-page {
1981
2019
 
1982
2020
  .svc-page__footer {
1983
2021
  overflow: visible;
1984
- margin-left: calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
1985
- margin-right: calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
1986
- 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))));
1987
2025
  }
1988
2026
  .svc-page__footer .sv-action {
1989
2027
  flex: 1 1 0;
@@ -1994,20 +2032,20 @@ svc-page {
1994
2032
  }
1995
2033
 
1996
2034
  .svc-page__add-new-question .svc-text {
1997
- 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))));
1998
2036
  }
1999
2037
 
2000
2038
  .svc-page__question-type-selector {
2001
2039
  appearance: none;
2002
2040
  display: flex;
2003
- height: calc(5 * var(--sjs-base-unit, var(--base-unit, 8px)));
2004
- 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));
2005
2043
  box-sizing: border-box;
2006
2044
  border: none;
2007
2045
  border-radius: 2px;
2008
2046
  background-color: transparent;
2009
2047
  cursor: pointer;
2010
- 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));
2011
2049
  outline: none;
2012
2050
  }
2013
2051
  .svc-page__question-type-selector use {
@@ -2024,8 +2062,8 @@ svc-page {
2024
2062
  content: " ";
2025
2063
  position: absolute;
2026
2064
  background: var(--sjs-secondary-backcolor, var(--secondary, #ff9814));
2027
- left: calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
2028
- 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))));
2029
2067
  width: calc(100% - 48px);
2030
2068
  height: 2px;
2031
2069
  }
@@ -2048,9 +2086,9 @@ svc-page {
2048
2086
  flex-wrap: nowrap;
2049
2087
  margin-top: 0;
2050
2088
  padding-top: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
2051
- 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))));
2052
2090
  padding-bottom: 2px;
2053
- 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))));
2054
2092
  margin-bottom: -2px;
2055
2093
  }
2056
2094
  .svc-row .sd-row.sd-row--multiple .sd-row--multiple {
@@ -2058,7 +2096,7 @@ svc-page {
2058
2096
  }
2059
2097
 
2060
2098
  .sd-panel .svc-row .sd-row--multiple {
2061
- padding: calc(0 * var(--sjs-base-unit, var(--base-unit, 8px)));
2099
+ padding: calc(0 * (var(--sjs-base-unit, var(--base-unit, 8px))));
2062
2100
  box-shadow: none;
2063
2101
  border-radius: 0;
2064
2102
  padding: 2px;
@@ -2075,12 +2113,12 @@ svc-page {
2075
2113
  box-shadow: none;
2076
2114
  }
2077
2115
  .svc-row.svc-row--ghost .sd-row {
2078
- height: calc(4 * var(--sjs-base-unit, var(--base-unit, 8px)));
2116
+ height: calc(4 * (var(--sjs-base-unit, var(--base-unit, 8px))));
2079
2117
  }
2080
2118
  .svc-row.svc-row--ghost:last-child .sd-row {
2081
2119
  height: initial;
2082
- margin-top: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
2083
- 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))));
2084
2122
  }
2085
2123
  .svc-row.svc-row--ghost + .svc-row .sd-page__row {
2086
2124
  margin-top: 0;
@@ -2088,8 +2126,8 @@ svc-page {
2088
2126
 
2089
2127
  .svc-panel .svc-row.svc-row--ghost.svc-row.svc-row--ghost .sd-row {
2090
2128
  height: initial;
2091
- margin-top: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
2092
- 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))));
2093
2131
  }
2094
2132
 
2095
2133
  .svc-row--drag-over-top:before {
@@ -2123,13 +2161,13 @@ svc-page {
2123
2161
  .svc-carry-forward-panel {
2124
2162
  box-sizing: border-box;
2125
2163
  width: 100%;
2126
- padding: calc(4 * var(--sjs-base-unit, var(--base-unit, 8px))) calc(8 * var(--sjs-base-unit, var(--base-unit, 8px)));
2127
- 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));
2128
2166
  background-color: #F8F8F8;
2129
2167
  text-align: center;
2130
2168
  font-weight: 400;
2131
- font-size: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
2132
- 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))));
2133
2171
  color: rgba(0, 0, 0, 0.45);
2134
2172
  }
2135
2173
 
@@ -2177,9 +2215,9 @@ svc-question {
2177
2215
  position: relative;
2178
2216
  width: 100%;
2179
2217
  height: 100%;
2180
- 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))));
2181
2219
  box-sizing: border-box;
2182
- 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))));
2183
2221
  background: var(--sjs-general-backcolor, var(--background, #fff));
2184
2222
  box-shadow: var(--sjs-shadow-small, 0px 1px 2px 0px rgba(0, 0, 0, 0.15));
2185
2223
  outline: none;
@@ -2187,8 +2225,8 @@ svc-question {
2187
2225
 
2188
2226
  .svc-question__content .sd-selectbase:not(.sd-imagepicker) {
2189
2227
  overflow-x: auto;
2190
- padding-left: calc(5 * var(--sjs-base-unit, var(--base-unit, 8px)));
2191
- 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))));
2192
2230
  }
2193
2231
  .svc-question__content .sd-table .sd-selectbase:not(.sd-imagepicker) {
2194
2232
  overflow-x: visible;
@@ -2219,16 +2257,16 @@ svc-question {
2219
2257
  .svc-question__content-actions {
2220
2258
  position: absolute;
2221
2259
  display: none;
2222
- bottom: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
2223
- inset-inline-start: calc(4 * var(--sjs-base-unit, var(--base-unit, 8px)));
2224
- 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))));
2225
2263
  }
2226
2264
  .svc-question__content-actions .sv-action--convertTo {
2227
2265
  max-width: max-content;
2228
2266
  }
2229
2267
  .svc-question__content-actions .sv-action--convertTo .sv-action-bar-item--icon {
2230
2268
  max-width: 100%;
2231
- 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))));
2232
2270
  }
2233
2271
  .svc-question__content-actions .sv-action--convertTo .sv-action-bar-item__title {
2234
2272
  overflow: hidden;
@@ -2240,9 +2278,9 @@ svc-question {
2240
2278
  .svc-question__content-actions .sv-action--convertTo .sv-action-bar-item__title::after {
2241
2279
  content: " ";
2242
2280
  display: inline-block;
2243
- margin-inline-start: calc(0.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
2244
- width: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
2245
- 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))));
2246
2284
  vertical-align: bottom;
2247
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");
2248
2286
  }
@@ -2263,9 +2301,9 @@ svc-question {
2263
2301
  margin-inline-end: auto;
2264
2302
  }
2265
2303
  .svc-question__content-actions .sv-dots {
2266
- width: calc(4 * var(--sjs-base-unit, var(--base-unit, 8px)));
2267
- margin-left: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
2268
- 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))));
2269
2307
  }
2270
2308
  .svc-question__content-actions .sv-dots.sv-action--hidden {
2271
2309
  width: 0;
@@ -2306,17 +2344,17 @@ svc-question {
2306
2344
  }
2307
2345
 
2308
2346
  .svc-question__content .sd-question.sd-question--table {
2309
- margin-top: calc(-1 * var(--sjs-base-unit, var(--base-unit, 8px)));
2310
- 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));
2311
2349
  }
2312
2350
 
2313
2351
  .svc-dragged-element-shortcut {
2314
- height: calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
2315
- 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))));
2316
2354
  background-color: var(--sjs-general-backcolor, var(--background, #fff));
2317
2355
  color: var(--sjs-general-forecolor, var(--foreground, #161616));
2318
- padding: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px))) calc(1.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
2319
- 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))));
2320
2358
  cursor: grabbing;
2321
2359
  position: absolute;
2322
2360
  z-index: 1000;
@@ -2339,19 +2377,20 @@ svc-question {
2339
2377
  }
2340
2378
 
2341
2379
  .svc-dragged-element-shortcut__text {
2342
- 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);
2343
2382
  font-style: normal;
2344
2383
  font-weight: 600;
2345
- font-size: calc(0.75 * var(--sjs-font-size, calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)))));
2346
- line-height: calc(1 * var(--sjs-font-size, calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)))));
2347
- margin-left: calc(4 * var(--sjs-base-unit, var(--base-unit, 8px)));
2348
- 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))));
2349
2388
  }
2350
2389
 
2351
2390
  .svc-dragged-element-shortcut__icon {
2352
2391
  position: absolute;
2353
- width: calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
2354
- 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))));
2355
2394
  }
2356
2395
 
2357
2396
  .svc-question__content--drag-over-inside .svc-panel__placeholder_frame,
@@ -2499,7 +2538,7 @@ svc-question .sv-action-bar,
2499
2538
  top: 0;
2500
2539
  left: 0;
2501
2540
  visibility: hidden;
2502
- 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))));
2503
2542
  width: 100%;
2504
2543
  display: flex;
2505
2544
  align-items: center;
@@ -2508,7 +2547,7 @@ svc-question .sv-action-bar,
2508
2547
 
2509
2548
  .svc-question__drag-element {
2510
2549
  width: 100%;
2511
- height: calc(4 * var(--sjs-base-unit, var(--base-unit, 8px)));
2550
+ height: calc(4 * (var(--sjs-base-unit, var(--base-unit, 8px))));
2512
2551
  opacity: 0.5;
2513
2552
  }
2514
2553
  .svc-question__drag-element use {
@@ -2564,12 +2603,12 @@ svc-question .sv-action-bar,
2564
2603
  border: 1px dashed var(--sjs-border-default, var(--border, #d6d6d6));
2565
2604
  width: 100%;
2566
2605
  box-sizing: border-box;
2567
- height: calc(30 * var(--sjs-base-unit, var(--base-unit, 8px)));
2606
+ height: calc(30 * (var(--sjs-base-unit, var(--base-unit, 8px))));
2568
2607
  display: flex;
2569
2608
  align-items: center;
2570
2609
  justify-content: center;
2571
2610
  flex-direction: column;
2572
- 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))));
2573
2612
  flex-grow: 1;
2574
2613
  }
2575
2614
 
@@ -2582,12 +2621,12 @@ svc-question .sv-action-bar,
2582
2621
 
2583
2622
  .svc-panel__add-new-question {
2584
2623
  align-items: center;
2585
- 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))));
2586
2625
  margin-left: 0;
2587
2626
  margin-right: 0;
2588
2627
  width: auto;
2589
- height: calc(5 * var(--sjs-base-unit, var(--base-unit, 8px)));
2590
- 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))));
2591
2630
  vertical-align: baseline;
2592
2631
  text-align: center;
2593
2632
  cursor: pointer;
@@ -2603,8 +2642,8 @@ svc-question .sv-action-bar,
2603
2642
  align-items: center;
2604
2643
  flex-grow: 1;
2605
2644
  justify-content: center;
2606
- margin: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px))) calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
2607
- 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))));
2608
2647
  color: var(--sjs-primary-backcolor, var(--primary, #19b394));
2609
2648
  text-wrap: nowrap;
2610
2649
  }
@@ -2612,16 +2651,16 @@ svc-question .sv-action-bar,
2612
2651
  .svc-panel__question-type-selector {
2613
2652
  appearance: none;
2614
2653
  display: flex;
2615
- height: calc(5 * var(--sjs-base-unit, var(--base-unit, 8px)));
2616
- 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));
2617
2656
  box-sizing: border-box;
2618
2657
  border: none;
2619
2658
  border-radius: 2px;
2620
2659
  background-color: transparent;
2621
2660
  cursor: pointer;
2622
- margin-right: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
2661
+ margin-right: var(--sjs-base-unit, var(--base-unit, 8px));
2623
2662
  outline: none;
2624
- top: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
2663
+ top: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
2625
2664
  margin: 0;
2626
2665
  position: absolute;
2627
2666
  right: 0;
@@ -2641,7 +2680,7 @@ svc-question .sv-action-bar,
2641
2680
  }
2642
2681
 
2643
2682
  .sd-panel .svc-row {
2644
- margin-top: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
2683
+ margin-top: var(--sjs-base-unit, var(--base-unit, 8px));
2645
2684
  }
2646
2685
  .sd-panel .svc-row:first-of-type {
2647
2686
  margin-top: 0;
@@ -2649,7 +2688,7 @@ svc-question .sv-action-bar,
2649
2688
  .sd-panel .svc-row .sd-row {
2650
2689
  margin-top: 0;
2651
2690
  margin-bottom: 0;
2652
- gap: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
2691
+ gap: var(--sjs-base-unit, var(--base-unit, 8px));
2653
2692
  }
2654
2693
 
2655
2694
  .svc-question__content .sd-element__header--location-top {
@@ -2667,7 +2706,7 @@ svc-question .sv-action-bar,
2667
2706
  padding-top: 0;
2668
2707
  }
2669
2708
  .svc-question__content .sd-table__cell--detail-panel .sd-panel__content {
2670
- padding-top: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
2709
+ padding-top: var(--sjs-base-unit, var(--base-unit, 8px));
2671
2710
  }
2672
2711
  .svc-question__content .sd-paneldynamic__panel-wrapper {
2673
2712
  padding: 0;
@@ -2681,14 +2720,24 @@ svc-question .sv-action-bar,
2681
2720
  }
2682
2721
 
2683
2722
  .svc-question__content .svc-carry-forward-panel {
2684
- 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))));
2685
2724
  }
2686
2725
 
2687
2726
  .svc-question__content--ranking .svc-carry-forward-panel {
2688
2727
  margin-top: 0;
2689
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
+ }
2690
2739
  .svc-question__dropdown-choices {
2691
- 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))));
2692
2741
  }
2693
2742
 
2694
2743
  .svc-question__dropdown-choice--collapsed:nth-last-child(1) {
@@ -2704,14 +2753,14 @@ svc-question .sv-action-bar,
2704
2753
  }
2705
2754
 
2706
2755
  .svc-question__dropdown-choices--wrapper .svc-action-button {
2707
- margin-left: calc(6.75 * var(--sjs-base-unit, var(--base-unit, 8px)));
2708
- 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));
2709
2758
  cursor: pointer;
2710
2759
  }
2711
2760
  .svc-image-question-controls {
2712
2761
  position: absolute;
2713
- top: calc(5 * var(--sjs-base-unit, var(--base-unit, 8px)));
2714
- 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));
2715
2764
  display: none;
2716
2765
  }
2717
2766
 
@@ -2720,7 +2769,7 @@ svc-question .sv-action-bar,
2720
2769
  }
2721
2770
 
2722
2771
  .svc-question__content--image:not(.svc-question__content--loading):not(.svc-question__content--empty) {
2723
- 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;
2724
2773
  }
2725
2774
  .svc-question__content--image:not(.svc-question__content--loading):not(.svc-question__content--empty) .sd-image__image {
2726
2775
  border-radius: 0;
@@ -2735,6 +2784,10 @@ svc-question .sv-action-bar,
2735
2784
  display: none;
2736
2785
  }
2737
2786
 
2787
+ .svc-question__content--image .sd-file__choose-btn--text .sv-svg-icon {
2788
+ display: none;
2789
+ }
2790
+
2738
2791
  .svc-question__content--loading .sd-image {
2739
2792
  display: none;
2740
2793
  }
@@ -2743,7 +2796,7 @@ svc-question .sv-action-bar,
2743
2796
  position: relative;
2744
2797
  background-color: var(--sjs-general-backcolor, var(--background, #fff));
2745
2798
  width: 100%;
2746
- 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))));
2747
2800
  border: 1px dashed var(--sjs-border-inside, var(--border-inside, rgba(0, 0, 0, 0.16)));
2748
2801
  }
2749
2802
 
@@ -2766,7 +2819,7 @@ svc-question .sv-action-bar,
2766
2819
  }
2767
2820
 
2768
2821
  .svc-question__content .sd-rating {
2769
- 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))));
2770
2823
  width: calc(100% - 9 * var(--sjs-base-unit, var(--base-unit, 8px)));
2771
2824
  }
2772
2825
  .svc-question__content .sd-rating.sd-rating--wrappable fieldset {
@@ -2795,13 +2848,13 @@ svc-question .sv-action-bar,
2795
2848
  }
2796
2849
  .svc-question__content .svc-rating-question-controls {
2797
2850
  display: flex;
2798
- width: calc(8 * var(--sjs-base-unit, var(--base-unit, 8px)));
2851
+ width: calc(8 * (var(--sjs-base-unit, var(--base-unit, 8px))));
2799
2852
  min-width: auto;
2800
2853
  justify-content: flex-start;
2801
2854
  }
2802
2855
  .svc-question__content .sd-rating__item--fixed-size:focus-within {
2803
2856
  width: unset;
2804
- 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))));
2805
2858
  }
2806
2859
 
2807
2860
  .svc-creator--mobile .svc-rating-question-content {
@@ -2826,23 +2879,23 @@ svc-question .sv-action-bar,
2826
2879
  .svc-item-value-wrapper {
2827
2880
  position: relative;
2828
2881
  display: flex;
2829
- gap: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
2882
+ gap: var(--sjs-base-unit, var(--base-unit, 8px));
2830
2883
  align-items: center;
2831
- 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))));
2832
2885
  }
2833
2886
 
2834
2887
  .svc-question__dropdown-choice .svc-item-value-wrapper,
2835
2888
  .sd-selectbase .svc-item-value-wrapper {
2836
2889
  align-items: flex-start;
2837
- 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))));
2838
2891
  }
2839
2892
  .svc-question__dropdown-choice .svc-item-value__item,
2840
2893
  .sd-selectbase .svc-item-value__item {
2841
- padding-right: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
2894
+ padding-right: var(--sjs-base-unit, var(--base-unit, 8px));
2842
2895
  }
2843
2896
 
2844
2897
  .svc-question__content .sd-selectbase__column {
2845
- 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))));
2846
2899
  }
2847
2900
  .svc-question__content .sd-selectbase--mobile .sd-selectbase__column,
2848
2901
  .svc-question__content .sd-selectbase__column:first-of-type,
@@ -2856,9 +2909,9 @@ svc-question .sv-action-bar,
2856
2909
  .svc-item-value--dragging {
2857
2910
  background: var(--sjs-general-backcolor, var(--background, #fff));
2858
2911
  box-shadow: var(--sjs-shadow-large, 0px 8px 16px 0px rgba(0, 0, 0, 0.1));
2859
- border-radius: calc(12.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
2860
- padding-right: calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
2861
- 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))));
2862
2915
  -moz-user-select: none;
2863
2916
  -webkit-user-select: none;
2864
2917
  -ms-user-select: none;
@@ -2867,8 +2920,8 @@ svc-question .sv-action-bar,
2867
2920
 
2868
2921
  .svc-item-value-controls {
2869
2922
  display: flex;
2870
- margin: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px))) 0;
2871
- 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))));
2872
2925
  box-sizing: border-box;
2873
2926
  flex-shrink: 0;
2874
2927
  min-width: 72px;
@@ -2877,11 +2930,11 @@ svc-question .sv-action-bar,
2877
2930
 
2878
2931
  .svc-item-value-controls__button {
2879
2932
  border-radius: 50%;
2880
- padding: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
2933
+ padding: var(--sjs-base-unit, var(--base-unit, 8px));
2881
2934
  cursor: pointer;
2882
2935
  display: inline-block;
2883
2936
  outline: none;
2884
- height: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
2937
+ height: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
2885
2938
  box-sizing: content-box;
2886
2939
  }
2887
2940
  .svc-item-value-controls__button .sv-svg-icon {
@@ -2902,7 +2955,7 @@ svc-question .sv-action-bar,
2902
2955
  }
2903
2956
 
2904
2957
  .svc-item-value-controls__drag {
2905
- 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));
2906
2959
  cursor: move;
2907
2960
  opacity: 0.25;
2908
2961
  }
@@ -2955,7 +3008,7 @@ svc-question .sv-action-bar,
2955
3008
 
2956
3009
  .sv-ranking .svc-item-value-wrapper {
2957
3010
  align-items: center;
2958
- 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))));
2959
3012
  }
2960
3013
  .sv-ranking .svc-item-value__item {
2961
3014
  padding-right: 0;
@@ -3027,8 +3080,8 @@ svc-question .sv-action-bar,
3027
3080
  .svc-item-value__ghost {
3028
3081
  display: none;
3029
3082
  background: var(--sjs-general-backcolor-dim, var(--background-dim, #f3f3f3));
3030
- border-radius: calc(12.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
3031
- 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))));
3032
3085
  height: 40px;
3033
3086
  z-index: 11;
3034
3087
  position: absolute;
@@ -3058,7 +3111,7 @@ svc-question .sv-action-bar,
3058
3111
  .svc-creator--mobile .svc-tab-designer .svc-question__content--ranking .svc-item-value-wrapper,
3059
3112
  .svc-creator--mobile .svc-tab-designer .sd-selectbase .svc-item-value-wrapper,
3060
3113
  .svc-creator--mobile .svc-tab-designer .svc-question__dropdown-choices .svc-item-value-wrapper {
3061
- 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))));
3062
3115
  }
3063
3116
 
3064
3117
  .svc-creator--touch:not(.svc-creator--mobile) .svc-tab-designer .svc-question__content--ranking .svc-item-value-controls__drag-icon,
@@ -3069,7 +3122,7 @@ svc-question .sv-action-bar,
3069
3122
  .svc-creator--touch:not(.svc-creator--mobile) .svc-tab-designer .svc-question__content--ranking .svc-item-value-wrapper,
3070
3123
  .svc-creator--touch:not(.svc-creator--mobile) .svc-tab-designer .sd-selectbase .svc-item-value-wrapper,
3071
3124
  .svc-creator--touch:not(.svc-creator--mobile) .svc-tab-designer .svc-question__dropdown-choices .svc-item-value-wrapper {
3072
- 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))));
3073
3126
  }
3074
3127
  .svc-creator--touch:not(.svc-creator--mobile) .svc-tab-designer .svc-question__content--ranking .svc-item-value-controls__drag,
3075
3128
  .svc-creator--touch:not(.svc-creator--mobile) .svc-tab-designer .sd-selectbase .svc-item-value-controls__drag,
@@ -3106,8 +3159,8 @@ svc-question .sv-action-bar,
3106
3159
 
3107
3160
  .svc-image-item-value-controls {
3108
3161
  position: absolute;
3109
- top: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
3110
- 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));
3111
3164
  }
3112
3165
 
3113
3166
  .svc-image-item-value--new .svc-image-item-value-controls {
@@ -3143,8 +3196,8 @@ svc-question .sv-action-bar,
3143
3196
  display: none;
3144
3197
  cursor: move;
3145
3198
  position: absolute;
3146
- top: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
3147
- 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));
3148
3201
  }
3149
3202
 
3150
3203
  .svc-question__content--selected .svc-image-item-value-wrapper:hover .svc-image-item-value-controls__drag-area-indicator {
@@ -3167,7 +3220,7 @@ svc-question .sv-action-bar,
3167
3220
  width: 100%;
3168
3221
  }
3169
3222
  .svc-image-item-value--single .sd-imagepicker__image {
3170
- height: calc(30 * var(--sjs-base-unit, var(--base-unit, 8px)));
3223
+ height: calc(30 * (var(--sjs-base-unit, var(--base-unit, 8px))));
3171
3224
  }
3172
3225
 
3173
3226
  .svc-image-item-value__loading {
@@ -3181,20 +3234,20 @@ svc-question .sv-action-bar,
3181
3234
  }
3182
3235
 
3183
3236
  .svc-question__adorner .sd-table .sd-table__cell--column-title {
3184
- padding: 0 calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
3237
+ padding: 0 var(--sjs-base-unit, var(--base-unit, 8px));
3185
3238
  }
3186
3239
  .svc-question__adorner .sd-table .sd-table__cell--column-title .svc-matrix-cell {
3187
- 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));
3188
3241
  }
3189
3242
 
3190
3243
  .svc-matrix-cell--selected {
3191
3244
  position: absolute;
3192
- border: calc(0.25 * var(--sjs-base-unit, var(--base-unit, 8px))) solid var(--sjs-secondary-backcolor, var(--secondary, #ff9814));
3193
- border-radius: calc(0.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
3194
- top: calc(0 * var(--sjs-base-unit, var(--base-unit, 8px)));
3195
- left: calc(0 * var(--sjs-base-unit, var(--base-unit, 8px)));
3196
- right: calc(0 * var(--sjs-base-unit, var(--base-unit, 8px)));
3197
- 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))));
3198
3251
  display: none;
3199
3252
  }
3200
3253
  .svc-matrix-cell--selected.svc-visible {
@@ -3202,8 +3255,8 @@ svc-question .sv-action-bar,
3202
3255
  }
3203
3256
 
3204
3257
  .svc-hovered > .svc-matrix-cell--selected:not(.svc-visible) {
3205
- 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)));
3206
- 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))));
3207
3260
  display: block;
3208
3261
  }
3209
3262
 
@@ -3217,13 +3270,13 @@ svc-question .sv-action-bar,
3217
3270
 
3218
3271
  .svc-matrix-cell__question-controls-button {
3219
3272
  display: block;
3220
- width: calc(6 * var(--sjs-base-unit, var(--base-unit, 8px)));
3221
- 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))));
3222
3275
  background: var(--sjs-general-backcolor, var(--background, #fff));
3223
3276
  border: 1px solid var(--sjs-border-default, var(--border, #d6d6d6));
3224
3277
  box-sizing: border-box;
3225
3278
  border-radius: 50%;
3226
- 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))));
3227
3280
  cursor: pointer;
3228
3281
  }
3229
3282
  .svc-matrix-cell__question-controls-button use {
@@ -3236,12 +3289,12 @@ svc-question .sv-action-bar,
3236
3289
 
3237
3290
  .svc-question__content--in-popup {
3238
3291
  width: calc(100% - 25 * var(--sjs-base-unit, var(--base-unit, 8px)));
3239
- min-width: calc(70 * var(--sjs-base-unit, var(--base-unit, 8px)));
3240
- 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))));
3241
3294
  }
3242
3295
 
3243
3296
  .svc-matrix-cell__popup .sv-popup__scrolling-content {
3244
- margin-top: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
3297
+ margin-top: var(--sjs-base-unit, var(--base-unit, 8px));
3245
3298
  padding-top: 0;
3246
3299
  }
3247
3300
  .svc-matrix-cell__popup .svc-question__content {
@@ -3252,43 +3305,44 @@ svc-question .sv-action-bar,
3252
3305
  }
3253
3306
 
3254
3307
  .svc-question__content .sd-table__cell--detail-panel {
3255
- 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))));
3256
3309
  }
3257
3310
  .svd-test-results {
3258
3311
  font-family: var(--font-family);
3259
- width: 80%;
3260
- margin: auto;
3261
- margin-bottom: calc(5 * var(--sjs-base-unit, var(--base-unit, 8px)));
3262
- background-color: var(--sjs-general-backcolor, var(--background, #fff));
3263
- box-shadow: var(--sjs-shadow-small, 0px 1px 2px 0px rgba(0, 0, 0, 0.15));
3264
3312
  border-radius: 4px;
3313
+ box-shadow: inset 0px 1px 0px 0px var(--sjs-border-inside, var(--border-inside, rgba(0, 0, 0, 0.16)));
3314
+ padding: calc(12 * var(--sjs-base-unit, var(--base-unit, 8px)));
3265
3315
  }
3266
3316
  .svd-test-results .svd-test-results__header {
3267
3317
  display: flex;
3268
3318
  justify-content: space-between;
3269
3319
  align-items: center;
3270
- padding: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px))) calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
3271
- 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))));
3272
3322
  color: var(--sjs-general-forecolor-light, var(--foreground-light, #909090));
3273
3323
  border-bottom: 2px solid var(--sjs-border-light, var(--border-light, #eaeaea));
3324
+ background-color: var(--sjs-general-backcolor, var(--background, #fff));
3274
3325
  }
3275
3326
  .svd-test-results .svd-test-results__header .svd-test-results__header-text {
3276
3327
  margin: 0;
3277
3328
  }
3278
3329
  .svd-test-results .svd-test-results__header .svd-test-results__header-types {
3279
3330
  display: flex;
3280
- gap: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
3331
+ gap: var(--sjs-base-unit, var(--base-unit, 8px));
3281
3332
  }
3282
3333
  .svd-test-results .svd-test-results__text {
3283
3334
  display: flex;
3284
- padding: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px))) calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
3285
- 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))));
3286
3337
  overflow: auto;
3287
3338
  user-select: text;
3288
3339
  white-space: pre-wrap;
3340
+ background-color: var(--sjs-general-backcolor, var(--background, #fff));
3289
3341
  }
3290
3342
  .svd-test-results .svd-test-results__table {
3343
+ background-color: var(--sjs-general-backcolor, var(--background, #fff));
3291
3344
  width: 100%;
3345
+ box-shadow: var(--sjs-shadow-small, 0px 1px 2px 0px rgba(0, 0, 0, 0.15));
3292
3346
  }
3293
3347
  .svd-test-results .svd-test-results__table table {
3294
3348
  width: 100%;
@@ -3296,7 +3350,7 @@ svc-question .sv-action-bar,
3296
3350
  }
3297
3351
  .svd-test-results .svd-test-results__table table .svd-test-results__marker {
3298
3352
  position: absolute;
3299
- 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))));
3300
3354
  }
3301
3355
  .svd-test-results .svd-test-results__table table .svd-test-results__marker .sv-svg-icon {
3302
3356
  transition: transform 0.2s ease-in-out;
@@ -3309,7 +3363,7 @@ svc-question .sv-action-bar,
3309
3363
  transform: rotate(90deg);
3310
3364
  }
3311
3365
  .svd-test-results .svd-test-results__table table th {
3312
- 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));
3313
3367
  background-color: var(--sjs-general-backcolor-dim, var(--background-dim, #f3f3f3));
3314
3368
  text-align: left;
3315
3369
  font-weight: 600;
@@ -3317,11 +3371,11 @@ svc-question .sv-action-bar,
3317
3371
  color: var(--sjs-general-forecolor-light, var(--foreground-light, #909090));
3318
3372
  }
3319
3373
  .svd-test-results .svd-test-results__table table th:nth-child(1) {
3320
- 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))));
3321
3375
  }
3322
3376
  .svd-test-results .svd-test-results__table table td {
3323
- padding: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px))) calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
3324
- 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))));
3325
3379
  overflow: auto;
3326
3380
  border-top: 2px solid var(--sjs-border-light, var(--border-light, #eaeaea));
3327
3381
  user-select: text;
@@ -3333,7 +3387,7 @@ svc-question .sv-action-bar,
3333
3387
  }
3334
3388
  .svd-test-results .svd-test-results__table table td:nth-child(2) {
3335
3389
  width: 50%;
3336
- 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))));
3337
3391
  }
3338
3392
  .svd-test-results .svd-test-results__table table .survey-result-value {
3339
3393
  word-break: break-all;
@@ -3346,7 +3400,7 @@ svc-question .sv-action-bar,
3346
3400
  }
3347
3401
  .svc-designer-header .sd-container-modern__title {
3348
3402
  gap: 0;
3349
- 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))));
3350
3404
  }
3351
3405
 
3352
3406
  .svc-logo-image {
@@ -3359,32 +3413,32 @@ svc-question .sv-action-bar,
3359
3413
  }
3360
3414
  .svc-logo-image .svc-image-item-value-controls {
3361
3415
  display: block;
3362
- top: calc(2.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
3363
- 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))));
3364
3418
  }
3365
3419
 
3366
3420
  .svc-logo-image__loading {
3367
- width: calc(8 * var(--sjs-base-unit, var(--base-unit, 8px)));
3368
- height: calc(8 * var(--sjs-base-unit, var(--base-unit, 8px)));
3369
- 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));
3370
3424
  box-sizing: border-box;
3371
- 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))));
3372
3426
  }
3373
3427
 
3374
3428
  .svc-logo-image-placeholder {
3375
- 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))));
3376
3430
  color: var(--sjs-general-forecolor-light, var(--foreground-light, #909090));
3377
3431
  opacity: 0.25;
3378
3432
  white-space: nowrap;
3379
3433
  word-break: keep-all;
3380
3434
  padding: 0;
3381
- width: calc(8 * var(--sjs-base-unit, var(--base-unit, 8px)));
3382
- 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))));
3383
3437
  display: flex;
3384
3438
  justify-content: center;
3385
3439
  align-items: center;
3386
- margin-right: calc(-2 * var(--sjs-base-unit, var(--base-unit, 8px)));
3387
- 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))));
3388
3442
  }
3389
3443
  .svc-logo-image-placeholder:hover {
3390
3444
  background-color: var(--sjs-primary-backcolor-light, var(--primary-light, rgba(25, 179, 148, 0.1)));
@@ -3394,8 +3448,8 @@ svc-question .sv-action-bar,
3394
3448
  fill: var(--sjs-primary-backcolor, var(--primary, #19b394));
3395
3449
  }
3396
3450
  .svc-logo-image-placeholder svg {
3397
- width: calc(4 * var(--sjs-base-unit, var(--base-unit, 8px)));
3398
- 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))));
3399
3453
  }
3400
3454
 
3401
3455
  .svc-logo-image-placeholder use {
@@ -3436,7 +3490,7 @@ svc-question .sv-action-bar,
3436
3490
  }
3437
3491
 
3438
3492
  .svc-link-value-button {
3439
- 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))));
3440
3494
  }
3441
3495
 
3442
3496
  .svc-question-link__clear-button {
@@ -3450,7 +3504,7 @@ svc-question .sv-action-bar,
3450
3504
  background-color: var(--sjs-special-red-light, var(--red-light, rgba(230, 10, 62, 0.1)));
3451
3505
  }
3452
3506
  .svc-property-panel__item {
3453
- 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;
3454
3508
  width: 100%;
3455
3509
  }
3456
3510
  .svc-property-panel__group {
@@ -3458,7 +3512,7 @@ svc-question .sv-action-bar,
3458
3512
  -moz-appearance: none;
3459
3513
  appearance: none;
3460
3514
  width: 100%;
3461
- padding: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
3515
+ padding: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
3462
3516
  border: none;
3463
3517
  outline: none;
3464
3518
  color: var(--sjs-general-forecolor-light, var(--foreground-light, #909090));
@@ -3467,7 +3521,7 @@ svc-question .sv-action-bar,
3467
3521
  background: var(--sjs-general-backcolor, var(--background, #fff));
3468
3522
  box-shadow: inset 0px -1px 0px var(--sjs-border-default, var(--border, #d6d6d6));
3469
3523
  font-family: var(--font-family);
3470
- 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))));
3471
3525
  }
3472
3526
 
3473
3527
  .svc-property-panel__group:disabled,
@@ -3491,9 +3545,9 @@ svc-question .sv-action-bar,
3491
3545
  background-color: var(--sjs-general-backcolor, var(--background, #fff));
3492
3546
  }
3493
3547
  .svc-tabbed-menu-item {
3494
- padding: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px))) calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
3495
- height: calc(8 * var(--sjs-base-unit, var(--base-unit, 8px)));
3496
- 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))));
3497
3551
  box-sizing: border-box;
3498
3552
  cursor: pointer;
3499
3553
  }
@@ -3527,7 +3581,7 @@ svc-question .sv-action-bar,
3527
3581
 
3528
3582
  .svc-tabbed-menu-item .svc-tabbed-menu-item__text {
3529
3583
  white-space: nowrap;
3530
- 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))));
3531
3585
  }
3532
3586
 
3533
3587
  .svc-tabbed-menu-item-container .sv-dots__item {
@@ -3538,7 +3592,7 @@ svc-question .sv-action-bar,
3538
3592
  white-space: nowrap;
3539
3593
  overflow: hidden;
3540
3594
  align-items: center;
3541
- height: calc(8 * var(--sjs-base-unit, var(--base-unit, 8px)));
3595
+ height: calc(8 * (var(--sjs-base-unit, var(--base-unit, 8px))));
3542
3596
  }
3543
3597
 
3544
3598
  .svc-tabbed-menu-wrapper {
@@ -3551,12 +3605,12 @@ svc-question .sv-action-bar,
3551
3605
  align-items: center;
3552
3606
  z-index: 20;
3553
3607
  outline: none;
3554
- 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))));
3555
3609
  }
3556
3610
  .svc-toolbox__item sv-svg-icon,
3557
3611
  .svc-toolbox__item .sv-svg-icon {
3558
3612
  display: block;
3559
- height: calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
3613
+ height: calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
3560
3614
  }
3561
3615
 
3562
3616
  .svc-toolbox__item-container {
@@ -3572,13 +3626,13 @@ svc-question .sv-action-bar,
3572
3626
  box-sizing: border-box;
3573
3627
  align-items: center;
3574
3628
  margin-right: 0;
3575
- 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))));
3576
3630
  }
3577
3631
  .svc-toolbox__item-banner .svc-toolbox__item-icon {
3578
3632
  position: absolute;
3579
3633
  display: block;
3580
- left: calc(1.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
3581
- 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));
3582
3636
  }
3583
3637
  .svc-toolbox__item-banner .svc-toolbox__item-title {
3584
3638
  color: var(--sjs-general-forecolor, var(--foreground, #161616));
@@ -3596,8 +3650,8 @@ svc-question .sv-action-bar,
3596
3650
  [style*="direction: rtl"] .svc-toolbox__item:hover .svc-toolbox__item-banner,
3597
3651
  [style*="direction: rtl"] .svc-toolbox__item:focus .svc-toolbox__item-banner {
3598
3652
  flex-direction: row-reverse;
3599
- padding-right: calc(1.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
3600
- 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))));
3601
3655
  margin-left: 0;
3602
3656
  margin-right: 0;
3603
3657
  transform: translateX(calc(1.5 * var(--sjs-base-unit, var(--base-unit, 8px))));
@@ -3610,8 +3664,8 @@ svc-question .sv-action-bar,
3610
3664
  [style*="direction:rtl"] .svc-toolbox__item:focus .svc-toolbox__item-banner .svc-toolbox__item-title,
3611
3665
  [style*="direction: rtl"] .svc-toolbox__item:hover .svc-toolbox__item-banner .svc-toolbox__item-title,
3612
3666
  [style*="direction: rtl"] .svc-toolbox__item:focus .svc-toolbox__item-banner .svc-toolbox__item-title {
3613
- padding-left: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
3614
- 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))));
3615
3669
  }
3616
3670
  .svc-creator__toolbox--right .svc-toolbox__item,
3617
3671
  [dir=rtl] .svc-toolbox__item,
@@ -3642,38 +3696,39 @@ svc-question .sv-action-bar,
3642
3696
  [style*="direction:rtl"] .svc-toolbox__item-banner .svc-toolbox__item-icon,
3643
3697
  [style*="direction: rtl"] .svc-toolbox__item-banner .svc-toolbox__item-icon {
3644
3698
  left: auto;
3645
- 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))));
3646
3700
  }
3647
3701
 
3648
3702
  .svc-toolbox__item-title {
3649
- 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);
3650
3705
  font-style: normal;
3651
3706
  font-weight: 600;
3652
- font-size: calc(0.75 * var(--sjs-font-size, calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)))));
3653
- 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)))));
3654
3709
  display: block;
3655
- padding-left: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
3656
- 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))));
3657
3712
  white-space: nowrap;
3658
3713
  color: var(--sjs-general-forecolor-light, var(--foreground-light, #909090));
3659
3714
  }
3660
3715
 
3661
3716
  .svc-toolbox__item:hover .svc-toolbox__item-banner,
3662
3717
  .svc-toolbox__item:focus .svc-toolbox__item-banner {
3663
- max-width: calc(100 * var(--sjs-base-unit, var(--base-unit, 8px)));
3664
- padding-left: calc(1.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
3665
- 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))));
3666
3721
  opacity: 1;
3667
3722
  }
3668
3723
  .svc-toolbox__item:hover .svc-toolbox__item-banner .svc-toolbox__item-title,
3669
3724
  .svc-toolbox__item:focus .svc-toolbox__item-banner .svc-toolbox__item-title {
3670
- 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))));
3671
3726
  }
3672
3727
 
3673
3728
  .svc-toolbox:not(.svc-toolbox--compact) .svc-toolbox__item:not(.sv-dots):focus,
3674
3729
  .svc-toolbox:not(.svc-toolbox--compact) .svc-toolbox__item:not(.sv-dots):hover {
3675
3730
  overflow: hidden;
3676
- 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))));
3677
3732
  background-color: var(--sjs-general-backcolor, var(--background, #fff));
3678
3733
  box-shadow: var(--sjs-shadow-medium, 0px 2px 6px 0px rgba(0, 0, 0, 0.1));
3679
3734
  transition: 0.1s ease-in-out;
@@ -3691,7 +3746,7 @@ svc-question .sv-action-bar,
3691
3746
  .svc-toolbox__tool .sv-dots__item:focus:enabled,
3692
3747
  .svc-toolbox__tool .sv-dots__item.sv-action-bar-item--pressed {
3693
3748
  background-color: var(--sjs-primary-backcolor-light, var(--primary-light, rgba(25, 179, 148, 0.1)));
3694
- 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))));
3695
3750
  }
3696
3751
  .svc-toolbox__tool .sv-dots__item:hover:enabled .sv-svg-icon use,
3697
3752
  .svc-toolbox__tool .sv-dots__item:focus:enabled .sv-svg-icon use,
@@ -3709,10 +3764,10 @@ svc-question .sv-action-bar,
3709
3764
  display: none;
3710
3765
  }
3711
3766
  .svc-toolbox-popup .sv-list__item .sv-list__item-body {
3712
- padding-top: calc(1.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
3713
- padding-bottom: calc(1.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
3714
- padding-inline-start: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
3715
- 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))));
3716
3771
  }
3717
3772
 
3718
3773
  .svc-toolbox .svc-toolbox__tool--pressed .svc-toolbox__item:not(.sv-dots),
@@ -3737,14 +3792,14 @@ svc-toolbox {
3737
3792
 
3738
3793
  .svc-toolbox {
3739
3794
  height: 100%;
3740
- padding: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
3795
+ padding: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
3741
3796
  box-sizing: border-box;
3742
3797
  overflow-y: auto;
3743
3798
  direction: rtl;
3744
3799
  }
3745
3800
 
3746
3801
  .svc-toolbox--compact {
3747
- 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))));
3748
3803
  overflow: visible;
3749
3804
  direction: ltr;
3750
3805
  }
@@ -3765,25 +3820,25 @@ svc-toolbox {
3765
3820
  }
3766
3821
 
3767
3822
  .svc-toolbox__tool .sv-dots__item {
3768
- width: calc(6 * var(--sjs-base-unit, var(--base-unit, 8px)));
3769
- 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))));
3770
3825
  }
3771
3826
 
3772
3827
  .svc-toolbox__category-separator {
3773
3828
  height: 1px;
3774
- width: calc(6 * var(--sjs-base-unit, var(--base-unit, 8px)));
3829
+ width: calc(6 * (var(--sjs-base-unit, var(--base-unit, 8px))));
3775
3830
  background-color: var(--sjs-border-default, var(--border, #d6d6d6));
3776
- 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))));
3777
3832
  }
3778
3833
 
3779
3834
  .svc-toolbox__category-header {
3780
- height: calc(5 * var(--sjs-base-unit, var(--base-unit, 8px)));
3781
- 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))));
3782
3837
  background: var(--sjs-general-backcolor-dim, var(--background-dim, #f3f3f3));
3783
3838
  border-bottom: 1px solid var(--sjs-border-default, var(--border, #d6d6d6));
3784
3839
  box-sizing: border-box;
3785
3840
  width: 100%;
3786
- 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))));
3787
3842
  position: relative;
3788
3843
  }
3789
3844
 
@@ -3793,9 +3848,9 @@ svc-toolbox {
3793
3848
 
3794
3849
  .svc-toolbox__category-title {
3795
3850
  font-family: var(--font-family);
3796
- 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))));
3797
3852
  font-weight: bold;
3798
- 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))));
3799
3854
  color: var(--sjs-general-forecolor, var(--foreground, #161616));
3800
3855
  vertical-align: middle;
3801
3856
  display: block;
@@ -3803,8 +3858,8 @@ svc-toolbox {
3803
3858
 
3804
3859
  .svc-toolbox__category-header__controls {
3805
3860
  position: absolute;
3806
- right: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
3807
- 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));
3808
3863
  display: none;
3809
3864
  }
3810
3865
 
@@ -3821,7 +3876,7 @@ svc-toolbox {
3821
3876
  }
3822
3877
  .svc-toolbox__tool .sv-action__content {
3823
3878
  display: flex;
3824
- 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))));
3825
3880
  flex-direction: column;
3826
3881
  align-items: flex-start;
3827
3882
  }
@@ -3864,8 +3919,9 @@ svc-toolbox {
3864
3919
  .svc-side-bar__container-header {
3865
3920
  background: var(--sjs-general-backcolor, var(--background, #fff));
3866
3921
  box-shadow: inset 0px -2px 0px var(--sjs-primary-backcolor, var(--primary, #19b394));
3867
- 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))));
3868
3923
  display: flex;
3924
+ height: calc(8 * (var(--sjs-base-unit, var(--base-unit, 8px))));
3869
3925
  }
3870
3926
 
3871
3927
  .svc-side-bar__container-content {
@@ -3882,7 +3938,7 @@ svc-toolbox {
3882
3938
  flex-direction: column;
3883
3939
  align-items: flex-start;
3884
3940
  width: 100%;
3885
- 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))));
3886
3942
  box-sizing: border-box;
3887
3943
  background: var(--sjs-general-backcolor-dim, var(--background-dim, #f3f3f3));
3888
3944
  box-shadow: inset 0px -1px 0px var(--sjs-border-default, var(--border, #d6d6d6));
@@ -3890,26 +3946,23 @@ svc-toolbox {
3890
3946
 
3891
3947
  .svc-side-bar__container-title {
3892
3948
  display: flex;
3893
- 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))));
3894
3950
  flex-grow: 1;
3895
3951
  flex-shrink: 0;
3896
3952
  justify-content: flex-end;
3897
- 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))));
3898
3954
  }
3899
3955
 
3900
3956
  .svc-side-bar__container-actions {
3901
3957
  width: 100%;
3902
- 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));
3903
3960
  }
3904
3961
  .svc-side-bar__container-actions .sv-action-bar {
3905
3962
  justify-content: flex-end;
3906
3963
  padding: 0;
3907
3964
  }
3908
3965
 
3909
- .svc-side-bar__container-close {
3910
- display: none;
3911
- }
3912
-
3913
3966
  .svc-flex-column.svc-side-bar__wrapper {
3914
3967
  width: auto;
3915
3968
  border-left: 1px solid var(--sjs-border-default, var(--border, #d6d6d6));
@@ -3945,6 +3998,17 @@ svc-toolbox {
3945
3998
  max-width: 100%;
3946
3999
  }
3947
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
+
3948
4012
  .svc-full-container.svc-creator__side-bar--left {
3949
4013
  flex-direction: row-reverse;
3950
4014
  }
@@ -3968,40 +4032,11 @@ svc-toolbox {
3968
4032
  margin-inline-end: auto;
3969
4033
  }
3970
4034
 
3971
- .sv-mobile-side-bar .svc-side-bar__container-actions {
3972
- display: none;
3973
- }
3974
- .sv-mobile-side-bar .svc-side-bar__container-title {
3975
- display: block;
3976
- font-weight: bold;
3977
- font-size: calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
3978
- line-height: calc(4 * var(--sjs-base-unit, var(--base-unit, 8px)));
3979
- flex: unset;
3980
- }
3981
- .sv-mobile-side-bar .svc-side-bar__wrapper {
3982
- top: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
3983
- background: none;
3984
- }
3985
- .sv-mobile-side-bar .svc-side-bar__container {
4035
+ .sv-mobile-side-bar .svc-flyout-side-bar .svc-side-bar__wrapper {
3986
4036
  width: 100%;
3987
- min-width: 338px;
3988
- }
3989
- .sv-mobile-side-bar .svc-side-bar__container-header {
3990
- border: unset;
3991
- box-shadow: 0px calc(1 * var(--sjs-base-unit, var(--base-unit, 8px))) calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
3992
- border-radius: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px))) calc(2 * var(--sjs-base-unit, var(--base-unit, 8px))) 0px 0px;
3993
4037
  }
3994
- .sv-mobile-side-bar .svc-side-bar__container-content {
3995
- height: calc(100% - 20 * var(--sjs-base-unit, var(--base-unit, 8px)));
3996
- background-color: var(--sjs-general-backcolor-dim, var(--background-dim, #f3f3f3));
3997
- }
3998
- .sv-mobile-side-bar .svc-side-bar__container-close {
3999
- display: flex;
4000
- background-color: var(--sjs-general-backcolor-dim, var(--background-dim, #f3f3f3));
4001
- }
4002
- .sv-mobile-side-bar .svc-side-bar__container-close .svc-side-bar__container-close-button {
4038
+ .sv-mobile-side-bar .svc-side-bar__container {
4003
4039
  width: 100%;
4004
- margin: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
4005
4040
  }
4006
4041
 
4007
4042
  .svc-side-bar .svc-toolbox {
@@ -4010,7 +4045,7 @@ svc-toolbox {
4010
4045
  .spg-action-bar {
4011
4046
  display: flex;
4012
4047
  box-sizing: content-box;
4013
- 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))));
4014
4049
  position: relative;
4015
4050
  align-items: center;
4016
4051
  margin-left: auto;
@@ -4026,15 +4061,15 @@ svc-toolbox {
4026
4061
  -moz-appearance: none;
4027
4062
  appearance: none;
4028
4063
  display: flex;
4029
- padding: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
4064
+ padding: var(--sjs-base-unit, var(--base-unit, 8px));
4030
4065
  box-sizing: border-box;
4031
4066
  border: none;
4032
4067
  color: var(--sjs-primary-backcolor, var(--primary, #19b394));
4033
4068
  font-weight: 600;
4034
- font-size: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
4035
- 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))));
4036
4071
  font-family: var(--font-family);
4037
- 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))));
4038
4073
  background-color: transparent;
4039
4074
  cursor: pointer;
4040
4075
  }
@@ -4065,7 +4100,7 @@ svc-toolbox {
4065
4100
  }
4066
4101
 
4067
4102
  button.spg-action-button--large {
4068
- 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))));
4069
4104
  }
4070
4105
 
4071
4106
  .spg-action-button:disabled {
@@ -4083,7 +4118,7 @@ button.spg-action-button--large {
4083
4118
  }
4084
4119
 
4085
4120
  .spg-action-button--text {
4086
- 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))));
4087
4122
  }
4088
4123
 
4089
4124
  .spg-question {
@@ -4100,9 +4135,9 @@ button.spg-action-button--large {
4100
4135
  .spg-question__title {
4101
4136
  width: 100%;
4102
4137
  margin: 0;
4103
- padding: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px))) 0;
4104
- line-height: calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
4105
- 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))));
4106
4141
  font-family: var(--font-family);
4107
4142
  color: var(--sjs-general-forecolor-light, var(--foreground-light, #909090));
4108
4143
  font-weight: normal;
@@ -4131,35 +4166,35 @@ button.spg-action-button--large {
4131
4166
  align-items: flex-end;
4132
4167
  padding: 0px;
4133
4168
  font-family: var(--font-family);
4134
- line-height: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
4135
- 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))));
4136
4171
  color: var(--sjs-general-forecolor-light, var(--foreground-light, #909090));
4137
4172
  position: absolute;
4138
- inset-inline-end: calc(0.75 * var(--sjs-base-unit, var(--base-unit, 8px)));
4139
- 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))));
4140
4175
  }
4141
4176
 
4142
4177
  .spg-question__description {
4143
- line-height: calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
4144
- 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))));
4145
4180
  color: var(--sjs-general-forecolor, var(--foreground, #161616));
4146
- 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))));
4147
4182
  white-space: normal;
4148
4183
  }
4149
4184
 
4150
4185
  .spg-row-narrow__question {
4151
- 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))));
4152
4187
  }
4153
4188
 
4154
4189
  .spg-row--multiple > div > .spg-row-narrow__question {
4155
- 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))));
4156
4191
  }
4157
4192
 
4158
4193
  .spg-question--location--left {
4159
4194
  flex-direction: row;
4160
4195
  background: var(--sjs-general-backcolor, var(--background, #fff));
4161
4196
  box-shadow: inset 0 0 0 1px var(--sjs-border-inside, var(--border-inside, rgba(0, 0, 0, 0.16)));
4162
- 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))));
4163
4198
  vertical-align: middle;
4164
4199
  align-items: stretch;
4165
4200
  }
@@ -4176,7 +4211,7 @@ button.spg-action-button--large {
4176
4211
  align-items: center;
4177
4212
  }
4178
4213
  .spg-question__header--location--left .spg-question__title {
4179
- 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))));
4180
4215
  border-right: 1px solid var(--sjs-border-default, var(--border, #d6d6d6));
4181
4216
  display: inline-block;
4182
4217
  }
@@ -4195,15 +4230,15 @@ button.spg-action-button--large {
4195
4230
 
4196
4231
  .spg-row--multiple {
4197
4232
  display: flex;
4198
- gap: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
4233
+ gap: var(--sjs-base-unit, var(--base-unit, 8px));
4199
4234
  flex-wrap: wrap;
4200
4235
  }
4201
4236
  .spg-row--multiple > div {
4202
4237
  flex-grow: 1;
4203
- 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))));
4204
4239
  }
4205
4240
  .spg-row--multiple > div .spg-question__header--location--left {
4206
- 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))));
4207
4242
  }
4208
4243
  .spg-row--multiple > div input {
4209
4244
  min-width: max(17 * var(--sjs-base-unit, var(--base-unit, 8px)), 100%);
@@ -4211,33 +4246,33 @@ button.spg-action-button--large {
4211
4246
  }
4212
4247
 
4213
4248
  .spg-question__erbox {
4214
- 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))));
4215
4250
  color: var(--sjs-general-forecolor, var(--foreground, #161616));
4216
4251
  background-color: var(--sjs-special-red-light, var(--red-light, rgba(230, 10, 62, 0.1)));
4217
- border-radius: calc(0.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
4218
- 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))));
4219
4254
  }
4220
4255
  .spg-question__erbox > div {
4221
4256
  display: flex;
4222
- gap: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
4257
+ gap: var(--sjs-base-unit, var(--base-unit, 8px));
4223
4258
  }
4224
4259
 
4225
4260
  .spg-question__erbox-icon {
4226
4261
  display: block;
4227
4262
  flex-grow: 0;
4228
4263
  flex-shrink: 0;
4229
- width: calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
4230
- height: calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
4231
- 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))));
4232
4267
  background-repeat: no-repeat;
4233
4268
  background-position: 0 0;
4234
- 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))));
4235
4270
  white-space: normal;
4236
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");
4237
4272
  }
4238
4273
 
4239
4274
  .spg-question__erbox--location--bottom {
4240
- margin-top: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
4275
+ margin-top: var(--sjs-base-unit, var(--base-unit, 8px));
4241
4276
  }
4242
4277
 
4243
4278
  .spg-input {
@@ -4248,12 +4283,12 @@ button.spg-action-button--large {
4248
4283
  background-color: var(--sjs-general-backcolor, var(--background, #fff));
4249
4284
  box-sizing: border-box;
4250
4285
  width: 100%;
4251
- height: calc(6 * var(--sjs-base-unit, var(--base-unit, 8px)));
4286
+ height: calc(6 * (var(--sjs-base-unit, var(--base-unit, 8px))));
4252
4287
  border: none;
4253
4288
  box-shadow: inset 0 0 0 1px var(--sjs-border-inside, var(--border-inside, rgba(0, 0, 0, 0.16)));
4254
- 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))));
4255
4290
  outline: none;
4256
- 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))));
4257
4292
  font-family: var(--font-family);
4258
4293
  color: var(--sjs-general-forecolor, var(--foreground, #161616));
4259
4294
  }
@@ -4278,7 +4313,7 @@ button.spg-action-button--large {
4278
4313
  .spg-input[type=color] {
4279
4314
  padding-left: 0;
4280
4315
  padding-right: 0;
4281
- 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))));
4282
4317
  }
4283
4318
 
4284
4319
  .spg-input__edit-button {
@@ -4288,9 +4323,9 @@ button.spg-action-button--large {
4288
4323
  background: var(--sjs-general-backcolor, var(--background, #fff));
4289
4324
  border: none;
4290
4325
  outline: none;
4291
- width: calc(5 * var(--sjs-base-unit, var(--base-unit, 8px)));
4292
- height: calc(5 * var(--sjs-base-unit, var(--base-unit, 8px)));
4293
- 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));
4294
4329
  line-height: 0;
4295
4330
  }
4296
4331
  .spg-input__edit-button:hover {
@@ -4317,9 +4352,9 @@ button.spg-action-button--large {
4317
4352
  display: flex;
4318
4353
  justify-content: space-between;
4319
4354
  cursor: default;
4320
- 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))));
4321
4356
  align-items: center;
4322
- 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))));
4323
4358
  box-shadow: 0 0 0 1px inset var(--sjs-border-inside, var(--border-inside, rgba(0, 0, 0, 0.16)));
4324
4359
  }
4325
4360
 
@@ -4330,7 +4365,7 @@ button.spg-action-button--large {
4330
4365
  height: auto;
4331
4366
  }
4332
4367
  .spg-input-container--multiline sv-ng-question-comment {
4333
- height: calc(9 * var(--sjs-base-unit, var(--base-unit, 8px)));
4368
+ height: calc(9 * (var(--sjs-base-unit, var(--base-unit, 8px))));
4334
4369
  }
4335
4370
  .spg-input-container--multiline .spg-input-container__input {
4336
4371
  box-sizing: border-box;
@@ -4340,13 +4375,13 @@ button.spg-action-button--large {
4340
4375
  .spg-input-container__input {
4341
4376
  flex-grow: 1;
4342
4377
  width: 100%;
4343
- 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))));
4344
4379
  color: var(--sjs-general-forecolor, var(--foreground, #161616));
4345
- 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))));
4346
4381
  font-family: var(--font-family);
4347
4382
  outline: none;
4348
4383
  border: none;
4349
- 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))));
4350
4385
  background-color: transparent;
4351
4386
  }
4352
4387
 
@@ -4356,15 +4391,15 @@ button.spg-action-button--large {
4356
4391
 
4357
4392
  .spg-input-container__buttons-container {
4358
4393
  display: flex;
4359
- 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))));
4360
4395
  }
4361
4396
 
4362
4397
  .spg-dropdown {
4363
4398
  border-radius: 0;
4364
4399
  display: flex;
4365
- 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))));
4366
4401
  line-height: normal;
4367
- 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;
4368
4403
  }
4369
4404
 
4370
4405
  .spg-dropdown__filter-string-input {
@@ -4376,11 +4411,11 @@ button.spg-action-button--large {
4376
4411
  }
4377
4412
 
4378
4413
  .spg-comment {
4379
- height: calc(9 * var(--sjs-base-unit, var(--base-unit, 8px)));
4414
+ height: calc(9 * (var(--sjs-base-unit, var(--base-unit, 8px))));
4380
4415
  max-width: 100%;
4381
- min-width: calc(6 * var(--sjs-base-unit, var(--base-unit, 8px)));
4382
- min-height: calc(6 * var(--sjs-base-unit, var(--base-unit, 8px)));
4383
- 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))));
4384
4419
  }
4385
4420
 
4386
4421
  .spg-panel__title {
@@ -4389,7 +4424,7 @@ button.spg-action-button--large {
4389
4424
  appearance: none;
4390
4425
  box-sizing: border-box;
4391
4426
  width: 100%;
4392
- padding: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
4427
+ padding: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
4393
4428
  border: none;
4394
4429
  outline: none;
4395
4430
  color: var(--sjs-general-forecolor-light, var(--foreground-light, #909090));
@@ -4398,7 +4433,7 @@ button.spg-action-button--large {
4398
4433
  background-color: var(--sjs-general-backcolor, var(--background, #fff));
4399
4434
  box-shadow: inset 0px -1px 0px var(--sjs-border-default, var(--border, #d6d6d6));
4400
4435
  font-family: var(--font-family);
4401
- 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))));
4402
4437
  font-weight: 400;
4403
4438
  margin: 0;
4404
4439
  }
@@ -4425,7 +4460,7 @@ button.spg-action-button--large {
4425
4460
  flex-direction: column;
4426
4461
  align-items: flex-start;
4427
4462
  width: 100%;
4428
- 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))));
4429
4464
  box-sizing: border-box;
4430
4465
  background: var(--sjs-general-backcolor-dim, var(--background-dim, #f3f3f3));
4431
4466
  box-shadow: inset 0px -1px 0px var(--sjs-border-default, var(--border, #d6d6d6));
@@ -4433,14 +4468,14 @@ button.spg-action-button--large {
4433
4468
 
4434
4469
  .spg-panel__content .spg-row {
4435
4470
  width: 100%;
4436
- 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))));
4437
4472
  }
4438
4473
  .spg-panel__content .spg-row--multiple {
4439
- margin-top: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
4474
+ margin-top: var(--sjs-base-unit, var(--base-unit, 8px));
4440
4475
  }
4441
4476
 
4442
4477
  .sv-mobile-side-bar .spg-panel__content {
4443
- 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))));
4444
4479
  }
4445
4480
 
4446
4481
  .spg-question__nopadding .spg-panel__content {
@@ -4450,7 +4485,7 @@ button.spg-action-button--large {
4450
4485
 
4451
4486
  .spg-checkbox {
4452
4487
  cursor: pointer;
4453
- 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))));
4454
4489
  }
4455
4490
 
4456
4491
  .spg-checkbox--disabled {
@@ -4465,17 +4500,17 @@ button.spg-action-button--large {
4465
4500
 
4466
4501
  .spg-checkbox__caption {
4467
4502
  font-family: var(--font-family);
4468
- 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))));
4469
4504
  color: var(--sjs-general-forecolor, var(--foreground, #161616));
4470
- 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))));
4471
4506
  }
4472
4507
 
4473
4508
  .spg-checkbox__rectangle {
4474
4509
  background: var(--sjs-general-backcolor, var(--background, #fff));
4475
4510
  border: 1px solid var(--sjs-border-default, var(--border, #d6d6d6));
4476
4511
  box-sizing: border-box;
4477
- width: calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
4478
- 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))));
4479
4514
  flex-shrink: 0;
4480
4515
  padding: 1px 1px;
4481
4516
  }
@@ -4499,10 +4534,10 @@ button.spg-action-button--large {
4499
4534
 
4500
4535
  .spg-checkbox--checked .spg-checkbox__svg {
4501
4536
  display: block;
4502
- width: calc(2.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
4503
- 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))));
4504
4539
  background-repeat: no-repeat;
4505
- 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))));
4506
4541
  fill: var(--sjs-primary-backcolor, var(--primary, #19b394));
4507
4542
  }
4508
4543
 
@@ -4532,11 +4567,11 @@ button.spg-action-button--large {
4532
4567
  .spg-selectbase__label {
4533
4568
  display: flex;
4534
4569
  align-items: flex-start;
4535
- gap: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
4570
+ gap: var(--sjs-base-unit, var(--base-unit, 8px));
4536
4571
  }
4537
4572
 
4538
4573
  .spg-matrixdynamic__drag-element {
4539
- padding: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
4574
+ padding: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
4540
4575
  }
4541
4576
  .spg-matrixdynamic__drag-element:hover {
4542
4577
  background-color: var(--sjs-general-backcolor, var(--background, #fff));
@@ -4544,13 +4579,13 @@ button.spg-action-button--large {
4544
4579
  .spg-matrixdynamic__drag-element:after {
4545
4580
  content: " ";
4546
4581
  display: block;
4547
- 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))));
4548
4583
  }
4549
4584
 
4550
4585
  .spg-drag-element__svg {
4551
- width: calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
4552
- height: calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
4553
- 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));
4554
4589
  display: block;
4555
4590
  opacity: 0.5;
4556
4591
  }
@@ -4567,7 +4602,7 @@ button.spg-action-button--large {
4567
4602
  .spg-matrixdynamic__drag-drop-ghost-position-bottom::after {
4568
4603
  content: "";
4569
4604
  width: 100%;
4570
- 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))));
4571
4606
  background-color: var(--sjs-secondary-backcolor, var(--secondary, #ff9814));
4572
4607
  position: absolute;
4573
4608
  left: 0;
@@ -4582,7 +4617,7 @@ button.spg-action-button--large {
4582
4617
  }
4583
4618
 
4584
4619
  .spg-matrixdynamic__placeholder {
4585
- 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;
4586
4621
  display: flex;
4587
4622
  flex-direction: column;
4588
4623
  justify-content: center;
@@ -4596,8 +4631,8 @@ button.spg-action-button--large {
4596
4631
  }
4597
4632
 
4598
4633
  .spg-matrixdynamic__placeholder-text {
4599
- font-size: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
4600
- 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))));
4601
4636
  color: var(--sjs-general-forecolor-light, var(--foreground-light, #909090));
4602
4637
  }
4603
4638
 
@@ -4605,29 +4640,29 @@ button.spg-action-button--large {
4605
4640
  display: none;
4606
4641
  appearance: none;
4607
4642
  border: none;
4608
- 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))));
4609
4644
  background: transparent;
4610
4645
  color: var(--sjs-primary-backcolor, var(--primary, #19b394));
4611
4646
  font-family: var(--font-family);
4612
- 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))));
4613
4648
  font-weight: 600;
4614
- 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))));
4615
4650
  }
4616
4651
 
4617
4652
  .spg-smiley-icon {
4618
- width: calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
4619
- height: calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
4620
- 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));
4621
4656
  border-radius: 100px;
4622
4657
  border: 1px solid var(--sjs-general-forecolor, var(--foreground, #161616));
4623
4658
  display: flex;
4624
4659
  justify-content: center;
4625
4660
  align-items: center;
4626
- 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))));
4627
4662
  }
4628
4663
  .spg-smiley-icon svg {
4629
- width: calc(1.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
4630
- 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))));
4631
4666
  fill: var(--sjs-general-forecolor, var(--foreground, #161616));
4632
4667
  }
4633
4668
 
@@ -4649,7 +4684,7 @@ button.spg-action-button--large {
4649
4684
  padding: 0;
4650
4685
  }
4651
4686
  .spg-table__cell .spg-checkbox {
4652
- 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))));
4653
4688
  }
4654
4689
 
4655
4690
  .spg-table__cell--detail-panel {
@@ -4665,12 +4700,12 @@ button.spg-action-button--large {
4665
4700
 
4666
4701
  .spg-table__cell:not(.spg-table__cell--detail-panel) .spg-input {
4667
4702
  appearance: none;
4668
- line-height: calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
4669
- 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))));
4670
4705
  box-shadow: none;
4671
- 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))));
4672
4707
  background-color: transparent;
4673
- padding: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
4708
+ padding: var(--sjs-base-unit, var(--base-unit, 8px));
4674
4709
  height: auto;
4675
4710
  }
4676
4711
  .spg-table__cell:not(.spg-table__cell--detail-panel) .spg-input[type=color] {
@@ -4686,19 +4721,19 @@ button.spg-action-button--large {
4686
4721
 
4687
4722
  .spg-table__cell:not(.spg-table__cell--detail-panel) .spg-dropdown {
4688
4723
  width: max-content;
4689
- padding-right: calc(4 * var(--sjs-base-unit, var(--base-unit, 8px)));
4690
- background-size: calc(3 * var(--sjs-base-unit, var(--base-unit, 8px))) calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
4691
- 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;
4692
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");
4693
4728
  background-repeat: no-repeat;
4694
4729
  }
4695
4730
 
4696
4731
  .spg-table__cell:not(.spg-table__cell--detail-panel):first-of-type .spg-text {
4697
- 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))));
4698
4733
  }
4699
4734
 
4700
4735
  .spg-table__cell--actions:first-of-type {
4701
- width: calc(5 * var(--sjs-base-unit, var(--base-unit, 8px)));
4736
+ width: calc(5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
4702
4737
  }
4703
4738
 
4704
4739
  .spg-table__cell--actions:last-of-type .spg-action-bar {
@@ -4707,15 +4742,15 @@ button.spg-action-button--large {
4707
4742
 
4708
4743
  .spg-table__cell--actions > .spg-matrixdynamic__drag-element {
4709
4744
  display: inline-block;
4710
- 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))));
4711
4746
  cursor: move;
4712
4747
  }
4713
4748
 
4714
4749
  .spg-table__cell--header {
4715
- 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))));
4716
4751
  font-weight: normal;
4717
4752
  color: var(--sjs-general-forecolor-light, var(--foreground-light, #909090));
4718
- 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))));
4719
4754
  background: var(--sjs-general-backcolor-dim, var(--background-dim, #f3f3f3));
4720
4755
  text-align: left;
4721
4756
  white-space: nowrap;
@@ -4731,14 +4766,14 @@ button.spg-action-button--large {
4731
4766
  }
4732
4767
 
4733
4768
  .spg-table__question-wrapper {
4734
- 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;
4735
4770
  }
4736
4771
 
4737
4772
  .spg-question-group .spg-row {
4738
4773
  margin-top: 0;
4739
4774
  }
4740
4775
  .spg-question-group .spg-row:not(:first-of-type) {
4741
- margin-top: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
4776
+ margin-top: var(--sjs-base-unit, var(--base-unit, 8px));
4742
4777
  }
4743
4778
 
4744
4779
  .spg-color-editor__color-input {
@@ -4756,7 +4791,7 @@ button.spg-action-button--large {
4756
4791
 
4757
4792
  .spg-color-editor__color-item {
4758
4793
  display: flex;
4759
- gap: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
4794
+ gap: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
4760
4795
  }
4761
4796
  .spg-color-editor__color-item .spg-color-editor__color-swatch {
4762
4797
  margin-left: 0;
@@ -4767,16 +4802,16 @@ button.spg-action-button--large {
4767
4802
  flex-shrink: 0;
4768
4803
  flex-grow: 0;
4769
4804
  border-radius: 3px;
4770
- width: calc(4 * var(--sjs-base-unit, var(--base-unit, 8px)));
4771
- 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))));
4772
4807
  box-sizing: border-box;
4773
4808
  border: 1px solid rgba(0, 0, 0, 0.16);
4774
- 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))));
4775
4810
  }
4776
4811
  .spg-color-editor__color-swatch .sv-svg-icon {
4777
4812
  position: absolute;
4778
- width: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
4779
- 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))));
4780
4815
  left: 50%;
4781
4816
  top: 50%;
4782
4817
  transform: translate(-50%, -50%);
@@ -4792,7 +4827,7 @@ button.spg-action-button--large {
4792
4827
  }
4793
4828
 
4794
4829
  .spg-color-editor .spg-input__edit-button + * {
4795
- 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))));
4796
4831
  }
4797
4832
 
4798
4833
  .spg-file-edit__choose-button {
@@ -4806,10 +4841,10 @@ button.spg-action-button--large {
4806
4841
  .spg-theme-builder-root .spg-paneldynamic__separator {
4807
4842
  border: none;
4808
4843
  margin: 0;
4809
- height: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
4844
+ height: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
4810
4845
  }
4811
4846
  .spg-theme-builder-root .spg-panel__footer {
4812
- 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;
4813
4848
  }
4814
4849
  .spg-theme-builder-root .spg-paneldynamic__add-btn {
4815
4850
  margin: 0 auto;
@@ -4828,7 +4863,7 @@ button.spg-action-button--large {
4828
4863
  min-width: 0;
4829
4864
  }
4830
4865
  .spg-theme-builder-root .spg-row--multiple > div .spg-question--location--left {
4831
- height: calc(6 * var(--sjs-base-unit, var(--base-unit, 8px)));
4866
+ height: calc(6 * (var(--sjs-base-unit, var(--base-unit, 8px))));
4832
4867
  box-sizing: border-box;
4833
4868
  }
4834
4869
  .spg-theme-builder-root .spg-row--multiple > div .spg-question--location--left .spg-input {
@@ -4848,19 +4883,19 @@ button.spg-action-button--large {
4848
4883
  }
4849
4884
  .spg-theme-builder-root .spg-panel__content .spg-panel__content {
4850
4885
  padding: 0;
4851
- 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))));
4852
4887
  box-shadow: none;
4853
4888
  }
4854
4889
  .spg-theme-builder-root .spg-panel__content .spg-panel__content .spg-panel__title {
4855
4890
  background-color: transparent;
4856
4891
  box-shadow: none;
4857
- padding: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px))) 0;
4892
+ padding: var(--sjs-base-unit, var(--base-unit, 8px)) 0;
4858
4893
  }
4859
4894
  .spg-theme-builder-root .spg-panel__content .spg-panel__content::after {
4860
4895
  content: " ";
4861
4896
  display: block;
4862
4897
  position: relative;
4863
- left: calc(-4 * var(--sjs-base-unit, var(--base-unit, 8px)));
4898
+ left: calc(-4 * (var(--sjs-base-unit, var(--base-unit, 8px))));
4864
4899
  top: calc(5 * var(--sjs-base-unit, var(--base-unit, 8px)));
4865
4900
  width: calc(8 * var(--sjs-base-unit, var(--base-unit, 8px)) + 100%);
4866
4901
  height: 1px;
@@ -4876,7 +4911,7 @@ button.spg-action-button--large {
4876
4911
  content: none;
4877
4912
  }
4878
4913
  .spg-theme-builder-root .spg-panel__content .spg-panel__content .spg-panel__content .spg-row {
4879
- margin-top: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
4914
+ margin-top: var(--sjs-base-unit, var(--base-unit, 8px));
4880
4915
  }
4881
4916
  .spg-theme-builder-root .spg-panel__content .spg-panel__content .spg-panel__content .spg-row:first-of-type {
4882
4917
  margin-top: 0;
@@ -4914,7 +4949,7 @@ button.spg-action-button--large {
4914
4949
  }
4915
4950
 
4916
4951
  .sv-popup--modal {
4917
- padding: calc(4 * var(--sjs-base-unit, var(--base-unit, 8px)));
4952
+ padding: calc(4 * (var(--sjs-base-unit, var(--base-unit, 8px))));
4918
4953
  }
4919
4954
  .sv-popup--modal.sv-property-editor .sv-popup__container .sv-popup_shadow {
4920
4955
  background-color: transparent;
@@ -4931,7 +4966,7 @@ button.spg-action-button--large {
4931
4966
  }
4932
4967
  .sv-popup--modal .sd-body,
4933
4968
  .sv-popup--modal .sl-body {
4934
- 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))));
4935
4970
  }
4936
4971
 
4937
4972
  .sv-popup.sv-property-editor .sd-root-modern {
@@ -4939,8 +4974,8 @@ button.spg-action-button--large {
4939
4974
  }
4940
4975
 
4941
4976
  .svc-object-selector .sv-popup__container {
4942
- margin-left: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
4943
- 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));
4944
4979
  }
4945
4980
 
4946
4981
  .svc-object-selector__content {
@@ -4952,8 +4987,8 @@ button.spg-action-button--large {
4952
4987
  }
4953
4988
 
4954
4989
  .spg-title .spg-action-bar {
4955
- margin-top: calc(-1 * var(--sjs-base-unit, var(--base-unit, 8px)));
4956
- 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))));
4957
4992
  margin-right: 1px;
4958
4993
  }
4959
4994
 
@@ -4962,7 +4997,7 @@ button.spg-action-button--large {
4962
4997
  }
4963
4998
 
4964
4999
  .spg-body--empty {
4965
- margin: calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
5000
+ margin: calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
4966
5001
  }
4967
5002
  .svc-text {
4968
5003
  font-family: var(--font-family);
@@ -4972,13 +5007,13 @@ button.spg-action-button--large {
4972
5007
  }
4973
5008
 
4974
5009
  .svc-text--normal {
4975
- font-size: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
4976
- 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))));
4977
5012
  }
4978
5013
 
4979
5014
  .svc-text--small {
4980
- font-size: calc(1.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
4981
- 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))));
4982
5017
  }
4983
5018
 
4984
5019
  .svc-text--bold {
@@ -5010,15 +5045,15 @@ button.spg-action-button--large {
5010
5045
  }
5011
5046
 
5012
5047
  .sv-action-bar--default-size-mode .sv-action-bar-separator {
5013
- height: calc(5 * var(--sjs-base-unit, var(--base-unit, 8px)));
5048
+ height: calc(5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
5014
5049
  }
5015
5050
 
5016
5051
  .sv-action-bar--small-size-mode .sv-action-bar-separator {
5017
- height: calc(4 * var(--sjs-base-unit, var(--base-unit, 8px)));
5052
+ height: calc(4 * (var(--sjs-base-unit, var(--base-unit, 8px))));
5018
5053
  }
5019
5054
 
5020
5055
  .svc-creator--mobile .sv-action-bar-separator {
5021
- height: calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
5056
+ height: calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
5022
5057
  }
5023
5058
 
5024
5059
  .sv-action-bar--small-size-mode .sv-action-bar-item {
@@ -5037,11 +5072,17 @@ button.spg-action-button--large {
5037
5072
  display: flex;
5038
5073
  }
5039
5074
  .svc-top-bar .svc-toolbar-wrapper .sv-action-bar {
5040
- padding: 0 calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
5075
+ padding: 0 var(--sjs-base-unit, var(--base-unit, 8px));
5041
5076
  justify-content: flex-end;
5042
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
+ }
5043
5084
  .svc-top-bar .svc-toolbar-wrapper .sv-action .sv-action-bar-item {
5044
- margin: 0 calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
5085
+ margin: 0 var(--sjs-base-unit, var(--base-unit, 8px));
5045
5086
  }
5046
5087
 
5047
5088
  .svc-footer-bar .svc-toolbar-wrapper {
@@ -5049,7 +5090,7 @@ button.spg-action-button--large {
5049
5090
  left: 0;
5050
5091
  right: 0;
5051
5092
  bottom: 0;
5052
- height: calc(6 * var(--sjs-base-unit, var(--base-unit, 8px)));
5093
+ height: calc(6 * (var(--sjs-base-unit, var(--base-unit, 8px))));
5053
5094
  }
5054
5095
  .svc-footer-bar .svc-toolbar-wrapper .sv-action-bar {
5055
5096
  justify-content: center;