survey-react 1.9.87 → 1.9.89

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.
Files changed (14) hide show
  1. package/defaultV2.css +323 -155
  2. package/defaultV2.css.map +1 -1
  3. package/defaultV2.min.css +2 -2
  4. package/modern.css +34 -34
  5. package/modern.css.map +1 -1
  6. package/modern.min.css +2 -2
  7. package/package.json +1 -1
  8. package/survey.css +4 -4
  9. package/survey.css.map +1 -1
  10. package/survey.min.css +2 -2
  11. package/survey.react.d.ts +103 -19
  12. package/survey.react.js +537 -172
  13. package/survey.react.js.map +1 -1
  14. package/survey.react.min.js +3 -3
package/defaultV2.css CHANGED
@@ -1,5 +1,5 @@
1
1
  /*!
2
- * surveyjs - Survey JavaScript library v1.9.87
2
+ * surveyjs - Survey JavaScript library v1.9.89
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
  */
@@ -8,7 +8,8 @@
8
8
  font-family: "Open Sans";
9
9
  font-style: normal;
10
10
  font-weight: 400;
11
- src: local("Open Sans Regular"), local("OpenSans-Regular"), url(https://fonts.gstatic.com/s/opensans/v18/mem8YaGs126MiZpBA-UFWJ0bbck.woff2) format("woff2");
11
+ font-stretch: 100%;
12
+ src: url(https://fonts.gstatic.com/s/opensans/v34/memvYaGs126MiZpBA-UvWbX2vVnXBbObj2OVTSKmu1aB.woff2) format("woff2");
12
13
  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
13
14
  }
14
15
  /* cyrillic */
@@ -16,61 +17,206 @@
16
17
  font-family: "Open Sans";
17
18
  font-style: normal;
18
19
  font-weight: 400;
19
- src: local("Open Sans Regular"), local("OpenSans-Regular"), url(https://fonts.gstatic.com/s/opensans/v18/mem8YaGs126MiZpBA-UFUZ0bbck.woff2) format("woff2");
20
- unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
20
+ font-stretch: 100%;
21
+ src: url(https://fonts.gstatic.com/s/opensans/v34/memvYaGs126MiZpBA-UvWbX2vVnXBbObj2OVTSumu1aB.woff2) format("woff2");
22
+ unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
21
23
  }
22
24
  /* greek-ext */
23
25
  @font-face {
24
26
  font-family: "Open Sans";
25
27
  font-style: normal;
26
28
  font-weight: 400;
27
- src: local("Open Sans Regular"), local("OpenSans-Regular"), url(https://fonts.gstatic.com/s/opensans/v18/mem8YaGs126MiZpBA-UFWZ0bbck.woff2) format("woff2");
29
+ font-stretch: 100%;
30
+ src: url(https://fonts.gstatic.com/s/opensans/v34/memvYaGs126MiZpBA-UvWbX2vVnXBbObj2OVTSOmu1aB.woff2) format("woff2");
28
31
  unicode-range: U+1F00-1FFF;
29
32
  }
33
+ /* greek */
34
+ @font-face {
35
+ font-family: "Open Sans";
36
+ font-style: normal;
37
+ font-weight: 400;
38
+ font-stretch: 100%;
39
+ src: url(https://fonts.gstatic.com/s/opensans/v34/memvYaGs126MiZpBA-UvWbX2vVnXBbObj2OVTSymu1aB.woff2) format("woff2");
40
+ unicode-range: U+0370-03FF;
41
+ }
42
+ /* hebrew */
43
+ @font-face {
44
+ font-family: "Open Sans";
45
+ font-style: normal;
46
+ font-weight: 400;
47
+ font-stretch: 100%;
48
+ src: url(https://fonts.gstatic.com/s/opensans/v34/memvYaGs126MiZpBA-UvWbX2vVnXBbObj2OVTS2mu1aB.woff2) format("woff2");
49
+ unicode-range: U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F;
50
+ }
51
+ /* vietnamese */
52
+ @font-face {
53
+ font-family: "Open Sans";
54
+ font-style: normal;
55
+ font-weight: 400;
56
+ font-stretch: 100%;
57
+ src: url(https://fonts.gstatic.com/s/opensans/v34/memvYaGs126MiZpBA-UvWbX2vVnXBbObj2OVTSCmu1aB.woff2) format("woff2");
58
+ unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
59
+ }
60
+ /* latin-ext */
61
+ @font-face {
62
+ font-family: "Open Sans";
63
+ font-style: normal;
64
+ font-weight: 400;
65
+ font-stretch: 100%;
66
+ src: url(https://fonts.gstatic.com/s/opensans/v34/memvYaGs126MiZpBA-UvWbX2vVnXBbObj2OVTSGmu1aB.woff2) format("woff2");
67
+ unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
68
+ }
69
+ /* latin */
70
+ @font-face {
71
+ font-family: "Open Sans";
72
+ font-style: normal;
73
+ font-weight: 400;
74
+ font-stretch: 100%;
75
+ src: url(https://fonts.gstatic.com/s/opensans/v34/memvYaGs126MiZpBA-UvWbX2vVnXBbObj2OVTS-muw.woff2) format("woff2");
76
+ unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
77
+ }
78
+ /* cyrillic-ext */
79
+ @font-face {
80
+ font-family: "Open Sans";
81
+ font-style: normal;
82
+ font-weight: 600;
83
+ font-stretch: 100%;
84
+ src: url(https://fonts.gstatic.com/s/opensans/v34/memvYaGs126MiZpBA-UvWbX2vVnXBbObj2OVTSKmu1aB.woff2) format("woff2");
85
+ unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
86
+ }
87
+ /* cyrillic */
30
88
  @font-face {
31
89
  font-family: "Open Sans";
32
90
  font-style: normal;
33
91
  font-weight: 600;
34
- src: local("Open Sans Semibold"), local("OpenSans-Semibold"), url(https://fonts.gstatic.com/s/opensans/v13/MTP_ySUJH_bn48VBG8sNShampu5_7CjHW5spxoeN3Vs.woff2) format("woff2");
35
- unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
92
+ font-stretch: 100%;
93
+ src: url(https://fonts.gstatic.com/s/opensans/v34/memvYaGs126MiZpBA-UvWbX2vVnXBbObj2OVTSumu1aB.woff2) format("woff2");
94
+ unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
36
95
  }
96
+ /* greek-ext */
97
+ @font-face {
98
+ font-family: "Open Sans";
99
+ font-style: normal;
100
+ font-weight: 600;
101
+ font-stretch: 100%;
102
+ src: url(https://fonts.gstatic.com/s/opensans/v34/memvYaGs126MiZpBA-UvWbX2vVnXBbObj2OVTSOmu1aB.woff2) format("woff2");
103
+ unicode-range: U+1F00-1FFF;
104
+ }
105
+ /* greek */
106
+ @font-face {
107
+ font-family: "Open Sans";
108
+ font-style: normal;
109
+ font-weight: 600;
110
+ font-stretch: 100%;
111
+ src: url(https://fonts.gstatic.com/s/opensans/v34/memvYaGs126MiZpBA-UvWbX2vVnXBbObj2OVTSymu1aB.woff2) format("woff2");
112
+ unicode-range: U+0370-03FF;
113
+ }
114
+ /* hebrew */
115
+ @font-face {
116
+ font-family: "Open Sans";
117
+ font-style: normal;
118
+ font-weight: 600;
119
+ font-stretch: 100%;
120
+ src: url(https://fonts.gstatic.com/s/opensans/v34/memvYaGs126MiZpBA-UvWbX2vVnXBbObj2OVTS2mu1aB.woff2) format("woff2");
121
+ unicode-range: U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F;
122
+ }
123
+ /* vietnamese */
124
+ @font-face {
125
+ font-family: "Open Sans";
126
+ font-style: normal;
127
+ font-weight: 600;
128
+ font-stretch: 100%;
129
+ src: url(https://fonts.gstatic.com/s/opensans/v34/memvYaGs126MiZpBA-UvWbX2vVnXBbObj2OVTSCmu1aB.woff2) format("woff2");
130
+ unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
131
+ }
132
+ /* latin-ext */
133
+ @font-face {
134
+ font-family: "Open Sans";
135
+ font-style: normal;
136
+ font-weight: 600;
137
+ font-stretch: 100%;
138
+ src: url(https://fonts.gstatic.com/s/opensans/v34/memvYaGs126MiZpBA-UvWbX2vVnXBbObj2OVTSGmu1aB.woff2) format("woff2");
139
+ unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
140
+ }
141
+ /* latin */
142
+ @font-face {
143
+ font-family: "Open Sans";
144
+ font-style: normal;
145
+ font-weight: 600;
146
+ font-stretch: 100%;
147
+ src: url(https://fonts.gstatic.com/s/opensans/v34/memvYaGs126MiZpBA-UvWbX2vVnXBbObj2OVTS-muw.woff2) format("woff2");
148
+ unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
149
+ }
150
+ /* cyrillic-ext */
37
151
  @font-face {
38
152
  font-family: "Open Sans";
39
153
  font-style: normal;
40
154
  font-weight: 700;
41
- src: local("Open Sans Bold"), local("OpenSans-Bold"), url(https://fonts.gstatic.com/s/opensans/v13/k3k702ZOKiLJc3WVjuplzBampu5_7CjHW5spxoeN3Vs.woff2) format("woff2");
42
- unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
155
+ font-stretch: 100%;
156
+ src: url(https://fonts.gstatic.com/s/opensans/v34/memvYaGs126MiZpBA-UvWbX2vVnXBbObj2OVTSKmu1aB.woff2) format("woff2");
157
+ unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
158
+ }
159
+ /* cyrillic */
160
+ @font-face {
161
+ font-family: "Open Sans";
162
+ font-style: normal;
163
+ font-weight: 700;
164
+ font-stretch: 100%;
165
+ src: url(https://fonts.gstatic.com/s/opensans/v34/memvYaGs126MiZpBA-UvWbX2vVnXBbObj2OVTSumu1aB.woff2) format("woff2");
166
+ unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
167
+ }
168
+ /* greek-ext */
169
+ @font-face {
170
+ font-family: "Open Sans";
171
+ font-style: normal;
172
+ font-weight: 700;
173
+ font-stretch: 100%;
174
+ src: url(https://fonts.gstatic.com/s/opensans/v34/memvYaGs126MiZpBA-UvWbX2vVnXBbObj2OVTSOmu1aB.woff2) format("woff2");
175
+ unicode-range: U+1F00-1FFF;
43
176
  }
44
177
  /* greek */
45
178
  @font-face {
46
179
  font-family: "Open Sans";
47
180
  font-style: normal;
48
- font-weight: 400;
49
- src: local("Open Sans Regular"), local("OpenSans-Regular"), url(https://fonts.gstatic.com/s/opensans/v18/mem8YaGs126MiZpBA-UFVp0bbck.woff2) format("woff2");
181
+ font-weight: 700;
182
+ font-stretch: 100%;
183
+ src: url(https://fonts.gstatic.com/s/opensans/v34/memvYaGs126MiZpBA-UvWbX2vVnXBbObj2OVTSymu1aB.woff2) format("woff2");
50
184
  unicode-range: U+0370-03FF;
51
185
  }
186
+ /* hebrew */
187
+ @font-face {
188
+ font-family: "Open Sans";
189
+ font-style: normal;
190
+ font-weight: 700;
191
+ font-stretch: 100%;
192
+ src: url(https://fonts.gstatic.com/s/opensans/v34/memvYaGs126MiZpBA-UvWbX2vVnXBbObj2OVTS2mu1aB.woff2) format("woff2");
193
+ unicode-range: U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F;
194
+ }
52
195
  /* vietnamese */
53
196
  @font-face {
54
197
  font-family: "Open Sans";
55
198
  font-style: normal;
56
- font-weight: 400;
57
- src: local("Open Sans Regular"), local("OpenSans-Regular"), url(https://fonts.gstatic.com/s/opensans/v18/mem8YaGs126MiZpBA-UFWp0bbck.woff2) format("woff2");
199
+ font-weight: 700;
200
+ font-stretch: 100%;
201
+ src: url(https://fonts.gstatic.com/s/opensans/v34/memvYaGs126MiZpBA-UvWbX2vVnXBbObj2OVTSCmu1aB.woff2) format("woff2");
58
202
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
59
203
  }
60
204
  /* latin-ext */
61
205
  @font-face {
62
206
  font-family: "Open Sans";
63
207
  font-style: normal;
64
- font-weight: 400;
65
- src: local("Open Sans Regular"), local("OpenSans-Regular"), url(https://fonts.gstatic.com/s/opensans/v18/mem8YaGs126MiZpBA-UFW50bbck.woff2) format("woff2");
208
+ font-weight: 700;
209
+ font-stretch: 100%;
210
+ src: url(https://fonts.gstatic.com/s/opensans/v34/memvYaGs126MiZpBA-UvWbX2vVnXBbObj2OVTSGmu1aB.woff2) format("woff2");
66
211
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
67
212
  }
68
213
  /* latin */
69
214
  @font-face {
70
215
  font-family: "Open Sans";
71
216
  font-style: normal;
72
- font-weight: 400;
73
- src: local("Open Sans Regular"), local("OpenSans-Regular"), url(https://fonts.gstatic.com/s/opensans/v18/mem8YaGs126MiZpBA-UFVZ0b.woff2) format("woff2");
217
+ font-weight: 700;
218
+ font-stretch: 100%;
219
+ src: url(https://fonts.gstatic.com/s/opensans/v34/memvYaGs126MiZpBA-UvWbX2vVnXBbObj2OVTS-muw.woff2) format("woff2");
74
220
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
75
221
  }
76
222
  :root {
@@ -192,7 +338,7 @@ button.sv-action-bar-item {
192
338
  }
193
339
 
194
340
  .sv-action-bar-item--active .sv-action-bar-item__icon use {
195
- fill: var(--primary, #19b394);
341
+ fill: var(--sjs-primary-backcolor, var(--primary, #19b394));
196
342
  }
197
343
 
198
344
  .sv-action-bar-item-dropdown {
@@ -401,8 +547,8 @@ sv-popup {
401
547
  width: 100%;
402
548
  }
403
549
  .sv-popup--overlay.sv-popup--overlay .sv-popup__button {
404
- background-color: var(--primary, #19b394);
405
- border: 2px solid var(--primary, #19b394);
550
+ background-color: var(--sjs-primary-backcolor, var(--primary, #19b394));
551
+ border: 2px solid var(--sjs-primary-backcolor, var(--primary, #19b394));
406
552
  color: var(--sjs-primary-forecolor, var(--primary-foreground, #fff));
407
553
  }
408
554
 
@@ -425,7 +571,7 @@ sv-popup {
425
571
  }
426
572
  .sv-popup__scrolling-content::-webkit-scrollbar-thumb,
427
573
  .sv-popup__scrolling-content *::-webkit-scrollbar-thumb {
428
- background: var(--primary-light, rgba(25, 179, 148, 0.1));
574
+ background: var(--sjs-primary-backcolor-light, var(--primary-light, rgba(25, 179, 148, 0.1)));
429
575
  }
430
576
 
431
577
  .sv-popup__content {
@@ -505,13 +651,13 @@ sv-popup {
505
651
  font-size: calc(1 * var(--sjs-font-size, calc(2 * var(--base-unit, 8px))));
506
652
  line-height: calc(3 * var(--base-unit, 8px));
507
653
  text-align: center;
508
- color: var(--primary, #19b394);
654
+ color: var(--sjs-primary-backcolor, var(--primary, #19b394));
509
655
  border: none;
510
656
  outline: none;
511
657
  }
512
658
 
513
659
  .sv-popup__button:hover {
514
- box-shadow: 0 0 0 2px var(--primary, #19b394);
660
+ box-shadow: 0 0 0 2px var(--sjs-primary-backcolor, var(--primary, #19b394));
515
661
  }
516
662
 
517
663
  .sv-popup__button:disabled {
@@ -525,7 +671,7 @@ sv-popup {
525
671
  }
526
672
 
527
673
  .sv-popup__button--apply {
528
- background-color: var(--primary, #19b394);
674
+ background-color: var(--sjs-primary-backcolor, var(--primary, #19b394));
529
675
  color: var(--sjs-primary-forecolor, var(--primary-foreground, #fff));
530
676
  }
531
677
 
@@ -555,7 +701,7 @@ sv-popup {
555
701
  }
556
702
  .sv-dropdown-popup.sv-popup--overlay .sv-popup__button {
557
703
  background-color: transparent;
558
- color: var(--primary, #19b394);
704
+ color: var(--sjs-primary-backcolor, var(--primary, #19b394));
559
705
  border: none;
560
706
  box-shadow: none;
561
707
  padding: calc(1 * var(--base-unit, 8px)) calc(2 * var(--base-unit, 8px));
@@ -645,14 +791,14 @@ sv-popup {
645
791
  .sv-dropdown-popup.sv-popup--overlay .sv-list__item:hover.sv-list__item--selected .sv-list__item-body,
646
792
  .sv-dropdown-popup.sv-popup--overlay .sv-list__item:focus.sv-list__item--selected .sv-list__item-body,
647
793
  .sv-dropdown-popup.sv-popup--overlay .sv-list__item--focused.sv-list__item--selected .sv-list__item-body {
648
- background: var(--primary, #19b394);
794
+ background: var(--sjs-primary-backcolor, var(--primary, #19b394));
649
795
  color: var(--sjs-primary-forecolor, var(--primary-foreground, #fff));
650
796
  font-weight: 600;
651
797
  }
652
798
  .sv-dropdown-popup.sv-popup--overlay .sv-list__item:hover.sv-list__item--selected .sd-list__item-body,
653
799
  .sv-dropdown-popup.sv-popup--overlay .sv-list__item:focus.sv-list__item--selected .sd-list__item-body,
654
800
  .sv-dropdown-popup.sv-popup--overlay .sv-list__item--focused.sv-list__item--selected .sd-list__item-body {
655
- background: var(--primary-light, rgba(25, 179, 148, 0.1));
801
+ background: var(--sjs-primary-backcolor-light, var(--primary-light, rgba(25, 179, 148, 0.1)));
656
802
  color: var(--sjs-general-forecolor, var(--foreground, #161616));
657
803
  }
658
804
 
@@ -689,8 +835,8 @@ sv-popup {
689
835
  }
690
836
 
691
837
  .sv-button-group:focus-within {
692
- box-shadow: 0 0 0 1px var(--primary, #19b394);
693
- border-color: var(--primary, #19b394);
838
+ box-shadow: 0 0 0 1px var(--sjs-primary-backcolor, var(--primary, #19b394));
839
+ border-color: var(--sjs-primary-backcolor, var(--primary, #19b394));
694
840
  }
695
841
 
696
842
  .sv-button-group__item {
@@ -730,10 +876,10 @@ sv-popup {
730
876
 
731
877
  .sv-button-group__item--selected {
732
878
  font-weight: 600;
733
- color: var(--primary, #19b394);
879
+ color: var(--sjs-primary-backcolor, var(--primary, #19b394));
734
880
  }
735
881
  .sv-button-group__item--selected .sv-button-group__item-icon use {
736
- fill: var(--primary, #19b394);
882
+ fill: var(--sjs-primary-backcolor, var(--primary, #19b394));
737
883
  }
738
884
  .sv-button-group__item--selected:hover {
739
885
  background-color: var(--background, #fff);
@@ -769,8 +915,8 @@ sv-popup {
769
915
  }
770
916
 
771
917
  .sv-button-group:focus-within {
772
- box-shadow: 0 0 0 1px var(--primary, #19b394);
773
- border-color: var(--primary, #19b394);
918
+ box-shadow: 0 0 0 1px var(--sjs-primary-backcolor, var(--primary, #19b394));
919
+ border-color: var(--sjs-primary-backcolor, var(--primary, #19b394));
774
920
  }
775
921
 
776
922
  .sv-visuallyhidden {
@@ -944,7 +1090,7 @@ sv-popup {
944
1090
 
945
1091
  .sv-ranking-item:focus .sv-ranking-item__index {
946
1092
  background: var(--background, #fff);
947
- outline: calc(0.25 * var(--base-unit, 8px)) solid var(--primary, #19b394);
1093
+ outline: calc(0.25 * var(--base-unit, 8px)) solid var(--sjs-primary-backcolor, var(--primary, #19b394));
948
1094
  }
949
1095
 
950
1096
  .sv-ranking-item__content.sv-ranking-item__content {
@@ -967,7 +1113,7 @@ sv-popup {
967
1113
 
968
1114
  .sv-ranking-item__icon.sv-ranking-item__icon {
969
1115
  visibility: hidden;
970
- fill: var(--primary, #19b394);
1116
+ fill: var(--sjs-primary-backcolor, var(--primary, #19b394));
971
1117
  position: absolute;
972
1118
  top: calc(1 * var(--base-unit, 8px));
973
1119
  width: calc(1.75 * var(--base-unit, 8px));
@@ -979,7 +1125,7 @@ sv-popup {
979
1125
  flex-shrink: 0;
980
1126
  align-items: center;
981
1127
  justify-content: center;
982
- background-color: var(--primary-light, rgba(25, 179, 148, 0.1));
1128
+ background-color: var(--sjs-primary-backcolor-light, var(--primary-light, rgba(25, 179, 148, 0.1)));
983
1129
  color: var(--sjs-general-forecolor, var(--foreground, #161616));
984
1130
  font-size: calc(1 * var(--sjs-font-size, calc(2 * var(--base-unit, 8px))));
985
1131
  border-radius: 100%;
@@ -1084,7 +1230,7 @@ sv-popup {
1084
1230
  }
1085
1231
 
1086
1232
  .sv-ranking-shortcut .sv-ranking-item__icon {
1087
- fill: var(--primary, #19b394);
1233
+ fill: var(--sjs-primary-backcolor, var(--primary, #19b394));
1088
1234
  }
1089
1235
 
1090
1236
  .sv-ranking-shortcut .sv-ranking-item__text {
@@ -1179,7 +1325,7 @@ sv-popup {
1179
1325
  }
1180
1326
  .sv-list__item:hover .sv-list__item-body,
1181
1327
  .sv-list__item:focus .sv-list__item-body {
1182
- background-color: var(--sjs-general-backcolor-dark, rgb(248, 248, 248));
1328
+ background-color: var(--sjs-questionpanel-hovercolor, var(--sjs-general-backcolor-dark, rgb(248, 248, 248)));
1183
1329
  }
1184
1330
 
1185
1331
  .sv-list__item--with-icon.sv-list__item--with-icon {
@@ -1221,7 +1367,7 @@ sv-popup {
1221
1367
  .sv-list__item.sv-list__item--selected.sv-list__item--focused .sv-list__item-body,
1222
1368
  .sv-multi-select-list .sv-list__item.sv-list__item--selected.sv-list__item--focused .sv-list__item-body,
1223
1369
  li:focus .sv-list__item.sv-list__item--selected .sv-list__item-body {
1224
- background-color: var(--primary, #19b394);
1370
+ background-color: var(--sjs-primary-backcolor, var(--primary, #19b394));
1225
1371
  color: var(--sjs-primary-forecolor, var(--primary-foreground, #fff));
1226
1372
  font-weight: 600;
1227
1373
  }
@@ -1235,7 +1381,7 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list__item-icon use {
1235
1381
 
1236
1382
  .sv-multi-select-list .sv-list__item.sv-list__item--selected .sv-list__item-body,
1237
1383
  .sv-multi-select-list .sv-list__item.sv-list__item--selected:hover .sv-list__item-body {
1238
- background-color: var(--primary-light, rgba(25, 179, 148, 0.1));
1384
+ background-color: var(--sjs-primary-backcolor-light, var(--primary-light, rgba(25, 179, 148, 0.1)));
1239
1385
  color: var(--sjs-general-forecolor, var(--foreground, #161616));
1240
1386
  font-weight: 400;
1241
1387
  }
@@ -1391,7 +1537,7 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list__item-icon use {
1391
1537
  }
1392
1538
 
1393
1539
  .sv-save-data_root.sv-save-data_success {
1394
- background-color: var(--primary, #19b394);
1540
+ background-color: var(--sjs-primary-backcolor, var(--primary, #19b394));
1395
1541
  color: #ffffff;
1396
1542
  font-weight: 600;
1397
1543
  }
@@ -1429,7 +1575,10 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list__item-icon use {
1429
1575
  line-height: calc(2 * var(--base-unit, 8px));
1430
1576
  }
1431
1577
  .sd-element__title span {
1432
- font-size: calc(1 * var(--sjs-font-size, calc(2 * var(--base-unit, 8px))));
1578
+ font-family: var(--sjs-font-questiontitle-family, var(--font-family));
1579
+ font-weight: var(--sjs-font-questiontitle-weight, 600);
1580
+ font-size: var(--sjs-font-questiontitle-size, calc(1 * var(--sjs-font-size, var(--sjs-font-size, calc(2 * var(--base-unit, 8px))))));
1581
+ color: var(--sjs-font-questiontitle-color, var(--sjs-general-dim-forecolor, rgba(0, 0, 0, 0.91)));
1433
1582
  line-height: calc(3 * var(--base-unit, 8px));
1434
1583
  }
1435
1584
  .sd-element__title .sv-title-actions__title {
@@ -1514,13 +1663,13 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list__item-icon use {
1514
1663
 
1515
1664
  .svc-logic-question-value,
1516
1665
  .sd-element--with-frame {
1517
- border-radius: var(--sjs-panel-corner-radius, var(--sjs-corner-radius, 4px));
1666
+ border-radius: var(--sjs-questionpanel-cornerRadius, var(--sjs-corner-radius, 4px));
1518
1667
  box-sizing: border-box;
1519
1668
  padding-top: var(--sd-base-padding);
1520
1669
  padding-left: calc(var(--sd-base-padding) + var(--sv-element-add-padding-left, 0px));
1521
1670
  padding-right: calc(var(--sd-base-padding) + var(--sv-element-add-padding-right, 0px));
1522
1671
  padding-bottom: var(--sd-base-padding);
1523
- background: var(--sjs-question-background, var(--background, #fff));
1672
+ background: var(--sjs-questionpanel-backcolor, var(--sjs-question-background, var(--background, #fff)));
1524
1673
  box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.15);
1525
1674
  }
1526
1675
  .svc-logic-question-value.sd-question--paneldynamic,
@@ -1582,7 +1731,7 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list__item-icon use {
1582
1731
  .sd-element--collapsed.sd-element--with-frame > .sd-element__header {
1583
1732
  padding-top: calc(2 * var(--base-unit, 8px));
1584
1733
  padding-bottom: calc(2 * var(--base-unit, 8px));
1585
- border-radius: var(--sjs-panel-corner-radius, var(--sjs-corner-radius, 4px));
1734
+ border-radius: var(--sjs-questionpanel-cornerRadius, var(--sjs-corner-radius, 4px));
1586
1735
  }
1587
1736
  .sd-element--collapsed.sd-element--with-frame > .sd-element__header--location-top {
1588
1737
  margin-top: 0;
@@ -1639,7 +1788,7 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list__item-icon use {
1639
1788
 
1640
1789
  .sd-element--with-frame.sd-element--compact {
1641
1790
  border: 1px solid var(--sjs-border-inside, var(--border-inside, rgba(0, 0, 0, 0.16)));
1642
- border-radius: var(--sjs-panel-corner-radius, var(--sjs-corner-radius, 4px));
1791
+ border-radius: var(--sjs-questionpanel-cornerRadius, var(--sjs-corner-radius, 4px));
1643
1792
  box-shadow: none;
1644
1793
  }
1645
1794
 
@@ -1655,10 +1804,6 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list__item-icon use {
1655
1804
  position: relative;
1656
1805
  }
1657
1806
 
1658
- .sd-question__description {
1659
- font-size: calc(1 * var(--sjs-font-size, calc(2 * var(--base-unit, 8px))));
1660
- }
1661
-
1662
1807
  .sd-question__erbox {
1663
1808
  padding: calc(1 * var(--base-unit, 8px)) calc(1.5 * var(--base-unit, 8px));
1664
1809
  border-radius: calc(1 * var(--sjs-corner-radius, 4px));
@@ -1840,13 +1985,14 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list__item-icon use {
1840
1985
  box-sizing: border-box;
1841
1986
  padding: calc(1.5 * var(--base-unit, 8px)) calc(2 * var(--base-unit, 8px));
1842
1987
  line-height: calc(3 * var(--base-unit, 8px));
1843
- font-family: var(--font-family, var(--font-family));
1844
- font-size: calc(1 * var(--sjs-font-size, calc(2 * var(--base-unit, 8px))));
1845
- color: var(--sjs-general-forecolor, var(--foreground, #161616));
1846
- background-color: var(--sjs-editor-background, var(--background-dim-light, #f9f9f9));
1988
+ font-family: var(--sjs-font-editorfont-family, var(--font-family));
1989
+ font-weight: var(--sjs-font-editorfont-weight, 400);
1990
+ color: var(--sjs-font-editorfont-color, var(--sjs-general-dim-forecolor, rgba(0, 0, 0, 0.91)));
1991
+ font-size: var(--sjs-font-editorfont-size, calc(1 * var(--sjs-font-size, var(--sjs-font-size, calc(2 * var(--base-unit, 8px))))));
1992
+ background-color: var(--sjs-editorpanel-backcolor, var(--sjs-editor-background, var(--background-dim-light, #f9f9f9)));
1847
1993
  box-shadow: inset 0px 1px 2px rgba(0, 0, 0, 0.15);
1848
1994
  border: none;
1849
- border-radius: var(--sjs-editor-corner-radius, var(--sjs-corner-radius, 4px));
1995
+ border-radius: var(--sjs-editorpanel-cornerRadius, var(--sjs-corner-radius, 4px));
1850
1996
  text-align: start;
1851
1997
  }
1852
1998
 
@@ -1855,7 +2001,7 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list__item-icon use {
1855
2001
  }
1856
2002
 
1857
2003
  .sd-input--disabled {
1858
- background-color: var(--sjs-editor-background, var(--background-dim-light, #f9f9f9));
2004
+ background-color: var(--sjs-editorpanel-backcolor, var(--sjs-editor-background, var(--background-dim-light, #f9f9f9)));
1859
2005
  -webkit-user-select: none;
1860
2006
  -moz-user-select: none;
1861
2007
  -ms-user-select: none;
@@ -1882,7 +2028,7 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list__item-icon use {
1882
2028
  }
1883
2029
 
1884
2030
  .sd-input:focus {
1885
- box-shadow: 0 0 0 2px var(--primary, #19b394);
2031
+ box-shadow: 0 0 0 2px var(--sjs-primary-backcolor, var(--primary, #19b394));
1886
2032
  }
1887
2033
 
1888
2034
  .sd-input--error {
@@ -1913,7 +2059,7 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list__item-icon use {
1913
2059
  }
1914
2060
 
1915
2061
  .sd-input[type=range]::-webkit-slider-runnable-track {
1916
- background-color: var(--primary, #19b394);
2062
+ background-color: var(--sjs-primary-backcolor, var(--primary, #19b394));
1917
2063
  border-radius: calc(1 * var(--base-unit, 8px));
1918
2064
  height: calc(1.5 * var(--base-unit, 8px));
1919
2065
  }
@@ -1923,15 +2069,15 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list__item-icon use {
1923
2069
  appearance: none;
1924
2070
  margin-top: calc(-0.75 * var(--base-unit, 8px));
1925
2071
  border-radius: 100%;
1926
- border: 2px solid var(--primary, #19b394);
2072
+ border: 2px solid var(--sjs-primary-backcolor, var(--primary, #19b394));
1927
2073
  box-shadow: inset 0 0 0 2px var(--background, #fff);
1928
- background-color: var(--primary, #19b394);
2074
+ background-color: var(--sjs-primary-backcolor, var(--primary, #19b394));
1929
2075
  height: calc(3 * var(--base-unit, 8px));
1930
2076
  width: calc(3 * var(--base-unit, 8px));
1931
2077
  }
1932
2078
 
1933
2079
  .sd-input[type=range]::-moz-range-track {
1934
- background-color: var(--primary, #19b394);
2080
+ background-color: var(--sjs-primary-backcolor, var(--primary, #19b394));
1935
2081
  border-radius: calc(1 * var(--base-unit, 8px));
1936
2082
  height: calc(1.5 * var(--base-unit, 8px));
1937
2083
  }
@@ -1941,9 +2087,9 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list__item-icon use {
1941
2087
  appearance: none;
1942
2088
  margin-top: calc(-0.75 * var(--base-unit, 8px));
1943
2089
  border-radius: 100%;
1944
- border: 2px solid var(--primary, #19b394);
2090
+ border: 2px solid var(--sjs-primary-backcolor, var(--primary, #19b394));
1945
2091
  box-shadow: inset 0 0 0 2px var(--background, #fff);
1946
- background-color: var(--primary, #19b394);
2092
+ background-color: var(--sjs-primary-backcolor, var(--primary, #19b394));
1947
2093
  height: calc(3 * var(--base-unit, 8px));
1948
2094
  width: calc(3 * var(--base-unit, 8px));
1949
2095
  }
@@ -1975,22 +2121,29 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list__item-icon use {
1975
2121
  content: none;
1976
2122
  }
1977
2123
  .sd-panel.sd-panel--as-page > .sd-panel__header.sd-panel__header .sd-panel__title {
2124
+ font-family: var(--sjs-font-pagetitle-family, var(--font-family));
2125
+ font-weight: var(--sjs-font-pagetitle-weight, 700);
2126
+ font-size: var(--sjs-font-pagetitle-size, calc(1.5 * var(--sjs-font-size, var(--sjs-font-size, calc(2 * var(--base-unit, 8px))))));
2127
+ color: var(--sjs-font-pagetitle-color, var(--sjs-general-dim-forecolor, rgba(0, 0, 0, 0.91)));
1978
2128
  position: static;
1979
- font-size: calc(1.5 * var(--sjs-font-size, calc(2 * var(--base-unit, 8px))));
1980
2129
  line-height: calc(4 * var(--base-unit, 8px));
1981
2130
  margin: calc(0.5 * var(--base-unit, 8px)) 0px;
1982
- font-weight: 700;
1983
2131
  }
1984
2132
  .sd-panel.sd-panel--as-page > .sd-panel__header.sd-panel__header .sd-panel__title span {
2133
+ font-family: inherit;
1985
2134
  font-size: inherit;
2135
+ font-weight: inherit;
2136
+ color: inherit;
1986
2137
  line-height: inherit;
1987
2138
  }
1988
2139
  .sd-panel.sd-panel--as-page > .sd-panel__header.sd-panel__header .sd-panel__description {
2140
+ font-family: var(--sjs-font-pagedescription-family, var(--font-family));
2141
+ font-weight: var(--sjs-font-pagedescription-weight, 400);
2142
+ font-size: var(--sjs-font-pagedescription-size, calc(1 * var(--sjs-font-size, var(--sjs-font-size, calc(2 * var(--base-unit, 8px))))));
2143
+ color: var(--sjs-font-pagedescription-color, var(--sjs-general-dim-forecolor-light, rgba(0, 0, 0, 0.45)));
1989
2144
  position: static;
1990
- font-size: calc(1 * var(--sjs-font-size, calc(2 * var(--base-unit, 8px))));
1991
2145
  line-height: calc(3 * var(--base-unit, 8px));
1992
2146
  margin: calc(0.5 * var(--base-unit, 8px)) 0px;
1993
- font-weight: 400;
1994
2147
  }
1995
2148
 
1996
2149
  .sd-panel__required-text {
@@ -2062,7 +2215,7 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list__item-icon use {
2062
2215
  }
2063
2216
 
2064
2217
  .sd-checkbox--checked .sd-checkbox__control:focus + .sd-checkbox__decorator .sd-checkbox__svg use {
2065
- fill: var(--primary, #19b394);
2218
+ fill: var(--sjs-primary-backcolor, var(--primary, #19b394));
2066
2219
  }
2067
2220
 
2068
2221
  .sd-matrixdynamic__btn.sd-matrixdynamic__add-btn {
@@ -2126,7 +2279,7 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list__item-icon use {
2126
2279
 
2127
2280
  .sd-table {
2128
2281
  width: 100%;
2129
- background: var(--sjs-question-background, var(--background, #fff));
2282
+ background: var(--sjs-questionpanel-backcolor, var(--sjs-question-background, var(--background, #fff)));
2130
2283
  border-collapse: collapse;
2131
2284
  white-space: normal;
2132
2285
  }
@@ -2251,7 +2404,7 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list__item-icon use {
2251
2404
  background: var(--green-light, rgba(25, 179, 148, 0.1));
2252
2405
  }
2253
2406
  .sd-table__cell--detail-button:hover svg {
2254
- fill: var(--primary, #19b394);
2407
+ fill: var(--sjs-primary-backcolor, var(--primary, #19b394));
2255
2408
  }
2256
2409
 
2257
2410
  .sd-table__cell--actions {
@@ -2285,7 +2438,7 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list__item-icon use {
2285
2438
  .sd-matrix__cell:first-of-type,
2286
2439
  .sd-matrix tr > td:first-of-type {
2287
2440
  position: sticky;
2288
- background: var(--sjs-question-background, var(--background, #fff));
2441
+ background: var(--sjs-questionpanel-backcolor, var(--sjs-question-background, var(--background, #fff)));
2289
2442
  z-index: 12;
2290
2443
  }
2291
2444
  .sd-table__cell--actions:not(.sd-table__cell--vertical):first-of-type,
@@ -2306,7 +2459,7 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list__item-icon use {
2306
2459
  .sd-table__cell--actions:not(.sd-table__cell--vertical):last-child .sd-action-bar {
2307
2460
  margin-right: calc(-3 * var(--base-unit, 8px));
2308
2461
  justify-content: flex-end;
2309
- background: var(--sjs-question-background, var(--background, #fff));
2462
+ background: var(--sjs-questionpanel-backcolor, var(--sjs-question-background, var(--background, #fff)));
2310
2463
  }
2311
2464
 
2312
2465
  .sd-question.sd-question--table {
@@ -2327,7 +2480,7 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list__item-icon use {
2327
2480
  min-height: 100%;
2328
2481
  width: calc(var(--sd-base-padding) - var(--base-unit, 8px));
2329
2482
  flex-shrink: 0;
2330
- background: var(--sjs-question-background, var(--background, #fff));
2483
+ background: var(--sjs-questionpanel-backcolor, var(--sjs-question-background, var(--background, #fff)));
2331
2484
  z-index: 11;
2332
2485
  }
2333
2486
  .sd-table-wrapper::before {
@@ -2369,6 +2522,10 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list__item-icon use {
2369
2522
  padding-top: calc(1 * var(--base-unit, 8px));
2370
2523
  }
2371
2524
 
2525
+ .sd-table__question-wrapper .sd-boolean-root {
2526
+ margin: auto;
2527
+ }
2528
+
2372
2529
  .sd-body--responsive .sd-page {
2373
2530
  padding: calc(5 * var(--base-unit, 8px)) var(--sd-page-vertical-padding) calc(2 * var(--base-unit, 8px));
2374
2531
  }
@@ -2391,21 +2548,23 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list__item-icon use {
2391
2548
  }
2392
2549
 
2393
2550
  .sd-page .sd-page__title {
2551
+ font-family: var(--sjs-font-pagetitle-family, var(--font-family));
2552
+ font-weight: var(--sjs-font-pagetitle-weight, 700);
2553
+ font-size: var(--sjs-font-pagetitle-size, calc(1.5 * var(--sjs-font-size, var(--sjs-font-size, calc(2 * var(--base-unit, 8px))))));
2554
+ color: var(--sjs-font-pagetitle-color, var(--sjs-general-dim-forecolor, rgba(0, 0, 0, 0.91)));
2394
2555
  position: static;
2395
- font-size: calc(1.5 * var(--sjs-font-size, calc(2 * var(--base-unit, 8px))));
2396
2556
  line-height: calc(4 * var(--base-unit, 8px));
2397
2557
  margin: calc(0.5 * var(--base-unit, 8px)) 0px;
2398
- font-weight: 700;
2399
- color: var(--sjs-general-dim-forecolor, rgba(0, 0, 0, 0.91));
2400
2558
  }
2401
2559
 
2402
2560
  .sd-page .sd-page__description {
2561
+ font-family: var(--sjs-font-pagedescription-family, var(--font-family));
2562
+ font-weight: var(--sjs-font-pagedescription-weight, 400);
2563
+ font-size: var(--sjs-font-pagedescription-size, calc(1 * var(--sjs-font-size, var(--sjs-font-size, calc(2 * var(--base-unit, 8px))))));
2564
+ color: var(--sjs-font-pagedescription-color, var(--sjs-general-dim-forecolor-light, rgba(0, 0, 0, 0.45)));
2403
2565
  position: static;
2404
- font-size: calc(1 * var(--sjs-font-size, calc(2 * var(--base-unit, 8px))));
2405
2566
  line-height: calc(3 * var(--base-unit, 8px));
2406
2567
  margin: calc(0.5 * var(--base-unit, 8px)) 0px;
2407
- font-weight: 400;
2408
- color: var(--sjs-general-dim-forecolor-light, rgba(0, 0, 0, 0.45));
2409
2568
  }
2410
2569
 
2411
2570
  .sd-row {
@@ -2429,7 +2588,7 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list__item-icon use {
2429
2588
 
2430
2589
  .sd-page__row.sd-row--multiple:not(.sd-row--compact),
2431
2590
  .svc-row > .sd-row--multiple {
2432
- background: var(--sjs-question-background, var(--background, #fff));
2591
+ background: var(--sjs-questionpanel-backcolor, var(--sjs-question-background, var(--background, #fff)));
2433
2592
  box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.15);
2434
2593
  border-radius: calc(1 * var(--sjs-corner-radius, 4px));
2435
2594
  }
@@ -2501,7 +2660,7 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list__item-icon use {
2501
2660
  overflow: auto;
2502
2661
  font-family: var(--font-family, var(--font-family));
2503
2662
  gap: calc(4 * var(--base-unit, 8px));
2504
- box-shadow: 0px 2px 0px var(--primary, #19b394);
2663
+ box-shadow: 0px 2px 0px var(--sjs-primary-backcolor, var(--primary, #19b394));
2505
2664
  margin-bottom: 2px;
2506
2665
  }
2507
2666
  .sd-title.sd-container-modern__title .sd-logo__image {
@@ -2514,11 +2673,14 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list__item-icon use {
2514
2673
  gap: calc(1 * var(--base-unit, 8px));
2515
2674
  flex-grow: 1;
2516
2675
  }
2676
+ .sd-header__text .sd-title {
2677
+ color: var(--sjs-primary-backcolor, var(--primary, #19b394));
2678
+ font-family: var(--sjs-font-surveytitle-family, var(--font-family));
2679
+ font-size: var(--sjs-font-surveytitle-size, calc(2 * var(--sjs-font-size, var(--sjs-font-size, calc(2 * var(--base-unit, 8px))))));
2680
+ font-weight: var(--sjs-font-surveytitle-weight, 700);
2681
+ }
2517
2682
  .sd-header__text h3 {
2518
- font-size: calc(2 * var(--sjs-font-size, calc(2 * var(--base-unit, 8px))));
2519
- font-weight: 700;
2520
2683
  line-height: calc(5 * var(--base-unit, 8px));
2521
- color: var(--primary, #19b394);
2522
2684
  }
2523
2685
  .sd-header__text h5 {
2524
2686
  font-size: calc(1 * var(--sjs-font-size, calc(2 * var(--base-unit, 8px))));
@@ -2569,12 +2731,12 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list__item-icon use {
2569
2731
  }
2570
2732
 
2571
2733
  .sd-description {
2572
- font-family: var(--font-family, var(--font-family));
2573
2734
  font-style: normal;
2574
- font-weight: normal;
2575
- font-size: calc(1 * var(--sjs-font-size, calc(2 * var(--base-unit, 8px))));
2735
+ font-family: var(--sjs-font-questiondescription-family, var(--font-family));
2736
+ font-weight: var(--sjs-font-questiondescription-weight, 400);
2737
+ color: var(--sjs-font-questiondescription-color, var(--sjs-general-dim-forecolor-light, rgba(0, 0, 0, 0.45)));
2738
+ font-size: var(--sjs-font-questiondescription-size, calc(1 * var(--sjs-font-size, var(--sjs-font-size, calc(2 * var(--base-unit, 8px))))));
2576
2739
  line-height: calc(3 * var(--base-unit, 8px));
2577
- color: var(--sjs-general-forecolor-light, var(--foreground-light, #909090));
2578
2740
  white-space: normal;
2579
2741
  word-break: break-word;
2580
2742
  }
@@ -2595,7 +2757,7 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list__item-icon use {
2595
2757
  width: calc(3 * var(--base-unit, 8px));
2596
2758
  height: calc(3 * var(--base-unit, 8px));
2597
2759
  box-sizing: border-box;
2598
- background: var(--sd-item-default-background, var(--sjs-editor-background, var(--background-dim-light, #f9f9f9)));
2760
+ background: var(--sd-item-default-background, var(--sjs-editorpanel-backcolor, var(--sjs-editor-background, var(--background-dim-light, #f9f9f9))));
2599
2761
  box-shadow: inset 0px 1px 2px rgba(0, 0, 0, 0.15);
2600
2762
  border: none;
2601
2763
  flex-shrink: 0;
@@ -2606,18 +2768,18 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list__item-icon use {
2606
2768
  }
2607
2769
 
2608
2770
  .sd-item__control:focus + .sd-item__decorator {
2609
- box-shadow: 0 0 0 2px var(--primary, #19b394);
2771
+ box-shadow: 0 0 0 2px var(--sjs-primary-backcolor, var(--primary, #19b394));
2610
2772
  background: var(--background, #fff);
2611
2773
  outline: none;
2612
2774
  }
2613
2775
 
2614
2776
  .sd-item--allowhover .sd-selectbase__label:hover .sd-item__decorator {
2615
- background: var(--sjs-general-dim-backcolor-dark, rgb(243, 243, 243));
2777
+ background: var(--sjs-editorpanel-hovercolor, var(--sjs-general-dim-backcolor-dark, rgb(243, 243, 243)));
2616
2778
  outline: none;
2617
2779
  }
2618
2780
 
2619
2781
  .sd-item--checked .sd-item__decorator {
2620
- background: var(--primary, #19b394);
2782
+ background: var(--sjs-primary-backcolor, var(--primary, #19b394));
2621
2783
  }
2622
2784
 
2623
2785
  .sd-item__control-label {
@@ -2716,7 +2878,7 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list__item-icon use {
2716
2878
  }
2717
2879
 
2718
2880
  .sd-checkbox--checked .sd-checkbox__control:focus + .sd-checkbox__decorator .sd-checkbox__svg use {
2719
- fill: var(--primary, #19b394);
2881
+ fill: var(--sjs-primary-backcolor, var(--primary, #19b394));
2720
2882
  }
2721
2883
 
2722
2884
  .sd-radio__decorator {
@@ -2737,7 +2899,7 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list__item-icon use {
2737
2899
  }
2738
2900
 
2739
2901
  .sd-radio--checked .sd-radio__control:focus + .sd-radio__decorator:after {
2740
- background-color: var(--primary, #19b394);
2902
+ background-color: var(--sjs-primary-backcolor, var(--primary, #19b394));
2741
2903
  }
2742
2904
 
2743
2905
  .sd-radio__svg {
@@ -2769,7 +2931,7 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list__item-icon use {
2769
2931
  }
2770
2932
 
2771
2933
  .sd-matrix__text--checked {
2772
- background-color: var(--primary-light, rgba(25, 179, 148, 0.1));
2934
+ background-color: var(--sjs-primary-backcolor-light, var(--primary-light, rgba(25, 179, 148, 0.1)));
2773
2935
  padding: calc(2 * var(--base-unit, 8px));
2774
2936
  }
2775
2937
 
@@ -2865,17 +3027,17 @@ legend + sv-ng-rating-item + .sd-rating__item {
2865
3027
  }
2866
3028
 
2867
3029
  .sd-rating__item--allowhover:hover {
2868
- background-color: var(--sjs-general-backcolor-dark, rgb(248, 248, 248));
2869
- border-color: var(--sjs-general-backcolor-dark, rgb(248, 248, 248));
3030
+ background-color: var(--sjs-questionpanel-hovercolor, var(--sjs-general-backcolor-dark, rgb(248, 248, 248)));
3031
+ border-color: var(--sjs-questionpanel-hovercolor, var(--sjs-general-backcolor-dark, rgb(248, 248, 248)));
2870
3032
  }
2871
3033
 
2872
3034
  .sd-rating__item:focus-within {
2873
- border-color: var(--primary, #19b394);
3035
+ border-color: var(--sjs-primary-backcolor, var(--primary, #19b394));
2874
3036
  }
2875
3037
 
2876
3038
  .sd-rating__item--selected {
2877
- background-color: var(--primary, #19b394);
2878
- border-color: var(--primary, #19b394);
3039
+ background-color: var(--sjs-primary-backcolor, var(--primary, #19b394));
3040
+ border-color: var(--sjs-primary-backcolor, var(--primary, #19b394));
2879
3041
  color: var(--sjs-primary-forecolor, var(--primary-foreground, #fff));
2880
3042
  font-weight: 600;
2881
3043
  box-shadow: 0px 1px 2px transparent;
@@ -2942,17 +3104,17 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
2942
3104
  }
2943
3105
 
2944
3106
  .sd-rating__item-smiley--allowhover:hover {
2945
- background-color: var(--sjs-general-backcolor-dark, rgb(248, 248, 248));
3107
+ background-color: var(--sjs-questionpanel-hovercolor, var(--sjs-general-backcolor-dark, rgb(248, 248, 248)));
2946
3108
  border-color: var(--sjs-border-default, var(--border, #d6d6d6));
2947
3109
  }
2948
3110
 
2949
3111
  .sd-rating__item-smiley:focus-within {
2950
- border-color: var(--primary, #19b394);
3112
+ border-color: var(--sjs-primary-backcolor, var(--primary, #19b394));
2951
3113
  }
2952
3114
 
2953
3115
  .sd-rating__item-smiley--selected {
2954
- background-color: var(--primary, #19b394);
2955
- border-color: var(--primary, #19b394);
3116
+ background-color: var(--sjs-primary-backcolor, var(--primary, #19b394));
3117
+ border-color: var(--sjs-primary-backcolor, var(--primary, #19b394));
2956
3118
  fill: var(--sjs-primary-forecolor, var(--primary-foreground, #fff));
2957
3119
  font-weight: 600;
2958
3120
  }
@@ -3012,7 +3174,7 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
3012
3174
 
3013
3175
  .sd-rating__item-star--selected svg {
3014
3176
  stroke: none;
3015
- fill: var(--primary, #19b394);
3177
+ fill: var(--sjs-primary-backcolor, var(--primary, #19b394));
3016
3178
  }
3017
3179
 
3018
3180
  .sd-rating__item-star--error svg {
@@ -3034,7 +3196,7 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
3034
3196
  }
3035
3197
 
3036
3198
  .sd-rating__item-star:focus-within svg {
3037
- stroke: var(--primary, #19b394);
3199
+ stroke: var(--sjs-primary-backcolor, var(--primary, #19b394));
3038
3200
  fill: none;
3039
3201
  }
3040
3202
 
@@ -3045,7 +3207,7 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
3045
3207
 
3046
3208
  .sd-rating__item-star--highlighted svg {
3047
3209
  stroke: var(--sjs-border-default, var(--border, #d6d6d6));
3048
- fill: var(--sjs-general-backcolor-dark, rgb(248, 248, 248));
3210
+ fill: var(--sjs-questionpanel-hovercolor, var(--sjs-general-backcolor-dark, rgb(248, 248, 248)));
3049
3211
  }
3050
3212
 
3051
3213
  .sd-rating__item-star--selected.sd-rating__item-star--unhighlighted:focus-within svg {
@@ -3054,8 +3216,8 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
3054
3216
  }
3055
3217
 
3056
3218
  .sd-rating__item-star--selected:focus-within svg {
3057
- stroke: var(--primary, #19b394);
3058
- fill: var(--primary, #19b394);
3219
+ stroke: var(--sjs-primary-backcolor, var(--primary, #19b394));
3220
+ fill: var(--sjs-primary-backcolor, var(--primary, #19b394));
3059
3221
  }
3060
3222
  .sd-rating__item-star--selected:focus-within .sv-star {
3061
3223
  display: none;
@@ -3065,7 +3227,10 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
3065
3227
  }
3066
3228
 
3067
3229
  .sd-rating__item-text.sd-rating__item-text {
3068
- font-size: calc(1 * var(--sjs-font-size, calc(2 * var(--base-unit, 8px))));
3230
+ font-family: var(--sjs-font-editorfont-family, var(--font-family));
3231
+ font-weight: var(--sjs-font-editorfont-weight, 400);
3232
+ color: var(--sjs-font-editorfont-color, var(--sjs-general-dim-forecolor, rgba(0, 0, 0, 0.91)));
3233
+ font-size: var(--sjs-font-editorfont-size, calc(1 * var(--sjs-font-size, var(--sjs-font-size, calc(2 * var(--base-unit, 8px))))));
3069
3234
  line-height: calc(3 * var(--base-unit, 8px));
3070
3235
  display: inline-block;
3071
3236
  }
@@ -3173,7 +3338,7 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
3173
3338
  }
3174
3339
 
3175
3340
  .sd-input.sd-dropdown:focus-within {
3176
- box-shadow: 0 0 0 2px var(--primary, #19b394);
3341
+ box-shadow: 0 0 0 2px var(--sjs-primary-backcolor, var(--primary, #19b394));
3177
3342
  }
3178
3343
 
3179
3344
  .sd-input.sd-dropdown:focus-within .sd-dropdown__filter-string-input {
@@ -3189,14 +3354,16 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
3189
3354
  border: none;
3190
3355
  outline: none;
3191
3356
  padding: 0;
3192
- font-family: var(--font-family, var(--font-family));
3193
- font-size: calc(1 * var(--sjs-font-size, calc(2 * var(--base-unit, 8px))));
3357
+ font-family: var(--sjs-font-editorfont-family, var(--font-family));
3358
+ font-weight: var(--sjs-font-editorfont-weight, 400);
3359
+ color: var(--sjs-font-editorfont-color, var(--sjs-general-dim-forecolor, rgba(0, 0, 0, 0.91)));
3360
+ font-size: var(--sjs-font-editorfont-size, calc(1 * var(--sjs-font-size, var(--sjs-font-size, calc(2 * var(--base-unit, 8px))))));
3361
+ line-height: calc(3 * var(--base-unit, 8px));
3194
3362
  background-color: transparent;
3195
3363
  overflow: hidden;
3196
3364
  text-overflow: ellipsis;
3197
3365
  white-space: nowrap;
3198
3366
  display: inline-block;
3199
- line-height: calc(3 * var(--base-unit, 8px));
3200
3367
  appearance: none;
3201
3368
  height: 100%;
3202
3369
  }
@@ -3260,7 +3427,7 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
3260
3427
  }
3261
3428
 
3262
3429
  .sd-input.sd-tagbox:focus-within {
3263
- box-shadow: 0 0 0 2px var(--primary, #19b394);
3430
+ box-shadow: 0 0 0 2px var(--sjs-primary-backcolor, var(--primary, #19b394));
3264
3431
  }
3265
3432
 
3266
3433
  .sv-tagbox__item {
@@ -3268,7 +3435,7 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
3268
3435
  display: flex;
3269
3436
  height: calc(3 * var(--base-unit, 8px));
3270
3437
  padding: calc(1 * var(--base-unit, 8px)) calc(1.5 * var(--base-unit, 8px));
3271
- background-color: var(--primary, #19b394);
3438
+ background-color: var(--sjs-primary-backcolor, var(--primary, #19b394));
3272
3439
  border-radius: calc(0.5 * var(--sjs-corner-radius, 4px));
3273
3440
  }
3274
3441
 
@@ -3292,7 +3459,7 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
3292
3459
  height: calc(3 * var(--base-unit, 8px));
3293
3460
  padding: 0;
3294
3461
  padding-inline-start: calc(4 * var(--base-unit, 8px));
3295
- background: linear-gradient(270deg, var(--primary, #19b394) 53.12%, rgba(25, 179, 148, 0) 100%);
3462
+ background: linear-gradient(270deg, var(--sjs-primary-backcolor, var(--primary, #19b394)) 53.12%, rgba(25, 179, 148, 0) 100%);
3296
3463
  }
3297
3464
 
3298
3465
  .sd-tagbox-item_clean-button-svg {
@@ -3344,7 +3511,7 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
3344
3511
  [dir=rtl] .sd-tagbox-item_clean-button,
3345
3512
  [style*="direction:rtl"] .sd-tagbox-item_clean-button,
3346
3513
  [style*="direction: rtl"] .sd-tagbox-item_clean-button {
3347
- background: linear-gradient(90deg, var(--primary, #19b394) 53.12%, rgba(25, 179, 148, 0) 100%);
3514
+ background: linear-gradient(90deg, var(--sjs-primary-backcolor, var(--primary, #19b394)) 53.12%, rgba(25, 179, 148, 0) 100%);
3348
3515
  }
3349
3516
 
3350
3517
  .sd-tagbox.sd-tagbox--empty .sd-tagbox__hint,
@@ -3427,7 +3594,7 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
3427
3594
  .sd-imagepicker__check-icon {
3428
3595
  width: calc(3 * var(--base-unit, 8px));
3429
3596
  height: calc(3 * var(--base-unit, 8px));
3430
- fill: var(--primary, #19b394);
3597
+ fill: var(--sjs-primary-backcolor, var(--primary, #19b394));
3431
3598
  }
3432
3599
 
3433
3600
  .sd-imagepicker__item--checked .sd-imagepicker__check-decorator {
@@ -3507,11 +3674,10 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
3507
3674
  .sd-image__no-image {
3508
3675
  background: var(--background-dim-light, #f9f9f9);
3509
3676
  min-width: calc(5 * var(--base-unit, 8px));
3510
- min-height: calc(5 * var(--base-unit, 8px));
3677
+ min-height: calc(27.5 * var(--base-unit, 8px));
3511
3678
  width: 100%;
3512
3679
  height: 100%;
3513
- position: absolute;
3514
- inset-block-start: 0;
3680
+ position: relative;
3515
3681
  display: flex;
3516
3682
  align-items: center;
3517
3683
  justify-content: center;
@@ -3539,7 +3705,7 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
3539
3705
  .sd-progress__bar {
3540
3706
  position: relative;
3541
3707
  height: 100%;
3542
- background-color: var(--primary, #19b394);
3708
+ background-color: var(--sjs-primary-backcolor, var(--primary, #19b394));
3543
3709
  overflow: hidden;
3544
3710
  }
3545
3711
 
@@ -3568,7 +3734,7 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
3568
3734
  width: max-content;
3569
3735
  position: relative;
3570
3736
  padding: calc(0.5 * var(--base-unit, 8px));
3571
- background: var(--sjs-editor-background, var(--background-dim-light, #f9f9f9));
3737
+ background: var(--sjs-editorpanel-backcolor, var(--sjs-editor-background, var(--background-dim-light, #f9f9f9)));
3572
3738
  box-shadow: inset 0px 1px 2px rgba(0, 0, 0, 0.15);
3573
3739
  border-radius: calc(12.5 * var(--base-unit, 8px));
3574
3740
  }
@@ -3576,9 +3742,10 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
3576
3742
  .sd-boolean__thumb,
3577
3743
  .sd-boolean__label {
3578
3744
  display: block;
3745
+ font-family: var(--sjs-font-editorfont-family, var(--font-family));
3746
+ font-weight: var(--sjs-font-editorfont-weight, 400);
3747
+ font-size: var(--sjs-font-editorfont-size, calc(1 * var(--sjs-font-size, var(--sjs-font-size, calc(2 * var(--base-unit, 8px))))));
3579
3748
  color: var(--sjs-general-forecolor-light, var(--foreground-light, #909090));
3580
- font-family: var(--font-family, var(--font-family));
3581
- font-size: calc(1 * var(--sjs-font-size, calc(2 * var(--base-unit, 8px))));
3582
3749
  line-height: calc(3 * var(--base-unit, 8px));
3583
3750
  padding: calc(1 * var(--base-unit, 8px)) calc(3 * var(--base-unit, 8px));
3584
3751
  }
@@ -3597,7 +3764,7 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
3597
3764
  }
3598
3765
 
3599
3766
  .sd-boolean__control:focus ~ .sd-boolean__switch {
3600
- box-shadow: inset 0 0 0 2px var(--primary, #19b394);
3767
+ box-shadow: inset 0 0 0 2px var(--sjs-primary-backcolor, var(--primary, #19b394));
3601
3768
  }
3602
3769
 
3603
3770
  .sd-boolean.sd-boolean--indeterminate .sd-boolean__switch {
@@ -3615,7 +3782,7 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
3615
3782
  transition-duration: 0.2s;
3616
3783
  transition-property: margin-left, transform;
3617
3784
  transition-timing-function: linear;
3618
- color: var(--primary, #19b394);
3785
+ color: var(--sjs-primary-backcolor, var(--primary, #19b394));
3619
3786
  font-weight: 600;
3620
3787
  margin-left: 0%;
3621
3788
  transform: translateX(0);
@@ -3641,13 +3808,13 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
3641
3808
  }
3642
3809
 
3643
3810
  .sd-boolean.sd-boolean--allowhover .sd-boolean__thumb-ghost:hover {
3644
- background-color: var(--sjs-general-dim-backcolor-dark, rgb(243, 243, 243));
3811
+ background-color: var(--sjs-editorpanel-hovercolor, var(--sjs-general-dim-backcolor-dark, rgb(243, 243, 243)));
3645
3812
  border-radius: calc(12.5 * var(--base-unit, 8px));
3646
3813
  }
3647
3814
 
3648
3815
  .svc-question__content .sd-boolean:not(.sd-boolean--checked):not(.sd-boolean--indeterminate) .sd-boolean__label:nth-of-type(1),
3649
3816
  .svc-question__content .sd-boolean--checked .sd-boolean__label:nth-of-type(2) {
3650
- color: var(--primary, #19b394);
3817
+ color: var(--sjs-primary-backcolor, var(--primary, #19b394));
3651
3818
  font-weight: 600;
3652
3819
  background: var(--background, #fff);
3653
3820
  box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.15);
@@ -3846,7 +4013,7 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
3846
4013
 
3847
4014
  .sv-tab-item.sv-tab-item--pressed {
3848
4015
  color: var(--sjs-general-forecolor, var(--foreground, #161616));
3849
- box-shadow: inset 0px -2px 0px var(--primary, #19b394);
4016
+ box-shadow: inset 0px -2px 0px var(--sjs-primary-backcolor, var(--primary, #19b394));
3850
4017
  }
3851
4018
 
3852
4019
  .sv-tab-item__title {
@@ -3905,9 +4072,9 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
3905
4072
  }
3906
4073
 
3907
4074
  .sd-file__decorator--drag {
3908
- border: 1px solid var(--primary, #19b394);
3909
- box-shadow: inset 0 0 0 1px var(--primary, #19b394);
3910
- background: var(--primary-light, rgba(25, 179, 148, 0.1));
4075
+ border: 1px solid var(--sjs-primary-backcolor, var(--primary, #19b394));
4076
+ box-shadow: inset 0 0 0 1px var(--sjs-primary-backcolor, var(--primary, #19b394));
4077
+ background: var(--sjs-primary-backcolor-light, var(--primary-light, rgba(25, 179, 148, 0.1)));
3911
4078
  z-index: 1;
3912
4079
  }
3913
4080
 
@@ -3927,7 +4094,7 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
3927
4094
  display: block;
3928
4095
  margin-top: calc(1 * var(--base-unit, 8px));
3929
4096
  font-weight: 600;
3930
- color: var(--primary, #19b394);
4097
+ color: var(--sjs-primary-backcolor, var(--primary, #19b394));
3931
4098
  cursor: pointer;
3932
4099
  }
3933
4100
 
@@ -4088,10 +4255,10 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
4088
4255
  }
4089
4256
 
4090
4257
  .sd-file > input:focus + .sd-file__decorator .sd-file__choose-btn.sd-file__choose-btn--icon use {
4091
- fill: var(--primary, #19b394);
4258
+ fill: var(--sjs-primary-backcolor, var(--primary, #19b394));
4092
4259
  }
4093
4260
  .sd-file > input:focus + .sd-file__decorator .sd-file__choose-btn:not(.sd-file__choose-btn--icon) {
4094
- background-color: var(--primary-light, rgba(25, 179, 148, 0.1));
4261
+ background-color: var(--sjs-primary-backcolor-light, var(--primary-light, rgba(25, 179, 148, 0.1)));
4095
4262
  }
4096
4263
 
4097
4264
  .sd-file__drag-area {
@@ -4135,37 +4302,38 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
4135
4302
  font-size: calc(1 * var(--sjs-font-size, calc(2 * var(--base-unit, 8px))));
4136
4303
  line-height: calc(3 * var(--base-unit, 8px));
4137
4304
  text-align: center;
4138
- color: var(--primary, #19b394);
4305
+ color: var(--sjs-primary-backcolor, var(--primary, #19b394));
4139
4306
  border: 2px solid transparent;
4140
4307
  outline: none;
4141
4308
  }
4142
4309
 
4143
- .sd-btn:not(:disabled):hover {
4144
- background-color: var(--sjs-general-backcolor-dark, rgb(248, 248, 248));
4310
+ .sd-btn:hover {
4311
+ background-color: var(--sjs-questionpanel-hovercolor, var(--sjs-general-backcolor-dark, rgb(248, 248, 248)));
4145
4312
  }
4146
4313
 
4147
- .sd-btn:not(:disabled):focus {
4148
- box-shadow: 0 0 0 2px var(--primary, #19b394);
4314
+ .sd-btn:focus {
4315
+ box-shadow: 0 0 0 2px var(--sjs-primary-backcolor, var(--primary, #19b394));
4149
4316
  }
4150
4317
 
4151
4318
  .sd-btn:disabled {
4152
4319
  color: var(--sjs-general-forecolor, var(--foreground, #161616));
4153
4320
  opacity: 0.25;
4154
- cursor: default;
4321
+ pointer-events: none;
4155
4322
  }
4156
4323
 
4157
4324
  .sd-btn--action {
4158
- background-color: var(--primary, #19b394);
4325
+ background-color: var(--sjs-primary-backcolor, var(--primary, #19b394));
4159
4326
  color: var(--sjs-primary-forecolor, var(--primary-foreground, #fff));
4160
4327
  }
4161
4328
 
4162
- .sd-btn--action:not(:disabled):hover {
4329
+ .sd-btn--action:hover {
4163
4330
  color: var(--sjs-primary-forecolor, var(--primary-foreground, #fff));
4164
4331
  background-color: var(--sjs-primary-backcolor-dark, rgb(20, 164, 139));
4165
4332
  }
4166
4333
 
4167
4334
  .sd-btn--action:disabled {
4168
4335
  color: var(--sjs-primary-forecolor-light, var(--primary-foreground-disabled, rgba(255, 255, 255, 0.25)));
4336
+ pointer-events: none;
4169
4337
  }
4170
4338
 
4171
4339
  .sd-body {
@@ -4248,7 +4416,7 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
4248
4416
  }
4249
4417
 
4250
4418
  .sd-multipletext__item-container.sd-input:focus-within {
4251
- box-shadow: inset 0 0 0 2px var(--primary, #19b394);
4419
+ box-shadow: inset 0 0 0 2px var(--sjs-primary-backcolor, var(--primary, #19b394));
4252
4420
  }
4253
4421
 
4254
4422
  .sd-multipletext__item-container {
@@ -4311,7 +4479,7 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
4311
4479
  border: none;
4312
4480
  background: transparent;
4313
4481
  padding: calc(1 * var(--base-unit, 8px)) calc(3 * var(--base-unit, 8px));
4314
- color: var(--primary, #19b394);
4482
+ color: var(--sjs-primary-backcolor, var(--primary, #19b394));
4315
4483
  border-radius: calc(12.5 * var(--base-unit, 8px));
4316
4484
  font-weight: 600;
4317
4485
  font-family: var(--font-family, var(--font-family));
@@ -4348,7 +4516,7 @@ svg.sd-action--icon {
4348
4516
  .sd-action:not(.sd-action--pressed):hover,
4349
4517
  .sd-action:not(.sd-action--pressed):focus {
4350
4518
  outline: none;
4351
- background-color: var(--primary-light, rgba(25, 179, 148, 0.1));
4519
+ background-color: var(--sjs-primary-backcolor-light, var(--primary-light, rgba(25, 179, 148, 0.1)));
4352
4520
  cursor: pointer;
4353
4521
  opacity: 1;
4354
4522
  }
@@ -4407,7 +4575,7 @@ svg.sd-action--icon {
4407
4575
 
4408
4576
  .sd-context-btn:hover use,
4409
4577
  .sd-context-btn:focus use {
4410
- fill: var(--primary, #19b394);
4578
+ fill: var(--sjs-primary-backcolor, var(--primary, #19b394));
4411
4579
  }
4412
4580
  .sd-context-btn:hover.sd-context-btn--negative use,
4413
4581
  .sd-context-btn:focus.sd-context-btn--negative use {
@@ -4479,7 +4647,7 @@ svg.sd-action--icon {
4479
4647
 
4480
4648
  .sd-progress-buttons__list .sd-progress-buttons__list-element--current,
4481
4649
  .sd-progress-buttons__list .sd-progress-buttons__list-element--passed {
4482
- border-top: 2px solid var(--primary, #19b394);
4650
+ border-top: 2px solid var(--sjs-primary-backcolor, var(--primary, #19b394));
4483
4651
  }
4484
4652
 
4485
4653
  .sd-progress-buttons__list-element--nonclickable .sd-progress-buttons__page-title {
@@ -4488,7 +4656,7 @@ svg.sd-action--icon {
4488
4656
 
4489
4657
  .sd-progress-buttons__list-element--current .sd-progress-buttons__page-title,
4490
4658
  .sd-progress-buttons__list-element--current .sd-progress-buttons__page-description {
4491
- color: var(--primary, #19b394);
4659
+ color: var(--sjs-primary-backcolor, var(--primary, #19b394));
4492
4660
  }
4493
4661
 
4494
4662
  .sd-progress-buttons__page-title {
@@ -4515,7 +4683,7 @@ svg.sd-action--icon {
4515
4683
  min-width: calc(32 * var(--base-unit, 8px));
4516
4684
  }
4517
4685
  .sv_progress-toc .sv-list__item.sv-list__item--selected .sv-list__item-body {
4518
- background: var(--primary-light, rgba(25, 179, 148, 0.1));
4686
+ background: var(--sjs-primary-backcolor-light, var(--primary-light, rgba(25, 179, 148, 0.1)));
4519
4687
  color: var(--sjs-general-forecolor, var(--foreground, #161616));
4520
4688
  font-weight: 400;
4521
4689
  }
@@ -4595,7 +4763,7 @@ svg.sd-action--icon {
4595
4763
  height: 100%;
4596
4764
  width: 100%;
4597
4765
  transform: rotate(-90deg);
4598
- stroke: var(--primary, #19b394);
4766
+ stroke: var(--sjs-primary-backcolor, var(--primary, #19b394));
4599
4767
  stroke-dashoffset: 0;
4600
4768
  fill: none;
4601
4769
  stroke-width: 4px;
@@ -4615,13 +4783,13 @@ svg.sd-action--icon {
4615
4783
  top: 50%;
4616
4784
  transform: translate(-50%, -50%);
4617
4785
  padding: calc(1 * var(--base-unit, 8px));
4618
- color: var(--primary, #19b394);
4786
+ color: var(--sjs-primary-backcolor, var(--primary, #19b394));
4619
4787
  font-weight: 700;
4620
4788
  font-size: calc(var(--sd-timer-size) / 144 * 32);
4621
4789
  }
4622
4790
 
4623
4791
  .sd-timer__text--major {
4624
- color: var(--primary, #19b394);
4792
+ color: var(--sjs-primary-backcolor, var(--primary, #19b394));
4625
4793
  font-weight: 700;
4626
4794
  font-size: calc(var(--sd-timer-size) / 144 * 32);
4627
4795
  }