optimized-react-component-library-xyz123 0.20.1 → 0.20.2

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 (13) hide show
  1. package/dist/index.d.mts +20 -10
  2. package/dist/index.d.ts +20 -10
  3. package/dist/index.js +614 -527
  4. package/dist/index.js.map +1 -1
  5. package/dist/index.mjs +605 -519
  6. package/dist/index.mjs.map +1 -1
  7. package/package.json +5 -3
  8. package/src/css/darkMode.css +344 -376
  9. package/src/css/mobileView.css +5 -67
  10. package/src/css/questions.css +57 -44
  11. package/src/css/styles.css +37 -98
  12. package/src/icons/arrow-down-darkmode.svg +5 -0
  13. package/src/icons/arrow-down.svg +5 -0
package/src/css/darkMode.css CHANGED
@@ -1,385 +1,353 @@
1
- :root{
2
- --dark-background:#414141;
3
- --dark-text:#ffffff;
4
- --dark-action: #B07CBF;
5
- --dark-error: #D75055;
6
- --dark-main:#141414;
7
- --dark-info: #808080;
8
- --dark-orientation-active:#F4BF56;
9
- --dark-background-second:#200827;
10
- --dark-background-third:#747474;
1
+ :root {
2
+ --dark-background: #414141;
3
+ --dark-text: #ffffff;
4
+ --dark-action: #b07cbf;
5
+ --dark-error: #d75055;
6
+ --dark-main: #141414;
7
+ --dark-info: #808080;
8
+ --dark-orientation-active: #f4bf56;
9
+ --dark-background-second: #200827;
11
10
  }
12
11
 
13
12
  @media (prefers-color-scheme: dark) {
14
- /* ---------- GENERAL ---------- */
15
-
16
- body {
17
- background-color: var(--dark-background);
18
- color: var(--dark-text);
19
- }
20
-
21
-
22
- /*----------COOKIE BANNER-------*/
23
- .pts-cookieBanner {
24
- background-color: var(--dark-main) !important;
25
- border-bottom: 2px solid var(--dark-action) !important;
26
- }
27
-
28
- .pts-cookieBanner a{
29
- color: var(--dark-action) !important;
30
- }
31
-
32
- .pts-cookieBanner button {
33
- background-color: var(--dark-action) !important;
34
- border-color: var(--dark-action)!important;
35
- color: var(--dark-main)!important;
36
- }
37
-
38
- .pts-cookieBanner button:focus,
39
- .pts-cookieBanner button:hover{
40
- background-color: var(--dark-main)!important;;
41
- border: 2px solid var(--dark-action)!important;;
42
- color: var(--dark-action)!important;;
43
- transition: 0.2s;
44
- }
45
-
46
- .pts-cookieBanner-Links svg rect{
47
- fill:var(--dark-action);
48
- }
49
- .pts-cookieBanner-Links svg path{
50
- fill:var(--dark-main);
51
- }
52
-
53
-
54
- /*-----------HEADER--------------*/
55
-
56
- .pts-header-container{
57
- background-color: var(--dark-background-second);
58
- }
59
-
60
- .pts-header-container svg{
61
- color: var(--dark-text);
62
- }
63
-
64
- .pts-header-container svg path{
65
- fill: var(--dark-text);
66
- }
67
-
68
- .pts-languageButton{
69
- color:var(--dark-text);
70
- }
71
-
72
- /*-------MAIN CONTENT-------*/
73
- section,
74
- .pts-form-step-header {
75
- background-color: var(--dark-main);
76
- }
77
-
78
- #main-content a {
79
- color: var(--dark-action);
80
- }
81
-
82
- /* ---------- SERVICE HEADLINE AND BODY ---------- */
83
-
84
- .pts-serviceHeadlineAndBody-container a {
85
- color: var(--dark-action);
86
- }
87
-
88
- .pts-serviceHeadlineAndBody-container a svg,
89
- .MoreInfoIcon svg {
90
- background-color: var(--dark-action);
91
- }
92
-
93
- .pts-serviceHeadlineAndBody-container a svg path,
94
- .MoreInfoIcon svg path {
95
- fill: var(--dark-main);
96
- }
97
-
98
-
99
- .pts-moreinfo-list a {
100
- color: var(--dark-action);
101
- }
102
-
103
- .pts-moreinfo-list svg {
104
- background-color: var(--dark-action);
105
- }
106
-
107
- .pts-moreinfo-list svg path {
108
- fill: var(--dark-main);
109
- }
110
-
111
- /* ---------- STEPPER ---------- */
112
-
113
- .pts-stepperDot {
114
- background-color: var(--dark-text);
115
- color: var(--dark-main);
116
- }
117
-
118
- .pts-stepperDotActive {
119
- background-color: var(--dark-orientation-active);
120
- }
121
-
122
- .pts-stepper-step:not(:last-child)::after {
123
- background-color: var(--dark-text);
124
- }
125
-
126
- .pts-stepperDotDone,
127
- .pts-stepperDotDone svg path {
128
- background-color: var(--dark-action);
129
- stroke: var(--dark-main);
130
- }
131
-
132
- /*-----------QUESTIONS--------------*/
133
-
134
- .pts-root-about,
135
- .pts-about {
136
- color: var(--dark-info);
137
- }
138
-
139
- .pts-root-question input[type='text']:focus,
140
- .pts-root-question input[type='email']:focus,
141
- .pts-root-question input[type='tel']:focus {
142
- border: 0.2rem solid var(--dark-action);
143
- }
144
-
145
- .errorDot {
146
- background-color: var(--dark-error);
147
- }
148
-
149
- .errorText,
150
- .pts-root-mandatoryAsterisk {
151
- color: var(--dark-error);
152
- }
153
-
154
- .pts-root-question-input-error-border,
155
- .pts-root-question-input-error-border,
156
- .pts-root-question-input-error-border {
157
- border: 0.15rem solid var(--dark-error) !important;
158
- }
159
-
160
- button:focus-visible,
161
- a:focus-visible,
162
- input:focus-visible,
163
- textarea:focus-visible,
164
- .filePickLabel:focus-visible {
165
- outline-color: #fff !important;
166
- box-shadow: 0 0 0 4px #000 !important;
167
- }
168
-
169
- .using-mouse input:focus-visible,
170
- .using-mouse button:focus-visible,
171
- .using-mouse textarea:focus-visible,
172
- .using-mouse a:focus-visible,
173
- .using-mouse .filePickLabel:focus-visible {
174
- box-shadow: 0 0 0 0px #000 !important;
175
- }
176
-
177
- .pts-root-question input[type='text'],
178
- .pts-root-question input[type='email'],
179
- .pts-root-question input[type='tel'] {
180
- border: 1px solid var(--dark-info);
181
- background-color: var(--dark-main);
182
- color: var(--dark-text);
183
- }
184
-
185
-
186
- /* ---------- STEPPER BUTTON ---------- */
187
-
188
- .pts-forwardButton {
189
- background-color: var(--dark-action);
190
- border-color: var(--dark-action);
191
- color: var(--dark-main);
192
- }
193
-
194
- .pts-backButton {
195
- background-color: var(--dark-action);
196
- border-color: var(--dark-action);
197
- color: var(--dark-main);
198
- }
199
-
200
- .pts-backButton:focus,
201
- .pts-backButton:hover,
202
- .pts-forwardButton:focus,
203
- .pts-forwardButton:hover,
204
- .btn-upload:focus,
205
- .btn-upload:hover {
206
- background-color: var(--dark-main);
207
- border-color: var(--dark-action);
208
- color: var(--dark-action);
209
- }
210
-
211
- /* ---------- RADIO MULTIPLE ---------- */
212
-
213
- .pts-radioMultiple-container input[type='radio'] {
214
- border-color: var(--dark-info);
215
- }
216
-
217
- .pts-radioMultiple-container input[type='radio']:checked::before {
218
- background-color: var(--dark-action);
219
- }
220
-
221
- /* ---------- MULTIPLE CHECKBOXES ---------- */
222
-
223
- .pts-multipleCheckboxes-container input[type='checkbox'] {
224
- background-color: var(--dark-main);
225
- border-color: var(--dark-info);
226
- }
227
-
228
- .pts-multipleCheckboxes-container input[type='checkbox']:checked {
229
- background-color: var(--dark-action);
230
- background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10l3 3l6-6'/%3e%3c/svg%3e") !important;
231
- }
13
+ /* ---------- GENERAL ---------- */
14
+
15
+ body {
16
+ background-color: var(--dark-background);
17
+ color: var(--dark-text);
18
+ }
19
+
20
+ /*----------COOKIE BANNER-------*/
21
+ .pts-cookieBanner {
22
+ background-color: var(--dark-main) !important;
23
+ border-bottom: 2px solid var(--dark-action) !important;
24
+ }
25
+
26
+ .pts-cookieBanner a {
27
+ color: var(--dark-action) !important;
28
+ }
29
+
30
+ .pts-cookieBanner button {
31
+ background-color: var(--dark-action) !important;
32
+ border-color: var(--dark-action) !important;
33
+ color: var(--dark-main) !important;
34
+ }
35
+
36
+ .pts-cookieBanner button:focus,
37
+ .pts-cookieBanner button:hover {
38
+ background-color: var(--dark-main) !important;
39
+ border: 2px solid var(--dark-action) !important;
40
+ color: var(--dark-action) !important;
41
+ transition: 0.2s;
42
+ }
43
+
44
+ .pts-cookieBanner-Links svg rect {
45
+ fill: var(--dark-action);
46
+ }
47
+ .pts-cookieBanner-Links svg path {
48
+ fill: var(--dark-main);
49
+ }
50
+
51
+ /*-----------HEADER--------------*/
52
+
53
+ .pts-header-container {
54
+ background-color: var(--dark-background-second);
55
+ }
56
+
57
+ .pts-header-container svg {
58
+ color: var(--dark-text);
59
+ }
60
+
61
+ .pts-header-container svg path {
62
+ fill: var(--dark-text);
63
+ }
64
+
65
+ .pts-languageButton {
66
+ color: var(--dark-text);
67
+ }
68
+
69
+ /*-------MAIN CONTENT-------*/
70
+ section,
71
+ .pts-form-step-header {
72
+ background-color: var(--dark-main);
73
+ }
74
+
75
+ #main-content a {
76
+ color: var(--dark-action);
77
+ }
78
+
79
+ /* ---------- SERVICE HEADLINE AND BODY ---------- */
80
+
81
+ .pts-serviceHeadlineAndBody-container a {
82
+ color: var(--dark-action);
83
+ }
84
+
85
+ .pts-serviceHeadlineAndBody-container a svg,
86
+ .MoreInfoIcon svg {
87
+ background-color: var(--dark-action);
88
+ }
89
+
90
+ .pts-serviceHeadlineAndBody-container a svg path,
91
+ .MoreInfoIcon svg path {
92
+ fill: var(--dark-main);
93
+ }
94
+
95
+ .pts-moreinfo-list a {
96
+ color: var(--dark-action);
97
+ }
98
+
99
+ .pts-moreinfo-list svg {
100
+ background-color: var(--dark-action);
101
+ }
102
+
103
+ .pts-moreinfo-list svg path {
104
+ fill: var(--dark-main);
105
+ }
106
+
107
+ /* ---------- STEPPER ---------- */
108
+
109
+ .pts-stepperDot {
110
+ background-color: var(--dark-text);
111
+ color: var(--dark-main);
112
+ }
113
+
114
+ .pts-stepperDotActive {
115
+ background-color: var(--dark-orientation-active);
116
+ }
117
+
118
+ .pts-stepper-step:not(:last-child)::after {
119
+ background-color: var(--dark-text);
120
+ }
121
+
122
+ .pts-stepperDotDone,
123
+ .pts-stepperDotDone svg path {
124
+ background-color: var(--dark-action);
125
+ stroke: var(--dark-main);
126
+ }
127
+
128
+ /*-----------QUESTIONS--------------*/
129
+
130
+ .pts-root-about,
131
+ .pts-about {
132
+ color: var(--dark-info);
133
+ }
134
+
135
+ .pts-root-question input[type='text']:focus,
136
+ .pts-root-question input[type='email']:focus,
137
+ .pts-root-question input[type='tel']:focus {
138
+ border: 0.2rem solid var(--dark-action);
139
+ }
140
+
141
+ .errorDot {
142
+ background-color: var(--dark-error);
143
+ }
144
+
145
+ .errorText,
146
+ .pts-root-mandatoryAsterisk {
147
+ color: var(--dark-error);
148
+ }
149
+
150
+ .pts-root-question-input-error-border,
151
+ .pts-root-question-input-error-border,
152
+ .pts-root-question-input-error-border {
153
+ border: 0.15rem solid var(--dark-error) !important;
154
+ }
155
+
156
+ button:focus-visible,
157
+ a:focus-visible,
158
+ input:focus-visible,
159
+ textarea:focus-visible,
160
+ .filePickLabel:focus-visible {
161
+ outline-color: #fff !important;
162
+ box-shadow: 0 0 0 4px #000 !important;
163
+ }
164
+
165
+ .using-mouse input:focus-visible,
166
+ .using-mouse button:focus-visible,
167
+ .using-mouse textarea:focus-visible,
168
+ .using-mouse a:focus-visible,
169
+ .using-mouse .filePickLabel:focus-visible {
170
+ box-shadow: 0 0 0 0px #000 !important;
171
+ }
172
+
173
+ .pts-root-question input[type='text'],
174
+ .pts-root-question input[type='email'],
175
+ .pts-root-question input[type='tel'] {
176
+ border: 1px solid var(--dark-info);
177
+ background-color: var(--dark-main);
178
+ color: var(--dark-text);
179
+ }
180
+
181
+ /* ---------- STEPPER BUTTON ---------- */
182
+
183
+ .pts-forwardButton {
184
+ background-color: var(--dark-action);
185
+ border-color: var(--dark-action);
186
+ color: var(--dark-main);
187
+ }
188
+
189
+ .pts-backButton {
190
+ background-color: var(--dark-action);
191
+ border-color: var(--dark-action);
192
+ color: var(--dark-main);
193
+ }
194
+
195
+ .pts-backButton:focus,
196
+ .pts-backButton:hover,
197
+ .pts-forwardButton:focus,
198
+ .pts-forwardButton:hover,
199
+ .btn-upload:focus,
200
+ .btn-upload:hover {
201
+ background-color: var(--dark-main);
202
+ border-color: var(--dark-action);
203
+ color: var(--dark-action);
204
+ }
205
+
206
+ /* ---------- RADIO MULTIPLE ---------- */
207
+
208
+ .pts-radioMultiple-container input[type='radio'] {
209
+ border-color: var(--dark-info);
210
+ }
211
+
212
+ .pts-radioMultiple-container input[type='radio']:checked::before {
213
+ background-color: var(--dark-action);
214
+ }
215
+
216
+ /* ---------- MULTIPLE CHECKBOXES ---------- */
217
+
218
+ .pts-multipleCheckboxes-container input[type='checkbox'] {
219
+ background-color: var(--dark-main);
220
+ border-color: var(--dark-info);
221
+ }
222
+
223
+ .pts-multipleCheckboxes-container input[type='checkbox']:checked {
224
+ background-color: var(--dark-action);
225
+ background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10l3 3l6-6'/%3e%3c/svg%3e") !important;
226
+ }
232
227
 
