@transferwise/neptune-css 0.0.0-experimental-96eba2f → 0.0.0-experimental-5e97558

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 (50) hide show
  1. package/dist/css/border-radius.css +8 -0
  2. package/dist/css/flex.css +417 -253
  3. package/dist/css/navbar-base.css +167 -337
  4. package/dist/css/navbar.css +41 -107
  5. package/dist/css/neptune-addons.css +422 -838
  6. package/dist/css/neptune-core.css +163 -200
  7. package/dist/css/neptune.css +14541 -15118
  8. package/dist/css/utilities.css +1202 -72
  9. package/package.json +1 -1
  10. package/src/less/{mixins → addons}/_center-block.less +2 -4
  11. package/src/less/addons/_spacing-utilities.less +3 -26
  12. package/src/less/border-radius.less +1 -3
  13. package/src/less/core/_scaffolding.less +7 -27
  14. package/src/less/core/_typography-utilities.less +17 -237
  15. package/src/less/flex.less +9 -18
  16. package/src/less/navbar.less +10 -2
  17. package/src/less/neptune-addons.less +4 -1
  18. package/src/less/neptune.bundle.less +3 -1
  19. package/src/less/utilities/align-items.less +107 -0
  20. package/src/less/utilities/align-self.less +107 -0
  21. package/src/less/utilities/border-radius.less +11 -0
  22. package/src/less/utilities/color.less +70 -0
  23. package/src/less/utilities/cursor.less +3 -0
  24. package/src/less/utilities/display.less +178 -0
  25. package/src/less/utilities/flex-direction.less +47 -0
  26. package/src/less/utilities/flex-grow.less +27 -0
  27. package/src/less/utilities/flex-wrap.less +47 -0
  28. package/src/less/utilities/float.less +77 -0
  29. package/src/less/utilities/font-weight.less +11 -0
  30. package/src/less/utilities/gap.less +3 -0
  31. package/src/less/utilities/justify-content.less +107 -0
  32. package/src/less/utilities/margin.less +192 -0
  33. package/src/less/utilities/max-width.less +3 -0
  34. package/src/less/utilities/order.less +87 -0
  35. package/src/less/utilities/outline-style.less +8 -0
  36. package/src/less/utilities/overflow-wrap.less +3 -0
  37. package/src/less/utilities/padding.less +179 -0
  38. package/src/less/utilities/position.less +3 -0
  39. package/src/less/utilities/rotate.less +12 -0
  40. package/src/less/utilities/screen-reader.less +24 -0
  41. package/src/less/utilities/text-align.less +87 -0
  42. package/src/less/utilities/text-decoration-line.less +8 -0
  43. package/src/less/utilities/text-overflow.less +7 -0
  44. package/src/less/utilities/text-transform.less +11 -0
  45. package/src/less/utilities/visibility.less +3 -0
  46. package/src/less/utilities/white-space.less +27 -0
  47. package/src/less/utilities.less +29 -141
  48. package/src/less/addons/_display-utilities.less +0 -159
  49. package/src/less/addons/_utilities.less +0 -147
  50. package/src/less/mixins/_flex.less +0 -105
package/dist/css/neptune-addons.css CHANGED
@@ -111,565 +111,86 @@
111
111
  .bg-accent strong {
112
112
  color: #ffffff;
113
113
  }
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;
114
+ .gap-y-1 {
115
+ row-gap: 8px;
116
+ row-gap: var(--size-8);
249
117
  }
250
118
  .m-a-0 {
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;
119
+ margin: 0px !important;
349
120
  }
350
121
  .m-a-1 {
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;
122
+ margin: 8px !important;
123
+ margin: var(--size-8) !important;
485
124
  }
486
125
  .m-a-2 {
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;
126
+ margin: 16px !important;
127
+ margin: var(--size-16) !important;
621
128
  }
622
129
  .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;
130
+ margin: 24px !important;
131
+ margin: var(--size-24) !important;
627
132
  }
