@squiz/formatted-text-editor 2.0.1 → 2.1.0

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/lib/index.css CHANGED
@@ -1,5 +1,4184 @@
1
1
  @import "https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded";
2
2
 
3
+ /* node_modules/@squiz/sds/lib/package.css */
4
+ .squiz-fte-scope code[class*=language-],
5
+ .squiz-fte-scope pre[class*=language-] {
6
+ color: #ccc;
7
+ background: none;
8
+ font-family:
9
+ Consolas,
10
+ Monaco,
11
+ "Andale Mono",
12
+ "Ubuntu Mono",
13
+ monospace;
14
+ font-size: 1em;
15
+ text-align: left;
16
+ white-space: pre;
17
+ word-spacing: normal;
18
+ word-break: normal;
19
+ word-wrap: normal;
20
+ line-height: 1.5;
21
+ -moz-tab-size: 4;
22
+ -o-tab-size: 4;
23
+ tab-size: 4;
24
+ -webkit-hyphens: none;
25
+ hyphens: none;
26
+ }
27
+ .squiz-fte-scope pre[class*=language-] {
28
+ padding: 1em;
29
+ margin: .5em 0;
30
+ overflow: auto;
31
+ }
32
+ .squiz-fte-scope :not(pre) > code[class*=language-],
33
+ .squiz-fte-scope pre[class*=language-] {
34
+ background: #2d2d2d;
35
+ }
36
+ .squiz-fte-scope :not(pre) > code[class*=language-] {
37
+ padding: .1em;
38
+ border-radius: .3em;
39
+ white-space: normal;
40
+ }
41
+ .squiz-fte-scope .token.comment,
42
+ .squiz-fte-scope .token.block-comment,
43
+ .squiz-fte-scope .token.prolog,
44
+ .squiz-fte-scope .token.doctype,
45
+ .squiz-fte-scope .token.cdata {
46
+ color: #999;
47
+ }
48
+ .squiz-fte-scope .token.punctuation {
49
+ color: #ccc;
50
+ }
51
+ .squiz-fte-scope .token.tag,
52
+ .squiz-fte-scope .token.attr-name,
53
+ .squiz-fte-scope .token.namespace,
54
+ .squiz-fte-scope .token.deleted {
55
+ color: #e2777a;
56
+ }
57
+ .squiz-fte-scope .token.function-name {
58
+ color: #6196cc;
59
+ }
60
+ .squiz-fte-scope .token.boolean,
61
+ .squiz-fte-scope .token.number,
62
+ .squiz-fte-scope .token.function {
63
+ color: #f08d49;
64
+ }
65
+ .squiz-fte-scope .token.property,
66
+ .squiz-fte-scope .token.class-name,
67
+ .squiz-fte-scope .token.constant,
68
+ .squiz-fte-scope .token.symbol {
69
+ color: #f8c555;
70
+ }
71
+ .squiz-fte-scope .token.selector,
72
+ .squiz-fte-scope .token.important,
73
+ .squiz-fte-scope .token.atrule,
74
+ .squiz-fte-scope .token.keyword,
75
+ .squiz-fte-scope .token.builtin {
76
+ color: #cc99cd;
77
+ }
78
+ .squiz-fte-scope .token.string,
79
+ .squiz-fte-scope .token.char,
80
+ .squiz-fte-scope .token.attr-value,
81
+ .squiz-fte-scope .token.regex,
82
+ .squiz-fte-scope .token.variable {
83
+ color: #7ec699;
84
+ }
85
+ .squiz-fte-scope .token.operator,
86
+ .squiz-fte-scope .token.entity,
87
+ .squiz-fte-scope .token.url {
88
+ color: #67cdcc;
89
+ }
90
+ .squiz-fte-scope .token.important,
91
+ .squiz-fte-scope .token.bold {
92
+ font-weight: bold;
93
+ }
94
+ .squiz-fte-scope .token.italic {
95
+ font-style: italic;
96
+ }
97
+ .squiz-fte-scope .token.entity {
98
+ cursor: help;
99
+ }
100
+ .squiz-fte-scope .token.inserted {
101
+ color: green;
102
+ }
103
+ @keyframes skeleton-pulse {
104
+ 0% {
105
+ opacity: 1;
106
+ }
107
+ 50% {
108
+ opacity: 0.45;
109
+ }
110
+ 100% {
111
+ opacity: 1;
112
+ }
113
+ }
114
+ .squiz-fte-scope .sds-button,
115
+ .squiz-fte-scope .sds-card-link,
116
+ .squiz-fte-scope .sds-dropdown-button,
117
+ .squiz-fte-scope .sds-select-field__button {
118
+ background: transparent;
119
+ border: none;
120
+ color: #707070;
121
+ cursor: pointer;
122
+ letter-spacing: inherit;
123
+ line-height: inherit;
124
+ padding: 0;
125
+ position: relative;
126
+ }
127
+ .squiz-fte-scope .svg-wrapper {
128
+ display: flex;
129
+ }
130
+ .squiz-fte-scope .svg-wrapper svg {
131
+ fill: #707070;
132
+ }
133
+ .squiz-fte-scope .svg-wrapper--custom-color-icon svg {
134
+ fill: currentcolor;
135
+ }
136
+ .squiz-fte-scope .sds-accordion-container {
137
+ background: #fff;
138
+ border-radius: 0.25rem;
139
+ box-shadow: 0 0 2px rgba(0, 0, 0, 0.12), 0 1px 4px rgba(0, 0, 0, 0.08);
140
+ margin-top: 1rem;
141
+ position: relative;
142
+ text-align: left;
143
+ text-transform: none;
144
+ width: 100%;
145
+ }
146
+ .squiz-fte-scope .sds-accordion-container--basic {
147
+ box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1);
148
+ }
149
+ .squiz-fte-scope .sds-accordion-container--basic .sds-accordion-header::after {
150
+ content: none;
151
+ }
152
+ .squiz-fte-scope .sds-accordion-container.active .sds-accordion-header {
153
+ border-bottom: 1px solid #e0e0e0;
154
+ border-radius: 0.25rem 0.25rem 0 0;
155
+ }
156
+ .squiz-fte-scope .sds-accordion-container.active .sds-accordion-icon {
157
+ transform: translateY(-50%) rotate(90deg);
158
+ }
159
+ .squiz-fte-scope .sds-accordion-container.active .sds-accordion-content {
160
+ border-radius: 0 0 0.25rem 0.25rem;
161
+ height: auto;
162
+ padding: 1rem;
163
+ }
164
+ .squiz-fte-scope .sds-accordion-content {
165
+ background: #f7f7f7;
166
+ height: 0;
167
+ overflow: hidden;
168
+ padding: 0 1rem;
169
+ transition: all 0.3s ease;
170
+ }
171
+ .squiz-fte-scope .sds-accordion-footer {
172
+ border-top: 1px solid #ededed;
173
+ }
174
+ .squiz-fte-scope .sds-accordion-header {
175
+ background-color: #fff;
176
+ border: none;
177
+ border-radius: 0.25rem;
178
+ color: #707070;
179
+ padding: 1.25rem 1rem;
180
+ position: static;
181
+ }
182
+ .squiz-fte-scope button.sds-accordion-header {
183
+ text-align: left;
184
+ width: 100%;
185
+ }
186
+ .squiz-fte-scope .sds-accordion-header-content {
187
+ position: relative;
188
+ }
189
+ .squiz-fte-scope .sds-accordion-toggle {
190
+ background-color: #fff;
191
+ border-radius: 0 0 0.25rem 0.25rem;
192
+ margin: 0;
193
+ padding: 0.75rem;
194
+ width: 100%;
195
+ }
196
+ .squiz-fte-scope .sds-accordion-icon {
197
+ color: #707070;
198
+ display: flex;
199
+ position: absolute;
200
+ right: 0;
201
+ top: 50%;
202
+ transform: translateY(-50%) rotate(-90deg);
203
+ transition: all 0.3s ease;
204
+ }
205
+ @media screen and (min-width: 1024px) {
206
+ .squiz-fte-scope .sds-accordion-container {
207
+ box-shadow: none;
208
+ }
209
+ .squiz-fte-scope .sds-accordion-container--basic {
210
+ box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1);
211
+ }
212
+ .squiz-fte-scope .sds-accordion-header::after {
213
+ border-radius: 0.25rem;
214
+ box-shadow: 0 0 2px rgba(0, 0, 0, 0.12), 0 1px 4px rgba(0, 0, 0, 0.08);
215
+ content: "";
216
+ height: 100%;
217
+ left: 0;
218
+ pointer-events: none;
219
+ position: absolute;
220
+ top: 0;
221
+ transition: all 0.3s ease;
222
+ width: 100%;
223
+ }
224
+ .squiz-fte-scope .sds-accordion-header:hover::after {
225
+ box-shadow: 0 0 4px rgba(0, 0, 0, 0.04), 0 1px 12px rgba(0, 0, 0, 0.12);
226
+ }
227
+ }
228
+ .squiz-fte-scope .sds-activity-log__timestamp {
229
+ font-size: 0.8125rem;
230
+ font-weight: 400;
231
+ letter-spacing: 0;
232
+ line-height: 1rem;
233
+ color: #707070;
234
+ }
235
+ .squiz-fte-scope .sds-alert__wrapper {
236
+ background: #fff;
237
+ border-radius: 0.25rem;
238
+ flex-wrap: wrap;
239
+ padding: 0.5rem 0.75rem 0.5rem 0.5rem;
240
+ align-items: center;
241
+ display: flex;
242
+ }
243
+ .squiz-fte-scope .sds-alert__body-header {
244
+ align-items: center;
245
+ display: flex;
246
+ }
247
+ .squiz-fte-scope .sds-alert__body {
248
+ display: flex;
249
+ max-width: 100%;
250
+ }
251
+ .squiz-fte-scope .sds-alert__body--header {
252
+ flex-direction: column;
253
+ }
254
+ .squiz-fte-scope .sds-alert__body--header h3 {
255
+ margin: 0;
256
+ }
257
+ .squiz-fte-scope .sds-alert__icon-container {
258
+ align-self: baseline;
259
+ margin-right: 0.5rem;
260
+ }
261
+ .squiz-fte-scope .sds-alert__content {
262
+ color: #3d3d3d;
263
+ flex-grow: 1;
264
+ margin-top: 0.125rem;
265
+ padding-right: 0.375rem;
266
+ display: flex;
267
+ flex-direction: column;
268
+ font-size: 0.875rem;
269
+ font-weight: 400;
270
+ letter-spacing: -0.2px;
271
+ line-height: 1.25rem;
272
+ }
273
+ .squiz-fte-scope .sds-alert__title {
274
+ font-size: 1.25rem;
275
+ letter-spacing: -0.5px;
276
+ line-height: 1.5rem;
277
+ flex-shrink: 0;
278
+ font-weight: 700;
279
+ margin: 0;
280
+ margin-right: 0.5rem;
281
+ max-width: 100%;
282
+ }
283
+ .squiz-fte-scope .sds-alert__buttons {
284
+ display: flex;
285
+ margin-bottom: 0.375rem;
286
+ margin-top: 1rem;
287
+ place-content: flex-end;
288
+ width: 100%;
289
+ }
290
+ .squiz-fte-scope .sds-alert--dark {
291
+ background-color: #f5f5f5;
292
+ }
293
+ .squiz-fte-scope .sds-alert-type--help.sds-alert--has-bg-color {
294
+ background-color: #f0ecf7;
295
+ }
296
+ .squiz-fte-scope .sds-alert-type--help svg {
297
+ fill: #6b47b4;
298
+ }
299
+ .squiz-fte-scope .sds-alert-type--info.sds-alert--has-bg-color,
300
+ .squiz-fte-scope .sds-alert-type--custom.sds-alert--has-bg-color {
301
+ background-color: #e6f4f6;
302
+ }
303
+ .squiz-fte-scope .sds-alert-type--info svg,
304
+ .squiz-fte-scope .sds-alert-type--custom svg {
305
+ fill: #057e91;
306
+ }
307
+ .squiz-fte-scope .sds-alert-type--warning.sds-alert--has-bg-color {
308
+ background-color: #fcf0e5;
309
+ margin: 2px;
310
+ }
311
+ .squiz-fte-scope .sds-alert-type--warning svg {
312
+ fill: #e96900;
313
+ }
314
+ .squiz-fte-scope .sds-alert-type--report.sds-alert--has-bg-color {
315
+ background-color: #fae9e8;
316
+ }
317
+ .squiz-fte-scope .sds-alert-type--report svg {
318
+ fill: #d72321;
319
+ }
320
+ .squiz-fte-scope .sds-alert-type--assistant.sds-alert--has-bg-color {
321
+ background-color: #fdf7e9;
322
+ }
323
+ .squiz-fte-scope .sds-alert-type--assistant svg {
324
+ fill: #efb324;
325
+ }
326
+ @media screen and (min-width: 576px) {
327
+ .squiz-fte-scope .sds-alert__wrapper {
328
+ flex-wrap: nowrap;
329
+ justify-content: space-between;
330
+ }
331
+ .squiz-fte-scope .sds-alert__buttons {
332
+ margin: 0 0 0 1rem;
333
+ width: auto;
334
+ }
335
+ }
336
+ .squiz-fte-scope .sds-table--api tbody {
337
+ position: relative;
338
+ }
339
+ .squiz-fte-scope .sds-table--api .sds-table__empty-row {
340
+ height: 5rem;
341
+ }
342
+ .squiz-fte-scope .sds-table--api .sds-table__row--selected {
343
+ background-color: #f5f5f5;
344
+ }
345
+ .squiz-fte-scope .sds-table--api .sds-table__row--selectable,
346
+ .squiz-fte-scope .sds-table--api .sds-table__th--selectable {
347
+ cursor: pointer;
348
+ }
349
+ .squiz-fte-scope .sds-table--api .sds-table__th--selectable .sds-table__th-content {
350
+ align-items: center;
351
+ display: flex;
352
+ }
353
+ .squiz-fte-scope .sds-table--api .sds-table__th--selectable div {
354
+ line-height: 0;
355
+ }
356
+ .squiz-fte-scope .sds-table--api .checkbox-cell {
357
+ align-items: center;
358
+ display: flex;
359
+ }
360
+ .squiz-fte-scope .sds-table--api .checkbox-cell div {
361
+ line-height: 0;
362
+ }
363
+ .squiz-fte-scope .sds-table--api .loading {
364
+ background: rgba(255, 255, 255, 0.7);
365
+ border: none;
366
+ height: 100%;
367
+ position: absolute;
368
+ top: 0;
369
+ width: 100%;
370
+ z-index: 1;
371
+ }
372
+ .squiz-fte-scope .sds-table--api .sds-table__loader-row {
373
+ position: unset;
374
+ }
375
+ .squiz-fte-scope .sds-table--api .sds-table__pagination {
376
+ padding: 1.25rem 1rem;
377
+ }
378
+ .squiz-fte-scope .sds-table--api .sds-table__navigator button:nth-child(2) {
379
+ margin-left: 1.5rem;
380
+ }
381
+ .squiz-fte-scope .sds-table--loading {
382
+ display: grid;
383
+ place-items: center;
384
+ }
385
+ .squiz-fte-scope .sds-avatar {
386
+ align-items: center;
387
+ display: flex;
388
+ justify-content: center;
389
+ background-color: #26324b;
390
+ border-radius: 100%;
391
+ color: #fff;
392
+ flex-shrink: 0;
393
+ font-family: Asap, sans-serif;
394
+ }
395
+ .squiz-fte-scope .sds-avatar.size--lg {
396
+ font-size: 3rem;
397
+ height: 6.25rem;
398
+ width: 6.25rem;
399
+ }
400
+ .squiz-fte-scope .sds-avatar.size--lg svg {
401
+ height: 3.75rem;
402
+ width: 3.75rem;
403
+ }
404
+ .squiz-fte-scope .sds-avatar.size--md {
405
+ font-size: 1.875rem;
406
+ height: 4rem;
407
+ width: 4rem;
408
+ }
409
+ .squiz-fte-scope .sds-avatar.size--md svg {
410
+ height: 2.25rem;
411
+ width: 2.25rem;
412
+ }
413
+ .squiz-fte-scope .sds-avatar.size--sm {
414
+ font-size: 1rem;
415
+ height: 2.25rem;
416
+ width: 2.25rem;
417
+ }
418
+ .squiz-fte-scope .sds-avatar.size--xs {
419
+ font-size: 0.875rem;
420
+ height: 1.875rem;
421
+ width: 1.875rem;
422
+ }
423
+ .squiz-fte-scope .sds-avatar.size--xs svg {
424
+ height: 1.25rem;
425
+ width: 1.25rem;
426
+ }
427
+ .squiz-fte-scope .sds-avatar.size--xxs {
428
+ font-size: 0.6875rem;
429
+ height: 1.5rem;
430
+ width: 1.5rem;
431
+ }
432
+ .squiz-fte-scope .sds-avatar.size--xxs svg {
433
+ height: 1rem;
434
+ width: 1rem;
435
+ }
436
+ .squiz-fte-scope .sds-avatar-icon svg {
437
+ fill: #fff;
438
+ }
439
+ .squiz-fte-scope .sds-avatar-photo {
440
+ background-size: cover;
441
+ }
442
+ .squiz-fte-scope .sds-avatar-button:focus {
443
+ border-radius: 100%;
444
+ }
445
+ .squiz-fte-scope .sds-badge {
446
+ border-radius: 0.25rem;
447
+ display: inline-flex;
448
+ font-size: 0.8125rem;
449
+ font-weight: 700;
450
+ letter-spacing: 0;
451
+ line-height: 1rem;
452
+ background: #fff;
453
+ border: 1px solid #e0e0e0;
454
+ color: #707070;
455
+ }
456
+ .squiz-fte-scope .sds-badge.badge--strong {
457
+ background: #e0e0e0;
458
+ }
459
+ .squiz-fte-scope .sds-badge.badge--combination .sds-badge-label--left {
460
+ background: #e0e0e0;
461
+ }
462
+ .squiz-fte-scope .sds-badge.badge--combination-alt .sds-badge-label--right {
463
+ background: #e0e0e0;
464
+ }
465
+ .squiz-fte-scope .sds-badge.badge--action {
466
+ background: #fff;
467
+ border: 1px solid #0774d2;
468
+ color: #0774d2;
469
+ }
470
+ .squiz-fte-scope .sds-badge.badge--action.badge--strong {
471
+ background: #0774d2;
472
+ color: #fff;
473
+ }
474
+ .squiz-fte-scope .sds-badge.badge--action.badge--combination .sds-badge-label--left {
475
+ background: #0774d2;
476
+ color: #fff;
477
+ }
478
+ .squiz-fte-scope .sds-badge.badge--action.badge--combination-alt .sds-badge-label--right {
479
+ background: #0774d2;
480
+ color: #fff;
481
+ }
482
+ .squiz-fte-scope .sds-badge.badge--success {
483
+ background: #fff;
484
+ border: 1px solid #098934;
485
+ color: #098934;
486
+ }
487
+ .squiz-fte-scope .sds-badge.badge--success.badge--strong {
488
+ background: #098934;
489
+ color: #fff;
490
+ }
491
+ .squiz-fte-scope .sds-badge.badge--success.badge--combination .sds-badge-label--left {
492
+ background: #098934;
493
+ color: #fff;
494
+ }
495
+ .squiz-fte-scope .sds-badge.badge--success.badge--combination-alt .sds-badge-label--right {
496
+ background: #098934;
497
+ color: #fff;
498
+ }
499
+ .squiz-fte-scope .sds-badge.badge--info {
500
+ background: #fff;
501
+ border: 1px solid #057e91;
502
+ color: #057e91;
503
+ }
504
+ .squiz-fte-scope .sds-badge.badge--info.badge--strong {
505
+ background: #057e91;
506
+ color: #fff;
507
+ }
508
+ .squiz-fte-scope .sds-badge.badge--info.badge--combination .sds-badge-label--left {
509
+ background: #057e91;
510
+ color: #fff;
511
+ }
512
+ .squiz-fte-scope .sds-badge.badge--info.badge--combination-alt .sds-badge-label--right {
513
+ background: #057e91;
514
+ color: #fff;
515
+ }
516
+ .squiz-fte-scope .sds-badge.badge--warning {
517
+ background: #fff;
518
+ border: 1px solid #e96900;
519
+ color: #e96900;
520
+ }
521
+ .squiz-fte-scope .sds-badge.badge--warning.badge--strong {
522
+ background: #e96900;
523
+ color: #fff;
524
+ }
525
+ .squiz-fte-scope .sds-badge.badge--warning.badge--combination .sds-badge-label--left {
526
+ background: #e96900;
527
+ color: #fff;
528
+ }
529
+ .squiz-fte-scope .sds-badge.badge--warning.badge--combination-alt .sds-badge-label--right {
530
+ background: #e96900;
531
+ color: #fff;
532
+ }
533
+ .squiz-fte-scope .sds-badge.badge--danger {
534
+ background: #fff;
535
+ border: 1px solid #d72321;
536
+ color: #d72321;
537
+ }
538
+ .squiz-fte-scope .sds-badge.badge--danger.badge--strong {
539
+ background: #d72321;
540
+ color: #fff;
541
+ }
542
+ .squiz-fte-scope .sds-badge.badge--danger.badge--combination .sds-badge-label--left {
543
+ background: #d72321;
544
+ color: #fff;
545
+ }
546
+ .squiz-fte-scope .sds-badge.badge--danger.badge--combination-alt .sds-badge-label--right {
547
+ background: #d72321;
548
+ color: #fff;
549
+ }
550
+ .squiz-fte-scope .sds-badge-label {
551
+ display: inline-block;
552
+ max-width: 12.25rem;
553
+ overflow-x: hidden;
554
+ padding: 0.0625rem 0.5rem;
555
+ text-align: center;
556
+ text-overflow: ellipsis;
557
+ text-transform: uppercase;
558
+ }
559
+ .squiz-fte-scope .sds-breadcrumbs__wrapper span {
560
+ font-size: 0.8125rem;
561
+ font-weight: 400;
562
+ letter-spacing: 0;
563
+ line-height: 1rem;
564
+ color: #707070;
565
+ white-space: nowrap;
566
+ }
567
+ .squiz-fte-scope .sds-breadcrumbs__wrapper .sds-button.sds-breadcrumbs__button {
568
+ padding: 0.375rem 0;
569
+ }
570
+ .squiz-fte-scope .sds-breadcrumbs__wrapper .sds-breadcrumbs__list {
571
+ align-items: center;
572
+ display: flex;
573
+ list-style-type: none;
574
+ margin: 0;
575
+ padding: 0;
576
+ }
577
+ .squiz-fte-scope .sds-breadcrumbs__wrapper .sds-breadcrumbs__list li {
578
+ align-items: center;
579
+ display: flex;
580
+ justify-content: center;
581
+ }
582
+ .squiz-fte-scope .sds-breadcrumbs__wrapper .sds-breadcrumbs__list li:not(:first-child)::before {
583
+ font-size: 1rem;
584
+ font-weight: 400;
585
+ letter-spacing: -0.4px;
586
+ line-height: 1.5rem;
587
+ color: #707070;
588
+ content: "/";
589
+ padding-left: 0.75rem;
590
+ padding-right: 0.75rem;
591
+ }
592
+ .squiz-fte-scope .sds-breadcrumbs__wrapper .sds-breadcrumbs__list button.sds-breadcrumbs__overflow {
593
+ padding: 0.125rem;
594
+ }
595
+ .squiz-fte-scope .sds-breadcrumbs__wrapper .sds-breadcrumbs__list button.sds-breadcrumbs__overflow svg {
596
+ fill: #707070;
597
+ }
598
+ .squiz-fte-scope .sds-breadcrumbs__wrapper .sds-breadcrumbs__list button.sds-button.sds-breadcrumbs__button {
599
+ text-decoration: underline;
600
+ text-decoration-color: transparent;
601
+ text-underline-offset: 0.5rem;
602
+ transition: text-decoration-color 500ms;
603
+ }
604
+ .squiz-fte-scope .sds-breadcrumbs__wrapper .sds-breadcrumbs__list button.sds-button.sds-breadcrumbs__button:hover {
605
+ background-color: unset;
606
+ text-decoration-color: unset;
607
+ }
608
+ .squiz-fte-scope .sds-breadcrumbs__wrapper .sds-breadcrumbs__list .sds-breadcrumbs__current {
609
+ overflow-x: hidden;
610
+ }
611
+ .squiz-fte-scope .sds-breadcrumbs__wrapper .sds-breadcrumbs__list .sds-breadcrumbs__current span {
612
+ overflow: hidden;
613
+ text-overflow: ellipsis;
614
+ white-space: nowrap;
615
+ width: 100%;
616
+ font-size: 0.8125rem;
617
+ font-weight: 600;
618
+ letter-spacing: 0;
619
+ line-height: 1rem;
620
+ }
621
+ @media screen and (max-width: 575px) {
622
+ .squiz-fte-scope .sds-breadcrumbs__wrapper .sds-breadcrumbs__button .sds-button-icon > svg {
623
+ fill: #707070;
624
+ }
625
+ .squiz-fte-scope .sds-breadcrumbs__wrapper span {
626
+ font-size: 0.875rem;
627
+ font-weight: 600;
628
+ letter-spacing: -0.2px;
629
+ line-height: 1.25rem;
630
+ }
631
+ }
632
+ .squiz-fte-scope .sds-button {
633
+ border-radius: 0.25rem;
634
+ padding: 0.5rem 0.75rem;
635
+ transition: 0.3s background-color ease;
636
+ }
637
+ .squiz-fte-scope .sds-button .button--content {
638
+ align-items: center;
639
+ display: flex;
640
+ }
641
+ .squiz-fte-scope .sds-button:disabled {
642
+ cursor: default;
643
+ opacity: 0.5;
644
+ pointer-events: none;
645
+ }
646
+ .squiz-fte-scope .sds-button.button--icon {
647
+ padding: 0.375rem 0.5rem;
648
+ }
649
+ .squiz-fte-scope .sds-button.button--icon .button--content .sds-button-icon.svg--white > svg {
650
+ fill: #fff;
651
+ }
652
+ .squiz-fte-scope .sds-button.button--icon .button--content .sds-button-icon.svg--offwhite > svg {
653
+ fill: #d9d9d9;
654
+ }
655
+ .squiz-fte-scope .sds-button.button--icon .button--content .sds-button-icon.svg--grey-50 > svg {
656
+ fill: #f7f7f7;
657
+ }
658
+ .squiz-fte-scope .sds-button.button--icon .button--content .sds-button-icon.svg--grey-100 > svg {
659
+ fill: #f5f5f5;
660
+ }
661
+ .squiz-fte-scope .sds-button.button--icon .button--content .sds-button-icon.svg--grey-200 > svg {
662
+ fill: #ededed;
663
+ }
664
+ .squiz-fte-scope .sds-button.button--icon .button--content .sds-button-icon.svg--grey-300 > svg {
665
+ fill: #e0e0e0;
666
+ }
667
+ .squiz-fte-scope .sds-button.button--icon .button--content .sds-button-icon.svg--grey-400 > svg {
668
+ fill: #bababa;
669
+ }
670
+ .squiz-fte-scope .sds-button.button--icon .button--content .sds-button-icon.svg--grey-500 > svg {
671
+ fill: #949494;
672
+ }
673
+ .squiz-fte-scope .sds-button.button--icon .button--content .sds-button-icon.svg--grey-600 > svg {
674
+ fill: #707070;
675
+ }
676
+ .squiz-fte-scope .sds-button.button--icon .button--content .sds-button-icon.svg--grey-700 > svg {
677
+ fill: #4f4f4f;
678
+ }
679
+ .squiz-fte-scope .sds-button.button--icon .button--content .sds-button-icon.svg--grey-800 > svg {
680
+ fill: #3d3d3d;
681
+ }
682
+ .squiz-fte-scope .sds-button.button--icon .button--content .sds-button-icon.svg--grey-900 > svg {
683
+ fill: #2b2b2b;
684
+ }
685
+ .squiz-fte-scope .sds-button.button--icon .button--content .sds-button-icon.svg--black > svg {
686
+ fill: #000;
687
+ }
688
+ .squiz-fte-scope .sds-button.button--icon .button--content .sds-button-icon.svg--blue-100 > svg {
689
+ fill: #e6f1fa;
690
+ }
691
+ .squiz-fte-scope .sds-button.button--icon .button--content .sds-button-icon.svg--blue-200 > svg {
692
+ fill: #8fc0eb;
693
+ }
694
+ .squiz-fte-scope .sds-button.button--icon .button--content .sds-button-icon.svg--blue-300 > svg {
695
+ fill: #0774d2;
696
+ }
697
+ .squiz-fte-scope .sds-button.button--icon .button--content .sds-button-icon.svg--blue-400 > svg {
698
+ fill: #044985;
699
+ }
700
+ .squiz-fte-scope .sds-button.button--icon .button--content .sds-button-icon.svg--green-100 > svg {
701
+ fill: #e7f4ec;
702
+ }
703
+ .squiz-fte-scope .sds-button.button--icon .button--content .sds-button-icon.svg--green-200 > svg {
704
+ fill: #95d0a9;
705
+ }
706
+ .squiz-fte-scope .sds-button.button--icon .button--content .sds-button-icon.svg--green-300 > svg {
707
+ fill: #098934;
708
+ }
709
+ .squiz-fte-scope .sds-button.button--icon .button--content .sds-button-icon.svg--green-400 > svg {
710
+ fill: #0a4a20;
711
+ }
712
+ .squiz-fte-scope .sds-button.button--icon .button--content .sds-button-icon.svg--orange-100 > svg {
713
+ fill: #fcf0e5;
714
+ }
715
+ .squiz-fte-scope .sds-button.button--icon .button--content .sds-button-icon.svg--orange-200 > svg {
716
+ fill: #f5bb8c;
717
+ }
718
+ .squiz-fte-scope .sds-button.button--icon .button--content .sds-button-icon.svg--orange-300 > svg {
719
+ fill: #e96900;
720
+ }
721
+ .squiz-fte-scope .sds-button.button--icon .button--content .sds-button-icon.svg--orange-400 > svg {
722
+ fill: #8f4000;
723
+ }
724
+ .squiz-fte-scope .sds-button.button--icon .button--content .sds-button-icon.svg--red-100 > svg {
725
+ fill: #fae9e8;
726
+ }
727
+ .squiz-fte-scope .sds-button.button--icon .button--content .sds-button-icon.svg--red-200 > svg {
728
+ fill: #ec9c9b;
729
+ }
730
+ .squiz-fte-scope .sds-button.button--icon .button--content .sds-button-icon.svg--red-300 > svg {
731
+ fill: #d72321;
732
+ }
733
+ .squiz-fte-scope .sds-button.button--icon .button--content .sds-button-icon.svg--red-400 > svg {
734
+ fill: #6b1211;
735
+ }
736
+ .squiz-fte-scope .sds-button.button--icon .button--content .sds-button-icon.svg--purple-100 > svg {
737
+ fill: #f0ecf7;
738
+ }
739
+ .squiz-fte-scope .sds-button.button--icon .button--content .sds-button-icon.svg--purple-200 > svg {
740
+ fill: #bcacdd;
741
+ }
742
+ .squiz-fte-scope .sds-button.button--icon .button--content .sds-button-icon.svg--purple-300 > svg {
743
+ fill: #6b47b4;
744
+ }
745
+ .squiz-fte-scope .sds-button.button--icon .button--content .sds-button-icon.svg--purple-400 > svg {
746
+ fill: #3e2969;
747
+ }
748
+ .squiz-fte-scope .sds-button.button--icon .button--content .sds-button-icon.svg--teal-100 > svg {
749
+ fill: #e6f4f6;
750
+ }
751
+ .squiz-fte-scope .sds-button.button--icon .button--content .sds-button-icon.svg--teal-200 > svg {
752
+ fill: #8fd0d9;
753
+ }
754
+ .squiz-fte-scope .sds-button.button--icon .button--content .sds-button-icon.svg--teal-300 > svg {
755
+ fill: #057e91;
756
+ }
757
+ .squiz-fte-scope .sds-button.button--icon .button--content .sds-button-icon.svg--teal-400 > svg {
758
+ fill: #024752;
759
+ }
760
+ .squiz-fte-scope .sds-button.button--icon .button--content .sds-button-icon.svg--yellow-100 > svg {
761
+ fill: #fdf7e9;
762
+ }
763
+ .squiz-fte-scope .sds-button.button--icon .button--content .sds-button-icon.svg--yellow-200 > svg {
764
+ fill: #f7dd9c;
765
+ }
766
+ .squiz-fte-scope .sds-button.button--icon .button--content .sds-button-icon.svg--yellow-300 > svg {
767
+ fill: #efb324;
768
+ }
769
+ .squiz-fte-scope .sds-button.button--icon .button--content .sds-button-icon.svg--yellow-400 > svg {
770
+ fill: #a17917;
771
+ }
772
+ .squiz-fte-scope .sds-button.button--icon .button--content .sds-button-icon.svg--pink-100 > svg {
773
+ fill: #f8ebf6;
774
+ }
775
+ .squiz-fte-scope .sds-button.button--icon .button--content .sds-button-icon.svg--pink-200 > svg {
776
+ fill: #dfa7d8;
777
+ }
778
+ .squiz-fte-scope .sds-button.button--icon .button--content .sds-button-icon.svg--pink-300 > svg {
779
+ fill: #b93da9;
780
+ }
781
+ .squiz-fte-scope .sds-button.button--icon .button--content .sds-button-icon.svg--pink-400 > svg {
782
+ fill: #6e2464;
783
+ }
784
+ .squiz-fte-scope .sds-button.button--round {
785
+ border-radius: 1rem;
786
+ }
787
+ .squiz-fte-scope .sds-button.button--icon-round {
788
+ border-radius: 50%;
789
+ padding: 0.375rem;
790
+ }
791
+ .squiz-fte-scope .sds-button.button--lite {
792
+ padding: 0;
793
+ }
794
+ .squiz-fte-scope .sds-button.button--wide {
795
+ width: 100%;
796
+ }
797
+ .squiz-fte-scope .sds-button.button--wide .button--content {
798
+ justify-content: center;
799
+ }
800
+ .squiz-fte-scope .sds-button.button--loading {
801
+ cursor: default;
802
+ pointer-events: none;
803
+ position: relative;
804
+ }
805
+ .squiz-fte-scope .sds-button.button--loading .button--spinner-container {
806
+ left: 50%;
807
+ position: absolute;
808
+ top: 50%;
809
+ transform: translate(-50%, -50%);
810
+ }
811
+ .squiz-fte-scope .sds-button.button--loading .button--content {
812
+ visibility: hidden;
813
+ }
814
+ .squiz-fte-scope .sds-button.button--default.button--soft {
815
+ font-size: 0.875rem;
816
+ font-weight: 700;
817
+ letter-spacing: -0.2px;
818
+ line-height: 1.25rem;
819
+ background: #e0e0e0;
820
+ color: #4f4f4f;
821
+ }
822
+ .squiz-fte-scope .sds-button.button--default.button--soft:hover {
823
+ background-color: #c7c7c7;
824
+ }
825
+ .squiz-fte-scope .sds-button.button--default.button--soft .sds-button-icon svg {
826
+ fill: #4f4f4f;
827
+ }
828
+ .squiz-fte-scope .sds-button.button--default.button--transparent {
829
+ font-size: 0.875rem;
830
+ font-weight: 600;
831
+ letter-spacing: -0.2px;
832
+ line-height: 1.25rem;
833
+ color: #707070;
834
+ }
835
+ .squiz-fte-scope .sds-button.button--default.button--transparent.active,
836
+ .squiz-fte-scope .sds-button.button--default.button--transparent:hover {
837
+ background-color: rgba(0, 0, 0, 0.04);
838
+ }
839
+ .squiz-fte-scope .sds-button.button--default.button--transparent .sds-button-icon svg {
840
+ fill: #707070;
841
+ }
842
+ .squiz-fte-scope .sds-button.button--primary.button--strong {
843
+ font-size: 0.875rem;
844
+ font-weight: 700;
845
+ letter-spacing: -0.2px;
846
+ line-height: 1.25rem;
847
+ background: #0774d2;
848
+ color: #fff;
849
+ }
850
+ .squiz-fte-scope .sds-button.button--primary.button--strong:hover {
851
+ background-color: #0559a1;
852
+ }
853
+ .squiz-fte-scope .sds-button.button--primary.button--strong .sds-button-icon svg {
854
+ fill: #fff;
855
+ }
856
+ .squiz-fte-scope .sds-button.button--primary.button--soft {
857
+ font-size: 0.875rem;
858
+ font-weight: 700;
859
+ letter-spacing: -0.2px;
860
+ line-height: 1.25rem;
861
+ background: #e0e0e0;
862
+ color: #0774d2;
863
+ }
864
+ .squiz-fte-scope .sds-button.button--primary.button--soft:hover {
865
+ background-color: #c7c7c7;
866
+ }
867
+ .squiz-fte-scope .sds-button.button--primary.button--soft .sds-button-icon svg {
868
+ fill: #0774d2;
869
+ }
870
+ .squiz-fte-scope .sds-button.button--primary.button--transparent {
871
+ font-size: 0.875rem;
872
+ font-weight: 600;
873
+ letter-spacing: -0.2px;
874
+ line-height: 1.25rem;
875
+ color: #0774d2;
876
+ }
877
+ .squiz-fte-scope .sds-button.button--primary.button--transparent.active,
878
+ .squiz-fte-scope .sds-button.button--primary.button--transparent:hover {
879
+ background-color: rgba(0, 0, 0, 0.04);
880
+ }
881
+ .squiz-fte-scope .sds-button.button--primary.button--transparent .sds-button-icon svg {
882
+ fill: #0774d2;
883
+ }
884
+ .squiz-fte-scope .sds-button.button--success.button--strong {
885
+ font-size: 0.875rem;
886
+ font-weight: 700;
887
+ letter-spacing: -0.2px;
888
+ line-height: 1.25rem;
889
+ background: #098934;
890
+ color: #fff;
891
+ }
892
+ .squiz-fte-scope .sds-button.button--success.button--strong:hover {
893
+ background-color: #065922;
894
+ }
895
+ .squiz-fte-scope .sds-button.button--success.button--strong .sds-button-icon svg {
896
+ fill: #fff;
897
+ }
898
+ .squiz-fte-scope .sds-button.button--success.button--soft {
899
+ font-size: 0.875rem;
900
+ font-weight: 700;
901
+ letter-spacing: -0.2px;
902
+ line-height: 1.25rem;
903
+ background: #e0e0e0;
904
+ color: #098934;
905
+ }
906
+ .squiz-fte-scope .sds-button.button--success.button--soft:hover {
907
+ background-color: #c7c7c7;
908
+ }
909
+ .squiz-fte-scope .sds-button.button--success.button--soft .sds-button-icon svg {
910
+ fill: #098934;
911
+ }
912
+ .squiz-fte-scope .sds-button.button--success.button--transparent {
913
+ font-size: 0.875rem;
914
+ font-weight: 600;
915
+ letter-spacing: -0.2px;
916
+ line-height: 1.25rem;
917
+ color: #098934;
918
+ }
919
+ .squiz-fte-scope .sds-button.button--success.button--transparent.active,
920
+ .squiz-fte-scope .sds-button.button--success.button--transparent:hover {
921
+ background-color: rgba(0, 0, 0, 0.04);
922
+ }
923
+ .squiz-fte-scope .sds-button.button--success.button--transparent .sds-button-icon svg {
924
+ fill: #098934;
925
+ }
926
+ .squiz-fte-scope .sds-button.button--danger.button--strong {
927
+ font-size: 0.875rem;
928
+ font-weight: 700;
929
+ letter-spacing: -0.2px;
930
+ line-height: 1.25rem;
931
+ background: #d72321;
932
+ color: #fff;
933
+ }
934
+ .squiz-fte-scope .sds-button.button--danger.button--strong:hover {
935
+ background-color: #ab1c1a;
936
+ }
937
+ .squiz-fte-scope .sds-button.button--danger.button--strong .sds-button-icon svg {
938
+ fill: #fff;
939
+ }
940
+ .squiz-fte-scope .sds-button.button--danger.button--soft {
941
+ font-size: 0.875rem;
942
+ font-weight: 700;
943
+ letter-spacing: -0.2px;
944
+ line-height: 1.25rem;
945
+ background: #e0e0e0;
946
+ color: #d72321;
947
+ }
948
+ .squiz-fte-scope .sds-button.button--danger.button--soft:hover {
949
+ background-color: #c7c7c7;
950
+ }
951
+ .squiz-fte-scope .sds-button.button--danger.button--soft .sds-button-icon svg {
952
+ fill: #d72321;
953
+ }
954
+ .squiz-fte-scope .sds-button.button--danger.button--transparent {
955
+ font-size: 0.875rem;
956
+ font-weight: 600;
957
+ letter-spacing: -0.2px;
958
+ line-height: 1.25rem;
959
+ color: #d72321;
960
+ }
961
+ .squiz-fte-scope .sds-button.button--danger.button--transparent.active,
962
+ .squiz-fte-scope .sds-button.button--danger.button--transparent:hover {
963
+ background-color: rgba(0, 0, 0, 0.04);
964
+ }
965
+ .squiz-fte-scope .sds-button.button--danger.button--transparent .sds-button-icon svg {
966
+ fill: #d72321;
967
+ }
968
+ .squiz-fte-scope .sds-button.button--toolbar {
969
+ margin-right: 0.5rem;
970
+ padding: 0.5rem;
971
+ }
972
+ .squiz-fte-scope .sds-button .sds-button-icon {
973
+ display: flex;
974
+ }
975
+ .squiz-fte-scope .sds-button .sds-button-icon + .sds-button-label {
976
+ margin-left: 0.5rem;
977
+ }
978
+ .squiz-fte-scope .sds-button .sds-button-label + .sds-button-icon {
979
+ margin-left: 0.5rem;
980
+ }
981
+ .squiz-fte-scope .sds-button-list {
982
+ align-items: center;
983
+ display: flex;
984
+ list-style-type: none;
985
+ margin: 0;
986
+ padding: 0;
987
+ }
988
+ .squiz-fte-scope .sds-button-list li {
989
+ margin-right: 0.5rem;
990
+ }
991
+ .squiz-fte-scope .sds-button-list li:last-child {
992
+ margin-right: 0;
993
+ }
994
+ .squiz-fte-scope .sds-button-list.button-list--wide {
995
+ flex-wrap: wrap;
996
+ }
997
+ .squiz-fte-scope .sds-button-list.button-list--wide li {
998
+ margin-bottom: 0.5rem;
999
+ margin-right: 0;
1000
+ width: 100%;
1001
+ }
1002
+ .squiz-fte-scope .sds-button-list.button-list--wide .sds-button {
1003
+ width: 100%;
1004
+ }
1005
+ .squiz-fte-scope .sds-button-list.button-list--wide .sds-button .button--content {
1006
+ justify-content: center;
1007
+ }
1008
+ .squiz-fte-scope .sds-button-list.button-list--middle {
1009
+ justify-content: center;
1010
+ }
1011
+ .squiz-fte-scope .sds-button-list.button-list--space-between {
1012
+ justify-content: space-between;
1013
+ }
1014
+ .squiz-fte-scope .sds-button-list.button-list--right {
1015
+ flex-direction: row-reverse;
1016
+ }
1017
+ .squiz-fte-scope .sds-button-list.button-list--right li {
1018
+ margin-left: 0.5rem;
1019
+ margin-right: 0;
1020
+ }
1021
+ .squiz-fte-scope .sds-button-list.button-list--right li:last-child {
1022
+ margin-left: 0;
1023
+ }
1024
+ .squiz-fte-scope .sds-card-container {
1025
+ background: #fff;
1026
+ border-radius: 0.25rem;
1027
+ color: #3d3d3d;
1028
+ height: 100%;
1029
+ width: 16.5rem;
1030
+ }
1031
+ .squiz-fte-scope .sds-card-container.card--standard {
1032
+ border: 1px solid #e0e0e0;
1033
+ }
1034
+ .squiz-fte-scope .sds-card-container.card--button {
1035
+ box-shadow: 0 0 2px rgba(0, 0, 0, 0.12), 0 1px 4px rgba(0, 0, 0, 0.08);
1036
+ }
1037
+ .squiz-fte-scope .sds-card-container.card--button a {
1038
+ color: #3d3d3d;
1039
+ display: block;
1040
+ height: 100%;
1041
+ text-decoration: none;
1042
+ }
1043
+ .squiz-fte-scope .sds-card-container.card--button:hover {
1044
+ box-shadow: 0 0 4px rgba(0, 0, 0, 0.04), 0 1px 12px rgba(0, 0, 0, 0.12);
1045
+ }
1046
+ .squiz-fte-scope .sds-card-link {
1047
+ color: inherit;
1048
+ height: 100%;
1049
+ text-align: left;
1050
+ width: 100%;
1051
+ }
1052
+ .squiz-fte-scope .sds-card {
1053
+ display: flex;
1054
+ flex-direction: column;
1055
+ height: 100%;
1056
+ padding: 1.25rem;
1057
+ }
1058
+ .squiz-fte-scope .sds-card-header {
1059
+ border-bottom: 1px solid #ededed;
1060
+ margin-bottom: 1rem;
1061
+ }
1062
+ .squiz-fte-scope .sds-card-icon {
1063
+ align-items: center;
1064
+ display: flex;
1065
+ justify-content: center;
1066
+ background: #f5f5f5;
1067
+ border-radius: 100%;
1068
+ height: 4.5rem;
1069
+ margin-bottom: 1.25rem;
1070
+ width: 4.5rem;
1071
+ }
1072
+ .squiz-fte-scope .sds-card-icon svg {
1073
+ height: 2rem;
1074
+ width: 2rem;
1075
+ }
1076
+ .squiz-fte-scope .sds-card-icon.sds-card-type--danger {
1077
+ background: #fae9e8;
1078
+ }
1079
+ .squiz-fte-scope .sds-card-icon.sds-card-type--danger svg {
1080
+ fill: #d72321;
1081
+ }
1082
+ .squiz-fte-scope .sds-card-icon.sds-card-type--info {
1083
+ background: #e6f1fa;
1084
+ }
1085
+ .squiz-fte-scope .sds-card-icon.sds-card-type--info svg {
1086
+ fill: #0774d2;
1087
+ }
1088
+ .squiz-fte-scope .sds-card-icon.sds-card-type--success {
1089
+ background: #e7f4ec;
1090
+ }
1091
+ .squiz-fte-scope .sds-card-icon.sds-card-type--success svg {
1092
+ fill: #098934;
1093
+ }
1094
+ .squiz-fte-scope .sds-card-body {
1095
+ flex-grow: 1;
1096
+ }
1097
+ .squiz-fte-scope .sds-card-title {
1098
+ font-size: 1.25rem;
1099
+ font-weight: 600;
1100
+ letter-spacing: -0.5px;
1101
+ line-height: 1.5rem;
1102
+ }
1103
+ .squiz-fte-scope .sds-card-subtitle {
1104
+ font-size: 1rem;
1105
+ font-weight: 700;
1106
+ letter-spacing: -0.4px;
1107
+ line-height: 1.5rem;
1108
+ color: #707070;
1109
+ display: block;
1110
+ margin-top: 0.75rem;
1111
+ }
1112
+ .squiz-fte-scope .sds-card-content {
1113
+ font-size: 0.875rem;
1114
+ font-weight: 400;
1115
+ letter-spacing: -0.2px;
1116
+ line-height: 1.25rem;
1117
+ display: block;
1118
+ margin-top: 1.25rem;
1119
+ }
1120
+ .squiz-fte-scope .sds-card-buttons {
1121
+ margin-top: 1.25rem;
1122
+ }
1123
+ .squiz-fte-scope .sds-card-list {
1124
+ list-style-type: none;
1125
+ margin: 0;
1126
+ padding: 0;
1127
+ }
1128
+ .squiz-fte-scope .sds-card-list > li {
1129
+ margin-bottom: 2rem;
1130
+ }
1131
+ @media screen and (min-width: 768px) {
1132
+ .squiz-fte-scope .sds-card-list {
1133
+ display: flex;
1134
+ flex-wrap: wrap;
1135
+ }
1136
+ .squiz-fte-scope .sds-card-list > li {
1137
+ margin-right: 2rem;
1138
+ }
1139
+ .squiz-fte-scope .sds-card-list > li:last-child {
1140
+ margin-right: 0;
1141
+ }
1142
+ }
1143
+ .squiz-fte-scope .sds-chart {
1144
+ padding: 0.25rem;
1145
+ }
1146
+ .squiz-fte-scope .sds-chip {
1147
+ align-items: center;
1148
+ display: flex;
1149
+ margin: 0.25rem;
1150
+ }
1151
+ .squiz-fte-scope .sds-chip.chip--default.chip--navigation .sds-chip-label {
1152
+ background: #e0e0e0;
1153
+ border: 1px solid #e0e0e0;
1154
+ border-radius: 6.25rem;
1155
+ padding: 0.25rem 0.75rem;
1156
+ color: #4f4f4f;
1157
+ }
1158
+ .squiz-fte-scope .sds-chip.chip--default.chip--selection .sds-chip-label {
1159
+ border: 1px solid #e0e0e0;
1160
+ border-radius: 6.25rem;
1161
+ padding: 0.25rem 0.75rem;
1162
+ }
1163
+ .squiz-fte-scope .sds-chip.chip--default.chip--selection.active {
1164
+ border-radius: 6.25rem;
1165
+ }
1166
+ .squiz-fte-scope .sds-chip.chip--default.chip--selection .sds-chip-label {
1167
+ border-color: #bababa;
1168
+ }
1169
+ .squiz-fte-scope .sds-chip.chip--default.chip--selection.active {
1170
+ background: #e0e0e0;
1171
+ }
1172
+ .squiz-fte-scope .sds-chip.chip--default.chip--selection.active .sds-chip-label {
1173
+ color: #4f4f4f;
1174
+ }
1175
+ .squiz-fte-scope .sds-chip.chip--default.chip--removable {
1176
+ border: 1px solid #e0e0e0;
1177
+ border-radius: 6.25rem;
1178
+ background: #e0e0e0;
1179
+ }
1180
+ .squiz-fte-scope .sds-chip.chip--default.chip--removable .sds-chip-label {
1181
+ color: #4f4f4f;
1182
+ }
1183
+ .squiz-fte-scope .sds-chip.chip--default.chip--removable svg {
1184
+ fill: rgba(79, 79, 79, 0.5);
1185
+ }
1186
+ .squiz-fte-scope .sds-chip.chip--default.chip--removable .sds-chip-remover:hover svg {
1187
+ fill: #4f4f4f;
1188
+ }
1189
+ .squiz-fte-scope .sds-chip.chip--default.chip--removable .sds-chip-label {
1190
+ max-width: 10.75rem;
1191
+ padding: 0.1875rem 0.5rem 0.1875rem 0.75rem;
1192
+ }
1193
+ .squiz-fte-scope .sds-chip.chip--grey.chip--navigation .sds-chip-label {
1194
+ background: #4f4f4f;
1195
+ border: 1px solid #4f4f4f;
1196
+ border-radius: 6.25rem;
1197
+ padding: 0.25rem 0.75rem;
1198
+ color: #fff;
1199
+ }
1200
+ .squiz-fte-scope .sds-chip.chip--grey.chip--selection .sds-chip-label {
1201
+ border: 1px solid #4f4f4f;
1202
+ border-radius: 6.25rem;
1203
+ padding: 0.25rem 0.75rem;
1204
+ }
1205
+ .squiz-fte-scope .sds-chip.chip--grey.chip--selection.active {
1206
+ border-radius: 6.25rem;
1207
+ }
1208
+ .squiz-fte-scope .sds-chip.chip--grey.chip--selection .sds-chip-label {
1209
+ color: #4f4f4f;
1210
+ }
1211
+ .squiz-fte-scope .sds-chip.chip--grey.chip--selection.active {
1212
+ background: #4f4f4f;
1213
+ }
1214
+ .squiz-fte-scope .sds-chip.chip--grey.chip--selection.active .sds-chip-label {
1215
+ color: #fff;
1216
+ }
1217
+ .squiz-fte-scope .sds-chip.chip--grey.chip--removable {
1218
+ border: 1px solid #4f4f4f;
1219
+ border-radius: 6.25rem;
1220
+ background: #4f4f4f;
1221
+ }
1222
+ .squiz-fte-scope .sds-chip.chip--grey.chip--removable .sds-chip-label {
1223
+ color: #fff;
1224
+ }
1225
+ .squiz-fte-scope .sds-chip.chip--grey.chip--removable svg {
1226
+ fill: rgba(255, 255, 255, 0.5);
1227
+ }
1228
+ .squiz-fte-scope .sds-chip.chip--grey.chip--removable .sds-chip-remover:hover svg {
1229
+ fill: #fff;
1230
+ }
1231
+ .squiz-fte-scope .sds-chip.chip--grey.chip--removable .sds-chip-label {
1232
+ max-width: 10.75rem;
1233
+ padding: 0.1875rem 0.5rem 0.1875rem 0.75rem;
1234
+ }
1235
+ .squiz-fte-scope .sds-chip.chip--blue.chip--navigation .sds-chip-label {
1236
+ background: #0774d2;
1237
+ border: 1px solid #0774d2;
1238
+ border-radius: 6.25rem;
1239
+ padding: 0.25rem 0.75rem;
1240
+ color: #fff;
1241
+ }
1242
+ .squiz-fte-scope .sds-chip.chip--blue.chip--selection .sds-chip-label {
1243
+ border: 1px solid #0774d2;
1244
+ border-radius: 6.25rem;
1245
+ padding: 0.25rem 0.75rem;
1246
+ }
1247
+ .squiz-fte-scope .sds-chip.chip--blue.chip--selection.active {
1248
+ border-radius: 6.25rem;
1249
+ }
1250
+ .squiz-fte-scope .sds-chip.chip--blue.chip--selection .sds-chip-label {
1251
+ color: #0774d2;
1252
+ }
1253
+ .squiz-fte-scope .sds-chip.chip--blue.chip--selection.active {
1254
+ background: #0774d2;
1255
+ }
1256
+ .squiz-fte-scope .sds-chip.chip--blue.chip--selection.active .sds-chip-label {
1257
+ color: #fff;
1258
+ }
1259
+ .squiz-fte-scope .sds-chip.chip--blue.chip--removable {
1260
+ border: 1px solid #0774d2;
1261
+ border-radius: 6.25rem;
1262
+ background: #0774d2;
1263
+ }
1264
+ .squiz-fte-scope .sds-chip.chip--blue.chip--removable .sds-chip-label {
1265
+ color: #fff;
1266
+ }
1267
+ .squiz-fte-scope .sds-chip.chip--blue.chip--removable svg {
1268
+ fill: rgba(255, 255, 255, 0.5);
1269
+ }
1270
+ .squiz-fte-scope .sds-chip.chip--blue.chip--removable .sds-chip-remover:hover svg {
1271
+ fill: #fff;
1272
+ }
1273
+ .squiz-fte-scope .sds-chip.chip--blue.chip--removable .sds-chip-label {
1274
+ max-width: 10.75rem;
1275
+ padding: 0.1875rem 0.5rem 0.1875rem 0.75rem;
1276
+ }
1277
+ .squiz-fte-scope .sds-chip.chip--blue .sds-chip-remover:focus {
1278
+ box-shadow: 0 0 0 2px #fff;
1279
+ }
1280
+ .squiz-fte-scope .sds-chip.chip--green.chip--navigation .sds-chip-label {
1281
+ background: #098934;
1282
+ border: 1px solid #098934;
1283
+ border-radius: 6.25rem;
1284
+ padding: 0.25rem 0.75rem;
1285
+ color: #fff;
1286
+ }
1287
+ .squiz-fte-scope .sds-chip.chip--green.chip--selection .sds-chip-label {
1288
+ border: 1px solid #098934;
1289
+ border-radius: 6.25rem;
1290
+ padding: 0.25rem 0.75rem;
1291
+ }
1292
+ .squiz-fte-scope .sds-chip.chip--green.chip--selection.active {
1293
+ border-radius: 6.25rem;
1294
+ }
1295
+ .squiz-fte-scope .sds-chip.chip--green.chip--selection .sds-chip-label {
1296
+ color: #098934;
1297
+ }
1298
+ .squiz-fte-scope .sds-chip.chip--green.chip--selection.active {
1299
+ background: #098934;
1300
+ }
1301
+ .squiz-fte-scope .sds-chip.chip--green.chip--selection.active .sds-chip-label {
1302
+ color: #fff;
1303
+ }
1304
+ .squiz-fte-scope .sds-chip.chip--green.chip--removable {
1305
+ border: 1px solid #098934;
1306
+ border-radius: 6.25rem;
1307
+ background: #098934;
1308
+ }
1309
+ .squiz-fte-scope .sds-chip.chip--green.chip--removable .sds-chip-label {
1310
+ color: #fff;
1311
+ }
1312
+ .squiz-fte-scope .sds-chip.chip--green.chip--removable svg {
1313
+ fill: rgba(255, 255, 255, 0.5);
1314
+ }
1315
+ .squiz-fte-scope .sds-chip.chip--green.chip--removable .sds-chip-remover:hover svg {
1316
+ fill: #fff;
1317
+ }
1318
+ .squiz-fte-scope .sds-chip.chip--green.chip--removable .sds-chip-label {
1319
+ max-width: 10.75rem;
1320
+ padding: 0.1875rem 0.5rem 0.1875rem 0.75rem;
1321
+ }
1322
+ .squiz-fte-scope .sds-chip.chip--green .sds-chip-remover:focus {
1323
+ box-shadow: 0 0 0 2px #fff;
1324
+ }
1325
+ .squiz-fte-scope .sds-chip.chip--purple.chip--navigation .sds-chip-label {
1326
+ background: #6b47b4;
1327
+ border: 1px solid #6b47b4;
1328
+ border-radius: 6.25rem;
1329
+ padding: 0.25rem 0.75rem;
1330
+ color: #fff;
1331
+ }
1332
+ .squiz-fte-scope .sds-chip.chip--purple.chip--selection .sds-chip-label {
1333
+ border: 1px solid #6b47b4;
1334
+ border-radius: 6.25rem;
1335
+ padding: 0.25rem 0.75rem;
1336
+ }
1337
+ .squiz-fte-scope .sds-chip.chip--purple.chip--selection.active {
1338
+ border-radius: 6.25rem;
1339
+ }
1340
+ .squiz-fte-scope .sds-chip.chip--purple.chip--selection .sds-chip-label {
1341
+ color: #6b47b4;
1342
+ }
1343
+ .squiz-fte-scope .sds-chip.chip--purple.chip--selection.active {
1344
+ background: #6b47b4;
1345
+ }
1346
+ .squiz-fte-scope .sds-chip.chip--purple.chip--selection.active .sds-chip-label {
1347
+ color: #fff;
1348
+ }
1349
+ .squiz-fte-scope .sds-chip.chip--purple.chip--removable {
1350
+ border: 1px solid #6b47b4;
1351
+ border-radius: 6.25rem;
1352
+ background: #6b47b4;
1353
+ }
1354
+ .squiz-fte-scope .sds-chip.chip--purple.chip--removable .sds-chip-label {
1355
+ color: #fff;
1356
+ }
1357
+ .squiz-fte-scope .sds-chip.chip--purple.chip--removable svg {
1358
+ fill: rgba(255, 255, 255, 0.5);
1359
+ }
1360
+ .squiz-fte-scope .sds-chip.chip--purple.chip--removable .sds-chip-remover:hover svg {
1361
+ fill: #fff;
1362
+ }
1363
+ .squiz-fte-scope .sds-chip.chip--purple.chip--removable .sds-chip-label {
1364
+ max-width: 10.75rem;
1365
+ padding: 0.1875rem 0.5rem 0.1875rem 0.75rem;
1366
+ }
1367
+ .squiz-fte-scope .sds-chip.chip--purple .sds-chip-remover:focus {
1368
+ box-shadow: 0 0 0 2px #fff;
1369
+ }
1370
+ .squiz-fte-scope .sds-chip.chip--red.chip--navigation .sds-chip-label {
1371
+ background: #d72321;
1372
+ border: 1px solid #d72321;
1373
+ border-radius: 6.25rem;
1374
+ padding: 0.25rem 0.75rem;
1375
+ color: #fff;
1376
+ }
1377
+ .squiz-fte-scope .sds-chip.chip--red.chip--selection .sds-chip-label {
1378
+ border: 1px solid #d72321;
1379
+ border-radius: 6.25rem;
1380
+ padding: 0.25rem 0.75rem;
1381
+ }
1382
+ .squiz-fte-scope .sds-chip.chip--red.chip--selection.active {
1383
+ border-radius: 6.25rem;
1384
+ }
1385
+ .squiz-fte-scope .sds-chip.chip--red.chip--selection .sds-chip-label {
1386
+ color: #d72321;
1387
+ }
1388
+ .squiz-fte-scope .sds-chip.chip--red.chip--selection.active {
1389
+ background: #d72321;
1390
+ }
1391
+ .squiz-fte-scope .sds-chip.chip--red.chip--selection.active .sds-chip-label {
1392
+ color: #fff;
1393
+ }
1394
+ .squiz-fte-scope .sds-chip.chip--red.chip--removable {
1395
+ border: 1px solid #d72321;
1396
+ border-radius: 6.25rem;
1397
+ background: #d72321;
1398
+ }
1399
+ .squiz-fte-scope .sds-chip.chip--red.chip--removable .sds-chip-label {
1400
+ color: #fff;
1401
+ }
1402
+ .squiz-fte-scope .sds-chip.chip--red.chip--removable svg {
1403
+ fill: rgba(255, 255, 255, 0.5);
1404
+ }
1405
+ .squiz-fte-scope .sds-chip.chip--red.chip--removable .sds-chip-remover:hover svg {
1406
+ fill: #fff;
1407
+ }
1408
+ .squiz-fte-scope .sds-chip.chip--red.chip--removable .sds-chip-label {
1409
+ max-width: 10.75rem;
1410
+ padding: 0.1875rem 0.5rem 0.1875rem 0.75rem;
1411
+ }
1412
+ .squiz-fte-scope .sds-chip.chip--red .sds-chip-remover:focus {
1413
+ box-shadow: 0 0 0 2px #fff;
1414
+ }
1415
+ .squiz-fte-scope .sds-chip.chip--pink.chip--navigation .sds-chip-label {
1416
+ background: #b93da9;
1417
+ border: 1px solid #b93da9;
1418
+ border-radius: 6.25rem;
1419
+ padding: 0.25rem 0.75rem;
1420
+ color: #fff;
1421
+ }
1422
+ .squiz-fte-scope .sds-chip.chip--pink.chip--selection .sds-chip-label {
1423
+ border: 1px solid #b93da9;
1424
+ border-radius: 6.25rem;
1425
+ padding: 0.25rem 0.75rem;
1426
+ }
1427
+ .squiz-fte-scope .sds-chip.chip--pink.chip--selection.active {
1428
+ border-radius: 6.25rem;
1429
+ }
1430
+ .squiz-fte-scope .sds-chip.chip--pink.chip--selection .sds-chip-label {
1431
+ color: #b93da9;
1432
+ }
1433
+ .squiz-fte-scope .sds-chip.chip--pink.chip--selection.active {
1434
+ background: #b93da9;
1435
+ }
1436
+ .squiz-fte-scope .sds-chip.chip--pink.chip--selection.active .sds-chip-label {
1437
+ color: #fff;
1438
+ }
1439
+ .squiz-fte-scope .sds-chip.chip--pink.chip--removable {
1440
+ border: 1px solid #b93da9;
1441
+ border-radius: 6.25rem;
1442
+ background: #b93da9;
1443
+ }
1444
+ .squiz-fte-scope .sds-chip.chip--pink.chip--removable .sds-chip-label {
1445
+ color: #fff;
1446
+ }
1447
+ .squiz-fte-scope .sds-chip.chip--pink.chip--removable svg {
1448
+ fill: rgba(255, 255, 255, 0.5);
1449
+ }
1450
+ .squiz-fte-scope .sds-chip.chip--pink.chip--removable .sds-chip-remover:hover svg {
1451
+ fill: #fff;
1452
+ }
1453
+ .squiz-fte-scope .sds-chip.chip--pink.chip--removable .sds-chip-label {
1454
+ max-width: 10.75rem;
1455
+ padding: 0.1875rem 0.5rem 0.1875rem 0.75rem;
1456
+ }
1457
+ .squiz-fte-scope .sds-chip.chip--pink .sds-chip-remover:focus {
1458
+ box-shadow: 0 0 0 2px #fff;
1459
+ }
1460
+ .squiz-fte-scope .sds-chip.chip--icon .sds-chip-label {
1461
+ align-items: center;
1462
+ display: flex;
1463
+ }
1464
+ .squiz-fte-scope .sds-chip .sds-chip-icon {
1465
+ display: flex;
1466
+ }
1467
+ .squiz-fte-scope .sds-chip .sds-chip-label--text ~ .sds-chip-icon,
1468
+ .squiz-fte-scope .sds-chip .sds-chip-icon ~ .sds-chip-label--text,
1469
+ .squiz-fte-scope .sds-chip .sds-chip-label ~ .sds-chip-icon,
1470
+ .squiz-fte-scope .sds-chip .sds-chip-icon ~ .sds-chip-label {
1471
+ margin-left: 0.25rem;
1472
+ }
1473
+ .squiz-fte-scope .sds-chip-label {
1474
+ font-size: 0.875rem;
1475
+ font-weight: 600;
1476
+ letter-spacing: -0.2px;
1477
+ line-height: 1.25rem;
1478
+ color: #4f4f4f;
1479
+ max-width: 12.5rem;
1480
+ overflow: hidden;
1481
+ text-overflow: ellipsis;
1482
+ white-space: nowrap;
1483
+ }
1484
+ .squiz-fte-scope .sds-chip-remover {
1485
+ margin-right: 0.125rem;
1486
+ }
1487
+ .squiz-fte-scope .sds-chip-remover:focus {
1488
+ border-radius: 100%;
1489
+ }
1490
+ .squiz-fte-scope .sds-chip-list {
1491
+ list-style-type: none;
1492
+ margin: 0;
1493
+ padding: 0;
1494
+ align-items: center;
1495
+ display: flex;
1496
+ flex-wrap: wrap;
1497
+ }
1498
+ .squiz-fte-scope .chip-filter .chip-filter__btn.sds-button.chip-filter__btn.active,
1499
+ .squiz-fte-scope .chip-filter--open .chip-filter__btn.sds-button.chip-filter__btn {
1500
+ background-color: #4f4f4f;
1501
+ color: #fff;
1502
+ }
1503
+ .squiz-fte-scope .chip-filter .chip-filter__btn.sds-button.chip-filter__btn.active svg,
1504
+ .squiz-fte-scope .chip-filter--open .chip-filter__btn.sds-button.chip-filter__btn svg {
1505
+ fill: #fff;
1506
+ }
1507
+ .squiz-fte-scope .chip-filter {
1508
+ position: relative;
1509
+ }
1510
+ .squiz-fte-scope .chip-filter .sds-button.chip-filter__btn {
1511
+ border-radius: 3rem;
1512
+ color: #4f4f4f;
1513
+ font-weight: 600;
1514
+ margin-bottom: 0.25rem;
1515
+ padding: 0.25rem 0.5rem;
1516
+ }
1517
+ .squiz-fte-scope .chip-filter .sds-button.chip-filter__btn svg {
1518
+ fill: #4f4f4f;
1519
+ height: 1.25rem;
1520
+ width: 1.25rem;
1521
+ }
1522
+ .squiz-fte-scope .chip-filter--no-icon .chip-filter__btn-content {
1523
+ padding-left: 0.25rem;
1524
+ }
1525
+ .squiz-fte-scope .chip-filter__btn-content {
1526
+ align-items: center;
1527
+ display: flex;
1528
+ gap: 0.25rem;
1529
+ }
1530
+ .squiz-fte-scope .chip-filter__btn-content .closed,
1531
+ .squiz-fte-scope .chip-filter__btn-content .open {
1532
+ display: flex;
1533
+ }
1534
+ .squiz-fte-scope .chip-filter__btn-content .closed {
1535
+ transform: rotate(90deg);
1536
+ }
1537
+ .squiz-fte-scope .chip-filter__btn-content .open {
1538
+ transform: rotate(-90deg);
1539
+ }
1540
+ .squiz-fte-scope .chip-filter__dropdown {
1541
+ background-color: #fff;
1542
+ display: none;
1543
+ height: 100%;
1544
+ left: 0;
1545
+ position: fixed;
1546
+ top: 0;
1547
+ width: 100%;
1548
+ z-index: 100;
1549
+ }
1550
+ .squiz-fte-scope .chip-filter__dropdown-header,
1551
+ .squiz-fte-scope .chip-filter__dropdown-body {
1552
+ padding: 0.5rem 0.75rem;
1553
+ }
1554
+ .squiz-fte-scope .chip-filter__dropdown-header {
1555
+ align-items: center;
1556
+ border-bottom: 1px solid #e0e0e0;
1557
+ display: flex;
1558
+ justify-content: space-between;
1559
+ }
1560
+ .squiz-fte-scope .chip-filter__dropdown-header svg {
1561
+ fill: #707070;
1562
+ }
1563
+ .squiz-fte-scope .chip-filter__dropdown-header h3 {
1564
+ font-size: 1.125rem;
1565
+ font-weight: 600;
1566
+ letter-spacing: -0.4px;
1567
+ line-height: 1.6875rem;
1568
+ color: #000;
1569
+ }
1570
+ .squiz-fte-scope .chip-filter__dropdown-body {
1571
+ max-height: 17rem;
1572
+ overflow-y: auto;
1573
+ }
1574
+ .squiz-fte-scope .chip-filter__dropdown-body h4 {
1575
+ font-size: 1rem;
1576
+ font-weight: 600;
1577
+ letter-spacing: -0.4px;
1578
+ line-height: 1.5rem;
1579
+ }
1580
+ .squiz-fte-scope .chip-filter__dropdown--open {
1581
+ display: flex;
1582
+ flex-direction: column;
1583
+ }
1584
+ .squiz-fte-scope .chip-filter__dropdown .sds-form-field {
1585
+ margin-bottom: 0;
1586
+ }
1587
+ .squiz-fte-scope .chip-filter__dropdown .sds-form-control-item {
1588
+ padding: 0.5rem 0;
1589
+ }
1590
+ .squiz-fte-scope .chip-filter__dropdown-btn-container {
1591
+ border-top: 1px solid #e0e0e0;
1592
+ display: flex;
1593
+ gap: 0.5rem;
1594
+ margin-top: auto;
1595
+ padding: 1.5rem 1rem;
1596
+ width: 100%;
1597
+ }
1598
+ .squiz-fte-scope .chip-filter__dropdown-btn-container--centered {
1599
+ display: flex;
1600
+ }
1601
+ .squiz-fte-scope .chip-filter__dropdown-btn-container--centered > button {
1602
+ flex-grow: 1;
1603
+ }
1604
+ .squiz-fte-scope .chip-filter__dropdown-btn-container .button--content {
1605
+ justify-content: center;
1606
+ }
1607
+ .squiz-fte-scope .chip-filter__btn-counter {
1608
+ align-items: center;
1609
+ background-color: #fff;
1610
+ border-radius: 100%;
1611
+ color: #4f4f4f;
1612
+ display: flex;
1613
+ font-size: 0.8125rem;
1614
+ height: 16px;
1615
+ justify-content: center;
1616
+ margin: 0 0.125rem;
1617
+ text-transform: capitalize;
1618
+ width: 16px;
1619
+ }
1620
+ @media screen and (min-width: 576px) {
1621
+ .squiz-fte-scope .chip-filter__dropdown {
1622
+ border-radius: 0.25rem;
1623
+ box-shadow: 0 0 4px rgba(0, 0, 0, 0.04), 0 1px 12px rgba(0, 0, 0, 0.12);
1624
+ height: unset;
1625
+ left: 0;
1626
+ position: absolute;
1627
+ top: unset;
1628
+ width: 220px;
1629
+ z-index: 2;
1630
+ }
1631
+ .squiz-fte-scope .chip-filter__dropdown-header {
1632
+ display: none;
1633
+ }
1634
+ .squiz-fte-scope .chip-filter__dropdown-body h4 {
1635
+ display: none;
1636
+ }
1637
+ .squiz-fte-scope .chip-filter__dropdown-btn-container {
1638
+ justify-content: flex-end;
1639
+ margin-top: unset;
1640
+ padding: 0.5rem 0.75rem;
1641
+ }
1642
+ .squiz-fte-scope .chip-filter__dropdown-btn--reset {
1643
+ display: none;
1644
+ }
1645
+ }
1646
+ @media screen and (max-width: 575px) {
1647
+ .squiz-fte-scope .chip-filter__dropdown-btn-container button {
1648
+ width: 100%;
1649
+ }
1650
+ }
1651
+ .squiz-fte-scope .sds-code-snippet {
1652
+ display: flex;
1653
+ flex-direction: column;
1654
+ max-height: 12.5rem;
1655
+ max-width: 25rem;
1656
+ }
1657
+ .squiz-fte-scope .sds-code-snippet__header {
1658
+ align-items: center;
1659
+ background-color: #4f4f4f;
1660
+ border-top-left-radius: 0.5rem;
1661
+ border-top-right-radius: 0.5rem;
1662
+ color: #fff;
1663
+ display: flex;
1664
+ justify-content: space-between;
1665
+ padding: 0.75rem 1rem;
1666
+ }
1667
+ .squiz-fte-scope .sds-code-snippet__header svg {
1668
+ fill: #fff;
1669
+ }
1670
+ .squiz-fte-scope .sds-code-snippet__title {
1671
+ color: #fff;
1672
+ font-size: 0.8125rem;
1673
+ font-weight: 400;
1674
+ letter-spacing: 0;
1675
+ line-height: 1rem;
1676
+ }
1677
+ .squiz-fte-scope .sds-code-snippet__copy-btn {
1678
+ align-items: center;
1679
+ color: #d9d9d9;
1680
+ display: flex;
1681
+ gap: 0.5rem;
1682
+ margin-left: auto;
1683
+ }
1684
+ .squiz-fte-scope .sds-code-snippet__copy-btn:hover {
1685
+ text-decoration: underline;
1686
+ }
1687
+ .squiz-fte-scope .sds-code-snippet pre {
1688
+ border-bottom-left-radius: 0.5rem;
1689
+ border-bottom-right-radius: 0.5rem;
1690
+ margin: 0;
1691
+ padding: 0.5rem;
1692
+ scrollbar-color: #d9d9d9 #2b2b2b;
1693
+ scrollbar-width: 2.5rem;
1694
+ }
1695
+ .squiz-fte-scope .sds-code-snippet pre::-webkit-scrollbar {
1696
+ background: #2b2b2b;
1697
+ }
1698
+ .squiz-fte-scope .sds-code-snippet pre::-webkit-scrollbar-thumb {
1699
+ background: #d9d9d9;
1700
+ border-radius: 0.5rem;
1701
+ min-height: 2.5rem;
1702
+ }
1703
+ .squiz-fte-scope .sds-code-snippet pre::-webkit-scrollbar-thumb:hover {
1704
+ background: silver;
1705
+ }
1706
+ .squiz-fte-scope .sds-code-snippet pre::-webkit-scrollbar-thumb:active {
1707
+ background: #a6a6a6;
1708
+ }
1709
+ .squiz-fte-scope .sds-code-snippet pre::-webkit-scrollbar-corner {
1710
+ background: #2b2b2b;
1711
+ }
1712
+ .squiz-fte-scope .sds-code-snippet code {
1713
+ font-size: 0.6875rem;
1714
+ }
1715
+ .squiz-fte-scope .react-js-cron {
1716
+ align-items: flex-start;
1717
+ display: flex;
1718
+ flex-wrap: wrap;
1719
+ }
1720
+ .squiz-fte-scope .react-js-cron > div,
1721
+ .squiz-fte-scope .react-js-cron-field {
1722
+ align-items: center;
1723
+ display: flex;
1724
+ }
1725
+ .squiz-fte-scope .react-js-cron-field {
1726
+ margin-bottom: 10px;
1727
+ }
1728
+ .squiz-fte-scope .react-js-cron-field > span {
1729
+ margin-left: 5px;
1730
+ }
1731
+ .squiz-fte-scope div.react-js-cron-select {
1732
+ margin-left: 5px;
1733
+ }
1734
+ .squiz-fte-scope .react-js-cron-select.react-js-cron-select-no-prefix {
1735
+ margin-left: 0;
1736
+ }
1737
+ .squiz-fte-scope div.react-js-cron-error .react-js-cron-select .ant-select-selector {
1738
+ background: #fff6f6;
1739
+ border-color: #ff4d4f;
1740
+ }
1741
+ .squiz-fte-scope div.react-js-cron-custom-select {
1742
+ min-width: 70px;
1743
+ z-index: 1;
1744
+ }
1745
+ .squiz-fte-scope div.react-js-cron-error div.react-js-cron-custom-select {
1746
+ background: #fff6f6;
1747
+ }
1748
+ .squiz-fte-scope div.react-js-cron-select.react-js-cron-custom-select.ant-select div.ant-select-selector {
1749
+ padding-left: 11px;
1750
+ padding-right: 30px;
1751
+ }
1752
+ .squiz-fte-scope .react-js-cron-read-only div.react-js-cron-select.react-js-cron-custom-select.ant-select div.ant-select-selector {
1753
+ padding-right: 11px;
1754
+ }
1755
+ .squiz-fte-scope div.react-js-cron-custom-select .ant-select-selection-search {
1756
+ margin: 0 !important;
1757
+ width: 0 !important;
1758
+ }
1759
+ .squiz-fte-scope div.react-js-cron-custom-select .ant-select-selection-placeholder {
1760
+ color: inherit;
1761
+ left: auto;
1762
+ opacity: 1;
1763
+ position: static;
1764
+ right: auto;
1765
+ top: 50%;
1766
+ transform: none;
1767
+ transition: none;
1768
+ }
1769
+ .squiz-fte-scope .react-js-cron-week-days-placeholder .react-js-cron-custom-select .ant-select-selection-placeholder,
1770
+ .squiz-fte-scope .react-js-cron-month-days-placeholder .react-js-cron-custom-select .ant-select-selection-placeholder {
1771
+ opacity: 0.4;
1772
+ }
1773
+ .squiz-fte-scope .react-js-cron-custom-select-dropdown {
1774
+ min-width: 0 !important;
1775
+ width: 174px !important;
1776
+ }
1777
+ .squiz-fte-scope .react-js-cron-custom-select-dropdown .rc-virtual-list {
1778
+ max-height: none !important;
1779
+ }
1780
+ .squiz-fte-scope .react-js-cron-custom-select-dropdown-grid .rc-virtual-list-holder {
1781
+ max-height: initial !important;
1782
+ }
1783
+ .squiz-fte-scope .react-js-cron-custom-select-dropdown-grid .rc-virtual-list-holder-inner {
1784
+ display: grid !important;
1785
+ grid-template-columns: repeat(4, 1fr);
1786
+ }
1787
+ .squiz-fte-scope .react-js-cron-custom-select-dropdown-grid .rc-virtual-list-holder-inner .ant-select-item-option-content {
1788
+ text-align: center;
1789
+ }
1790
+ .squiz-fte-scope .react-js-cron-custom-select-dropdown-hours-twelve-hour-clock {
1791
+ width: 260px !important;
1792
+ }
1793
+ .squiz-fte-scope .react-js-cron-custom-select-dropdown-minutes-large {
1794
+ width: 300px !important;
1795
+ }
1796
+ .squiz-fte-scope .react-js-cron-custom-select-dropdown-minutes-large .rc-virtual-list-holder-inner {
1797
+ grid-template-columns: repeat(6, 1fr);
1798
+ }
1799
+ .squiz-fte-scope .react-js-cron-custom-select-dropdown-minutes-medium {
1800
+ width: 220px !important;
1801
+ }
1802
+ .squiz-fte-scope .react-js-cron-custom-select-dropdown-minutes-medium .rc-virtual-list-holder-inner {
1803
+ grid-template-columns: repeat(5, 1fr);
1804
+ }
1805
+ .squiz-fte-scope .react-js-cron-period > span:first-child {
1806
+ margin-left: 0 !important;
1807
+ }
1808
+ .squiz-fte-scope .react-js-cron-period .react-js-cron-select.ant-select-single.ant-select-open .ant-select-selection-item {
1809
+ opacity: 1;
1810
+ }
1811
+ .squiz-fte-scope .react-js-cron-select-dropdown-period {
1812
+ min-width: 0 !important;
1813
+ width: auto !important;
1814
+ }
1815
+ .squiz-fte-scope .react-js-cron-clear-button {
1816
+ margin-bottom: 10px;
1817
+ margin-left: 10px;
1818
+ }
1819
+ .squiz-fte-scope .react-js-cron-disabled .react-js-cron-select.ant-select-disabled {
1820
+ background: #f5f5f5;
1821
+ }
1822
+ .squiz-fte-scope div.react-js-cron-select.react-js-cron-custom-select.ant-select div.ant-select-selector > .ant-select-selection-overflow {
1823
+ align-items: center;
1824
+ flex: initial;
1825
+ }
1826
+ .squiz-fte-scope .sds-cron-editor-container {
1827
+ align-items: center;
1828
+ }
1829
+ .squiz-fte-scope .sds-cron-editor-container .react-js-cron-field {
1830
+ margin-bottom: 0;
1831
+ }
1832
+ .squiz-fte-scope .cron-editor-default {
1833
+ align-items: center;
1834
+ display: flex;
1835
+ font-size: 0.875rem;
1836
+ font-weight: 600;
1837
+ letter-spacing: -0.2px;
1838
+ line-height: 1.25rem;
1839
+ }
1840
+ .squiz-fte-scope .cron-editor-default .cron-editor-default__label {
1841
+ color: #707070;
1842
+ }
1843
+ .squiz-fte-scope .cron-editor-default > .sds-form-field {
1844
+ margin-left: 0.5rem;
1845
+ width: 7.5rem;
1846
+ }
1847
+ .squiz-fte-scope .cron-editor-default > .sds-form-field span {
1848
+ font-size: 0.875rem;
1849
+ font-weight: 600;
1850
+ letter-spacing: -0.2px;
1851
+ line-height: 1.25rem;
1852
+ color: #949494;
1853
+ }
1854
+ .squiz-fte-scope .cron-editor-default > .sds-form-field .sds-select-option button {
1855
+ color: #707070;
1856
+ }
1857
+ .squiz-fte-scope .react-js-cron-field.sds-cron-field > span,
1858
+ .squiz-fte-scope .react-js-cron-field.sds-cron-field .react-js-cron-select {
1859
+ margin-left: 0.5rem;
1860
+ }
1861
+ .squiz-fte-scope .react-js-cron-field.react-js-cron-period.sds-cron-field.sds-cron-period > span,
1862
+ .squiz-fte-scope .react-js-cron-field.react-js-cron-months.sds-cron-field.sds-cron-months > span,
1863
+ .squiz-fte-scope .react-js-cron-field.react-js-cron-month-days.sds-cron-field.sds-cron-month-days > span,
1864
+ .squiz-fte-scope .react-js-cron-field.react-js-cron-week-days.sds-cron-field.sds-cron-week-days > span,
1865
+ .squiz-fte-scope .react-js-cron-field.react-js-cron-hours.sds-cron-field.sds-cron-hours > span,
1866
+ .squiz-fte-scope .react-js-cron-field.react-js-cron-minutes.sds-cron-field.sds-cron-minutes > span {
1867
+ font-size: 0.875rem;
1868
+ font-weight: 600;
1869
+ letter-spacing: -0.2px;
1870
+ line-height: 1.25rem;
1871
+ color: #707070;
1872
+ }
1873
+ .squiz-fte-scope .react-js-cron-field.react-js-cron-period.sds-cron-field.sds-cron-period > div > div > span {
1874
+ font-size: 0.875rem;
1875
+ font-weight: 600;
1876
+ letter-spacing: -0.2px;
1877
+ line-height: 1.25rem;
1878
+ color: #4f4f4f;
1879
+ font-family:
1880
+ Open Sans,
1881
+ Arial,
1882
+ sans-serif;
1883
+ }
1884
+ .squiz-fte-scope .react-js-cron-field.react-js-cron-months.sds-cron-field.sds-cron-months > div > div > span.ant-select-selection-placeholder,
1885
+ .squiz-fte-scope .react-js-cron-field.react-js-cron-month-days.sds-cron-field.sds-cron-month-days > div > div > span.ant-select-selection-placeholder,
1886
+ .squiz-fte-scope .react-js-cron-field.react-js-cron-week-days.sds-cron-field.sds-cron-week-days > div > div > span.ant-select-selection-placeholder,
1887
+ .squiz-fte-scope .react-js-cron-field.react-js-cron-hours.sds-cron-field.sds-cron-hours > div > div > span.ant-select-selection-placeholder,
1888
+ .squiz-fte-scope .react-js-cron-field.react-js-cron-minutes.sds-cron-field.sds-cron-minutes > div > div > span.ant-select-selection-placeholder {
1889
+ font-size: 0.875rem;
1890
+ font-weight: 600;
1891
+ letter-spacing: -0.2px;
1892
+ line-height: 1.25rem;
1893
+ color: #4f4f4f;
1894
+ font-family:
1895
+ Open Sans,
1896
+ Arial,
1897
+ sans-serif;
1898
+ opacity: 1;
1899
+ }
1900
+ .squiz-fte-scope .sds-cron-months .ant-select-selection-overflow-item,
1901
+ .squiz-fte-scope .sds-cron-month-days .ant-select-selection-overflow-item,
1902
+ .squiz-fte-scope .sds-cron-week-days .ant-select-selection-overflow-item,
1903
+ .squiz-fte-scope .sds-cron-hours .ant-select-selection-overflow-item,
1904
+ .squiz-fte-scope .sds-cron-minutes .ant-select-selection-overflow-item {
1905
+ font-size: 0.875rem;
1906
+ font-weight: 600;
1907
+ letter-spacing: -0.2px;
1908
+ line-height: 1.25rem;
1909
+ color: #4f4f4f;
1910
+ font-family:
1911
+ Open Sans,
1912
+ Arial,
1913
+ sans-serif;
1914
+ }
1915
+ .squiz-fte-scope .react-js-cron > div {
1916
+ flex-wrap: wrap;
1917
+ }
1918
+ .squiz-fte-scope div.ant-select-dropdown .ant-select-item-option-content {
1919
+ font-size: 0.875rem;
1920
+ font-weight: 400;
1921
+ letter-spacing: -0.2px;
1922
+ line-height: 1.25rem;
1923
+ color: #707070;
1924
+ font-family:
1925
+ Open Sans,
1926
+ Arial,
1927
+ sans-serif;
1928
+ }
1929
+ .squiz-fte-scope div.react-js-cron-field.sds-cron-field > div.ant-select {
1930
+ height: 2.25rem;
1931
+ }
1932
+ .squiz-fte-scope div.react-js-cron-field.sds-cron-field .react-js-cron-select.sds-cron-select .ant-select-selector {
1933
+ border: 2px solid #e0e0e0;
1934
+ border-radius: 0.25rem;
1935
+ }
1936
+ .squiz-fte-scope div.react-js-cron-field.sds-cron-field .react-js-cron-select.sds-cron-select:not(.ant-select-open):hover .ant-select-selector,
1937
+ .squiz-fte-scope div.react-js-cron-field.sds-cron-field .react-js-cron-select.sds-cron-select:not(.ant-select-open).ant-select-focused .ant-select-selector {
1938
+ border: 2px solid #e0e0e0;
1939
+ box-shadow: none;
1940
+ }
1941
+ .squiz-fte-scope div.react-js-cron-field.sds-cron-field .react-js-cron-select.sds-cron-select.ant-select-open .ant-select-selector {
1942
+ border-color: transparent;
1943
+ box-shadow: 0 0 0 2px #0774d2;
1944
+ }
1945
+ .squiz-fte-scope .sds-data-list {
1946
+ background: #fff;
1947
+ border-radius: 0.5rem;
1948
+ padding: 1rem;
1949
+ }
1950
+ .squiz-fte-scope .sds-data-list.data-list--lite {
1951
+ padding-bottom: 0;
1952
+ padding-top: 0;
1953
+ }
1954
+ .squiz-fte-scope .sds-data-list.data-list--lite .sds-data-list__body {
1955
+ border: 0;
1956
+ margin: 0;
1957
+ }
1958
+ .squiz-fte-scope .sds-data-list.data-list--lite .sds-data-list__row:last-child {
1959
+ border: 0;
1960
+ }
1961
+ .squiz-fte-scope .sds-data-list__header {
1962
+ display: flex;
1963
+ justify-content: space-between;
1964
+ padding: 0.25rem 0.5rem 1.25rem;
1965
+ }
1966
+ .squiz-fte-scope .sds-data-list__body {
1967
+ border-top: 1px solid #ededed;
1968
+ margin-bottom: 0.25rem;
1969
+ }
1970
+ .squiz-fte-scope .sds-data-list__footer {
1971
+ display: flex;
1972
+ justify-content: center;
1973
+ padding: 1rem 0.5rem 0.25rem 0;
1974
+ }
1975
+ .squiz-fte-scope .sds-data-list__list {
1976
+ list-style-type: none;
1977
+ margin: 0;
1978
+ padding: 0;
1979
+ }
1980
+ .squiz-fte-scope .sds-data-list__row {
1981
+ border-bottom: 1px solid #ededed;
1982
+ }
1983
+ .squiz-fte-scope .sds-data-list__item {
1984
+ align-items: center;
1985
+ display: flex;
1986
+ padding: 1rem 0.5rem;
1987
+ }
1988
+ .squiz-fte-scope button.sds-data-list__item {
1989
+ text-align: left;
1990
+ width: 100%;
1991
+ }
1992
+ .squiz-fte-scope button.sds-data-list__item:hover {
1993
+ background-color: #f7f7f7;
1994
+ }
1995
+ .squiz-fte-scope .sds-data-list__icon {
1996
+ align-self: baseline;
1997
+ margin-right: 0.5rem;
1998
+ }
1999
+ .squiz-fte-scope .sds-data-list__title {
2000
+ font-size: 1rem;
2001
+ font-weight: 700;
2002
+ letter-spacing: -0.2px;
2003
+ line-height: 1.25rem;
2004
+ color: #3d3d3d;
2005
+ }
2006
+ @media screen and (min-width: 768px) {
2007
+ .squiz-fte-scope .sds-data-list__icon + div {
2008
+ align-items: center;
2009
+ display: flex;
2010
+ justify-content: space-between;
2011
+ width: 100%;
2012
+ }
2013
+ .squiz-fte-scope .sds-data-list__content {
2014
+ display: flex;
2015
+ width: 100%;
2016
+ }
2017
+ .squiz-fte-scope .sds-data-list__content > :nth-child(1) {
2018
+ flex-grow: 1;
2019
+ margin-right: 0.5rem;
2020
+ }
2021
+ .squiz-fte-scope .sds-data-list__content > :nth-child(2) {
2022
+ flex-shrink: 0;
2023
+ }
2024
+ }
2025
+ .squiz-fte-scope .sds-datetime-picker .sds-text-field {
2026
+ position: relative;
2027
+ }
2028
+ .squiz-fte-scope .sds-datetime-picker .sds-text-field input {
2029
+ padding-left: 3rem;
2030
+ }
2031
+ .squiz-fte-scope .sds-datetime-picker .sds-datetime-picker__icon {
2032
+ align-items: center;
2033
+ display: flex;
2034
+ background: #f7f7f7;
2035
+ border-radius: 0.25rem 0 0 0.25rem;
2036
+ height: 100%;
2037
+ left: 0;
2038
+ padding: 0 0.5rem;
2039
+ position: absolute;
2040
+ top: 0;
2041
+ }
2042
+ @media screen and (min-width: 576px) {
2043
+ .squiz-fte-scope .sds-datetime-picker {
2044
+ max-width: 23.8125rem;
2045
+ }
2046
+ }
2047
+ .squiz-fte-scope .sds-dialog__container {
2048
+ align-items: center;
2049
+ background: rgba(0, 0, 0, 0.5);
2050
+ display: flex;
2051
+ height: 100%;
2052
+ justify-content: center;
2053
+ left: 0;
2054
+ padding: 2rem;
2055
+ position: fixed;
2056
+ top: 0;
2057
+ width: 100%;
2058
+ z-index: 100;
2059
+ }
2060
+ .squiz-fte-scope .sds-dialog {
2061
+ background: #fff;
2062
+ border-radius: 0.5rem;
2063
+ box-shadow: 0 0 2px rgba(0, 0, 0, 0.12), 0 1px 4px rgba(0, 0, 0, 0.08);
2064
+ color: #2b2b2b;
2065
+ display: flex;
2066
+ flex-direction: column;
2067
+ max-height: 100%;
2068
+ max-width: 25rem;
2069
+ width: 100%;
2070
+ }
2071
+ .squiz-fte-scope .sds-dialog.sm-md {
2072
+ max-width: 30rem;
2073
+ }
2074
+ .squiz-fte-scope .sds-dialog.md {
2075
+ max-width: 37.5rem;
2076
+ }
2077
+ .squiz-fte-scope .sds-dialog.lg {
2078
+ max-width: 50rem;
2079
+ }
2080
+ .squiz-fte-scope .sds-dialog.xl {
2081
+ max-width: 62.5rem;
2082
+ }
2083
+ .squiz-fte-scope .sds-dialog.sm-md .sds-form,
2084
+ .squiz-fte-scope .sds-dialog.md .sds-form {
2085
+ max-width: 100%;
2086
+ }
2087
+ .squiz-fte-scope .sds-dialog__header {
2088
+ padding: 1.5rem 1.5rem 1rem 1.5rem;
2089
+ position: relative;
2090
+ }
2091
+ .squiz-fte-scope .sds-dialog__close {
2092
+ padding: 0.75rem;
2093
+ position: absolute;
2094
+ right: 0;
2095
+ top: 0;
2096
+ }
2097
+ .squiz-fte-scope .sds-dialog__close:hover .svg-wrapper svg {
2098
+ fill: #3d3d3d;
2099
+ }
2100
+ .squiz-fte-scope .sds-dialog__heading {
2101
+ display: flex;
2102
+ margin: 0 1.5rem 0.5rem 0;
2103
+ }
2104
+ .squiz-fte-scope .sds-dialog__heading span {
2105
+ font-size: 1.25rem;
2106
+ font-weight: 600;
2107
+ letter-spacing: -0.5px;
2108
+ line-height: 1.5rem;
2109
+ }
2110
+ .squiz-fte-scope .sds-dialog__icon {
2111
+ flex-shrink: 0;
2112
+ margin-right: 0.75rem;
2113
+ }
2114
+ .squiz-fte-scope .sds-dialog__icon svg {
2115
+ fill: #3d3d3d;
2116
+ }
2117
+ .squiz-fte-scope .sds-dialog__body {
2118
+ display: flex;
2119
+ flex-grow: 1;
2120
+ padding: 0 1.5rem;
2121
+ }
2122
+ .squiz-fte-scope .sds-dialog__body.dialog--scroll {
2123
+ overflow-y: auto;
2124
+ }
2125
+ .squiz-fte-scope .sds-dialog__body.dividers {
2126
+ border-bottom: 1px solid #ededed;
2127
+ border-top: 1px solid #ededed;
2128
+ }
2129
+ .squiz-fte-scope .sds-dialog__body.dividers .sds-dialog__content {
2130
+ padding: 1.5rem 0;
2131
+ }
2132
+ .squiz-fte-scope .sds-dialog__loading {
2133
+ align-items: center;
2134
+ display: flex;
2135
+ flex-grow: 1;
2136
+ min-height: 5rem;
2137
+ padding-bottom: 1.5rem;
2138
+ }
2139
+ .squiz-fte-scope .sds-dialog__loading .sds-dialog__body {
2140
+ justify-content: center;
2141
+ overflow: hidden;
2142
+ width: 100%;
2143
+ }
2144
+ .squiz-fte-scope .sds-dialog__content {
2145
+ max-height: 28.25rem;
2146
+ width: 100%;
2147
+ }
2148
+ .squiz-fte-scope .sds-dialog__footer {
2149
+ padding: 0 1.5rem;
2150
+ }
2151
+ .squiz-fte-scope .sds-dialog__error,
2152
+ .squiz-fte-scope .sds-dialog__footer-text {
2153
+ padding-top: 1rem;
2154
+ }
2155
+ .squiz-fte-scope .sds-dialog__actions {
2156
+ display: flex;
2157
+ justify-content: flex-end;
2158
+ padding: 1.5rem 0;
2159
+ }
2160
+ @media screen and (max-width: 575px) {
2161
+ .squiz-fte-scope .sds-dialog__container--full {
2162
+ padding: 0;
2163
+ }
2164
+ .squiz-fte-scope .sds-dialog__container--full .sds-dialog {
2165
+ border-radius: 0;
2166
+ height: 100%;
2167
+ }
2168
+ .squiz-fte-scope .sds-dialog__container--sm .sds-dialog {
2169
+ border-radius: 0.25rem;
2170
+ height: -moz-fit-content;
2171
+ height: fit-content;
2172
+ }
2173
+ .squiz-fte-scope .sds-dialog__body {
2174
+ flex-grow: 1;
2175
+ }
2176
+ }
2177
+ .squiz-fte-scope .sds-divider {
2178
+ align-items: center;
2179
+ display: flex;
2180
+ width: 100%;
2181
+ }
2182
+ .squiz-fte-scope .sds-divider::before,
2183
+ .squiz-fte-scope .sds-divider::after {
2184
+ background-color: #e0e0e0;
2185
+ content: "";
2186
+ flex-grow: 1;
2187
+ height: 1px;
2188
+ position: relative;
2189
+ width: 1px;
2190
+ z-index: 0;
2191
+ }
2192
+ .squiz-fte-scope .sds-divider::before {
2193
+ margin-right: 1rem;
2194
+ }
2195
+ .squiz-fte-scope .sds-divider::after {
2196
+ margin-left: 1rem;
2197
+ }
2198
+ .squiz-fte-scope .sds-divider span {
2199
+ z-index: 1;
2200
+ }
2201
+ .squiz-fte-scope .sds-divider--left::before {
2202
+ content: none;
2203
+ }
2204
+ .squiz-fte-scope .sds-divider--right::after {
2205
+ content: none;
2206
+ }
2207
+ .squiz-fte-scope .sds-divider--empty::before {
2208
+ margin: 0;
2209
+ }
2210
+ .squiz-fte-scope .sds-divider--empty::after {
2211
+ content: none;
2212
+ }
2213
+ .squiz-fte-scope .sds-dropdown-wrapper {
2214
+ display: inline-block;
2215
+ position: relative;
2216
+ }
2217
+ .squiz-fte-scope .sds-dropdown {
2218
+ background: #fff;
2219
+ border-radius: 0.25rem;
2220
+ box-shadow: 0 0 2px rgba(0, 0, 0, 0.12), 0 1px 4px rgba(0, 0, 0, 0.08);
2221
+ display: none;
2222
+ flex-direction: column;
2223
+ min-width: 7.25rem;
2224
+ padding: 0.5rem 0.75rem;
2225
+ position: absolute;
2226
+ top: calc(100% + 0.25rem);
2227
+ width: -moz-max-content;
2228
+ width: max-content;
2229
+ z-index: 2;
2230
+ }
2231
+ .squiz-fte-scope .sds-dropdown.sds-dropdown--left {
2232
+ left: 0;
2233
+ }
2234
+ .squiz-fte-scope .sds-dropdown.sds-dropdown--right {
2235
+ right: 0;
2236
+ }
2237
+ .squiz-fte-scope .sds-dropdown.active {
2238
+ display: inline-flex;
2239
+ }
2240
+ .squiz-fte-scope .sds-dropdown-heading {
2241
+ border-bottom: 1px solid #ededed;
2242
+ color: #707070;
2243
+ display: block;
2244
+ font-weight: 700;
2245
+ margin-bottom: 0.25rem;
2246
+ padding: 0.5rem 0 0.75rem 0;
2247
+ text-align: center;
2248
+ text-transform: uppercase;
2249
+ }
2250
+ .squiz-fte-scope .sds-dropdown-section {
2251
+ border-bottom: 1px solid #ededed;
2252
+ margin-bottom: 0.25rem;
2253
+ padding-bottom: 0.25rem;
2254
+ }
2255
+ .squiz-fte-scope .sds-dropdown-section:last-child {
2256
+ border: none;
2257
+ margin: 0;
2258
+ padding: 0;
2259
+ }
2260
+ .squiz-fte-scope .sds-dropdown-list {
2261
+ list-style-type: none;
2262
+ margin: 0;
2263
+ padding: 0;
2264
+ }
2265
+ .squiz-fte-scope .sds-dropdown-button {
2266
+ align-items: center;
2267
+ display: flex;
2268
+ color: #707070;
2269
+ font-size: 0.875rem;
2270
+ text-align: left;
2271
+ width: 100%;
2272
+ }
2273
+ .squiz-fte-scope .sds-dropdown-button:hover {
2274
+ background: #f5f5f5;
2275
+ border-radius: 0.25rem;
2276
+ color: #2b2b2b;
2277
+ }
2278
+ .squiz-fte-scope .sds-dropdown-button:disabled {
2279
+ cursor: default;
2280
+ opacity: 0.5;
2281
+ pointer-events: none;
2282
+ }
2283
+ .squiz-fte-scope .sds-dropdown-icon {
2284
+ padding: 0 0.25rem;
2285
+ }
2286
+ .squiz-fte-scope .sds-dropdown-label {
2287
+ display: block;
2288
+ padding: 0.5rem;
2289
+ word-break: break-all;
2290
+ }
2291
+ .squiz-fte-scope .sds-empty-state-card {
2292
+ align-items: center;
2293
+ display: flex;
2294
+ flex-direction: column;
2295
+ font-size: 1rem;
2296
+ font-weight: 400;
2297
+ letter-spacing: -0.4px;
2298
+ line-height: 1.5rem;
2299
+ background-color: #fff;
2300
+ border: 1px solid #e0e0e0;
2301
+ border-radius: 0.5rem;
2302
+ color: #707070;
2303
+ gap: 1.25rem;
2304
+ padding: 5rem 0;
2305
+ width: 100%;
2306
+ }
2307
+ .squiz-fte-scope .sds-empty-state-card--lite {
2308
+ border: none;
2309
+ }
2310
+ .squiz-fte-scope .sds-empty-state-card__text {
2311
+ display: block;
2312
+ max-width: 18rem;
2313
+ text-align: center;
2314
+ }
2315
+ .squiz-fte-scope .sds-empty-state-card__title {
2316
+ font-size: 1.625rem;
2317
+ font-weight: 600;
2318
+ letter-spacing: -0.2px;
2319
+ line-height: 2rem;
2320
+ margin-bottom: 1.75rem;
2321
+ color: #3d3d3d;
2322
+ margin-bottom: 0;
2323
+ margin-top: 1rem;
2324
+ text-align: center;
2325
+ }
2326
+ .squiz-fte-scope .sds-empty-state-card__icon > svg {
2327
+ height: 11rem;
2328
+ width: auto;
2329
+ }
2330
+ .squiz-fte-scope .sds-empty-state-card--with-cta .sds-empty-state-card__icon .svg-path-primary {
2331
+ fill: #057e91;
2332
+ }
2333
+ .squiz-fte-scope .sds-error {
2334
+ align-items: center;
2335
+ display: flex;
2336
+ color: #d72321;
2337
+ }
2338
+ .squiz-fte-scope .sds-error .svg-wrapper svg {
2339
+ fill: #d72321;
2340
+ }
2341
+ .squiz-fte-scope .sds-error span {
2342
+ margin-left: 0.25rem;
2343
+ }
2344
+ .squiz-fte-scope .sds-error--contained {
2345
+ background-color: #fff;
2346
+ border-radius: 0.5rem;
2347
+ padding: 1rem;
2348
+ }
2349
+ .squiz-fte-scope .sds-form {
2350
+ background: #fff;
2351
+ border: 1px solid #e0e0e0;
2352
+ border-radius: 0.25rem;
2353
+ max-width: 25rem;
2354
+ padding: 1.5rem;
2355
+ }
2356
+ .squiz-fte-scope .sds-form.form--lite {
2357
+ border: none;
2358
+ padding: 0;
2359
+ }
2360
+ .squiz-fte-scope .sds-form.form--dark {
2361
+ background: #ededed;
2362
+ border: none;
2363
+ border-radius: 0.5rem;
2364
+ padding: 1.25rem;
2365
+ }
2366
+ .squiz-fte-scope .sds-form.form--horizontal {
2367
+ max-width: none;
2368
+ }
2369
+ .squiz-fte-scope .sds-form.form--horizontal .sds-form-footer {
2370
+ margin-top: 0.5rem;
2371
+ }
2372
+ .squiz-fte-scope .sds-fieldset {
2373
+ border: none;
2374
+ margin: 0;
2375
+ padding: 0;
2376
+ }
2377
+ .squiz-fte-scope .sds-form-group {
2378
+ border-bottom: 1px solid #ededed;
2379
+ margin-bottom: 1rem;
2380
+ padding-bottom: 1rem;
2381
+ }
2382
+ .squiz-fte-scope .sds-form-group:last-child {
2383
+ border-bottom: none;
2384
+ margin-bottom: 0;
2385
+ padding-bottom: 0;
2386
+ }
2387
+ .squiz-fte-scope .sds-form-error,
2388
+ .squiz-fte-scope .sds-form-footer {
2389
+ margin-top: 0.75rem;
2390
+ }
2391
+ @media screen and (max-width: 575px) {
2392
+ .squiz-fte-scope .sds-form.form--horizontal .sds-button-list li {
2393
+ flex-grow: 1;
2394
+ }
2395
+ }
2396
+ @media screen and (min-width: 576px) {
2397
+ .squiz-fte-scope .sds-form.form--horizontal {
2398
+ align-items: flex-end;
2399
+ display: flex;
2400
+ }
2401
+ .squiz-fte-scope .sds-form.form--horizontal .sds-fieldset {
2402
+ display: flex;
2403
+ flex-grow: 1;
2404
+ }
2405
+ .squiz-fte-scope .sds-form.form--horizontal .sds-form-field {
2406
+ flex-grow: 1;
2407
+ margin-bottom: 0;
2408
+ margin-right: 0.5rem;
2409
+ }
2410
+ }
2411
+ .squiz-fte-scope .sds-checkbox-option__button {
2412
+ background: #fff;
2413
+ border: 2px solid #e0e0e0;
2414
+ border-radius: 0.25rem;
2415
+ flex-shrink: 0;
2416
+ height: 1.25rem;
2417
+ margin-right: 0.75rem;
2418
+ position: relative;
2419
+ width: 1.25rem;
2420
+ }
2421
+ .squiz-fte-scope .sds-checkbox-option__button.checked {
2422
+ background: #0774d2;
2423
+ border-color: #0774d2;
2424
+ }
2425
+ .squiz-fte-scope .sds-checkbox-option__button.checked::after,
2426
+ .squiz-fte-scope .sds-checkbox-option__button.checked::before {
2427
+ background: #fff;
2428
+ border-radius: 0.125rem;
2429
+ content: "";
2430
+ left: 50%;
2431
+ position: absolute;
2432
+ top: 50%;
2433
+ width: 0.125rem;
2434
+ }
2435
+ .squiz-fte-scope .sds-checkbox-option__button.checked::after {
2436
+ height: 6px;
2437
+ transform: translate(-4.8px, -1px) rotate(-45deg);
2438
+ }
2439
+ .squiz-fte-scope .sds-checkbox-option__button.checked::before {
2440
+ height: 12px;
2441
+ transform: translate(0.3px, -6px) rotate(45deg);
2442
+ }
2443
+ .squiz-fte-scope .sds-radio-option__button {
2444
+ background: #fff;
2445
+ border: 2px solid #e0e0e0;
2446
+ border-radius: 100%;
2447
+ flex-shrink: 0;
2448
+ height: 1.25rem;
2449
+ margin-right: 0.75rem;
2450
+ position: relative;
2451
+ width: 1.25rem;
2452
+ }
2453
+ .squiz-fte-scope .sds-radio-option__button:focus {
2454
+ border-radius: 100%;
2455
+ }
2456
+ .squiz-fte-scope .sds-radio-option__button.checked {
2457
+ border-color: #0774d2;
2458
+ }
2459
+ .squiz-fte-scope .sds-radio-option__button.checked::before {
2460
+ background: #0774d2;
2461
+ border-radius: 100%;
2462
+ content: " ";
2463
+ height: 0.625rem;
2464
+ left: 50%;
2465
+ position: absolute;
2466
+ top: 50%;
2467
+ transform: translate(-50%, -50%);
2468
+ width: 0.625rem;
2469
+ }
2470
+ .squiz-fte-scope .sds-radio-option__button.disabled {
2471
+ background-color: #ededed;
2472
+ cursor: not-allowed;
2473
+ }
2474
+ .squiz-fte-scope .sds-multi-chip-list {
2475
+ min-height: 2.75rem;
2476
+ padding: 0.25rem;
2477
+ }
2478
+ .squiz-fte-scope .sds-multi-chip-list li {
2479
+ margin: 0.25rem;
2480
+ }
2481
+ .squiz-fte-scope .sds-multi-chip-list .sds-chip {
2482
+ color: #3d3d3d;
2483
+ margin: 0;
2484
+ }
2485
+ .squiz-fte-scope .sds-multi-chip-list .sds-chip.chip--default {
2486
+ border: 1px solid rgba(0, 0, 0, 0);
2487
+ }
2488
+ .squiz-fte-scope .sds-multi-chip-list .sds-chip.sds-chip--invalid {
2489
+ border: 1px solid #d72321;
2490
+ }
2491
+ .squiz-fte-scope .sds-multi-chip-list .sds-chip.sds-chip--warning {
2492
+ border: 1px solid #e96900;
2493
+ }
2494
+ .squiz-fte-scope .sds-multi-chip-list li:last-child {
2495
+ flex: 1;
2496
+ min-width: 33%;
2497
+ }
2498
+ .squiz-fte-scope .sds-multi-chip-list .sds-text-field input {
2499
+ border: none;
2500
+ outline: none;
2501
+ padding-bottom: 0.25rem;
2502
+ padding-top: 0.25rem;
2503
+ }
2504
+ .squiz-fte-scope .sds-multi-chip-list .sds-text-field input:focus {
2505
+ box-shadow: none;
2506
+ }
2507
+ .squiz-fte-scope .sds-multi-chip-list__active {
2508
+ border-radius: 0.25rem;
2509
+ box-shadow: 0 0 0 2px #0774d2;
2510
+ }
2511
+ .squiz-fte-scope .floating-text {
2512
+ background: #fff;
2513
+ border: 1px solid #e0e0e0;
2514
+ border-radius: 0.25rem;
2515
+ box-shadow: 0 0 4px rgba(0, 0, 0, 0.04), 0 1px 12px rgba(0, 0, 0, 0.12);
2516
+ color: #3d3d3d;
2517
+ cursor: pointer;
2518
+ margin-top: 0.5rem;
2519
+ padding: 0.5rem;
2520
+ position: absolute;
2521
+ z-index: 1;
2522
+ }
2523
+ .squiz-fte-scope .sds-select-field {
2524
+ border-radius: 0.25rem;
2525
+ display: grid;
2526
+ position: relative;
2527
+ }
2528
+ .squiz-fte-scope .sds-select-field--custom {
2529
+ position: static;
2530
+ }
2531
+ .squiz-fte-scope .sds-select-field.active {
2532
+ box-shadow: 0 0 0 2px #0774d2;
2533
+ }
2534
+ .squiz-fte-scope .sds-select-field.active svg {
2535
+ transform: rotate(90deg);
2536
+ }
2537
+ .squiz-fte-scope .sds-select-field button {
2538
+ padding-right: 2.5rem;
2539
+ text-align: left;
2540
+ }
2541
+ .squiz-fte-scope .sds-select-field .sds-select-field__button {
2542
+ font-size: 0.875rem;
2543
+ font-weight: 400;
2544
+ letter-spacing: -0.2px;
2545
+ line-height: 1.25rem;
2546
+ background: #fff;
2547
+ border: none;
2548
+ border-radius: 0.25rem;
2549
+ color: #4f4f4f;
2550
+ margin: 0;
2551
+ padding: 0.375rem 0.5rem;
2552
+ width: 100%;
2553
+ overflow: hidden;
2554
+ padding-right: 1.5rem;
2555
+ text-overflow: ellipsis;
2556
+ white-space: nowrap;
2557
+ }
2558
+ .squiz-fte-scope .sds-select-field .sds-select-field__button:disabled {
2559
+ background: #ededed;
2560
+ border-radius: 0;
2561
+ color: #949494;
2562
+ }
2563
+ .squiz-fte-scope .sds-select-field .sds-select-field__button:disabled + .sds-select-field__icon svg {
2564
+ opacity: 0.3;
2565
+ }
2566
+ .squiz-fte-scope .sds-select-field .sds-select-field__button.readonly {
2567
+ background: rgba(0, 0, 0, 0.04);
2568
+ }
2569
+ .squiz-fte-scope .sds-select-field .sds-select-field__button:not(.placeholder, .readonly) {
2570
+ font-weight: 600;
2571
+ }
2572
+ .squiz-fte-scope .sds-select-field .sds-select-field__button.placeholder {
2573
+ color: #949494;
2574
+ }
2575
+ .squiz-fte-scope .sds-select-field ul {
2576
+ list-style-type: none;
2577
+ margin: 0;
2578
+ padding: 0;
2579
+ }
2580
+ .squiz-fte-scope .sds-select-field ul button {
2581
+ font-size: 0.875rem;
2582
+ font-weight: 400;
2583
+ letter-spacing: -0.2px;
2584
+ line-height: 1.25rem;
2585
+ background: #fff;
2586
+ border: none;
2587
+ border-radius: 0.25rem;
2588
+ color: #4f4f4f;
2589
+ margin: 0;
2590
+ padding: 0.375rem 0.5rem;
2591
+ width: 100%;
2592
+ }
2593
+ .squiz-fte-scope .sds-select-field ul button:hover {
2594
+ background: #f5f5f5;
2595
+ }
2596
+ .squiz-fte-scope .sds-select-field ul button:focus {
2597
+ z-index: 1;
2598
+ }
2599
+ .squiz-fte-scope .sds-select-field__icon {
2600
+ pointer-events: none;
2601
+ position: absolute;
2602
+ right: 0.25rem;
2603
+ top: 0.25rem;
2604
+ }
2605
+ .squiz-fte-scope .sds-select-field__icon svg {
2606
+ transform: rotate(-90deg);
2607
+ }
2608
+ .squiz-fte-scope .sds-select-field__options {
2609
+ background-color: #fff;
2610
+ border-radius: 0.25rem;
2611
+ box-shadow: 0 0 2px rgba(0, 0, 0, 0.12), 0 1px 4px rgba(0, 0, 0, 0.08);
2612
+ margin-top: 6px;
2613
+ max-height: 12rem;
2614
+ overflow-y: auto;
2615
+ position: absolute;
2616
+ top: 100%;
2617
+ width: 100%;
2618
+ z-index: 1;
2619
+ }
2620
+ .squiz-fte-scope .sds-text-field.sds-field-icon input {
2621
+ padding-left: 3rem;
2622
+ }
2623
+ .squiz-fte-scope .sds-text-field.sds-field-error input {
2624
+ padding-right: 2rem;
2625
+ }
2626
+ .squiz-fte-scope .sds-text-field label {
2627
+ color: #707070;
2628
+ display: block;
2629
+ font-weight: 600;
2630
+ margin-bottom: 0.25rem;
2631
+ }
2632
+ .squiz-fte-scope .sds-text-field input,
2633
+ .squiz-fte-scope .sds-text-field textarea {
2634
+ font-size: 0.875rem;
2635
+ font-weight: 400;
2636
+ letter-spacing: -0.2px;
2637
+ line-height: 1.25rem;
2638
+ background: #fff;
2639
+ border: none;
2640
+ border-radius: 0.25rem;
2641
+ color: #4f4f4f;
2642
+ margin: 0;
2643
+ padding: 0.375rem 0.5rem;
2644
+ width: 100%;
2645
+ display: flex;
2646
+ }
2647
+ .squiz-fte-scope .sds-text-field input:disabled,
2648
+ .squiz-fte-scope .sds-text-field textarea:disabled {
2649
+ background: #ededed;
2650
+ border-radius: 0;
2651
+ color: #949494;
2652
+ cursor: default;
2653
+ pointer-events: none;
2654
+ }
2655
+ .squiz-fte-scope .sds-text-field textarea {
2656
+ resize: vertical;
2657
+ }
2658
+ .squiz-fte-scope .sds-text-field .sds-field-error__icon {
2659
+ align-items: center;
2660
+ display: flex;
2661
+ height: 100%;
2662
+ padding: 0 0.25rem;
2663
+ position: absolute;
2664
+ right: 0;
2665
+ top: 0;
2666
+ }
2667
+ .squiz-fte-scope .sds-text-field.readonly input,
2668
+ .squiz-fte-scope .sds-text-field.readonly textarea {
2669
+ background: rgba(0, 0, 0, 0.04);
2670
+ color: #4f4f4f;
2671
+ }
2672
+ .squiz-fte-scope .sds-text-field__icon {
2673
+ align-items: center;
2674
+ display: flex;
2675
+ background: #f7f7f7;
2676
+ border-radius: 0.25rem 0 0 0.25rem;
2677
+ height: 100%;
2678
+ left: 0;
2679
+ padding: 0 0.5rem;
2680
+ position: absolute;
2681
+ top: 0;
2682
+ }
2683
+ .squiz-fte-scope span.sds-toggle-button {
2684
+ display: block;
2685
+ opacity: 0.5;
2686
+ }
2687
+ .squiz-fte-scope .sds-toggle {
2688
+ background: #bababa;
2689
+ border-radius: 0.625rem;
2690
+ height: 1.25rem;
2691
+ padding: 0;
2692
+ position: relative;
2693
+ width: 2.25rem;
2694
+ }
2695
+ .squiz-fte-scope .sds-toggle.active {
2696
+ background: #0774d2;
2697
+ }
2698
+ .squiz-fte-scope .sds-toggle.active .sds-toggle-check {
2699
+ height: 1.25rem;
2700
+ left: 0.25rem;
2701
+ position: absolute;
2702
+ top: 0;
2703
+ width: 0.75rem;
2704
+ }
2705
+ .squiz-fte-scope .sds-toggle.active .sds-toggle-check::after,
2706
+ .squiz-fte-scope .sds-toggle.active .sds-toggle-check::before {
2707
+ background: #fff;
2708
+ border-radius: 0.125rem;
2709
+ content: "";
2710
+ left: 50%;
2711
+ position: absolute;
2712
+ top: 50%;
2713
+ width: 0.125rem;
2714
+ }
2715
+ .squiz-fte-scope .sds-toggle.active .sds-toggle-check::after {
2716
+ height: 6px;
2717
+ transform: translate(-4.2px, -1.8px) rotate(-45deg);
2718
+ }
2719
+ .squiz-fte-scope .sds-toggle.active .sds-toggle-check::before {
2720
+ height: 10px;
2721
+ transform: translate(0.3px, -5px) rotate(45deg);
2722
+ }
2723
+ .squiz-fte-scope .sds-toggle.active .sds-toggle-disc {
2724
+ left: calc(100% - 1.25rem + 0.125rem);
2725
+ }
2726
+ .squiz-fte-scope button.sds-toggle-button {
2727
+ padding: 0.5rem;
2728
+ }
2729
+ .squiz-fte-scope button.sds-toggle-button:focus {
2730
+ box-shadow: none;
2731
+ }
2732
+ .squiz-fte-scope button.sds-toggle-button:focus .sds-toggle::after {
2733
+ border-radius: 0.75rem;
2734
+ box-shadow: 0 0 0 2px #0774d2;
2735
+ content: "";
2736
+ height: calc(100% + 0.25rem);
2737
+ left: -2px;
2738
+ position: absolute;
2739
+ top: -2px;
2740
+ width: calc(100% + 0.25rem);
2741
+ }
2742
+ .squiz-fte-scope button.sds-toggle-button:focus:not(:focus-visible) .sds-toggle::after {
2743
+ content: none;
2744
+ }
2745
+ .squiz-fte-scope .sds-toggle-disc {
2746
+ background: #fff;
2747
+ border-radius: 100%;
2748
+ box-shadow: 0 0 2px rgba(0, 0, 0, 0.12), 0 1px 4px rgba(0, 0, 0, 0.08);
2749
+ height: 1rem;
2750
+ left: 0.125rem;
2751
+ position: absolute;
2752
+ top: 0.125rem;
2753
+ transition: 0.3s all ease;
2754
+ width: 1rem;
2755
+ }
2756
+ .squiz-fte-scope .sds-form-control-list {
2757
+ list-style-type: none;
2758
+ margin: 0;
2759
+ padding: 0;
2760
+ }
2761
+ .squiz-fte-scope .sds-form-control-item {
2762
+ margin-bottom: 0.5rem;
2763
+ }
2764
+ .squiz-fte-scope .sds-form-control-item:last-child {
2765
+ margin-bottom: 0;
2766
+ }
2767
+ .squiz-fte-scope .sds-form-control-option {
2768
+ display: flex;
2769
+ }
2770
+ .squiz-fte-scope .sds-form-control-option.disabled .sds-form-control-label {
2771
+ opacity: 0.75;
2772
+ }
2773
+ .squiz-fte-scope .sds-form-control-option.disabled .sds-checkbox-option__button,
2774
+ .squiz-fte-scope .sds-form-control-option.disabled .sds-radio-option__button,
2775
+ .squiz-fte-scope .sds-form-control-option.readOnly .sds-checkbox-option__button,
2776
+ .squiz-fte-scope .sds-form-control-option.readOnly .sds-radio-option__button {
2777
+ opacity: 0.5;
2778
+ }
2779
+ .squiz-fte-scope .sds-form-control-heading {
2780
+ color: #2b2b2b;
2781
+ display: block;
2782
+ font-weight: 600;
2783
+ margin-bottom: 0.25rem;
2784
+ }
2785
+ .squiz-fte-scope .sds-form-control-label {
2786
+ color: #3d3d3d;
2787
+ flex-grow: 1;
2788
+ text-align: left;
2789
+ word-break: break-all;
2790
+ }
2791
+ .squiz-fte-scope ::-moz-placeholder {
2792
+ color: #949494;
2793
+ }
2794
+ .squiz-fte-scope ::placeholder {
2795
+ color: #949494;
2796
+ }
2797
+ .squiz-fte-scope .sds-field-container {
2798
+ background: #f5f5f5;
2799
+ border-radius: 0.25rem;
2800
+ padding: 1rem;
2801
+ }
2802
+ .squiz-fte-scope .sds-form-label {
2803
+ align-items: center;
2804
+ display: flex;
2805
+ font-size: 0.875rem;
2806
+ font-weight: 600;
2807
+ letter-spacing: -0.2px;
2808
+ line-height: 1.25rem;
2809
+ color: #707070;
2810
+ }
2811
+ .squiz-fte-scope .sds-form-label.sds-form-label--visible {
2812
+ margin-bottom: 0.25rem;
2813
+ }
2814
+ .squiz-fte-scope .form--dark .sds-form-label {
2815
+ color: #4f4f4f;
2816
+ }
2817
+ .squiz-fte-scope .sds-form-field {
2818
+ margin-bottom: 0.75rem;
2819
+ }
2820
+ .squiz-fte-scope .sds-form-field:last-child {
2821
+ margin-bottom: 0;
2822
+ }
2823
+ .squiz-fte-scope .sds-form-field[disabled] .sds-form-input {
2824
+ background: #ededed;
2825
+ }
2826
+ .squiz-fte-scope .sds-form-field[icon] .sds-form-input {
2827
+ background: #f5f5f5;
2828
+ }
2829
+ .squiz-fte-scope .sds-form-field.sds-form-field--inline {
2830
+ align-items: center;
2831
+ display: flex;
2832
+ }
2833
+ .squiz-fte-scope .sds-form-field.sds-form-field--inline .sds-form-label {
2834
+ margin-right: 0.75rem;
2835
+ }
2836
+ .squiz-fte-scope .sds-form-field.sds-form-field--inline .sds-form-label.sds-form-label--visible {
2837
+ margin-bottom: 0;
2838
+ }
2839
+ .squiz-fte-scope .sds-form-input {
2840
+ background: #fff;
2841
+ border: 2px solid #e0e0e0;
2842
+ border-radius: 0.25rem;
2843
+ position: relative;
2844
+ }
2845
+ .squiz-fte-scope .sds-form-input--custom {
2846
+ position: static;
2847
+ }
2848
+ .squiz-fte-scope .sds-form-input.readonly {
2849
+ border: transparent;
2850
+ }
2851
+ .squiz-fte-scope .sds-form-toggle {
2852
+ display: flex;
2853
+ }
2854
+ .squiz-fte-scope .sds-field-error__icon .svg-wrapper svg {
2855
+ fill: #d72321;
2856
+ }
2857
+ .squiz-fte-scope .sds-field-error__message {
2858
+ color: #d72321;
2859
+ font-size: 0.8125rem;
2860
+ margin-top: 0.25rem;
2861
+ }
2862
+ .squiz-fte-scope .sds-field-note {
2863
+ color: #707070;
2864
+ font-size: 0.8125rem;
2865
+ margin-top: 0.25rem;
2866
+ }
2867
+ .squiz-fte-scope .sds-grid {
2868
+ display: grid;
2869
+ gap: 1.25rem;
2870
+ }
2871
+ .squiz-fte-scope .sds-link-wrapper {
2872
+ display: inline;
2873
+ position: relative;
2874
+ }
2875
+ .squiz-fte-scope .sds-link-icon {
2876
+ height: 100%;
2877
+ left: 0;
2878
+ position: absolute;
2879
+ top: 0;
2880
+ }
2881
+ .squiz-fte-scope .sds-link-icon svg {
2882
+ height: 100%;
2883
+ }
2884
+ .squiz-fte-scope .sds-link-icon ~ span {
2885
+ padding-left: 1.75rem;
2886
+ }
2887
+ .squiz-fte-scope .sds-link.link--standalone {
2888
+ color: #707070;
2889
+ text-decoration: none;
2890
+ }
2891
+ .squiz-fte-scope .sds-link.link--standalone:hover {
2892
+ text-decoration: underline;
2893
+ }
2894
+ .squiz-fte-scope .sds-link.link--paragraph {
2895
+ color: currentcolor;
2896
+ }
2897
+ .squiz-fte-scope .sds-link.link--paragraph:hover {
2898
+ text-decoration: none;
2899
+ }
2900
+ .squiz-fte-scope .sds-link-list__heading {
2901
+ font-size: 1rem;
2902
+ font-weight: 700;
2903
+ letter-spacing: -0.2px;
2904
+ line-height: 1.25rem;
2905
+ display: block;
2906
+ margin-bottom: 0.75rem;
2907
+ }
2908
+ .squiz-fte-scope .sds-link-list {
2909
+ list-style-type: none;
2910
+ margin: 0;
2911
+ padding: 0;
2912
+ }
2913
+ .squiz-fte-scope .sds-link-list li {
2914
+ border-bottom: 1px solid #e0e0e0;
2915
+ }
2916
+ .squiz-fte-scope .sds-link-list li:first-child {
2917
+ border-top: 1px solid #e0e0e0;
2918
+ }
2919
+ .squiz-fte-scope .sds-link-list .sds-link-wrapper {
2920
+ display: flex;
2921
+ }
2922
+ .squiz-fte-scope .sds-link-list .sds-link {
2923
+ color: #3d3d3d;
2924
+ padding: 0.75rem 0;
2925
+ text-decoration: none;
2926
+ width: 100%;
2927
+ }
2928
+ .squiz-fte-scope .sds-link-list .sds-link:hover {
2929
+ text-decoration: underline;
2930
+ }
2931
+ .squiz-fte-scope .sds-link-list .sds-link-text {
2932
+ display: block;
2933
+ }
2934
+ .squiz-fte-scope .sds-loader {
2935
+ align-items: center;
2936
+ display: flex;
2937
+ flex-direction: column;
2938
+ }
2939
+ .squiz-fte-scope .sds-loader-message {
2940
+ max-width: 15.75rem;
2941
+ padding-top: 1.5rem;
2942
+ text-align: center;
2943
+ }
2944
+ .squiz-fte-scope .sds-overlay {
2945
+ background: rgba(0, 0, 0, 0.5);
2946
+ height: calc(100vh - 56px);
2947
+ position: absolute;
2948
+ top: 56px;
2949
+ width: 100%;
2950
+ z-index: 10;
2951
+ }
2952
+ .squiz-fte-scope .sds-overlay.overlay--fullscreen {
2953
+ height: 100vh;
2954
+ top: 0;
2955
+ }
2956
+ .squiz-fte-scope .sds-progress-bar-container.sds-progress-bar-level--extreme .sds-progress-bar__percentage {
2957
+ color: #d72321;
2958
+ }
2959
+ .squiz-fte-scope .sds-progress-bar-container.sds-progress-bar-level--extreme .sds-progress-bar__indicator {
2960
+ background: #d72321;
2961
+ }
2962
+ .squiz-fte-scope .sds-progress-bar-container.sds-progress-bar-level--very-high .sds-progress-bar__indicator {
2963
+ background: #d72321;
2964
+ }
2965
+ .squiz-fte-scope .sds-progress-bar-container.sds-progress-bar-level--high .sds-progress-bar__indicator {
2966
+ background: #e96900;
2967
+ }
2968
+ .squiz-fte-scope .sds-progress-bar-container.sds-progress-bar-level--moderate .sds-progress-bar__indicator {
2969
+ background: #efb324;
2970
+ }
2971
+ .squiz-fte-scope .sds-progress-bar-container.sds-progress-bar-level--low .sds-progress-bar__indicator {
2972
+ background: #098934;
2973
+ }
2974
+ .squiz-fte-scope .sds-progress-bar {
2975
+ background: #ededed;
2976
+ border-radius: 0.5rem;
2977
+ height: 0.5rem;
2978
+ position: relative;
2979
+ }
2980
+ .squiz-fte-scope .sds-progress-bar__indicator {
2981
+ border-radius: 0.5rem;
2982
+ height: 100%;
2983
+ left: 0;
2984
+ position: absolute;
2985
+ top: 0;
2986
+ width: 50%;
2987
+ }
2988
+ .squiz-fte-scope .sds-progress-bar__stats {
2989
+ display: flex;
2990
+ justify-content: space-between;
2991
+ margin-bottom: 0.5rem;
2992
+ }
2993
+ .squiz-fte-scope .sds-progress-bar__percentage,
2994
+ .squiz-fte-scope .sds-progress-bar__current-value {
2995
+ font-weight: 700;
2996
+ }
2997
+ .squiz-fte-scope .sds-row {
2998
+ background-color: #fff;
2999
+ border-radius: 0.25rem;
3000
+ box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1);
3001
+ padding: 1rem;
3002
+ }
3003
+ .squiz-fte-scope .sds-row__title {
3004
+ font-size: 1.25rem;
3005
+ font-weight: 600;
3006
+ letter-spacing: -0.5px;
3007
+ line-height: 1.5rem;
3008
+ color: #3d3d3d;
3009
+ display: block;
3010
+ margin-bottom: 0.75rem;
3011
+ }
3012
+ .squiz-fte-scope .sds-row__title:only-child,
3013
+ .squiz-fte-scope .sds-row__title:last-child {
3014
+ margin-bottom: 0;
3015
+ }
3016
+ .squiz-fte-scope .sds-heading--level-1 {
3017
+ font-size: 1.625rem;
3018
+ font-weight: 600;
3019
+ letter-spacing: -0.2px;
3020
+ line-height: 2rem;
3021
+ margin-bottom: 1.75rem;
3022
+ margin-top: 1.75rem;
3023
+ }
3024
+ .squiz-fte-scope .sds-heading--level-2 {
3025
+ font-size: 1.25rem;
3026
+ font-weight: 600;
3027
+ letter-spacing: -0.5px;
3028
+ line-height: 1.5rem;
3029
+ }
3030
+ .squiz-fte-scope .sds-heading--level-3 {
3031
+ font-size: 1.125rem;
3032
+ font-weight: 600;
3033
+ letter-spacing: -0.2px;
3034
+ line-height: 1.375rem;
3035
+ }
3036
+ .squiz-fte-scope .sds-heading--level-4 {
3037
+ font-size: 1rem;
3038
+ font-weight: 700;
3039
+ letter-spacing: -0.2px;
3040
+ line-height: 1.25rem;
3041
+ }
3042
+ .squiz-fte-scope .sds-heading--level-5 {
3043
+ font-size: 1rem;
3044
+ font-weight: 600;
3045
+ letter-spacing: -0.2px;
3046
+ line-height: 1.25rem;
3047
+ }
3048
+ .squiz-fte-scope .sds-heading--level-6 {
3049
+ font-size: 0.875rem;
3050
+ font-weight: 600;
3051
+ letter-spacing: -0.2px;
3052
+ line-height: 1.25rem;
3053
+ }
3054
+ .squiz-fte-scope .sds-text--sm-regular {
3055
+ font-size: 0.8125rem;
3056
+ font-weight: 400;
3057
+ letter-spacing: 0;
3058
+ line-height: 1rem;
3059
+ }
3060
+ .squiz-fte-scope .sds-text--sm-semibold {
3061
+ font-size: 0.8125rem;
3062
+ font-weight: 600;
3063
+ letter-spacing: 0;
3064
+ line-height: 1rem;
3065
+ }
3066
+ .squiz-fte-scope .sds-text--sm-bold {
3067
+ font-size: 0.8125rem;
3068
+ font-weight: 700;
3069
+ letter-spacing: 0;
3070
+ line-height: 1rem;
3071
+ }
3072
+ .squiz-fte-scope .sds-text--md-regular {
3073
+ font-size: 0.875rem;
3074
+ font-weight: 400;
3075
+ letter-spacing: -0.2px;
3076
+ line-height: 1.25rem;
3077
+ }
3078
+ .squiz-fte-scope .sds-text--md-semibold {
3079
+ font-size: 0.875rem;
3080
+ font-weight: 600;
3081
+ letter-spacing: -0.2px;
3082
+ line-height: 1.25rem;
3083
+ }
3084
+ .squiz-fte-scope .sds-text--md-bold {
3085
+ font-size: 0.875rem;
3086
+ font-weight: 700;
3087
+ letter-spacing: -0.2px;
3088
+ line-height: 1.25rem;
3089
+ }
3090
+ .squiz-fte-scope .sds-text--lg-regular {
3091
+ font-size: 1rem;
3092
+ font-weight: 400;
3093
+ letter-spacing: -0.4px;
3094
+ line-height: 1.5rem;
3095
+ }
3096
+ .squiz-fte-scope .sds-text--lg-semibold {
3097
+ font-size: 1rem;
3098
+ font-weight: 600;
3099
+ letter-spacing: -0.4px;
3100
+ line-height: 1.5rem;
3101
+ }
3102
+ .squiz-fte-scope .sds-text--lg-bold {
3103
+ font-size: 1rem;
3104
+ font-weight: 700;
3105
+ letter-spacing: -0.4px;
3106
+ line-height: 1.5rem;
3107
+ }
3108
+ .squiz-fte-scope .sds-text--xlg-regular {
3109
+ font-size: 1.125rem;
3110
+ font-weight: 400;
3111
+ letter-spacing: -0.4px;
3112
+ line-height: 1.75rem;
3113
+ }
3114
+ .squiz-fte-scope .sds-text--xlg-semibold {
3115
+ font-size: 1.125rem;
3116
+ font-weight: 600;
3117
+ letter-spacing: -0.4px;
3118
+ line-height: 1.6875rem;
3119
+ }
3120
+ .squiz-fte-scope .sds-text--xlg-bold {
3121
+ font-size: 1.125rem;
3122
+ font-weight: 700;
3123
+ letter-spacing: -0.4px;
3124
+ line-height: 1.6875rem;
3125
+ }
3126
+ .squiz-fte-scope .sds-transition--fade {
3127
+ transition: 1s all ease;
3128
+ opacity: 0;
3129
+ position: relative;
3130
+ }
3131
+ .squiz-fte-scope .sds-transition--fade.sds-transition-fade-enter {
3132
+ opacity: 0;
3133
+ }
3134
+ .squiz-fte-scope .sds-transition--fade.sds-transition-fade-enter-active {
3135
+ opacity: 1;
3136
+ transition: opacity 300ms;
3137
+ z-index: 100;
3138
+ }
3139
+ .squiz-fte-scope .sds-transition--fade.sds-transition-fade-enter-done {
3140
+ opacity: 1;
3141
+ }
3142
+ .squiz-fte-scope .sds-transition--fade.sds-transition-fade-exit {
3143
+ opacity: 1;
3144
+ }
3145
+ .squiz-fte-scope .sds-transition--fade.sds-transition-fade-exit-active {
3146
+ opacity: 0;
3147
+ transition: opacity 600ms;
3148
+ z-index: 100;
3149
+ }
3150
+ .squiz-fte-scope .sds-transition--slide-from-top-fade {
3151
+ transition: 1s all ease;
3152
+ position: fixed;
3153
+ right: 0;
3154
+ z-index: 100;
3155
+ }
3156
+ .squiz-fte-scope .sds-transition--slide-from-top-fade.sds-transition-slide-from-top-fade-enter {
3157
+ top: -100%;
3158
+ }
3159
+ .squiz-fte-scope .sds-transition--slide-from-top-fade.sds-transition-slide-from-top-fade-enter-active {
3160
+ top: 0;
3161
+ transition: all 300ms;
3162
+ }
3163
+ .squiz-fte-scope .sds-transition--slide-from-top-fade.sds-transition-slide-from-top-fade-enter-done {
3164
+ top: 0;
3165
+ }
3166
+ .squiz-fte-scope .sds-transition--slide-from-top-fade.sds-transition-slide-from-top-fade-exit {
3167
+ opacity: 1;
3168
+ top: 0;
3169
+ }
3170
+ .squiz-fte-scope .sds-transition--slide-from-top-fade.sds-transition-slide-from-top-fade-exit-active {
3171
+ opacity: 0;
3172
+ top: 0;
3173
+ transition: all 600ms;
3174
+ }
3175
+ .squiz-fte-scope .sds-search-filter input {
3176
+ padding: 0.5rem 0.5rem 0.5rem 3rem;
3177
+ }
3178
+ .squiz-fte-scope .sds-sidenav-item.active {
3179
+ position: relative;
3180
+ }
3181
+ .squiz-fte-scope .sds-sidenav-item.active::before {
3182
+ background: #2b2b2b;
3183
+ border-radius: 0 3px 3px 0;
3184
+ content: "";
3185
+ height: 100%;
3186
+ left: 0;
3187
+ position: absolute;
3188
+ width: 3px;
3189
+ z-index: 1;
3190
+ }
3191
+ .squiz-fte-scope .sds-sidenav-item.active .sds-sidenav-link {
3192
+ color: #3d3d3d;
3193
+ font-weight: 700;
3194
+ }
3195
+ .squiz-fte-scope .sds-sidenav-item.active .sds-sidenav-link svg {
3196
+ fill: #3d3d3d;
3197
+ }
3198
+ .squiz-fte-scope .sds-sidenav-link {
3199
+ color: #707070;
3200
+ display: flex;
3201
+ margin: 0.125rem;
3202
+ padding: 1rem 0 1rem 1rem;
3203
+ text-align: left;
3204
+ width: calc(100% - 0.25rem);
3205
+ }
3206
+ .squiz-fte-scope .sds-sidenav-link:hover,
3207
+ .squiz-fte-scope .sds-sidenav-link:focus {
3208
+ background: #ededed;
3209
+ border-radius: 0.25rem;
3210
+ }
3211
+ .squiz-fte-scope .sds-sidenav-link .svg-wrapper {
3212
+ margin-right: 0.75rem;
3213
+ }
3214
+ .squiz-fte-scope .sds-sidenav-link.active .sds-sidenav-submenu__toggle svg {
3215
+ transform: rotate(90deg);
3216
+ }
3217
+ .squiz-fte-scope .sds-sidenav-link.active + .sds-sidenav-submenu {
3218
+ display: block;
3219
+ height: auto;
3220
+ }
3221
+ .squiz-fte-scope .sds-sidenav-label {
3222
+ display: inline-block;
3223
+ padding-right: 1rem;
3224
+ }
3225
+ .squiz-fte-scope .sds-sidenav-submenu__toggle--top {
3226
+ margin-left: auto;
3227
+ }
3228
+ .squiz-fte-scope .sds-sidenav-submenu__toggle--sub {
3229
+ margin-top: 0.25rem;
3230
+ }
3231
+ .squiz-fte-scope .sds-sidenav-submenu__toggle svg {
3232
+ transform: rotate(-90deg);
3233
+ transition: transform 0.3s ease;
3234
+ }
3235
+ .squiz-fte-scope .sds-sidenav-submenu {
3236
+ list-style-type: none;
3237
+ margin: 0;
3238
+ padding: 0;
3239
+ display: none;
3240
+ height: 0;
3241
+ overflow: hidden;
3242
+ }
3243
+ .squiz-fte-scope .sds-sidenav-submenu .svg-wrapper {
3244
+ margin-right: 0.5rem;
3245
+ }
3246
+ .squiz-fte-scope .sds-sidenav-submenu .svg-wrapper svg {
3247
+ height: 1rem;
3248
+ width: 1rem;
3249
+ }
3250
+ .squiz-fte-scope .sds-sidenav-submenu .sds-sidenav-link {
3251
+ padding-left: 3rem;
3252
+ }
3253
+ .squiz-fte-scope .sds-sidenav-submenu .sds-sidenav-submenu .sds-sidenav-link {
3254
+ padding-left: 4.5rem;
3255
+ }
3256
+ @media screen and (max-width: 1024px) {
3257
+ .squiz-fte-scope .sds-sidenav-link {
3258
+ font-size: 1rem;
3259
+ font-weight: 600;
3260
+ letter-spacing: -0.4px;
3261
+ line-height: 1.5rem;
3262
+ }
3263
+ }
3264
+ @media screen and (min-width: 1024px) {
3265
+ .squiz-fte-scope .sds-sidenav-link {
3266
+ font-size: 0.875rem;
3267
+ font-weight: 600;
3268
+ letter-spacing: -0.2px;
3269
+ line-height: 1.5rem;
3270
+ padding: 0.625rem 0 0.625rem 1rem;
3271
+ }
3272
+ }
3273
+ .squiz-fte-scope .sds-sidenav-list {
3274
+ list-style-type: none;
3275
+ margin: 0;
3276
+ padding: 0;
3277
+ }
3278
+ .squiz-fte-scope .sds-sidenav-section {
3279
+ align-items: center;
3280
+ display: flex;
3281
+ padding: 1rem 1.25rem;
3282
+ text-transform: uppercase;
3283
+ }
3284
+ .squiz-fte-scope .sds-sidenav {
3285
+ background: #f5f5f5;
3286
+ color: #707070;
3287
+ overflow-y: auto;
3288
+ padding: 1rem 0;
3289
+ }
3290
+ .squiz-fte-scope .sds-sidenav-mobile {
3291
+ left: 0;
3292
+ position: fixed;
3293
+ top: 56px;
3294
+ width: 100%;
3295
+ z-index: 10;
3296
+ }
3297
+ .squiz-fte-scope .sds-sidenav-mobile .sds-sidenav {
3298
+ height: calc(100vh - 56px);
3299
+ }
3300
+ .squiz-fte-scope .sds-sidenav-tablet {
3301
+ background: rgba(0, 0, 0, 0.5);
3302
+ display: flex;
3303
+ height: calc(100vh - 56px);
3304
+ left: 0;
3305
+ position: absolute;
3306
+ top: 100%;
3307
+ width: 100%;
3308
+ z-index: 10;
3309
+ }
3310
+ .squiz-fte-scope .sds-sidenav-tablet.sds-transition-enter .sds-sidenav {
3311
+ transform: translateX(-100%);
3312
+ }
3313
+ .squiz-fte-scope .sds-sidenav-tablet.sds-transition-enter-active .sds-sidenav {
3314
+ transform: translateX(0);
3315
+ transition: transform 300ms;
3316
+ }
3317
+ .squiz-fte-scope .sds-sidenav-tablet.sds-transition-enter-done .sds-sidenav {
3318
+ transform: translateX(0);
3319
+ }
3320
+ .squiz-fte-scope .sds-sidenav-tablet.sds-transition-exit .sds-sidenav {
3321
+ transform: translateX(0);
3322
+ }
3323
+ .squiz-fte-scope .sds-sidenav-tablet.sds-transition-exit-active .sds-sidenav {
3324
+ transform: translateX(-100%);
3325
+ transition: transform 600ms;
3326
+ }
3327
+ .squiz-fte-scope .sds-sidenav-tablet .sds-sidenav {
3328
+ border-top: 1px solid #e0e0e0;
3329
+ flex-shrink: 0;
3330
+ }
3331
+ .squiz-fte-scope .sds-sidenav-bg {
3332
+ width: 100%;
3333
+ }
3334
+ @media screen and (min-width: 768px) {
3335
+ .squiz-fte-scope .sds-sidenav {
3336
+ height: 100%;
3337
+ width: 260px;
3338
+ }
3339
+ }
3340
+ .squiz-fte-scope .sds-sidenav-launcher {
3341
+ align-items: center;
3342
+ display: flex;
3343
+ flex-direction: column;
3344
+ }
3345
+ .squiz-fte-scope .sds-sidenav-launcher .sds-button.button--icon {
3346
+ margin: 0;
3347
+ padding: 0;
3348
+ }
3349
+ .squiz-fte-scope .sds-sidenav-launcher > .sds-button:hover rect,
3350
+ .squiz-fte-scope .sds-sidenav-launcher > .sds-button.active rect {
3351
+ fill-opacity: 0.6;
3352
+ }
3353
+ .squiz-fte-scope .sds-sidenav-launcher > .sds-button:hover path,
3354
+ .squiz-fte-scope .sds-sidenav-launcher > .sds-button.active path {
3355
+ fill-opacity: 1;
3356
+ }
3357
+ @media screen and (max-width: 575px) {
3358
+ .squiz-fte-scope .sds-sidenav-launcher {
3359
+ margin-left: 0.75rem;
3360
+ margin-right: 0;
3361
+ }
3362
+ }
3363
+ @media screen and (min-width: 576px) {
3364
+ .squiz-fte-scope .sds-sidenav-launcher {
3365
+ margin-left: 0.25rem;
3366
+ margin-right: 0.75rem;
3367
+ }
3368
+ }
3369
+ .squiz-fte-scope .sds-skip-links__list {
3370
+ list-style-type: none;
3371
+ margin: 0;
3372
+ padding: 0;
3373
+ }
3374
+ .squiz-fte-scope .sds-skip-links__button {
3375
+ font-size: 0.875rem;
3376
+ font-weight: 600;
3377
+ letter-spacing: -0.2px;
3378
+ line-height: 1.25rem;
3379
+ color: #707070;
3380
+ display: inline-block;
3381
+ padding: 0.75rem;
3382
+ }
3383
+ .squiz-fte-scope .sds-skip-links__button:hover,
3384
+ .squiz-fte-scope .sds-skip-links__button:focus,
3385
+ .squiz-fte-scope .sds-skip-links__button:focus-within,
3386
+ .squiz-fte-scope .sds-skip-links__button:active {
3387
+ background: #ededed;
3388
+ }
3389
+ .squiz-fte-scope .sds-source-selector__item button {
3390
+ font-size: 0.875rem;
3391
+ font-weight: 400;
3392
+ letter-spacing: -0.2px;
3393
+ line-height: 1.25rem;
3394
+ background: #fff;
3395
+ border: none;
3396
+ border-radius: 0.25rem;
3397
+ color: #4f4f4f;
3398
+ margin: 0;
3399
+ padding: 0.375rem 0.5rem;
3400
+ width: 100%;
3401
+ align-items: center;
3402
+ display: flex;
3403
+ border: 1px solid #ededed;
3404
+ border-bottom: none;
3405
+ border-radius: 0;
3406
+ padding: 0.625rem;
3407
+ }
3408
+ .squiz-fte-scope .sds-source-selector__item button:hover {
3409
+ background: #f5f5f5;
3410
+ }
3411
+ .squiz-fte-scope .sds-source-selector__item button:focus {
3412
+ z-index: 1;
3413
+ }
3414
+ .squiz-fte-scope .sds-source-selector__item button span {
3415
+ margin-right: 0.75rem;
3416
+ }
3417
+ .squiz-fte-scope .sds-source-selector__item:first-child button {
3418
+ border-radius: 0.25rem 0.25rem 0 0;
3419
+ }
3420
+ .squiz-fte-scope .sds-source-selector__item:last-child button {
3421
+ border-bottom: 1px solid #ededed;
3422
+ border-radius: 0 0 0.25rem 0.25rem;
3423
+ }
3424
+ .squiz-fte-scope .sds-source-selector__item .sds-source-selector__icon {
3425
+ margin-right: 0.5rem;
3426
+ }
3427
+ .squiz-fte-scope .sds-source-selector__item .sds-source-selector__check {
3428
+ margin-left: auto;
3429
+ }
3430
+ .squiz-fte-scope .sds-source-selector__item .sds-source-selector__check svg {
3431
+ height: 24px;
3432
+ width: 24px;
3433
+ }
3434
+ .squiz-fte-scope .sds-source-selector__item .sds-source-selector__check path {
3435
+ fill: #044985;
3436
+ }
3437
+ .squiz-fte-scope .sds-source-selector__launcher {
3438
+ font-size: 0.875rem;
3439
+ letter-spacing: -0.2px;
3440
+ line-height: 1.25rem;
3441
+ background: #fff;
3442
+ border: none;
3443
+ border-radius: 0.25rem;
3444
+ color: #4f4f4f;
3445
+ margin: 0;
3446
+ padding: 0.375rem 0.5rem;
3447
+ width: 100%;
3448
+ align-items: center;
3449
+ display: flex;
3450
+ font-weight: 600;
3451
+ overflow: hidden;
3452
+ text-overflow: ellipsis;
3453
+ white-space: nowrap;
3454
+ }
3455
+ .squiz-fte-scope .sds-source-selector__launcher .sds-source-selector__icon {
3456
+ margin-right: 0.75rem;
3457
+ }
3458
+ .squiz-fte-scope .sds-source-selector__launcher .sds-source-selector__chevron {
3459
+ margin-left: auto;
3460
+ pointer-events: none;
3461
+ }
3462
+ .squiz-fte-scope .sds-source-selector__launcher .sds-source-selector__chevron svg {
3463
+ transform: rotate(-90deg);
3464
+ }
3465
+ .squiz-fte-scope .sds-source-selector.active .sds-source-selector__launcher .sds-source-selector__chevron svg {
3466
+ transform: rotate(90deg);
3467
+ }
3468
+ .squiz-fte-scope .sds-source-selector {
3469
+ border-radius: 0.25rem;
3470
+ display: grid;
3471
+ position: relative;
3472
+ }
3473
+ .squiz-fte-scope .sds-source-selector ul {
3474
+ list-style-type: none;
3475
+ margin: 0;
3476
+ padding: 0;
3477
+ }
3478
+ .squiz-fte-scope .sds-source-selector__panel {
3479
+ background-color: #f5f5f5;
3480
+ border: 2px solid #e0e0e0;
3481
+ border-radius: 0.25rem;
3482
+ margin-top: 6px;
3483
+ max-height: 12rem;
3484
+ overflow-y: auto;
3485
+ padding: 0.5rem;
3486
+ position: absolute;
3487
+ top: 100%;
3488
+ width: 100%;
3489
+ z-index: 1;
3490
+ }
3491
+ @keyframes spinner-border {
3492
+ 0% {
3493
+ transform: rotate(0);
3494
+ }
3495
+ 100% {
3496
+ transform: rotate(360deg);
3497
+ }
3498
+ }
3499
+ .squiz-fte-scope .sds-spinner {
3500
+ align-items: center;
3501
+ display: flex;
3502
+ animation: spinner-border 0.8s linear infinite both;
3503
+ border-radius: 50%;
3504
+ color: currentcolor;
3505
+ }
3506
+ .squiz-fte-scope .sds-spinner.spinner--regular {
3507
+ border: 0.1875rem solid currentcolor;
3508
+ height: 2rem;
3509
+ width: 2rem;
3510
+ border-right-color: transparent;
3511
+ }
3512
+ .squiz-fte-scope .sds-spinner.spinner--sm {
3513
+ border: 0.125rem solid currentcolor;
3514
+ height: 1.25rem;
3515
+ width: 1.25rem;
3516
+ border-right-color: transparent;
3517
+ }
3518
+ .squiz-fte-scope .sds-spinner.spinner--xs {
3519
+ border: 0.125rem solid currentcolor;
3520
+ height: 1rem;
3521
+ width: 1rem;
3522
+ border-right-color: transparent;
3523
+ }
3524
+ .squiz-fte-scope .sds-table__wrapper {
3525
+ background: #fff;
3526
+ border: 1px solid #e0e0e0;
3527
+ border-radius: 0.25rem;
3528
+ overflow-x: auto;
3529
+ position: relative;
3530
+ }
3531
+ .squiz-fte-scope .sds-table__wrapper.table--sortable .sds-table th:hover {
3532
+ background-color: #d4d4d4;
3533
+ border-radius: 0;
3534
+ cursor: pointer;
3535
+ }
3536
+ .squiz-fte-scope .sds-table__wrapper.table--slim .sds-table__th,
3537
+ .squiz-fte-scope .sds-table__wrapper.table--slim .sds-table__th-content {
3538
+ font-size: 0.8125rem;
3539
+ line-height: 1rem;
3540
+ }
3541
+ .squiz-fte-scope .sds-table__wrapper.table--slim th,
3542
+ .squiz-fte-scope .sds-table__wrapper.table--slim td,
3543
+ .squiz-fte-scope .sds-table__wrapper.table--slim .sds-table__pagination {
3544
+ padding-bottom: 0.5rem;
3545
+ padding-top: 0.5rem;
3546
+ }
3547
+ .squiz-fte-scope .sds-table__wrapper.table--slim td {
3548
+ vertical-align: top;
3549
+ }
3550
+ .squiz-fte-scope .sds-table__wrapper.table--slim .sds-table__pagination-options {
3551
+ height: 1.25rem;
3552
+ }
3553
+ .squiz-fte-scope .sds-table table {
3554
+ background: #fff;
3555
+ border: none;
3556
+ border-collapse: collapse;
3557
+ border-spacing: 0;
3558
+ display: table;
3559
+ position: relative;
3560
+ width: 100%;
3561
+ }
3562
+ .squiz-fte-scope .sds-table thead {
3563
+ background: #ededed;
3564
+ color: #707070;
3565
+ }
3566
+ .squiz-fte-scope .sds-table th {
3567
+ font-size: 0.875rem;
3568
+ font-weight: 600;
3569
+ letter-spacing: -0.2px;
3570
+ line-height: 1.25rem;
3571
+ background: #ededed;
3572
+ transition: all 0.3s ease;
3573
+ }
3574
+ .squiz-fte-scope .sds-table th:focus {
3575
+ border-radius: 0;
3576
+ box-shadow: none;
3577
+ }
3578
+ .squiz-fte-scope .sds-table th:focus .sds-table__th-content::after {
3579
+ border-radius: 0.25rem;
3580
+ box-shadow: 0 0 0 2px #0774d2;
3581
+ content: "";
3582
+ height: calc(100% + 2px);
3583
+ left: -2px;
3584
+ position: absolute;
3585
+ top: -1px;
3586
+ width: calc(100% + 0.25rem);
3587
+ }
3588
+ .squiz-fte-scope .sds-table th:focus:not(:focus-visible) .sds-table__th-content::after {
3589
+ content: none;
3590
+ }
3591
+ .squiz-fte-scope .sds-table .sds-table__th-content {
3592
+ display: inline-flex;
3593
+ line-height: 1.5rem;
3594
+ position: relative;
3595
+ }
3596
+ .squiz-fte-scope .sds-table th,
3597
+ .squiz-fte-scope .sds-table td {
3598
+ border-bottom: 1px solid #e0e0e0;
3599
+ color: #3d3d3d;
3600
+ padding: 1.25rem 1rem;
3601
+ text-align: left;
3602
+ }
3603
+ .squiz-fte-scope .sds-table tr:last-child td {
3604
+ border-bottom: none;
3605
+ }
3606
+ .squiz-fte-scope .sds-table__pagination {
3607
+ align-items: center;
3608
+ display: flex;
3609
+ background: #fff;
3610
+ border-top: 1px solid #e0e0e0;
3611
+ color: #707070;
3612
+ font-weight: 600;
3613
+ justify-content: space-between;
3614
+ padding: 0.75rem 1rem;
3615
+ }
3616
+ .squiz-fte-scope .sds-table__pagination-options {
3617
+ align-items: center;
3618
+ display: flex;
3619
+ }
3620
+ .squiz-fte-scope .sds-table__page-select {
3621
+ background: transparent;
3622
+ border: none;
3623
+ color: #707070;
3624
+ font-weight: 600;
3625
+ margin-left: 0.5rem;
3626
+ }
3627
+ .squiz-fte-scope .sds-table__navigator {
3628
+ align-items: center;
3629
+ display: flex;
3630
+ }
3631
+ .squiz-fte-scope .sds-table__navigator button[disabled] {
3632
+ opacity: 0.5;
3633
+ pointer-events: none;
3634
+ }
3635
+ .squiz-fte-scope .sds-table__navigator button {
3636
+ border-radius: 0.25rem;
3637
+ transition: all 0.3s ease;
3638
+ }
3639
+ .squiz-fte-scope .sds-table__navigator button svg {
3640
+ height: 1.25rem;
3641
+ }
3642
+ .squiz-fte-scope .sds-table__navigator button:hover {
3643
+ background: #e6e6e6;
3644
+ }
3645
+ .squiz-fte-scope .sds-table__row-range {
3646
+ display: block;
3647
+ margin-right: 0.5rem;
3648
+ }
3649
+ .squiz-fte-scope .sds-table__search {
3650
+ display: flex;
3651
+ margin-bottom: 1rem;
3652
+ }
3653
+ .squiz-fte-scope .sds-table__search .sds-form-field {
3654
+ width: 15.625rem;
3655
+ }
3656
+ @media screen and (max-width: 575px) {
3657
+ .squiz-fte-scope .sds-table__search .sds-form-field {
3658
+ width: 100%;
3659
+ }
3660
+ .squiz-fte-scope .sds-table__pagination {
3661
+ align-items: flex-start;
3662
+ flex-direction: column;
3663
+ }
3664
+ .squiz-fte-scope .sds-table__pagination-options {
3665
+ margin-bottom: 1rem;
3666
+ }
3667
+ }
3668
+ .squiz-fte-scope .sds-tabs-outer-button {
3669
+ position: absolute;
3670
+ right: 0;
3671
+ top: -3.4375rem;
3672
+ }
3673
+ .squiz-fte-scope .sds-tabs-list {
3674
+ list-style-type: none;
3675
+ margin: 0;
3676
+ padding: 0;
3677
+ align-items: center;
3678
+ display: flex;
3679
+ border-bottom: 1px solid rgba(43, 43, 43, 0.1);
3680
+ }
3681
+ .squiz-fte-scope .sds-tabs-item {
3682
+ margin-right: 0.5rem;
3683
+ }
3684
+ .squiz-fte-scope .sds-tabs-item button {
3685
+ font-size: 1rem;
3686
+ font-weight: 400;
3687
+ letter-spacing: -0.4px;
3688
+ line-height: 1.5rem;
3689
+ color: #3d3d3d;
3690
+ padding: 0.5rem;
3691
+ position: relative;
3692
+ }
3693
+ .squiz-fte-scope .sds-tabs-item button::after {
3694
+ background: transparent;
3695
+ border-radius: 0.125rem 0.125rem 0 0;
3696
+ bottom: -1px;
3697
+ content: "";
3698
+ height: 3px;
3699
+ left: 0;
3700
+ position: absolute;
3701
+ width: 100%;
3702
+ }
3703
+ .squiz-fte-scope .sds-tabs-item button:hover::after {
3704
+ background: #bababa;
3705
+ }
3706
+ .squiz-fte-scope .sds-tabs-item.active button {
3707
+ font-weight: 700;
3708
+ }
3709
+ .squiz-fte-scope .sds-tabs-item.active button::after {
3710
+ background: #2b2b2b;
3711
+ }
3712
+ .squiz-fte-scope .sds-toast__container {
3713
+ padding: 1rem;
3714
+ position: relative;
3715
+ right: 0;
3716
+ top: 57px;
3717
+ z-index: 8;
3718
+ }
3719
+ .squiz-fte-scope .sds-toast {
3720
+ align-items: center;
3721
+ display: inline-flex;
3722
+ background: #fff;
3723
+ border-radius: 0.25rem;
3724
+ box-shadow: 0 0 4px rgba(0, 0, 0, 0.04), 0 1px 12px rgba(0, 0, 0, 0.12);
3725
+ min-width: 17rem;
3726
+ padding: 0.75rem;
3727
+ }
3728
+ .squiz-fte-scope .sds-toast-icon {
3729
+ align-self: flex-start;
3730
+ margin-right: 0.875rem;
3731
+ }
3732
+ .squiz-fte-scope .sds-toast-content {
3733
+ flex-grow: 1;
3734
+ }
3735
+ .squiz-fte-scope .sds-toast-message a {
3736
+ color: #0774d2;
3737
+ font-style: italic;
3738
+ text-decoration: none;
3739
+ }
3740
+ .squiz-fte-scope .sds-toast-message a:hover {
3741
+ text-decoration: underline;
3742
+ }
3743
+ .squiz-fte-scope .sds-toast-title {
3744
+ font-size: 1rem;
3745
+ font-weight: 700;
3746
+ letter-spacing: -0.4px;
3747
+ line-height: 1.5rem;
3748
+ color: #3d3d3d;
3749
+ }
3750
+ .squiz-fte-scope .sds-toast-close {
3751
+ align-self: flex-start;
3752
+ margin-left: 0.75rem;
3753
+ }
3754
+ .squiz-fte-scope .sds-toast-close:hover .svg-wrapper svg {
3755
+ fill: #3d3d3d;
3756
+ }
3757
+ .squiz-fte-scope .sds-toast-type--success .sds-toast-icon svg {
3758
+ fill: #098934;
3759
+ }
3760
+ .squiz-fte-scope .sds-toast-type--info .sds-toast-icon svg {
3761
+ fill: #057e91;
3762
+ }
3763
+ .squiz-fte-scope .sds-toast-type--warning .sds-toast-icon svg {
3764
+ fill: #e96900;
3765
+ }
3766
+ .squiz-fte-scope .sds-toast-type--danger .sds-toast-icon svg {
3767
+ fill: #d72321;
3768
+ }
3769
+ .squiz-fte-scope .sds-toast-type--loading .sds-toast-icon {
3770
+ margin-top: 0.125rem;
3771
+ }
3772
+ @media screen and (max-width: 575px) {
3773
+ .squiz-fte-scope .sds-toast {
3774
+ width: 100%;
3775
+ }
3776
+ .squiz-fte-scope .sds-toast__container {
3777
+ padding: 0;
3778
+ right: 1.5rem;
3779
+ top: 1.5rem;
3780
+ width: calc(100vw - 2 * 1.5rem);
3781
+ }
3782
+ }
3783
+ @media screen and (min-width: 768px) {
3784
+ .squiz-fte-scope .sds-toast__container {
3785
+ max-width: calc(26.25rem + 2rem);
3786
+ }
3787
+ }
3788
+ .squiz-fte-scope .sds-toolbar {
3789
+ align-items: center;
3790
+ display: flex;
3791
+ background: #26324b;
3792
+ max-height: 56px;
3793
+ padding: 0.5rem;
3794
+ position: relative;
3795
+ }
3796
+ .squiz-fte-scope .sds-toolbar-branding {
3797
+ align-items: center;
3798
+ display: flex;
3799
+ }
3800
+ .squiz-fte-scope .sds-toolbar-logo {
3801
+ margin-right: 0.75rem;
3802
+ }
3803
+ .squiz-fte-scope .sds-toolbar-logo .sds-toolbar-logo--plain.svg-wrapper {
3804
+ align-items: center;
3805
+ display: flex;
3806
+ justify-content: center;
3807
+ height: 2.125rem;
3808
+ width: 2.125rem;
3809
+ }
3810
+ .squiz-fte-scope .sds-toolbar-logo .sds-toolbar-logo--plain.svg-wrapper svg {
3811
+ fill: none;
3812
+ }
3813
+ .squiz-fte-scope .sds-toolbar-branding__text {
3814
+ font-size: 1rem;
3815
+ font-weight: 600;
3816
+ letter-spacing: -0.4px;
3817
+ line-height: 1.5rem;
3818
+ color: #fff;
3819
+ margin-right: 1rem;
3820
+ min-width: -moz-fit-content;
3821
+ min-width: fit-content;
3822
+ }
3823
+ .squiz-fte-scope .sds-toolbar-client {
3824
+ font-size: 1rem;
3825
+ font-weight: 600;
3826
+ letter-spacing: -0.4px;
3827
+ line-height: 1.5rem;
3828
+ color: #fff;
3829
+ margin-left: 1rem;
3830
+ position: relative;
3831
+ }
3832
+ .squiz-fte-scope .sds-toolbar-client > div::before,
3833
+ .squiz-fte-scope .sds-toolbar-client > span::before {
3834
+ background-color: rgba(255, 255, 255, 0.2);
3835
+ border-radius: 0.25rem;
3836
+ content: "";
3837
+ height: 1.875rem;
3838
+ left: -1rem;
3839
+ opacity: 0.4;
3840
+ position: absolute;
3841
+ top: 50%;
3842
+ transform: translateY(-50%);
3843
+ width: 0.125rem;
3844
+ }
3845
+ .squiz-fte-scope .sds-toolbar-content {
3846
+ flex-grow: 1;
3847
+ }
3848
+ .squiz-fte-scope .sds-toolbar-tools {
3849
+ align-items: center;
3850
+ display: flex;
3851
+ background: rgba(29, 155, 226, 0.16);
3852
+ border-radius: 0.25rem;
3853
+ color: rgba(0, 0, 0, 0.7);
3854
+ height: 2.5rem;
3855
+ margin-left: 0.75rem;
3856
+ }
3857
+ .squiz-fte-scope .sds-toolbar-tools .sds-dropdown {
3858
+ z-index: 20;
3859
+ }
3860
+ .squiz-fte-scope .sds-toolbar-menus .sds-button {
3861
+ padding: 0.5rem 0.375rem;
3862
+ }
3863
+ .squiz-fte-scope .sds-toolbar-menus .sds-dropdown-wrapper {
3864
+ display: flex;
3865
+ }
3866
+ .squiz-fte-scope .sds-toolbar-menus--help .sds-button.button--default.button--transparent .sds-button-icon svg,
3867
+ .squiz-fte-scope .sds-toolbar-menus--settings .sds-button.button--default.button--transparent .sds-button-icon svg {
3868
+ fill: rgba(255, 255, 255, 0.6);
3869
+ transition: all 0.3s ease;
3870
+ }
3871
+ .squiz-fte-scope .sds-toolbar-menus--help .sds-button.button--default.button--transparent .sds-button-icon:hover svg,
3872
+ .squiz-fte-scope .sds-toolbar-menus--settings .sds-button.button--default.button--transparent .sds-button-icon:hover svg {
3873
+ fill: #fff;
3874
+ }
3875
+ .squiz-fte-scope .sds-toolbar-menus__list {
3876
+ list-style-type: none;
3877
+ margin: 0;
3878
+ padding: 0;
3879
+ align-items: center;
3880
+ display: flex;
3881
+ padding: 0 0.375rem;
3882
+ }
3883
+ .squiz-fte-scope .sds-toolbar-user__wrapper {
3884
+ position: relative;
3885
+ }
3886
+ .squiz-fte-scope .sds-toolbar-user__wrapper::before {
3887
+ background-color: #26324b;
3888
+ border-radius: 0.25rem;
3889
+ content: "";
3890
+ height: 1.5rem;
3891
+ left: 0;
3892
+ position: absolute;
3893
+ top: 50%;
3894
+ transform: translateY(-50%);
3895
+ width: 0.125rem;
3896
+ }
3897
+ .squiz-fte-scope .sds-toolbar-user {
3898
+ margin-left: 0.125rem;
3899
+ padding: 0 0.375rem;
3900
+ }
3901
+ .squiz-fte-scope .sds-toolbar-user .sds-avatar {
3902
+ background-color: #fff;
3903
+ color: #26324b;
3904
+ }
3905
+ .squiz-fte-scope .sds-toolbar-user .sds-button {
3906
+ padding: 0.375rem;
3907
+ }
3908
+ .squiz-fte-scope .sds-toolbar-user .sds-user-name {
3909
+ color: #fff;
3910
+ }
3911
+ @media screen and (max-width: 575px) {
3912
+ .squiz-fte-scope .sds-toolbar {
3913
+ padding: 0.6875rem 0.75rem;
3914
+ }
3915
+ .squiz-fte-scope .sds-toolbar-tools {
3916
+ display: none;
3917
+ }
3918
+ }
3919
+ @media screen and (min-width: 1024px) {
3920
+ .squiz-fte-scope .sds-toolbar {
3921
+ padding-left: 0.75rem;
3922
+ }
3923
+ }
3924
+ .squiz-fte-scope .sds-tooltip__wrapper {
3925
+ display: inline-block;
3926
+ position: relative;
3927
+ }
3928
+ .squiz-fte-scope .sds-tooltip__wrapper:hover .sds-tooltip {
3929
+ display: block;
3930
+ }
3931
+ .squiz-fte-scope .sds-tooltip {
3932
+ font-size: 0.875rem;
3933
+ font-weight: 400;
3934
+ letter-spacing: -0.2px;
3935
+ line-height: 1.25rem;
3936
+ display: none;
3937
+ position: absolute;
3938
+ width: -moz-max-content;
3939
+ width: max-content;
3940
+ }
3941
+ .squiz-fte-scope .sds-tooltip.position--bottom,
3942
+ .squiz-fte-scope .sds-tooltip.position--top {
3943
+ left: 50%;
3944
+ transform: translateX(-50%);
3945
+ }
3946
+ .squiz-fte-scope .sds-tooltip.position--left,
3947
+ .squiz-fte-scope .sds-tooltip.position--right {
3948
+ top: 50%;
3949
+ transform: translateY(-50%);
3950
+ }
3951
+ .squiz-fte-scope .sds-tooltip.position--bottom {
3952
+ padding-top: 0.25rem;
3953
+ top: 100%;
3954
+ }
3955
+ .squiz-fte-scope .sds-tooltip.position--left {
3956
+ padding-right: 0.25rem;
3957
+ right: 100%;
3958
+ }
3959
+ .squiz-fte-scope .sds-tooltip.position--right {
3960
+ left: 100%;
3961
+ padding-left: 0.25rem;
3962
+ }
3963
+ .squiz-fte-scope .sds-tooltip.position--top {
3964
+ bottom: 100%;
3965
+ padding-bottom: 0.25rem;
3966
+ }
3967
+ .squiz-fte-scope .sds-tooltip__label {
3968
+ background-color: #2b2b2b;
3969
+ border-radius: 0.25rem;
3970
+ color: #fff;
3971
+ padding: 0.125rem 0.5rem;
3972
+ }
3973
+ .squiz-fte-scope .sds-user {
3974
+ align-items: center;
3975
+ display: flex;
3976
+ flex-direction: column;
3977
+ }
3978
+ .squiz-fte-scope .sds-user-avatar + .sds-user-name {
3979
+ margin-top: 0.75rem;
3980
+ }
3981
+ .squiz-fte-scope .sds-user-name {
3982
+ font-size: 1rem;
3983
+ font-weight: 600;
3984
+ letter-spacing: -0.4px;
3985
+ line-height: 1.5rem;
3986
+ overflow-x: hidden;
3987
+ text-align: center;
3988
+ text-overflow: ellipsis;
3989
+ }
3990
+ .squiz-fte-scope .dashboard-summary {
3991
+ background: #ededed;
3992
+ border-radius: 0.5rem;
3993
+ margin-top: 1rem;
3994
+ padding: 1.25rem;
3995
+ }
3996
+ .squiz-fte-scope .dashboard-summary__content {
3997
+ background: #fff;
3998
+ border-radius: 0.5rem;
3999
+ padding: 1rem 1.5rem;
4000
+ }
4001
+ .squiz-fte-scope .dashboard-summary__content-grid {
4002
+ display: grid;
4003
+ gap: 32px 56px;
4004
+ grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
4005
+ }
4006
+ .squiz-fte-scope .dashboard-summary-item hr {
4007
+ background: #e0e0e0;
4008
+ border: 0;
4009
+ height: 1px;
4010
+ margin: 0.75rem 0;
4011
+ padding: 0;
4012
+ }
4013
+ .squiz-fte-scope .dashboard-summary-item__title {
4014
+ align-items: center;
4015
+ display: flex;
4016
+ gap: 0.5rem;
4017
+ margin: 0;
4018
+ }
4019
+ .squiz-fte-scope .dashboard-summary-item__description {
4020
+ font-size: 0.8125rem;
4021
+ font-weight: 400;
4022
+ letter-spacing: 0;
4023
+ line-height: 1rem;
4024
+ color: #707070;
4025
+ margin-bottom: 0.5rem;
4026
+ }
4027
+ .squiz-fte-scope .dashboard-summary-item__count {
4028
+ color: #3d3d3d;
4029
+ font-size: 2rem;
4030
+ padding: 0.75rem 0;
4031
+ vertical-align: middle;
4032
+ }
4033
+ .squiz-fte-scope .dashboard-summary-item__trend {
4034
+ align-items: center;
4035
+ display: flex;
4036
+ flex-wrap: wrap;
4037
+ }
4038
+ .squiz-fte-scope .dashboard-summary-item__trend > *:first-child {
4039
+ margin-right: 0.25rem;
4040
+ }
4041
+ .squiz-fte-scope .dashboard-summary-item__trend > *:nth-child(2) {
4042
+ margin-right: 0.5rem;
4043
+ }
4044
+ .squiz-fte-scope .dashboard-summary-item__trend-percentage {
4045
+ font-size: 1rem;
4046
+ font-weight: 600;
4047
+ letter-spacing: -0.4px;
4048
+ line-height: 1.5rem;
4049
+ }
4050
+ .squiz-fte-scope .dashboard-summary-item__trend-icon {
4051
+ vertical-align: middle;
4052
+ }
4053
+ .squiz-fte-scope .dashboard-summary-item__trend-icon svg {
4054
+ display: block;
4055
+ }
4056
+ .squiz-fte-scope .dashboard-summary-item__trend-description {
4057
+ font-size: 0.8125rem;
4058
+ font-weight: 400;
4059
+ letter-spacing: 0;
4060
+ line-height: 1rem;
4061
+ color: #707070;
4062
+ text-wrap: nowrap;
4063
+ }
4064
+ .squiz-fte-scope .up .dashboard-summary-item__trend-icon svg,
4065
+ .squiz-fte-scope .up .dashboard-summary-item__trend-percentage,
4066
+ .squiz-fte-scope .down.inverted .dashboard-summary-item__trend-icon svg,
4067
+ .squiz-fte-scope .down.inverted .dashboard-summary-item__trend-percentage {
4068
+ color: #098934;
4069
+ fill: #098934;
4070
+ }
4071
+ .squiz-fte-scope .down .dashboard-summary-item__trend-icon svg,
4072
+ .squiz-fte-scope .down .dashboard-summary-item__trend-percentage,
4073
+ .squiz-fte-scope .up.inverted .dashboard-summary-item__trend-icon svg,
4074
+ .squiz-fte-scope .up.inverted .dashboard-summary-item__trend-percentage {
4075
+ color: #d72321;
4076
+ fill: #d72321;
4077
+ }
4078
+ .squiz-fte-scope .flat .dashboard-summary-item__trend-icon svg,
4079
+ .squiz-fte-scope .flat .dashboard-summary-item__trend-percentage {
4080
+ color: #707070;
4081
+ fill: #707070;
4082
+ }
4083
+ .squiz-fte-scope .dashboard-summary-item__help-icon svg {
4084
+ background-color: #ededed;
4085
+ border-radius: 100%;
4086
+ height: 22px;
4087
+ padding: 0.125rem;
4088
+ width: 22px;
4089
+ }
4090
+ .squiz-fte-scope .sds-popover {
4091
+ display: inline-block;
4092
+ position: relative;
4093
+ }
4094
+ .squiz-fte-scope .sds-popover:hover .sds-popover__content-wrapper {
4095
+ display: block;
4096
+ }
4097
+ .squiz-fte-scope .sds-popover__content-wrapper {
4098
+ border-radius: 0.25rem;
4099
+ bottom: calc(100% + 1rem);
4100
+ box-shadow: 0 0 2px rgba(0, 0, 0, 0.12), 0 1px 4px rgba(0, 0, 0, 0.08);
4101
+ display: none;
4102
+ height: -moz-fit-content;
4103
+ height: fit-content;
4104
+ position: absolute;
4105
+ right: 50%;
4106
+ transform: translateX(50%);
4107
+ z-index: 2;
4108
+ }
4109
+ .squiz-fte-scope .sds-popover__content-wrapper::before {
4110
+ background: #fff;
4111
+ bottom: 0;
4112
+ box-shadow: 0 0 2px rgba(0, 0, 0, 0.12), 0 1px 4px rgba(0, 0, 0, 0.08);
4113
+ content: "";
4114
+ height: 15px;
4115
+ left: 50%;
4116
+ position: absolute;
4117
+ transform: translate(-50%, 50%) rotate(45deg);
4118
+ width: 15px;
4119
+ z-index: -1;
4120
+ }
4121
+ .squiz-fte-scope .sds-popover__content {
4122
+ font-size: 0.875rem;
4123
+ font-weight: 400;
4124
+ letter-spacing: -0.2px;
4125
+ line-height: 1.25rem;
4126
+ background-color: #fff;
4127
+ border-radius: 0.25rem;
4128
+ padding: 1rem;
4129
+ }
4130
+ .squiz-fte-scope .sds-popover__text {
4131
+ display: block;
4132
+ width: 100%;
4133
+ }
4134
+ .squiz-fte-scope .sds-popover__title {
4135
+ font-size: 1.25rem;
4136
+ font-weight: 600;
4137
+ letter-spacing: -0.5px;
4138
+ line-height: 1.5rem;
4139
+ margin-bottom: 1rem;
4140
+ margin-top: 0;
4141
+ }
4142
+ .squiz-fte-scope .sds-popover--left .sds-popover__content-wrapper {
4143
+ bottom: 50%;
4144
+ right: calc(100% + 1rem);
4145
+ transform: translateY(50%);
4146
+ }
4147
+ .squiz-fte-scope .sds-popover--left .sds-popover__content-wrapper::before {
4148
+ left: unset;
4149
+ right: 0;
4150
+ top: 50%;
4151
+ transform: translate(50%, -50%) rotate(45deg);
4152
+ }
4153
+ .squiz-fte-scope .sds-popover--right .sds-popover__content-wrapper {
4154
+ bottom: 50%;
4155
+ left: calc(100% + 1rem);
4156
+ transform: translateY(50%);
4157
+ }
4158
+ .squiz-fte-scope .sds-popover--right .sds-popover__content-wrapper::before {
4159
+ left: 0;
4160
+ right: unset;
4161
+ top: 50%;
4162
+ transform: translate(-50%, -50%) rotate(45deg);
4163
+ }
4164
+ .squiz-fte-scope .sds-popover--bottom .sds-popover__content-wrapper {
4165
+ top: calc(100% + 1rem);
4166
+ transform: translateX(50%);
4167
+ }
4168
+ .squiz-fte-scope .sds-popover--bottom .sds-popover__content-wrapper::before {
4169
+ bottom: unset;
4170
+ left: 50%;
4171
+ right: unset;
4172
+ top: 0;
4173
+ transform: translate(-50%, -50%) rotate(45deg);
4174
+ }
4175
+ .squiz-fte-scope .sds-popover--small .sds-popover__content-wrapper {
4176
+ width: 260px;
4177
+ }
4178
+ .squiz-fte-scope .sds-popover--medium .sds-popover__content-wrapper {
4179
+ width: 400px;
4180
+ }
4181
+
3
4182
  /* src/index.scss */
