survey-react 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.
package/defaultV2.css CHANGED
@@ -1,9 +1,8 @@
1
1
  /*!
2
- * surveyjs - Survey JavaScript library v1.9.109
2
+ * surveyjs - Survey JavaScript library v1.9.111
3
3
  * Copyright (c) 2015-2023 Devsoft Baltic OÜ - http://surveyjs.io/
4
4
  * License: MIT (http://www.opensource.org/licenses/mit-license.php)
5
5
  */
6
- @charset "UTF-8";
7
6
  /* cyrillic-ext */
8
7
  @font-face {
9
8
  font-family: "Open Sans";
@@ -244,11 +243,11 @@
244
243
  }
245
244
 
246
245
  .sv-action-bar--default-size-mode .sv-action-bar-separator {
247
- margin: 0 calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
246
+ margin: 0 var(--sjs-base-unit, var(--base-unit, 8px));
248
247
  }
249
248
 
250
249
  .sv-action-bar--small-size-mode .sv-action-bar-separator {
251
- margin: 0 calc(0.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
250
+ margin: 0 calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
252
251
  }
253
252
 
254
253
  .sv-action-bar-item {
@@ -256,10 +255,10 @@
256
255
  -moz-appearance: none;
257
256
  appearance: none;
258
257
  display: flex;
259
- padding: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
258
+ padding: var(--sjs-base-unit, var(--base-unit, 8px));
260
259
  box-sizing: border-box;
261
260
  border: none;
262
- border-radius: calc(0.5 * var(--sjs-corner-radius, 4px));
261
+ border-radius: calc(0.5 * (var(--sjs-corner-radius, 4px)));
263
262
  background-color: transparent;
264
263
  color: var(--sjs-general-forecolor, var(--foreground, #161616));
265
264
  cursor: pointer;
@@ -273,17 +272,17 @@ button.sv-action-bar-item {
273
272
  }
274
273
 
275
274
  .sv-action-bar--default-size-mode .sv-action-bar-item {
276
- height: calc(5 * var(--sjs-base-unit, var(--base-unit, 8px)));
277
- font-size: calc(1 * var(--sjs-font-size, 16px));
278
- line-height: calc(1.5 * var(--sjs-font-size, 16px));
279
- margin: 0 calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
275
+ height: calc(5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
276
+ font-size: var(--sjs-font-size, 16px);
277
+ line-height: calc(1.5 * (var(--sjs-font-size, 16px)));
278
+ margin: 0 var(--sjs-base-unit, var(--base-unit, 8px));
280
279
  }
281
280
 
282
281
  .sv-action-bar--small-size-mode .sv-action-bar-item {
283
- height: calc(4 * var(--sjs-base-unit, var(--base-unit, 8px)));
284
- font-size: calc(0.75 * var(--sjs-font-size, 16px));
285
- line-height: calc(1 * var(--sjs-font-size, 16px));
286
- margin: 0 calc(0.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
282
+ height: calc(4 * (var(--sjs-base-unit, var(--base-unit, 8px))));
283
+ font-size: calc(0.75 * (var(--sjs-font-size, 16px)));
284
+ line-height: var(--sjs-font-size, 16px);
285
+ margin: 0 calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
287
286
  }
288
287
 
289
288
  .sv-action:first-of-type .sv-action-bar-item {
@@ -295,11 +294,11 @@ button.sv-action-bar-item {
295
294
  }
296
295
 
297
296
  .sv-action-bar--default-size-mode .sv-action-bar-item__title--with-icon {
298
- margin-inline-start: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
297
+ margin-inline-start: var(--sjs-base-unit, var(--base-unit, 8px));
299
298
  }
300
299
 
301
300
  .sv-action-bar--small-size-mode .sv-action-bar-item__title--with-icon {
302
- margin-inline-start: calc(0.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
301
+ margin-inline-start: calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
303
302
  }
304
303
 
305
304
  .sv-action-bar-item__icon svg {
@@ -347,15 +346,15 @@ button.sv-action-bar-item {
347
346
  -moz-appearance: none;
348
347
  appearance: none;
349
348
  display: flex;
350
- height: calc(5 * var(--sjs-base-unit, var(--base-unit, 8px)));
351
- padding: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
349
+ height: calc(5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
350
+ padding: var(--sjs-base-unit, var(--base-unit, 8px));
352
351
  box-sizing: border-box;
353
352
  border: none;
354
- border-radius: calc(0.5 * var(--sjs-corner-radius, 4px));
353
+ border-radius: calc(0.5 * (var(--sjs-corner-radius, 4px)));
355
354
  background-color: transparent;
356
355
  cursor: pointer;
357
- line-height: calc(1.5 * var(--sjs-font-size, 16px));
358
- font-size: calc(1 * var(--sjs-font-size, 16px));
356
+ line-height: calc(1.5 * (var(--sjs-font-size, 16px)));
357
+ font-size: var(--sjs-font-size, 16px);
359
358
  font-family: var(--font-family, var(--font-family));
360
359
  }
361
360
 
@@ -414,35 +413,35 @@ button.sv-action-bar-item {
414
413
  }
415
414
 
416
415
  .sv-dragged-element-shortcut {
417
- height: calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
418
- min-width: calc(12.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
419
- border-radius: calc(4.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
416
+ height: calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
417
+ min-width: calc(12.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
418
+ border-radius: calc(4.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
420
419
  background-color: var(--sjs-general-backcolor, var(--background, #fff));
421
- padding: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
420
+ padding: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
422
421
  cursor: grabbing;
423
422
  position: absolute;
424
423
  z-index: 10000;
425
424
  box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1);
426
425
  font-family: var(--font-family, var(--font-family));
427
- font-size: calc(1 * var(--sjs-font-size, 16px));
428
- padding-left: calc(2.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
429
- line-height: calc(1.5 * var(--sjs-font-size, 16px));
426
+ font-size: var(--sjs-font-size, 16px);
427
+ padding-left: calc(2.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
428
+ line-height: calc(1.5 * (var(--sjs-font-size, 16px)));
430
429
  }
431
430
 
432
431
  .sv-matrixdynamic__drag-icon {
433
- padding-top: calc(1.75 * var(--sjs-base-unit, var(--base-unit, 8px)));
432
+ padding-top: calc(1.75 * (var(--sjs-base-unit, var(--base-unit, 8px))));
434
433
  }
435
434
 
436
435
  .sv-matrixdynamic__drag-icon:after {
437
436
  content: " ";
438
437
  display: block;
439
- height: calc(0.75 * var(--sjs-base-unit, var(--base-unit, 8px)));
440
- width: calc(2.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
438
+ height: calc(0.75 * (var(--sjs-base-unit, var(--base-unit, 8px))));
439
+ width: calc(2.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
441
440
  border: 1px solid #e7e7e7;
442
441
  box-sizing: border-box;
443
- border-radius: calc(1.25 * var(--sjs-base-unit, var(--base-unit, 8px)));
442
+ border-radius: calc(1.25 * (var(--sjs-base-unit, var(--base-unit, 8px))));
444
443
  cursor: move;
445
- margin-top: calc(1.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
444
+ margin-top: calc(1.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
446
445
  }
447
446
 
448
447
  .sv-matrix-row--drag-drop-ghost-mod td {
@@ -474,7 +473,7 @@ sv-popup {
474
473
 
475
474
  .sv-popup__container {
476
475
  box-shadow: var(--sjs-shadow-large, 0px 8px 16px 0px rgba(0, 0, 0, 0.1));
477
- border-radius: calc(1 * var(--sjs-corner-radius, 4px));
476
+ border-radius: var(--sjs-corner-radius, 4px);
478
477
  position: absolute;
479
478
  padding: 0;
480
479
  }
@@ -482,12 +481,12 @@ sv-popup {
482
481
  .sv-popup__shadow {
483
482
  width: 100%;
484
483
  height: 100%;
485
- border-radius: calc(1 * var(--sjs-corner-radius, 4px));
484
+ border-radius: var(--sjs-corner-radius, 4px);
486
485
  }
487
486
 
488
487
  .sv-popup__body-content {
489
488
  background-color: var(--sjs-general-backcolor, var(--background, #fff));
490
- border-radius: calc(1 * var(--sjs-corner-radius, 4px));
489
+ border-radius: var(--sjs-corner-radius, 4px);
491
490
  width: 100%;
492
491
  height: 100%;
493
492
  box-sizing: border-box;
@@ -502,14 +501,40 @@ sv-popup {
502
501
  align-items: center;
503
502
  justify-content: center;
504
503
  background-color: var(--background-semitransparent, rgba(144, 144, 144, 0.5));
505
- padding: calc(11 * var(--sjs-base-unit, var(--base-unit, 8px))) calc(15 * var(--sjs-base-unit, var(--base-unit, 8px)));
504
+ padding: calc(11 * (var(--sjs-base-unit, var(--base-unit, 8px)))) calc(15 * (var(--sjs-base-unit, var(--base-unit, 8px))));
506
505
  box-sizing: border-box;
507
506
  }
508
507
  .sv-popup.sv-popup--modal .sv-popup__body-content {
509
- padding: calc(4 * var(--sjs-base-unit, var(--base-unit, 8px)));
508
+ padding: calc(4 * (var(--sjs-base-unit, var(--base-unit, 8px))));
510
509
  height: auto;
511
510
  }
512
511
 
512
+ .sv-popup--confirm-delete .sv-popup__container {
513
+ border-radius: var(--sjs-base-unit, var(--base-unit, 8px));
514
+ }
515
+ .sv-popup--confirm-delete .sv-popup__body-content {
516
+ border-radius: var(--sjs-base-unit, var(--base-unit, 8px));
517
+ }
518
+ .sv-popup--confirm-delete .sv-popup__body-header {
519
+ color: var(--sjs-font-editorfont-color, var(--sjs-general-forecolor, rgba(0, 0, 0, 0.91)));
520
+ margin-bottom: 0;
521
+ /* UI/Default */
522
+ font-family: var(--font-family);
523
+ font-size: var(--sjs-font-size, 16px);
524
+ font-style: normal;
525
+ font-weight: 400;
526
+ line-height: calc(1.5 * (var(--sjs-font-size, 16px))); /* 150% */
527
+ }
528
+ .sv-popup--confirm-delete .sv-popup__scrolling-content {
529
+ display: none;
530
+ }
531
+ .sv-popup--confirm-delete .sv-popup__body-footer {
532
+ padding-bottom: 0;
533
+ }
534
+ .sv-popup--confirm-delete .sv-popup__body-footer .sv-action-bar {
535
+ gap: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
536
+ }
537
+
513
538
  .sv-popup.sv-popup--modal > .sv-popup__container {
514
539
  position: static;
515
540
  }
@@ -524,23 +549,23 @@ sv-popup {
524
549
  max-height: calc(var(--sv-popup-overlay-height, 100vh) - 1 * var(--sjs-base-unit, var(--base-unit, 8px)));
525
550
  height: calc(var(--sv-popup-overlay-height, 100vh) - 1 * var(--sjs-base-unit, var(--base-unit, 8px)));
526
551
  width: 100%;
527
- padding-top: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
552
+ padding-top: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
528
553
  border: unset;
529
554
  }
530
555
  .sv-popup--overlay.sv-popup--overlay .sv-popup__body-content {
531
556
  max-height: var(--sv-popup-overlay-height, 100vh);
532
557
  max-width: 100vw;
533
- border-radius: calc(4 * var(--sjs-corner-radius, 4px)) calc(4 * var(--sjs-corner-radius, 4px)) 0px 0px;
558
+ border-radius: calc(4 * (var(--sjs-corner-radius, 4px))) calc(4 * (var(--sjs-corner-radius, 4px))) 0px 0px;
534
559
  background: var(--sjs-general-backcolor, var(--background, #fff));
535
560
  box-shadow: var(--sjs-shadow-large, 0px 8px 16px 0px rgba(0, 0, 0, 0.1));
536
- padding: calc(3 * var(--sjs-base-unit, var(--base-unit, 8px))) calc(2 * var(--sjs-base-unit, var(--base-unit, 8px))) calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
561
+ padding: calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px)))) calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px)))) calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
537
562
  height: calc(100% - 1 * var(--sjs-base-unit, var(--base-unit, 8px)));
538
563
  }
539
564
  .sv-popup--overlay.sv-popup--overlay .sv-popup__scrolling-content {
540
565
  height: calc(100% - 10 * var(--base-unit, 8px));
541
566
  }
542
567
  .sv-popup--overlay.sv-popup--overlay .sv-popup__body-footer {
543
- margin-top: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
568
+ margin-top: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
544
569
  }
545
570
  .sv-popup--overlay.sv-popup--overlay .sv-popup__body-footer .sv-action-bar {
546
571
  width: 100%;
@@ -589,22 +614,22 @@ sv-popup {
589
614
  }
590
615
 
591
616
  .sv-popup--show-pointer.sv-popup--top .sv-popup__pointer {
592
- transform: translate(calc(-1 * var(--sjs-base-unit, var(--base-unit, 8px)))) rotate(180deg);
617
+ transform: translate(calc(-1 * (var(--sjs-base-unit, var(--base-unit, 8px))))) rotate(180deg);
593
618
  }
594
619
 
595
620
  .sv-popup--show-pointer.sv-popup--bottom .sv-popup__pointer {
596
- transform: translate(calc(-1 * var(--sjs-base-unit, var(--base-unit, 8px))), calc(-1 * var(--sjs-base-unit, var(--base-unit, 8px))));
621
+ transform: translate(calc(-1 * (var(--sjs-base-unit, var(--base-unit, 8px)))), calc(-1 * (var(--sjs-base-unit, var(--base-unit, 8px)))));
597
622
  }
598
623
 
599
624
  .sv-popup--show-pointer.sv-popup--right .sv-popup__container {
600
- transform: translate(calc(1 * var(--sjs-base-unit, var(--base-unit, 8px))));
625
+ transform: translate(var(--sjs-base-unit, var(--base-unit, 8px)));
601
626
  }
602
627
  .sv-popup--show-pointer.sv-popup--right .sv-popup__container .sv-popup__pointer {
603
628
  transform: translate(-12px, -4px) rotate(-90deg);
604
629
  }
605
630
 
606
631
  .sv-popup--show-pointer.sv-popup--left .sv-popup__container {
607
- transform: translate(calc(-1 * var(--sjs-base-unit, var(--base-unit, 8px))));
632
+ transform: translate(calc(-1 * (var(--sjs-base-unit, var(--base-unit, 8px)))));
608
633
  }
609
634
  .sv-popup--show-pointer.sv-popup--left .sv-popup__container .sv-popup__pointer {
610
635
  transform: translate(-4px, -4px) rotate(90deg);
@@ -619,42 +644,42 @@ sv-popup {
619
644
  display: block;
620
645
  width: 0;
621
646
  height: 0;
622
- border-left: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px))) solid transparent;
623
- border-right: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px))) solid transparent;
624
- border-bottom: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px))) solid var(--sjs-general-backcolor, var(--background, #fff));
647
+ border-left: var(--sjs-base-unit, var(--base-unit, 8px)) solid transparent;
648
+ border-right: var(--sjs-base-unit, var(--base-unit, 8px)) solid transparent;
649
+ border-bottom: var(--sjs-base-unit, var(--base-unit, 8px)) solid var(--sjs-general-backcolor, var(--background, #fff));
625
650
  align-self: center;
626
651
  }
627
652
 
628
653
  .sv-popup__body-header {
629
654
  font-family: Open Sans;
630
- font-size: calc(1.5 * var(--sjs-font-size, 16px));
631
- line-height: calc(2 * var(--sjs-font-size, 16px));
655
+ font-size: calc(1.5 * (var(--sjs-font-size, 16px)));
656
+ line-height: calc(2 * (var(--sjs-font-size, 16px)));
632
657
  font-style: normal;
633
658
  font-weight: 700;
634
- margin-bottom: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
659
+ margin-bottom: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
635
660
  color: var(--sjs-general-forecolor, var(--foreground, #161616));
636
661
  }
637
662
 
638
663
  .sv-popup__body-footer {
639
664
  display: flex;
640
- margin-top: calc(4 * var(--sjs-base-unit, var(--base-unit, 8px)));
665
+ margin-top: calc(4 * (var(--sjs-base-unit, var(--base-unit, 8px))));
641
666
  }
642
667
 
643
668
  .sv-popup__body-footer .sv-action-bar {
644
- gap: calc(1.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
669
+ gap: calc(1.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
645
670
  }
646
671
 
647
672
  .sv-popup__button {
648
- margin: calc(0.25 * var(--sjs-base-unit, var(--base-unit, 8px)));
673
+ margin: calc(0.25 * (var(--sjs-base-unit, var(--base-unit, 8px))));
649
674
  }
650
675
 
651
676
  .sv-popup--modal .sv-list__filter,
652
677
  .sv-popup--overlay .sv-list__filter {
653
- padding-top: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
678
+ padding-top: var(--sjs-base-unit, var(--base-unit, 8px));
654
679
  }
655
680
  .sv-popup--modal .sv-list__filter-icon,
656
681
  .sv-popup--overlay .sv-list__filter-icon {
657
- top: calc(2.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
682
+ top: calc(2.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
658
683
  }
659
684
 
660
685
  .sv-dropdown-popup.sv-popup--overlay {
@@ -673,8 +698,8 @@ sv-popup {
673
698
  color: var(--sjs-primary-backcolor, var(--primary, #19b394));
674
699
  border: none;
675
700
  box-shadow: none;
676
- padding: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px))) calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
677
- border-radius: calc(12.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
701
+ padding: var(--sjs-base-unit, var(--base-unit, 8px)) calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
702
+ border-radius: calc(12.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
678
703
  margin: 0;
679
704
  }
680
705
  .sv-dropdown-popup.sv-popup--overlay .sv-popup__container {
@@ -688,40 +713,40 @@ sv-popup {
688
713
  .sv-dropdown-popup.sv-popup--overlay .sv-popup__body-footer {
689
714
  background-color: var(--sjs-general-backcolor-dim-light, var(--background-dim-light, #f9f9f9));
690
715
  margin-top: 0;
691
- padding-top: calc(0.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
692
- padding-bottom: calc(0.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
716
+ padding-top: calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
717
+ padding-bottom: calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
693
718
  border-top: 1px solid var(--sjs-border-light, var(--border-light, #eaeaea));
694
719
  }
695
720
  .sv-dropdown-popup.sv-popup--overlay .sv-popup__scrolling-content {
696
721
  height: calc(100% - 6 * var(--base-unit, 8px));
697
722
  }
698
723
  .sv-dropdown-popup.sv-popup--overlay .sv-list__filter-icon .sv-svg-icon {
699
- width: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
700
- height: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
724
+ width: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
725
+ height: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
701
726
  }
702
727
  .sv-dropdown-popup.sv-popup--overlay .sv-list__container {
703
728
  padding: 0;
704
729
  }
705
730
  .sv-dropdown-popup.sv-popup--overlay .sv-list {
706
731
  flex-grow: 1;
707
- padding: calc(0.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
732
+ padding: calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
708
733
  }
709
734
  .sv-dropdown-popup.sv-popup--overlay .sv-list__filter {
710
735
  display: flex;
711
736
  align-items: center;
712
- padding: calc(0.5 * var(--sjs-base-unit, var(--base-unit, 8px))) calc(1 * var(--sjs-base-unit, var(--base-unit, 8px))) calc(0.5 * var(--sjs-base-unit, var(--base-unit, 8px))) calc(2.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
737
+ padding: calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px)))) var(--sjs-base-unit, var(--base-unit, 8px)) calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px)))) calc(2.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
713
738
  }
714
739
  .sv-dropdown-popup.sv-popup--overlay .sv-list__filter-icon {
715
740
  position: static;
716
- top: calc(1.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
717
- height: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
741
+ top: calc(1.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
742
+ height: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
718
743
  }
719
744
  .sv-dropdown-popup.sv-popup--overlay .sv-list__empty-container {
720
745
  display: flex;
721
746
  flex-direction: column;
722
747
  justify-content: center;
723
748
  flex-grow: 1;
724
- padding: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px))) calc(0.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
749
+ padding: var(--sjs-base-unit, var(--base-unit, 8px)) calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
725
750
  background-color: var(--sjs-general-backcolor, var(--background, #fff));
726
751
  }
727
752
  .sv-dropdown-popup.sv-popup--overlay .sv-popup__button:disabled {
@@ -730,27 +755,27 @@ sv-popup {
730
755
  opacity: 0.25;
731
756
  }
732
757
  .sv-dropdown-popup.sv-popup--overlay .sv-list__filter-clear-button {
733
- height: calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
734
- width: calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
735
- padding: calc(0.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
758
+ height: calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
759
+ width: calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
760
+ padding: calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
736
761
  appearance: none;
737
762
  border: none;
738
763
  border-radius: 100%;
739
764
  background-color: transparent;
740
765
  }
741
766
  .sv-dropdown-popup.sv-popup--overlay .sv-list__filter-clear-button svg {
742
- height: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
743
- width: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
767
+ height: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
768
+ width: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
744
769
  }
745
770
  .sv-dropdown-popup.sv-popup--overlay .sv-list__filter-clear-button svg use {
746
771
  fill: var(--sjs-general-forecolor-light, var(--foreground-light, #909090));
747
772
  }
748
773
  .sv-dropdown-popup.sv-popup--overlay .sv-list__input {
749
774
  color: var(--sjs-general-forecolor-light, var(--foreground-light, #909090));
750
- font-size: calc(1 * var(--sjs-font-size, 16px));
751
- line-height: calc(1.5 * var(--sjs-font-size, 16px));
775
+ font-size: var(--sjs-font-size, 16px);
776
+ line-height: calc(1.5 * (var(--sjs-font-size, 16px)));
752
777
  font-family: var(--font-family);
753
- padding: calc(0.5 * var(--sjs-base-unit, var(--base-unit, 8px))) 0 calc(0.5 * var(--sjs-base-unit, var(--base-unit, 8px))) calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
778
+ padding: calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px)))) 0 calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px)))) var(--sjs-base-unit, var(--base-unit, 8px));
754
779
  }
755
780
  .sv-dropdown-popup.sv-popup--overlay .sv-list__item:hover .sv-list__item-body,
756
781
  .sv-dropdown-popup.sv-popup--overlay .sv-list__item:focus .sv-list__item-body,
@@ -781,12 +806,12 @@ sv-popup {
781
806
  left: 50%;
782
807
  top: 50%;
783
808
  max-height: var(--sv-popup-overlay-max-height);
784
- min-height: min(var(--sv-popup-overlay-max-height), 31 * var(--sjs-base-unit, var(--base-unit, 8px)));
809
+ min-height: min(var(--sv-popup-overlay-max-height), 31 * (var(--sjs-base-unit, var(--base-unit, 8px))));
785
810
  height: auto;
786
811
  width: auto;
787
- min-width: min(40 * var(--sjs-base-unit, var(--base-unit, 8px)), var(--sv-popup-overlay-max-width));
812
+ min-width: min(40 * (var(--sjs-base-unit, var(--base-unit, 8px))), var(--sv-popup-overlay-max-width));
788
813
  max-width: var(--sv-popup-overlay-max-width);
789
- border-radius: calc(1 * var(--sjs-corner-radius, 4px));
814
+ border-radius: var(--sjs-corner-radius, 4px);
790
815
  overflow: hidden;
791
816
  margin: 0;
792
817
  }
@@ -800,7 +825,7 @@ sv-popup {
800
825
  display: flex;
801
826
  align-items: center;
802
827
  flex-direction: row;
803
- font-size: calc(1 * var(--sjs-font-size, 16px));
828
+ font-size: var(--sjs-font-size, 16px);
804
829
  overflow: auto;
805
830
  border: 1px solid var(--sjs-border-default, var(--border, #d6d6d6));
806
831
  }
@@ -818,10 +843,10 @@ sv-popup {
818
843
  align-items: center;
819
844
  appearance: none;
820
845
  width: 100%;
821
- padding: 11px calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
822
- line-height: calc(1.5 * var(--sjs-font-size, 16px));
846
+ padding: 11px calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
847
+ line-height: calc(1.5 * (var(--sjs-font-size, 16px)));
823
848
  outline: none;
824
- font-size: calc(1 * var(--sjs-font-size, 16px));
849
+ font-size: var(--sjs-font-size, 16px);
825
850
  font-weight: 400;
826
851
  background: var(--sjs-general-backcolor, var(--background, #fff));
827
852
  cursor: pointer;
@@ -839,7 +864,7 @@ sv-popup {
839
864
 
840
865
  .sv-button-group__item-icon {
841
866
  display: block;
842
- height: calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
867
+ height: calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
843
868
  }
844
869
  .sv-button-group__item-icon use {
845
870
  fill: var(--sjs-general-forecolor-light, var(--foreground-light, #909090));
@@ -870,7 +895,7 @@ sv-popup {
870
895
  }
871
896
 
872
897
  .sv-button-group__item-icon + .sv-button-group__item-caption {
873
- margin-left: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
898
+ margin-left: var(--sjs-base-unit, var(--base-unit, 8px));
874
899
  }
875
900
 
876
901
  .sv-button-group__item--disabled {
@@ -941,7 +966,7 @@ sv-popup {
941
966
  background-color: cadetblue;
942
967
  padding: 1px;
943
968
  font-family: var(--font-family, var(--font-family));
944
- font-size: calc(0.875 * var(--sjs-font-size, 16px));
969
+ font-size: calc(0.875 * (var(--sjs-font-size, 16px)));
945
970
  font-style: normal;
946
971
  font-weight: 400;
947
972
  line-height: 1.42857143;
@@ -960,7 +985,7 @@ sv-popup {
960
985
  background-clip: padding-box;
961
986
  border: 1px solid #ccc;
962
987
  border: 1px solid rgba(0, 0, 0, 0.2);
963
- border-radius: calc(1.5 * var(--sjs-corner-radius, 4px));
988
+ border-radius: calc(1.5 * (var(--sjs-corner-radius, 4px)));
964
989
  -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
965
990
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
966
991
  line-break: auto;
@@ -970,10 +995,11 @@ sv-popup {
970
995
  .sv_window_title {
971
996
  padding: 8px 14px;
972
997
  margin: 0;
973
- font-size: calc(0.875 * var(--sjs-font-size, 16px));
998
+ font-size: calc(0.875 * (var(--sjs-font-size, 16px)));
974
999
  background-color: #f7f7f7;
975
1000
  border-bottom: 1px solid #ebebeb;
976
- border-radius: calc(1 * var(--sjs-corner-radius, 4px)) calc(1 * var(--sjs-corner-radius, 4px)) 0 0;
1001
+ border-radius: var(--sjs-corner-radius, 4px) var(--sjs-corner-radius, 4px) 0 0;
1002
+ display: flex;
977
1003
  }
978
1004
 
979
1005
  .sv_window_content {
@@ -987,7 +1013,7 @@ sv-popup {
987
1013
  .sv_window_title a:link,
988
1014
  .sv_window_title a:visited {
989
1015
  text-decoration: none;
990
- font-size: calc(0.875 * var(--sjs-font-size, 16px));
1016
+ font-size: calc(0.875 * (var(--sjs-font-size, 16px)));
991
1017
  font-style: normal;
992
1018
  color: black;
993
1019
  }
@@ -1012,8 +1038,8 @@ sv-popup {
1012
1038
 
1013
1039
  .sv-brand-info__text {
1014
1040
  font-weight: 600;
1015
- font-size: calc(1 * var(--sjs-font-size, 16px));
1016
- line-height: calc(1.5 * var(--sjs-font-size, 16px));
1041
+ font-size: var(--sjs-font-size, 16px);
1042
+ line-height: calc(1.5 * (var(--sjs-font-size, 16px)));
1017
1043
  color: #161616;
1018
1044
  }
1019
1045
 
@@ -1026,8 +1052,8 @@ sv-popup {
1026
1052
 
1027
1053
  .sv-brand-info__terms {
1028
1054
  font-weight: 400;
1029
- font-size: calc(0.75 * var(--sjs-font-size, 16px));
1030
- line-height: calc(1 * var(--sjs-font-size, 16px));
1055
+ font-size: calc(0.75 * (var(--sjs-font-size, 16px)));
1056
+ line-height: var(--sjs-font-size, 16px);
1031
1057
  }
1032
1058
  .sv-brand-info__terms a {
1033
1059
  color: #909090;
@@ -1062,21 +1088,21 @@ sv-popup {
1062
1088
 
1063
1089
  .sv-ranking-item:focus .sv-ranking-item__icon--focus {
1064
1090
  visibility: visible;
1065
- top: calc(0.6 * var(--sjs-base-unit, var(--base-unit, 8px)));
1066
- height: calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
1091
+ top: calc(0.6 * (var(--sjs-base-unit, var(--base-unit, 8px))));
1092
+ height: calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
1067
1093
  }
1068
1094
 
1069
1095
  .sv-ranking-item:focus .sv-ranking-item__index {
1070
1096
  background: var(--sjs-general-backcolor, var(--background, #fff));
1071
- outline: calc(0.25 * var(--sjs-base-unit, var(--base-unit, 8px))) solid var(--sjs-primary-backcolor, var(--primary, #19b394));
1097
+ outline: calc(0.25 * (var(--sjs-base-unit, var(--base-unit, 8px)))) solid var(--sjs-primary-backcolor, var(--primary, #19b394));
1072
1098
  }
1073
1099
 
1074
1100
  .sv-ranking-item__content.sv-ranking-item__content {
1075
1101
  display: flex;
1076
1102
  align-items: center;
1077
1103
  line-height: 1em;
1078
- padding: calc(0.5 * var(--sjs-base-unit, var(--base-unit, 8px))) 0px;
1079
- border-radius: calc(12.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
1104
+ padding: calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px)))) 0px;
1105
+ border-radius: calc(12.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
1080
1106
  }
1081
1107
 
1082
1108
  .sv-ranking-item__icon-container {
@@ -1085,8 +1111,8 @@ sv-popup {
1085
1111
  top: 0;
1086
1112
  bottom: 0;
1087
1113
  flex-shrink: 0;
1088
- width: calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
1089
- height: calc(4 * var(--sjs-base-unit, var(--base-unit, 8px)));
1114
+ width: calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
1115
+ height: calc(4 * (var(--sjs-base-unit, var(--base-unit, 8px))));
1090
1116
  }
1091
1117
 
1092
1118
  .sv-ranking-item--disabled.sv-ranking-item--disabled {
@@ -1100,9 +1126,9 @@ sv-popup {
1100
1126
  visibility: hidden;
1101
1127
  fill: var(--sjs-primary-backcolor, var(--primary, #19b394));
1102
1128
  position: absolute;
1103
- top: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
1104
- width: calc(1.75 * var(--sjs-base-unit, var(--base-unit, 8px)));
1105
- height: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
1129
+ top: var(--sjs-base-unit, var(--base-unit, 8px));
1130
+ width: calc(1.75 * (var(--sjs-base-unit, var(--base-unit, 8px))));
1131
+ height: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
1106
1132
  }
1107
1133
 
1108
1134
  .sv-ranking-item__index.sv-ranking-item__index {
@@ -1112,21 +1138,21 @@ sv-popup {
1112
1138
  justify-content: center;
1113
1139
  background-color: var(--sjs-primary-backcolor-light, var(--primary-light, rgba(25, 179, 148, 0.1)));
1114
1140
  color: var(--sjs-general-forecolor, var(--foreground, #161616));
1115
- font-size: calc(1 * var(--sjs-font-size, 16px));
1141
+ font-size: var(--sjs-font-size, 16px);
1116
1142
  border-radius: 100%;
1117
- border: calc(0.25 * var(--sjs-base-unit, var(--base-unit, 8px))) solid transparent;
1118
- width: calc(5 * var(--sjs-base-unit, var(--base-unit, 8px)));
1119
- height: calc(5 * var(--sjs-base-unit, var(--base-unit, 8px)));
1120
- line-height: calc(1.5 * var(--sjs-font-size, 16px));
1143
+ border: calc(0.25 * (var(--sjs-base-unit, var(--base-unit, 8px)))) solid transparent;
1144
+ width: calc(5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
1145
+ height: calc(5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
1146
+ line-height: calc(1.5 * (var(--sjs-font-size, 16px)));
1121
1147
  box-sizing: border-box;
1122
1148
  font-weight: 600;
1123
- margin-left: calc(0 * var(--sjs-base-unit, var(--base-unit, 8px)));
1149
+ margin-left: calc(0 * (var(--sjs-base-unit, var(--base-unit, 8px))));
1124
1150
  }
1125
1151
  .sv-ranking-item__index.sv-ranking-item__index:empty {
1126
1152
  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAArSURBVHgB7cuhEQAwDMNAtUN4//m8RMtygcE5PxMQxAKnh6Q3mWzXd4mAD4cJBAQCqfbUAAAAAElFTkSuQmCC");
1127
1153
  background-position: center;
1128
1154
  background-repeat: no-repeat;
1129
- background-size: calc(1 * var(--sjs-font-editorfont-size, calc(1 * var(--sjs-font-size, var(--sjs-font-size, 16px)))));
1155
+ background-size: var(--sjs-font-editorfont-size, var(--sjs-font-size, 16px));
1130
1156
  }
1131
1157
 
1132
1158
  .sv-ranking-item__text {
@@ -1135,9 +1161,9 @@ sv-popup {
1135
1161
  text-overflow: ellipsis;
1136
1162
  white-space: nowrap;
1137
1163
  color: var(--sjs-general-forecolor, var(--foreground, #161616));
1138
- font-size: var(--sjs-font-editorfont-size, calc(1 * var(--sjs-font-size, var(--sjs-font-size, 16px))));
1139
- line-height: calc(1.5 * var(--sjs-font-editorfont-size, calc(1 * var(--sjs-font-size, var(--sjs-font-size, 16px)))));
1140
- margin: 0 calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
1164
+ font-size: var(--sjs-font-editorfont-size, var(--sjs-font-size, 16px));
1165
+ line-height: calc(1.5 * (var(--sjs-font-editorfont-size, var(--sjs-font-size, 16px))));
1166
+ margin: 0 calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
1141
1167
  }
1142
1168
 
1143
1169
  .sd-ranking--disabled .sv-ranking-item__text {
@@ -1153,18 +1179,18 @@ sv-popup {
1153
1179
  .sv-ranking-item__ghost.sv-ranking-item__ghost {
1154
1180
  display: none;
1155
1181
  background-color: var(--sjs-general-backcolor-dim, var(--background-dim, #f3f3f3));
1156
- border-radius: calc(12.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
1157
- width: calc(31 * var(--sjs-base-unit, var(--base-unit, 8px)));
1158
- height: calc(5 * var(--sjs-base-unit, var(--base-unit, 8px)));
1182
+ border-radius: calc(12.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
1183
+ width: calc(31 * (var(--sjs-base-unit, var(--base-unit, 8px))));
1184
+ height: calc(5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
1159
1185
  z-index: 1;
1160
1186
  position: absolute;
1161
1187
  left: 0;
1162
- top: calc(0.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
1188
+ top: calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
1163
1189
  }
1164
1190
 
1165
1191
  [dir=rtl] .sv-ranking-item__ghost {
1166
1192
  left: initilal;
1167
- right: calc(5 * var(--sjs-base-unit, var(--base-unit, 8px)));
1193
+ right: calc(5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
1168
1194
  }
1169
1195
 
1170
1196
  .sv-ranking-item--ghost .sv-ranking-item__ghost {
@@ -1177,7 +1203,7 @@ sv-popup {
1177
1203
 
1178
1204
  .sv-ranking-item--drag .sv-ranking-item__content {
1179
1205
  box-shadow: var(--sjs-shadow-large, 0px 8px 16px 0px rgba(0, 0, 0, 0.1));
1180
- border-radius: calc(12.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
1206
+ border-radius: calc(12.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
1181
1207
  }
1182
1208
 
1183
1209
  .sv-ranking--drag .sv-ranking-item:hover .sv-ranking-item__icon {
@@ -1225,7 +1251,7 @@ sv-popup {
1225
1251
  }
1226
1252
 
1227
1253
  .sv-ranking-shortcut .sv-ranking-item__text {
1228
- margin-right: calc(4 * var(--sjs-base-unit, var(--base-unit, 8px)));
1254
+ margin-right: calc(4 * (var(--sjs-base-unit, var(--base-unit, 8px))));
1229
1255
  }
1230
1256
 
1231
1257
  .sv-ranking-shortcut .sv-ranking-item__icon--hover {
@@ -1233,16 +1259,16 @@ sv-popup {
1233
1259
  }
1234
1260
 
1235
1261
  .sv-ranking-shortcut .sv-ranking-item__icon {
1236
- width: calc(1.75 * var(--sjs-base-unit, var(--base-unit, 8px)));
1237
- height: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
1238
- top: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
1262
+ width: calc(1.75 * (var(--sjs-base-unit, var(--base-unit, 8px))));
1263
+ height: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
1264
+ top: var(--sjs-base-unit, var(--base-unit, 8px));
1239
1265
  }
1240
1266
 
1241
1267
  .sv-ranking-shortcut .sv-ranking-item__content {
1242
- padding-left: calc(0.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
1268
+ padding-left: calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
1243
1269
  }
1244
1270
  .sv-ranking-shortcut .sv-ranking-item__icon-container {
1245
- margin-left: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
1271
+ margin-left: var(--sjs-base-unit, var(--base-unit, 8px));
1246
1272
  }
1247
1273
 
1248
1274
  .sv-ranking--select-to-rank {
@@ -1253,12 +1279,12 @@ sv-popup {
1253
1279
  flex-direction: column-reverse;
1254
1280
  }
1255
1281
  .sv-ranking--select-to-rank-vertical .sv-ranking__containers-divider {
1256
- margin: calc(3 * var(--sjs-base-unit, var(--base-unit, 8px))) 0;
1282
+ margin: calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px)))) 0;
1257
1283
  height: 1px;
1258
1284
  }
1259
1285
  .sv-ranking--select-to-rank-vertical .sv-ranking__container--empty {
1260
- padding-top: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
1261
- padding-bottom: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
1286
+ padding-top: var(--sjs-base-unit, var(--base-unit, 8px));
1287
+ padding-bottom: var(--sjs-base-unit, var(--base-unit, 8px));
1262
1288
  display: flex;
1263
1289
  justify-content: center;
1264
1290
  align-items: center;
@@ -1268,24 +1294,24 @@ sv-popup {
1268
1294
  width: 1px;
1269
1295
  }
1270
1296
  .sv-ranking--select-to-rank-horizontal .sv-ranking__container--to .sv-ranking-item {
1271
- left: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
1297
+ left: var(--sjs-base-unit, var(--base-unit, 8px));
1272
1298
  }
1273
1299
  .sv-ranking--select-to-rank-horizontal .sv-ranking__container--empty.sv-ranking__container--to .sv-ranking-item {
1274
1300
  left: initial;
1275
1301
  }
1276
1302
  .sv-ranking--select-to-rank-horizontal .sv-ranking__container--empty.sv-ranking__container--to .sv-ranking__container-placeholder {
1277
- padding-left: calc(5 * var(--sjs-base-unit, var(--base-unit, 8px)));
1303
+ padding-left: calc(5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
1278
1304
  }
1279
1305
  .sv-ranking--select-to-rank-horizontal .sv-ranking__container--empty.sv-ranking__container--from .sv-ranking__container-placeholder {
1280
- padding-right: calc(5 * var(--sjs-base-unit, var(--base-unit, 8px)));
1306
+ padding-right: calc(5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
1281
1307
  }
1282
1308
 
1283
1309
  .sv-ranking__container-placeholder {
1284
1310
  color: var(--sjs-general-dim-forecolor-light, rgba(0, 0, 0, 0.45));
1285
1311
  font-family: var(--font-family, var(--font-family));
1286
1312
  font-style: normal;
1287
- font-size: calc(1 * var(--sjs-font-size, 16px));
1288
- line-height: calc(1.5 * var(--sjs-font-size, 16px));
1313
+ font-size: var(--sjs-font-size, 16px);
1314
+ line-height: calc(1.5 * (var(--sjs-font-size, 16px)));
1289
1315
  white-space: break-spaces;
1290
1316
  display: flex;
1291
1317
  justify-content: center;
@@ -1323,15 +1349,15 @@ sv-popup {
1323
1349
  width: 100%;
1324
1350
  font-family: var(--font-family, var(--font-family));
1325
1351
  box-sizing: border-box;
1326
- padding: calc(1.5 * var(--sjs-base-unit, var(--base-unit, 8px))) calc(8 * var(--sjs-base-unit, var(--base-unit, 8px)));
1352
+ padding: calc(1.5 * (var(--sjs-base-unit, var(--base-unit, 8px)))) calc(8 * (var(--sjs-base-unit, var(--base-unit, 8px))));
1327
1353
  overflow: hidden;
1328
1354
  text-overflow: ellipsis;
1329
1355
  white-space: nowrap;
1330
1356
  }
1331
1357
 
1332
1358
  .sv-list__empty-text {
1333
- line-height: calc(1.5 * var(--sjs-font-size, 16px));
1334
- font-size: calc(1 * var(--sjs-font-size, 16px));
1359
+ line-height: calc(1.5 * (var(--sjs-font-size, 16px)));
1360
+ font-size: var(--sjs-font-size, 16px);
1335
1361
  font-weight: 400;
1336
1362
  text-align: center;
1337
1363
  color: var(--sjs-general-forecolor-light, var(--foreground-light, #909090));
@@ -1352,13 +1378,13 @@ sv-popup {
1352
1378
  width: 100%;
1353
1379
  align-items: center;
1354
1380
  box-sizing: border-box;
1355
- padding-block: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
1356
- padding-inline-end: calc(8 * var(--sjs-base-unit, var(--base-unit, 8px)));
1357
- padding-inline-start: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
1381
+ padding-block: var(--sjs-base-unit, var(--base-unit, 8px));
1382
+ padding-inline-end: calc(8 * (var(--sjs-base-unit, var(--base-unit, 8px))));
1383
+ padding-inline-start: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
1358
1384
  color: var(--sjs-general-forecolor, var(--foreground, #161616));
1359
1385
  font-weight: normal;
1360
- font-size: calc(1 * var(--sjs-font-size, 16px));
1361
- line-height: calc(1.5 * var(--sjs-font-size, 16px));
1386
+ font-size: var(--sjs-font-size, 16px);
1387
+ line-height: calc(1.5 * (var(--sjs-font-size, 16px)));
1362
1388
  cursor: pointer;
1363
1389
  overflow: hidden;
1364
1390
  text-align: left;
@@ -1370,14 +1396,14 @@ sv-popup {
1370
1396
  outline: none;
1371
1397
  }
1372
1398
  .sv-list__item.sv-list__item--focused:not(.sv-list__item--selected) .sv-list__item-body {
1373
- border: calc(0.25 * var(--sjs-base-unit, var(--base-unit, 8px))) solid var(--sjs-border-light, var(--border-light, #eaeaea));
1374
- border-radius: calc(1 * var(--sjs-corner-radius, 4px));
1375
- padding-block: calc(0.75 * var(--sjs-base-unit, var(--base-unit, 8px)));
1376
- padding-inline-end: calc(7.75 * var(--sjs-base-unit, var(--base-unit, 8px)));
1377
- padding-inline-start: calc(1.75 * var(--sjs-base-unit, var(--base-unit, 8px)));
1399
+ border: calc(0.25 * (var(--sjs-base-unit, var(--base-unit, 8px)))) solid var(--sjs-border-light, var(--border-light, #eaeaea));
1400
+ border-radius: var(--sjs-corner-radius, 4px);
1401
+ padding-block: calc(0.75 * (var(--sjs-base-unit, var(--base-unit, 8px))));
1402
+ padding-inline-end: calc(7.75 * (var(--sjs-base-unit, var(--base-unit, 8px))));
1403
+ padding-inline-start: calc(1.75 * (var(--sjs-base-unit, var(--base-unit, 8px))));
1378
1404
  }
1379
1405
  .sv-list__item.sv-list__item--focused:not(.sv-list__item--selected) .sv-string-viewer {
1380
- margin-inline-start: calc(-0.25 * var(--sjs-base-unit, var(--base-unit, 8px)));
1406
+ margin-inline-start: calc(-0.25 * (var(--sjs-base-unit, var(--base-unit, 8px))));
1381
1407
  }
1382
1408
 
1383
1409
  .sv-list__item:hover,
@@ -1393,17 +1419,17 @@ sv-popup {
1393
1419
  padding: 0;
1394
1420
  }
1395
1421
  .sv-list__item--with-icon.sv-list__item--with-icon .sv-list__item-body {
1396
- padding-top: calc(1.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
1397
- padding-bottom: calc(1.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
1398
- gap: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
1422
+ padding-top: calc(1.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
1423
+ padding-bottom: calc(1.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
1424
+ gap: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
1399
1425
  display: flex;
1400
1426
  }
1401
1427
 
1402
1428
  .sv-list__item-icon {
1403
1429
  float: left;
1404
1430
  flex-shrink: 0;
1405
- width: calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
1406
- height: calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
1431
+ width: calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
1432
+ height: calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
1407
1433
  }
1408
1434
  .sv-list__item-icon svg {
1409
1435
  display: block;
@@ -1419,7 +1445,7 @@ sv-popup {
1419
1445
  }
1420
1446
 
1421
1447
  .sv-list__item-separator {
1422
- margin: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px))) 0;
1448
+ margin: var(--sjs-base-unit, var(--base-unit, 8px)) 0;
1423
1449
  height: 1px;
1424
1450
  background-color: var(--sjs-border-default, var(--border, #d6d6d6));
1425
1451
  }
@@ -1473,18 +1499,18 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list__item-icon use {
1473
1499
  .sv-list__filter {
1474
1500
  border-bottom: 1px solid var(--sjs-border-inside, var(--border-inside, rgba(0, 0, 0, 0.16)));
1475
1501
  background: var(--sjs-general-backcolor, var(--background, #fff));
1476
- padding-bottom: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
1502
+ padding-bottom: var(--sjs-base-unit, var(--base-unit, 8px));
1477
1503
  }
1478
1504
 
1479
1505
  .sv-list__filter-icon {
1480
1506
  display: block;
1481
1507
  position: absolute;
1482
- top: calc(1.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
1483
- inset-inline-start: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
1508
+ top: calc(1.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
1509
+ inset-inline-start: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
1484
1510
  }
1485
1511
  .sv-list__filter-icon .sv-svg-icon {
1486
- width: calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
1487
- height: calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
1512
+ width: calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
1513
+ height: calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
1488
1514
  }
1489
1515
  .sv-list__filter-icon .sv-svg-icon use {
1490
1516
  fill: var(--sjs-general-forecolor-light, var(--foreground-light, #909090));
@@ -1499,11 +1525,11 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list__item-icon use {
1499
1525
  box-sizing: border-box;
1500
1526
  width: 100%;
1501
1527
  outline: none;
1502
- font-size: calc(1 * var(--sjs-font-size, 16px));
1528
+ font-size: var(--sjs-font-size, 16px);
1503
1529
  color: var(--sjs-general-forecolor, var(--foreground, #161616));
1504
- padding: calc(1.5 * var(--sjs-base-unit, var(--base-unit, 8px))) calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
1505
- padding-inline-start: calc(7 * var(--sjs-base-unit, var(--base-unit, 8px)));
1506
- line-height: calc(1.5 * var(--sjs-font-size, 16px));
1530
+ padding: calc(1.5 * (var(--sjs-base-unit, var(--base-unit, 8px)))) calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
1531
+ padding-inline-start: calc(7 * (var(--sjs-base-unit, var(--base-unit, 8px))));
1532
+ line-height: calc(1.5 * (var(--sjs-font-size, 16px)));
1507
1533
  border: none;
1508
1534
  }
1509
1535
 
@@ -1527,24 +1553,24 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list__item-icon use {
1527
1553
  .sv-save-data_root {
1528
1554
  position: fixed;
1529
1555
  left: 50%;
1530
- bottom: calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
1556
+ bottom: calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
1531
1557
  background: var(--sjs-general-backcolor, var(--background, #fff));
1532
1558
  opacity: 0;
1533
- padding: calc(3 * var(--sjs-base-unit, var(--base-unit, 8px))) calc(6 * var(--sjs-base-unit, var(--base-unit, 8px)));
1559
+ padding: calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px)))) calc(6 * (var(--sjs-base-unit, var(--base-unit, 8px))));
1534
1560
  box-shadow: var(--sjs-shadow-medium, 0px 2px 6px 0px rgba(0, 0, 0, 0.1));
1535
- border-radius: calc(2 * var(--sjs-corner-radius, 4px));
1561
+ border-radius: calc(2 * (var(--sjs-corner-radius, 4px)));
1536
1562
  color: var(--sjs-general-forecolor, var(--foreground, #161616));
1537
- min-width: calc(30 * var(--sjs-base-unit, var(--base-unit, 8px)));
1563
+ min-width: calc(30 * (var(--sjs-base-unit, var(--base-unit, 8px))));
1538
1564
  text-align: center;
1539
1565
  z-index: 1600;
1540
1566
  font-family: var(--font-family, var(--font-family));
1541
- font-size: calc(1 * var(--sjs-font-size, 16px));
1542
- line-height: calc(1.5 * var(--sjs-font-size, 16px));
1567
+ font-size: var(--sjs-font-size, 16px);
1568
+ line-height: calc(1.5 * (var(--sjs-font-size, 16px)));
1543
1569
  display: flex;
1544
1570
  flex-direction: row;
1545
1571
  justify-content: center;
1546
1572
  align-items: center;
1547
- transform: translateX(-50%) translateY(calc(3 * var(--sjs-base-unit, var(--base-unit, 8px))));
1573
+ transform: translateX(-50%) translateY(calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px)))));
1548
1574
  transition-timing-function: ease-in;
1549
1575
  transition-property: transform, opacity;
1550
1576
  transition-delay: 0.25s;
@@ -1578,20 +1604,20 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list__item-icon use {
1578
1604
  background-color: var(--sjs-special-red, var(--red, #e60a3e));
1579
1605
  color: var(--sjs-general-backcolor, var(--background, #fff));
1580
1606
  font-weight: 600;
1581
- padding: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px))) calc(2 * var(--sjs-base-unit, var(--base-unit, 8px))) calc(2 * var(--sjs-base-unit, var(--base-unit, 8px))) calc(6 * var(--sjs-base-unit, var(--base-unit, 8px)));
1582
- gap: calc(6 * var(--sjs-base-unit, var(--base-unit, 8px)));
1607
+ padding: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px)))) calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px)))) calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px)))) calc(6 * (var(--sjs-base-unit, var(--base-unit, 8px))));
1608
+ gap: calc(6 * (var(--sjs-base-unit, var(--base-unit, 8px))));
1583
1609
  }
1584
1610
 
1585
1611
  .sv-save-data_root.sv-save-data_error .sv-save-data_button {
1586
1612
  font-weight: 600;
1587
- font-size: calc(1 * var(--sjs-font-size, 16px));
1588
- line-height: calc(1.5 * var(--sjs-font-size, 16px));
1589
- height: calc(5 * var(--sjs-base-unit, var(--base-unit, 8px)));
1613
+ font-size: var(--sjs-font-size, 16px);
1614
+ line-height: calc(1.5 * (var(--sjs-font-size, 16px)));
1615
+ height: calc(5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
1590
1616
  color: #ffffff;
1591
1617
  background-color: var(--sjs-special-red, var(--red, #e60a3e));
1592
- border: calc(0.25 * var(--sjs-base-unit, var(--base-unit, 8px))) solid #ffffff;
1593
- border-radius: calc(1.5 * var(--sjs-corner-radius, 4px));
1594
- padding: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px))) calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
1618
+ border: calc(0.25 * (var(--sjs-base-unit, var(--base-unit, 8px)))) solid #ffffff;
1619
+ border-radius: calc(1.5 * (var(--sjs-corner-radius, 4px)));
1620
+ padding: var(--sjs-base-unit, var(--base-unit, 8px)) calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
1595
1621
  display: flex;
1596
1622
  align-items: center;
1597
1623
  }
@@ -1642,13 +1668,13 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list__item-icon use {
1642
1668
  margin: 0;
1643
1669
  }
1644
1670
  .sd-element__title .sd-element__num {
1645
- font-size: calc(0.75 * var(--sjs-font-size, 16px));
1646
- line-height: calc(1 * var(--sjs-font-size, 16px));
1671
+ font-size: calc(0.75 * (var(--sjs-font-size, 16px)));
1672
+ line-height: var(--sjs-font-size, 16px);
1647
1673
  color: var(--sjs-general-forecolor-light, var(--foreground-light, #909090));
1648
1674
  }
1649
1675
  .sd-element__title span {
1650
- font-size: var(--sjs-font-questiontitle-size, calc(1 * var(--sjs-font-size, var(--sjs-font-size, 16px))));
1651
- line-height: calc(1.5 * var(--sjs-font-questiontitle-size, calc(1 * var(--sjs-font-size, var(--sjs-font-size, 16px)))));
1676
+ font-size: var(--sjs-font-questiontitle-size, var(--sjs-font-size, 16px));
1677
+ line-height: calc(1.5 * (var(--sjs-font-questiontitle-size, var(--sjs-font-size, 16px))));
1652
1678
  }
1653
1679
  .sd-element__title .sv-title-actions__title {
1654
1680
  font-size: 0;
@@ -1664,21 +1690,18 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list__item-icon use {
1664
1690
  .sd-element__title .sv-string-viewer {
1665
1691
  white-space: normal;
1666
1692
  }
1667
- .sd-element__title .sv-string-viewer::before {
1668
- content: "​";
1669
- }
1670
1693
 
1671
1694
  .sd-element__num {
1672
1695
  float: left;
1673
- padding-top: calc(0.625 * var(--sjs-base-unit, var(--base-unit, 8px)));
1674
- padding-bottom: calc(0.375 * var(--sjs-base-unit, var(--base-unit, 8px)));
1696
+ padding-top: calc(0.625 * (var(--sjs-base-unit, var(--base-unit, 8px))));
1697
+ padding-bottom: calc(0.375 * (var(--sjs-base-unit, var(--base-unit, 8px))));
1675
1698
  padding-inline-start: 0;
1676
- padding-inline-end: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
1677
- width: calc(5 * var(--sjs-base-unit, var(--base-unit, 8px)));
1678
- font-size: calc(0.75 * var(--sjs-font-size, 16px));
1679
- line-height: calc(1 * var(--sjs-font-size, 16px));
1699
+ padding-inline-end: var(--sjs-base-unit, var(--base-unit, 8px));
1700
+ width: calc(5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
1701
+ font-size: calc(0.75 * (var(--sjs-font-size, 16px)));
1702
+ line-height: var(--sjs-font-size, 16px);
1680
1703
  color: var(--sjs-general-forecolor-light, var(--foreground-light, #909090));
1681
- margin-inline-start: calc(-5 * var(--sjs-base-unit, var(--base-unit, 8px)));
1704
+ margin-inline-start: calc(-5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
1682
1705
  text-align: end;
1683
1706
  box-sizing: border-box;
1684
1707
  white-space: nowrap;
@@ -1718,11 +1741,11 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list__item-icon use {
1718
1741
  background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6 14L5 13L10 8L5 3L6 2L12 8L6 14Z' fill='%23909090'/%3E%3C/svg%3E%0A");
1719
1742
  background-repeat: no-repeat;
1720
1743
  background-position: center center;
1721
- height: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
1722
- width: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
1744
+ height: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
1745
+ width: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
1723
1746
  position: absolute;
1724
- left: calc(-3 * var(--sjs-base-unit, var(--base-unit, 8px)));
1725
- top: calc(0.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
1747
+ left: calc(-3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
1748
+ top: calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
1726
1749
  }
1727
1750
 
1728
1751
  .sd-element__title--expandable.sd-element__title--expanded:before {
@@ -1782,7 +1805,7 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list__item-icon use {
1782
1805
  }
1783
1806
 
1784
1807
  .sd-element--collapsed > .sd-element__header {
1785
- padding: calc(0 * var(--sjs-base-unit, var(--base-unit, 8px))) var(--sd-base-padding);
1808
+ padding: calc(0 * (var(--sjs-base-unit, var(--base-unit, 8px)))) var(--sd-base-padding);
1786
1809
  box-sizing: border-box;
1787
1810
  background-color: var(--sjs-general-backcolor, var(--background, #fff));
1788
1811
  }
@@ -1797,8 +1820,8 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list__item-icon use {
1797
1820
  padding-bottom: 0;
1798
1821
  }
1799
1822
  .sd-element--collapsed.sd-element--with-frame > .sd-element__header {
1800
- padding-top: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
1801
- padding-bottom: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
1823
+ padding-top: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
1824
+ padding-bottom: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
1802
1825
  border-radius: var(--sjs-questionpanel-cornerRadius, var(--sjs-corner-radius, 4px));
1803
1826
  }
1804
1827
  .sd-element--collapsed > .sd-element__header:focus-within, .sd-element--collapsed > .sd-element__header:hover {
@@ -1814,7 +1837,7 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list__item-icon use {
1814
1837
  bottom: calc(-0.5 * var(--sd-base-vertical-padding));
1815
1838
  }
1816
1839
  .sd-element--nested.sd-element--collapsed > .sd-element__header:hover, .sd-element--nested.sd-element--collapsed > .sd-element__header:focus-within {
1817
- box-shadow: 0 calc(-2 * var(--sjs-base-unit, var(--base-unit, 8px))) 0 0 var(--sjs-general-backcolor-dim-light, var(--background-dim-light, #f9f9f9)), 0 calc(2 * var(--sjs-base-unit, var(--base-unit, 8px))) 0 var(--sjs-general-backcolor-dim-light, var(--background-dim-light, #f9f9f9));
1840
+ box-shadow: 0 calc(-2 * (var(--sjs-base-unit, var(--base-unit, 8px)))) 0 0 var(--sjs-general-backcolor-dim-light, var(--background-dim-light, #f9f9f9)), 0 calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px)))) 0 var(--sjs-general-backcolor-dim-light, var(--background-dim-light, #f9f9f9));
1818
1841
  }
1819
1842
  .sd-element--nested.sd-panel, .sd-element--nested.sd-question--paneldynamic {
1820
1843
  border: 1px solid var(--sjs-border-light, var(--border-light, #eaeaea));
@@ -1863,11 +1886,11 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list__item-icon use {
1863
1886
  }
1864
1887
 
1865
1888
  .sd-question__erbox {
1866
- padding: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px))) calc(1.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
1867
- border-radius: calc(1 * var(--sjs-corner-radius, 4px));
1889
+ padding: var(--sjs-base-unit, var(--base-unit, 8px)) calc(1.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
1890
+ border-radius: var(--sjs-corner-radius, 4px);
1868
1891
  font-weight: 600;
1869
- line-height: calc(1 * var(--sjs-font-size, 16px));
1870
- font-size: calc(0.75 * var(--sjs-font-size, 16px));
1892
+ line-height: var(--sjs-font-size, 16px);
1893
+ font-size: calc(0.75 * (var(--sjs-font-size, 16px)));
1871
1894
  white-space: normal;
1872
1895
  text-align: left;
1873
1896
  }
@@ -1884,22 +1907,22 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list__item-icon use {
1884
1907
  }
1885
1908
 
1886
1909
  .sd-question__erbox--below-question {
1887
- margin-top: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
1910
+ margin-top: var(--sjs-base-unit, var(--base-unit, 8px));
1888
1911
  }
1889
1912
 
1890
1913
  .sd-element--with-frame > .sd-question__erbox--above-question {
1891
- border-radius: calc(1 * var(--sjs-corner-radius, 4px)) calc(1 * var(--sjs-corner-radius, 4px)) 0 0;
1914
+ border-radius: var(--sjs-corner-radius, 4px) var(--sjs-corner-radius, 4px) 0 0;
1892
1915
  }
1893
1916
 
1894
1917
  .sd-element--with-frame > .sd-question__erbox--below-question {
1895
1918
  position: relative;
1896
1919
  margin-top: 0;
1897
1920
  bottom: calc(-1 * var(--sd-base-padding));
1898
- border-radius: 0 0 calc(1 * var(--sjs-corner-radius, 4px)) calc(1 * var(--sjs-corner-radius, 4px));
1921
+ border-radius: 0 0 var(--sjs-corner-radius, 4px) var(--sjs-corner-radius, 4px);
1899
1922
  }
1900
1923
 
1901
1924
  .sd-root-modern--mobile .sd-question__erbox--below-question {
1902
- margin-top: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
1925
+ margin-top: var(--sjs-base-unit, var(--base-unit, 8px));
1903
1926
  }
1904
1927
 
1905
1928
  .sd-question__header {
@@ -1924,12 +1947,12 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list__item-icon use {
1924
1947
  margin-top: calc(-1 * var(--sd-base-padding));
1925
1948
  }
1926
1949
  .sd-element--with-frame > .sd-question__content > .sd-question__header--location--bottom {
1927
- margin-bottom: calc(-1 * var(--sjs-base-unit, var(--base-unit, 8px)));
1950
+ margin-bottom: calc(-1 * (var(--sjs-base-unit, var(--base-unit, 8px))));
1928
1951
  }
1929
1952
 
1930
1953
  .sd-scrollable .sd-question__content {
1931
1954
  overflow-x: auto;
1932
- padding: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px))) 0;
1955
+ padding: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px)))) 0;
1933
1956
  }
1934
1957
 
1935
1958
  .sd-question__header--location--left {
@@ -1937,7 +1960,7 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list__item-icon use {
1937
1960
  width: auto;
1938
1961
  max-width: 50%;
1939
1962
  vertical-align: top;
1940
- margin-top: calc(1.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
1963
+ margin-top: calc(1.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
1941
1964
  }
1942
1965
 
1943
1966
  .sd-question--left {
@@ -1947,7 +1970,7 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list__item-icon use {
1947
1970
 
1948
1971
  .sd-question__content--left {
1949
1972
  display: inline-block;
1950
- padding-left: calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
1973
+ padding-left: calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
1951
1974
  flex: 1;
1952
1975
  }
1953
1976
 
@@ -1957,11 +1980,11 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list__item-icon use {
1957
1980
  }
1958
1981
 
1959
1982
  .sd-question__comment-area {
1960
- font-size: calc(1 * var(--sjs-font-size, 16px));
1961
- margin-top: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
1983
+ font-size: var(--sjs-font-size, 16px);
1984
+ margin-top: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
1962
1985
  display: flex;
1963
1986
  flex-direction: column;
1964
- gap: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
1987
+ gap: var(--sjs-base-unit, var(--base-unit, 8px));
1965
1988
  color: var(--sjs-general-forecolor, var(--foreground, #161616));
1966
1989
  white-space: normal;
1967
1990
  }
@@ -1971,7 +1994,7 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list__item-icon use {
1971
1994
  position: fixed;
1972
1995
  height: auto;
1973
1996
  width: auto;
1974
- max-width: calc(29 * var(--sjs-base-unit, var(--base-unit, 8px)));
1997
+ max-width: calc(29 * (var(--sjs-base-unit, var(--base-unit, 8px))));
1975
1998
  background-color: var(--sjs-general-backcolor, var(--background, #fff));
1976
1999
  color: var(--sjs-general-forecolor, var(--foreground, #161616));
1977
2000
  opacity: 0.75;
@@ -2004,11 +2027,11 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list__item-icon use {
2004
2027
  flex-direction: column;
2005
2028
  align-items: center;
2006
2029
  text-align: center;
2007
- gap: calc(0.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
2030
+ gap: calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
2008
2031
  justify-content: center;
2009
- min-height: calc(24 * var(--sjs-base-unit, var(--base-unit, 8px)));
2010
- font-size: var(--sjs-font-editorfont-size, calc(1 * var(--sjs-font-size, var(--sjs-font-size, 16px))));
2011
- line-height: calc(1.5 * var(--sjs-font-editorfont-size, calc(1 * var(--sjs-font-size, var(--sjs-font-size, 16px)))));
2032
+ min-height: calc(24 * (var(--sjs-base-unit, var(--base-unit, 8px))));
2033
+ font-size: var(--sjs-font-editorfont-size, var(--sjs-font-size, 16px));
2034
+ line-height: calc(1.5 * (var(--sjs-font-editorfont-size, var(--sjs-font-size, 16px))));
2012
2035
  color: var(--sjs-font-questiondescription-color, var(--sjs-general-forecolor-light, rgba(0, 0, 0, 0.45)));
2013
2036
  }
2014
2037
  .sd-question__placeholder > div .sv-string-viewer, .sd-question__placeholder > span .sv-string-viewer {
@@ -2029,6 +2052,11 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list__item-icon use {
2029
2052
  max-width: 100%;
2030
2053
  }
2031
2054
 
2055
+ .sd-question__title--empty .sv-string-viewer {
2056
+ display: inline-block;
2057
+ height: calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
2058
+ }
2059
+
2032
2060
  .sd-input {
2033
2061
  -webkit-appearance: none;
2034
2062
  -moz-appearance: none;
@@ -2036,12 +2064,12 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list__item-icon use {
2036
2064
  position: static;
2037
2065
  width: 100%;
2038
2066
  box-sizing: border-box;
2039
- padding: calc(1.5 * var(--sjs-base-unit, var(--base-unit, 8px))) calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
2040
- line-height: calc(1.5 * var(--sjs-font-editorfont-size, calc(1 * var(--sjs-font-size, var(--sjs-font-size, 16px)))));
2067
+ padding: calc(1.5 * (var(--sjs-base-unit, var(--base-unit, 8px)))) calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
2068
+ line-height: calc(1.5 * (var(--sjs-font-editorfont-size, var(--sjs-font-size, 16px))));
2041
2069
  font-family: var(--sjs-font-editorfont-family, var(--font-family));
2042
2070
  font-weight: var(--sjs-font-editorfont-weight, 400);
2043
2071
  color: var(--sjs-font-editorfont-color, var(--sjs-general-forecolor, rgba(0, 0, 0, 0.91)));
2044
- font-size: var(--sjs-font-editorfont-size, calc(1 * var(--sjs-font-size, var(--sjs-font-size, 16px))));
2072
+ font-size: var(--sjs-font-editorfont-size, var(--sjs-font-size, 16px));
2045
2073
  background-color: var(--sjs-editorpanel-backcolor, var(--sjs-editor-background, var(--sjs-general-backcolor-dim-light, var(--background-dim-light, #f9f9f9))));
2046
2074
  box-shadow: var(--sjs-shadow-inner, inset 0px 1px 2px 0px rgba(0, 0, 0, 0.15));
2047
2075
  border: none;
@@ -2104,12 +2132,12 @@ textarea.sd-input:disabled:not(.sd-input--disabled) {
2104
2132
  align-items: flex-end;
2105
2133
  padding: 0px;
2106
2134
  font-family: var(--font-family);
2107
- line-height: calc(1.5 * var(--sjs-font-size, 16px));
2108
- font-size: calc(1 * var(--sjs-font-size, 16px));
2135
+ line-height: calc(1.5 * (var(--sjs-font-size, 16px)));
2136
+ font-size: var(--sjs-font-size, 16px);
2109
2137
  color: var(--sjs-general-forecolor-light, var(--foreground-light, #909090));
2110
2138
  position: absolute;
2111
- inset-inline-end: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
2112
- inset-block-end: calc(1.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
2139
+ inset-inline-end: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
2140
+ inset-block-end: calc(1.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
2113
2141
  }
2114
2142
 
2115
2143
  .sd-question__content:focus-within .sd-remaining-character-counter {
@@ -2129,50 +2157,50 @@ textarea.sd-input:disabled:not(.sd-input--disabled) {
2129
2157
  .sd-input[type=range] {
2130
2158
  box-sizing: content-box;
2131
2159
  width: calc(100% - 4 * var(--sjs-base-unit, var(--base-unit, 8px)));
2132
- height: calc(1.5 * var(--sjs-font-editorfont-size, calc(1 * var(--sjs-font-size, var(--sjs-font-size, 16px)))));
2160
+ height: calc(1.5 * (var(--sjs-font-editorfont-size, var(--sjs-font-size, 16px))));
2133
2161
  }
2134
2162
 
2135
2163
  .sd-input[type=range]::-webkit-slider-runnable-track {
2136
2164
  background-color: var(--sjs-primary-backcolor, var(--primary, #19b394));
2137
- border-radius: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
2138
- height: calc(1.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
2165
+ border-radius: var(--sjs-base-unit, var(--base-unit, 8px));
2166
+ height: calc(1.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
2139
2167
  }
2140
2168
 
2141
2169
  .sd-input[type=range]::-webkit-slider-thumb {
2142
2170
  -webkit-appearance: none;
2143
2171
  appearance: none;
2144
- margin-top: calc(-0.75 * var(--sjs-base-unit, var(--base-unit, 8px)));
2172
+ margin-top: calc(-0.75 * (var(--sjs-base-unit, var(--base-unit, 8px))));
2145
2173
  border-radius: 100%;
2146
2174
  border: 2px solid var(--sjs-primary-backcolor, var(--primary, #19b394));
2147
2175
  box-shadow: inset 0 0 0 2px var(--background, #fff);
2148
2176
  background-color: var(--sjs-primary-backcolor, var(--primary, #19b394));
2149
- height: calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
2150
- width: calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
2177
+ height: calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
2178
+ width: calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
2151
2179
  }
2152
2180
 
2153
2181
  .sd-input[type=range]::-moz-range-track {
2154
2182
  background-color: var(--sjs-primary-backcolor, var(--primary, #19b394));
2155
- border-radius: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
2156
- height: calc(1.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
2183
+ border-radius: var(--sjs-base-unit, var(--base-unit, 8px));
2184
+ height: calc(1.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
2157
2185
  }
2158
2186
 
2159
2187
  .sd-input[type=range]::-moz-range-thumb {
2160
2188
  -webkit-appearance: none;
2161
2189
  appearance: none;
2162
- margin-top: calc(-0.75 * var(--sjs-base-unit, var(--base-unit, 8px)));
2190
+ margin-top: calc(-0.75 * (var(--sjs-base-unit, var(--base-unit, 8px))));
2163
2191
  border-radius: 100%;
2164
2192
  border: 2px solid var(--sjs-primary-backcolor, var(--primary, #19b394));
2165
2193
  box-shadow: inset 0 0 0 2px var(--background, #fff);
2166
2194
  background-color: var(--sjs-primary-backcolor, var(--primary, #19b394));
2167
- height: calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
2168
- width: calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
2195
+ height: calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
2196
+ width: calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
2169
2197
  }
2170
2198
 
2171
2199
  .sd-comment {
2172
2200
  display: block;
2173
2201
  height: auto;
2174
- min-width: calc(6 * var(--sjs-base-unit, var(--base-unit, 8px)));
2175
- min-height: calc(6 * var(--sjs-base-unit, var(--base-unit, 8px)));
2202
+ min-width: calc(6 * (var(--sjs-base-unit, var(--base-unit, 8px))));
2203
+ min-height: calc(6 * (var(--sjs-base-unit, var(--base-unit, 8px))));
2176
2204
  max-width: 100%;
2177
2205
  }
2178
2206
 
@@ -2192,13 +2220,14 @@ textarea.sd-input:disabled:not(.sd-input--disabled) {
2192
2220
  content: none;
2193
2221
  }
2194
2222
  .sd-panel.sd-panel--as-page > .sd-panel__header.sd-panel__header .sd-panel__title {
2223
+ --page-title-font-size: var(--sjs-font-pagetitle-size, calc(1.5 * (var(--sjs-font-size, 16px))));
2195
2224
  font-family: var(--sjs-font-pagetitle-family, var(--font-family));
2196
2225
  font-weight: var(--sjs-font-pagetitle-weight, 700);
2197
- font-size: var(--sjs-font-pagetitle-size, calc(1.5 * var(--sjs-font-size, var(--sjs-font-size, 16px))));
2226
+ font-size: var(--page-title-font-size);
2198
2227
  color: var(--sjs-font-pagetitle-color, var(--sjs-general-dim-forecolor, rgba(0, 0, 0, 0.91)));
2199
2228
  position: static;
2200
- line-height: calc(1.33 * var(--sjs-font-pagetitle-size, calc(1.5 * var(--sjs-font-size, var(--sjs-font-size, 16px)))));
2201
- margin: calc(0.5 * var(--sjs-base-unit, var(--base-unit, 8px))) 0px;
2229
+ line-height: calc(1.33 * (var(--page-title-font-size)));
2230
+ margin: calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px)))) 0px;
2202
2231
  }
2203
2232
  .sd-panel.sd-panel--as-page > .sd-panel__header.sd-panel__header .sd-panel__title span {
2204
2233
  font-family: inherit;
@@ -2210,21 +2239,21 @@ textarea.sd-input:disabled:not(.sd-input--disabled) {
2210
2239
  .sd-panel.sd-panel--as-page > .sd-panel__header.sd-panel__header .sd-panel__description {
2211
2240
  font-family: var(--sjs-font-pagedescription-family, var(--font-family));
2212
2241
  font-weight: var(--sjs-font-pagedescription-weight, 400);
2213
- font-size: var(--sjs-font-pagedescription-size, calc(1 * var(--sjs-font-size, var(--sjs-font-size, 16px))));
2242
+ font-size: var(--sjs-font-pagedescription-size, var(--sjs-font-size, 16px));
2214
2243
  color: var(--sjs-font-pagedescription-color, var(--sjs-general-dim-forecolor-light, rgba(0, 0, 0, 0.45)));
2215
2244
  position: static;
2216
- line-height: calc(1.5 * var(--sjs-font-pagedescription-size, calc(1 * var(--sjs-font-size, var(--sjs-font-size, 16px)))));
2217
- margin: 0 0 calc(1 * var(--sjs-base-unit, var(--base-unit, 8px))) 0;
2245
+ line-height: calc(1.5 * (var(--sjs-font-pagedescription-size, var(--sjs-font-size, 16px))));
2246
+ margin: 0 0 calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px)))) 0;
2218
2247
  }
2219
2248
  .sd-panel.sd-panel--as-page .sd-panel__header + .sd-panel__content {
2220
- margin-top: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
2249
+ margin-top: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
2221
2250
  }
2222
2251
  .sd-panel.sd-panel--as-page > .sd-panel__content {
2223
2252
  padding-top: 0;
2224
2253
  }
2225
2254
 
2226
2255
  .sd-row ~ .sd-row .sd-panel--as-page {
2227
- padding-top: calc(5 * var(--sjs-base-unit, var(--base-unit, 8px)));
2256
+ padding-top: calc(5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
2228
2257
  }
2229
2258
 
2230
2259
  .sd-panel__required-text {
@@ -2248,8 +2277,8 @@ textarea.sd-input:disabled:not(.sd-input--disabled) {
2248
2277
 
2249
2278
  .sjs_sp_placeholder {
2250
2279
  color: var(--sjs-font-questiondescription-color, var(--sjs-general-forecolor-light, rgba(0, 0, 0, 0.45)));
2251
- font-size: var(--sjs-font-editorfont-size, calc(1 * var(--sjs-font-size, var(--sjs-font-size, 16px))));
2252
- line-height: calc(1.5 * var(--sjs-font-editorfont-size, calc(1 * var(--sjs-font-size, var(--sjs-font-size, 16px)))));
2280
+ font-size: var(--sjs-font-editorfont-size, var(--sjs-font-size, 16px));
2281
+ line-height: calc(1.5 * (var(--sjs-font-editorfont-size, var(--sjs-font-size, 16px))));
2253
2282
  }
2254
2283
 
2255
2284
  .sjs_sp_container {
@@ -2257,8 +2286,8 @@ textarea.sd-input:disabled:not(.sd-input--disabled) {
2257
2286
  }
2258
2287
 
2259
2288
  .sjs_sp_controls.sd-signaturepad__controls {
2260
- right: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
2261
- top: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
2289
+ right: var(--sjs-base-unit, var(--base-unit, 8px));
2290
+ top: var(--sjs-base-unit, var(--base-unit, 8px));
2262
2291
  left: auto;
2263
2292
  bottom: auto;
2264
2293
  }
@@ -2280,13 +2309,13 @@ textarea.sd-input:disabled:not(.sd-input--disabled) {
2280
2309
  }
2281
2310
 
2282
2311
  .sd-checkbox__decorator {
2283
- border-radius: calc(0.5 * var(--sjs-corner-radius, 4px));
2312
+ border-radius: calc(0.5 * (var(--sjs-corner-radius, 4px)));
2284
2313
  }
2285
2314
 
2286
2315
  .sd-checkbox__svg {
2287
2316
  display: none;
2288
- width: calc(2.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
2289
- height: calc(2.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
2317
+ width: calc(2.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
2318
+ height: calc(2.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
2290
2319
  }
2291
2320
 
2292
2321
  .sd-checkbox--checked .sd-checkbox__svg {
@@ -2306,17 +2335,17 @@ textarea.sd-input:disabled:not(.sd-input--disabled) {
2306
2335
 
2307
2336
  .sd-matrixdynamic__btn.sd-matrixdynamic__add-btn {
2308
2337
  position: sticky;
2309
- left: calc(-3 * var(--sjs-base-unit, var(--base-unit, 8px)));
2310
- margin-left: calc(-3 * var(--sjs-base-unit, var(--base-unit, 8px)));
2338
+ left: calc(-3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
2339
+ margin-left: calc(-3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
2311
2340
  z-index: 12;
2312
2341
  }
2313
2342
 
2314
2343
  .sd-matrixdynamic__footer:first-child {
2315
- padding-bottom: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
2344
+ padding-bottom: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
2316
2345
  }
2317
2346
 
2318
2347
  .sd-matrixdynamic__footer {
2319
- padding-top: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
2348
+ padding-top: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
2320
2349
  }
2321
2350
 
2322
2351
  .sd-action.sd-matrixdynamic__remove-btn {
@@ -2324,23 +2353,23 @@ textarea.sd-input:disabled:not(.sd-input--disabled) {
2324
2353
  }
2325
2354
 
2326
2355
  .sd-action.sd-matrixdynamic__remove-btn .sd-action__icon {
2327
- width: calc(1.5 * var(--sjs-font-editorfont-size, calc(1 * var(--sjs-font-size, var(--sjs-font-size, 16px)))));
2328
- height: calc(1.5 * var(--sjs-font-editorfont-size, calc(1 * var(--sjs-font-size, var(--sjs-font-size, 16px)))));
2356
+ width: calc(1.5 * (var(--sjs-font-editorfont-size, var(--sjs-font-size, 16px))));
2357
+ height: calc(1.5 * (var(--sjs-font-editorfont-size, var(--sjs-font-size, 16px))));
2329
2358
  }
2330
2359
 
2331
2360
  .sd-matrixdynamic__btn {
2332
2361
  appearance: none;
2333
2362
  background: transparent;
2334
2363
  border: none;
2335
- line-height: calc(1.5 * var(--sjs-font-size, 16px));
2336
- font-size: calc(1 * var(--sjs-font-size, 16px));
2364
+ line-height: calc(1.5 * (var(--sjs-font-size, 16px)));
2365
+ font-size: var(--sjs-font-size, 16px);
2337
2366
  font-family: var(--font-family, var(--font-family));
2338
2367
  font-weight: 600;
2339
- padding: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px))) 0;
2368
+ padding: var(--sjs-base-unit, var(--base-unit, 8px)) 0;
2340
2369
  }
2341
2370
 
2342
2371
  .sd-matrixdynamic__drag-element {
2343
- padding: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
2372
+ padding: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
2344
2373
  }
2345
2374
  .sd-matrixdynamic__drag-element:hover {
2346
2375
  background-color: var(--sjs-general-backcolor, var(--background, #fff));
@@ -2348,11 +2377,11 @@ textarea.sd-input:disabled:not(.sd-input--disabled) {
2348
2377
  .sd-matrixdynamic__drag-element:after {
2349
2378
  content: " ";
2350
2379
  display: block;
2351
- height: calc(0.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
2352
- width: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
2380
+ height: calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
2381
+ width: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
2353
2382
  border: 1px solid var(--sjs-border-default, var(--border, #d6d6d6));
2354
2383
  box-sizing: border-box;
2355
- border-radius: calc(1.25 * var(--sjs-base-unit, var(--base-unit, 8px)));
2384
+ border-radius: calc(1.25 * (var(--sjs-base-unit, var(--base-unit, 8px))));
2356
2385
  }
2357
2386
 
2358
2387
  .sd-matrixdynamic__placeholder .sd-matrixdynamic__add-btn {
@@ -2360,8 +2389,8 @@ textarea.sd-input:disabled:not(.sd-input--disabled) {
2360
2389
  }
2361
2390
 
2362
2391
  .sd-drag-element__svg {
2363
- width: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
2364
- height: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
2392
+ width: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
2393
+ height: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
2365
2394
  display: block;
2366
2395
  }
2367
2396
  .sd-drag-element__svg use {
@@ -2377,12 +2406,12 @@ textarea.sd-input:disabled:not(.sd-input--disabled) {
2377
2406
  }
2378
2407
  .sd-table > thead > tr > th {
2379
2408
  border-top: 0;
2380
- border-bottom: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px))) solid transparent;
2409
+ border-bottom: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px)))) solid transparent;
2381
2410
  }
2382
2411
 
2383
2412
  .sd-table__cell {
2384
- border-top: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px))) solid transparent;
2385
- border-bottom: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px))) solid transparent;
2413
+ border-top: var(--sjs-base-unit, var(--base-unit, 8px)) solid transparent;
2414
+ border-bottom: var(--sjs-base-unit, var(--base-unit, 8px)) solid transparent;
2386
2415
  background-clip: padding-box;
2387
2416
  }
2388
2417
 
@@ -2403,44 +2432,44 @@ textarea.sd-input:disabled:not(.sd-input--disabled) {
2403
2432
  }
2404
2433
 
2405
2434
  .sd-table--no-header {
2406
- padding-top: calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
2435
+ padding-top: calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
2407
2436
  }
2408
2437
 
2409
2438
  .sd-panel__content .sd-table--no-header {
2410
2439
  padding-top: 0;
2411
2440
  }
2412
2441
  .sd-panel__content .sd-question--table .sd-question__content {
2413
- padding-top: calc(0 * var(--sjs-base-unit, var(--base-unit, 8px)));
2442
+ padding-top: calc(0 * (var(--sjs-base-unit, var(--base-unit, 8px))));
2414
2443
  }
2415
2444
  .sd-panel__content .sd-question--table > .sd-question__header + .sd-question__content {
2416
- padding-top: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
2445
+ padding-top: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
2417
2446
  }
2418
2447
  .sd-panel__content .sd-question--table > .sd-question__header + .sd-question__content .sd-table--no-header {
2419
- padding-top: calc(4 * var(--sjs-base-unit, var(--base-unit, 8px)));
2448
+ padding-top: calc(4 * (var(--sjs-base-unit, var(--base-unit, 8px))));
2420
2449
  }
2421
2450
  .sd-panel__content .sd-question--table > .sd-question__content .sd-table-wrapper .sd-table:not(.sd-table--no-header) {
2422
- margin-top: calc(-3 * var(--sjs-base-unit, var(--base-unit, 8px)));
2451
+ margin-top: calc(-3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
2423
2452
  }
2424
2453
  .sd-panel__content > .sd-row:not(:first-of-type) .sd-question--table > .sd-question__content .sd-table-wrapper .sd-table:not(.sd-table--no-header) {
2425
- margin-top: calc(-2 * var(--sjs-base-unit, var(--base-unit, 8px)));
2454
+ margin-top: calc(-2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
2426
2455
  }
2427
2456
  .sd-panel__content .sd-question--table > .sd-question__header + .sd-question__content .sd-table-wrapper .sd-table:not(.sd-table--no-header) {
2428
- margin-top: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
2457
+ margin-top: var(--sjs-base-unit, var(--base-unit, 8px));
2429
2458
  }
2430
2459
  .sd-panel__content > .sd-row:not(:first-of-type) .sd-question--table > .sd-question__header + .sd-question__content .sd-table-wrapper .sd-table:not(.sd-table--no-header) {
2431
- margin-top: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
2460
+ margin-top: var(--sjs-base-unit, var(--base-unit, 8px));
2432
2461
  }
2433
2462
 
2434
2463
  .sd-root-modern:not(.sd-root-modern--mobile) .sd-table--alternate-rows {
2435
- margin-left: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
2436
- margin-right: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
2464
+ margin-left: var(--sjs-base-unit, var(--base-unit, 8px));
2465
+ margin-right: var(--sjs-base-unit, var(--base-unit, 8px));
2437
2466
  width: calc(100% - 2 * var(--sjs-base-unit, var(--base-unit, 8px)));
2438
2467
  }
2439
2468
  .sd-root-modern:not(.sd-root-modern--mobile) .sd-table--alternate-rows .sd-table__cell:not(.sd-table__cell--header):first-of-type {
2440
- padding-left: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
2469
+ padding-left: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
2441
2470
  }
2442
2471
  .sd-root-modern:not(.sd-root-modern--mobile) .sd-table--alternate-rows .sd-table__cell:last-of-type {
2443
- padding-right: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
2472
+ padding-right: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
2444
2473
  }
2445
2474
  .sd-root-modern:not(.sd-root-modern--mobile) .sd-table--alternate-rows .sd-table__row:nth-of-type(odd) > td,
2446
2475
  .sd-root-modern:not(.sd-root-modern--mobile) .sd-table--alternate-rows .sd-table__row:nth-of-type(odd) td:first-of-type {
@@ -2469,19 +2498,19 @@ textarea.sd-input:disabled:not(.sd-input--disabled) {
2469
2498
 
2470
2499
  .sd-table__cell {
2471
2500
  font-weight: normal;
2472
- font-size: var(--sjs-font-editorfont-size, calc(1 * var(--sjs-font-size, var(--sjs-font-size, 16px))));
2473
- line-height: calc(1.5 * var(--sjs-font-editorfont-size, calc(1 * var(--sjs-font-size, var(--sjs-font-size, 16px)))));
2474
- padding: 0 calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
2501
+ font-size: var(--sjs-font-editorfont-size, var(--sjs-font-size, 16px));
2502
+ line-height: calc(1.5 * (var(--sjs-font-editorfont-size, var(--sjs-font-size, 16px))));
2503
+ padding: 0 var(--sjs-base-unit, var(--base-unit, 8px));
2475
2504
  color: var(--sjs-general-forecolor, var(--foreground, #161616));
2476
2505
  text-align: center;
2477
2506
  }
2478
2507
  .sd-table__cell:not(.sd-table__cell--empty):not(.sd-table__cell--actions):not(:empty) {
2479
- min-width: calc(15 * var(--sjs-base-unit, var(--base-unit, 8px)));
2508
+ min-width: calc(15 * (var(--sjs-base-unit, var(--base-unit, 8px))));
2480
2509
  }
2481
2510
 
2482
2511
  .sd-table__cell--error {
2483
2512
  border: none;
2484
- padding: 0 calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
2513
+ padding: 0 var(--sjs-base-unit, var(--base-unit, 8px));
2485
2514
  }
2486
2515
  .sd-table__cell--error .sd-question__erbox--outside-question {
2487
2516
  margin: 0;
@@ -2489,12 +2518,12 @@ textarea.sd-input:disabled:not(.sd-input--disabled) {
2489
2518
 
2490
2519
  .sd-table__cell--error-top {
2491
2520
  vertical-align: bottom;
2492
- padding-top: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
2521
+ padding-top: var(--sjs-base-unit, var(--base-unit, 8px));
2493
2522
  }
2494
2523
 
2495
2524
  .sd-table__cell--error-bottom {
2496
2525
  vertical-align: top;
2497
- padding-bottom: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
2526
+ padding-bottom: var(--sjs-base-unit, var(--base-unit, 8px));
2498
2527
  }
2499
2528
 
2500
2529
  .sd-table__cell--item .sd-selectbase__item {
@@ -2519,43 +2548,43 @@ textarea.sd-input:disabled:not(.sd-input--disabled) {
2519
2548
  }
2520
2549
 
2521
2550
  .sd-table__cell--header span {
2522
- font-size: var(--sjs-font-editorfont-size, calc(1 * var(--sjs-font-size, var(--sjs-font-size, 16px))));
2523
- line-height: calc(1.5 * var(--sjs-font-editorfont-size, calc(1 * var(--sjs-font-size, var(--sjs-font-size, 16px)))));
2551
+ font-size: var(--sjs-font-editorfont-size, var(--sjs-font-size, 16px));
2552
+ line-height: calc(1.5 * (var(--sjs-font-editorfont-size, var(--sjs-font-size, 16px))));
2524
2553
  }
2525
2554
 
2526
2555
  .sd-table__cell--header {
2527
2556
  font-weight: 600;
2528
2557
  color: var(--sjs-font-questiontitle-color, var(--sjs-general-forecolor, var(--foreground, #161616)));
2529
2558
  vertical-align: top;
2530
- padding: calc(1.5 * var(--sjs-base-unit, var(--base-unit, 8px))) calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
2559
+ padding: calc(1.5 * (var(--sjs-base-unit, var(--base-unit, 8px)))) var(--sjs-base-unit, var(--base-unit, 8px));
2531
2560
  }
2532
2561
  .sd-table__cell--header:not(.sd-table__cell--empty) {
2533
- min-width: calc(15 * var(--sjs-base-unit, var(--base-unit, 8px)));
2562
+ min-width: calc(15 * (var(--sjs-base-unit, var(--base-unit, 8px))));
2534
2563
  }
2535
2564
 
2536
2565
  .sd-matrixdropdown .sd-table__cell--header.sd-table__cell--empty {
2537
- min-width: calc(15 * var(--sjs-base-unit, var(--base-unit, 8px)));
2566
+ min-width: calc(15 * (var(--sjs-base-unit, var(--base-unit, 8px))));
2538
2567
  }
2539
2568
 
2540
2569
  .sd-matrixdropdown .sd-table__cell--header.sd-table__cell--action {
2541
- min-width: calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
2542
- width: calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
2570
+ min-width: calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
2571
+ width: calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
2543
2572
  }
2544
2573
 
2545
2574
  .sd-matrixdropdown .sd-table__cell--header:not(.sd-table__cell--empty) {
2546
- min-width: calc(15 * var(--sjs-base-unit, var(--base-unit, 8px)));
2575
+ min-width: calc(15 * (var(--sjs-base-unit, var(--base-unit, 8px))));
2547
2576
  }
2548
2577
  .sd-matrixdropdown .sd-table__cell--header:not(.sd-table__cell--empty).sd-table__cell--dropdown, .sd-matrixdropdown .sd-table__cell--header:not(.sd-table__cell--empty).sd-table__cell--rating {
2549
- min-width: calc(22 * var(--sjs-base-unit, var(--base-unit, 8px)));
2578
+ min-width: calc(22 * (var(--sjs-base-unit, var(--base-unit, 8px))));
2550
2579
  }
2551
2580
  .sd-matrixdropdown .sd-table__cell--header:not(.sd-table__cell--empty).sd-table__cell--boolean {
2552
- min-width: calc(18 * var(--sjs-base-unit, var(--base-unit, 8px)));
2581
+ min-width: calc(18 * (var(--sjs-base-unit, var(--base-unit, 8px))));
2553
2582
  }
2554
2583
 
2555
2584
  .sd-table__cell--detail-panel {
2556
- border-top: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px))) solid transparent;
2557
- padding: calc(3 * var(--sjs-base-unit, var(--base-unit, 8px))) calc(1 * var(--sjs-base-unit, var(--base-unit, 8px))) calc(4 * var(--sjs-base-unit, var(--base-unit, 8px)));
2558
- border-bottom: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px))) solid transparent;
2585
+ border-top: var(--sjs-base-unit, var(--base-unit, 8px)) solid transparent;
2586
+ padding: calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px)))) var(--sjs-base-unit, var(--base-unit, 8px)) calc(4 * (var(--sjs-base-unit, var(--base-unit, 8px))));
2587
+ border-bottom: var(--sjs-base-unit, var(--base-unit, 8px)) solid transparent;
2559
2588
  }
2560
2589
 
2561
2590
  .sd-table__cell--actions .sv-action-bar,
@@ -2564,24 +2593,24 @@ textarea.sd-input:disabled:not(.sd-input--disabled) {
2564
2593
  }
2565
2594
 
2566
2595
  .sd-table__cell--actions:not(.sd-table__cell--vertical) {
2567
- width: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
2596
+ width: var(--sjs-base-unit, var(--base-unit, 8px));
2568
2597
  }
2569
2598
  .sd-table__cell--actions:not(.sd-table__cell--vertical):not(.sd-table__cell--drag):first-of-type {
2570
2599
  padding-left: 0;
2571
- width: calc(4 * var(--sjs-base-unit, var(--base-unit, 8px)));
2572
- min-width: calc(4 * var(--sjs-base-unit, var(--base-unit, 8px)));
2600
+ width: calc(4 * (var(--sjs-base-unit, var(--base-unit, 8px))));
2601
+ min-width: calc(4 * (var(--sjs-base-unit, var(--base-unit, 8px))));
2573
2602
  }
2574
2603
 
2575
2604
  .sd-table__cell--detail-button {
2576
2605
  border: none;
2577
2606
  background: transparent;
2578
- border-radius: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
2579
- padding: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
2607
+ border-radius: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
2608
+ padding: var(--sjs-base-unit, var(--base-unit, 8px));
2580
2609
  }
2581
2610
  .sd-table__cell--detail-button svg {
2582
2611
  display: block;
2583
- width: calc(1 * var(--sjs-font-editorfont-size, calc(1 * var(--sjs-font-size, var(--sjs-font-size, 16px)))));
2584
- height: calc(1 * var(--sjs-font-editorfont-size, calc(1 * var(--sjs-font-size, var(--sjs-font-size, 16px)))));
2612
+ width: var(--sjs-font-editorfont-size, var(--sjs-font-size, 16px));
2613
+ height: var(--sjs-font-editorfont-size, var(--sjs-font-size, 16px));
2585
2614
  fill: var(--sjs-general-forecolor-light, var(--foreground-light, #909090));
2586
2615
  }
2587
2616
  .sd-table__cell--detail-button:hover {
@@ -2602,8 +2631,8 @@ textarea.sd-input:disabled:not(.sd-input--disabled) {
2602
2631
  font-weight: 600;
2603
2632
  color: var(--sjs-font-questiontitle-color, var(--sjs-general-forecolor, var(--foreground, #161616)));
2604
2633
  text-align: left;
2605
- min-width: calc(12 * var(--sjs-base-unit, var(--base-unit, 8px)));
2606
- padding: calc(1.5 * var(--sjs-base-unit, var(--base-unit, 8px))) calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
2634
+ min-width: calc(12 * (var(--sjs-base-unit, var(--base-unit, 8px))));
2635
+ padding: calc(1.5 * (var(--sjs-base-unit, var(--base-unit, 8px)))) var(--sjs-base-unit, var(--base-unit, 8px));
2607
2636
  }
2608
2637
 
2609
2638
  .sd-matrixdynamic__content .sd-table__question-wrapper {
@@ -2631,18 +2660,18 @@ textarea.sd-input:disabled:not(.sd-input--disabled) {
2631
2660
  .sd-table__cell--row-text:first-of-type,
2632
2661
  .sd-matrix__cell:first-of-type:first-of-type,
2633
2662
  .sd-matrix tr > td:first-of-type:first-of-type {
2634
- left: calc(-1 * var(--sjs-base-unit, var(--base-unit, 8px)));
2663
+ left: calc(-1 * (var(--sjs-base-unit, var(--base-unit, 8px))));
2635
2664
  }
2636
2665
  .sd-table__cell--actions:not(.sd-table__cell--vertical):last-of-type,
2637
2666
  .sd-table__cell--empty:last-of-type,
2638
2667
  .sd-table__cell--row-text:last-of-type,
2639
2668
  .sd-matrix__cell:first-of-type:last-of-type,
2640
2669
  .sd-matrix tr > td:first-of-type:last-of-type {
2641
- right: calc(-1 * var(--sjs-base-unit, var(--base-unit, 8px)));
2670
+ right: calc(-1 * (var(--sjs-base-unit, var(--base-unit, 8px))));
2642
2671
  }
2643
2672
 
2644
2673
  .sd-table__cell--actions:not(.sd-table__cell--vertical):last-child .sd-action-bar {
2645
- margin-right: calc(-3 * var(--sjs-base-unit, var(--base-unit, 8px)));
2674
+ margin-right: calc(-3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
2646
2675
  justify-content: flex-end;
2647
2676
  background: var(--sjs-questionpanel-backcolor, var(--sjs-question-background, var(--sjs-general-backcolor, var(--background, #fff))));
2648
2677
  }
@@ -2688,7 +2717,7 @@ textarea.sd-input:disabled:not(.sd-input--disabled) {
2688
2717
  left: 0;
2689
2718
  }
2690
2719
  .sd-question--table > .sd-question__content {
2691
- padding-top: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
2720
+ padding-top: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
2692
2721
  min-width: min-content;
2693
2722
  }
2694
2723
  .sd-question--table.sd-element--nested > .sd-question__erbox--above-question {
@@ -2699,10 +2728,10 @@ textarea.sd-input:disabled:not(.sd-input--disabled) {
2699
2728
  overflow-x: auto;
2700
2729
  }
2701
2730
  .sd-question--table.sd-element--nested > .sd-question__content {
2702
- padding-bottom: calc(0.25 * var(--sjs-base-unit, var(--base-unit, 8px)));
2703
- margin-bottom: calc(-0.25 * var(--sjs-base-unit, var(--base-unit, 8px)));
2704
- padding-top: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
2705
- margin-top: calc(-1 * var(--sjs-base-unit, var(--base-unit, 8px)));
2731
+ padding-bottom: calc(0.25 * (var(--sjs-base-unit, var(--base-unit, 8px))));
2732
+ margin-bottom: calc(-0.25 * (var(--sjs-base-unit, var(--base-unit, 8px))));
2733
+ padding-top: var(--sjs-base-unit, var(--base-unit, 8px));
2734
+ margin-top: calc(-1 * (var(--sjs-base-unit, var(--base-unit, 8px))));
2706
2735
  }
2707
2736
  .sd-question--table.sd-element--nested > .sd-question__content, .sd-question--table:not(.sd-element--with-frame):not(.sd-element--nested) {
2708
2737
  padding-right: var(--sd-base-padding);
@@ -2717,7 +2746,7 @@ textarea.sd-input:disabled:not(.sd-input--disabled) {
2717
2746
  }
2718
2747
 
2719
2748
  .sd-table__cell--detail-panel .sd-panel__content {
2720
- padding-top: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
2749
+ padding-top: var(--sjs-base-unit, var(--base-unit, 8px));
2721
2750
  }
2722
2751
 
2723
2752
  .sd-table__question-wrapper .sd-boolean-root {
@@ -2733,7 +2762,7 @@ textarea.sd-input:disabled:not(.sd-input--disabled) {
2733
2762
  display: flex;
2734
2763
  flex-direction: column;
2735
2764
  align-items: flex-start;
2736
- padding: 0 calc(5 * var(--sjs-base-unit, var(--base-unit, 8px)));
2765
+ padding: 0 calc(5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
2737
2766
  width: 100%;
2738
2767
  box-sizing: border-box;
2739
2768
  }
@@ -2743,24 +2772,25 @@ textarea.sd-input:disabled:not(.sd-input--disabled) {
2743
2772
  }
2744
2773
 
2745
2774
  .sd-page .sd-page__title {
2775
+ --page-title-font-size: var(--sjs-font-pagetitle-size, calc(1.5 * (var(--sjs-font-size, 16px))));
2746
2776
  font-family: var(--sjs-font-pagetitle-family, var(--font-family));
2747
2777
  font-weight: var(--sjs-font-pagetitle-weight, 700);
2748
- font-size: var(--sjs-font-pagetitle-size, calc(1.5 * var(--sjs-font-size, var(--sjs-font-size, 16px))));
2778
+ font-size: var(--page-title-font-size);
2749
2779
  color: var(--sjs-font-pagetitle-color, var(--sjs-general-dim-forecolor, rgba(0, 0, 0, 0.91)));
2750
2780
  position: static;
2751
- line-height: calc(1.33 * var(--sjs-font-pagetitle-size, calc(1.5 * var(--sjs-font-size, var(--sjs-font-size, 16px)))));
2752
- margin: calc(0.5 * var(--sjs-base-unit, var(--base-unit, 8px))) 0px;
2781
+ line-height: calc(1.33 * (var(--page-title-font-size)));
2782
+ margin: calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px)))) 0px;
2753
2783
  margin-top: 0;
2754
2784
  }
2755
2785
 
2756
2786
  .sd-page .sd-page__description {
2757
2787
  font-family: var(--sjs-font-pagedescription-family, var(--font-family));
2758
2788
  font-weight: var(--sjs-font-pagedescription-weight, 400);
2759
- font-size: var(--sjs-font-pagedescription-size, calc(1 * var(--sjs-font-size, var(--sjs-font-size, 16px))));
2789
+ font-size: var(--sjs-font-pagedescription-size, var(--sjs-font-size, 16px));
2760
2790
  color: var(--sjs-font-pagedescription-color, var(--sjs-general-dim-forecolor-light, rgba(0, 0, 0, 0.45)));
2761
2791
  position: static;
2762
- line-height: calc(1.5 * var(--sjs-font-pagedescription-size, calc(1 * var(--sjs-font-size, var(--sjs-font-size, 16px)))));
2763
- margin: 0 0 calc(1 * var(--sjs-base-unit, var(--base-unit, 8px))) 0;
2792
+ line-height: calc(1.5 * (var(--sjs-font-pagedescription-size, var(--sjs-font-size, 16px))));
2793
+ margin: 0 0 calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px)))) 0;
2764
2794
  }
2765
2795
 
2766
2796
  .sd-row {
@@ -2772,7 +2802,7 @@ textarea.sd-input:disabled:not(.sd-input--disabled) {
2772
2802
  }
2773
2803
 
2774
2804
  .sd-row.sd-page__row {
2775
- margin-top: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
2805
+ margin-top: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
2776
2806
  }
2777
2807
 
2778
2808
  .sd-page__row.sd-row--compact {
@@ -2783,22 +2813,28 @@ textarea.sd-input:disabled:not(.sd-input--disabled) {
2783
2813
  margin-top: 0;
2784
2814
  }
2785
2815
 
2786
- .sd-page__title ~ .sd-row.sd-page__row {
2787
- margin-top: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
2816
+ .sd-page__title ~ .sd-row.sd-page__row:not(.sd-row--compact),
2817
+ .sd-page__description ~ .sd-row.sd-page__row:not(.sd-row--compact) {
2818
+ margin-top: calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
2788
2819
  }
2789
- .sd-page__title ~ .sd-row.sd-page__row.sd-row--compact {
2820
+ .sd-page__title ~ .sd-page__row.sd-row--compact,
2821
+ .sd-page__description ~ .sd-page__row.sd-row--compact {
2790
2822
  margin-top: var(--sd-base-vertical-padding);
2791
2823
  }
2792
2824
 
2825
+ .sd-row.sd-page__row:not(.sd-row--compact) ~ .sd-row.sd-page__row:not(.sd-row--compact) {
2826
+ margin-top: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
2827
+ }
2828
+
2793
2829
  .sd-row--multiple {
2794
- row-gap: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
2830
+ row-gap: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
2795
2831
  margin-left: calc(-1 * var(--sd-base-padding));
2796
2832
  width: calc(100% + var(--sd-base-padding));
2797
2833
  flex-wrap: wrap;
2798
2834
  }
2799
2835
  .sd-row--multiple > div {
2800
2836
  box-sizing: border-box;
2801
- padding-left: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
2837
+ padding-left: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
2802
2838
  display: flex;
2803
2839
  align-items: stretch;
2804
2840
  }
@@ -2815,7 +2851,7 @@ textarea.sd-input:disabled:not(.sd-input--disabled) {
2815
2851
  }
2816
2852
 
2817
2853
  .sd-page__row.sd-row--multiple {
2818
- margin-left: calc(-2 * var(--sjs-base-unit, var(--base-unit, 8px)));
2854
+ margin-left: calc(-2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
2819
2855
  width: calc(100% + 2 * var(--sjs-base-unit, var(--base-unit, 8px)));
2820
2856
  }
2821
2857
  .sd-page__row.sd-row--multiple.sd-row--compact {
@@ -2851,33 +2887,34 @@ textarea.sd-input:disabled:not(.sd-input--disabled) {
2851
2887
  padding: var(--sd-page-vertical-padding) var(--sd-page-vertical-padding);
2852
2888
  overflow: auto;
2853
2889
  font-family: var(--font-family, var(--font-family));
2854
- gap: calc(4 * var(--sjs-base-unit, var(--base-unit, 8px)));
2890
+ gap: calc(4 * (var(--sjs-base-unit, var(--base-unit, 8px))));
2855
2891
  box-shadow: 0px 2px 0px var(--sjs-primary-backcolor, var(--primary, #19b394));
2856
2892
  }
2857
2893
  .sd-title.sd-container-modern__title .sd-logo__image {
2858
- margin-top: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
2894
+ margin-top: var(--sjs-base-unit, var(--base-unit, 8px));
2859
2895
  }
2860
2896
 
2861
2897
  .sd-header__text {
2862
2898
  display: flex;
2863
2899
  flex-direction: column;
2864
- gap: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
2900
+ gap: var(--sjs-base-unit, var(--base-unit, 8px));
2865
2901
  flex-grow: 1;
2866
2902
  }
2867
2903
  .sd-header__text .sd-title {
2904
+ --cover-title-font-size: var(--sjs-font-surveytitle-size, calc(2 * (var(--sjs-font-size, 16px))));
2905
+ font-size: var(--cover-title-font-size);
2906
+ line-height: calc(1.25 * (var(--cover-title-font-size)));
2868
2907
  color: var(--sjs-primary-backcolor, var(--primary, #19b394));
2869
2908
  font-family: var(--sjs-font-surveytitle-family, var(--font-family));
2870
- font-size: var(--sjs-font-surveytitle-size, calc(2 * var(--sjs-font-size, var(--sjs-font-size, 16px))));
2871
2909
  font-weight: var(--sjs-font-surveytitle-weight, 700);
2872
- line-height: calc(1.25 * var(--sjs-font-surveytitle-size, calc(2 * var(--sjs-font-size, var(--sjs-font-size, 16px)))));
2873
2910
  }
2874
2911
  .sd-header__text h3 {
2875
- line-height: calc(2.5 * var(--sjs-font-size, 16px));
2912
+ line-height: calc(2.5 * (var(--sjs-font-size, 16px)));
2876
2913
  }
2877
2914
  .sd-header__text h5 {
2878
- font-size: calc(1 * var(--sjs-font-size, 16px));
2915
+ font-size: var(--sjs-font-size, 16px);
2879
2916
  font-weight: 400;
2880
- line-height: calc(1.5 * var(--sjs-font-size, 16px));
2917
+ line-height: calc(1.5 * (var(--sjs-font-size, 16px)));
2881
2918
  }
2882
2919
 
2883
2920
  .sd-title .sv-title-actions {
@@ -2889,9 +2926,11 @@ textarea.sd-input:disabled:not(.sd-input--disabled) {
2889
2926
  background-color: var(--sjs-general-backcolor, var(--background, #fff));
2890
2927
  }
2891
2928
 
2929
+ .sd-root-modern .sv-conver__content .sd-header__text h3,
2892
2930
  .sd-root-modern .sd-container-modern__title .sd-header__text h3 {
2893
2931
  margin: 0;
2894
2932
  }
2933
+ .sd-root-modern .sv-conver__content .sd-description,
2895
2934
  .sd-root-modern .sd-container-modern__title .sd-description {
2896
2935
  margin: 0;
2897
2936
  color: var(--sjs-general-forecolor-light, var(--foreground-light, #909090));
@@ -2911,9 +2950,9 @@ textarea.sd-input:disabled:not(.sd-input--disabled) {
2911
2950
 
2912
2951
  .sd-action-title-bar {
2913
2952
  flex: 1 9 auto;
2914
- min-width: calc(6 * var(--sjs-base-unit, var(--base-unit, 8px)));
2953
+ min-width: calc(6 * (var(--sjs-base-unit, var(--base-unit, 8px))));
2915
2954
  justify-content: flex-end;
2916
- margin: calc(-1 * var(--sjs-base-unit, var(--base-unit, 8px))) 0;
2955
+ margin: calc(-1 * (var(--sjs-base-unit, var(--base-unit, 8px)))) 0;
2917
2956
  }
2918
2957
  .sd-action-title-bar .sv-action {
2919
2958
  flex: 0 0 auto;
@@ -2928,22 +2967,22 @@ textarea.sd-input:disabled:not(.sd-input--disabled) {
2928
2967
  font-family: var(--sjs-font-questiondescription-family, var(--font-family));
2929
2968
  font-weight: var(--sjs-font-questiondescription-weight, 400);
2930
2969
  color: var(--sjs-font-questiondescription-color, var(--sjs-general-forecolor-light, rgba(0, 0, 0, 0.45)));
2931
- font-size: var(--sjs-font-questiondescription-size, calc(1 * var(--sjs-font-size, var(--sjs-font-size, 16px))));
2932
- line-height: calc(1.5 * var(--sjs-font-questiondescription-size, calc(1 * var(--sjs-font-size, var(--sjs-font-size, 16px)))));
2970
+ font-size: var(--sjs-font-questiondescription-size, var(--sjs-font-size, 16px));
2971
+ line-height: calc(1.5 * (var(--sjs-font-questiondescription-size, var(--sjs-font-size, 16px))));
2933
2972
  white-space: normal;
2934
2973
  word-break: break-word;
2935
2974
  }
2936
2975
 
2937
2976
  .sd-description.sd-question__description--under-input {
2938
- padding-top: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
2977
+ padding-top: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
2939
2978
  }
2940
2979
 
2941
2980
  .sd-element__header .sd-description {
2942
- margin-top: calc(0.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
2981
+ margin-top: calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
2943
2982
  }
2944
2983
 
2945
2984
  .sd-item {
2946
- padding: calc(1.5 * var(--sjs-base-unit, var(--base-unit, 8px))) 0;
2985
+ padding: calc(1.5 * (var(--sjs-base-unit, var(--base-unit, 8px)))) 0;
2947
2986
  }
2948
2987
 
2949
2988
  .sd-item--disabled.sd-item--disabled .sd-item__decorator,
@@ -2951,14 +2990,14 @@ textarea.sd-input:disabled:not(.sd-input--disabled) {
2951
2990
  display: flex;
2952
2991
  align-items: center;
2953
2992
  justify-content: center;
2954
- width: calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
2955
- height: calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
2993
+ width: calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
2994
+ height: calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
2956
2995
  box-sizing: border-box;
2957
2996
  background-color: var(--sjs-editorpanel-backcolor, var(--sjs-editor-background, var(--sjs-general-backcolor-dim-light, var(--background-dim-light, #f9f9f9))));
2958
2997
  box-shadow: var(--sjs-shadow-inner, inset 0px 1px 2px 0px rgba(0, 0, 0, 0.15));
2959
2998
  border: none;
2960
2999
  flex-shrink: 0;
2961
- margin-top: calc((1.5 * var(--sjs-font-editorfont-size, calc(1 * var(--sjs-font-size, var(--sjs-font-size, 16px)))) - 3 * var(--sjs-base-unit, var(--base-unit, 8px))) / 2);
3000
+ margin-top: calc((1.5 * (var(--sjs-font-editorfont-size, var(--sjs-font-size, 16px))) - 3 * (var(--sjs-base-unit, var(--base-unit, 8px)))) / 2);
2962
3001
  }
2963
3002
 
2964
3003
  .sd-item--checked .sd-item__decorator {
@@ -2984,8 +3023,8 @@ textarea.sd-input:disabled:not(.sd-input--disabled) {
2984
3023
  font-family: var(--sjs-font-editorfont-family, var(--font-family));
2985
3024
  font-style: normal;
2986
3025
  font-weight: var(--sjs-font-editorfont-weight, 400);
2987
- line-height: calc(1.5 * var(--sjs-font-editorfont-size, calc(1 * var(--sjs-font-size, var(--sjs-font-size, 16px)))));
2988
- font-size: var(--sjs-font-editorfont-size, calc(1 * var(--sjs-font-size, var(--sjs-font-size, 16px))));
3026
+ line-height: calc(1.5 * (var(--sjs-font-editorfont-size, var(--sjs-font-size, 16px))));
3027
+ font-size: var(--sjs-font-editorfont-size, var(--sjs-font-size, 16px));
2989
3028
  color: var(--sjs-font-editorfont-color, var(--sjs-general-forecolor, rgba(0, 0, 0, 0.91)));
2990
3029
  white-space: normal;
2991
3030
  word-break: break-word;
@@ -3020,7 +3059,7 @@ textarea.sd-input:disabled:not(.sd-input--disabled) {
3020
3059
  padding: 0;
3021
3060
  display: flex;
3022
3061
  flex-wrap: wrap;
3023
- column-gap: calc(4 * var(--sjs-base-unit, var(--base-unit, 8px)));
3062
+ column-gap: calc(4 * (var(--sjs-base-unit, var(--base-unit, 8px))));
3024
3063
  }
3025
3064
 
3026
3065
  .sd-selectbase--multi-column {
@@ -3031,7 +3070,7 @@ textarea.sd-input:disabled:not(.sd-input--disabled) {
3031
3070
  .sd-selectbase__label {
3032
3071
  display: inline-flex;
3033
3072
  position: relative;
3034
- gap: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
3073
+ gap: var(--sjs-base-unit, var(--base-unit, 8px));
3035
3074
  vertical-align: top;
3036
3075
  }
3037
3076
 
@@ -3047,7 +3086,7 @@ textarea.sd-input:disabled:not(.sd-input--disabled) {
3047
3086
  }
3048
3087
 
3049
3088
  .sd-selectbase__column:not(:last-child) {
3050
- padding-right: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
3089
+ padding-right: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
3051
3090
  }
3052
3091
 
3053
3092
  .sd-selectbase__column.sv-q-column-1 {
@@ -3055,13 +3094,13 @@ textarea.sd-input:disabled:not(.sd-input--disabled) {
3055
3094
  }
3056
3095
 
3057
3096
  .sd-checkbox__decorator {
3058
- border-radius: calc(0.5 * var(--sjs-corner-radius, 4px));
3097
+ border-radius: calc(0.5 * (var(--sjs-corner-radius, 4px)));
3059
3098
  }
3060
3099
 
3061
3100
  .sd-checkbox__svg {
3062
3101
  display: none;
3063
- width: calc(2.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
3064
- height: calc(2.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
3102
+ width: calc(2.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
3103
+ height: calc(2.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
3065
3104
  }
3066
3105
 
3067
3106
  .sd-checkbox--checked .sd-checkbox__svg {
@@ -3086,8 +3125,8 @@ textarea.sd-input:disabled:not(.sd-input--disabled) {
3086
3125
  .sd-radio--checked .sd-radio__decorator:after {
3087
3126
  content: " ";
3088
3127
  display: block;
3089
- width: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
3090
- height: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
3128
+ width: var(--sjs-base-unit, var(--base-unit, 8px));
3129
+ height: var(--sjs-base-unit, var(--base-unit, 8px));
3091
3130
  border-radius: 50%;
3092
3131
  background-color: var(--sjs-primary-forecolor, var(--primary-foreground, #fff));
3093
3132
  }
@@ -3125,12 +3164,12 @@ textarea.sd-input:disabled:not(.sd-input--disabled) {
3125
3164
  }
3126
3165
 
3127
3166
  .sd-matrix__text {
3128
- padding: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
3167
+ padding: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
3129
3168
  }
3130
3169
 
3131
3170
  .sd-matrix__text--checked {
3132
3171
  background-color: var(--sjs-primary-backcolor-light, var(--primary-light, rgba(25, 179, 148, 0.1)));
3133
- padding: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
3172
+ padding: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
3134
3173
  }
3135
3174
 
3136
3175
  .sd-matrix__cell:first-of-type {
@@ -3149,14 +3188,14 @@ textarea.sd-input:disabled:not(.sd-input--disabled) {
3149
3188
 
3150
3189
  .sd-rating {
3151
3190
  overflow-x: auto;
3152
- min-height: calc(6 * var(--sjs-base-unit, var(--base-unit, 8px)));
3191
+ min-height: calc(6 * (var(--sjs-base-unit, var(--base-unit, 8px))));
3153
3192
  }
3154
3193
  .sd-rating fieldset {
3155
3194
  display: flex;
3156
3195
  border: none;
3157
3196
  padding: 0 0 2px 0;
3158
3197
  flex-wrap: nowrap;
3159
- gap: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
3198
+ gap: var(--sjs-base-unit, var(--base-unit, 8px));
3160
3199
  margin-inline-start: 0;
3161
3200
  align-items: center;
3162
3201
  }
@@ -3165,36 +3204,36 @@ textarea.sd-input:disabled:not(.sd-input--disabled) {
3165
3204
  }
3166
3205
 
3167
3206
  .sd-rating--small {
3168
- min-height: calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
3207
+ min-height: calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
3169
3208
  margin: auto;
3170
3209
  }
3171
3210
  .sd-rating--small fieldset {
3172
3211
  padding: 0;
3173
- gap: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
3212
+ gap: var(--sjs-base-unit, var(--base-unit, 8px));
3174
3213
  }
3175
3214
 
3176
3215
  .sd-rating__item {
3177
3216
  position: relative;
3178
3217
  background: var(--sjs-questionpanel-backcolor, var(--sjs-question-background, var(--sjs-general-backcolor, var(--background, #fff))));
3179
3218
  box-shadow: var(--sjs-shadow-small, 0px 1px 2px 0px rgba(0, 0, 0, 0.15));
3180
- border-radius: calc(12.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
3219
+ border-radius: calc(12.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
3181
3220
  white-space: nowrap;
3182
- padding: calc(0.5 * var(--sjs-base-unit, var(--base-unit, 8px))) calc(2.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
3183
- height: calc(6 * var(--sjs-base-unit, var(--base-unit, 8px)));
3221
+ padding: calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px)))) calc(2.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
3222
+ height: calc(6 * (var(--sjs-base-unit, var(--base-unit, 8px))));
3184
3223
  display: flex;
3185
3224
  justify-content: center;
3186
3225
  align-items: center;
3187
3226
  box-sizing: border-box;
3188
- min-width: calc(6 * var(--sjs-base-unit, var(--base-unit, 8px)));
3227
+ min-width: calc(6 * (var(--sjs-base-unit, var(--base-unit, 8px))));
3189
3228
  text-align: center;
3190
3229
  border: 2px solid transparent;
3191
3230
  color: var(--sjs-general-forecolor, var(--foreground, #161616));
3192
3231
  fill: var(--sjs-general-forecolor, var(--foreground, #161616));
3193
- font-size: calc(1 * var(--sjs-font-size, 16px));
3232
+ font-size: var(--sjs-font-size, 16px);
3194
3233
  }
3195
3234
 
3196
3235
  .sd-rating__item--fixed-size {
3197
- width: calc(6 * var(--sjs-base-unit, var(--base-unit, 8px)));
3236
+ width: calc(6 * (var(--sjs-base-unit, var(--base-unit, 8px))));
3198
3237
  padding: 0;
3199
3238
  }
3200
3239
 
@@ -3249,11 +3288,11 @@ legend + sv-ng-rating-item + .sd-rating__item {
3249
3288
 
3250
3289
  .sd-rating__item-smiley {
3251
3290
  position: relative;
3252
- border-radius: calc(12.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
3291
+ border-radius: calc(12.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
3253
3292
  white-space: nowrap;
3254
- padding: calc(1.25 * var(--sjs-base-unit, var(--base-unit, 8px)));
3293
+ padding: calc(1.25 * (var(--sjs-base-unit, var(--base-unit, 8px))));
3255
3294
  box-sizing: border-box;
3256
- min-width: calc(6 * var(--sjs-base-unit, var(--base-unit, 8px)));
3295
+ min-width: calc(6 * (var(--sjs-base-unit, var(--base-unit, 8px))));
3257
3296
  text-align: center;
3258
3297
  border: 2px solid var(--sjs-border-default, var(--border, #d6d6d6));
3259
3298
  color: var(--sjs-general-forecolor, var(--foreground, #161616));
@@ -3261,18 +3300,18 @@ legend + sv-ng-rating-item + .sd-rating__item {
3261
3300
  }
3262
3301
  .sd-rating__item-smiley svg {
3263
3302
  display: block;
3264
- width: calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
3265
- height: calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
3303
+ width: calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
3304
+ height: calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
3266
3305
  }
3267
3306
 
3268
3307
  .sd-rating__item-smiley--small {
3269
- padding: calc(0.625 * var(--sjs-base-unit, var(--base-unit, 8px)));
3270
- min-width: calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
3308
+ padding: calc(0.625 * (var(--sjs-base-unit, var(--base-unit, 8px))));
3309
+ min-width: calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
3271
3310
  border-width: 1px;
3272
3311
  }
3273
3312
  .sd-rating__item-smiley--small svg {
3274
- width: calc(1.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
3275
- height: calc(1.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
3313
+ width: calc(1.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
3314
+ height: calc(1.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
3276
3315
  }
3277
3316
 
3278
3317
  .sd-rating__item-smiley--small.sd-rating__item-smiley--selected:focus-within {
@@ -3339,22 +3378,22 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
3339
3378
 
3340
3379
  .sd-rating__item-star {
3341
3380
  position: relative;
3342
- width: calc(6 * var(--sjs-base-unit, var(--base-unit, 8px)));
3343
- height: calc(6 * var(--sjs-base-unit, var(--base-unit, 8px)));
3381
+ width: calc(6 * (var(--sjs-base-unit, var(--base-unit, 8px))));
3382
+ height: calc(6 * (var(--sjs-base-unit, var(--base-unit, 8px))));
3344
3383
  }
3345
3384
  .sd-rating__item-star:not(:first-of-type) {
3346
- padding-left: calc(0.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
3347
- margin-left: calc(-0.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
3385
+ padding-left: calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
3386
+ margin-left: calc(-0.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
3348
3387
  }
3349
3388
  .sd-rating__item-star:not(:last-of-type) {
3350
- padding-right: calc(0.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
3351
- margin-right: calc(-0.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
3389
+ padding-right: calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
3390
+ margin-right: calc(-0.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
3352
3391
  }
3353
3392
  .sd-rating__item-star svg {
3354
3393
  stroke: var(--sjs-border-default, var(--border, #d6d6d6));
3355
3394
  fill: none;
3356
- width: calc(6 * var(--sjs-base-unit, var(--base-unit, 8px)));
3357
- height: calc(6 * var(--sjs-base-unit, var(--base-unit, 8px)));
3395
+ width: calc(6 * (var(--sjs-base-unit, var(--base-unit, 8px))));
3396
+ height: calc(6 * (var(--sjs-base-unit, var(--base-unit, 8px))));
3358
3397
  display: block;
3359
3398
  }
3360
3399
  .sd-rating__item-star .sv-star-2 {
@@ -3362,12 +3401,12 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
3362
3401
  }
3363
3402
 
3364
3403
  .sd-rating__item-star--small {
3365
- width: calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
3366
- height: calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
3404
+ width: calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
3405
+ height: calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
3367
3406
  }
3368
3407
  .sd-rating__item-star--small svg {
3369
- width: calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
3370
- height: calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
3408
+ width: calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
3409
+ height: calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
3371
3410
  }
3372
3411
 
3373
3412
  .sd-rating__item-star--selected svg {
@@ -3428,29 +3467,29 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
3428
3467
  font-family: var(--sjs-font-editorfont-family, var(--font-family));
3429
3468
  font-weight: var(--sjs-font-editorfont-weight, 400);
3430
3469
  color: var(--sjs-font-editorfont-color, var(--sjs-general-forecolor, rgba(0, 0, 0, 0.91)));
3431
- font-size: var(--sjs-font-editorfont-size, calc(1 * var(--sjs-font-size, var(--sjs-font-size, 16px))));
3432
- line-height: calc(1.5 * var(--sjs-font-editorfont-size, calc(1 * var(--sjs-font-size, var(--sjs-font-size, 16px)))));
3470
+ font-size: var(--sjs-font-editorfont-size, var(--sjs-font-size, 16px));
3471
+ line-height: calc(1.5 * (var(--sjs-font-editorfont-size, var(--sjs-font-size, 16px))));
3433
3472
  display: inline-block;
3434
3473
  }
3435
3474
  .sd-rating__item-text.sd-rating__item-text.sd-rating__min-text, .sd-rating__item-text.sd-rating__item-text.sd-rating__max-text {
3436
- margin-top: calc(1.25 * var(--sjs-base-unit, var(--base-unit, 8px)));
3437
- margin-bottom: calc(1.25 * var(--sjs-base-unit, var(--base-unit, 8px)));
3475
+ margin-top: calc(1.25 * (var(--sjs-base-unit, var(--base-unit, 8px))));
3476
+ margin-bottom: calc(1.25 * (var(--sjs-base-unit, var(--base-unit, 8px))));
3438
3477
  border: 2px solid transparent;
3439
3478
  color: var(--sjs-general-forecolor-light, var(--foreground-light, #909090));
3440
3479
  }
3441
3480
  .sd-rating__item-text.sd-rating__item-text.sd-rating__min-text {
3442
- margin-right: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
3481
+ margin-right: var(--sjs-base-unit, var(--base-unit, 8px));
3443
3482
  border-left: 0px;
3444
3483
  }
3445
3484
  .sd-rating__item-text.sd-rating__item-text.sd-rating__max-text {
3446
- margin-right: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
3447
- margin-left: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
3485
+ margin-right: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
3486
+ margin-left: var(--sjs-base-unit, var(--base-unit, 8px));
3448
3487
  }
3449
3488
  .sd-rating__item-text.sd-rating__item-text .sv-string-editor {
3450
3489
  white-space: nowrap;
3451
3490
  }
3452
3491
  .sd-rating__item-text.sd-rating__item-text.sd-rating__item--fixed-size {
3453
- min-width: calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
3492
+ min-width: calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
3454
3493
  }
3455
3494
 
3456
3495
  .sd-rating__item--selected .sd-rating__item-text.sd-rating__item-text {
@@ -3465,19 +3504,19 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
3465
3504
  }
3466
3505
 
3467
3506
  .sd-element--with-frame .sv-ranking-item {
3468
- left: calc(-3 * var(--sjs-base-unit, var(--base-unit, 8px)));
3507
+ left: calc(-3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
3469
3508
  }
3470
3509
 
3471
3510
  .sd-element--with-frame .sv-ranking--mobile .sv-ranking-item__icon-container {
3472
3511
  margin-left: 0;
3473
- margin-right: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
3512
+ margin-right: var(--sjs-base-unit, var(--base-unit, 8px));
3474
3513
  }
3475
3514
  .sd-element--with-frame .sv-ranking--mobile .sv-ranking-item {
3476
3515
  left: 0;
3477
3516
  }
3478
3517
 
3479
3518
  .sv-ranking-item__content.sd-ranking-item__content {
3480
- line-height: calc(1.5 * var(--sjs-font-size, 16px));
3519
+ line-height: calc(1.5 * (var(--sjs-font-size, 16px)));
3481
3520
  }
3482
3521
 
3483
3522
  .sv-dragdrop-movedown {
@@ -3520,8 +3559,8 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
3520
3559
  -webkit-appearance: none;
3521
3560
  -moz-appearance: none;
3522
3561
  appearance: none;
3523
- padding-inline-end: calc(6 * var(--sjs-base-unit, var(--base-unit, 8px)));
3524
- padding-inline-start: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
3562
+ padding-inline-end: calc(6 * (var(--sjs-base-unit, var(--base-unit, 8px))));
3563
+ padding-inline-start: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
3525
3564
  opacity: 1;
3526
3565
  display: flex;
3527
3566
  justify-content: space-between;
@@ -3543,20 +3582,24 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
3543
3582
  .sd-dropdown option {
3544
3583
  color: var(--sjs-general-forecolor, var(--foreground, #161616));
3545
3584
  font-family: var(--font-family, var(--font-family));
3546
- font-size: calc(1 * var(--sjs-font-size, 16px));
3585
+ font-size: var(--sjs-font-size, 16px);
3586
+ }
3587
+
3588
+ .sd-dropdown input[readonly] {
3589
+ pointer-events: none;
3547
3590
  }
3548
3591
 
3549
3592
  .sd-dropdown__value {
3550
3593
  width: 100%;
3551
- min-height: calc(1.5 * var(--sjs-font-editorfont-size, calc(1 * var(--sjs-font-size, var(--sjs-font-size, 16px)))));
3594
+ min-height: calc(1.5 * (var(--sjs-font-editorfont-size, var(--sjs-font-size, 16px))));
3552
3595
  overflow: hidden;
3553
3596
  text-overflow: ellipsis;
3554
3597
  white-space: nowrap;
3555
- line-height: calc(1.5 * var(--sjs-font-editorfont-size, calc(1 * var(--sjs-font-size, var(--sjs-font-size, 16px)))));
3598
+ line-height: calc(1.5 * (var(--sjs-font-editorfont-size, var(--sjs-font-size, 16px))));
3556
3599
  font-family: var(--sjs-font-editorfont-family, var(--font-family));
3557
3600
  font-weight: var(--sjs-font-editorfont-weight, 400);
3558
3601
  color: var(--sjs-font-editorfont-color, var(--sjs-general-forecolor, rgba(0, 0, 0, 0.91)));
3559
- font-size: var(--sjs-font-editorfont-size, calc(1 * var(--sjs-font-size, var(--sjs-font-size, 16px))));
3602
+ font-size: var(--sjs-font-editorfont-size, var(--sjs-font-size, 16px));
3560
3603
  position: relative;
3561
3604
  }
3562
3605
 
@@ -3564,26 +3607,26 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
3564
3607
  display: flex;
3565
3608
  justify-content: center;
3566
3609
  align-items: center;
3567
- padding: 0 calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
3610
+ padding: 0 var(--sjs-base-unit, var(--base-unit, 8px));
3568
3611
  margin: auto 0;
3569
3612
  }
3570
3613
 
3571
3614
  .sd-dropdown_chevron-button {
3572
3615
  position: absolute;
3573
- width: calc(5 * var(--sjs-base-unit, var(--base-unit, 8px)));
3616
+ width: calc(5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
3574
3617
  top: 0;
3575
3618
  bottom: 0;
3576
3619
  inset-inline-end: 0;
3577
3620
  display: flex;
3578
3621
  justify-content: center;
3579
3622
  align-items: center;
3580
- padding-inline-end: calc(0.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
3623
+ padding-inline-end: calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
3581
3624
  }
3582
3625
 
3583
3626
  .sd-dropdown_chevron-button-svg,
3584
3627
  .sd-dropdown_clean-button-svg {
3585
- width: calc(1.5 * var(--sjs-font-editorfont-size, calc(1 * var(--sjs-font-size, var(--sjs-font-size, 16px)))));
3586
- height: calc(1.5 * var(--sjs-font-editorfont-size, calc(1 * var(--sjs-font-size, var(--sjs-font-size, 16px)))));
3628
+ width: calc(1.5 * (var(--sjs-font-editorfont-size, var(--sjs-font-size, 16px))));
3629
+ height: calc(1.5 * (var(--sjs-font-editorfont-size, var(--sjs-font-size, 16px))));
3587
3630
  }
3588
3631
 
3589
3632
  .sd-input.sd-dropdown:focus-within {
@@ -3606,8 +3649,8 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
3606
3649
  font-family: var(--sjs-font-editorfont-family, var(--font-family));
3607
3650
  font-weight: var(--sjs-font-editorfont-weight, 400);
3608
3651
  color: var(--sjs-font-editorfont-color, var(--sjs-general-forecolor, rgba(0, 0, 0, 0.91)));
3609
- font-size: var(--sjs-font-editorfont-size, calc(1 * var(--sjs-font-size, var(--sjs-font-size, 16px))));
3610
- line-height: calc(1.5 * var(--sjs-font-editorfont-size, calc(1 * var(--sjs-font-size, var(--sjs-font-size, 16px)))));
3652
+ font-size: var(--sjs-font-editorfont-size, var(--sjs-font-size, 16px));
3653
+ line-height: calc(1.5 * (var(--sjs-font-editorfont-size, var(--sjs-font-size, 16px))));
3611
3654
  background-color: transparent;
3612
3655
  overflow: hidden;
3613
3656
  text-overflow: ellipsis;
@@ -3654,26 +3697,26 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
3654
3697
  }
3655
3698
 
3656
3699
  .sv-popup.sv-popup--dropdown.sv-popup--dropdown .sd-list__item-body {
3657
- line-height: calc(1.5 * var(--sjs-font-editorfont-size, calc(1 * var(--sjs-font-size, var(--sjs-font-size, 16px)))));
3658
- font-size: var(--sjs-font-editorfont-size, calc(1 * var(--sjs-font-size, var(--sjs-font-size, 16px))));
3700
+ line-height: calc(1.5 * (var(--sjs-font-editorfont-size, var(--sjs-font-size, 16px))));
3701
+ font-size: var(--sjs-font-editorfont-size, var(--sjs-font-size, 16px));
3659
3702
  }
3660
3703
 
3661
3704
  [dir=rtl] .sd-dropdown,
3662
3705
  [style*="direction:rtl"] .sd-dropdown,
3663
3706
  [style*="direction: rtl"] .sd-dropdown {
3664
- background-position: left calc(1.5 * var(--sjs-base-unit, var(--base-unit, 8px))) top 50%, 0 0;
3707
+ background-position: left calc(1.5 * (var(--sjs-base-unit, var(--base-unit, 8px)))) top 50%, 0 0;
3665
3708
  }
3666
3709
 
3667
3710
  .sd-input.sd-tagbox:not(.sd-tagbox--empty):not(.sd-input--disabled) {
3668
3711
  height: auto;
3669
- padding: calc(0.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
3670
- padding-inline-end: calc(6 * var(--sjs-base-unit, var(--base-unit, 8px)));
3671
- padding-inline-start: calc(0.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
3712
+ padding: calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
3713
+ padding-inline-end: calc(6 * (var(--sjs-base-unit, var(--base-unit, 8px))));
3714
+ padding-inline-start: calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
3672
3715
  }
3673
3716
 
3674
3717
  .sd-tagbox_clean-button {
3675
- height: calc(1.5 * var(--sjs-font-editorfont-size, calc(1 * var(--sjs-font-size, var(--sjs-font-size, 16px)))));
3676
- padding: calc(0.5 * var(--sjs-font-editorfont-size, calc(1 * var(--sjs-font-size, var(--sjs-font-size, 16px)))));
3718
+ height: calc(1.5 * (var(--sjs-font-editorfont-size, var(--sjs-font-size, 16px))));
3719
+ padding: calc(0.5 * (var(--sjs-font-editorfont-size, var(--sjs-font-size, 16px))));
3677
3720
  margin: auto 0;
3678
3721
  }
3679
3722
 
@@ -3685,14 +3728,14 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
3685
3728
  position: relative;
3686
3729
  display: flex;
3687
3730
  align-items: center;
3688
- padding: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px))) calc(1.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
3731
+ padding: var(--sjs-base-unit, var(--base-unit, 8px)) calc(1.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
3689
3732
  background-color: var(--sjs-primary-backcolor, var(--primary, #19b394));
3690
- border-radius: calc(0.5 * var(--sjs-corner-radius, 4px));
3733
+ border-radius: calc(0.5 * (var(--sjs-corner-radius, 4px)));
3691
3734
  }
3692
3735
 
3693
3736
  .sv-tagbox__item-text {
3694
3737
  color: var(--sjs-primary-forecolor, var(--primary-foreground, #fff));
3695
- min-width: calc(5.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
3738
+ min-width: calc(5.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
3696
3739
  text-align: center;
3697
3740
  font-weight: 600;
3698
3741
  }
@@ -3707,17 +3750,17 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
3707
3750
  .sd-tagbox-item_clean-button {
3708
3751
  display: none;
3709
3752
  position: absolute;
3710
- inset-inline-end: calc(1.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
3753
+ inset-inline-end: calc(1.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
3711
3754
  padding: 0;
3712
- padding-inline-start: calc(4 * var(--sjs-base-unit, var(--base-unit, 8px)));
3755
+ padding-inline-start: calc(4 * (var(--sjs-base-unit, var(--base-unit, 8px))));
3713
3756
  background: linear-gradient(270deg, var(--sjs-primary-backcolor, var(--primary, #19b394)) 53.12%, rgba(25, 179, 148, 0) 100%);
3714
3757
  }
3715
3758
 
3716
3759
  .sd-tagbox-item_clean-button-svg {
3717
3760
  display: block;
3718
- padding: calc(0.25 * var(--sjs-font-editorfont-size, calc(1 * var(--sjs-font-size, var(--sjs-font-size, 16px)))));
3719
- width: calc(1 * var(--sjs-font-editorfont-size, calc(1 * var(--sjs-font-size, var(--sjs-font-size, 16px)))));
3720
- height: calc(1 * var(--sjs-font-editorfont-size, calc(1 * var(--sjs-font-size, var(--sjs-font-size, 16px)))));
3761
+ padding: calc(0.25 * (var(--sjs-font-editorfont-size, var(--sjs-font-size, 16px))));
3762
+ width: var(--sjs-font-editorfont-size, var(--sjs-font-size, 16px));
3763
+ height: var(--sjs-font-editorfont-size, var(--sjs-font-size, 16px));
3721
3764
  }
3722
3765
 
3723
3766
  .sd-tagbox-item_clean-button-svg:hover {
@@ -3731,7 +3774,7 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
3731
3774
 
3732
3775
  .sd-tagbox__value.sd-dropdown__value {
3733
3776
  position: relative;
3734
- gap: calc(0.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
3777
+ gap: calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
3735
3778
  display: flex;
3736
3779
  flex-wrap: wrap;
3737
3780
  flex-grow: 1;
@@ -3782,14 +3825,14 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
3782
3825
  }
3783
3826
 
3784
3827
  .sd-dropdown__hint-suffix.sd-tagbox__hint-suffix {
3785
- line-height: calc(1.5 * var(--sjs-font-editorfont-size, calc(1 * var(--sjs-font-size, var(--sjs-font-size, 16px)))));
3828
+ line-height: calc(1.5 * (var(--sjs-font-editorfont-size, var(--sjs-font-size, 16px))));
3786
3829
  height: 100%;
3787
3830
  display: flex;
3788
3831
  align-items: center;
3789
3832
  }
3790
3833
 
3791
3834
  .sd-dropdown__hint-prefix.sd-tagbox__hint-prefix {
3792
- line-height: calc(1.5 * var(--sjs-font-editorfont-size, calc(1 * var(--sjs-font-size, var(--sjs-font-size, 16px)))));
3835
+ line-height: calc(1.5 * (var(--sjs-font-editorfont-size, var(--sjs-font-size, 16px))));
3793
3836
  height: 100%;
3794
3837
  display: flex;
3795
3838
  align-items: center;
@@ -3800,7 +3843,7 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
3800
3843
  flex-wrap: wrap;
3801
3844
  padding: 0;
3802
3845
  border: none;
3803
- gap: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
3846
+ gap: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
3804
3847
  width: 100%;
3805
3848
  margin: 0;
3806
3849
  }
@@ -3812,12 +3855,12 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
3812
3855
 
3813
3856
  @supports not (aspect-ratio: 1/1) {
3814
3857
  .sd-imagepicker > div {
3815
- margin-right: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
3858
+ margin-right: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
3816
3859
  }
3817
3860
  }
3818
3861
  .sd-imagepicker__item img,
3819
3862
  .sd-imagepicker__item .sd-imagepicker__image-container > div {
3820
- border-radius: calc(1 * var(--sjs-corner-radius, 4px));
3863
+ border-radius: var(--sjs-corner-radius, 4px);
3821
3864
  background-color: var(--sjs-general-backcolor-dim-light, var(--background-dim-light, #f9f9f9));
3822
3865
  }
3823
3866
 
@@ -3835,9 +3878,9 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
3835
3878
  .sd-imagepicker__check-decorator {
3836
3879
  display: none;
3837
3880
  position: absolute;
3838
- top: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
3839
- right: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
3840
- padding: calc(1.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
3881
+ top: var(--sjs-base-unit, var(--base-unit, 8px));
3882
+ right: var(--sjs-base-unit, var(--base-unit, 8px));
3883
+ padding: calc(1.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
3841
3884
  box-sizing: border-box;
3842
3885
  border-radius: 100%;
3843
3886
  background-color: var(--sjs-general-backcolor, var(--background, #fff));
@@ -3846,8 +3889,8 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
3846
3889
 
3847
3890
  .sd-imagepicker__check-icon {
3848
3891
  display: block;
3849
- width: calc(1.5 * var(--sjs-font-editorfont-size, calc(1 * var(--sjs-font-size, var(--sjs-font-size, 16px)))));
3850
- height: calc(1.5 * var(--sjs-font-editorfont-size, calc(1 * var(--sjs-font-size, var(--sjs-font-size, 16px)))));
3892
+ width: calc(1.5 * (var(--sjs-font-editorfont-size, var(--sjs-font-size, 16px))));
3893
+ height: calc(1.5 * (var(--sjs-font-editorfont-size, var(--sjs-font-size, 16px))));
3851
3894
  fill: var(--sjs-primary-backcolor, var(--primary, #19b394));
3852
3895
  }
3853
3896
 
@@ -3864,7 +3907,7 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
3864
3907
  width: 100%;
3865
3908
  height: 100%;
3866
3909
  background-color: var(--sjs-special-red-light, var(--red-light, rgba(230, 10, 62, 0.1)));
3867
- border-radius: calc(1 * var(--sjs-corner-radius, 4px));
3910
+ border-radius: var(--sjs-corner-radius, 4px);
3868
3911
  background: linear-gradient(0deg, var(--sjs-special-red-light, var(--red-light, rgba(230, 10, 62, 0.1))), var(--sjs-special-red-light, var(--red-light, rgba(230, 10, 62, 0.1))));
3869
3912
  }
3870
3913
 
@@ -3880,9 +3923,9 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
3880
3923
  }
3881
3924
 
3882
3925
  .sd-imagepicker__text {
3883
- font-size: var(--sjs-font-editorfont-size, calc(1 * var(--sjs-font-size, var(--sjs-font-size, 16px))));
3884
- line-height: calc(1.5 * var(--sjs-font-editorfont-size, calc(1 * var(--sjs-font-size, var(--sjs-font-size, 16px)))));
3885
- margin-top: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
3926
+ font-size: var(--sjs-font-editorfont-size, var(--sjs-font-size, 16px));
3927
+ line-height: calc(1.5 * (var(--sjs-font-editorfont-size, var(--sjs-font-size, 16px))));
3928
+ margin-top: var(--sjs-base-unit, var(--base-unit, 8px));
3886
3929
  color: var(--sjs-general-forecolor, var(--foreground, #161616));
3887
3930
  }
3888
3931
 
@@ -3893,8 +3936,8 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
3893
3936
  }
3894
3937
 
3895
3938
  .sd-imagepicker__no-image-svg {
3896
- height: calc(6 * var(--sjs-base-unit, var(--base-unit, 8px)));
3897
- width: calc(6 * var(--sjs-base-unit, var(--base-unit, 8px)));
3939
+ height: calc(6 * (var(--sjs-base-unit, var(--base-unit, 8px))));
3940
+ width: calc(6 * (var(--sjs-base-unit, var(--base-unit, 8px))));
3898
3941
  margin: auto;
3899
3942
  }
3900
3943
  .sd-imagepicker__no-image-svg use {
@@ -3904,7 +3947,7 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
3904
3947
  .sd-imagepicker__column {
3905
3948
  display: flex;
3906
3949
  flex-direction: column;
3907
- gap: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
3950
+ gap: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
3908
3951
  align-items: flex-start;
3909
3952
  padding-right: 0;
3910
3953
  }
@@ -3916,19 +3959,19 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
3916
3959
  .sd-image__image {
3917
3960
  display: block;
3918
3961
  max-width: 100%;
3919
- border-radius: calc(1 * var(--sjs-corner-radius, 4px));
3962
+ border-radius: var(--sjs-corner-radius, 4px);
3920
3963
  }
3921
3964
 
3922
3965
  .sd-image__image--adaptive {
3923
3966
  width: 100%;
3924
3967
  height: auto;
3925
- max-width: calc(80 * var(--sjs-base-unit, var(--base-unit, 8px)));
3968
+ max-width: calc(80 * (var(--sjs-base-unit, var(--base-unit, 8px))));
3926
3969
  }
3927
3970
 
3928
3971
  .sd-image__no-image {
3929
3972
  background: var(--sjs-general-backcolor-dim-light, var(--background-dim-light, #f9f9f9));
3930
- min-width: calc(5 * var(--sjs-base-unit, var(--base-unit, 8px)));
3931
- min-height: calc(27.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
3973
+ min-width: calc(5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
3974
+ min-height: calc(27.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
3932
3975
  width: 100%;
3933
3976
  height: 100%;
3934
3977
  position: relative;
@@ -4021,16 +4064,16 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
4021
4064
  .sd-html button {
4022
4065
  display: flex;
4023
4066
  align-items: center;
4024
- padding: calc(1.5 * var(--sjs-base-unit, var(--base-unit, 8px))) calc(4 * var(--sjs-base-unit, var(--base-unit, 8px)));
4067
+ padding: calc(1.5 * (var(--sjs-base-unit, var(--base-unit, 8px)))) calc(4 * (var(--sjs-base-unit, var(--base-unit, 8px))));
4025
4068
  vertical-align: baseline;
4026
4069
  text-align: center;
4027
4070
  background-color: var(--sjs-general-backcolor, var(--background, #fff));
4028
4071
  box-shadow: var(--sjs-shadow-small, 0px 1px 2px 0px rgba(0, 0, 0, 0.15));
4029
4072
  border: none;
4030
- border-radius: calc(0.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
4073
+ border-radius: calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
4031
4074
  cursor: pointer;
4032
4075
  user-select: none;
4033
- outline: solid calc(0.25 * var(--sjs-base-unit, var(--base-unit, 8px))) transparent;
4076
+ outline: solid calc(0.25 * (var(--sjs-base-unit, var(--base-unit, 8px)))) transparent;
4034
4077
  }
4035
4078
  .sd-html button:hover {
4036
4079
  background-color: var(--sjs-questionpanel-hovercolor, var(--sjs-general-backcolor-dark, rgb(248, 248, 248)));
@@ -4047,13 +4090,13 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
4047
4090
  font-weight: 600;
4048
4091
  font-style: normal;
4049
4092
  font-family: var(--font-family, var(--font-family));
4050
- font-size: var(--sjs-font-questiontitle-size, calc(1 * var(--sjs-font-size, var(--sjs-font-size, 16px))));
4051
- line-height: calc(1.5 * var(--sjs-font-questiontitle-size, calc(1 * var(--sjs-font-size, var(--sjs-font-size, 16px)))));
4093
+ font-size: var(--sjs-font-questiontitle-size, var(--sjs-font-size, 16px));
4094
+ line-height: calc(1.5 * (var(--sjs-font-questiontitle-size, var(--sjs-font-size, 16px))));
4052
4095
  }
4053
4096
 
4054
4097
  .sd-expression {
4055
4098
  color: var(--sjs-general-forecolor, var(--foreground, #161616));
4056
- font-size: calc(1 * var(--sjs-font-size, 16px));
4099
+ font-size: var(--sjs-font-size, 16px);
4057
4100
  }
4058
4101
 
4059
4102
  .sd-progress {
@@ -4071,43 +4114,43 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
4071
4114
 
4072
4115
  .sd-progress__text {
4073
4116
  position: absolute;
4074
- margin-top: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
4075
- right: calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
4117
+ margin-top: var(--sjs-base-unit, var(--base-unit, 8px));
4118
+ right: calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
4076
4119
  color: var(--sjs-general-forecolor-light, var(--foreground-light, #909090));
4077
- font-size: calc(0.75 * var(--sjs-font-size, 16px));
4078
- line-height: calc(1 * var(--sjs-font-size, 16px));
4120
+ font-size: calc(0.75 * (var(--sjs-font-size, 16px)));
4121
+ line-height: var(--sjs-font-size, 16px);
4079
4122
  font-weight: 600;
4080
4123
  }
4081
- @media only screen and (min-width: calc(125 * var(--sjs-base-unit, var(--base-unit, 8px)))) {
4124
+ @media only screen and (min-width: calc(125 * (var(--sjs-base-unit, var(--base-unit, 8px))))) {
4082
4125
  .sd-progress__text {
4083
4126
  margin-left: 5%;
4084
4127
  }
4085
4128
  }
4086
- @media only screen and (max-width: calc(125 * var(--sjs-base-unit, var(--base-unit, 8px)))) {
4129
+ @media only screen and (max-width: calc(125 * (var(--sjs-base-unit, var(--base-unit, 8px))))) {
4087
4130
  .sd-progress__text {
4088
4131
  margin-left: 10px;
4089
4132
  }
4090
4133
  }
4091
4134
 
4092
4135
  .sd-body__progress--top {
4093
- margin-bottom: calc(4 * var(--sjs-base-unit, var(--base-unit, 8px)));
4136
+ margin-bottom: calc(4 * (var(--sjs-base-unit, var(--base-unit, 8px))));
4094
4137
  position: sticky;
4095
4138
  top: 0;
4096
4139
  z-index: 50;
4097
4140
  }
4098
4141
 
4099
4142
  .sd-body__progress--bottom .sd-progress__text {
4100
- margin-top: calc(-3.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
4143
+ margin-top: calc(-3.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
4101
4144
  }
4102
4145
 
4103
4146
  .sd-boolean {
4104
4147
  display: flex;
4105
4148
  width: max-content;
4106
4149
  position: relative;
4107
- gap: calc(0.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
4108
- padding: calc(0.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
4150
+ gap: calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
4151
+ padding: calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
4109
4152
  background-color: var(--sjs-editorpanel-backcolor, var(--sjs-editor-background, var(--sjs-general-backcolor-dim-light, var(--background-dim-light, #f9f9f9))));
4110
- border-radius: calc(12.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
4153
+ border-radius: calc(12.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
4111
4154
  box-shadow: var(--sjs-shadow-inner, inset 0px 1px 2px 0px rgba(0, 0, 0, 0.15));
4112
4155
  }
4113
4156
  .sd-boolean.sd-boolean--allowhover:focus-within {
@@ -4119,15 +4162,15 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
4119
4162
  display: block;
4120
4163
  font-family: var(--sjs-font-editorfont-family, var(--font-family));
4121
4164
  font-weight: var(--sjs-font-editorfont-weight, 400);
4122
- font-size: var(--sjs-font-editorfont-size, calc(1 * var(--sjs-font-size, var(--sjs-font-size, 16px))));
4165
+ font-size: var(--sjs-font-editorfont-size, var(--sjs-font-size, 16px));
4123
4166
  color: var(--sjs-general-forecolor-light, var(--foreground-light, #909090));
4124
- line-height: calc(1.5 * var(--sjs-font-editorfont-size, calc(1 * var(--sjs-font-size, var(--sjs-font-size, 16px)))));
4125
- padding: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px))) calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
4167
+ line-height: calc(1.5 * (var(--sjs-font-editorfont-size, var(--sjs-font-size, 16px))));
4168
+ padding: var(--sjs-base-unit, var(--base-unit, 8px)) calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
4126
4169
  }
4127
4170
 
4128
4171
  .sd-boolean__switch {
4129
4172
  display: flex;
4130
- padding: calc(0.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
4173
+ padding: calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
4131
4174
  align-items: center;
4132
4175
  position: absolute;
4133
4176
  left: 0;
@@ -4135,7 +4178,7 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
4135
4178
  width: 100%;
4136
4179
  height: 100%;
4137
4180
  box-sizing: border-box;
4138
- border-radius: calc(12.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
4181
+ border-radius: calc(12.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
4139
4182
  }
4140
4183
 
4141
4184
  .sd-boolean.sd-boolean--checked .sd-boolean__label--true,
@@ -4157,7 +4200,7 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
4157
4200
  .sd-boolean__thumb {
4158
4201
  background-color: var(--sjs-questionpanel-backcolor, var(--sjs-question-background, var(--sjs-general-backcolor, var(--background, #fff))));
4159
4202
  box-shadow: var(--sjs-shadow-small, 0px 1px 2px 0px rgba(0, 0, 0, 0.15));
4160
- border-radius: calc(12.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
4203
+ border-radius: calc(12.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
4161
4204
  transition-duration: 0.2s;
4162
4205
  transition-property: margin-left, transform;
4163
4206
  transition-timing-function: linear;
@@ -4189,7 +4232,7 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
4189
4232
 
4190
4233
  .sd-boolean.sd-boolean--allowhover .sd-boolean__thumb-ghost:hover {
4191
4234
  background-color: var(--sjs-editorpanel-hovercolor, var(--sjs-general-backcolor-dim-dark, rgb(243, 243, 243)));
4192
- border-radius: calc(12.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
4235
+ border-radius: calc(12.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
4193
4236
  }
4194
4237
 
4195
4238
  .sd-boolean--error {
@@ -4260,8 +4303,8 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
4260
4303
  }
4261
4304
  .sd-paneldynamic__footer .sd-paneldynamic__prev-btn svg,
4262
4305
  .sd-paneldynamic__footer .sd-paneldynamic__next-btn svg {
4263
- width: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
4264
- height: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
4306
+ width: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
4307
+ height: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
4265
4308
  }
4266
4309
  .sd-paneldynamic__footer .sd-paneldynamic__add-btn,
4267
4310
  .sd-paneldynamic__footer .sd-paneldynamic__progress-text,
@@ -4279,21 +4322,21 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
4279
4322
  display: flex;
4280
4323
  align-items: center;
4281
4324
  margin-left: auto;
4282
- margin-right: calc(-1 * var(--sjs-base-unit, var(--base-unit, 8px)));
4325
+ margin-right: calc(-1 * (var(--sjs-base-unit, var(--base-unit, 8px))));
4283
4326
  }
4284
4327
 
4285
4328
  .sd-paneldynamic__progress-text {
4286
- font-size: var(--sjs-font-questiontitle-size, calc(1 * var(--sjs-font-size, var(--sjs-font-size, 16px))));
4287
- line-height: calc(1.5 * var(--sjs-font-questiontitle-size, calc(1 * var(--sjs-font-size, var(--sjs-font-size, 16px)))));
4329
+ font-size: var(--sjs-font-questiontitle-size, var(--sjs-font-size, 16px));
4330
+ line-height: calc(1.5 * (var(--sjs-font-questiontitle-size, var(--sjs-font-size, 16px))));
4288
4331
  color: var(--sjs-general-forecolor-light, var(--foreground-light, #909090));
4289
4332
  margin: 0;
4290
- margin-right: calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
4333
+ margin-right: calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
4291
4334
  }
4292
4335
 
4293
4336
  .sd-paneldynamic__prev-btn,
4294
4337
  .sd-paneldynamic__next-btn {
4295
- width: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
4296
- height: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
4338
+ width: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
4339
+ height: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
4297
4340
  }
4298
4341
  .sd-paneldynamic__prev-btn .sv-svg-icon,
4299
4342
  .sd-paneldynamic__next-btn .sv-svg-icon {
@@ -4301,12 +4344,12 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
4301
4344
  }
4302
4345
 
4303
4346
  .sd-paneldynamic__prev-btn {
4304
- margin-right: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
4347
+ margin-right: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
4305
4348
  }
4306
4349
 
4307
4350
  .sd-paneldynamic__next-btn {
4308
- margin-left: calc(-1 * var(--sjs-base-unit, var(--base-unit, 8px)));
4309
- margin-right: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
4351
+ margin-left: calc(-1 * (var(--sjs-base-unit, var(--base-unit, 8px))));
4352
+ margin-right: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
4310
4353
  transform: rotate(180deg);
4311
4354
  }
4312
4355
 
@@ -4321,7 +4364,7 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
4321
4364
 
4322
4365
  .sd-paneldynamic__buttons-container .sd-action-bar {
4323
4366
  width: 100%;
4324
- margin: 0 calc(-3 * var(--sjs-base-unit, var(--base-unit, 8px)));
4367
+ margin: 0 calc(-3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
4325
4368
  width: calc(100% + 6 * var(--sjs-base-unit, var(--base-unit, 8px)));
4326
4369
  }
4327
4370
 
@@ -4329,17 +4372,17 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
4329
4372
  border-top: none;
4330
4373
  position: relative;
4331
4374
  top: calc(0.5 * var(--sd-base-vertical-padding));
4332
- margin-right: calc(-3 * var(--sjs-base-unit, var(--base-unit, 8px)));
4375
+ margin-right: calc(-3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
4333
4376
  justify-content: flex-end;
4334
4377
  }
4335
4378
 
4336
4379
  .sd-paneldynamic__panel-footer .sv-action:not(.sv-action--hidden) {
4337
- margin-bottom: calc(-1 * var(--sjs-base-unit, var(--base-unit, 8px)));
4380
+ margin-bottom: calc(-1 * (var(--sjs-base-unit, var(--base-unit, 8px))));
4338
4381
  }
4339
4382
 
4340
4383
  .sd-tabs-toolbar.sv-action-bar {
4341
4384
  align-items: flex-start;
4342
- margin: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px))) 0 -1px calc(-2 * var(--sjs-base-unit, var(--base-unit, 8px)));
4385
+ margin: var(--sjs-base-unit, var(--base-unit, 8px)) 0 -1px calc(-2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
4343
4386
  width: calc(100% + 4 * var(--sjs-base-unit, var(--base-unit, 8px)));
4344
4387
  z-index: 1;
4345
4388
  }
@@ -4357,11 +4400,11 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
4357
4400
  }
4358
4401
 
4359
4402
  .sd-tab-item {
4360
- margin: 0 calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
4403
+ margin: 0 calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
4361
4404
  }
4362
4405
 
4363
4406
  .sd-tab-item {
4364
- padding: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px))) 0 calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
4407
+ padding: var(--sjs-base-unit, var(--base-unit, 8px)) 0 calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
4365
4408
  display: flex;
4366
4409
  -webkit-appearance: none;
4367
4410
  -moz-appearance: none;
@@ -4372,8 +4415,8 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
4372
4415
  background-color: transparent;
4373
4416
  cursor: pointer;
4374
4417
  font-family: var(--font-family, var(--font-family));
4375
- font-size: var(--sjs-font-editorfont-size, calc(1 * var(--sjs-font-size, var(--sjs-font-size, 16px))));
4376
- line-height: calc(1.5 * var(--sjs-font-editorfont-size, calc(1 * var(--sjs-font-size, var(--sjs-font-size, 16px)))));
4418
+ font-size: var(--sjs-font-editorfont-size, var(--sjs-font-size, 16px));
4419
+ line-height: calc(1.5 * (var(--sjs-font-editorfont-size, var(--sjs-font-size, 16px))));
4377
4420
  color: var(--sjs-font-questiondescription-color, var(--sjs-general-forecolor-light, rgba(0, 0, 0, 0.45)));
4378
4421
  overflow-x: hidden;
4379
4422
  white-space: nowrap;
@@ -4388,9 +4431,9 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
4388
4431
  }
4389
4432
 
4390
4433
  .sd-tab-item--icon {
4391
- padding: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
4434
+ padding: var(--sjs-base-unit, var(--base-unit, 8px));
4392
4435
  width: auto;
4393
- border-radius: calc(12.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
4436
+ border-radius: calc(12.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
4394
4437
  }
4395
4438
  .sd-tab-item--icon use {
4396
4439
  fill: var(--sjs-general-forecolor-light, var(--foreground-light, #909090));
@@ -4420,14 +4463,14 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
4420
4463
  }
4421
4464
 
4422
4465
  .sd-tab-item__title {
4423
- line-height: calc(1.5 * var(--sjs-font-size, 16px));
4424
- height: calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
4466
+ line-height: calc(1.5 * (var(--sjs-font-size, 16px)));
4467
+ height: calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
4425
4468
  display: flex;
4426
4469
  align-items: center;
4427
4470
  }
4428
4471
 
4429
4472
  .sd-question__title ~ .sd-tabs-toolbar {
4430
- margin-top: calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
4473
+ margin-top: calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
4431
4474
  }
4432
4475
 
4433
4476
  .sd-paneldynamic__header.sd-element__header.sd-paneldynamic__header-tab {
@@ -4440,14 +4483,14 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
4440
4483
 
4441
4484
  .sd-file {
4442
4485
  position: relative;
4443
- font-size: calc(1 * var(--sjs-font-size, 16px));
4444
- line-height: calc(1.5 * var(--sjs-font-size, 16px));
4445
- min-height: calc(36 * var(--sjs-base-unit, var(--base-unit, 8px)));
4486
+ font-size: var(--sjs-font-size, 16px);
4487
+ line-height: calc(1.5 * (var(--sjs-font-size, 16px)));
4488
+ min-height: calc(36 * (var(--sjs-base-unit, var(--base-unit, 8px))));
4446
4489
  box-sizing: border-box;
4447
- padding: 0 calc(6 * var(--sjs-base-unit, var(--base-unit, 8px)));
4490
+ padding: 0 calc(6 * (var(--sjs-base-unit, var(--base-unit, 8px))));
4448
4491
  }
4449
4492
  .sd-file .sv-action-bar {
4450
- padding: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px))) 0;
4493
+ padding: var(--sjs-base-unit, var(--base-unit, 8px)) 0;
4451
4494
  justify-content: center;
4452
4495
  position: absolute;
4453
4496
  width: 100%;
@@ -4455,12 +4498,12 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
4455
4498
  bottom: 0;
4456
4499
  }
4457
4500
  .sd-file .sv-action-bar .sv-action-bar-item {
4458
- height: calc(4 * var(--sjs-base-unit, var(--base-unit, 8px)));
4501
+ height: calc(4 * (var(--sjs-base-unit, var(--base-unit, 8px))));
4459
4502
  color: var(--sjs-general-forecolor-light, var(--foreground-light, #909090));
4460
- border-radius: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
4503
+ border-radius: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
4461
4504
  }
4462
4505
  .sd-file .sv-action-bar #fileIndex .sv-action-bar-item {
4463
- padding: calc(0.5 * var(--sjs-base-unit, var(--base-unit, 8px))) 0;
4506
+ padding: calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px)))) 0;
4464
4507
  font-weight: 600;
4465
4508
  }
4466
4509
  .sd-file .sv-action-bar #fileIndex .sv-action-bar-item:hover {
@@ -4475,13 +4518,13 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
4475
4518
  flex-direction: column;
4476
4519
  position: absolute;
4477
4520
  position: absolute;
4478
- left: calc(0 * var(--sjs-base-unit, var(--base-unit, 8px)));
4521
+ left: calc(0 * (var(--sjs-base-unit, var(--base-unit, 8px))));
4479
4522
  width: 100%;
4480
4523
  height: 100%;
4481
4524
  box-sizing: border-box;
4482
4525
  justify-content: center;
4483
4526
  align-items: center;
4484
- padding: 0 calc(8 * var(--sjs-base-unit, var(--base-unit, 8px)));
4527
+ padding: 0 calc(8 * (var(--sjs-base-unit, var(--base-unit, 8px))));
4485
4528
  border: 1px dashed var(--sjs-border-default, var(--border, #d6d6d6));
4486
4529
  }
4487
4530
 
@@ -4501,21 +4544,30 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
4501
4544
  word-break: break-word;
4502
4545
  white-space: normal;
4503
4546
  color: var(--sjs-font-questiondescription-color, var(--sjs-general-forecolor-light, rgba(0, 0, 0, 0.45)));
4504
- font-size: var(--sjs-font-editorfont-size, calc(1 * var(--sjs-font-size, var(--sjs-font-size, 16px))));
4505
- line-height: calc(1.5 * var(--sjs-font-editorfont-size, calc(1 * var(--sjs-font-size, var(--sjs-font-size, 16px)))));
4547
+ font-size: var(--sjs-font-editorfont-size, var(--sjs-font-size, 16px));
4548
+ line-height: calc(1.5 * (var(--sjs-font-editorfont-size, var(--sjs-font-size, 16px))));
4506
4549
  }
4507
4550
 
4508
4551
  .sd-root-modern--mobile .sd-file__decorator {
4509
- padding: 0 calc(4 * var(--sjs-base-unit, var(--base-unit, 8px)));
4552
+ padding: 0 calc(4 * (var(--sjs-base-unit, var(--base-unit, 8px))));
4510
4553
  }
4511
4554
 
4512
4555
  .sd-file__choose-btn--text {
4513
4556
  display: block;
4514
- margin-top: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
4515
4557
  font-weight: 600;
4516
4558
  color: var(--sjs-primary-backcolor, var(--primary, #19b394));
4517
4559
  cursor: pointer;
4518
4560
  }
4561
+ .sd-file__choose-btn--text .sv-svg-icon {
4562
+ margin-left: calc(-1 * (var(--sjs-base-unit, var(--base-unit, 8px))));
4563
+ width: 24px;
4564
+ height: 24px;
4565
+ fill: var(--sjs-primary-backcolor, var(--primary, #19b394));
4566
+ }
4567
+
4568
+ .sd-file__choose-btn--icon > span {
4569
+ display: none;
4570
+ }
4519
4571
 
4520
4572
  .sd-file__wrapper {
4521
4573
  width: max-content;
@@ -4525,45 +4577,39 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
4525
4577
  display: none;
4526
4578
  }
4527
4579
 
4528
- .sd-file__choose-btn--text svg {
4580
+ .sd-file__actions-container {
4581
+ margin-top: calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
4582
+ }
4583
+ .sd-file__actions-container .sv-action--hidden {
4529
4584
  display: none;
4530
4585
  }
4531
4586
 
4532
- .sd-file__choose-btn--icon {
4587
+ .sd-file--answered .sd-file__actions-container {
4533
4588
  z-index: 2;
4534
- }
4535
- .sd-file__choose-btn--icon span:first-child {
4536
- display: none;
4589
+ margin-top: 0;
4590
+ gap: var(--sjs-base-unit, var(--base-unit, 8px));
4537
4591
  }
4538
4592
 
4539
- .sd-file__choose-btn--icon,
4540
- .sd-file__clean-btn {
4541
- top: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
4593
+ .sd-file--answered .sd-file__actions-container {
4594
+ top: var(--sjs-base-unit, var(--base-unit, 8px));
4595
+ right: var(--sjs-base-unit, var(--base-unit, 8px));
4542
4596
  position: absolute;
4543
4597
  }
4544
4598
 
4545
- .sd-file__clean-btn {
4546
- z-index: 2;
4547
- inset-inline-end: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
4548
- }
4549
- .sd-file__clean-btn span:first-child {
4550
- display: none;
4551
- }
4552
-
4553
- .sd-file__choose-btn--icon {
4554
- inset-inline-end: calc(1.5 * var(--sjs-font-editorfont-size, calc(1 * var(--sjs-font-size, var(--sjs-font-size, 16px)))) + 5 * var(--sjs-base-unit, var(--base-unit, 8px)));
4599
+ .sd-file--chose-btn--as .sd-file--answered .sd-file__actions-container {
4600
+ inset-inline-end: calc(1.5 * (var(--sjs-font-editorfont-size, var(--sjs-font-size, 16px))) + 5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
4555
4601
  }
4556
4602
 
4557
4603
  .sd-file__list {
4558
4604
  display: flex;
4559
- gap: calc(4 * var(--sjs-base-unit, var(--base-unit, 8px)));
4605
+ gap: calc(4 * (var(--sjs-base-unit, var(--base-unit, 8px))));
4560
4606
  box-sizing: content-box;
4561
4607
  flex-direction: row;
4562
4608
  align-items: stretch;
4563
4609
  justify-content: center;
4564
- padding: calc(10.5 * var(--sjs-base-unit, var(--base-unit, 8px))) 0;
4565
- min-height: calc(15 * var(--sjs-base-unit, var(--base-unit, 8px)));
4566
- max-height: calc(15 * var(--sjs-base-unit, var(--base-unit, 8px)));
4610
+ padding: calc(10.5 * (var(--sjs-base-unit, var(--base-unit, 8px)))) 0;
4611
+ min-height: calc(15 * (var(--sjs-base-unit, var(--base-unit, 8px))));
4612
+ max-height: calc(15 * (var(--sjs-base-unit, var(--base-unit, 8px))));
4567
4613
  width: 100%;
4568
4614
  }
4569
4615
 
@@ -4576,7 +4622,7 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
4576
4622
  margin: 0;
4577
4623
  }
4578
4624
  .sd-file__preview .sd-file__default-image {
4579
- width: calc(7 * var(--sjs-base-unit, var(--base-unit, 8px)));
4625
+ width: calc(7 * (var(--sjs-base-unit, var(--base-unit, 8px))));
4580
4626
  height: 90px;
4581
4627
  }
4582
4628
  .sd-file__preview img:hover + .sd-file__remove-file-button,
@@ -4590,10 +4636,10 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
4590
4636
  }
4591
4637
 
4592
4638
  .sd-file__sign {
4593
- margin-top: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
4639
+ margin-top: var(--sjs-base-unit, var(--base-unit, 8px));
4594
4640
  text-align: center;
4595
- font-size: calc(0.75 * var(--sjs-font-size, 16px));
4596
- line-height: calc(1 * var(--sjs-font-size, 16px));
4641
+ font-size: calc(0.75 * (var(--sjs-font-size, 16px)));
4642
+ line-height: var(--sjs-font-size, 16px);
4597
4643
  }
4598
4644
  .sd-file__sign a {
4599
4645
  display: block;
@@ -4601,11 +4647,11 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
4601
4647
  color: var(--sjs-general-forecolor, var(--foreground, #161616));
4602
4648
  white-space: normal;
4603
4649
  word-break: break-all;
4604
- width: calc(12 * var(--sjs-base-unit, var(--base-unit, 8px)));
4650
+ width: calc(12 * (var(--sjs-base-unit, var(--base-unit, 8px))));
4605
4651
  overflow: hidden;
4606
- max-height: calc(6 * var(--sjs-base-unit, var(--base-unit, 8px)));
4652
+ max-height: calc(6 * (var(--sjs-base-unit, var(--base-unit, 8px))));
4607
4653
  text-overflow: ellipsis;
4608
- line-height: calc(1 * var(--sjs-font-size, 16px));
4654
+ line-height: var(--sjs-font-size, 16px);
4609
4655
  display: -webkit-box;
4610
4656
  -webkit-line-clamp: 3;
4611
4657
  -webkit-box-orient: vertical;
@@ -4622,13 +4668,13 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
4622
4668
  .sd-file__image-wrapper {
4623
4669
  position: relative;
4624
4670
  text-align: center;
4625
- min-width: calc(12 * var(--sjs-base-unit, var(--base-unit, 8px)));
4626
- min-height: calc(12 * var(--sjs-base-unit, var(--base-unit, 8px)));
4671
+ min-width: calc(12 * (var(--sjs-base-unit, var(--base-unit, 8px))));
4672
+ min-height: calc(12 * (var(--sjs-base-unit, var(--base-unit, 8px))));
4627
4673
  }
4628
4674
  .sd-file__image-wrapper img:not(.sd-file__default-image) {
4629
4675
  display: block;
4630
- width: calc(12 * var(--sjs-base-unit, var(--base-unit, 8px)));
4631
- height: calc(12 * var(--sjs-base-unit, var(--base-unit, 8px)));
4676
+ width: calc(12 * (var(--sjs-base-unit, var(--base-unit, 8px))));
4677
+ height: calc(12 * (var(--sjs-base-unit, var(--base-unit, 8px))));
4632
4678
  object-fit: contain;
4633
4679
  background: var(--sjs-general-backcolor-dim, var(--background-dim, #f3f3f3));
4634
4680
  }
@@ -4637,7 +4683,7 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
4637
4683
  display: none;
4638
4684
  }
4639
4685
 
4640
- .sd-file--mobile .sd-file__list {
4686
+ .sd-file--mobile:first-child .sd-file__list {
4641
4687
  height: calc(100% - 4 * var(--sjs-base-unit, var(--base-unit, 8px)));
4642
4688
  }
4643
4689
 
@@ -4691,14 +4737,71 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
4691
4737
  height: 100%;
4692
4738
  }
4693
4739
 
4740
+ .sd-file__change-camera-button {
4741
+ position: absolute;
4742
+ z-index: 2;
4743
+ left: var(--sjs-base-unit, var(--base-unit, 8px));
4744
+ top: var(--sjs-base-unit, var(--base-unit, 8px));
4745
+ }
4746
+
4747
+ .sd-file__close-camera-button {
4748
+ position: absolute;
4749
+ z-index: 2;
4750
+ right: var(--sjs-base-unit, var(--base-unit, 8px));
4751
+ top: var(--sjs-base-unit, var(--base-unit, 8px));
4752
+ }
4753
+
4754
+ .sd-context-btn.sd-file__take-picture-button {
4755
+ background-color: var(--sjs-special-red, var(--red, #e60a3e));
4756
+ position: absolute;
4757
+ bottom: 16px;
4758
+ left: 50%;
4759
+ transform: translateX(-50%);
4760
+ padding: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
4761
+ }
4762
+ .sd-context-btn.sd-file__take-picture-button .sv-svg-icon {
4763
+ height: calc(4 * (var(--sjs-base-unit, var(--base-unit, 8px))));
4764
+ width: calc(4 * (var(--sjs-base-unit, var(--base-unit, 8px))));
4765
+ }
4766
+ .sd-context-btn.sd-file__take-picture-button .sv-svg-icon use {
4767
+ fill: var(--sjs-general-backcolor, var(--background, #fff));
4768
+ }
4769
+ .sd-context-btn.sd-file__take-picture-button:hover, .sd-context-btn.sd-file__take-picture-button:focus {
4770
+ box-shadow: 0 0 0 2px var(--sjs-special-red, var(--red, #e60a3e));
4771
+ }
4772
+
4773
+ .sd-file__video-container {
4774
+ background-color: var(--sjs-general-backcolor-dim, var(--background-dim, #f3f3f3));
4775
+ position: absolute;
4776
+ top: 0;
4777
+ left: 0;
4778
+ width: 100%;
4779
+ height: 100%;
4780
+ }
4781
+
4782
+ .sd-file__loading-indicator {
4783
+ width: 100%;
4784
+ height: 100%;
4785
+ box-sizing: border-box;
4786
+ position: absolute;
4787
+ border: 1px dashed var(--sjs-border-default, var(--border, #d6d6d6));
4788
+ left: 0;
4789
+ }
4790
+ .sd-file__loading-indicator .sd-loading-indicator {
4791
+ position: absolute;
4792
+ left: 50%;
4793
+ top: 50%;
4794
+ transform: translate(-50%, -50%);
4795
+ }
4796
+
4694
4797
  .sd-hidden {
4695
4798
  display: none !important;
4696
4799
  }
4697
4800
 
4698
4801
  .sd-body__navigation .sd-btn {
4699
- padding: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px))) calc(8 * var(--sjs-base-unit, var(--base-unit, 8px)));
4700
- font-size: var(--sjs-font-questiontitle-size, calc(1 * var(--sjs-font-size, var(--sjs-font-size, 16px))));
4701
- line-height: calc(1.5 * var(--sjs-font-questiontitle-size, calc(1 * var(--sjs-font-size, var(--sjs-font-size, 16px)))));
4802
+ padding: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px)))) calc(8 * (var(--sjs-base-unit, var(--base-unit, 8px))));
4803
+ font-size: var(--sjs-font-questiontitle-size, var(--sjs-font-size, 16px));
4804
+ line-height: calc(1.5 * (var(--sjs-font-questiontitle-size, var(--sjs-font-size, 16px))));
4702
4805
  }
4703
4806
 
4704
4807
  .sd-root--compact .sd-body__navigation .sd-btn:not(.sd-btn--action) {
@@ -4713,7 +4816,7 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
4713
4816
  flex-grow: 1;
4714
4817
  }
4715
4818
  .sd-root-modern--mobile .sd-body__navigation .sd-btn {
4716
- padding: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px))) calc(4 * var(--sjs-base-unit, var(--base-unit, 8px)));
4819
+ padding: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px)))) calc(4 * (var(--sjs-base-unit, var(--base-unit, 8px))));
4717
4820
  }
4718
4821
 
4719
4822
  .sd-body__navigation .sv-action--hidden {
@@ -4724,22 +4827,27 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
4724
4827
  appearance: none;
4725
4828
  -webkit-appearance: none;
4726
4829
  -moz-appearance: none;
4727
- padding: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px))) calc(6 * var(--sjs-base-unit, var(--base-unit, 8px)));
4830
+ padding: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px)))) calc(6 * (var(--sjs-base-unit, var(--base-unit, 8px))));
4728
4831
  background: var(--sjs-questionpanel-backcolor, var(--sjs-question-background, var(--sjs-general-backcolor, var(--background, #fff))));
4729
4832
  box-shadow: var(--sjs-shadow-small, 0px 1px 2px 0px rgba(0, 0, 0, 0.15));
4730
- border-radius: calc(1 * var(--sjs-corner-radius, 4px));
4833
+ border-radius: var(--sjs-corner-radius, 4px);
4731
4834
  cursor: pointer;
4732
4835
  font-family: var(--font-family, var(--font-family));
4733
4836
  font-style: normal;
4734
4837
  font-weight: 600;
4735
- font-size: calc(1 * var(--sjs-font-size, 16px));
4736
- line-height: calc(1.5 * var(--sjs-font-size, 16px));
4838
+ font-size: var(--sjs-font-size, 16px);
4839
+ line-height: calc(1.5 * (var(--sjs-font-size, 16px)));
4737
4840
  text-align: center;
4738
4841
  color: var(--sjs-primary-backcolor, var(--primary, #19b394));
4739
4842
  border: none;
4740
4843
  outline: none;
4741
4844
  }
4742
4845
 
4846
+ .sd-btn--small {
4847
+ flex-grow: 1;
4848
+ padding: calc(1.5 * (var(--sjs-base-unit, var(--base-unit, 8px)))) calc(4 * (var(--sjs-base-unit, var(--base-unit, 8px))));
4849
+ }
4850
+
4743
4851
  .sd-btn:hover {
4744
4852
  background-color: var(--sjs-questionpanel-hovercolor, var(--sjs-general-backcolor-dark, rgb(248, 248, 248)));
4745
4853
  }
@@ -4769,22 +4877,37 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
4769
4877
  pointer-events: none;
4770
4878
  }
4771
4879
 
4880
+ .sd-btn--danger {
4881
+ background-color: var(--sjs-special-red, var(--red, #e60a3e));
4882
+ color: var(--sjs-primary-forecolor, var(--primary-foreground, #fff));
4883
+ }
4884
+
4885
+ .sd-btn--danger:hover {
4886
+ background-color: var(--sjs-special-red, var(--red, #e60a3e));
4887
+ color: var(--sjs-primary-forecolor, var(--primary-foreground, #fff));
4888
+ }
4889
+
4890
+ .sd-btn--danger:disabled {
4891
+ color: var(--sjs-special-red-forecolor, #ffffff);
4892
+ pointer-events: none;
4893
+ }
4894
+
4772
4895
  .sd-body {
4773
4896
  width: 100%;
4774
4897
  }
4775
4898
  .sd-body .sd-body__page {
4776
- min-width: 300px;
4899
+ min-width: min(100%, 300px);
4777
4900
  }
4778
4901
  .sd-body .sd-body__timer {
4779
- padding: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px))) calc(2 * var(--sjs-base-unit, var(--base-unit, 8px))) 0;
4902
+ padding: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px)))) calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px)))) 0;
4780
4903
  box-sizing: border-box;
4781
4904
  }
4782
4905
  .sd-body.sd-body--static {
4783
- max-width: calc(90 * var(--sjs-base-unit, var(--base-unit, 8px)));
4906
+ max-width: calc(90 * (var(--sjs-base-unit, var(--base-unit, 8px))));
4784
4907
  margin-left: auto;
4785
4908
  margin-right: auto;
4786
- padding-top: calc(6 * var(--sjs-base-unit, var(--base-unit, 8px)));
4787
- padding-bottom: calc(10 * var(--sjs-base-unit, var(--base-unit, 8px)));
4909
+ padding-top: calc(6 * (var(--sjs-base-unit, var(--base-unit, 8px))));
4910
+ padding-bottom: calc(10 * (var(--sjs-base-unit, var(--base-unit, 8px))));
4788
4911
  }
4789
4912
  .sd-body.sd-body--static .sd-body__timer,
4790
4913
  .sd-body.sd-body--static .sd-body__navigation,
@@ -4793,29 +4916,29 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
4793
4916
  margin-right: 0;
4794
4917
  }
4795
4918
  .sd-body.sd-body--static .sd-body__navigation {
4796
- padding-top: calc(4 * var(--sjs-base-unit, var(--base-unit, 8px)));
4919
+ padding-top: calc(4 * (var(--sjs-base-unit, var(--base-unit, 8px))));
4797
4920
  }
4798
4921
  .sd-body.sd-body--static .sd-body__navigation.sd-action-bar {
4799
- padding-left: calc(5 * var(--sjs-base-unit, var(--base-unit, 8px)));
4800
- padding-right: calc(5 * var(--sjs-base-unit, var(--base-unit, 8px)));
4922
+ padding-left: calc(5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
4923
+ padding-right: calc(5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
4801
4924
  }
4802
4925
  .sd-body.sd-body--responsive {
4803
4926
  max-width: initial;
4804
- padding: calc(5 * var(--sjs-base-unit, var(--base-unit, 8px))) calc(5 * var(--sjs-base-unit, var(--base-unit, 8px))) calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
4927
+ padding: calc(5 * (var(--sjs-base-unit, var(--base-unit, 8px)))) calc(5 * (var(--sjs-base-unit, var(--base-unit, 8px)))) calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
4805
4928
  box-sizing: border-box;
4806
4929
  }
4807
4930
  .sd-body.sd-body--responsive .sd-page {
4808
4931
  padding: 0;
4809
4932
  }
4810
4933
  .sd-body.sd-body--responsive .sd-page.sd-page__empty-header {
4811
- padding-top: calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
4934
+ padding-top: calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
4812
4935
  }
4813
4936
  .sd-body.sd-body--responsive .sd-body__timer,
4814
4937
  .sd-body.sd-body--responsive .sd-body__navigation {
4815
- padding: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px))) 0;
4938
+ padding: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px)))) 0;
4816
4939
  }
4817
4940
  .sd-body.sd-body--responsive .sd-body__navigation {
4818
- padding-top: calc(4 * var(--sjs-base-unit, var(--base-unit, 8px)));
4941
+ padding-top: calc(4 * (var(--sjs-base-unit, var(--base-unit, 8px))));
4819
4942
  }
4820
4943
  .sd-body.sd-body--responsive.sd-body--with-timer {
4821
4944
  max-width: calc(100% + var(--sd-timer-size) * -1.4444444444 + 6 * var(--sjs-base-unit, var(--base-unit, 8px)));
@@ -4829,7 +4952,7 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
4829
4952
  margin-right: 0;
4830
4953
  }
4831
4954
  .sd-root-modern--mobile .sd-body.sd-body--responsive, .sd-root-modern--mobile .sd-body.sd-body--static {
4832
- padding: calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
4955
+ padding: calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
4833
4956
  }
4834
4957
  .sd-root-modern--mobile .sd-body.sd-body--responsive .sd-body__navigation, .sd-root-modern--mobile .sd-body.sd-body--static .sd-body__navigation {
4835
4958
  padding-left: 0;
@@ -4837,11 +4960,15 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
4837
4960
  padding-bottom: 0;
4838
4961
  }
4839
4962
 
4963
+ .sd-root--compact .sd-body.sd-body--responsive .sd-body__navigation, .sd-root--compact .sd-body.sd-body--static .sd-body__navigation {
4964
+ padding-top: calc(7 * (var(--sjs-base-unit, var(--base-unit, 8px))));
4965
+ }
4966
+
4840
4967
  .sd-body__navigation.sd-action-bar {
4841
4968
  box-sizing: border-box;
4842
- padding: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px))) calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
4969
+ padding: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px)))) calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
4843
4970
  flex-wrap: wrap;
4844
- gap: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
4971
+ gap: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
4845
4972
  }
4846
4973
 
4847
4974
  .sd-body--empty {
@@ -4939,16 +5066,16 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
4939
5066
  .sd-body--loading button {
4940
5067
  display: flex;
4941
5068
  align-items: center;
4942
- padding: calc(1.5 * var(--sjs-base-unit, var(--base-unit, 8px))) calc(4 * var(--sjs-base-unit, var(--base-unit, 8px)));
5069
+ padding: calc(1.5 * (var(--sjs-base-unit, var(--base-unit, 8px)))) calc(4 * (var(--sjs-base-unit, var(--base-unit, 8px))));
4943
5070
  vertical-align: baseline;
4944
5071
  text-align: center;
4945
5072
  background-color: var(--sjs-general-backcolor, var(--background, #fff));
4946
5073
  box-shadow: var(--sjs-shadow-small, 0px 1px 2px 0px rgba(0, 0, 0, 0.15));
4947
5074
  border: none;
4948
- border-radius: calc(0.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
5075
+ border-radius: calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
4949
5076
  cursor: pointer;
4950
5077
  user-select: none;
4951
- outline: solid calc(0.25 * var(--sjs-base-unit, var(--base-unit, 8px))) transparent;
5078
+ outline: solid calc(0.25 * (var(--sjs-base-unit, var(--base-unit, 8px)))) transparent;
4952
5079
  }
4953
5080
  .sd-body--empty button:hover,
4954
5081
  .sd-body--loading button:hover {
@@ -4968,8 +5095,8 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
4968
5095
  font-weight: 600;
4969
5096
  font-style: normal;
4970
5097
  font-family: var(--font-family, var(--font-family));
4971
- font-size: var(--sjs-font-questiontitle-size, calc(1 * var(--sjs-font-size, var(--sjs-font-size, 16px))));
4972
- line-height: calc(1.5 * var(--sjs-font-questiontitle-size, calc(1 * var(--sjs-font-size, var(--sjs-font-size, 16px)))));
5098
+ font-size: var(--sjs-font-questiontitle-size, var(--sjs-font-size, 16px));
5099
+ line-height: calc(1.5 * (var(--sjs-font-questiontitle-size, var(--sjs-font-size, 16px))));
4973
5100
  }
4974
5101
 
4975
5102
  .sd-root_background-image {
@@ -4993,7 +5120,7 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
4993
5120
  }
4994
5121
 
4995
5122
  .sd-multipletext__cell:not(:first-of-type) {
4996
- padding-left: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
5123
+ padding-left: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
4997
5124
  }
4998
5125
 
4999
5126
  .sd-multipletext__item-container.sd-input:focus-within {
@@ -5017,8 +5144,8 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
5017
5144
 
5018
5145
  .sd-multipletext__item-container .sd-input,
5019
5146
  .sd-multipletext__item-title {
5020
- margin-top: calc(1.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
5021
- margin-bottom: calc(1.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
5147
+ margin-top: calc(1.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
5148
+ margin-bottom: calc(1.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
5022
5149
  }
5023
5150
 
5024
5151
  .sd-multipletext__item-title {
@@ -5026,14 +5153,14 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
5026
5153
  line-height: 0;
5027
5154
  }
5028
5155
  .sd-multipletext__item-title span {
5029
- font-size: var(--sjs-font-editorfont-size, calc(1 * var(--sjs-font-size, var(--sjs-font-size, 16px))));
5030
- line-height: calc(1.5 * var(--sjs-font-editorfont-size, calc(1 * var(--sjs-font-size, var(--sjs-font-size, 16px)))));
5156
+ font-size: var(--sjs-font-editorfont-size, var(--sjs-font-size, 16px));
5157
+ line-height: calc(1.5 * (var(--sjs-font-editorfont-size, var(--sjs-font-size, 16px))));
5031
5158
  }
5032
5159
 
5033
5160
  .sd-multipletext__item-title {
5034
5161
  height: calc(100% - var(--sjs-base-unit, var(--base-unit, 8px)) * 3);
5035
5162
  max-width: 30%;
5036
- padding-right: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
5163
+ padding-right: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
5037
5164
  border-right: 1px solid var(--sjs-border-default, var(--border, #d6d6d6));
5038
5165
  word-break: break-word;
5039
5166
  white-space: normal;
@@ -5062,8 +5189,8 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
5062
5189
  .sd-multipletext__cell {
5063
5190
  padding-left: 0;
5064
5191
  padding-right: 0;
5065
- padding-bottom: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
5066
- padding-top: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
5192
+ padding-bottom: var(--sjs-base-unit, var(--base-unit, 8px));
5193
+ padding-top: var(--sjs-base-unit, var(--base-unit, 8px));
5067
5194
  }
5068
5195
 
5069
5196
  .sd-multipletext__cell--error-bottom,
@@ -5087,15 +5214,17 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
5087
5214
  .sd-action {
5088
5215
  appearance: none;
5089
5216
  border: none;
5217
+ display: flex;
5218
+ gap: var(--sjs-base-unit, var(--base-unit, 8px));
5090
5219
  background: transparent;
5091
- padding: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px))) calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
5220
+ padding: var(--sjs-base-unit, var(--base-unit, 8px)) calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
5092
5221
  color: var(--sjs-primary-backcolor, var(--primary, #19b394));
5093
- border-radius: calc(12.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
5222
+ border-radius: calc(12.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
5094
5223
  font-weight: 600;
5095
5224
  font-family: var(--font-family, var(--font-family));
5096
5225
  font-style: normal;
5097
- font-size: var(--sjs-font-questiontitle-size, calc(1 * var(--sjs-font-size, var(--sjs-font-size, 16px))));
5098
- line-height: calc(1.5 * var(--sjs-font-questiontitle-size, calc(1 * var(--sjs-font-size, var(--sjs-font-size, 16px)))));
5226
+ font-size: var(--sjs-font-questiontitle-size, var(--sjs-font-size, 16px));
5227
+ line-height: calc(1.5 * (var(--sjs-font-questiontitle-size, var(--sjs-font-size, 16px))));
5099
5228
  outline: none;
5100
5229
  }
5101
5230
 
@@ -5104,9 +5233,19 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
5104
5233
  }
5105
5234
 
5106
5235
  .sd-action--icon {
5107
- padding: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
5236
+ padding: var(--sjs-base-unit, var(--base-unit, 8px));
5108
5237
  }
5109
5238
 
5239
+ .sd-action__icon {
5240
+ margin-left: calc(-1 * (var(--sjs-base-unit, var(--base-unit, 8px))));
5241
+ }
5242
+ .sd-action__icon use {
5243
+ fill: var(--sjs-primary-backcolor, var(--primary, #19b394));
5244
+ }
5245
+
5246
+ .sd-action--icon .sd-action__icon {
5247
+ margin-left: 0;
5248
+ }
5110
5249
  .sd-action--icon use {
5111
5250
  fill: var(--sjs-general-forecolor-light, var(--foreground-light, #909090));
5112
5251
  }
@@ -5138,10 +5277,6 @@ svg.sd-action--icon {
5138
5277
  .sd-action:not(.sd-action--pressed):focus.sd-action--negative {
5139
5278
  background-color: var(--sjs-special-red-light, var(--red-light, rgba(230, 10, 62, 0.1)));
5140
5279
  }
5141
- .sd-action:not(.sd-action--pressed):hover.sd-action--negative.sd-action--icon use,
5142
- .sd-action:not(.sd-action--pressed):focus.sd-action--negative.sd-action--icon use {
5143
- fill: var(--sjs-special-red, var(--red, #e60a3e));
5144
- }
5145
5280
  .sd-action:not(.sd-action--pressed):hover:active,
5146
5281
  .sd-action:not(.sd-action--pressed):focus:active {
5147
5282
  opacity: 0.5;
@@ -5149,8 +5284,8 @@ svg.sd-action--icon {
5149
5284
 
5150
5285
  .sd-action__icon {
5151
5286
  display: block;
5152
- width: calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
5153
- height: calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
5287
+ width: calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
5288
+ height: calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
5154
5289
  }
5155
5290
 
5156
5291
  .sd-action--pressed:not(.sd-action--active) {
@@ -5168,16 +5303,19 @@ svg.sd-action--icon {
5168
5303
 
5169
5304
  .sd-context-btn {
5170
5305
  background-color: var(--sjs-general-backcolor, var(--background, #fff));
5171
- padding: calc(1.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
5172
- border-radius: calc(12.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
5306
+ padding: calc(1.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
5307
+ border-radius: calc(12.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
5173
5308
  border: none;
5174
5309
  outline: none;
5175
5310
  cursor: pointer;
5176
5311
  }
5312
+ .sd-context-btn .sv-svg-icon {
5313
+ margin: 0;
5314
+ }
5177
5315
  .sd-context-btn svg {
5178
5316
  display: block;
5179
- width: calc(1.5 * var(--sjs-font-editorfont-size, calc(1 * var(--sjs-font-size, var(--sjs-font-size, 16px)))));
5180
- height: calc(1.5 * var(--sjs-font-editorfont-size, calc(1 * var(--sjs-font-size, var(--sjs-font-size, 16px)))));
5317
+ width: calc(1.5 * (var(--sjs-font-editorfont-size, var(--sjs-font-size, 16px))));
5318
+ height: calc(1.5 * (var(--sjs-font-editorfont-size, var(--sjs-font-size, 16px))));
5181
5319
  }
5182
5320
  .sd-context-btn use {
5183
5321
  fill: var(--sjs-general-forecolor-light, var(--foreground-light, #909090));
@@ -5292,16 +5430,16 @@ svg.sd-action--icon {
5292
5430
  .sd-completed-before-page button {
5293
5431
  display: flex;
5294
5432
  align-items: center;
5295
- padding: calc(1.5 * var(--sjs-base-unit, var(--base-unit, 8px))) calc(4 * var(--sjs-base-unit, var(--base-unit, 8px)));
5433
+ padding: calc(1.5 * (var(--sjs-base-unit, var(--base-unit, 8px)))) calc(4 * (var(--sjs-base-unit, var(--base-unit, 8px))));
5296
5434
  vertical-align: baseline;
5297
5435
  text-align: center;
5298
5436
  background-color: var(--sjs-general-backcolor, var(--background, #fff));
5299
5437
  box-shadow: var(--sjs-shadow-small, 0px 1px 2px 0px rgba(0, 0, 0, 0.15));
5300
5438
  border: none;
5301
- border-radius: calc(0.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
5439
+ border-radius: calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
5302
5440
  cursor: pointer;
5303
5441
  user-select: none;
5304
- outline: solid calc(0.25 * var(--sjs-base-unit, var(--base-unit, 8px))) transparent;
5442
+ outline: solid calc(0.25 * (var(--sjs-base-unit, var(--base-unit, 8px)))) transparent;
5305
5443
  }
5306
5444
  .sd-completedpage button:hover,
5307
5445
  .sd-completed-before-page button:hover {
@@ -5321,24 +5459,24 @@ svg.sd-action--icon {
5321
5459
  font-weight: 600;
5322
5460
  font-style: normal;
5323
5461
  font-family: var(--font-family, var(--font-family));
5324
- font-size: var(--sjs-font-questiontitle-size, calc(1 * var(--sjs-font-size, var(--sjs-font-size, 16px))));
5325
- line-height: calc(1.5 * var(--sjs-font-questiontitle-size, calc(1 * var(--sjs-font-size, var(--sjs-font-size, 16px)))));
5462
+ font-size: var(--sjs-font-questiontitle-size, var(--sjs-font-size, 16px));
5463
+ line-height: calc(1.5 * (var(--sjs-font-questiontitle-size, var(--sjs-font-size, 16px))));
5326
5464
  }
5327
5465
 
5328
5466
  .sd-completedpage:before,
5329
5467
  .sd-completedpage:after {
5330
5468
  display: block;
5331
- width: calc(9 * var(--sjs-base-unit, var(--base-unit, 8px)));
5469
+ width: calc(9 * (var(--sjs-base-unit, var(--base-unit, 8px))));
5332
5470
  margin-left: calc(50% - 4.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
5333
5471
  content: "";
5334
5472
  }
5335
5473
 
5336
5474
  .sd-completedpage:before {
5337
- height: calc(13 * var(--sjs-base-unit, var(--base-unit, 8px)));
5475
+ height: calc(13 * (var(--sjs-base-unit, var(--base-unit, 8px))));
5338
5476
  }
5339
5477
 
5340
5478
  .sd-completedpage:after {
5341
- height: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
5479
+ height: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
5342
5480
  }
5343
5481
 
5344
5482
  .sd-progress-buttons__image-button-left {
@@ -5365,8 +5503,8 @@ svg.sd-action--icon {
5365
5503
  flex-grow: 1;
5366
5504
  text-decoration: none;
5367
5505
  border-top: 2px solid var(--sjs-border-light, var(--border-light, #eaeaea));
5368
- padding-top: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
5369
- padding-bottom: calc(4 * var(--sjs-base-unit, var(--base-unit, 8px)));
5506
+ padding-top: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
5507
+ padding-bottom: calc(4 * (var(--sjs-base-unit, var(--base-unit, 8px))));
5370
5508
  cursor: pointer;
5371
5509
  }
5372
5510
  .sd-progress-buttons__list li:hover .sd-progress-buttons__page-title {
@@ -5389,26 +5527,26 @@ svg.sd-action--icon {
5389
5527
 
5390
5528
  .sd-progress-buttons__page-title {
5391
5529
  width: 100%;
5392
- font-size: calc(1 * var(--sjs-font-size, 16px));
5530
+ font-size: var(--sjs-font-size, 16px);
5393
5531
  font-weight: 600;
5394
- line-height: calc(1.5 * var(--sjs-font-size, 16px));
5532
+ line-height: calc(1.5 * (var(--sjs-font-size, 16px)));
5395
5533
  }
5396
5534
 
5397
5535
  .sd-progress-buttons__page-description {
5398
5536
  width: 100%;
5399
- font-size: calc(0.75 * var(--sjs-font-size, 16px));
5400
- line-height: calc(1 * var(--sjs-font-size, 16px));
5537
+ font-size: calc(0.75 * (var(--sjs-font-size, 16px)));
5538
+ line-height: var(--sjs-font-size, 16px);
5401
5539
  font-weight: 600;
5402
5540
  color: var(--sjs-general-forecolor-light, var(--foreground-light, #909090));
5403
5541
  }
5404
5542
 
5405
5543
  .sv_progress-toc {
5406
- padding: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
5407
- max-width: calc(42 * var(--sjs-base-unit, var(--base-unit, 8px)));
5544
+ padding: var(--sjs-base-unit, var(--base-unit, 8px));
5545
+ max-width: calc(42 * (var(--sjs-base-unit, var(--base-unit, 8px))));
5408
5546
  height: 100%;
5409
5547
  background: var(--sjs-general-backcolor, var(--background, #fff));
5410
5548
  box-sizing: border-box;
5411
- min-width: calc(32 * var(--sjs-base-unit, var(--base-unit, 8px)));
5549
+ min-width: calc(32 * (var(--sjs-base-unit, var(--base-unit, 8px))));
5412
5550
  }
5413
5551
  .sv_progress-toc .sv-list__item.sv-list__item--selected .sv-list__item-body {
5414
5552
  background: var(--sjs-primary-backcolor-light, var(--primary-light, rgba(25, 179, 148, 0.1)));
@@ -5419,11 +5557,11 @@ svg.sd-action--icon {
5419
5557
  white-space: break-spaces;
5420
5558
  }
5421
5559
  .sv_progress-toc .sv-list__item-body {
5422
- padding-inline-start: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
5423
- padding-inline-end: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
5424
- border-radius: calc(1 * var(--sjs-corner-radius, 4px));
5425
- padding-top: calc(1.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
5426
- padding-bottom: calc(1.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
5560
+ padding-inline-start: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
5561
+ padding-inline-end: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
5562
+ border-radius: var(--sjs-corner-radius, 4px);
5563
+ padding-top: calc(1.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
5564
+ padding-bottom: calc(1.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
5427
5565
  }
5428
5566
 
5429
5567
  .sv_progress-toc--left {
@@ -5436,50 +5574,50 @@ svg.sd-action--icon {
5436
5574
 
5437
5575
  .sv_progress-toc--mobile {
5438
5576
  position: fixed;
5439
- top: calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
5440
- right: calc(4 * var(--sjs-base-unit, var(--base-unit, 8px)));
5577
+ top: calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
5578
+ right: calc(4 * (var(--sjs-base-unit, var(--base-unit, 8px))));
5441
5579
  width: auto;
5442
5580
  min-width: auto;
5443
5581
  height: auto;
5444
5582
  background-color: var(--sjs-general-backcolor-dim, var(--background-dim, #f3f3f3));
5445
5583
  z-index: 15;
5446
- border-radius: calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
5584
+ border-radius: calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
5447
5585
  }
5448
5586
  .sv_progress-toc--mobile > div {
5449
- width: calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
5450
- height: calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
5587
+ width: calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
5588
+ height: calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
5451
5589
  }
5452
5590
  .sv_progress-toc--mobile:hover {
5453
5591
  background-color: var(--sjs-general-backcolor-dim, var(--background-dim, #f3f3f3));
5454
5592
  }
5455
5593
 
5456
5594
  .sd-list {
5457
- padding-right: calc(0.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
5458
- padding-left: calc(0.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
5595
+ padding-right: calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
5596
+ padding-left: calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
5459
5597
  }
5460
5598
 
5461
5599
  .sd-list__item.sd-list__item {
5462
5600
  padding: 0;
5463
5601
  }
5464
5602
  .sd-list__item.sd-list__item .sd-list__item-body {
5465
- padding-block: calc(1.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
5466
- border-radius: calc(1 * var(--sjs-corner-radius, 4px));
5467
- font-size: calc(1 * var(--sjs-font-size, 16px));
5468
- line-height: calc(1.5 * var(--sjs-font-size, 16px));
5603
+ padding-block: calc(1.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
5604
+ border-radius: var(--sjs-corner-radius, 4px);
5605
+ font-size: var(--sjs-font-size, 16px);
5606
+ line-height: calc(1.5 * (var(--sjs-font-size, 16px)));
5469
5607
  }
5470
5608
 
5471
5609
  .sd-list__item.sd-list__item--focused:not(.sd-list__item--selected) {
5472
5610
  outline: none;
5473
5611
  }
5474
5612
  .sd-list__item.sd-list__item--focused:not(.sd-list__item--selected) .sd-list__item-body {
5475
- padding-block: calc(1.25 * var(--sjs-base-unit, var(--base-unit, 8px)));
5613
+ padding-block: calc(1.25 * (var(--sjs-base-unit, var(--base-unit, 8px))));
5476
5614
  }
5477
5615
 
5478
5616
  .sd-timer {
5479
5617
  z-index: 2;
5480
5618
  position: fixed;
5481
5619
  bottom: calc(var(--sd-timer-size) / 144 * 32);
5482
- right: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
5620
+ right: var(--sjs-base-unit, var(--base-unit, 8px));
5483
5621
  background: white;
5484
5622
  width: var(--sd-timer-size);
5485
5623
  height: var(--sd-timer-size);
@@ -5493,7 +5631,7 @@ svg.sd-action--icon {
5493
5631
 
5494
5632
  .sd-timer--top {
5495
5633
  top: calc(var(--sd-timer-size) / 144 * 32);
5496
- margin-top: calc(4 * var(--sjs-base-unit, var(--base-unit, 8px)));
5634
+ margin-top: calc(4 * (var(--sjs-base-unit, var(--base-unit, 8px))));
5497
5635
  margin-bottom: calc(-1 * var(--sd-timer-size));
5498
5636
  }
5499
5637
 
@@ -5528,7 +5666,7 @@ svg.sd-action--icon {
5528
5666
  left: 50%;
5529
5667
  top: 50%;
5530
5668
  transform: translate(-50%, -50%);
5531
- padding: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
5669
+ padding: var(--sjs-base-unit, var(--base-unit, 8px));
5532
5670
  color: var(--sjs-primary-backcolor, var(--primary, #19b394));
5533
5671
  font-weight: 700;
5534
5672
  font-size: calc(var(--sd-timer-size) / 144 * 32);
@@ -5543,7 +5681,107 @@ svg.sd-action--icon {
5543
5681
  .sd-timer__text--minor {
5544
5682
  color: var(--sjs-general-forecolor-light, var(--foreground-light, #909090));
5545
5683
  font-weight: 600;
5546
- font-size: calc(0.75 * var(--sjs-font-size, 16px));
5684
+ font-size: calc(0.75 * (var(--sjs-font-size, 16px)));
5685
+ }
5686
+
5687
+ .sv-cover {
5688
+ padding: calc(5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
5689
+ box-sizing: border-box;
5690
+ position: relative;
5691
+ background-color: var(--sjs-cover-backcolor);
5692
+ }
5693
+
5694
+ .sv-conver__overlap {
5695
+ margin-bottom: calc(-13 * (var(--sjs-base-unit, var(--base-unit, 8px))));
5696
+ padding-bottom: calc(13 * (var(--sjs-base-unit, var(--base-unit, 8px))));
5697
+ }
5698
+
5699
+ .sv-conver__overlap.sv-conver__without-background {
5700
+ margin-bottom: calc(-8 * (var(--sjs-base-unit, var(--base-unit, 8px))));
5701
+ }
5702
+
5703
+ .sv-conver__without-background {
5704
+ padding-bottom: 0;
5705
+ }
5706
+
5707
+ .sv-conver__content {
5708
+ height: 100%;
5709
+ position: relative;
5710
+ display: grid;
5711
+ gap: 0;
5712
+ grid-auto-columns: 1fr 1fr 1fr;
5713
+ grid-auto-rows: 1fr 1fr 1fr;
5714
+ }
5715
+
5716
+ .sv-conver__content--static {
5717
+ max-width: calc(80 * (var(--sjs-base-unit, var(--base-unit, 8px))));
5718
+ margin-left: auto;
5719
+ margin-right: auto;
5720
+ }
5721
+
5722
+ .sv-cover__background-image {
5723
+ width: 100%;
5724
+ height: 100%;
5725
+ position: absolute;
5726
+ top: 0;
5727
+ left: 0;
5728
+ right: 0;
5729
+ border: 0;
5730
+ background-position-x: center;
5731
+ }
5732
+
5733
+ .sv-cover__background-image--contain {
5734
+ background-repeat: no-repeat;
5735
+ }
5736
+
5737
+ .sv-cover__cell {
5738
+ position: relative;
5739
+ }
5740
+
5741
+ .sv-cover__cell-content {
5742
+ display: flex;
5743
+ flex-direction: column;
5744
+ position: absolute;
5745
+ width: max-content;
5746
+ top: 0;
5747
+ bottom: 0;
5748
+ gap: var(--sjs-base-unit, var(--base-unit, 8px));
5749
+ }
5750
+
5751
+ .sv-cover__cell--left .sv-cover__cell-content {
5752
+ left: 0;
5753
+ }
5754
+
5755
+ .sv-cover__cell--right .sv-cover__cell-content {
5756
+ right: 0;
5757
+ }
5758
+
5759
+ .sv-cover__logo {
5760
+ display: flex;
5761
+ margin-bottom: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
5762
+ }
5763
+
5764
+ .sv-cover__title {
5765
+ display: flex;
5766
+ }
5767
+
5768
+ .sv-cover__title .sd-title {
5769
+ --cover-title-font-size: var(--sjs-font-surveytitle-size, calc(2 * (var(--sjs-font-size, 16px))));
5770
+ font-size: var(--cover-title-font-size);
5771
+ line-height: calc(1.25 * (var(--cover-title-font-size)));
5772
+ margin: 0;
5773
+ color: var(--sjs-cover-title-forecolor, var(--sjs-general-dim-forecolor, rgba(0, 0, 0, 0.91)));
5774
+ font-family: var(--sjs-font-surveytitle-family, var(--font-family));
5775
+ font-weight: var(--sjs-font-surveytitle-weight, 700);
5776
+ }
5777
+
5778
+ .sv-cover__description {
5779
+ display: flex;
5780
+ }
5781
+
5782
+ .sv-cover__description .sd-description {
5783
+ margin: 0;
5784
+ color: var(--sjs-general-dim-forecolor-light, rgba(0, 0, 0, 0.45));
5547
5785
  }
5548
5786
 
5549
5787
  @keyframes rotationAnimation {
@@ -5555,11 +5793,11 @@ svg.sd-action--icon {
5555
5793
  }
5556
5794
  }
5557
5795
  .sd-loading-indicator {
5558
- height: calc(6 * var(--sjs-base-unit, var(--base-unit, 8px)));
5796
+ height: calc(6 * (var(--sjs-base-unit, var(--base-unit, 8px))));
5559
5797
  }
5560
5798
  .sd-loading-indicator .sv-svg-icon {
5561
- height: calc(6 * var(--sjs-base-unit, var(--base-unit, 8px)));
5562
- width: calc(6 * var(--sjs-base-unit, var(--base-unit, 8px)));
5799
+ height: calc(6 * (var(--sjs-base-unit, var(--base-unit, 8px))));
5800
+ width: calc(6 * (var(--sjs-base-unit, var(--base-unit, 8px))));
5563
5801
  animation-name: rotationAnimation;
5564
5802
  animation-timing-function: linear;
5565
5803
  animation-iteration-count: infinite;
@@ -5586,6 +5824,10 @@ sv-components-container,
5586
5824
  flex-grow: 1;
5587
5825
  }
5588
5826
 
5827
+ .sv-components-row > .sv-components-column--expandable {
5828
+ width: 1px;
5829
+ }
5830
+
5589
5831
  .sjs_sp_container {
5590
5832
  position: relative;
5591
5833
  }
@@ -5648,7 +5890,7 @@ sv-components-container,
5648
5890
  width: auto;
5649
5891
  }
5650
5892
  .sd-root-modern.sd-root-modern--mobile .sd-element__title--expandable:before {
5651
- left: calc(-2.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
5893
+ left: calc(-2.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
5652
5894
  }
5653
5895
  .sd-root-modern.sd-root-modern--mobile .sd-title.sd-container-modern__title {
5654
5896
  flex-direction: column;
@@ -5668,12 +5910,12 @@ sv-components-container,
5668
5910
  align-items: flex-start;
5669
5911
  }
5670
5912
  .sd-root-modern.sd-root-modern--mobile .sd-table__cell.sd-matrix__cell .sd-matrix__responsive-title {
5671
- margin-left: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
5913
+ margin-left: var(--sjs-base-unit, var(--base-unit, 8px));
5672
5914
  text-align: left;
5673
5915
  }
5674
5916
  .sd-root-modern.sd-root-modern--mobile .sd-table__cell.sd-matrix__cell:first-of-type {
5675
- padding-top: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
5676
- padding-bottom: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
5917
+ padding-top: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
5918
+ padding-bottom: var(--sjs-base-unit, var(--base-unit, 8px));
5677
5919
  }
5678
5920
  .sd-root-modern.sd-root-modern--mobile .sd-table thead {
5679
5921
  display: none;
@@ -5682,10 +5924,10 @@ sv-components-container,
5682
5924
  display: block;
5683
5925
  }
5684
5926
  .sd-root-modern.sd-root-modern--mobile .sd-matrix__table tr + tr {
5685
- margin-top: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
5927
+ margin-top: var(--sjs-base-unit, var(--base-unit, 8px));
5686
5928
  }
5687
5929
  .sd-root-modern.sd-root-modern--mobile .sd-table:not(.sd-matrix__table) tr {
5688
- padding-bottom: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
5930
+ padding-bottom: var(--sjs-base-unit, var(--base-unit, 8px));
5689
5931
  }
5690
5932
  .sd-root-modern.sd-root-modern--mobile .sd-table:not(.sd-matrix__table) tr::after {
5691
5933
  z-index: 12;
@@ -5694,8 +5936,8 @@ sv-components-container,
5694
5936
  position: relative;
5695
5937
  height: 1px;
5696
5938
  background-color: var(--sjs-border-light, var(--border-light, #eaeaea));
5697
- left: calc(-2 * var(--sjs-base-unit, var(--base-unit, 8px)));
5698
- bottom: calc(-1 * var(--sjs-base-unit, var(--base-unit, 8px)));
5939
+ left: calc(-2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
5940
+ bottom: calc(-1 * (var(--sjs-base-unit, var(--base-unit, 8px))));
5699
5941
  width: calc(100% + 4 * var(--sjs-base-unit, var(--base-unit, 8px)));
5700
5942
  z-index: 12;
5701
5943
  }
@@ -5709,15 +5951,15 @@ sv-components-container,
5709
5951
  text-align: left;
5710
5952
  }
5711
5953
  .sd-root-modern.sd-root-modern--mobile .sd-table__cell {
5712
- margin-top: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
5954
+ margin-top: var(--sjs-base-unit, var(--base-unit, 8px));
5713
5955
  }
5714
5956
  .sd-root-modern.sd-root-modern--mobile .sd-table__cell:first-of-type,
5715
5957
  .sd-root-modern.sd-root-modern--mobile .sd-matrix__cell {
5716
5958
  margin-top: 0;
5717
5959
  }
5718
5960
  .sd-root-modern.sd-root-modern--mobile .sd-table__cell::before {
5719
- padding-top: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
5720
- padding-bottom: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
5961
+ padding-top: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
5962
+ padding-bottom: var(--sjs-base-unit, var(--base-unit, 8px));
5721
5963
  content: attr(data-responsive-title);
5722
5964
  font-weight: 600;
5723
5965
  display: block;
@@ -5733,13 +5975,13 @@ sv-components-container,
5733
5975
  width: auto;
5734
5976
  }
5735
5977
  .sd-root-modern.sd-root-modern--mobile .sd-table__cell.sd-table__cell--actions .sd-action-bar {
5736
- margin-right: calc(-3 * var(--sjs-base-unit, var(--base-unit, 8px)));
5978
+ margin-right: calc(-3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
5737
5979
  justify-content: flex-end;
5738
5980
  background: var(--sjs-general-backcolor, var(--background, #fff));
5739
5981
  }
5740
5982
  .sd-root-modern.sd-root-modern--mobile .sd-action.sd-action.sd-matrixdynamic__remove-btn {
5741
5983
  opacity: 1;
5742
- padding: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px))) calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
5984
+ padding: var(--sjs-base-unit, var(--base-unit, 8px)) calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
5743
5985
  }
5744
5986
  .sd-root-modern.sd-root-modern--mobile .sd-action.sd-action.sd-matrixdynamic__remove-btn .sd-action__icon {
5745
5987
  display: none;
@@ -5748,18 +5990,18 @@ sv-components-container,
5748
5990
  content: attr(title);
5749
5991
  }
5750
5992
  .sd-root-modern.sd-root-modern--mobile .sd-matrixdynamic__footer {
5751
- padding-top: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
5752
- margin-bottom: calc(-2 * var(--sjs-base-unit, var(--base-unit, 8px)));
5993
+ padding-top: var(--sjs-base-unit, var(--base-unit, 8px));
5994
+ margin-bottom: calc(-2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
5753
5995
  }
5754
5996
  .sd-root-modern.sd-root-modern--mobile .sd-table__cell--row-text:not(.sd-matrix__cell) {
5755
5997
  color: var(--sjs-general-forecolor-light, var(--foreground-light, #909090));
5756
- padding-top: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
5998
+ padding-top: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
5757
5999
  }
5758
6000
  .sd-root-modern.sd-root-modern--mobile .sd-matrixdropdown.sd-table tr:not(:last-child) {
5759
- padding-bottom: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
6001
+ padding-bottom: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
5760
6002
  }
5761
6003
  .sd-root-modern.sd-root-modern--mobile .sd-matrixdropdown.sd-table tr::after {
5762
- bottom: calc(-2 * var(--sjs-base-unit, var(--base-unit, 8px)));
6004
+ bottom: calc(-2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
5763
6005
  }
5764
6006
  .sd-root-modern.sd-root-modern--mobile .sd-matrixdropdown.sd-table tr:last-child:after {
5765
6007
  content: none;
@@ -5771,11 +6013,11 @@ sv-components-container,
5771
6013
  margin-top: 0;
5772
6014
  }
5773
6015
  .sd-root-modern.sd-root-modern--mobile .sd-table__cell--error-top .sd-question__erbox {
5774
- margin-top: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
5775
- margin-bottom: calc(-2 * var(--sjs-base-unit, var(--base-unit, 8px)));
6016
+ margin-top: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
6017
+ margin-bottom: calc(-2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
5776
6018
  }
5777
6019
  .sd-root-modern.sd-root-modern--mobile .sd-table__cell--error-top:first-of-type .sd-question__erbox {
5778
- margin-bottom: calc(-1 * var(--sjs-base-unit, var(--base-unit, 8px)));
6020
+ margin-bottom: calc(-1 * (var(--sjs-base-unit, var(--base-unit, 8px))));
5779
6021
  }
5780
6022
  .sd-root-modern.sd-root-modern--mobile .sv-ranking-item__icon-container {
5781
6023
  margin-left: 0;
@@ -5787,20 +6029,20 @@ sv-components-container,
5787
6029
  }
5788
6030
  .sd-multipletext--mobile .sd-multipletext__cell:not(:first-of-type) {
5789
6031
  padding-left: 0;
5790
- padding-top: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
6032
+ padding-top: var(--sjs-base-unit, var(--base-unit, 8px));
5791
6033
  }
5792
6034
  .sd-multipletext--mobile .sd-multipletext__cell :not(:last-of-type) {
5793
- padding-bottom: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
6035
+ padding-bottom: var(--sjs-base-unit, var(--base-unit, 8px));
5794
6036
  }
5795
6037
  .sd-multipletext--mobile .sd-multipletext__item-container {
5796
- padding-top: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
5797
- padding-bottom: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
6038
+ padding-top: var(--sjs-base-unit, var(--base-unit, 8px));
6039
+ padding-bottom: var(--sjs-base-unit, var(--base-unit, 8px));
5798
6040
  }
5799
6041
  .sd-multipletext--mobile .sd-multipletext__item-title {
5800
6042
  max-width: none;
5801
6043
  border-right: none;
5802
6044
  width: 100%;
5803
- padding: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px))) 0;
6045
+ padding: var(--sjs-base-unit, var(--base-unit, 8px)) 0;
5804
6046
  margin: 0;
5805
6047
  }
5806
6048
  .sd-multipletext--mobile .sd-multipletext__item {
@@ -5820,8 +6062,8 @@ sv-components-container,
5820
6062
  }
5821
6063
  .sd-multipletext--mobile .sd-multipletext__item-container--answered .sd-multipletext__item-title span,
5822
6064
  .sd-multipletext--mobile .sd-multipletext__item-container--allow-focus:focus-within .sd-multipletext__item-title span {
5823
- font-size: calc(0.75 * var(--sjs-font-size, 16px));
5824
- line-height: calc(1 * var(--sjs-font-size, 16px));
6065
+ font-size: calc(0.75 * (var(--sjs-font-size, 16px)));
6066
+ line-height: var(--sjs-font-size, 16px);
5825
6067
  }
5826
6068
  .sd-multipletext--mobile .sd-multipletext__item-container--answered .sd-multipletext__item,
5827
6069
  .sd-multipletext--mobile .sd-multipletext__item-container--allow-focus:focus-within .sd-multipletext__item {
@@ -5909,6 +6151,22 @@ body {
5909
6151
  --sd-timer-size: calc(9 * var(--sjs-base-unit, var(--base-unit, 8px)));
5910
6152
  }
5911
6153
 
6154
+ .sd-root-modern__wrapper {
6155
+ position: relative;
6156
+ min-height: 100%;
6157
+ }
6158
+
6159
+ .sd-root-modern--full-container .sd-root-modern__wrapper--fixed {
6160
+ position: static;
6161
+ width: 100%;
6162
+ height: 100%;
6163
+ }
6164
+ .sd-root-modern--full-container .sd-root-modern__wrapper--fixed form {
6165
+ overflow: auto;
6166
+ width: 100%;
6167
+ max-height: 100%;
6168
+ }
6169
+
5912
6170
  .sv-popup .sv-popup__scrolling-content {
5913
6171
  scrollbar-width: thin;
5914
6172
  scrollbar-color: var(--sjs-border-default, var(--border, #d6d6d6)) transparent;
@@ -5937,7 +6195,7 @@ body {
5937
6195
  }
5938
6196
  .sv-popup.sv-popup--dropdown.sv-popup--dropdown .sv-popup__body-content {
5939
6197
  background-color: var(--sjs-general-backcolor, var(--background, #fff));
5940
- padding: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px))) 0;
6198
+ padding: var(--sjs-base-unit, var(--base-unit, 8px)) 0;
5941
6199
  height: 100%;
5942
6200
  }
5943
6201