628
- [dir="rtl"] .m-a-3 {
629
- margin-left: 24px !important;
630
- margin-left: var(--size-24) !important;
133
+ .m-a-4 {
134
+ margin: 32px !important;
135
+ margin: var(--size-32) !important;
136
+ }
137
+ .m-a-5 {
138
+ margin: 40px !important;
139
+ margin: var(--size-40) !important;
631
140
  }
632
- html:not([dir="rtl"]) .m-a-3 {
633
- margin-right: 24px !important;
634
- margin-right: var(--size-24) !important;
141
+ .m-x-0 {
142
+ margin-left: 0px !important;
143
+ margin-right: 0px !important;
635
144
  }
636
- [dir="rtl"] .m-a-3 {
637
- margin-right: 24px !important;
638
- margin-right: var(--size-24) !important;
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;
639
150
  }
640
- html:not([dir="rtl"]) .m-a-3 {
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;
156
+ }
157
+ .m-x-3 {
641
158
  margin-left: 24px !important;
642
159
  margin-left: var(--size-24) !important;
160
+ margin-right: 24px !important;
161
+ margin-right: var(--size-24) !important;
643
162
  }
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;
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;
653
168
  }
654
- html:not([dir="rtl"]) .p-a-3 {
655
- padding-right: 24px !important;
656
- padding-right: var(--size-24) !important;
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;
657
174
  }
658
- [dir="rtl"] .p-a-3 {
659
- padding-right: 24px !important;
660
- padding-right: var(--size-24) !important;
175
+ .m-x-auto {
176
+ margin-left: auto !important;
177
+ margin-right: auto !important;
661
178
  }
662
- html:not([dir="rtl"]) .p-a-3 {
663
- padding-left: 24px !important;
664
- padding-left: var(--size-24) !important;
179
+ .m-y-0 {
180
+ margin-top: 0px !important;
181
+ margin-bottom: 0px !important;
665
182
  }
666
- .m-t-3 {
667
- margin-top: 24px !important;
668
- margin-top: var(--size-24) !important;
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;
669
188
  }
670
- .m-b-3 {
671
- margin-bottom: 24px !important;
672
- margin-bottom: var(--size-24) !important;
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;
673
194
  }
674
195
  .m-y-3 {
675
196
  margin-top: 24px !important;
@@ -677,360 +198,299 @@ html:not([dir="rtl"]) .p-a-3 {
677
198
  margin-bottom: 24px !important;
678
199
  margin-bottom: var(--size-24) !important;
679
200
  }
680
- .p-t-3 {
681
- padding-top: 24px !important;
682
- padding-top: var(--size-24) !important;
201
+ .m-y-4 {
202
+ margin-top: 32px !important;
203
+ margin-top: var(--size-32) !important;
204
+ margin-bottom: 32px !important;
205
+ margin-bottom: var(--size-32) !important;
683
206
  }
684
- .p-b-3 {
685
- padding-bottom: 24px !important;
686
- padding-bottom: var(--size-24) !important;
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;
687
212
  }
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;
213
+ .m-l-0 {
214
+ margin-inline-start: 0px !important;
693
215
  }
694
- [dir="rtl"] .m-l-3 {
695
- margin-right: 24px !important;
696
- margin-right: var(--size-24) !important;
216
+ .m-l-1 {
217
+ margin-inline-start: 8px !important;
218
+ margin-inline-start: var(--size-8) !important;
697
219
  }
698
- html:not([dir="rtl"]) .m-l-3 {
699
- margin-left: 24px !important;
700
- margin-left: var(--size-24) !important;
220
+ .m-l-2 {
221
+ margin-inline-start: 16px !important;
222
+ margin-inline-start: var(--size-16) !important;
701
223
  }
702
- [dir="rtl"] .m-r-3 {
703
- margin-left: 24px !important;
704
- margin-left: var(--size-24) !important;
224
+ .m-l-3 {
225
+ margin-inline-start: 24px !important;
226
+ margin-inline-start: var(--size-24) !important;
705
227
  }
706
- html:not([dir="rtl"]) .m-r-3 {
707
- margin-right: 24px !important;
708
- margin-right: var(--size-24) !important;
228
+ .m-l-4 {
229
+ margin-inline-start: 32px !important;
230
+ margin-inline-start: var(--size-32) !important;
709
231
  }
710
- [dir="rtl"] .m-x-3 {
711
- margin-right: 24px !important;
712
- margin-right: var(--size-24) !important;
232
+ .m-l-5 {
233
+ margin-inline-start: 40px !important;
234
+ margin-inline-start: var(--size-40) !important;
713
235
  }
714
- html:not([dir="rtl"]) .m-x-3 {
715
- margin-left: 24px !important;
716
- margin-left: var(--size-24) !important;
236
+ .m-l-auto {
237
+ margin-inline-start: auto !important;
717
238
  }
718
- [dir="rtl"] .m-x-3 {
719
- margin-left: 24px !important;
720
- margin-left: var(--size-24) !important;
239
+ .m-r-0 {
240
+ margin-inline-end: 0px !important;
721
241
  }
722
- html:not([dir="rtl"]) .m-x-3 {
723
- margin-right: 24px !important;
724
- margin-right: var(--size-24) !important;
242
+ .m-r-1 {
243
+ margin-inline-end: 8px !important;
244
+ margin-inline-end: var(--size-8) !important;
725
245
  }
726
- [dir="rtl"] .p-l-3 {
727
- padding-right: 24px !important;
728
- padding-right: var(--size-24) !important;
246
+ .m-r-2 {
247
+ margin-inline-end: 16px !important;
248
+ margin-inline-end: var(--size-16) !important;
729
249
  }
730
- html:not([dir="rtl"]) .p-l-3 {
731
- padding-left: 24px !important;
732
- padding-left: var(--size-24) !important;
250
+ .m-r-3 {
251
+ margin-inline-end: 24px !important;
252
+ margin-inline-end: var(--size-24) !important;
733
253
  }
734
- [dir="rtl"] .p-r-3 {
735
- padding-left: 24px !important;
736
- padding-left: var(--size-24) !important;
254
+ .m-r-4 {
255
+ margin-inline-end: 32px !important;
256
+ margin-inline-end: var(--size-32) !important;
737
257
  }
738
- html:not([dir="rtl"]) .p-r-3 {
739
- padding-right: 24px !important;
740
- padding-right: var(--size-24) !important;
258
+ .m-r-5 {
259
+ margin-inline-end: 40px !important;
260
+ margin-inline-end: var(--size-40) !important;
741
261
  }
742
- [dir="rtl"] .p-x-3 {
743
- padding-right: 24px !important;
744
- padding-right: var(--size-24) !important;
262
+ .m-r-auto {
263
+ margin-inline-end: auto !important;
745
264
  }
746
- html:not([dir="rtl"]) .p-x-3 {
747
- padding-left: 24px !important;
748
- padding-left: var(--size-24) !important;
265
+ .m-t-0 {
266
+ margin-top: 0px !important;
749
267
  }
750
- [dir="rtl"] .p-x-3 {
751
- padding-left: 24px !important;
752
- padding-left: var(--size-24) !important;
268
+ .m-t-1 {
269
+ margin-top: 8px !important;
270
+ margin-top: var(--size-8) !important;
753
271
  }
754
- html:not([dir="rtl"]) .p-x-3 {
755
- padding-right: 24px !important;
756
- padding-right: var(--size-24) !important;
272
+ .m-t-2 {
273
+ margin-top: 16px !important;
274
+ margin-top: var(--size-16) !important;
757
275
  }
758
- .m-a-4 {
276
+ .m-t-3 {
277
+ margin-top: 24px !important;
278
+ margin-top: var(--size-24) !important;
279
+ }
280
+ .m-t-4 {
759
281
  margin-top: 32px !important;
760
282
  margin-top: var(--size-32) !important;
761
- margin-bottom: 32px !important;
762
- margin-bottom: var(--size-32) !important;
763
- }
764
- [dir="rtl"] .m-a-4 {
765
- margin-left: 32px !important;
766
- margin-left: var(--size-32) !important;
767
- }
768
- html:not([dir="rtl"]) .m-a-4 {
769
- margin-right: 32px !important;
770
- margin-right: var(--size-32) !important;
771
283
  }
772
- [dir="rtl"] .m-a-4 {
773
- margin-right: 32px !important;
774
- margin-right: var(--size-32) !important;
284
+ .m-t-5 {
285
+ margin-top: 40px !important;
286
+ margin-top: var(--size-40) !important;
775
287
  }
776
- html:not([dir="rtl"]) .m-a-4 {
777
- margin-left: 32px !important;
778
- margin-left: var(--size-32) !important;
288
+ .m-b-0 {
289
+ margin-bottom: 0px !important;
779
290
  }
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;
291
+ .m-b-1 {
292
+ margin-bottom: 8px !important;
293
+ margin-bottom: var(--size-8) !important;
785
294
  }
786
- [dir="rtl"] .p-a-4 {
787
- padding-left: 32px !important;
788
- padding-left: var(--size-32) !important;
295
+ .m-b-2 {
296
+ margin-bottom: 16px !important;
297
+ margin-bottom: var(--size-16) !important;
789
298
  }
790
- html:not([dir="rtl"]) .p-a-4 {
791
- padding-right: 32px !important;
792
- padding-right: var(--size-32) !important;
299
+ .m-b-3 {
300
+ margin-bottom: 24px !important;
301
+ margin-bottom: var(--size-24) !important;
793
302
  }
794
- [dir="rtl"] .p-a-4 {
795
- padding-right: 32px !important;
796
- padding-right: var(--size-32) !important;
303
+ .m-b-4 {
304
+ margin-bottom: 32px !important;
305
+ margin-bottom: var(--size-32) !important;
797
306
  }
798
- html:not([dir="rtl"]) .p-a-4 {
799
- padding-left: 32px !important;
800
- padding-left: var(--size-32) !important;
307
+ .m-b-5 {
308
+ margin-bottom: 40px !important;
309
+ margin-bottom: var(--size-40) !important;
801
310
  }
802
- [dir="rtl"] .m-l-4 {
803
- margin-right: 32px !important;
804
- margin-right: var(--size-32) !important;
311
+ .p-a-0 {
312
+ padding: 0px !important;
805
313
  }
806
- html:not([dir="rtl"]) .m-l-4 {
807
- margin-left: 32px !important;
808
- margin-left: var(--size-32) !important;
314
+ .p-a-1 {
315
+ padding: 8px !important;
316
+ padding: var(--size-8) !important;
809
317
  }
810
- [dir="rtl"] .m-r-4 {
811
- margin-left: 32px !important;
812
- margin-left: var(--size-32) !important;
318
+ .p-a-2 {
319
+ padding: 16px !important;
320
+ padding: var(--size-16) !important;
813
321
  }
814
- html:not([dir="rtl"]) .m-r-4 {
815
- margin-right: 32px !important;
816
- margin-right: var(--size-32) !important;
322
+ .p-a-3 {
323
+ padding: 24px !important;
324
+ padding: var(--size-24) !important;
817
325
  }
818
- [dir="rtl"] .m-x-4 {
819
- margin-right: 32px !important;
820
- margin-right: var(--size-32) !important;
326
+ .p-a-4 {
327
+ padding: 32px !important;
328
+ padding: var(--size-32) !important;
821
329
  }
822
- html:not([dir="rtl"]) .m-x-4 {
823
- margin-left: 32px !important;
824
- margin-left: var(--size-32) !important;
330
+ .p-a-5 {
331
+ padding: 40px !important;
332
+ padding: var(--size-40) !important;
825
333
  }
826
- [dir="rtl"] .m-x-4 {
827
- margin-left: 32px !important;
828
- margin-left: var(--size-32) !important;
334
+ .p-x-0 {
335
+ padding-left: 0px !important;
336
+ padding-right: 0px !important;
829
337
  }
830
- html:not([dir="rtl"]) .m-x-4 {
831
- margin-right: 32px !important;
832
- margin-right: var(--size-32) !important;
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;
833
343
  }
834
- [dir="rtl"] .p-l-4 {
835
- padding-right: 32px !important;
836
- padding-right: var(--size-32) !important;
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;
837
349
  }
838
- html:not([dir="rtl"]) .p-l-4 {
839
- padding-left: 32px !important;
840
- padding-left: var(--size-32) !important;
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;
841
355
  }
842
- [dir="rtl"] .p-r-4 {
356
+ .p-x-4 {
843
357
  padding-left: 32px !important;
844
358
  padding-left: var(--size-32) !important;
845
- }
846
- html:not([dir="rtl"]) .p-r-4 {
847
359
  padding-right: 32px !important;
848
360
  padding-right: var(--size-32) !important;
849
361
  }
850
- [dir="rtl"] .p-x-4 {
851
- padding-right: 32px !important;
852
- padding-right: var(--size-32) !important;
853
- }
854
- html:not([dir="rtl"]) .p-x-4 {
855
- padding-left: 32px !important;
856
- padding-left: var(--size-32) !important;
857
- }
858
- [dir="rtl"] .p-x-4 {
859
- padding-left: 32px !important;
860
- padding-left: var(--size-32) !important;
861
- }
862
- html:not([dir="rtl"]) .p-x-4 {
863
- padding-right: 32px !important;
864
- padding-right: var(--size-32) !important;
362
+ .p-x-5 {
363
+ padding-left: 40px !important;
364
+ padding-left: var(--size-40) !important;
365
+ padding-right: 40px !important;
366
+ padding-right: var(--size-40) !important;
865
367
  }
866
- .m-a-5 {
867
- margin-top: 40px !important;
868
- margin-top: var(--size-40) !important;
869
- margin-bottom: 40px !important;
870
- margin-bottom: var(--size-40) !important;
368
+ .p-y-0 {
369
+ padding-top: 0px !important;
370
+ padding-bottom: 0px !important;
871
371
  }
872
- [dir="rtl"] .m-a-5 {
873
- margin-left: 40px !important;
874
- margin-left: var(--size-40) !important;
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;
875
377
  }
876
- html:not([dir="rtl"]) .m-a-5 {
877
- margin-right: 40px !important;
878
- margin-right: var(--size-40) !important;
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;
879
383
  }
880
- [dir="rtl"] .m-a-5 {
881
- margin-right: 40px !important;
882
- margin-right: var(--size-40) !important;
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;
883
389
  }
884
- html:not([dir="rtl"]) .m-a-5 {
885
- margin-left: 40px !important;
886
- margin-left: var(--size-40) !important;
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;
887
395
  }
888
- .p-a-5 {
396
+ .p-y-5 {
889
397
  padding-top: 40px !important;
890
398
  padding-top: var(--size-40) !important;
891
399
  padding-bottom: 40px !important;
892
400
  padding-bottom: var(--size-40) !important;
893
401
  }
894
- [dir="rtl"] .p-a-5 {
895
- padding-left: 40px !important;
896
- padding-left: var(--size-40) !important;
897
- }
898
- html:not([dir="rtl"]) .p-a-5 {
899
- padding-right: 40px !important;
900
- padding-right: var(--size-40) !important;
901
- }
902
- [dir="rtl"] .p-a-5 {
903
- padding-right: 40px !important;
904
- padding-right: var(--size-40) !important;
905
- }
906
- html:not([dir="rtl"]) .p-a-5 {
907
- padding-left: 40px !important;
908
- padding-left: var(--size-40) !important;
909
- }
910
- [dir="rtl"] .m-l-5 {
911
- margin-right: 40px !important;
912
- margin-right: var(--size-40) !important;
913
- }
914
- html:not([dir="rtl"]) .m-l-5 {
915
- margin-left: 40px !important;
916
- margin-left: var(--size-40) !important;
917
- }
918
- [dir="rtl"] .m-r-5 {
919
- margin-left: 40px !important;
920
- margin-left: var(--size-40) !important;
921
- }
922
- html:not([dir="rtl"]) .m-r-5 {
923
- margin-right: 40px !important;
924
- margin-right: var(--size-40) !important;
402
+ .p-l-0 {
403
+ padding-inline-start: 0px !important;
925
404
  }
926
- [dir="rtl"] .m-x-5 {
927
- margin-right: 40px !important;
928
- margin-right: var(--size-40) !important;
405
+ .p-l-1 {
406
+ padding-inline-start: 8px !important;
407
+ padding-inline-start: var(--size-8) !important;
929
408
  }
930
- html:not([dir="rtl"]) .m-x-5 {
931
- margin-left: 40px !important;
932
- margin-left: var(--size-40) !important;
409
+ .p-l-2 {
410
+ padding-inline-start: 16px !important;
411
+ padding-inline-start: var(--size-16) !important;
933
412
  }
934
- [dir="rtl"] .m-x-5 {
935
- margin-left: 40px !important;
936
- margin-left: var(--size-40) !important;
413
+ .p-l-3 {
414
+ padding-inline-start: 24px !important;
415
+ padding-inline-start: var(--size-24) !important;
937
416
  }
938
- html:not([dir="rtl"]) .m-x-5 {
939
- margin-right: 40px !important;
940
- margin-right: var(--size-40) !important;
417
+ .p-l-4 {
418
+ padding-inline-start: 32px !important;
419
+ padding-inline-start: var(--size-32) !important;
941
420
  }
942
- [dir="rtl"] .p-l-5 {
943
- padding-right: 40px !important;
944
- padding-right: var(--size-40) !important;
421
+ .p-l-5 {
422
+ padding-inline-start: 40px !important;
423
+ padding-inline-start: var(--size-40) !important;
945
424
  }
946
- html:not([dir="rtl"]) .p-l-5 {
947
- padding-left: 40px !important;
948
- padding-left: var(--size-40) !important;
425
+ .p-r-0 {
426
+ padding-inline-end: 0px !important;
949
427
  }
950
- [dir="rtl"] .p-r-5 {
951
- padding-left: 40px !important;
952
- padding-left: var(--size-40) !important;
428
+ .p-r-1 {
429
+ padding-inline-end: 8px !important;
430
+ padding-inline-end: var(--size-8) !important;
953
431
  }
954
- html:not([dir="rtl"]) .p-r-5 {
955
- padding-right: 40px !important;
956
- padding-right: var(--size-40) !important;
432
+ .p-r-2 {
433
+ padding-inline-end: 16px !important;
434
+ padding-inline-end: var(--size-16) !important;
957
435
  }
958
- [dir="rtl"] .p-x-5 {
959
- padding-right: 40px !important;
960
- padding-right: var(--size-40) !important;
436
+ .p-r-3 {
437
+ padding-inline-end: 24px !important;
438
+ padding-inline-end: var(--size-24) !important;
961
439
  }
962
- html:not([dir="rtl"]) .p-x-5 {
963
- padding-left: 40px !important;
964
- padding-left: var(--size-40) !important;
440
+ .p-r-4 {
441
+ padding-inline-end: 32px !important;
442
+ padding-inline-end: var(--size-32) !important;
965
443
  }
966
- [dir="rtl"] .p-x-5 {
967
- padding-left: 40px !important;
968
- padding-left: var(--size-40) !important;
444
+ .p-r-5 {
445
+ padding-inline-end: 40px !important;
446
+ padding-inline-end: var(--size-40) !important;
969
447
  }
970
- html:not([dir="rtl"]) .p-x-5 {
971
- padding-right: 40px !important;
972
- padding-right: var(--size-40) !important;
448
+ .p-t-0 {
449
+ padding-top: 0px !important;
973
450
  }
974
- .m-t-4 {
975
- margin-top: 32px !important;
976
- margin-top: var(--size-32) !important;
451
+ .p-t-1 {
452
+ padding-top: 8px !important;
453
+ padding-top: var(--size-8) !important;
977
454
  }
978
- .m-b-4 {
979
- margin-bottom: 32px !important;
980
- margin-bottom: var(--size-32) !important;
455
+ .p-t-2 {
456
+ padding-top: 16px !important;
457
+ padding-top: var(--size-16) !important;
981
458
  }
982
- .m-y-4 {
983
- margin-top: 32px !important;
984
- margin-top: var(--size-32) !important;
985
- margin-bottom: 32px !important;
986
- margin-bottom: var(--size-32) !important;
459
+ .p-t-3 {
460
+ padding-top: 24px !important;
461
+ padding-top: var(--size-24) !important;
987
462
  }
988
463
  .p-t-4 {
989
464
  padding-top: 32px !important;
990
465
  padding-top: var(--size-32) !important;
991
466
  }
992
- .p-b-4 {
993
- padding-bottom: 32px !important;
994
- padding-bottom: var(--size-32) !important;
467
+ .p-t-5 {
468
+ padding-top: 40px !important;
469
+ padding-top: var(--size-40) !important;
995
470
  }
996
- .p-y-4 {
997
- padding-top: 32px !important;
998
- padding-top: var(--size-32) !important;
999
- padding-bottom: 32px !important;
1000
- padding-bottom: var(--size-32) !important;
471
+ .p-b-0 {
472
+ padding-bottom: 0px !important;
1001
473
  }
1002
- .m-t-5 {
1003
- margin-top: 40px !important;
1004
- margin-top: var(--size-40) !important;
474
+ .p-b-1 {
475
+ padding-bottom: 8px !important;
476
+ padding-bottom: var(--size-8) !important;
1005
477
  }
1006
- .m-b-5 {
1007
- margin-bottom: 40px !important;
1008
- margin-bottom: var(--size-40) !important;
478
+ .p-b-2 {
479
+ padding-bottom: 16px !important;
480
+ padding-bottom: var(--size-16) !important;
1009
481
  }
1010
- .m-y-5 {
1011
- margin-top: 40px !important;
1012
- margin-top: var(--size-40) !important;
1013
- margin-bottom: 40px !important;
1014
- margin-bottom: var(--size-40) !important;
482
+ .p-b-3 {
483
+ padding-bottom: 24px !important;
484
+ padding-bottom: var(--size-24) !important;
1015
485
  }
1016
- .p-t-5 {
1017
- padding-top: 40px !important;
1018
- padding-top: var(--size-40) !important;
486
+ .p-b-4 {
487
+ padding-bottom: 32px !important;
488
+ padding-bottom: var(--size-32) !important;
1019
489
  }
1020
490
  .p-b-5 {
1021
491
  padding-bottom: 40px !important;
1022
492
  padding-bottom: var(--size-40) !important;
1023
493
  }
1024
- .p-y-5 {
1025
- padding-top: 40px !important;
1026
- padding-top: var(--size-40) !important;
1027
- padding-bottom: 40px !important;
1028
- padding-bottom: var(--size-40) !important;
1029
- }
1030
- .gap-y-1 {
1031
- row-gap: 8px;
1032
- row-gap: var(--size-8);
1033
- }
1034
494
  .m-a-panel {
1035
495
  margin-top: 16px !important;
1036
496
  margin-top: var(--size-16) !important;
@@ -1715,36 +1175,6 @@ html:not([dir="rtl"]) .p-x-panel {
1715
1175
  padding-bottom: var(--size-96) !important;
1716
1176
  }
1717
1177
  }
1718
- .m-x-auto {
1719
- margin-right: auto !important;
1720
- margin-left: auto !important;
1721
- }
1722
- [dir="rtl"] .m-x-auto {
1723
- margin-left: auto !important;
1724
- margin-right: 0 !important;
1725
- margin-right: initial !important;
1726
- }
1727
- [dir="rtl"] .m-x-auto {
1728
- margin-right: auto !important;
1729
- margin-left: 0 !important;
1730
- margin-left: initial !important;
1731
- }
1732
- .m-r-auto {
1733
- margin-right: auto !important;
1734
- }
1735
- [dir="rtl"] .m-r-auto {
1736
- margin-left: auto !important;
1737
- margin-right: 0 !important;
1738
- margin-right: initial !important;
1739
- }
1740
- .m-l-auto {
1741
- margin-left: auto !important;
1742
- }
1743
- [dir="rtl"] .m-l-auto {
1744
- margin-right: auto !important;
1745
- margin-left: 0 !important;
1746
- margin-left: initial !important;
1747
- }
1748
1178
  .section {
1749
1179
  padding-top: 48px;
1750
1180
  padding-top: var(--size-48);
@@ -1771,3 +1201,157 @@ html:not([dir="rtl"]) .p-x-panel {
1771
1201
  border-bottom: 1px solid rgba(134,167,189,0.10196);
1772
1202
  border-bottom: 1px solid var(--color-background-neutral);
1773
1203
  }
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
+ }