233
228
  /* ---------- CHECKBOX GROUP ---------- */
234
229
 
235
- .pts-checkboxGroup-container input[type='checkbox'] {
236
- background-color: var(--dark-main);
237
- border-color: var(--dark-info);
238
- }
230
+ .pts-checkboxGroup-container input[type='checkbox'] {
231
+ background-color: var(--dark-main);
232
+ border-color: var(--dark-info);
233
+ }
239
234
 
240
- .pts-checkboxGroup-container input[type='checkbox']:checked {
241
- background-color: var(--dark-action);
242
- background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10l3 3l6-6'/%3e%3c/svg%3e") !important;
243
- }
235
+ .pts-checkboxGroup-container input[type='checkbox']:checked {
236
+ background-color: var(--dark-action);
237
+ background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10l3 3l6-6'/%3e%3c/svg%3e") !important;
238
+ }
244
239
 
245
- /* ---------- SINGLE CHECKBOX ---------- */
246
- .pts-singleCheckbox-container input[type='checkbox'] {
247
- background-color: var(--dark-main);
248
- border-color: var(--dark-info);
249
- }
250
- .pts-singleCheckbox-container input[type='checkbox']:checked {
251
- background-color: var(--dark-action);
252
- background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10l3 3l6-6'/%3e%3c/svg%3e") !important;
253
- }
254
-
255
-
256
- /* ---------- TEXTAREA ---------- */
257
-
258
- .pts-textArea-container textarea {
259
- border-color: var(--dark-info);
260
- }
261
-
262
- .pts-textArea-container textarea:focus {
263
- border-color: var(--dark-action);
264
- }
265
-
266
- .textfield-about{
267
- color: var(--dark-info);
268
- }
269
-
270
- /* ---------- ADD FILE QUESTION ---------- */
271
- .filePickText{
272
- color: var(--dark-text)!important;
273
- }
274
-
275
- .filePickButton {
276
- color: var(--dark-main) !important;
277
- }
278
-
279
- .DropZone{
280
- background-color:var(--dark-main);
281
- color: var(--dark-text);
282
- border-color: var(--dark-info);
283
- }
284
-
285
- .DropZone::before {
286
- border-color: var(--dark-info);
287
- }
288
-
289
- .DropZone:hover {
290
- background-color:var(--dark-background);
291
- }
292
-
293
- .DropZone svg {
294
- background: var(--dark-action);
295
- border-color: var(--dark-action);
296
- }
297
-
298
- .DropZone svg path{
299
- fill: var(--dark-main);
300
- }
301
-
302
- .selectedFilesLinkButton,
303
- .error-close{
304
- color: var(--dark-action);
305
- }
306
-
307
- .error-close svg path{
308
- stroke: var(--dark-action);
309
- }
310
-
311
- .errorMessageAddingFile{
312
- color: var(--dark-error);
313
- }
314
-
315
- .selectedFilesLinkButton:hover,
316
- .error-close:hover{
317
- color: var(--dark-action);
318
- }
319
-
320
- /* ---------- EDIT PREVIEW LINK ---------- */
321
-
322
- .pts-editPreviewLink-container button {
323
- color: var(--dark-action);
324
- }
325
-
326
- /* ---------- GRANSKA ---------- */
327
-
328
- .no-answer-preview-page {
329
- color: var(--dark-info);
330
- }
331
-
332
-
333
- /* ---------- ERROR SUMMARY ---------- */
334
-
335
- .pts-errorSummary-container {
336
- border: 0.1rem solid var(--dark-error);
337
- border-left: 4rem solid var(--dark-error);
338
- }
339
-
340
- .pts-errorSummary-container .errorDot {
341
- color: var(--dark-error);
342
- background-color: var(--dark-main);
343
- }
344
-
345
- .errorSummary-text {
346
- color: var(--dark-error) !important;
347
- }
348
-
349
- /*--------------------FOOTER-----------------*/
350
-
351
- .pts-footer-slogan-text-container{
352
- background-color: var(--dark-background-third);
353
- }
354
-
355
-
356
- /*-------------MODAL-----------*/
357
- .pts-modal-content{
358
- background-color: var(--dark-main);
359
- color: var(--dark-text);
360
- }
361
-
362
- .pts-spinner-border {
363
- background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='94' height='94' viewBox='0 0 94 94' fill='none'%3e%3cpath d='M47 11.75C66.4682 11.75 82.25 27.532 82.25 47C82.25 66.4682 66.4682 82.25 47 82.25C27.532 82.25 11.75 66.4682 11.75 47C11.75 27.532 27.532 11.75 47 11.75Z' stroke='%23B07CBF' stroke-opacity='0.25' stroke-width='7.83333' stroke-linecap='round'/%3e%3cpath d='M47 11.75C66.4682 11.75 82.25 27.532 82.25 47' stroke='%23B07CBF' stroke-width='7.83333' stroke-linecap='round'/%3e%3c/svg%3e");
364
-
365
- }
366
-
367
-
368
- /*-------------Autofill-----------*/
369
- input:autofill,
370
- input:autofill:hover,
371
- input:autofill:focus,
372
- input:-webkit-autofill,
373
- input:-webkit-autofill:hover,
374
- input:-webkit-autofill:focus {
375
- -webkit-box-shadow: 0 0 0 1000px var(--dark-main) inset !important;
376
- box-shadow: 0 0 0 1000px var(--dark-main) inset !important;
377
- -webkit-text-fill-color: var(--dark-text) !important; /* behåller textfärgen */
378
- background-color: var(--dark-main) !important;
379
- }
380
-
381
- /* Firefox */
382
- input:-moz-autofill {
383
- box-shadow: 0 0 0 1000px transparent inset !important;
384
- }
240
+ /* ---------- TEXTAREA ---------- */
241
+
242
+ .pts-textArea-container textarea {
243
+ border-color: var(--dark-info);
244
+ }
245
+
246
+ .pts-textArea-container textarea:focus {
247
+ border-color: var(--dark-action);
248
+ }
249
+
250
+ .textfield-about {
251
+ color: var(--dark-info);
252
+ }
253
+
254
+ /* ---------- DROPDOWN ---------- */
255
+ .pts-dropdown-container select {
256
+ border-color: var(--dark-info);
257
+ background-color: var(--dark-main);
258
+ color: var(--dark-text);
259
+ background-image: url('../icons/arrow-down-darkmode.svg');
260
+ }
261
+
262
+ /* ---------- ADD FILE QUESTION ---------- */
263
+ .filePickText {
264
+ color: var(--dark-text) !important;
265
+ }
266
+
267
+ .filePickButton {
268
+ color: var(--dark-main) !important;
269
+ }
270
+
271
+ .DropZone {
272
+ background-color: var(--dark-main);
273
+ color: var(--dark-text);
274
+ border-color: var(--dark-info);
275
+ }
276
+
277
+ .DropZone::before {
278
+ border-color: var(--dark-info);
279
+ }
280
+
281
+ .DropZone:hover {
282
+ background-color: var(--dark-background);
283
+ }
284
+
285
+ .DropZone svg {
286
+ background: var(--dark-action);
287
+ border-color: var(--dark-action);
288
+ }
289
+
290
+ .DropZone svg path {
291
+ fill: var(--dark-main);
292
+ }
293
+
294
+ .selectedFilesLinkButton,
295
+ .error-close {
296
+ color: var(--dark-action);
297
+ }
298
+
299
+ .error-close svg path {
300
+ stroke: var(--dark-action);
301
+ }
302
+
303
+ .errorMessageAddingFile {
304
+ color: var(--dark-error);
305
+ }
306
+
307
+ .selectedFilesLinkButton:hover,
308
+ .error-close:hover {
309
+ color: var(--dark-action);
310
+ }
311
+
312
+ /* ---------- EDIT PREVIEW LINK ---------- */
313
+
314
+ .pts-editPreviewLink-container button {
315
+ color: var(--dark-action);
316
+ }
317
+
318
+ .pts-editPreviewLink-container svg path {
319
+ stroke: var(--dark-action);
320
+ }
321
+
322
+ /* ---------- GRANSKA ---------- */
323
+
324
+ .no-answer-preview-page {
325
+ color: var(--dark-info);
326
+ }
327
+
328
+ /* ---------- ERROR SUMMARY ---------- */
329
+
330
+ .pts-errorSummary-container {
331
+ border: 0.1rem solid var(--dark-error);
332
+ border-left: 4rem solid var(--dark-error);
333
+ }
334
+
335
+ .pts-errorSummary-container .errorDot {
336
+ color: var(--dark-error);
337
+ background-color: var(--dark-main);
338
+ }
339
+
340
+ .errorSummary-text {
341
+ color: var(--dark-error) !important;
342
+ }
343
+
344
+ /*-------------MODAL-----------*/
345
+ .pts-modal-content {
346
+ background-color: var(--dark-main);
347
+ color: var(--dark-text);
348
+ }
349
+
350
+ .pts-spinner-border {
351
+ background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='94' height='94' viewBox='0 0 94 94' fill='none'%3e%3cpath d='M47 11.75C66.4682 11.75 82.25 27.532 82.25 47C82.25 66.4682 66.4682 82.25 47 82.25C27.532 82.25 11.75 66.4682 11.75 47C11.75 27.532 27.532 11.75 47 11.75Z' stroke='%23B07CBF' stroke-opacity='0.25' stroke-width='7.83333' stroke-linecap='round'/%3e%3cpath d='M47 11.75C66.4682 11.75 82.25 27.532 82.25 47' stroke='%23B07CBF' stroke-width='7.83333' stroke-linecap='round'/%3e%3c/svg%3e");
352
+ }
385
353
  }