4
4183
  .squiz-fte-scope *,
5
4184
  .squiz-fte-scope ::before,
@@ -1503,6 +5682,43 @@
1503
5682
  --tw-text-opacity: 1;
1504
5683
  color: rgb(7 116 210 / var(--tw-text-opacity));
1505
5684
  }
5685
+ .squiz-fte-scope .content-tools-dropdown .sds-button-icon svg {
5686
+ fill: none !important;
5687
+ }
5688
+ .squiz-fte-scope .content-tools-dropdown .sds-dropdown {
5689
+ left: auto;
5690
+ right: auto;
5691
+ top: auto;
5692
+ width: 188px;
5693
+ margin-top: 0.45rem;
5694
+ margin-left: -2rem;
5695
+ }
5696
+ .squiz-fte-scope .content-tools-dropdown .sds-dropdown .sds-dropdown-heading {
5697
+ font-size: 0.8125rem;
5698
+ font-weight: 600;
5699
+ letter-spacing: 0;
5700
+ line-height: 1rem;
5701
+ background-color: #f5f5f5;
5702
+ border-radius: 0.25rem;
5703
+ padding: 0.25rem 0.5rem;
5704
+ pointer-events: none;
5705
+ text-transform: none;
5706
+ }
5707
+ .squiz-fte-scope .content-tools-dropdown .sds-dropdown .sds-dropdown-section {
5708
+ border-top: 1px solid #ededed;
5709
+ border-bottom: none;
5710
+ padding-top: 0.25rem;
5711
+ margin-bottom: 0;
5712
+ }
5713
+ .squiz-fte-scope .content-tools-dropdown .sds-dropdown .sds-dropdown-section .sds-dropdown-label {
5714
+ font-size: 0.8125rem;
5715
+ color: #4f4f4f;
5716
+ line-height: 1rem;
5717
+ }
5718
+ .squiz-fte-scope .content-tools-dropdown .sds-dropdown.active {
5719
+ display: block;
5720
+ padding: 0.25rem;
5721
+ }
1506
5722
  .squiz-fte-scope .hover\:bg-blue-400:hover {
1507
5723
  --tw-bg-opacity: 1 !important;
1508
5724
  background-color: rgb(4 73 133 / var(--tw-bg-opacity)) !important;
@@ -1523,3 +5739,11 @@
1523
5739
  outline: 2px solid transparent !important;
1524
5740
  outline-offset: 2px !important;
1525
5741
  }
5742
+ /*! Bundled license information:
5743
+
5744
+ @squiz/sds/lib/package.css:
5745
+ (*!
5746
+ * @license
5747
+ * Copyright Squiz Australia Pty Ltd. All Rights Reserved.
5748
+ *)
5749
+ */