@transferwise/neptune-css 14.9.2 → 14.9.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (49) hide show
  1. package/dist/css/border-radius.css +0 -8
  2. package/dist/css/flex.css +253 -417
  3. package/dist/css/navbar-base.css +339 -168
  4. package/dist/css/navbar.css +107 -41
  5. package/dist/css/neptune-addons.css +893 -421
  6. package/dist/css/neptune-core.css +200 -163
  7. package/dist/css/neptune.css +15471 -14675
  8. package/dist/css/utilities.css +72 -1202
  9. package/package.json +1 -1
  10. package/src/less/addons/_display-utilities.less +159 -0
  11. package/src/less/addons/_spacing-utilities.less +26 -3
  12. package/src/less/addons/_utilities.less +147 -0
  13. package/src/less/border-radius.less +3 -1
  14. package/src/less/core/_scaffolding.less +27 -7
  15. package/src/less/core/_typography-utilities.less +237 -17
  16. package/src/less/flex.less +18 -9
  17. package/src/less/{addons → mixins}/_center-block.less +4 -2
  18. package/src/less/mixins/_flex.less +105 -0
  19. package/src/less/navbar.less +2 -10
  20. package/src/less/neptune-addons.less +1 -4
  21. package/src/less/utilities.less +141 -29
  22. package/src/less/utilities/align-items.less +0 -107
  23. package/src/less/utilities/align-self.less +0 -107
  24. package/src/less/utilities/border-radius.less +0 -11
  25. package/src/less/utilities/color.less +0 -70
  26. package/src/less/utilities/cursor.less +0 -3
  27. package/src/less/utilities/display.less +0 -178
  28. package/src/less/utilities/flex-direction.less +0 -47
  29. package/src/less/utilities/flex-grow.less +0 -27
  30. package/src/less/utilities/flex-wrap.less +0 -47
  31. package/src/less/utilities/float.less +0 -77
  32. package/src/less/utilities/font-weight.less +0 -11
  33. package/src/less/utilities/gap.less +0 -3
  34. package/src/less/utilities/justify-content.less +0 -107
  35. package/src/less/utilities/margin.less +0 -192
  36. package/src/less/utilities/max-width.less +0 -3
  37. package/src/less/utilities/order.less +0 -87
  38. package/src/less/utilities/outline-style.less +0 -8
  39. package/src/less/utilities/overflow-wrap.less +0 -3
  40. package/src/less/utilities/padding.less +0 -179
  41. package/src/less/utilities/position.less +0 -3
  42. package/src/less/utilities/rotate.less +0 -12
  43. package/src/less/utilities/screen-reader.less +0 -24
  44. package/src/less/utilities/text-align.less +0 -87
  45. package/src/less/utilities/text-decoration-line.less +0 -8
  46. package/src/less/utilities/text-overflow.less +0 -7
  47. package/src/less/utilities/text-transform.less +0 -11
  48. package/src/less/utilities/visibility.less +0 -3
  49. package/src/less/utilities/white-space.less +0 -27
package/dist/css/neptune-addons.css CHANGED
@@ -111,287 +111,851 @@
111
111
  .bg-accent strong {
112
112
  color: #ffffff;
113
113
  }
114
- .gap-y-1 {
115
- row-gap: 8px;
116
- row-gap: var(--size-8);
114
+ .d-block {
115
+ display: block !important;
116
+ }
117
+ .d-inline-block {
118
+ display: inline-block !important;
119
+ }
120
+ .visible-xs,
121
+ .visible-xs-block,
122
+ .visible-xs-inline,
123
+ .visible-xs-inline-block,
124
+ .visible-sm,
125
+ .visible-sm-block,
126
+ .visible-sm-inline,
127
+ .visible-sm-inline-block,
128
+ .visible-md,
129
+ .visible-md-block,
130
+ .visible-md-inline,
131
+ .visible-md-inline-block,
132
+ .visible-lg,
133
+ .visible-lg-block,
134
+ .visible-lg-inline,
135
+ .visible-lg-inline-block,
136
+ .visible-xl,
137
+ .visible-xl-block,
138
+ .visible-xl-inline,
139
+ .visible-xl-inline-block {
140
+ display: none !important;
141
+ }
142
+ @media (max-width: 575px) {
143
+ .visible-xs,
144
+ .visible-xs-block {
145
+ display: block !important;
146
+ }
147
+ }
148
+ @media (max-width: 575px) {
149
+ .visible-xs-inline {
150
+ display: inline !important;
151
+ }
152
+ }
153
+ @media (max-width: 575px) {
154
+ .visible-xs-inline-block {
155
+ display: inline-block !important;
156
+ }
157
+ }
158
+ @media (min-width: 576px) and (max-width: 767px) {
159
+ .visible-sm,
160
+ .visible-sm-block {
161
+ display: block !important;
162
+ }
163
+ }
164
+ @media (min-width: 576px) and (max-width: 767px) {
165
+ .visible-sm-inline {
166
+ display: inline !important;
167
+ }
168
+ }
169
+ @media (min-width: 576px) and (max-width: 767px) {
170
+ .visible-sm-inline-block {
171
+ display: inline-block !important;
172
+ }
173
+ }
174
+ @media (min-width: 768px) and (max-width: 991px) {
175
+ .visible-md,
176
+ .visible-md-block {
177
+ display: block !important;
178
+ }
179
+ }
180
+ @media (min-width: 768px) and (max-width: 991px) {
181
+ .visible-md-inline {
182
+ display: inline !important;
183
+ }
184
+ }
185
+ @media (min-width: 768px) and (max-width: 991px) {
186
+ .visible-md-inline-block {
187
+ display: inline-block !important;
188
+ }
189
+ }
190
+ @media (min-width: 992px) and (max-width: 1199px) {
191
+ .visible-lg,
192
+ .visible-lg-block {
193
+ display: block !important;
194
+ }
195
+ }
196
+ @media (min-width: 992px) and (max-width: 1199px) {
197
+ .visible-lg-inline {
198
+ display: inline !important;
199
+ }
200
+ }
201
+ @media (min-width: 992px) and (max-width: 1199px) {
202
+ .visible-lg-inline-block {
203
+ display: inline-block !important;
204
+ }
205
+ }
206
+ @media (min-width: 1200px) {
207
+ .visible-xl,
208
+ .visible-xl-block {
209
+ display: block !important;
210
+ }
211
+ }
212
+ @media (min-width: 1200px) {
213
+ .visible-xl-inline {
214
+ display: inline !important;
215
+ }
216
+ }
217
+ @media (min-width: 1200px) {
218
+ .visible-xl-inline-block {
219
+ display: inline-block !important;
220
+ }
221
+ }
222
+ @media (max-width: 575px) {
223
+ .hidden-xs {
224
+ display: none !important;
225
+ }
226
+ }
227
+ @media (min-width: 576px) and (max-width: 767px) {
228
+ .hidden-sm {
229
+ display: none !important;
230
+ }
231
+ }
232
+ @media (min-width: 768px) and (max-width: 991px) {
233
+ .hidden-md {
234
+ display: none !important;
235
+ }
236
+ }
237
+ @media (min-width: 992px) and (max-width: 1199px) {
238
+ .hidden-lg {
239
+ display: none !important;
240
+ }
241
+ }
242
+ @media (min-width: 1200px) {
243
+ .hidden-xl {
244
+ display: none !important;
245
+ }
246
+ }
247
+ .outline-none {
248
+ outline: none;
117
249
  }
118
250
  .m-a-0 {
119
- margin: 0px !important;
251
+ margin-top: 0 !important;
252
+ margin-bottom: 0 !important;
253
+ }
254
+ [dir="rtl"] .m-a-0 {
255
+ margin-left: 0 !important;
256
+ }
257
+ html:not([dir="rtl"]) .m-a-0 {
258
+ margin-right: 0 !important;
259
+ }
260
+ [dir="rtl"] .m-a-0 {
261
+ margin-right: 0 !important;
262
+ }
263
+ html:not([dir="rtl"]) .m-a-0 {
264
+ margin-left: 0 !important;
265
+ }
266
+ .p-a-0 {
267
+ padding-top: 0 !important;
268
+ padding-bottom: 0 !important;
269
+ }
270
+ [dir="rtl"] .p-a-0 {
271
+ padding-left: 0 !important;
272
+ }
273
+ html:not([dir="rtl"]) .p-a-0 {
274
+ padding-right: 0 !important;
275
+ }
276
+ [dir="rtl"] .p-a-0 {
277
+ padding-right: 0 !important;
278
+ }
279
+ html:not([dir="rtl"]) .p-a-0 {
280
+ padding-left: 0 !important;
281
+ }
282
+ .m-t-0 {
283
+ margin-top: 0 !important;
284
+ }
285
+ .m-b-0 {
286
+ margin-bottom: 0 !important;
287
+ }
288
+ .m-y-0 {
289
+ margin-top: 0 !important;
290
+ margin-bottom: 0 !important;
291
+ }
292
+ .p-t-0 {
293
+ padding-top: 0 !important;
294
+ }
295
+ .p-b-0 {
296
+ padding-bottom: 0 !important;
297
+ }
298
+ .p-y-0 {
299
+ padding-top: 0 !important;
300
+ padding-bottom: 0 !important;
301
+ }
302
+ [dir="rtl"] .m-l-0 {
303
+ margin-right: 0 !important;
304
+ }
305
+ html:not([dir="rtl"]) .m-l-0 {
306
+ margin-left: 0 !important;
307
+ }
308
+ [dir="rtl"] .m-r-0 {
309
+ margin-left: 0 !important;
310
+ }
311
+ html:not([dir="rtl"]) .m-r-0 {
312
+ margin-right: 0 !important;
313
+ }
314
+ [dir="rtl"] .m-x-0 {
315
+ margin-right: 0 !important;
316
+ }
317
+ html:not([dir="rtl"]) .m-x-0 {
318
+ margin-left: 0 !important;
319
+ }
320
+ [dir="rtl"] .m-x-0 {
321
+ margin-left: 0 !important;
322
+ }
323
+ html:not([dir="rtl"]) .m-x-0 {
324
+ margin-right: 0 !important;
325
+ }
326
+ [dir="rtl"] .p-l-0 {
327
+ padding-right: 0 !important;
328
+ }
329
+ html:not([dir="rtl"]) .p-l-0 {
330
+ padding-left: 0 !important;
331
+ }
332
+ [dir="rtl"] .p-r-0 {
333
+ padding-left: 0 !important;
334
+ }
335
+ html:not([dir="rtl"]) .p-r-0 {
336
+ padding-right: 0 !important;
337
+ }
338
+ [dir="rtl"] .p-x-0 {
339
+ padding-right: 0 !important;
340
+ }
341
+ html:not([dir="rtl"]) .p-x-0 {
342
+ padding-left: 0 !important;
343
+ }
344
+ [dir="rtl"] .p-x-0 {
345
+ padding-left: 0 !important;
346
+ }
347
+ html:not([dir="rtl"]) .p-x-0 {
348
+ padding-right: 0 !important;
120
349
  }
121
350
  .m-a-1 {
122
- margin: 8px !important;
123
- margin: var(--size-8) !important;
351
+ margin-top: 8px !important;
352
+ margin-top: var(--size-8) !important;
353
+ margin-bottom: 8px !important;
354
+ margin-bottom: var(--size-8) !important;
355
+ }
356
+ [dir="rtl"] .m-a-1 {
357
+ margin-left: 8px !important;
358
+ margin-left: var(--size-8) !important;
359
+ }
360
+ html:not([dir="rtl"]) .m-a-1 {
361
+ margin-right: 8px !important;
362
+ margin-right: var(--size-8) !important;
363
+ }
364
+ [dir="rtl"] .m-a-1 {
365
+ margin-right: 8px !important;
366
+ margin-right: var(--size-8) !important;
367
+ }
368
+ html:not([dir="rtl"]) .m-a-1 {
369
+ margin-left: 8px !important;
370
+ margin-left: var(--size-8) !important;
371
+ }
372
+ .p-a-1 {
373
+ padding-top: 8px !important;
374
+ padding-top: var(--size-8) !important;
375
+ padding-bottom: 8px !important;
376
+ padding-bottom: var(--size-8) !important;
377
+ }
378
+ [dir="rtl"] .p-a-1 {
379
+ padding-left: 8px !important;
380
+ padding-left: var(--size-8) !important;
381
+ }
382
+ html:not([dir="rtl"]) .p-a-1 {
383
+ padding-right: 8px !important;
384
+ padding-right: var(--size-8) !important;
385
+ }
386
+ [dir="rtl"] .p-a-1 {
387
+ padding-right: 8px !important;
388
+ padding-right: var(--size-8) !important;
389
+ }
390
+ html:not([dir="rtl"]) .p-a-1 {
391
+ padding-left: 8px !important;
392
+ padding-left: var(--size-8) !important;
393
+ }
394
+ .m-t-1 {
395
+ margin-top: 8px !important;
396
+ margin-top: var(--size-8) !important;
397
+ }
398
+ .m-b-1 {
399
+ margin-bottom: 8px !important;
400
+ margin-bottom: var(--size-8) !important;
401
+ }
402
+ .m-y-1 {
403
+ margin-top: 8px !important;
404
+ margin-top: var(--size-8) !important;
405
+ margin-bottom: 8px !important;
406
+ margin-bottom: var(--size-8) !important;
407
+ }
408
+ .p-t-1 {
409
+ padding-top: 8px !important;
410
+ padding-top: var(--size-8) !important;
411
+ }
412
+ .p-b-1 {
413
+ padding-bottom: 8px !important;
414
+ padding-bottom: var(--size-8) !important;
415
+ }
416
+ .p-y-1 {
417
+ padding-top: 8px !important;
418
+ padding-top: var(--size-8) !important;
419
+ padding-bottom: 8px !important;
420
+ padding-bottom: var(--size-8) !important;
421
+ }
422
+ [dir="rtl"] .m-l-1 {
423
+ margin-right: 8px !important;
424
+ margin-right: var(--size-8) !important;
425
+ }
426
+ html:not([dir="rtl"]) .m-l-1 {
427
+ margin-left: 8px !important;
428
+ margin-left: var(--size-8) !important;
429
+ }
430
+ [dir="rtl"] .m-r-1 {
431
+ margin-left: 8px !important;
432
+ margin-left: var(--size-8) !important;
433
+ }
434
+ html:not([dir="rtl"]) .m-r-1 {
435
+ margin-right: 8px !important;
436
+ margin-right: var(--size-8) !important;
437
+ }
438
+ [dir="rtl"] .m-x-1 {
439
+ margin-right: 8px !important;
440
+ margin-right: var(--size-8) !important;
441
+ }
442
+ html:not([dir="rtl"]) .m-x-1 {
443
+ margin-left: 8px !important;
444
+ margin-left: var(--size-8) !important;
445
+ }
446
+ [dir="rtl"] .m-x-1 {
447
+ margin-left: 8px !important;
448
+ margin-left: var(--size-8) !important;
449
+ }
450
+ html:not([dir="rtl"]) .m-x-1 {
451
+ margin-right: 8px !important;
452
+ margin-right: var(--size-8) !important;
453
+ }
454
+ [dir="rtl"] .p-l-1 {
455
+ padding-right: 8px !important;
456
+ padding-right: var(--size-8) !important;
457
+ }
458
+ html:not([dir="rtl"]) .p-l-1 {
459
+ padding-left: 8px !important;
460
+ padding-left: var(--size-8) !important;
461
+ }
462
+ [dir="rtl"] .p-r-1 {
463
+ padding-left: 8px !important;
464
+ padding-left: var(--size-8) !important;
465
+ }
466
+ html:not([dir="rtl"]) .p-r-1 {
467
+ padding-right: 8px !important;
468
+ padding-right: var(--size-8) !important;
469
+ }
470
+ [dir="rtl"] .p-x-1 {
471
+ padding-right: 8px !important;
472
+ padding-right: var(--size-8) !important;
473
+ }
474
+ html:not([dir="rtl"]) .p-x-1 {
475
+ padding-left: 8px !important;
476
+ padding-left: var(--size-8) !important;
477
+ }
478
+ [dir="rtl"] .p-x-1 {
479
+ padding-left: 8px !important;
480
+ padding-left: var(--size-8) !important;
481
+ }
482
+ html:not([dir="rtl"]) .p-x-1 {
483
+ padding-right: 8px !important;
484
+ padding-right: var(--size-8) !important;
124
485
  }
125
486
  .m-a-2 {
126
- margin: 16px !important;
127
- margin: var(--size-16) !important;
487
+ margin-top: 16px !important;
488
+ margin-top: var(--size-16) !important;
489
+ margin-bottom: 16px !important;
490
+ margin-bottom: var(--size-16) !important;
491
+ }
492
+ [dir="rtl"] .m-a-2 {
493
+ margin-left: 16px !important;
494
+ margin-left: var(--size-16) !important;
495
+ }
496
+ html:not([dir="rtl"]) .m-a-2 {
497
+ margin-right: 16px !important;
498
+ margin-right: var(--size-16) !important;
499
+ }
500
+ [dir="rtl"] .m-a-2 {
501
+ margin-right: 16px !important;
502
+ margin-right: var(--size-16) !important;
503
+ }
504
+ html:not([dir="rtl"]) .m-a-2 {
505
+ margin-left: 16px !important;
506
+ margin-left: var(--size-16) !important;
507
+ }
508
+ .p-a-2 {
509
+ padding-top: 16px !important;
510
+ padding-top: var(--size-16) !important;
511
+ padding-bottom: 16px !important;
512
+ padding-bottom: var(--size-16) !important;
513
+ }
514
+ [dir="rtl"] .p-a-2 {
515
+ padding-left: 16px !important;
516
+ padding-left: var(--size-16) !important;
517
+ }
518
+ html:not([dir="rtl"]) .p-a-2 {
519
+ padding-right: 16px !important;
520
+ padding-right: var(--size-16) !important;
521
+ }
522
+ [dir="rtl"] .p-a-2 {
523
+ padding-right: 16px !important;
524
+ padding-right: var(--size-16) !important;
525
+ }
526
+ html:not([dir="rtl"]) .p-a-2 {
527
+ padding-left: 16px !important;
528
+ padding-left: var(--size-16) !important;
529
+ }
530
+ .m-t-2 {
531
+ margin-top: 16px !important;
532
+ margin-top: var(--size-16) !important;
533
+ }
534
+ .m-b-2 {
535
+ margin-bottom: 16px !important;
536
+ margin-bottom: var(--size-16) !important;
537
+ }
538
+ .m-y-2 {
539
+ margin-top: 16px !important;
540
+ margin-top: var(--size-16) !important;
541
+ margin-bottom: 16px !important;
542
+ margin-bottom: var(--size-16) !important;
543
+ }
544
+ .p-t-2 {
545
+ padding-top: 16px !important;
546
+ padding-top: var(--size-16) !important;
547
+ }
548
+ .p-b-2 {
549
+ padding-bottom: 16px !important;
550
+ padding-bottom: var(--size-16) !important;
551
+ }
552
+ .p-y-2 {
553
+ padding-top: 16px !important;
554
+ padding-top: var(--size-16) !important;
555
+ padding-bottom: 16px !important;
556
+ padding-bottom: var(--size-16) !important;
557
+ }
558
+ [dir="rtl"] .m-l-2 {
559
+ margin-right: 16px !important;
560
+ margin-right: var(--size-16) !important;
561
+ }
562
+ html:not([dir="rtl"]) .m-l-2 {
563
+ margin-left: 16px !important;
564
+ margin-left: var(--size-16) !important;
565
+ }
566
+ [dir="rtl"] .m-r-2 {
567
+ margin-left: 16px !important;
568
+ margin-left: var(--size-16) !important;
569
+ }
570
+ html:not([dir="rtl"]) .m-r-2 {
571
+ margin-right: 16px !important;
572
+ margin-right: var(--size-16) !important;
573
+ }
574
+ [dir="rtl"] .m-x-2 {
575
+ margin-right: 16px !important;
576
+ margin-right: var(--size-16) !important;
577
+ }
578
+ html:not([dir="rtl"]) .m-x-2 {
579
+ margin-left: 16px !important;
580
+ margin-left: var(--size-16) !important;
581
+ }
582
+ [dir="rtl"] .m-x-2 {
583
+ margin-left: 16px !important;
584
+ margin-left: var(--size-16) !important;
585
+ }
586
+ html:not([dir="rtl"]) .m-x-2 {
587
+ margin-right: 16px !important;
588
+ margin-right: var(--size-16) !important;
589
+ }
590
+ [dir="rtl"] .p-l-2 {
591
+ padding-right: 16px !important;
592
+ padding-right: var(--size-16) !important;
593
+ }
594
+ html:not([dir="rtl"]) .p-l-2 {
595
+ padding-left: 16px !important;
596
+ padding-left: var(--size-16) !important;
597
+ }
598
+ [dir="rtl"] .p-r-2 {
599
+ padding-left: 16px !important;
600
+ padding-left: var(--size-16) !important;
601
+ }
602
+ html:not([dir="rtl"]) .p-r-2 {
603
+ padding-right: 16px !important;
604
+ padding-right: var(--size-16) !important;
605
+ }
606
+ [dir="rtl"] .p-x-2 {
607
+ padding-right: 16px !important;
608
+ padding-right: var(--size-16) !important;
609
+ }
610
+ html:not([dir="rtl"]) .p-x-2 {
611
+ padding-left: 16px !important;
612
+ padding-left: var(--size-16) !important;
613
+ }
614
+ [dir="rtl"] .p-x-2 {
615
+ padding-left: 16px !important;
616
+ padding-left: var(--size-16) !important;
617
+ }
618
+ html:not([dir="rtl"]) .p-x-2 {
619
+ padding-right: 16px !important;
620
+ padding-right: var(--size-16) !important;
621
+ }
622
+ .m-a-3 {
623
+ margin-top: 24px !important;
624
+ margin-top: var(--size-24) !important;
625
+ margin-bottom: 24px !important;
626
+ margin-bottom: var(--size-24) !important;
627
+ }
628
+ [dir="rtl"] .m-a-3 {
629
+ margin-left: 24px !important;
630
+ margin-left: var(--size-24) !important;
631
+ }
632
+ html:not([dir="rtl"]) .m-a-3 {
633
+ margin-right: 24px !important;
634
+ margin-right: var(--size-24) !important;
635
+ }
636
+ [dir="rtl"] .m-a-3 {
637
+ margin-right: 24px !important;
638
+ margin-right: var(--size-24) !important;
639
+ }
640
+ html:not([dir="rtl"]) .m-a-3 {
641
+ margin-left: 24px !important;
642
+ margin-left: var(--size-24) !important;
643
+ }
644
+ .p-a-3 {
645
+ padding-top: 24px !important;
646
+ padding-top: var(--size-24) !important;
647
+ padding-bottom: 24px !important;
648
+ padding-bottom: var(--size-24) !important;
649
+ }
650
+ [dir="rtl"] .p-a-3 {
651
+ padding-left: 24px !important;
652
+ padding-left: var(--size-24) !important;
653
+ }
654
+ html:not([dir="rtl"]) .p-a-3 {
655
+ padding-right: 24px !important;
656
+ padding-right: var(--size-24) !important;
657
+ }
658
+ [dir="rtl"] .p-a-3 {
659
+ padding-right: 24px !important;
660
+ padding-right: var(--size-24) !important;
661
+ }
662
+ html:not([dir="rtl"]) .p-a-3 {
663
+ padding-left: 24px !important;
664
+ padding-left: var(--size-24) !important;
665
+ }
666
+ .m-t-3 {
667
+ margin-top: 24px !important;
668
+ margin-top: var(--size-24) !important;
669
+ }
670
+ .m-b-3 {
671
+ margin-bottom: 24px !important;
672
+ margin-bottom: var(--size-24) !important;
673
+ }
674
+ .m-y-3 {
675
+ margin-top: 24px !important;
676
+ margin-top: var(--size-24) !important;
677
+ margin-bottom: 24px !important;
678
+ margin-bottom: var(--size-24) !important;
679
+ }
680
+ .p-t-3 {
681
+ padding-top: 24px !important;
682
+ padding-top: var(--size-24) !important;
683
+ }
684
+ .p-b-3 {
685
+ padding-bottom: 24px !important;
686
+ padding-bottom: var(--size-24) !important;
687
+ }
688
+ .p-y-3 {
689
+ padding-top: 24px !important;
690
+ padding-top: var(--size-24) !important;
691
+ padding-bottom: 24px !important;
692
+ padding-bottom: var(--size-24) !important;
128
693
  }
129
- .m-a-3 {
130
- margin: 24px !important;
131
- margin: var(--size-24) !important;
694
+ [dir="rtl"] .m-l-3 {
695
+ margin-right: 24px !important;
696
+ margin-right: var(--size-24) !important;
132
697
  }
133
- .m-a-4 {
134
- margin: 32px !important;
135
- margin: var(--size-32) !important;
698
+ html:not([dir="rtl"]) .m-l-3 {
699
+ margin-left: 24px !important;
700
+ margin-left: var(--size-24) !important;
136
701
  }
137
- .m-a-5 {
138
- margin: 40px !important;
139
- margin: var(--size-40) !important;
702
+ [dir="rtl"] .m-r-3 {
703
+ margin-left: 24px !important;
704
+ margin-left: var(--size-24) !important;
140
705
  }
141
- .m-x-0 {
142
- margin-left: 0px !important;
143
- margin-right: 0px !important;
706
+ html:not([dir="rtl"]) .m-r-3 {
707
+ margin-right: 24px !important;
708
+ margin-right: var(--size-24) !important;
144
709
  }
145
- .m-x-1 {
146
- margin-left: 8px !important;
147
- margin-left: var(--size-8) !important;
148
- margin-right: 8px !important;
149
- margin-right: var(--size-8) !important;
710
+ [dir="rtl"] .m-x-3 {
711
+ margin-right: 24px !important;
712
+ margin-right: var(--size-24) !important;
150
713
  }
151
- .m-x-2 {
152
- margin-left: 16px !important;
153
- margin-left: var(--size-16) !important;
154
- margin-right: 16px !important;
155
- margin-right: var(--size-16) !important;
714
+ html:not([dir="rtl"]) .m-x-3 {
715
+ margin-left: 24px !important;
716
+ margin-left: var(--size-24) !important;
156
717
  }
157
- .m-x-3 {
718
+ [dir="rtl"] .m-x-3 {
158
719
  margin-left: 24px !important;
159
720
  margin-left: var(--size-24) !important;
721
+ }
722
+ html:not([dir="rtl"]) .m-x-3 {
160
723
  margin-right: 24px !important;
161
724
  margin-right: var(--size-24) !important;
162
725
  }
163
- .m-x-4 {
164
- margin-left: 32px !important;
165
- margin-left: var(--size-32) !important;
166
- margin-right: 32px !important;
167
- margin-right: var(--size-32) !important;
726
+ [dir="rtl"] .p-l-3 {
727
+ padding-right: 24px !important;
728
+ padding-right: var(--size-24) !important;
168
729
  }
169
- .m-x-5 {
170
- margin-left: 40px !important;
171
- margin-left: var(--size-40) !important;
172
- margin-right: 40px !important;
173
- margin-right: var(--size-40) !important;
730
+ html:not([dir="rtl"]) .p-l-3 {
731
+ padding-left: 24px !important;
732
+ padding-left: var(--size-24) !important;
174
733
  }
175
- .m-x-auto {
176
- margin-left: auto !important;
177
- margin-right: auto !important;
734
+ [dir="rtl"] .p-r-3 {
735
+ padding-left: 24px !important;
736
+ padding-left: var(--size-24) !important;
178
737
  }
179
- .m-y-0 {
180
- margin-top: 0px !important;
181
- margin-bottom: 0px !important;
738
+ html:not([dir="rtl"]) .p-r-3 {
739
+ padding-right: 24px !important;
740
+ padding-right: var(--size-24) !important;
182
741
  }
183
- .m-y-1 {
184
- margin-top: 8px !important;
185
- margin-top: var(--size-8) !important;
186
- margin-bottom: 8px !important;
187
- margin-bottom: var(--size-8) !important;
742
+ [dir="rtl"] .p-x-3 {
743
+ padding-right: 24px !important;
744
+ padding-right: var(--size-24) !important;
188
745
  }
189
- .m-y-2 {
190
- margin-top: 16px !important;
191
- margin-top: var(--size-16) !important;
192
- margin-bottom: 16px !important;
193
- margin-bottom: var(--size-16) !important;
746
+ html:not([dir="rtl"]) .p-x-3 {
747
+ padding-left: 24px !important;
748
+ padding-left: var(--size-24) !important;
194
749
  }
195
- .m-y-3 {
196
- margin-top: 24px !important;
197
- margin-top: var(--size-24) !important;
198
- margin-bottom: 24px !important;
199
- margin-bottom: var(--size-24) !important;
750
+ [dir="rtl"] .p-x-3 {
751
+ padding-left: 24px !important;
752
+ padding-left: var(--size-24) !important;
200
753
  }
201
- .m-y-4 {
754
+ html:not([dir="rtl"]) .p-x-3 {
755
+ padding-right: 24px !important;
756
+ padding-right: var(--size-24) !important;
757
+ }
758
+ .m-a-4 {
202
759
  margin-top: 32px !important;
203
760
  margin-top: var(--size-32) !important;
204
761
  margin-bottom: 32px !important;
205
762
  margin-bottom: var(--size-32) !important;
206
763
  }
207
- .m-y-5 {
208
- margin-top: 40px !important;
209
- margin-top: var(--size-40) !important;
210
- margin-bottom: 40px !important;
211
- margin-bottom: var(--size-40) !important;
212
- }
213
- .m-l-0 {
214
- margin-inline-start: 0px !important;
764
+ [dir="rtl"] .m-a-4 {
765
+ margin-left: 32px !important;
766
+ margin-left: var(--size-32) !important;
215
767
  }
216
- .m-l-1 {
217
- margin-inline-start: 8px !important;
218
- margin-inline-start: var(--size-8) !important;
768
+ html:not([dir="rtl"]) .m-a-4 {
769
+ margin-right: 32px !important;
770
+ margin-right: var(--size-32) !important;
219
771
  }
220
- .m-l-2 {
221
- margin-inline-start: 16px !important;
222
- margin-inline-start: var(--size-16) !important;
772
+ [dir="rtl"] .m-a-4 {
773
+ margin-right: 32px !important;
774
+ margin-right: var(--size-32) !important;
223
775
  }
224
- .m-l-3 {
225
- margin-inline-start: 24px !important;
226
- margin-inline-start: var(--size-24) !important;
776
+ html:not([dir="rtl"]) .m-a-4 {
777
+ margin-left: 32px !important;
778
+ margin-left: var(--size-32) !important;
227
779
  }
228
- .m-l-4 {
229
- margin-inline-start: 32px !important;
230
- margin-inline-start: var(--size-32) !important;
780
+ .p-a-4 {
781
+ padding-top: 32px !important;
782
+ padding-top: var(--size-32) !important;
783
+ padding-bottom: 32px !important;
784
+ padding-bottom: var(--size-32) !important;
231
785
  }
232
- .m-l-5 {
233
- margin-inline-start: 40px !important;
234
- margin-inline-start: var(--size-40) !important;
786
+ [dir="rtl"] .p-a-4 {
787
+ padding-left: 32px !important;
788
+ padding-left: var(--size-32) !important;
235
789
  }
236
- .m-l-auto {
237
- margin-inline-start: auto !important;
790
+ html:not([dir="rtl"]) .p-a-4 {
791
+ padding-right: 32px !important;
792
+ padding-right: var(--size-32) !important;
238
793
  }
239
- .m-r-0 {
240
- margin-inline-end: 0px !important;
794
+ [dir="rtl"] .p-a-4 {
795
+ padding-right: 32px !important;
796
+ padding-right: var(--size-32) !important;
241
797
  }
242
- .m-r-1 {
243
- margin-inline-end: 8px !important;
244
- margin-inline-end: var(--size-8) !important;
798
+ html:not([dir="rtl"]) .p-a-4 {
799
+ padding-left: 32px !important;
800
+ padding-left: var(--size-32) !important;
245
801
  }
246
- .m-r-2 {
247
- margin-inline-end: 16px !important;
248
- margin-inline-end: var(--size-16) !important;
802
+ .m-t-4 {
803
+ margin-top: 32px !important;
804
+ margin-top: var(--size-32) !important;
249
805
  }
250
- .m-r-3 {
251
- margin-inline-end: 24px !important;
252
- margin-inline-end: var(--size-24) !important;
806
+ .m-b-4 {
807
+ margin-bottom: 32px !important;
808
+ margin-bottom: var(--size-32) !important;
253
809
  }
254
- .m-r-4 {
255
- margin-inline-end: 32px !important;
256
- margin-inline-end: var(--size-32) !important;
810
+ .m-y-4 {
811
+ margin-top: 32px !important;
812
+ margin-top: var(--size-32) !important;
813
+ margin-bottom: 32px !important;
814
+ margin-bottom: var(--size-32) !important;
257
815
  }
258
- .m-r-5 {
259
- margin-inline-end: 40px !important;
260
- margin-inline-end: var(--size-40) !important;
816
+ .p-t-4 {
817
+ padding-top: 32px !important;
818
+ padding-top: var(--size-32) !important;
261
819
  }
262
- .m-r-auto {
263
- margin-inline-end: auto !important;
820
+ .p-b-4 {
821
+ padding-bottom: 32px !important;
822
+ padding-bottom: var(--size-32) !important;
264
823
  }
265
- .m-t-0 {
266
- margin-top: 0px !important;
824
+ .p-y-4 {
825
+ padding-top: 32px !important;
826
+ padding-top: var(--size-32) !important;
827
+ padding-bottom: 32px !important;
828
+ padding-bottom: var(--size-32) !important;
267
829
  }
268
- .m-t-1 {
269
- margin-top: 8px !important;
270
- margin-top: var(--size-8) !important;
830
+ [dir="rtl"] .m-l-4 {
831
+ margin-right: 32px !important;
832
+ margin-right: var(--size-32) !important;
271
833
  }
272
- .m-t-2 {
273
- margin-top: 16px !important;
274
- margin-top: var(--size-16) !important;
834
+ html:not([dir="rtl"]) .m-l-4 {
835
+ margin-left: 32px !important;
836
+ margin-left: var(--size-32) !important;
275
837
  }
276
- .m-t-3 {
277
- margin-top: 24px !important;
278
- margin-top: var(--size-24) !important;
838
+ [dir="rtl"] .m-r-4 {
839
+ margin-left: 32px !important;
840
+ margin-left: var(--size-32) !important;
279
841
  }
280
- .m-t-4 {
281
- margin-top: 32px !important;
282
- margin-top: var(--size-32) !important;
842
+ html:not([dir="rtl"]) .m-r-4 {
843
+ margin-right: 32px !important;
844
+ margin-right: var(--size-32) !important;
283
845
  }
284
- .m-t-5 {
285
- margin-top: 40px !important;
286
- margin-top: var(--size-40) !important;
846
+ [dir="rtl"] .m-x-4 {
847
+ margin-right: 32px !important;
848
+ margin-right: var(--size-32) !important;
287
849
  }
288
- .m-b-0 {
289
- margin-bottom: 0px !important;
850
+ html:not([dir="rtl"]) .m-x-4 {
851
+ margin-left: 32px !important;
852
+ margin-left: var(--size-32) !important;
290
853
  }
291
- .m-b-1 {
292
- margin-bottom: 8px !important;
293
- margin-bottom: var(--size-8) !important;
854
+ [dir="rtl"] .m-x-4 {
855
+ margin-left: 32px !important;
856
+ margin-left: var(--size-32) !important;
294
857
  }
295
- .m-b-2 {
296
- margin-bottom: 16px !important;
297
- margin-bottom: var(--size-16) !important;
858
+ html:not([dir="rtl"]) .m-x-4 {
859
+ margin-right: 32px !important;
860
+ margin-right: var(--size-32) !important;
298
861
  }
299
- .m-b-3 {
300
- margin-bottom: 24px !important;
301
- margin-bottom: var(--size-24) !important;
862
+ [dir="rtl"] .p-l-4 {
863
+ padding-right: 32px !important;
864
+ padding-right: var(--size-32) !important;
302
865
  }
303
- .m-b-4 {
304
- margin-bottom: 32px !important;
305
- margin-bottom: var(--size-32) !important;
866
+ html:not([dir="rtl"]) .p-l-4 {
867
+ padding-left: 32px !important;
868
+ padding-left: var(--size-32) !important;
306
869
  }
307
- .m-b-5 {
308
- margin-bottom: 40px !important;
309
- margin-bottom: var(--size-40) !important;
870
+ [dir="rtl"] .p-r-4 {
871
+ padding-left: 32px !important;
872
+ padding-left: var(--size-32) !important;
310
873
  }
311
- .p-a-0 {
312
- padding: 0px !important;
874
+ html:not([dir="rtl"]) .p-r-4 {
875
+ padding-right: 32px !important;
876
+ padding-right: var(--size-32) !important;
313
877
  }
314
- .p-a-1 {
315
- padding: 8px !important;
316
- padding: var(--size-8) !important;
878
+ [dir="rtl"] .p-x-4 {
879
+ padding-right: 32px !important;
880
+ padding-right: var(--size-32) !important;
317
881
  }
318
- .p-a-2 {
319
- padding: 16px !important;
320
- padding: var(--size-16) !important;
882
+ html:not([dir="rtl"]) .p-x-4 {
883
+ padding-left: 32px !important;
884
+ padding-left: var(--size-32) !important;
321
885
  }
322
- .p-a-3 {
323
- padding: 24px !important;
324
- padding: var(--size-24) !important;
886
+ [dir="rtl"] .p-x-4 {
887
+ padding-left: 32px !important;
888
+ padding-left: var(--size-32) !important;
325
889
  }
326
- .p-a-4 {
327
- padding: 32px !important;
328
- padding: var(--size-32) !important;
890
+ html:not([dir="rtl"]) .p-x-4 {
891
+ padding-right: 32px !important;
892
+ padding-right: var(--size-32) !important;
329
893
  }
330
- .p-a-5 {
331
- padding: 40px !important;
332
- padding: var(--size-40) !important;
894
+ .m-a-5 {
895
+ margin-top: 40px !important;
896
+ margin-top: var(--size-40) !important;
897
+ margin-bottom: 40px !important;
898
+ margin-bottom: var(--size-40) !important;
333
899
  }
334
- .p-x-0 {
335
- padding-left: 0px !important;
336
- padding-right: 0px !important;
900
+ [dir="rtl"] .m-a-5 {
901
+ margin-left: 40px !important;
902
+ margin-left: var(--size-40) !important;
337
903
  }
338
- .p-x-1 {
339
- padding-left: 8px !important;
340
- padding-left: var(--size-8) !important;
341
- padding-right: 8px !important;
342
- padding-right: var(--size-8) !important;
904
+ html:not([dir="rtl"]) .m-a-5 {
905
+ margin-right: 40px !important;
906
+ margin-right: var(--size-40) !important;
343
907
  }
344
- .p-x-2 {
345
- padding-left: 16px !important;
346
- padding-left: var(--size-16) !important;
347
- padding-right: 16px !important;
348
- padding-right: var(--size-16) !important;
908
+ [dir="rtl"] .m-a-5 {
909
+ margin-right: 40px !important;
910
+ margin-right: var(--size-40) !important;
349
911
  }
350
- .p-x-3 {
351
- padding-left: 24px !important;
352
- padding-left: var(--size-24) !important;
353
- padding-right: 24px !important;
354
- padding-right: var(--size-24) !important;
912
+ html:not([dir="rtl"]) .m-a-5 {
913
+ margin-left: 40px !important;
914
+ margin-left: var(--size-40) !important;
355
915
  }
356
- .p-x-4 {
357
- padding-left: 32px !important;
358
- padding-left: var(--size-32) !important;
359
- padding-right: 32px !important;
360
- padding-right: var(--size-32) !important;
916
+ .p-a-5 {
917
+ padding-top: 40px !important;
918
+ padding-top: var(--size-40) !important;
919
+ padding-bottom: 40px !important;
920
+ padding-bottom: var(--size-40) !important;
361
921
  }
362
- .p-x-5 {
922
+ [dir="rtl"] .p-a-5 {
363
923
  padding-left: 40px !important;
364
924
  padding-left: var(--size-40) !important;
925
+ }
926
+ html:not([dir="rtl"]) .p-a-5 {
365
927
  padding-right: 40px !important;
366
928
  padding-right: var(--size-40) !important;
367
929
  }
368
- .p-y-0 {
369
- padding-top: 0px !important;
370
- padding-bottom: 0px !important;
930
+ [dir="rtl"] .p-a-5 {
931
+ padding-right: 40px !important;
932
+ padding-right: var(--size-40) !important;
371
933
  }
372
- .p-y-1 {
373
- padding-top: 8px !important;
374
- padding-top: var(--size-8) !important;
375
- padding-bottom: 8px !important;
376
- padding-bottom: var(--size-8) !important;
934
+ html:not([dir="rtl"]) .p-a-5 {
935
+ padding-left: 40px !important;
936
+ padding-left: var(--size-40) !important;
377
937
  }
378
- .p-y-2 {
379
- padding-top: 16px !important;
380
- padding-top: var(--size-16) !important;
381
- padding-bottom: 16px !important;
382
- padding-bottom: var(--size-16) !important;
938
+ .m-t-5 {
939
+ margin-top: 40px !important;
940
+ margin-top: var(--size-40) !important;
383
941
  }
384
- .p-y-3 {
385
- padding-top: 24px !important;
386
- padding-top: var(--size-24) !important;
387
- padding-bottom: 24px !important;
388
- padding-bottom: var(--size-24) !important;
942
+ .m-b-5 {
943
+ margin-bottom: 40px !important;
944
+ margin-bottom: var(--size-40) !important;
945
+ }
946
+ .m-y-5 {
947
+ margin-top: 40px !important;
948
+ margin-top: var(--size-40) !important;
949
+ margin-bottom: 40px !important;
950
+ margin-bottom: var(--size-40) !important;
389
951
  }
390
- .p-y-4 {
391
- padding-top: 32px !important;
392
- padding-top: var(--size-32) !important;
393
- padding-bottom: 32px !important;
394
- padding-bottom: var(--size-32) !important;
952
+ .p-t-5 {
953
+ padding-top: 40px !important;
954
+ padding-top: var(--size-40) !important;
955
+ }
956
+ .p-b-5 {
957
+ padding-bottom: 40px !important;
958
+ padding-bottom: var(--size-40) !important;
395
959
  }
396
960
  .p-y-5 {
397
961
  padding-top: 40px !important;
@@ -399,98 +963,130 @@
399
963
  padding-bottom: 40px !important;
400
964
  padding-bottom: var(--size-40) !important;
401
965
  }
402
- .p-l-0 {
403
- padding-inline-start: 0px !important;
966
+ [dir="rtl"] .m-l-5 {
967
+ margin-right: 40px !important;
968
+ margin-right: var(--size-40) !important;
969
+ }
970
+ html:not([dir="rtl"]) .m-l-5 {
971
+ margin-left: 40px !important;
972
+ margin-left: var(--size-40) !important;
973
+ }
974
+ [dir="rtl"] .m-r-5 {
975
+ margin-left: 40px !important;
976
+ margin-left: var(--size-40) !important;
404
977
  }
405
- .p-l-1 {
406
- padding-inline-start: 8px !important;
407
- padding-inline-start: var(--size-8) !important;
978
+ html:not([dir="rtl"]) .m-r-5 {
979
+ margin-right: 40px !important;
980
+ margin-right: var(--size-40) !important;
408
981
  }
409
- .p-l-2 {
410
- padding-inline-start: 16px !important;
411
- padding-inline-start: var(--size-16) !important;
982
+ [dir="rtl"] .m-x-5 {
983
+ margin-right: 40px !important;
984
+ margin-right: var(--size-40) !important;
412
985
  }
413
- .p-l-3 {
414
- padding-inline-start: 24px !important;
415
- padding-inline-start: var(--size-24) !important;
986
+ html:not([dir="rtl"]) .m-x-5 {
987
+ margin-left: 40px !important;
988
+ margin-left: var(--size-40) !important;
416
989
  }
417
- .p-l-4 {
418
- padding-inline-start: 32px !important;
419
- padding-inline-start: var(--size-32) !important;
990
+ [dir="rtl"] .m-x-5 {
991
+ margin-left: 40px !important;
992
+ margin-left: var(--size-40) !important;
420
993
  }
421
- .p-l-5 {
422
- padding-inline-start: 40px !important;
423
- padding-inline-start: var(--size-40) !important;
994
+ html:not([dir="rtl"]) .m-x-5 {
995
+ margin-right: 40px !important;
996
+ margin-right: var(--size-40) !important;
424
997
  }
425
- .p-r-0 {
426
- padding-inline-end: 0px !important;
998
+ [dir="rtl"] .p-l-5 {
999
+ padding-right: 40px !important;
1000
+ padding-right: var(--size-40) !important;
427
1001
  }
428
- .p-r-1 {
429
- padding-inline-end: 8px !important;
430
- padding-inline-end: var(--size-8) !important;
1002
+ html:not([dir="rtl"]) .p-l-5 {
1003
+ padding-left: 40px !important;
1004
+ padding-left: var(--size-40) !important;
431
1005
  }
432
- .p-r-2 {
433
- padding-inline-end: 16px !important;
434
- padding-inline-end: var(--size-16) !important;
1006
+ [dir="rtl"] .p-r-5 {
1007
+ padding-left: 40px !important;
1008
+ padding-left: var(--size-40) !important;
435
1009
  }
436
- .p-r-3 {
437
- padding-inline-end: 24px !important;
438
- padding-inline-end: var(--size-24) !important;
1010
+ html:not([dir="rtl"]) .p-r-5 {
1011
+ padding-right: 40px !important;
1012
+ padding-right: var(--size-40) !important;
439
1013
  }
440
- .p-r-4 {
441
- padding-inline-end: 32px !important;
442
- padding-inline-end: var(--size-32) !important;
1014
+ [dir="rtl"] .p-x-5 {
1015
+ padding-right: 40px !important;
1016
+ padding-right: var(--size-40) !important;
443
1017
  }
444
- .p-r-5 {
445
- padding-inline-end: 40px !important;
446
- padding-inline-end: var(--size-40) !important;
1018
+ html:not([dir="rtl"]) .p-x-5 {
1019
+ padding-left: 40px !important;
1020
+ padding-left: var(--size-40) !important;
447
1021
  }
448
- .p-t-0 {
449
- padding-top: 0px !important;
1022
+ [dir="rtl"] .p-x-5 {
1023
+ padding-left: 40px !important;
1024
+ padding-left: var(--size-40) !important;
450
1025
  }
451
- .p-t-1 {
452
- padding-top: 8px !important;
453
- padding-top: var(--size-8) !important;
1026
+ html:not([dir="rtl"]) .p-x-5 {
1027
+ padding-right: 40px !important;
1028
+ padding-right: var(--size-40) !important;
454
1029
  }
455
- .p-t-2 {
456
- padding-top: 16px !important;
457
- padding-top: var(--size-16) !important;
1030
+ .m-t-4 {
1031
+ margin-top: 32px !important;
1032
+ margin-top: var(--size-32) !important;
458
1033
  }
459
- .p-t-3 {
460
- padding-top: 24px !important;
461
- padding-top: var(--size-24) !important;
1034
+ .m-b-4 {
1035
+ margin-bottom: 32px !important;
1036
+ margin-bottom: var(--size-32) !important;
1037
+ }
1038
+ .m-y-4 {
1039
+ margin-top: 32px !important;
1040
+ margin-top: var(--size-32) !important;
1041
+ margin-bottom: 32px !important;
1042
+ margin-bottom: var(--size-32) !important;
462
1043
  }
463
1044
  .p-t-4 {
464
1045
  padding-top: 32px !important;
465
1046
  padding-top: var(--size-32) !important;
466
1047
  }
467
- .p-t-5 {
468
- padding-top: 40px !important;
469
- padding-top: var(--size-40) !important;
1048
+ .p-b-4 {
1049
+ padding-bottom: 32px !important;
1050
+ padding-bottom: var(--size-32) !important;
470
1051
  }
471
- .p-b-0 {
472
- padding-bottom: 0px !important;
1052
+ .p-y-4 {
1053
+ padding-top: 32px !important;
1054
+ padding-top: var(--size-32) !important;
1055
+ padding-bottom: 32px !important;
1056
+ padding-bottom: var(--size-32) !important;
473
1057
  }
474
- .p-b-1 {
475
- padding-bottom: 8px !important;
476
- padding-bottom: var(--size-8) !important;
1058
+ .m-t-5 {
1059
+ margin-top: 40px !important;
1060
+ margin-top: var(--size-40) !important;
477
1061
  }
478
- .p-b-2 {
479
- padding-bottom: 16px !important;
480
- padding-bottom: var(--size-16) !important;
1062
+ .m-b-5 {
1063
+ margin-bottom: 40px !important;
1064
+ margin-bottom: var(--size-40) !important;
481
1065
  }
482
- .p-b-3 {
483
- padding-bottom: 24px !important;
484
- padding-bottom: var(--size-24) !important;
1066
+ .m-y-5 {
1067
+ margin-top: 40px !important;
1068
+ margin-top: var(--size-40) !important;
1069
+ margin-bottom: 40px !important;
1070
+ margin-bottom: var(--size-40) !important;
485
1071
  }
486
- .p-b-4 {
487
- padding-bottom: 32px !important;
488
- padding-bottom: var(--size-32) !important;
1072
+ .p-t-5 {
1073
+ padding-top: 40px !important;
1074
+ padding-top: var(--size-40) !important;
489
1075
  }
490
1076
  .p-b-5 {
491
1077
  padding-bottom: 40px !important;
492
1078
  padding-bottom: var(--size-40) !important;
493
1079
  }
1080
+ .p-y-5 {
1081
+ padding-top: 40px !important;
1082
+ padding-top: var(--size-40) !important;
1083
+ padding-bottom: 40px !important;
1084
+ padding-bottom: var(--size-40) !important;
1085
+ }
1086
+ .gap-y-1 {
1087
+ row-gap: 8px;
1088
+ row-gap: var(--size-8);
1089
+ }
494
1090
  .m-a-panel {
495
1091
  margin-top: 16px !important;
496
1092
  margin-top: var(--size-16) !important;
@@ -1175,6 +1771,36 @@ html:not([dir="rtl"]) .p-x-panel {
1175
1771
  padding-bottom: var(--size-96) !important;
1176
1772
  }
1177
1773
  }
1774
+ .m-x-auto {
1775
+ margin-right: auto !important;
1776
+ margin-left: auto !important;
1777
+ }
1778
+ [dir="rtl"] .m-x-auto {
1779
+ margin-left: auto !important;
1780
+ margin-right: 0 !important;
1781
+ margin-right: initial !important;
1782
+ }
1783
+ [dir="rtl"] .m-x-auto {
1784
+ margin-right: auto !important;
1785
+ margin-left: 0 !important;
1786
+ margin-left: initial !important;
1787
+ }
1788
+ .m-r-auto {
1789
+ margin-right: auto !important;
1790
+ }
1791
+ [dir="rtl"] .m-r-auto {
1792
+ margin-left: auto !important;
1793
+ margin-right: 0 !important;
1794
+ margin-right: initial !important;
1795
+ }
1796
+ .m-l-auto {
1797
+ margin-left: auto !important;
1798
+ }
1799
+ [dir="rtl"] .m-l-auto {
1800
+ margin-right: auto !important;
1801
+ margin-left: 0 !important;
1802
+ margin-left: initial !important;
1803
+ }
1178
1804
  .section {
1179
1805
  padding-top: 48px;
1180
1806
  padding-top: var(--size-48);
@@ -1201,157 +1827,3 @@ html:not([dir="rtl"]) .p-x-panel {
1201
1827
  border-bottom: 1px solid rgba(134,167,189,0.10196);
1202
1828
  border-bottom: 1px solid var(--color-background-neutral);
1203
1829
  }
1204
- /* TODO: Remove utility imports to prevent duplicates */
1205
- .d-block,
1206
- .show {
1207
- display: block !important;
1208
- }
1209
- .d-inline-block {
1210
- display: inline-block !important;
1211
- }
1212
- .d-inline {
1213
- display: inline;
1214
- }
1215
- .d-flex {
1216
- display: flex;
1217
- }
1218
- .d-inline-flex {
1219
- display: inline-flex;
1220
- }
1221
- .hidden,
1222
- .hide,
1223
- .visible-xs,
1224
- .visible-xs-block,
1225
- .visible-xs-inline-block,
1226
- .visible-xs-inline,
1227
- .visible-sm,
1228
- .visible-sm-block,
1229
- .visible-sm-inline-block,
1230
- .visible-sm-inline,
1231
- .visible-md,
1232
- .visible-md-block,
1233
- .visible-md-inline-block,
1234
- .visible-md-inline,
1235
- .visible-lg,
1236
- .visible-lg-block,
1237
- .visible-lg-inline-block,
1238
- .visible-lg-inline,
1239
- .visible-xl,
1240
- .visible-xl-block,
1241
- .visible-xl-inline-block,
1242
- .visible-xl-inline {
1243
- display: none !important;
1244
- }
1245
- @media (max-width: 575px) {
1246
- .hidden-xs {
1247
- display: none !important;
1248
- }
1249
- .visible-xs,
1250
- .visible-xs-block {
1251
- display: block !important;
1252
- }
1253
- .visible-xs-inline-block {
1254
- display: inline-block !important;
1255
- }
1256
- .visible-xs-inline {
1257
- display: inline !important;
1258
- }
1259
- }
1260
- @media (min-width: 576px) {
1261
- .d-flex--sm {
1262
- display: flex;
1263
- }
1264
- .d-inline-flex--sm {
1265
- display: inline-flex;
1266
- }
1267
- }
1268
- @media (min-width: 576px) and (max-width: 767px) {
1269
- .hidden-sm {
1270
- display: none !important;
1271
- }
1272
- .visible-sm,
1273
- .visible-sm-block {
1274
- display: block !important;
1275
- }
1276
- .visible-sm-inline-block {
1277
- display: inline-block !important;
1278
- }
1279
- .visible-sm-inline {
1280
- display: inline !important;
1281
- }
1282
- }
1283
- @media (min-width: 768px) {
1284
- .d-flex--md {
1285
- display: flex;
1286
- }
1287
- .d-inline-flex--md {
1288
- display: inline-flex;
1289
- }
1290
- }
1291
- @media (min-width: 768px) and (max-width: 991px) {
1292
- .hidden-md {
1293
- display: none !important;
1294
- }
1295
- .visible-md,
1296
- .visible-md-block {
1297
- display: block !important;
1298
- }
1299
- .visible-md-inline-block {
1300
- display: inline-block !important;
1301
- }
1302
- .visible-md-inline {
1303
- display: inline !important;
1304
- }
1305
- }
1306
- @media (min-width: 992px) {
1307
- .d-flex--lg {
1308
- display: flex;
1309
- }
1310
- .d-inline-flex--lg {
1311
- display: inline-flex;
1312
- }
1313
- }
1314
- @media (min-width: 992px) and (max-width: 1199px) {
1315
- .hidden-lg {
1316
- display: none !important;
1317
- }
1318
- .visible-lg,
1319
- .visible-lg-block {
1320
- display: block !important;
1321
- }
1322
- .visible-lg-inline-block {
1323
- display: inline-block !important;
1324
- }
1325
- .visible-lg-inline {
1326
- display: inline !important;
1327
- }
1328
- }
1329
- @media (min-width: 1200px) {
1330
- .d-flex--xl {
1331
- display: flex;
1332
- }
1333
- .d-inline-flex--xl {
1334
- display: inline-flex;
1335
- }
1336
- .hidden-xl {
1337
- display: none !important;
1338
- }
1339
- .visible-xl,
1340
- .visible-xl-block {
1341
- display: block !important;
1342
- }
1343
- .visible-xl-inline-block {
1344
- display: inline-block !important;
1345
- }
1346
- .visible-xl-inline {
1347
- display: inline !important;
1348
- }
1349
- }
1350
- .outline-none {
1351
- outline: none;
1352
- /*
1353
- TODO: Support Windows High Contrast mode
1354
- outline: 2px solid transparent;
1355
- outline-offset: 2px;
1356
- */
1357
- }