vrembem 3.0.18 → 3.0.19

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.
@@ -14,14 +14,13 @@ body {
14
14
  html {
15
15
  box-sizing: border-box;
16
16
  font-size: 16px;
17
- line-height: 1.625;
17
+ line-height: 1.5;
18
18
  -moz-osx-font-smoothing: grayscale;
19
19
  -webkit-text-size-adjust: 100%;
20
20
  }
21
21
 
22
22
  body {
23
- background: var(--vb-background, var(--vb-neutral-100, hsl(214, 20%, 100%)));
24
- color: var(--vb-foreground, var(--vb-neutral-20, hsl(214, 20%, 20%)));
23
+ color: #212121;
25
24
  font-family: blinkmacsystemfont, -apple-system, system-ui, "Segoe UI", "Roboto", "Helvetica Neue", arial, sans-serif;
26
25
  }
27
26
 
@@ -72,7 +71,7 @@ table {
72
71
 
73
72
  caption {
74
73
  caption-side: bottom;
75
- color: var(--vb-foreground-lighter, var(--vb-neutral-60, hsl(214, 20%, 60%)));
74
+ color: #9e9e9e;
76
75
  text-align: left;
77
76
  }
78
77
 
@@ -158,7 +157,7 @@ input::-moz-placeholder {
158
157
  .blockquote {
159
158
  position: relative;
160
159
  padding: 1.5em;
161
- border: 1px solid var(--vb-border-color, rgba(0, 0, 0, 0.1));
160
+ border: 1px solid rgba(0, 0, 0, 0.05);
162
161
  color: inherit;
163
162
  }
164
163
  .blockquote > * + * {
@@ -171,13 +170,13 @@ input::-moz-placeholder {
171
170
  bottom: -1px;
172
171
  left: -1px;
173
172
  width: 4px;
174
- background-color: var(--vb-primary-50, hsl(152, 60%, 50%));
173
+ background-color: #00bcd4;
175
174
  }
176
175
 
177
176
  .code {
178
- color: var(--vb-secondary-50, hsl(214, 50%, 50%));
177
+ color: #e91e63;
179
178
  font-family: sfmono-regular, menlo, monaco, consolas, "Liberation Mono", "Courier New", monospace;
180
- font-size: 16px;
179
+ font-size: 0.9em;
181
180
  word-break: break-word;
182
181
  }
183
182
 
@@ -241,20 +240,73 @@ input::-moz-placeholder {
241
240
  }
242
241
 
243
242
  .link {
244
- color: var(--vb-primary-50, hsl(152, 60%, 50%));
245
- text-decoration: underline;
246
- text-decoration-thickness: 1px;
247
- text-underline-offset: 2px;
243
+ border-bottom: 1px solid rgba(0, 0, 0, 0.1);
244
+ color: #00bcd4;
245
+ text-decoration: none;
248
246
  }
249
247
  .link:hover {
250
- color: var(--vb-primary-40, hsl(152, 60%, 40%));
251
- text-decoration: none;
248
+ border-bottom: 1px solid currentcolor;
249
+ color: #0097a7;
252
250
  }
253
251
  .link:focus {
254
252
  outline: currentcolor dotted 1px;
255
253
  outline-offset: 0.125rem;
256
- color: var(--vb-primary-40, hsl(152, 60%, 40%));
257
- text-decoration: none;
254
+ border-bottom: 1px solid currentcolor;
255
+ color: #0097a7;
256
+ }
257
+
258
+ .link_subtle {
259
+ border-color: rgba(0, 0, 0, 0.1);
260
+ color: #9e9e9e;
261
+ }
262
+ .link_subtle:hover, .link_subtle:focus {
263
+ border-color: currentcolor;
264
+ color: #0097a7;
265
+ }
266
+
267
+ .link_invert {
268
+ border-color: rgba(255, 255, 255, 0.5);
269
+ color: #fff;
270
+ }
271
+ .link_invert:hover, .link_invert:focus {
272
+ border-color: currentcolor;
273
+ color: #fff;
274
+ }
275
+
276
+ .link_invert-subtle {
277
+ border-color: rgba(255, 255, 255, 0.5);
278
+ color: rgba(255, 255, 255, 0.6);
279
+ }
280
+ .link_invert-subtle:hover, .link_invert-subtle:focus {
281
+ border-color: currentcolor;
282
+ color: #fff;
283
+ }
284
+
285
+ .type .link_subtle {
286
+ border-color: rgba(0, 0, 0, 0.1);
287
+ color: #9e9e9e;
288
+ }
289
+ .type .link_subtle:hover, .type .link_subtle:focus {
290
+ border-color: currentcolor;
291
+ color: #0097a7;
292
+ }
293
+
294
+ .type .link_invert {
295
+ border-color: rgba(255, 255, 255, 0.5);
296
+ color: #fff;
297
+ }
298
+ .type .link_invert:hover, .type .link_invert:focus {
299
+ border-color: currentcolor;
300
+ color: #fff;
301
+ }
302
+
303
+ .type .link_invert-subtle {
304
+ border-color: rgba(255, 255, 255, 0.5);
305
+ color: rgba(255, 255, 255, 0.6);
306
+ }
307
+ .type .link_invert-subtle:hover, .type .link_invert-subtle:focus {
308
+ border-color: currentcolor;
309
+ color: #fff;
258
310
  }
259
311
 
260
312
  .list {
@@ -269,16 +321,12 @@ input::-moz-placeholder {
269
321
  margin-top: 0.5em;
270
322
  }
271
323
 
272
- .list-style-none {
273
- list-style: none !important;
274
- }
275
-
276
324
  .pre {
277
325
  padding: 1em;
278
326
  overflow: auto;
279
327
  border-radius: 0.25rem;
280
- background: var(--vb-background-dark, var(--vb-neutral-98, hsl(214, 20%, 98%)));
281
- color: var(--vb-foreground, var(--vb-neutral-20, hsl(214, 20%, 20%)));
328
+ background: #f5f5f5;
329
+ color: #212121;
282
330
  font-family: sfmono-regular, menlo, monaco, consolas, "Liberation Mono", "Courier New", monospace;
283
331
  }
284
332
  .pre code {
@@ -286,7 +334,7 @@ input::-moz-placeholder {
286
334
  border: none;
287
335
  background: none;
288
336
  color: inherit;
289
- font-size: 16px;
337
+ font-size: 1em;
290
338
  }
291
339
 
292
340
  .scroll-box {
@@ -300,21 +348,23 @@ input::-moz-placeholder {
300
348
  display: block;
301
349
  height: 0;
302
350
  border: none;
303
- border-top: 1px solid var(--vb-border-color, rgba(0, 0, 0, 0.1));
351
+ border-top: 1px solid rgba(0, 0, 0, 0.1);
304
352
  }
305
353
 
306
- .type {
307
- color: var(--vb-foreground-light, var(--vb-neutral-40, hsl(214, 20%, 40%)));
308
- font-size: 1.125rem;
309
- line-height: 1.7778;
354
+ .sep-invert {
355
+ display: block;
356
+ height: 0;
357
+ border: none;
358
+ border-top: 1px solid rgba(255, 255, 255, 0.1);
310
359
  }
360
+
311
361
  .type h1,
312
362
  .type h2,
313
363
  .type h3,
314
364
  .type h4,
315
365
  .type h5,
316
366
  .type h6 {
317
- color: var(--vb-foreground, var(--vb-neutral-20, hsl(214, 20%, 20%)));
367
+ color: inherit;
318
368
  font-family: inherit;
319
369
  font-weight: 600;
320
370
  line-height: 1.375;
@@ -341,35 +391,34 @@ input::-moz-placeholder {
341
391
  }
342
392
  .type > a,
343
393
  .type > :not(div) a {
344
- color: var(--vb-primary-50, hsl(152, 60%, 50%));
345
- text-decoration: underline;
346
- text-decoration-thickness: 1px;
347
- text-underline-offset: 2px;
394
+ border-bottom: 1px solid rgba(0, 0, 0, 0.1);
395
+ color: #00bcd4;
396
+ text-decoration: none;
348
397
  }
349
398
  .type > a:hover,
350
399
  .type > :not(div) a:hover {
351
- color: var(--vb-primary-40, hsl(152, 60%, 40%));
352
- text-decoration: none;
400
+ border-bottom: 1px solid currentcolor;
401
+ color: #0097a7;
353
402
  }
354
403
  .type > a:focus,
355
404
  .type > :not(div) a:focus {
356
405
  outline: currentcolor dotted 1px;
357
406
  outline-offset: 0.125rem;
358
- color: var(--vb-primary-40, hsl(152, 60%, 40%));
359
- text-decoration: none;
407
+ border-bottom: 1px solid currentcolor;
408
+ color: #0097a7;
360
409
  }
361
410
  .type > code,
362
411
  .type > :not(div) code {
363
- color: var(--vb-secondary-50, hsl(214, 50%, 50%));
412
+ color: #e91e63;
364
413
  font-family: sfmono-regular, menlo, monaco, consolas, "Liberation Mono", "Courier New", monospace;
365
- font-size: 16px;
414
+ font-size: 0.9em;
366
415
  word-break: break-word;
367
416
  }
368
417
  .type > hr {
369
418
  display: block;
370
419
  height: 0;
371
420
  border: none;
372
- border-top: 1px solid var(--vb-border-color, rgba(0, 0, 0, 0.1));
421
+ border-top: 1px solid rgba(0, 0, 0, 0.1);
373
422
  }
374
423
  .type > ul,
375
424
  .type > ol {
@@ -390,7 +439,7 @@ input::-moz-placeholder {
390
439
  .type > blockquote {
391
440
  position: relative;
392
441
  padding: 1.5em;
393
- border: 1px solid var(--vb-border-color, rgba(0, 0, 0, 0.1));
442
+ border: 1px solid rgba(0, 0, 0, 0.05);
394
443
  color: inherit;
395
444
  }
396
445
  .type > blockquote > * + * {
@@ -403,14 +452,14 @@ input::-moz-placeholder {
403
452
  bottom: -1px;
404
453
  left: -1px;
405
454
  width: 4px;
406
- background-color: var(--vb-primary-50, hsl(152, 60%, 50%));
455
+ background-color: #00bcd4;
407
456
  }
408
457
  .type > pre {
409
458
  padding: 1em;
410
459
  overflow: auto;
411
460
  border-radius: 0.25rem;
412
- background: var(--vb-background-dark, var(--vb-neutral-98, hsl(214, 20%, 98%)));
413
- color: var(--vb-foreground, var(--vb-neutral-20, hsl(214, 20%, 20%)));
461
+ background: #f5f5f5;
462
+ color: #212121;
414
463
  font-family: sfmono-regular, menlo, monaco, consolas, "Liberation Mono", "Courier New", monospace;
415
464
  }
416
465
  .type > pre code {
@@ -418,103 +467,152 @@ input::-moz-placeholder {
418
467
  border: none;
419
468
  background: none;
420
469
  color: inherit;
421
- font-size: 16px;
470
+ font-size: 1em;
422
471
  }
423
472
 
424
- :root {
425
- --vb-button-size: 2.5rem;
426
- --vb-button-padding: calc(0.5em - 1px) 1em;
427
- --vb-button-gap: 0.5rem;
428
- --vb-button-border-width: 1px;
429
- --vb-button-border-radius: 0.25rem;
430
- --vb-button-font-size: 1em;
431
- --vb-button-font-weight: inherit;
432
- --vb-button-line-height: 1.625;
433
- --vb-button-transition-property: background, color, border-color, box-shadow;
434
- --vb-button-transition-duration: 0.15s;
435
- --vb-button-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
436
- --vb-button-background: transparent;
437
- --vb-button-background-hover: transparent;
438
- --vb-button-background-active: transparent;
439
- --vb-button-foreground: var(--vb-foreground, var(--vb-neutral-20, hsl(214, 20%, 20%)));
440
- --vb-button-foreground-hover: ;
441
- --vb-button-foreground-active: ;
442
- --vb-button-border-color: var(--vb-border-color-dark, rgba(0, 0, 0, 0.2));
443
- --vb-button-border-color-hover: var(--vb-border-color-darker, rgba(0, 0, 0, 0.3));
444
- --vb-button-border-color-active: ;
445
- --vb-button-box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
446
- --vb-button-box-shadow-focus: 0 0 0 0.2rem rgba(0, 0, 0, 0.15);
447
- --vb-button-loading-size: 1em;
448
- --vb-button-loading-border: 2px solid;
449
- --vb-button-loading-animation-duration: 0.6s;
450
- --vb-button-loading-animation-timing-function: linear;
451
- --vb-button-disabled-opacity: 0.6;
473
+ .type_invert {
474
+ color: #fff;
475
+ }
476
+ .type_invert > hr {
477
+ display: block;
478
+ height: 0;
479
+ border: none;
480
+ border-top: 1px solid rgba(255, 255, 255, 0.1);
481
+ }
482
+ .type_invert > blockquote {
483
+ border-color: rgba(255, 255, 255, 0.1);
484
+ }
485
+ .type_invert > a,
486
+ .type_invert > :not(div) a {
487
+ border-color: rgba(255, 255, 255, 0.5);
488
+ color: #fff;
489
+ }
490
+ .type_invert > a:hover, .type_invert > a:focus,
491
+ .type_invert > :not(div) a:hover,
492
+ .type_invert > :not(div) a:focus {
493
+ border-color: currentcolor;
494
+ color: #fff;
495
+ }
496
+ .type_invert > code,
497
+ .type_invert > :not(div) code {
498
+ color: #f06292;
499
+ }
500
+ .type_invert > pre {
501
+ color: #212121;
502
+ }
503
+ .type_invert > pre code {
504
+ color: inherit;
505
+ }
506
+
507
+ .breadcrumb {
508
+ display: inline-flex;
509
+ flex-wrap: wrap;
510
+ align-items: center;
511
+ color: #9e9e9e;
512
+ list-style: none;
513
+ }
514
+
515
+ .breadcrumb__item {
516
+ display: flex;
517
+ align-items: center;
518
+ margin: 0;
519
+ }
520
+ .breadcrumb__item > * + * {
521
+ margin-left: 0.5em;
522
+ }
523
+ .breadcrumb__item::after {
524
+ content: "/";
525
+ padding: 0 0.5em;
526
+ color: rgba(0, 0, 0, 0.2);
527
+ }
528
+ .breadcrumb__item:last-child::after {
529
+ content: none;
530
+ }
531
+
532
+ .breadcrumb__link {
533
+ border-bottom: 1px solid rgba(0, 0, 0, 0.1);
534
+ color: #00bcd4;
535
+ }
536
+ .breadcrumb__link:focus, .breadcrumb__link:hover {
537
+ border-bottom: 1px solid #0097a7;
538
+ color: #0097a7;
539
+ }
540
+
541
+ .breadcrumb_invert {
542
+ color: rgba(255, 255, 255, 0.6);
543
+ }
544
+ .breadcrumb_invert .breadcrumb__item::after {
545
+ color: rgba(255, 255, 255, 0.2);
546
+ }
547
+ .breadcrumb_invert .breadcrumb__link {
548
+ border-bottom: 1px solid rgba(255, 255, 255, 0.1);
549
+ color: #fff;
550
+ }
551
+ .breadcrumb_invert .breadcrumb__link:focus, .breadcrumb_invert .breadcrumb__link:hover {
552
+ border-bottom: 1px solid #fff;
553
+ color: #fff;
452
554
  }
453
555
 
454
556
  .button {
455
557
  position: relative;
456
558
  display: inline-flex;
457
- gap: var(--vb-button-gap);
458
559
  align-items: center;
459
560
  justify-content: center;
460
- min-width: var(--vb-button-size);
461
- height: var(--vb-button-size);
462
- padding: var(--vb-button-padding);
463
- transition-property: var(--vb-button-transition-property);
464
- transition-duration: var(--vb-button-transition-duration);
465
- transition-timing-function: var(--vb-button-transition-timing-function);
561
+ min-width: 2.5rem;
562
+ height: 2.5rem;
563
+ padding: calc(0.5em - 1px) 1em;
564
+ transition-property: box-shadow, outline, outline-offset;
565
+ transition-duration: 0.15s;
566
+ transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
466
567
  outline: none;
467
- border: var(--vb-button-border-width) solid var(--vb-button-border-color);
468
- border-radius: var(--vb-button-border-radius);
469
- background: var(--vb-button-background);
568
+ border: 1px solid rgba(0, 0, 0, 0.2);
569
+ border-radius: 0.25rem;
570
+ background: transparent;
470
571
  background-clip: border-box;
471
- box-shadow: var(--vb-button-box-shadow);
472
- color: var(--vb-button-foreground);
572
+ box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
573
+ color: #212121;
473
574
  font-family: inherit;
474
- font-size: var(--vb-button-font-size);
475
- font-weight: var(--vb-button-font-weight);
476
- line-height: var(--vb-button-font-height);
575
+ font-size: 1em;
576
+ font-weight: inherit;
577
+ line-height: 1.5;
477
578
  text-decoration: none;
478
579
  white-space: nowrap;
479
580
  cursor: pointer;
480
581
  }
582
+ .button > * + * {
583
+ margin-left: 0.5rem;
584
+ }
481
585
  .button:disabled:not(.is-loading) {
482
- opacity: var(--vb-button-disabled-opacity);
586
+ opacity: 0.6;
483
587
  pointer-events: none;
484
588
  }
485
589
  .button:hover {
486
- border-color: var(--vb-button-border-color-hover);
487
- background-color: var(--vb-button-background-hover);
488
- box-shadow: var(--vb-button-box-shadow-hover);
489
- color: var(--vb-button-foreground-hover);
590
+ border-color: rgba(0, 0, 0, 0.5);
591
+ background-color: transparent;
490
592
  }
491
- .button:focus-visible {
492
- border-color: var(--vb-button-border-color-hover);
493
- background-color: var(--vb-button-background-hover);
494
- box-shadow: var(--vb-button-box-shadow-focus);
495
- color: var(--vb-button-foreground-hover);
593
+ .button:focus {
594
+ border-color: rgba(0, 0, 0, 0.5);
595
+ background-color: transparent;
596
+ box-shadow: 0 0 0 0.2rem rgba(0, 0, 0, 0.15);
496
597
  }
497
598
  .button:active {
498
- border-color: var(--vb-button-border-color-active);
499
- background-color: var(--vb-button-background-active);
500
- box-shadow: var(--vb-button-box-shadow-active);
501
- color: var(--vb-button-foreground-active);
599
+ background-color: rgba(0, 0, 0, 0.05);
502
600
  }
503
601
  .button.is-loading {
504
602
  color: transparent !important;
505
603
  pointer-events: none;
506
604
  }
507
605
  .button.is-loading::after {
508
- width: var(--vb-button-loading-size);
509
- height: var(--vb-button-loading-size);
606
+ width: 1em;
607
+ height: 1em;
510
608
  content: "";
511
609
  position: absolute;
512
- top: calc(50% - var(--vb-button-loading-size) * 0.5);
513
- left: calc(50% - var(--vb-button-loading-size) * 0.5);
514
- animation: spin var(--vb-button-loading-animation-duration) infinite var(--vb-button-loading-animation-timing-function);
515
- border: var(--vb-button-loading-border);
610
+ top: calc(50% - 1em * 0.5);
611
+ left: calc(50% - 1em * 0.5);
612
+ animation: spin 0.6s infinite linear;
613
+ border: 2px solid;
516
614
  border-radius: 9999px;
517
- border-color: var(--vb-button-foreground) var(--vb-button-foreground) transparent transparent;
615
+ border-color: #212121 #212121 transparent transparent;
518
616
  }
519
617
 
520
618
  @keyframes spin {
@@ -586,85 +684,504 @@ input::-moz-placeholder {
586
684
  }
587
685
  }
588
686
  .button_color_primary {
589
- --vb-button-background: var(--vb-primary-50, hsl(152, 60%, 50%));
590
- --vb-button-background-hover: var(--vb-primary-40, hsl(152, 60%, 40%));
591
- --vb-button-background-active: var(--vb-primary-30, hsl(152, 60%, 30%));
592
- --vb-button-foreground: white;
593
- --vb-button-foreground-hover: white;
594
- --vb-button-foreground-active: white;
595
- --vb-button-border-color: transparent;
596
- --vb-button-border-color-hover: transparent;
597
- --vb-button-border-color-active: transparent;
598
- --vb-button-box-shadow: 0 0 0 0 hsl(152deg, 60%, 50%, 0%);
599
- --vb-button-box-shadow-focus: 0 0 0 0.2rem hsl(152deg, 60%, 50%, 50%);
687
+ border-color: transparent;
688
+ background-color: #00bcd4;
689
+ box-shadow: 0 0 0 0 rgba(0, 188, 212, 0);
690
+ color: #fff;
691
+ }
692
+ .button_color_primary:hover {
693
+ border-color: transparent;
694
+ background-color: #00a9bf;
695
+ }
696
+ .button_color_primary:focus {
697
+ border-color: transparent;
698
+ background-color: #00a9bf;
699
+ box-shadow: 0 0 0 0.2rem rgba(0, 188, 212, 0.5);
700
+ }
701
+ .button_color_primary:active {
702
+ border-color: transparent;
703
+ background-color: #0096aa;
704
+ }
705
+ .button_color_primary.is-loading::after {
706
+ border-color: #fff #fff transparent transparent;
600
707
  }
601
708
 
602
709
  .button_color_secondary {
603
- --vb-button-background: var(--vb-secondary-50, hsl(214, 50%, 50%));
604
- --vb-button-background-hover: var(--vb-secondary-40, hsl(214, 50%, 40%));
605
- --vb-button-background-active: var(--vb-secondary-30, hsl(214, 50%, 30%));
606
- --vb-button-foreground: white;
607
- --vb-button-foreground-hover: white;
608
- --vb-button-foreground-active: white;
609
- --vb-button-border-color: transparent;
610
- --vb-button-border-color-hover: transparent;
611
- --vb-button-border-color-active: transparent;
612
- --vb-button-box-shadow: 0 0 0 0 hsl(214deg, 50%, 50%, 0%);
613
- --vb-button-box-shadow-focus: 0 0 0 0.2rem hsl(214deg, 50%, 50%, 50%);
614
- }
615
-
616
- .button_color_neutral {
617
- --vb-button-background: var(--vb-neutral-50, hsl(214, 20%, 50%));
618
- --vb-button-background-hover: var(--vb-neutral-40, hsl(214, 20%, 40%));
619
- --vb-button-background-active: var(--vb-neutral-30, hsl(214, 20%, 30%));
620
- --vb-button-foreground: white;
621
- --vb-button-foreground-hover: white;
622
- --vb-button-foreground-active: white;
623
- --vb-button-border-color: transparent;
624
- --vb-button-border-color-hover: transparent;
625
- --vb-button-border-color-active: transparent;
626
- --vb-button-box-shadow: 0 0 0 0 hsl(214deg, 20%, 50%, 0%);
627
- --vb-button-box-shadow-focus: 0 0 0 0.2rem hsl(214deg, 20%, 50%, 50%);
628
- }
629
-
630
- .button_color_important {
631
- --vb-button-background: var(--vb-important-50, hsl(0, 80%, 50%));
632
- --vb-button-background-hover: var(--vb-important-40, hsl(0, 80%, 40%));
633
- --vb-button-background-active: var(--vb-important-30, hsl(0, 80%, 30%));
634
- --vb-button-foreground: white;
635
- --vb-button-foreground-hover: white;
636
- --vb-button-foreground-active: white;
637
- --vb-button-border-color: transparent;
638
- --vb-button-border-color-hover: transparent;
639
- --vb-button-border-color-active: transparent;
640
- --vb-button-box-shadow: 0 0 0 0 hsl(0deg, 80%, 50%, 0%);
641
- --vb-button-box-shadow-focus: 0 0 0 0.2rem hsl(0deg, 80%, 50%, 50%);
710
+ border-color: transparent;
711
+ background-color: #607d8b;
712
+ box-shadow: 0 0 0 0 rgba(96, 125, 139, 0);
713
+ color: #fff;
714
+ }
715
+ .button_color_secondary:hover {
716
+ border-color: transparent;
717
+ background-color: #56717d;
718
+ }
719
+ .button_color_secondary:focus {
720
+ border-color: transparent;
721
+ background-color: #56717d;
722
+ box-shadow: 0 0 0 0.2rem rgba(96, 125, 139, 0.5);
723
+ }
724
+ .button_color_secondary:active {
725
+ border-color: transparent;
726
+ background-color: #4d646f;
727
+ }
728
+ .button_color_secondary.is-loading::after {
729
+ border-color: #fff #fff transparent transparent;
642
730
  }
643
731
 
644
732
  .button_icon {
645
- --vb-button-padding: calc(0.5em - 1px);
733
+ padding: calc(0.5em - 1px);
646
734
  }
647
735
  .button_icon.button_size_sm {
648
- --vb-button-padding: calc(0.25rem - 1px);
736
+ padding: calc(0.25rem - 1px);
649
737
  }
650
738
  .button_icon.button_size_lg {
651
- --vb-button-padding: calc(0.648rem - 1px);
739
+ padding: calc(0.648rem - 1px);
740
+ }
741
+
742
+ .button_invert {
743
+ border-color: rgba(255, 255, 255, 0.2);
744
+ background-color: transparent;
745
+ box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
746
+ color: #fff;
747
+ }
748
+ .button_invert:hover {
749
+ border-color: rgba(255, 255, 255, 0.5);
750
+ background-color: transparent;
751
+ }
752
+ .button_invert:focus {
753
+ border-color: rgba(255, 255, 255, 0.5);
754
+ background-color: transparent;
755
+ box-shadow: 0 0 0 0.2rem rgba(255, 255, 255, 0.15);
756
+ }
757
+ .button_invert:active {
758
+ border-color: rgba(255, 255, 255, 0.5);
759
+ background-color: rgba(255, 255, 255, 0.05);
760
+ }
761
+ .button_invert.is-loading::after {
762
+ border-color: #fff #fff transparent transparent;
652
763
  }
653
764
 
654
765
  .button_size_sm {
655
- --vb-button-size: 1.875rem;
656
- --vb-button-padding: calc(0.25rem - 1px) 0.5rem;
657
- --vb-button-font-size: 0.875rem;
658
- --vb-button-line-height: 1.375;
766
+ min-width: 1.875rem;
767
+ height: 1.875rem;
768
+ padding: calc(0.25rem - 1px) 0.5rem;
769
+ font-size: 0.875rem;
770
+ line-height: 1.375;
659
771
  }
660
772
 
661
773
  .button_size_lg {
662
- --vb-button-size: 3.125rem;
663
- --vb-button-padding: calc(0.648rem - 1px) 1.5rem;
664
- --vb-button-font-size: 1.125rem;
665
- --vb-button-line-height: 1.875;
774
+ min-width: 3.125rem;
775
+ height: 3.125rem;
776
+ padding: calc(0.648rem - 1px) 1.5rem;
777
+ font-size: 1.125rem;
778
+ line-height: 1.625;
779
+ }
780
+
781
+ .button_state_info {
782
+ border-color: transparent;
783
+ background-color: #03a9f4;
784
+ box-shadow: 0 0 0 0 rgba(3, 169, 244, 0);
785
+ color: #fff;
786
+ }
787
+ .button_state_info:hover {
788
+ border-color: transparent;
789
+ background-color: #0398dc;
790
+ }
791
+ .button_state_info:focus {
792
+ border-color: transparent;
793
+ background-color: #0398dc;
794
+ box-shadow: 0 0 0 0.2rem rgba(3, 169, 244, 0.5);
795
+ }
796
+ .button_state_info:active {
797
+ border-color: transparent;
798
+ background-color: #0287c3;
799
+ }
800
+ .button_state_info.is-loading::after {
801
+ border-color: #fff #fff transparent transparent;
802
+ }
803
+
804
+ .button_state_success {
805
+ border-color: transparent;
806
+ background-color: #4caf50;
807
+ box-shadow: 0 0 0 0 rgba(76, 175, 80, 0);
808
+ color: #fff;
809
+ }
810
+ .button_state_success:hover {
811
+ border-color: transparent;
812
+ background-color: #449e48;
813
+ }
814
+ .button_state_success:focus {
815
+ border-color: transparent;
816
+ background-color: #449e48;
817
+ box-shadow: 0 0 0 0.2rem rgba(76, 175, 80, 0.5);
818
+ }
819
+ .button_state_success:active {
820
+ border-color: transparent;
821
+ background-color: #3d8c40;
822
+ }
823
+ .button_state_success.is-loading::after {
824
+ border-color: #fff #fff transparent transparent;
825
+ }
826
+
827
+ .button_state_caution {
828
+ border-color: transparent;
829
+ background-color: #ff9800;
830
+ box-shadow: 0 0 0 0 rgba(255, 152, 0, 0);
831
+ color: #fff;
832
+ }
833
+ .button_state_caution:hover {
834
+ border-color: transparent;
835
+ background-color: #e68900;
836
+ }
837
+ .button_state_caution:focus {
838
+ border-color: transparent;
839
+ background-color: #e68900;
840
+ box-shadow: 0 0 0 0.2rem rgba(255, 152, 0, 0.5);
841
+ }
842
+ .button_state_caution:active {
843
+ border-color: transparent;
844
+ background-color: #cc7a00;
845
+ }
846
+ .button_state_caution.is-loading::after {
847
+ border-color: #fff #fff transparent transparent;
848
+ }
849
+
850
+ .button_state_danger {
851
+ border-color: transparent;
852
+ background-color: #f44336;
853
+ box-shadow: 0 0 0 0 rgba(244, 67, 54, 0);
854
+ color: #fff;
855
+ }
856
+ .button_state_danger:hover {
857
+ border-color: transparent;
858
+ background-color: #f2291a;
859
+ }
860
+ .button_state_danger:focus {
861
+ border-color: transparent;
862
+ background-color: #f2291a;
863
+ box-shadow: 0 0 0 0.2rem rgba(244, 67, 54, 0.5);
864
+ }
865
+ .button_state_danger:active {
866
+ border-color: transparent;
867
+ background-color: #e21b0c;
868
+ }
869
+ .button_state_danger.is-loading::after {
870
+ border-color: #fff #fff transparent transparent;
871
+ }
872
+
873
+ .button_subtle {
874
+ border-color: transparent;
875
+ background-color: transparent;
876
+ box-shadow: 0 0 0 0 rgba(33, 33, 33, 0);
877
+ color: #9e9e9e;
878
+ }
879
+ .button_subtle:hover {
880
+ border-color: transparent;
881
+ background-color: transparent;
882
+ color: #212121;
883
+ }
884
+ .button_subtle:focus {
885
+ border-color: rgba(0, 0, 0, 0.2);
886
+ background-color: transparent;
887
+ box-shadow: 0 0 0 0.2rem rgba(33, 33, 33, 0.05);
888
+ color: #212121;
889
+ }
890
+ .button_subtle:active {
891
+ border-color: rgba(0, 0, 0, 0.5);
892
+ background-color: transparent;
893
+ }
894
+ .button_subtle.is-loading::after {
895
+ border-color: #9e9e9e #9e9e9e transparent transparent;
896
+ }
897
+ .button_subtle.button_invert {
898
+ border-color: transparent;
899
+ background-color: transparent;
900
+ box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
901
+ color: rgba(255, 255, 255, 0.6);
902
+ }
903
+ .button_subtle.button_invert:hover {
904
+ border-color: transparent;
905
+ background-color: transparent;
906
+ color: #fff;
907
+ }
908
+ .button_subtle.button_invert:focus {
909
+ border-color: rgba(255, 255, 255, 0.2);
910
+ background-color: transparent;
911
+ box-shadow: 0 0 0 0.2rem rgba(255, 255, 255, 0.05);
912
+ color: #fff;
913
+ }
914
+ .button_subtle.button_invert:active {
915
+ border-color: rgba(255, 255, 255, 0.5);
916
+ background-color: transparent;
917
+ }
918
+ .button_subtle.button_invert.is-loading::after {
919
+ border-color: rgba(255, 255, 255, 0.6) rgba(255, 255, 255, 0.6) transparent transparent;
920
+ }
921
+
922
+ .button-group {
923
+ margin-top: -0.5em;
924
+ margin-left: -0.5em;
925
+ display: inline-flex;
926
+ flex-wrap: wrap;
927
+ align-items: center;
928
+ }
929
+ .button-group > * {
930
+ margin-top: 0.5em;
931
+ margin-left: 0.5em;
932
+ }
933
+ .button-group + .button-group {
934
+ margin-top: 0;
935
+ }
936
+ .button-group > * {
937
+ z-index: 1;
938
+ flex: 0 0 auto;
939
+ border-radius: 0.25rem;
940
+ }
941
+ .button-group > *:hover {
942
+ z-index: 2;
943
+ }
944
+ .button-group > *:focus {
945
+ z-index: 3;
946
+ }
947
+ .button-group > *:active {
948
+ z-index: 4;
949
+ }
950
+ .button-group > *.is-active {
951
+ z-index: 5;
952
+ }
953
+
954
+ .button-group_full {
955
+ display: flex;
956
+ align-items: stretch;
957
+ }
958
+ .button-group_full > * {
959
+ flex: 1 1 auto;
960
+ }
961
+
962
+ @media (max-width: 479px) {
963
+ .button-group_full_xs {
964
+ display: flex;
965
+ align-items: stretch;
966
+ }
967
+ .button-group_full_xs > * {
968
+ flex: 1 1 auto;
969
+ }
970
+ }
971
+ @media (max-width: 619px) {
972
+ .button-group_full_sm {
973
+ display: flex;
974
+ align-items: stretch;
975
+ }
976
+ .button-group_full_sm > * {
977
+ flex: 1 1 auto;
978
+ }
979
+ }
980
+ @media (max-width: 759px) {
981
+ .button-group_full_md {
982
+ display: flex;
983
+ align-items: stretch;
984
+ }
985
+ .button-group_full_md > * {
986
+ flex: 1 1 auto;
987
+ }
988
+ }
989
+ @media (max-width: 989px) {
990
+ .button-group_full_lg {
991
+ display: flex;
992
+ align-items: stretch;
993
+ }
994
+ .button-group_full_lg > * {
995
+ flex: 1 1 auto;
996
+ }
997
+ }
998
+ @media (max-width: 1379px) {
999
+ .button-group_full_xl {
1000
+ display: flex;
1001
+ align-items: stretch;
1002
+ }
1003
+ .button-group_full_xl > * {
1004
+ flex: 1 1 auto;
1005
+ }
1006
+ }
1007
+ .button-group_gap_none {
1008
+ margin-top: 0;
1009
+ margin-left: 0;
1010
+ }
1011
+ .button-group_gap_none > * {
1012
+ margin-top: 0;
1013
+ margin-left: 0;
1014
+ }
1015
+
1016
+ .button-group_gap_xs {
1017
+ margin-top: -1px;
1018
+ margin-left: -1px;
1019
+ }
1020
+ .button-group_gap_xs > * {
1021
+ margin-top: 1px;
1022
+ margin-left: 1px;
1023
+ }
1024
+
1025
+ .button-group_gap_sm {
1026
+ margin-top: -0.25em;
1027
+ margin-left: -0.25em;
1028
+ }
1029
+ .button-group_gap_sm > * {
1030
+ margin-top: 0.25em;
1031
+ margin-left: 0.25em;
1032
+ }
1033
+
1034
+ .button-group_gap_md {
1035
+ margin-top: -0.5em;
1036
+ margin-left: -0.5em;
1037
+ }
1038
+ .button-group_gap_md > * {
1039
+ margin-top: 0.5em;
1040
+ margin-left: 0.5em;
1041
+ }
1042
+
1043
+ .button-group_gap_lg {
1044
+ margin-top: -1em;
1045
+ margin-left: -1em;
1046
+ }
1047
+ .button-group_gap_lg > * {
1048
+ margin-top: 1em;
1049
+ margin-left: 1em;
1050
+ }
1051
+
1052
+ .button-group_gap_xl {
1053
+ margin-top: -1.5em;
1054
+ margin-left: -1.5em;
1055
+ }
1056
+ .button-group_gap_xl > * {
1057
+ margin-top: 1.5em;
1058
+ margin-left: 1.5em;
1059
+ }
1060
+
1061
+ .button-group_join {
1062
+ margin-top: 1px;
1063
+ margin-left: 1px;
1064
+ }
1065
+ .button-group_join > * {
1066
+ margin-top: -1px;
1067
+ margin-left: -1px;
1068
+ border-radius: 0;
1069
+ }
1070
+ .button-group_join > *:first-child {
1071
+ border-top-left-radius: 0.25rem;
1072
+ border-bottom-left-radius: 0.25rem;
1073
+ }
1074
+ .button-group_join > *:last-child {
1075
+ border-top-right-radius: 0.25rem;
1076
+ border-bottom-right-radius: 0.25rem;
1077
+ }
1078
+
1079
+ .button-group_join.button-group_stack > * {
1080
+ border-radius: 0;
1081
+ }
1082
+ .button-group_join.button-group_stack > *:first-child {
1083
+ border-top-left-radius: 0.25rem;
1084
+ border-top-right-radius: 0.25rem;
1085
+ }
1086
+ .button-group_join.button-group_stack > *:last-child {
1087
+ border-bottom-left-radius: 0.25rem;
1088
+ border-bottom-right-radius: 0.25rem;
1089
+ }
1090
+
1091
+ @media (max-width: 479px) {
1092
+ .button-group_join.button-group_stack_xs > * {
1093
+ border-radius: 0;
1094
+ }
1095
+ .button-group_join.button-group_stack_xs > *:first-child {
1096
+ border-top-left-radius: 0.25rem;
1097
+ border-top-right-radius: 0.25rem;
1098
+ }
1099
+ .button-group_join.button-group_stack_xs > *:last-child {
1100
+ border-bottom-left-radius: 0.25rem;
1101
+ border-bottom-right-radius: 0.25rem;
1102
+ }
1103
+ }
1104
+ @media (max-width: 619px) {
1105
+ .button-group_join.button-group_stack_sm > * {
1106
+ border-radius: 0;
1107
+ }
1108
+ .button-group_join.button-group_stack_sm > *:first-child {
1109
+ border-top-left-radius: 0.25rem;
1110
+ border-top-right-radius: 0.25rem;
1111
+ }
1112
+ .button-group_join.button-group_stack_sm > *:last-child {
1113
+ border-bottom-left-radius: 0.25rem;
1114
+ border-bottom-right-radius: 0.25rem;
1115
+ }
1116
+ }
1117
+ @media (max-width: 759px) {
1118
+ .button-group_join.button-group_stack_md > * {
1119
+ border-radius: 0;
1120
+ }
1121
+ .button-group_join.button-group_stack_md > *:first-child {
1122
+ border-top-left-radius: 0.25rem;
1123
+ border-top-right-radius: 0.25rem;
1124
+ }
1125
+ .button-group_join.button-group_stack_md > *:last-child {
1126
+ border-bottom-left-radius: 0.25rem;
1127
+ border-bottom-right-radius: 0.25rem;
1128
+ }
1129
+ }
1130
+ @media (max-width: 989px) {
1131
+ .button-group_join.button-group_stack_lg > * {
1132
+ border-radius: 0;
1133
+ }
1134
+ .button-group_join.button-group_stack_lg > *:first-child {
1135
+ border-top-left-radius: 0.25rem;
1136
+ border-top-right-radius: 0.25rem;
1137
+ }
1138
+ .button-group_join.button-group_stack_lg > *:last-child {
1139
+ border-bottom-left-radius: 0.25rem;
1140
+ border-bottom-right-radius: 0.25rem;
1141
+ }
1142
+ }
1143
+ @media (max-width: 1379px) {
1144
+ .button-group_join.button-group_stack_xl > * {
1145
+ border-radius: 0;
1146
+ }
1147
+ .button-group_join.button-group_stack_xl > *:first-child {
1148
+ border-top-left-radius: 0.25rem;
1149
+ border-top-right-radius: 0.25rem;
1150
+ }
1151
+ .button-group_join.button-group_stack_xl > *:last-child {
1152
+ border-bottom-left-radius: 0.25rem;
1153
+ border-bottom-right-radius: 0.25rem;
1154
+ }
1155
+ }
1156
+ .button-group_stack {
1157
+ flex-direction: column;
666
1158
  }
667
1159
 
1160
+ @media (max-width: 479px) {
1161
+ .button-group_stack_xs {
1162
+ flex-direction: column;
1163
+ }
1164
+ }
1165
+ @media (max-width: 619px) {
1166
+ .button-group_stack_sm {
1167
+ flex-direction: column;
1168
+ }
1169
+ }
1170
+ @media (max-width: 759px) {
1171
+ .button-group_stack_md {
1172
+ flex-direction: column;
1173
+ }
1174
+ }
1175
+ @media (max-width: 989px) {
1176
+ .button-group_stack_lg {
1177
+ flex-direction: column;
1178
+ }
1179
+ }
1180
+ @media (max-width: 1379px) {
1181
+ .button-group_stack_xl {
1182
+ flex-direction: column;
1183
+ }
1184
+ }
668
1185
  .card {
669
1186
  position: relative;
670
1187
  display: flex;
@@ -674,8 +1191,8 @@ input::-moz-placeholder {
674
1191
  transition-duration: 0.3s;
675
1192
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
676
1193
  border-radius: 0.25rem;
677
- background: white;
678
- box-shadow: 0 1px 3px var(--vb-shadow-color, hsl(var(--vb-neutral-hs, 214deg, 20%), 20%, 20%));
1194
+ background: #fff;
1195
+ box-shadow: 0 0 2px 1px rgba(33, 33, 33, 0.05), 0 1px 3px rgba(33, 33, 33, 0.2);
679
1196
  }
680
1197
 
681
1198
  .card__header,
@@ -696,7 +1213,7 @@ input::-moz-placeholder {
696
1213
  flex: 1 1 auto;
697
1214
  }
698
1215
  .card__body + .card__body {
699
- border-top: 1px solid var(--vb-border-color, rgba(0, 0, 0, 0.1));
1216
+ border-top: 1px solid rgba(0, 0, 0, 0.1);
700
1217
  }
701
1218
 
702
1219
  .card__image {
@@ -714,7 +1231,7 @@ input::-moz-placeholder {
714
1231
  }
715
1232
 
716
1233
  .card__header {
717
- border-bottom: 1px solid var(--vb-border-color, rgba(0, 0, 0, 0.1));
1234
+ border-bottom: 1px solid rgba(0, 0, 0, 0.1);
718
1235
  }
719
1236
  .card__header:first-child {
720
1237
  border-top-left-radius: 0.25rem;
@@ -722,7 +1239,7 @@ input::-moz-placeholder {
722
1239
  }
723
1240
 
724
1241
  .card__footer {
725
- border-top: 1px solid var(--vb-border-color, rgba(0, 0, 0, 0.1));
1242
+ border-top: 1px solid rgba(0, 0, 0, 0.1);
726
1243
  }
727
1244
  .card__footer:last-child {
728
1245
  border-bottom-left-radius: 0.25rem;
@@ -733,7 +1250,7 @@ input::-moz-placeholder {
733
1250
  flex-grow: 1;
734
1251
  font-size: 1.125rem;
735
1252
  font-weight: 600;
736
- line-height: 1.875;
1253
+ line-height: 1.625;
737
1254
  }
738
1255
 
739
1256
  .card__background,
@@ -741,7 +1258,10 @@ input::-moz-placeholder {
741
1258
  width: 100%;
742
1259
  height: 100%;
743
1260
  position: absolute;
744
- inset: 0;
1261
+ top: 0;
1262
+ right: 0;
1263
+ bottom: 0;
1264
+ left: 0;
745
1265
  transition-property: background-color, border-color, box-shadow, transform;
746
1266
  transition-duration: 0.3s;
747
1267
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
@@ -755,7 +1275,7 @@ input::-moz-placeholder {
755
1275
 
756
1276
  .card__screen {
757
1277
  z-index: 2;
758
- background: var(--vb-neutral-10, hsl(214, 20%, 10%));
1278
+ background: #424242;
759
1279
  opacity: 0.7;
760
1280
  }
761
1281
 
@@ -780,13 +1300,26 @@ input::-moz-placeholder {
780
1300
  opacity: 0.7;
781
1301
  }
782
1302
  }
1303
+ .card_invert {
1304
+ background: #424242;
1305
+ color: #fff;
1306
+ }
1307
+ .card_invert .card__body,
1308
+ .card_invert .card__header,
1309
+ .card_invert .card__footer {
1310
+ border-color: rgba(255, 255, 255, 0.1);
1311
+ }
1312
+ .card_invert .card__screen {
1313
+ background: #424242;
1314
+ }
1315
+
783
1316
  .card_link {
784
1317
  transform: translate(0, 0);
785
- box-shadow: 0 2px 6px var(--vb-shadow-color, hsl(var(--vb-neutral-hs, 214deg, 20%), 20%, 20%));
1318
+ box-shadow: 0 0 2px 1px rgba(33, 33, 33, 0.05), 0 2px 6px rgba(33, 33, 33, 0.2);
786
1319
  }
787
1320
  .card_link:hover, .card_link:focus, .card_link:focus-within {
788
1321
  transform: translate(0, -0.25em);
789
- box-shadow: 0 4px 12px var(--vb-shadow-color, hsl(var(--vb-neutral-hs, 214deg, 20%), 20%, 20%));
1322
+ box-shadow: 0 0 2px 1px rgba(33, 33, 33, 0.05), 0 4px 12px rgba(33, 33, 33, 0.2);
790
1323
  }
791
1324
 
792
1325
  .card_zoom .card__background {
@@ -823,9 +1356,9 @@ input::-moz-placeholder {
823
1356
  display: flex;
824
1357
  align-items: center;
825
1358
  justify-content: center;
826
- border: 2px solid var(--vb-neutral-50, hsl(214, 20%, 50%));
1359
+ border: 2px solid #bdbdbd;
827
1360
  border-radius: 0.25rem;
828
- background-color: white;
1361
+ background-color: #fff;
829
1362
  color: transparent;
830
1363
  }
831
1364
 
@@ -850,26 +1383,26 @@ input::-moz-placeholder {
850
1383
  cursor: pointer;
851
1384
  }
852
1385
  .checkbox__native:hover + .checkbox__background {
853
- background-color: rgba(var(--vb-primary-50, hsl(152, 60%, 50%)), 0.1);
1386
+ background-color: rgba(0, 188, 212, 0.1);
854
1387
  }
855
1388
  .checkbox__native:hover + .checkbox__background .checkbox__box {
856
- border-color: var(--vb-primary-50, hsl(152, 60%, 50%));
1389
+ border-color: #00bcd4;
857
1390
  }
858
1391
  .checkbox__native:focus + .checkbox__background {
859
- background-color: rgba(var(--vb-primary-50, hsl(152, 60%, 50%)), 0.1);
1392
+ background-color: rgba(0, 188, 212, 0.1);
860
1393
  }
861
1394
  .checkbox__native:focus + .checkbox__background .checkbox__box {
862
- border-color: var(--vb-primary-50, hsl(152, 60%, 50%));
1395
+ border-color: #00bcd4;
863
1396
  }
864
1397
  .checkbox__native:focus-visible + .checkbox__background, .checkbox__native:active + .checkbox__background {
865
- background-color: rgba(var(--vb-primary-50, hsl(152, 60%, 50%)), 0.2);
1398
+ background-color: rgba(0, 188, 212, 0.2);
866
1399
  }
867
1400
  .checkbox__native:focus-visible + .checkbox__background .checkbox__box, .checkbox__native:active + .checkbox__background .checkbox__box {
868
- border-color: var(--vb-primary-50, hsl(152, 60%, 50%));
1401
+ border-color: #00bcd4;
869
1402
  }
870
1403
  .checkbox__native:checked + .checkbox__background .checkbox__box {
871
- border-color: var(--vb-primary-50, hsl(152, 60%, 50%));
872
- background-color: var(--vb-primary-50, hsl(152, 60%, 50%));
1404
+ border-color: #00bcd4;
1405
+ background-color: #00bcd4;
873
1406
  }
874
1407
  .checkbox__native:checked + .checkbox__background .checkbox__icon {
875
1408
  transition-property: opacity, background-position;
@@ -879,8 +1412,8 @@ input::-moz-placeholder {
879
1412
  opacity: 1;
880
1413
  }
881
1414
  .checkbox__native:indeterminate + .checkbox__background .checkbox__box {
882
- border-color: var(--vb-primary-50, hsl(152, 60%, 50%));
883
- background-color: var(--vb-primary-50, hsl(152, 60%, 50%));
1415
+ border-color: #00bcd4;
1416
+ background-color: #00bcd4;
884
1417
  }
885
1418
  .checkbox__native:indeterminate + .checkbox__background .checkbox__icon {
886
1419
  transition-property: opacity, background-position;
@@ -934,10 +1467,9 @@ input::-moz-placeholder {
934
1467
  flex-direction: column;
935
1468
  overflow: auto;
936
1469
  border-radius: 0.25rem;
937
- background: var(--vb-background, var(--vb-neutral-100, hsl(214, 20%, 100%)));
1470
+ background: #fff;
938
1471
  background-clip: padding-box;
939
- box-shadow: 0 8px 18px var(--vb-shadow-color, hsl(var(--vb-neutral-hs, 214deg, 20%), 20%, 20%));
940
- color: var(--vb-foreground, var(--vb-neutral-20, hsl(214, 20%, 20%)));
1472
+ box-shadow: 0 0 2px 1px rgba(33, 33, 33, 0.05), 0 8px 18px rgba(33, 33, 33, 0.2);
941
1473
  -webkit-overflow-scrolling: touch;
942
1474
  }
943
1475
 
@@ -954,7 +1486,7 @@ input::-moz-placeholder {
954
1486
  z-index: 1;
955
1487
  display: flex;
956
1488
  align-items: center;
957
- background: var(--vb-background, var(--vb-neutral-100, hsl(214, 20%, 100%)));
1489
+ background: #fff;
958
1490
  vertical-align: middle;
959
1491
  }
960
1492
  .dialog__header > * + *,
@@ -964,26 +1496,26 @@ input::-moz-placeholder {
964
1496
 
965
1497
  .dialog__header {
966
1498
  top: 0;
967
- border-bottom: 1px solid var(--vb-border-color, rgba(0, 0, 0, 0.1));
1499
+ border-bottom: 1px solid rgba(0, 0, 0, 0.1);
968
1500
  }
969
1501
 
970
1502
  .dialog__body {
971
1503
  flex-grow: 1;
972
1504
  }
973
1505
  .dialog__body + .dialog__body {
974
- border-top: 1px solid var(--vb-border-color, rgba(0, 0, 0, 0.1));
1506
+ border-top: 1px solid rgba(0, 0, 0, 0.1);
975
1507
  }
976
1508
 
977
1509
  .dialog__footer {
978
1510
  bottom: 0;
979
- border-top: 1px solid var(--vb-border-color, rgba(0, 0, 0, 0.1));
1511
+ border-top: 1px solid rgba(0, 0, 0, 0.1);
980
1512
  }
981
1513
 
982
1514
  .dialog__title {
983
1515
  flex-grow: 1;
984
1516
  font-size: 1.125rem;
985
1517
  font-weight: 600;
986
- line-height: 1.875;
1518
+ line-height: 1.625;
987
1519
  }
988
1520
 
989
1521
  .dialog > .dialog__close {
@@ -995,15 +1527,6 @@ input::-moz-placeholder {
995
1527
  padding-right: 3.5em;
996
1528
  }
997
1529
 
998
- :root {
999
- --vrembem-prefix: vb-;
1000
- }
1001
-
1002
- :root {
1003
- --vb-drawer-transition-duration: var(--vb-transition-duration, 0.3s);
1004
- --vb-drawer-transition-timing-function: var(--vb-transition-timing-function, cubic-bezier(0.4, 0, 0.2, 1));
1005
- }
1006
-
1007
1530
  /**
1008
1531
  * Required structure styles
1009
1532
  */
@@ -1046,17 +1569,17 @@ input::-moz-placeholder {
1046
1569
  height: 100%;
1047
1570
  overflow: auto;
1048
1571
  border-radius: 0;
1049
- background: var(--vb-background-darker, var(--vb-neutral-95, hsl(214, 20%, 95%)));
1572
+ background: #f5f5f5;
1050
1573
  box-shadow: none;
1051
1574
  opacity: 0;
1052
1575
  -webkit-overflow-scrolling: touch;
1053
1576
  }
1054
1577
  .drawer__dialog .dialog__header,
1055
1578
  .drawer__dialog .dialog__footer {
1056
- background: var(--vb-background-darker, var(--vb-neutral-95, hsl(214, 20%, 95%)));
1579
+ background: #f5f5f5;
1057
1580
  }
1058
1581
  .drawer__dialog .dialog__body {
1059
- background: var(--vb-background-darker, var(--vb-neutral-95, hsl(214, 20%, 95%)));
1582
+ background: #f5f5f5;
1060
1583
  }
1061
1584
 
1062
1585
  /**
@@ -1080,14 +1603,14 @@ input::-moz-placeholder {
1080
1603
  .drawer.is-opening,
1081
1604
  .drawer.is-closing {
1082
1605
  transition-property: background-color, opacity, transform;
1083
- transition-duration: var(--vb-drawer-transition-duration);
1084
- transition-timing-function: var(--vb-drawer-transition-timing-function);
1606
+ transition-duration: 0.3s;
1607
+ transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
1085
1608
  }
1086
1609
  .drawer.is-opening .drawer__dialog,
1087
1610
  .drawer.is-closing .drawer__dialog {
1088
1611
  transition-property: opacity, transform;
1089
- transition-duration: var(--vb-drawer-transition-duration);
1090
- transition-timing-function: var(--vb-drawer-transition-timing-function);
1612
+ transition-duration: 0.3s;
1613
+ transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
1091
1614
  }
1092
1615
 
1093
1616
  .drawer.is-opening .drawer__dialog,
@@ -1153,15 +1676,7 @@ input::-moz-placeholder {
1153
1676
  height: 0;
1154
1677
  overflow: hidden;
1155
1678
  transform: translateX(0);
1156
- }
1157
- .drawer_modal::before {
1158
- content: "";
1159
- position: absolute;
1160
- inset: 0;
1161
- width: 100%;
1162
- height: 100%;
1163
- background-color: var(--vb-neutral-10, hsl(214, 20%, 10%));
1164
- opacity: 0;
1679
+ background-color: rgba(255, 255, 255, 0);
1165
1680
  }
1166
1681
  .drawer_modal .drawer__dialog {
1167
1682
  position: absolute;
@@ -1170,8 +1685,8 @@ input::-moz-placeholder {
1170
1685
  width: 18em;
1171
1686
  max-width: 80%;
1172
1687
  transform: translateX(-100%);
1173
- background-color: white;
1174
- box-shadow: 0 12px 24px var(--vb-shadow-color, hsl(var(--vb-neutral-hs, 214deg, 20%), 20%, 20%));
1688
+ background-color: #fff;
1689
+ box-shadow: 0 0 2px 1px rgba(33, 33, 33, 0.05), 0 12px 24px rgba(33, 33, 33, 0.2);
1175
1690
  }
1176
1691
  .drawer_modal.drawer_switch {
1177
1692
  right: auto;
@@ -1185,10 +1700,10 @@ input::-moz-placeholder {
1185
1700
  }
1186
1701
  .drawer_modal .dialog__header,
1187
1702
  .drawer_modal .dialog__footer {
1188
- background: white;
1703
+ background: #fff;
1189
1704
  }
1190
1705
  .drawer_modal .dialog__body {
1191
- background: white;
1706
+ background: #fff;
1192
1707
  }
1193
1708
 
1194
1709
  /**
@@ -1202,18 +1717,10 @@ input::-moz-placeholder {
1202
1717
  height: 100%;
1203
1718
  }
1204
1719
 
1205
- .drawer_modal.is-opening::before,
1206
- .drawer_modal.is-closing::before {
1207
- transition: opacity var(--vb-drawer-transition-duration) var(--vb-drawer-transition-timing-function);
1208
- }
1209
-
1210
1720
  .drawer_modal.is-opening,
1211
1721
  .drawer_modal.is-opened {
1212
1722
  transform: translateX(0);
1213
- }
1214
- .drawer_modal.is-opening::before,
1215
- .drawer_modal.is-opened::before {
1216
- opacity: 0.8;
1723
+ background-color: rgba(66, 66, 66, 0.8);
1217
1724
  }
1218
1725
  .drawer_modal.is-opening .drawer__dialog,
1219
1726
  .drawer_modal.is-opened .drawer__dialog {
@@ -1222,6 +1729,7 @@ input::-moz-placeholder {
1222
1729
 
1223
1730
  .drawer_modal.is-closing {
1224
1731
  transform: translateX(0);
1732
+ background-color: rgba(66, 66, 66, 0);
1225
1733
  }
1226
1734
  .drawer_modal.is-closing .drawer__dialog {
1227
1735
  transform: translateX(-100%);
@@ -1826,42 +2334,39 @@ input::-moz-placeholder {
1826
2334
  }
1827
2335
  .icon {
1828
2336
  stroke: currentcolor;
1829
- stroke-width: 2;
2337
+ stroke-width: 2px;
1830
2338
  fill: none;
1831
2339
  display: inline-block;
1832
2340
  box-sizing: content-box;
1833
2341
  flex-shrink: 0;
1834
2342
  width: 1em;
1835
2343
  height: 1em;
2344
+ stroke-width: 2px;
1836
2345
  stroke-linecap: round;
1837
2346
  stroke-linejoin: round;
1838
- font-size: 1.5em;
2347
+ font-size: 1.25em;
1839
2348
  vertical-align: top;
1840
2349
  }
1841
2350
 
1842
2351
  .icon_size_xs {
1843
- stroke-width: 3.5;
1844
2352
  font-size: 0.75em;
1845
2353
  }
1846
2354
 
1847
2355
  .icon_size_sm {
1848
- stroke-width: 2.5;
1849
- font-size: 1.125em;
2356
+ font-size: 1em;
1850
2357
  }
1851
2358
 
1852
2359
  .icon_size_lg {
1853
- stroke-width: 1.75;
1854
- font-size: 2em;
2360
+ font-size: 1.75em;
1855
2361
  }
1856
2362
 
1857
2363
  .icon_size_xl {
1858
- stroke-width: 1.3;
1859
- font-size: 3em;
2364
+ font-size: 2.25em;
1860
2365
  }
1861
2366
 
1862
2367
  .icon_style_stroke {
1863
2368
  stroke: currentcolor;
1864
- stroke-width: 2;
2369
+ stroke-width: 2px;
1865
2370
  fill: none;
1866
2371
  }
1867
2372
 
@@ -1871,6 +2376,228 @@ input::-moz-placeholder {
1871
2376
  fill: currentcolor;
1872
2377
  }
1873
2378
 
2379
+ .icon-action {
2380
+ width: 24px;
2381
+ height: 24px;
2382
+ position: relative;
2383
+ display: inline-flex;
2384
+ flex-shrink: 0;
2385
+ align-items: center;
2386
+ justify-content: center;
2387
+ transition-property: box-shadow, outline, outline-offset;
2388
+ transition-duration: 0.15s;
2389
+ transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
2390
+ outline: none;
2391
+ border-radius: 9999px;
2392
+ background: rgba(0, 0, 0, 0.4);
2393
+ background-clip: border-box;
2394
+ box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
2395
+ color: #fff;
2396
+ cursor: pointer;
2397
+ }
2398
+ .icon-action:disabled:not(.is-loading) {
2399
+ opacity: 0.6;
2400
+ pointer-events: none;
2401
+ }
2402
+ .icon-action:hover {
2403
+ background-color: rgba(0, 0, 0, 0.5);
2404
+ }
2405
+ .icon-action:focus {
2406
+ background-color: rgba(0, 0, 0, 0.5);
2407
+ box-shadow: 0 0 0 0.2rem rgba(0, 0, 0, 0.2);
2408
+ }
2409
+ .icon-action:active {
2410
+ background-color: rgba(0, 0, 0, 0.6);
2411
+ }
2412
+ .icon-action .icon {
2413
+ stroke-width: 2.5px;
2414
+ font-size: 0.875rem;
2415
+ }
2416
+ .icon-action.is-loading {
2417
+ color: transparent !important;
2418
+ pointer-events: none;
2419
+ }
2420
+ .icon-action.is-loading::after {
2421
+ width: 0.7em;
2422
+ height: 0.7em;
2423
+ content: "";
2424
+ position: absolute;
2425
+ top: calc(50% - 0.7em * 0.5);
2426
+ left: calc(50% - 0.7em * 0.5);
2427
+ animation: spin 0.6s infinite linear;
2428
+ border: 2px solid;
2429
+ border-radius: 9999px;
2430
+ border-color: #fff #fff transparent transparent;
2431
+ }
2432
+
2433
+ @keyframes spin {
2434
+ from {
2435
+ transform: rotate(0deg);
2436
+ }
2437
+ to {
2438
+ transform: rotate(360deg);
2439
+ }
2440
+ }
2441
+ .icon-action_invert {
2442
+ border-color: transparent;
2443
+ background-color: rgba(255, 255, 255, 0.5);
2444
+ box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
2445
+ color: #212121;
2446
+ }
2447
+ .icon-action_invert:hover {
2448
+ border-color: transparent;
2449
+ background-color: rgba(255, 255, 255, 0.6);
2450
+ }
2451
+ .icon-action_invert:focus {
2452
+ border-color: transparent;
2453
+ background-color: rgba(255, 255, 255, 0.6);
2454
+ box-shadow: 0 0 0 0.2rem rgba(255, 255, 255, 0.25);
2455
+ }
2456
+ .icon-action_invert:active {
2457
+ border-color: transparent;
2458
+ background-color: rgba(255, 255, 255, 0.7);
2459
+ }
2460
+ .icon-action_invert.is-loading::after {
2461
+ border-color: #212121 #212121 transparent transparent;
2462
+ }
2463
+
2464
+ .icon-action_state_info {
2465
+ border-color: transparent;
2466
+ background-color: #03a9f4;
2467
+ box-shadow: 0 0 0 0 rgba(3, 169, 244, 0);
2468
+ color: #fff;
2469
+ }
2470
+ .icon-action_state_info:hover {
2471
+ border-color: transparent;
2472
+ background-color: #0398dc;
2473
+ }
2474
+ .icon-action_state_info:focus {
2475
+ border-color: transparent;
2476
+ background-color: #0398dc;
2477
+ box-shadow: 0 0 0 0.2rem rgba(3, 169, 244, 0.5);
2478
+ }
2479
+ .icon-action_state_info:active {
2480
+ border-color: transparent;
2481
+ background-color: #0287c3;
2482
+ }
2483
+ .icon-action_state_info.is-loading::after {
2484
+ border-color: #fff #fff transparent transparent;
2485
+ }
2486
+
2487
+ .icon-action_state_success {
2488
+ border-color: transparent;
2489
+ background-color: #4caf50;
2490
+ box-shadow: 0 0 0 0 rgba(76, 175, 80, 0);
2491
+ color: #fff;
2492
+ }
2493
+ .icon-action_state_success:hover {
2494
+ border-color: transparent;
2495
+ background-color: #449e48;
2496
+ }
2497
+ .icon-action_state_success:focus {
2498
+ border-color: transparent;
2499
+ background-color: #449e48;
2500
+ box-shadow: 0 0 0 0.2rem rgba(76, 175, 80, 0.5);
2501
+ }
2502
+ .icon-action_state_success:active {
2503
+ border-color: transparent;
2504
+ background-color: #3d8c40;
2505
+ }
2506
+ .icon-action_state_success.is-loading::after {
2507
+ border-color: #fff #fff transparent transparent;
2508
+ }
2509
+
2510
+ .icon-action_state_caution {
2511
+ border-color: transparent;
2512
+ background-color: #ff9800;
2513
+ box-shadow: 0 0 0 0 rgba(255, 152, 0, 0);
2514
+ color: #fff;
2515
+ }
2516
+ .icon-action_state_caution:hover {
2517
+ border-color: transparent;
2518
+ background-color: #e68900;
2519
+ }
2520
+ .icon-action_state_caution:focus {
2521
+ border-color: transparent;
2522
+ background-color: #e68900;
2523
+ box-shadow: 0 0 0 0.2rem rgba(255, 152, 0, 0.5);
2524
+ }
2525
+ .icon-action_state_caution:active {
2526
+ border-color: transparent;
2527
+ background-color: #cc7a00;
2528
+ }
2529
+ .icon-action_state_caution.is-loading::after {
2530
+ border-color: #fff #fff transparent transparent;
2531
+ }
2532
+
2533
+ .icon-action_state_danger {
2534
+ border-color: transparent;
2535
+ background-color: #f44336;
2536
+ box-shadow: 0 0 0 0 rgba(244, 67, 54, 0);
2537
+ color: #fff;
2538
+ }
2539
+ .icon-action_state_danger:hover {
2540
+ border-color: transparent;
2541
+ background-color: #f2291a;
2542
+ }
2543
+ .icon-action_state_danger:focus {
2544
+ border-color: transparent;
2545
+ background-color: #f2291a;
2546
+ box-shadow: 0 0 0 0.2rem rgba(244, 67, 54, 0.5);
2547
+ }
2548
+ .icon-action_state_danger:active {
2549
+ border-color: transparent;
2550
+ background-color: #e21b0c;
2551
+ }
2552
+ .icon-action_state_danger.is-loading::after {
2553
+ border-color: #fff #fff transparent transparent;
2554
+ }
2555
+
2556
+ .icon-action_subtle {
2557
+ border-color: transparent;
2558
+ background-color: transparent;
2559
+ box-shadow: none;
2560
+ color: #212121;
2561
+ }
2562
+ .icon-action_subtle:hover {
2563
+ border-color: transparent;
2564
+ background-color: rgba(33, 33, 33, 0.1);
2565
+ }
2566
+ .icon-action_subtle:focus {
2567
+ border-color: transparent;
2568
+ background-color: rgba(33, 33, 33, 0.1);
2569
+ box-shadow: none;
2570
+ }
2571
+ .icon-action_subtle:active {
2572
+ border-color: transparent;
2573
+ background-color: rgba(33, 33, 33, 0.15);
2574
+ }
2575
+ .icon-action_subtle.is-loading::after {
2576
+ border-color: #212121 #212121 transparent transparent;
2577
+ }
2578
+ .icon-action_subtle.icon-action_invert {
2579
+ border-color: transparent;
2580
+ background-color: transparent;
2581
+ box-shadow: none;
2582
+ color: #fff;
2583
+ }
2584
+ .icon-action_subtle.icon-action_invert:hover {
2585
+ border-color: transparent;
2586
+ background-color: rgba(255, 255, 255, 0.1);
2587
+ }
2588
+ .icon-action_subtle.icon-action_invert:focus {
2589
+ border-color: transparent;
2590
+ background-color: rgba(255, 255, 255, 0.1);
2591
+ box-shadow: none;
2592
+ }
2593
+ .icon-action_subtle.icon-action_invert:active {
2594
+ border-color: transparent;
2595
+ background-color: rgba(255, 255, 255, 0.15);
2596
+ }
2597
+ .icon-action_subtle.icon-action_invert.is-loading::after {
2598
+ border-color: #fff #fff transparent transparent;
2599
+ }
2600
+
1874
2601
  .input {
1875
2602
  position: relative;
1876
2603
  display: block;
@@ -1882,34 +2609,34 @@ input::-moz-placeholder {
1882
2609
  transition-duration: 0.15s;
1883
2610
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
1884
2611
  outline: none;
1885
- border: 1px solid var(--vb-border-color-dark, rgba(0, 0, 0, 0.2));
2612
+ border: 1px solid rgba(0, 0, 0, 0.2);
1886
2613
  border-radius: 0.25rem;
1887
- background: white;
1888
- box-shadow: 0 0 0 0 rgba(var(--vb-primary-50, hsl(152, 60%, 50%)), 0), inset 0 0.1rem 0.2rem rgba(0, 0, 0, 0.1);
1889
- color: var(--vb-foreground, var(--vb-neutral-20, hsl(214, 20%, 20%)));
2614
+ background: #fff;
2615
+ box-shadow: 0 0 0 0 rgba(0, 188, 212, 0), inset 0 0.1rem 0.2rem rgba(0, 0, 0, 0.1);
2616
+ color: #212121;
1890
2617
  font-family: blinkmacsystemfont, -apple-system, system-ui, "Segoe UI", "Roboto", "Helvetica Neue", arial, sans-serif;
1891
2618
  font-size: 16px;
1892
- line-height: 1.625;
2619
+ line-height: 1.5;
1893
2620
  -moz-appearance: none;
1894
2621
  -webkit-appearance: none;
1895
2622
  appearance: none;
1896
2623
  }
1897
2624
  .input:hover {
1898
- border-color: var(--vb-border-color-darker, rgba(0, 0, 0, 0.3));
2625
+ border-color: rgba(0, 0, 0, 0.5);
1899
2626
  }
1900
2627
  .input:focus {
1901
- border-color: var(--vb-primary-50, hsl(152, 60%, 50%));
1902
- box-shadow: 0 0 0 0.2rem rgba(var(--vb-primary-50, hsl(152, 60%, 50%)), 0.5), inset 0 0 0 rgba(0, 0, 0, 0);
2628
+ border-color: #00bcd4;
2629
+ box-shadow: 0 0 0 0.2rem rgba(0, 188, 212, 0.5), inset 0 0 0 rgba(0, 0, 0, 0);
1903
2630
  }
1904
2631
  .input:disabled {
1905
- background-color: var(--vb-background-darker, var(--vb-neutral-95, hsl(214, 20%, 95%)));
2632
+ background-color: #f5f5f5;
1906
2633
  pointer-events: none;
1907
2634
  }
1908
2635
  .input:read-only {
1909
- background-color: var(--vb-background-darker, var(--vb-neutral-95, hsl(214, 20%, 95%)));
2636
+ background-color: #f5f5f5;
1910
2637
  }
1911
2638
  .input::placeholder {
1912
- color: var(--vb-foreground-lighter, var(--vb-neutral-60, hsl(214, 20%, 60%)));
2639
+ color: #9e9e9e;
1913
2640
  }
1914
2641
 
1915
2642
  .input_auto {
@@ -1927,34 +2654,73 @@ input::-moz-placeholder {
1927
2654
  height: 3.125rem;
1928
2655
  padding: calc(0.648rem - 1px);
1929
2656
  font-size: 1.125rem;
1930
- line-height: 1.875;
2657
+ line-height: 1.625;
2658
+ }
2659
+
2660
+ .input_state_info {
2661
+ border-color: #03a9f4;
2662
+ box-shadow: 0 0 0 0 rgba(3, 169, 244, 0), inset 0 0.1rem 0.2rem rgba(0, 0, 0, 0.1);
2663
+ color: #212121;
2664
+ }
2665
+ .input_state_info:hover {
2666
+ border-color: #03a9f4;
2667
+ }
2668
+ .input_state_info:focus {
2669
+ border-color: #03a9f4;
2670
+ box-shadow: 0 0 0 0.2rem rgba(3, 169, 244, 0.5), inset 0 0 0 rgba(0, 0, 0, 0);
2671
+ }
2672
+
2673
+ .input_state_success {
2674
+ border-color: #4caf50;
2675
+ box-shadow: 0 0 0 0 rgba(76, 175, 80, 0), inset 0 0.1rem 0.2rem rgba(0, 0, 0, 0.1);
2676
+ color: #212121;
2677
+ }
2678
+ .input_state_success:hover {
2679
+ border-color: #4caf50;
2680
+ }
2681
+ .input_state_success:focus {
2682
+ border-color: #4caf50;
2683
+ box-shadow: 0 0 0 0.2rem rgba(76, 175, 80, 0.5), inset 0 0 0 rgba(0, 0, 0, 0);
2684
+ }
2685
+
2686
+ .input_state_caution {
2687
+ border-color: #ff9800;
2688
+ box-shadow: 0 0 0 0 rgba(255, 152, 0, 0), inset 0 0.1rem 0.2rem rgba(0, 0, 0, 0.1);
2689
+ color: #212121;
2690
+ }
2691
+ .input_state_caution:hover {
2692
+ border-color: #ff9800;
2693
+ }
2694
+ .input_state_caution:focus {
2695
+ border-color: #ff9800;
2696
+ box-shadow: 0 0 0 0.2rem rgba(255, 152, 0, 0.5), inset 0 0 0 rgba(0, 0, 0, 0);
1931
2697
  }
1932
2698
 
1933
- .input_error {
1934
- border-color: hsl(0, 80%, 50%);
1935
- box-shadow: 0 0 0 0 rgba(230, 26, 26, 0), inset 0 0.1rem 0.2rem rgba(0, 0, 0, 0.1);
1936
- color: var(--vb-foreground, var(--vb-neutral-20, hsl(214, 20%, 20%)));
2699
+ .input_state_danger {
2700
+ border-color: #f44336;
2701
+ box-shadow: 0 0 0 0 rgba(244, 67, 54, 0), inset 0 0.1rem 0.2rem rgba(0, 0, 0, 0.1);
2702
+ color: #212121;
1937
2703
  }
1938
- .input_error:hover {
1939
- border-color: hsl(0, 80%, 50%);
2704
+ .input_state_danger:hover {
2705
+ border-color: #f44336;
1940
2706
  }
1941
- .input_error:focus {
1942
- border-color: hsl(0, 80%, 50%);
1943
- box-shadow: 0 0 0 0.2rem rgba(230, 26, 26, 0.5), inset 0 0 0 rgba(0, 0, 0, 0);
2707
+ .input_state_danger:focus {
2708
+ border-color: #f44336;
2709
+ box-shadow: 0 0 0 0.2rem rgba(244, 67, 54, 0.5), inset 0 0 0 rgba(0, 0, 0, 0);
1944
2710
  }
1945
2711
 
1946
2712
  .input_type_select {
1947
2713
  padding-right: 2em;
1948
- background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="22" height="12" fill="%23667C99"><polyline points="0 8 3.5 12 7 8"></polyline><polyline points="0 4 3.5 0 7 4"></polyline></svg>');
2714
+ background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="22" height="12" fill="%23212121"><polyline points="0 8 3.5 12 7 8"></polyline><polyline points="0 4 3.5 0 7 4"></polyline></svg>');
1949
2715
  background-repeat: no-repeat;
1950
2716
  background-position: 100% center;
1951
2717
  cursor: pointer;
1952
2718
  }
1953
2719
  .input_type_select:read-only {
1954
- background-color: white;
2720
+ background-color: #fff;
1955
2721
  }
1956
2722
  .input_type_select:disabled {
1957
- background-color: var(--vb-background-darker, var(--vb-neutral-95, hsl(214, 20%, 95%)));
2723
+ background-color: #f5f5f5;
1958
2724
  }
1959
2725
 
1960
2726
  .input_type_textarea {
@@ -1972,86 +2738,203 @@ input::-moz-placeholder {
1972
2738
  }
1973
2739
 
1974
2740
  .level {
1975
- gap: 0.5em;
2741
+ margin-top: -0.5em;
2742
+ margin-left: -0.5em;
1976
2743
  display: flex;
1977
2744
  flex-wrap: wrap;
1978
2745
  align-items: center;
1979
2746
  }
2747
+ .level > * {
2748
+ margin-top: 0.5em;
2749
+ margin-left: 0.5em;
2750
+ }
2751
+ .level + .level {
2752
+ margin-top: 0;
2753
+ }
1980
2754
  .level > * {
1981
2755
  flex: 0 0 auto;
1982
- max-width: 100%;
2756
+ max-width: calc(100% - 0.5em);
1983
2757
  }
1984
2758
 
1985
2759
  .level_gap_none {
1986
- gap: 0;
2760
+ margin-top: 0;
2761
+ margin-left: 0;
2762
+ }
2763
+ .level_gap_none > * {
2764
+ margin-top: 0;
2765
+ margin-left: 0;
2766
+ }
2767
+ .level_gap_none > * {
2768
+ max-width: 100%;
1987
2769
  }
1988
2770
 
1989
2771
  .level_gap-x_none {
1990
- column-gap: 0;
2772
+ margin-left: 0;
2773
+ }
2774
+ .level_gap-x_none > * {
2775
+ margin-left: 0;
2776
+ }
2777
+ .level_gap-x_none > * {
2778
+ max-width: 100%;
1991
2779
  }
1992
2780
 
1993
2781
  .level_gap-y_none {
1994
- row-gap: 0;
2782
+ margin-top: 0;
2783
+ }
2784
+ .level_gap-y_none > * {
2785
+ margin-top: 0;
1995
2786
  }
1996
2787
 
1997
2788
  .level_gap_xs {
1998
- gap: 1px;
2789
+ margin-top: -1px;
2790
+ margin-left: -1px;
2791
+ }
2792
+ .level_gap_xs > * {
2793
+ margin-top: 1px;
2794
+ margin-left: 1px;
2795
+ }
2796
+ .level_gap_xs > * {
2797
+ max-width: calc(100% - 1px);
1999
2798
  }
2000
2799
 
2001
2800
  .level_gap-x_xs {
2002
- column-gap: 1px;
2801
+ margin-left: -1px;
2802
+ }
2803
+ .level_gap-x_xs > * {
2804
+ margin-left: 1px;
2805
+ }
2806
+ .level_gap-x_xs > * {
2807
+ max-width: calc(100% - 1px);
2003
2808
  }
2004
2809
 
2005
2810
  .level_gap-y_xs {
2006
- row-gap: 1px;
2811
+ margin-top: -1px;
2812
+ }
2813
+ .level_gap-y_xs > * {
2814
+ margin-top: 1px;
2007
2815
  }
2008
2816
 
2009
2817
  .level_gap_sm {
2010
- gap: 0.25em;
2818
+ margin-top: -0.25em;
2819
+ margin-left: -0.25em;
2820
+ }
2821
+ .level_gap_sm > * {
2822
+ margin-top: 0.25em;
2823
+ margin-left: 0.25em;
2824
+ }
2825
+ .level_gap_sm > * {
2826
+ max-width: calc(100% - 0.25em);
2011
2827
  }
2012
2828
 
2013
2829
  .level_gap-x_sm {
2014
- column-gap: 0.25em;
2830
+ margin-left: -0.25em;
2831
+ }
2832
+ .level_gap-x_sm > * {
2833
+ margin-left: 0.25em;
2834
+ }
2835
+ .level_gap-x_sm > * {
2836
+ max-width: calc(100% - 0.25em);
2015
2837
  }
2016
2838
 
2017
2839
  .level_gap-y_sm {
2018
- row-gap: 0.25em;
2840
+ margin-top: -0.25em;
2841
+ }
2842
+ .level_gap-y_sm > * {
2843
+ margin-top: 0.25em;
2019
2844
  }
2020
2845
 
2021
2846
  .level_gap_md {
2022
- gap: 0.5em;
2847
+ margin-top: -0.5em;
2848
+ margin-left: -0.5em;
2849
+ }
2850
+ .level_gap_md > * {
2851
+ margin-top: 0.5em;
2852
+ margin-left: 0.5em;
2853
+ }
2854
+ .level_gap_md > * {
2855
+ max-width: calc(100% - 0.5em);
2023
2856
  }
2024
2857
 
2025
2858
  .level_gap-x_md {
2026
- column-gap: 0.5em;
2859
+ margin-left: -0.5em;
2860
+ }
2861
+ .level_gap-x_md > * {
2862
+ margin-left: 0.5em;
2863
+ }
2864
+ .level_gap-x_md > * {
2865
+ max-width: calc(100% - 0.5em);
2027
2866
  }
2028
2867
 
2029
2868
  .level_gap-y_md {
2030
- row-gap: 0.5em;
2869
+ margin-top: -0.5em;
2870
+ }
2871
+ .level_gap-y_md > * {
2872
+ margin-top: 0.5em;
2031
2873
  }
2032
2874
 
2033
2875
  .level_gap_lg {
2034
- gap: 1em;
2876
+ margin-top: -1em;
2877
+ margin-left: -1em;
2878
+ }
2879
+ .level_gap_lg > * {
2880
+ margin-top: 1em;
2881
+ margin-left: 1em;
2882
+ }
2883
+ .level_gap_lg > * {
2884
+ max-width: calc(100% - 1em);
2035
2885
  }
2036
2886
 
2037
2887
  .level_gap-x_lg {
2038
- column-gap: 1em;
2888
+ margin-left: -1em;
2889
+ }
2890
+ .level_gap-x_lg > * {
2891
+ margin-left: 1em;
2892
+ }
2893
+ .level_gap-x_lg > * {
2894
+ max-width: calc(100% - 1em);
2039
2895
  }
2040
2896
 
2041
2897
  .level_gap-y_lg {
2042
- row-gap: 1em;
2898
+ margin-top: -1em;
2899
+ }
2900
+ .level_gap-y_lg > * {
2901
+ margin-top: 1em;
2043
2902
  }
2044
2903
 
2045
2904
  .level_gap_xl {
2046
- gap: 1.5em;
2905
+ margin-top: -1.5em;
2906
+ margin-left: -1.5em;
2907
+ }
2908
+ .level_gap_xl > * {
2909
+ margin-top: 1.5em;
2910
+ margin-left: 1.5em;
2911
+ }
2912
+ .level_gap_xl > * {
2913
+ max-width: calc(100% - 1.5em);
2047
2914
  }
2048
2915
 
2049
2916
  .level_gap-x_xl {
2050
- column-gap: 1.5em;
2917
+ margin-left: -1.5em;
2918
+ }
2919
+ .level_gap-x_xl > * {
2920
+ margin-left: 1.5em;
2921
+ }
2922
+ .level_gap-x_xl > * {
2923
+ max-width: calc(100% - 1.5em);
2051
2924
  }
2052
2925
 
2053
2926
  .level_gap-y_xl {
2054
- row-gap: 1.5em;
2927
+ margin-top: -1.5em;
2928
+ }
2929
+ .level_gap-y_xl > * {
2930
+ margin-top: 1.5em;
2931
+ }
2932
+
2933
+ .level_nowrap {
2934
+ flex-wrap: nowrap;
2935
+ }
2936
+ .level_nowrap > * {
2937
+ flex-shrink: 1;
2055
2938
  }
2056
2939
 
2057
2940
  .media {
@@ -2071,7 +2954,7 @@ input::-moz-placeholder {
2071
2954
  flex: 0 0 auto;
2072
2955
  align-items: center;
2073
2956
  max-width: 30%;
2074
- min-height: 1.625em;
2957
+ min-height: 1.5em;
2075
2958
  }
2076
2959
 
2077
2960
  .media_gap_none > * + * {
@@ -2409,7 +3292,7 @@ input::-moz-placeholder {
2409
3292
  width: auto;
2410
3293
  height: 1px;
2411
3294
  margin: 0.5em 0;
2412
- background: var(--vb-border-color, rgba(0, 0, 0, 0.1));
3295
+ background: rgba(0, 0, 0, 0.1);
2413
3296
  }
2414
3297
  .menu__sep:first-child {
2415
3298
  margin-top: 0;
@@ -2429,7 +3312,7 @@ input::-moz-placeholder {
2429
3312
  padding: 0.5em 1em;
2430
3313
  border-radius: 0.25rem;
2431
3314
  background: none;
2432
- color: var(--vb-foreground, var(--vb-neutral-20, hsl(214, 20%, 20%)));
3315
+ color: #212121;
2433
3316
  white-space: normal;
2434
3317
  }
2435
3318
  .menu__action > * {
@@ -2442,36 +3325,32 @@ input::-moz-placeholder {
2442
3325
  padding: 0.5em;
2443
3326
  }
2444
3327
  .menu__action:hover {
2445
- background: var(--vb-background-hover, rgba(0, 0, 0, 0.05));
3328
+ background: rgba(0, 0, 0, 0.05);
2446
3329
  }
2447
3330
  .menu__action:focus {
2448
3331
  outline: none;
2449
- background: var(--vb-background-focus, rgba(0, 0, 0, 0.05));
2450
- }
2451
- .menu__action:focus-visible {
2452
- z-index: 1;
2453
- outline: 2px solid var(--vb-focus-visible, var(--vb-primary-50, hsl(152, 60%, 50%)));
3332
+ background: rgba(0, 0, 0, 0.05);
2454
3333
  }
2455
3334
  .menu__action:active {
2456
- background: var(--vb-background-active, rgba(0, 0, 0, 0.1));
3335
+ background: rgba(0, 0, 0, 0.1);
2457
3336
  }
2458
3337
  .menu__action.is-active, .menu__action.is-active[disabled] {
2459
3338
  background: none;
2460
- color: var(--vb-primary-50, hsl(152, 60%, 50%));
3339
+ color: #00bcd4;
2461
3340
  cursor: pointer;
2462
3341
  }
2463
3342
  .menu__action.is-active:hover, .menu__action.is-active:focus, .menu__action.is-active:active, .menu__action.is-active[disabled]:hover, .menu__action.is-active[disabled]:focus, .menu__action.is-active[disabled]:active {
2464
3343
  background: none;
2465
- color: var(--vb-primary-50, hsl(152, 60%, 50%));
3344
+ color: #00bcd4;
2466
3345
  }
2467
3346
  .menu__action.is-disabled, .menu__action[disabled] {
2468
3347
  background: none;
2469
- color: var(--vb-foreground-lighter, var(--vb-neutral-60, hsl(214, 20%, 60%)));
3348
+ color: #9e9e9e;
2470
3349
  cursor: default;
2471
3350
  }
2472
3351
  .menu__action.is-disabled:hover, .menu__action.is-disabled:focus, .menu__action.is-disabled:active, .menu__action[disabled]:hover, .menu__action[disabled]:focus, .menu__action[disabled]:active {
2473
3352
  background: none;
2474
- color: var(--vb-foreground-lighter, var(--vb-neutral-60, hsl(214, 20%, 60%)));
3353
+ color: #9e9e9e;
2475
3354
  }
2476
3355
 
2477
3356
  .menu__text {
@@ -2674,6 +3553,38 @@ input::-moz-placeholder {
2674
3553
  white-space: nowrap;
2675
3554
  }
2676
3555
  }
3556
+ .menu_invert .menu__sep {
3557
+ background: rgba(255, 255, 255, 0.1);
3558
+ }
3559
+ .menu_invert .menu__action {
3560
+ color: #fff;
3561
+ }
3562
+ .menu_invert .menu__action:hover {
3563
+ background: rgba(255, 255, 255, 0.05);
3564
+ }
3565
+ .menu_invert .menu__action:focus {
3566
+ background: rgba(255, 255, 255, 0.05);
3567
+ }
3568
+ .menu_invert .menu__action:active {
3569
+ background: rgba(255, 255, 255, 0.1);
3570
+ }
3571
+ .menu_invert .menu__action.is-active, .menu_invert .menu__action.is-active[disabled] {
3572
+ background: none;
3573
+ color: #00bcd4;
3574
+ }
3575
+ .menu_invert .menu__action.is-active:hover, .menu_invert .menu__action.is-active:focus, .menu_invert .menu__action.is-active:active, .menu_invert .menu__action.is-active[disabled]:hover, .menu_invert .menu__action.is-active[disabled]:focus, .menu_invert .menu__action.is-active[disabled]:active {
3576
+ background: none;
3577
+ color: #00bcd4;
3578
+ }
3579
+ .menu_invert .menu__action.is-disabled, .menu_invert .menu__action[disabled] {
3580
+ background: none;
3581
+ color: rgba(255, 255, 255, 0.5);
3582
+ }
3583
+ .menu_invert .menu__action.is-disabled:hover, .menu_invert .menu__action.is-disabled:focus, .menu_invert .menu__action.is-disabled:active, .menu_invert .menu__action[disabled]:hover, .menu_invert .menu__action[disabled]:focus, .menu_invert .menu__action[disabled]:active {
3584
+ background: none;
3585
+ color: rgba(255, 255, 255, 0.5);
3586
+ }
3587
+
2677
3588
  .menu_size_sm {
2678
3589
  font-size: 0.875rem;
2679
3590
  line-height: 1.375;
@@ -2689,7 +3600,7 @@ input::-moz-placeholder {
2689
3600
 
2690
3601
  .menu_size_lg {
2691
3602
  font-size: 1.125rem;
2692
- line-height: 1.875;
3603
+ line-height: 1.625;
2693
3604
  }
2694
3605
  .menu_size_lg .menu__action {
2695
3606
  min-width: 3.125rem;
@@ -2700,11 +3611,6 @@ input::-moz-placeholder {
2700
3611
  padding: 0.648rem;
2701
3612
  }
2702
3613
 
2703
- :root {
2704
- --vb-modal-transition-duration: var(--vb-transition-duration, 0.3s);
2705
- --vb-modal-transition-timing-function: var(--vb-transition-timing-function, cubic-bezier(0.4, 0, 0.2, 1));
2706
- }
2707
-
2708
3614
  .modal {
2709
3615
  position: fixed;
2710
3616
  z-index: 1000;
@@ -2718,15 +3624,7 @@ input::-moz-placeholder {
2718
3624
  width: 0;
2719
3625
  height: 0;
2720
3626
  overflow: hidden;
2721
- }
2722
- .modal::before {
2723
- content: "";
2724
- position: absolute;
2725
- inset: 0;
2726
- width: 100%;
2727
- height: 100%;
2728
- background-color: var(--vb-neutral-10, hsl(214, 20%, 10%));
2729
- opacity: 0;
3627
+ background-color: rgba(66, 66, 66, 0);
2730
3628
  }
2731
3629
 
2732
3630
  .modal__dialog {
@@ -2735,17 +3633,17 @@ input::-moz-placeholder {
2735
3633
  overflow: auto;
2736
3634
  transform: translateY(-5em);
2737
3635
  transition-property: outline;
2738
- transition-duration: var(--vb-modal-transition-duration);
2739
- transition-timing-function: var(--vb-modal-transition-timing-function);
2740
- outline: 0 solid transparent;
2741
- box-shadow: 0 12px 24px var(--vb-shadow-color, hsl(var(--vb-neutral-hs, 214deg, 20%), 20%, 20%));
3636
+ transition-duration: 0.3s;
3637
+ transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
3638
+ outline: 0 solid rgba(0, 188, 212, 0);
3639
+ box-shadow: 0 0 2px 1px rgba(33, 33, 33, 0.05), 0 12px 24px rgba(33, 33, 33, 0.2);
2742
3640
  opacity: 0;
2743
3641
  }
2744
3642
  .modal__dialog:focus {
2745
- outline: 4px solid var(--vb-primary-50, hsl(152, 60%, 50%));
3643
+ outline: 4px solid #00bcd4;
2746
3644
  }
2747
3645
  .modal__dialog[role=alertdialog]:focus {
2748
- outline: 4px solid var(--vb-important-50, hsl(0, 80%, 50%));
3646
+ outline: 4px solid #f44336;
2749
3647
  }
2750
3648
 
2751
3649
  .modal.is-closed {
@@ -2761,20 +3659,20 @@ input::-moz-placeholder {
2761
3659
  padding: 1em;
2762
3660
  }
2763
3661
 
2764
- .modal.is-opening::before,
2765
- .modal.is-closing::before {
2766
- transition: opacity var(--vb-modal-transition-duration) var(--vb-modal-transition-timing-function);
3662
+ .modal.is-opening,
3663
+ .modal.is-closing {
3664
+ transition: background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
2767
3665
  }
2768
3666
  .modal.is-opening .modal__dialog,
2769
3667
  .modal.is-closing .modal__dialog {
2770
3668
  transition-property: opacity, transform;
2771
- transition-duration: var(--vb-modal-transition-duration);
2772
- transition-timing-function: var(--vb-modal-transition-timing-function);
3669
+ transition-duration: 0.3s;
3670
+ transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
2773
3671
  }
2774
3672
 
2775
- .modal.is-opening::before,
2776
- .modal.is-opened::before {
2777
- opacity: 0.8;
3673
+ .modal.is-opening,
3674
+ .modal.is-opened {
3675
+ background-color: rgba(66, 66, 66, 0.8);
2778
3676
  }
2779
3677
  .modal.is-opening .modal__dialog,
2780
3678
  .modal.is-opened .modal__dialog {
@@ -2795,7 +3693,7 @@ input::-moz-placeholder {
2795
3693
  transform: scale(1);
2796
3694
  }
2797
3695
  .modal_full.is-closing .modal__dialog {
2798
- transform: scale(0.75);
3696
+ transform: scale(1);
2799
3697
  }
2800
3698
 
2801
3699
  .modal_pos_top {
@@ -2863,11 +3761,8 @@ input::-moz-placeholder {
2863
3761
 
2864
3762
  .notice {
2865
3763
  padding: 1em;
2866
- border: var(--vb-notice-border);
2867
3764
  border-radius: 0.25rem;
2868
- background: var(--vb-notice-background, var(--vb-background-dark, var(--vb-neutral-98, hsl(214, 20%, 98%))));
2869
- box-shadow: var(--vb-notice-shadow);
2870
- color: var(--vb-notice-foreground, var(--vb-foreground, var(--vb-neutral-20, hsl(214, 20%, 20%))));
3765
+ background: #f5f5f5;
2871
3766
  }
2872
3767
  .notice > * + * {
2873
3768
  margin-top: 0.5em;
@@ -2876,36 +3771,31 @@ input::-moz-placeholder {
2876
3771
  .notice__title {
2877
3772
  font-size: 1.125rem;
2878
3773
  font-weight: 600;
2879
- line-height: 1.875;
3774
+ line-height: 1.625;
2880
3775
  }
2881
3776
 
2882
- .notice_theme_primary {
2883
- background-color: var(--vb-primary-90, hsl(152, 60%, 90%));
2884
- color: var(--vb-primary-30, hsl(152, 60%, 30%));
3777
+ .notice_state_info {
3778
+ background-color: #e1f5fe;
3779
+ color: #01579b;
2885
3780
  }
2886
3781
 
2887
- .notice_theme_secondary {
2888
- background-color: var(--vb-secondary-90, hsl(214, 50%, 90%));
2889
- color: var(--vb-secondary-30, hsl(214, 50%, 30%));
3782
+ .notice_state_success {
3783
+ background-color: #e8f5e9;
3784
+ color: #1b5e20;
2890
3785
  }
2891
3786
 
2892
- .notice_theme_neutral {
2893
- background-color: var(--vb-neutral-90, hsl(214, 20%, 90%));
2894
- color: var(--vb-neutral-30, hsl(214, 20%, 30%));
3787
+ .notice_state_caution {
3788
+ background-color: #fff3e0;
3789
+ color: #bf360c;
2895
3790
  }
2896
3791
 
2897
- .notice_theme_important {
2898
- background-color: var(--vb-important-90, hsl(0, 80%, 90%));
2899
- color: var(--vb-important-30, hsl(0, 80%, 30%));
3792
+ .notice_state_danger {
3793
+ background-color: #ffebee;
3794
+ color: #b71c1c;
2900
3795
  }
2901
3796
 
2902
- :root, .vb-theme-root {
2903
- --vb-notice-background: var(--vb-background-dark, var(--vb-neutral-98, hsl(214, 20%, 98%)));
2904
- --vb-notice-foreground: var(--vb-foreground, var(--vb-neutral-20, hsl(214, 20%, 20%)));
2905
- }
2906
- .vb-theme-light {
2907
- --vb-notice-background: var(--vb-background-dark, var(--vb-neutral-98, hsl(214, 20%, 98%)));
2908
- --vb-notice-foreground: var(--vb-foreground, var(--vb-neutral-20, hsl(214, 20%, 20%)));
3797
+ :root {
3798
+ --vrembem-variable-prefix: vb-;
2909
3799
  }
2910
3800
 
2911
3801
  :root {
@@ -2926,16 +3816,18 @@ input::-moz-placeholder {
2926
3816
  margin: calc(var(--vb-popover-offset) * 1px) 0 0;
2927
3817
  padding: 0.5em;
2928
3818
  border-radius: 0.25rem;
2929
- background: var(--vb-background, var(--vb-neutral-100, hsl(214, 20%, 100%)));
3819
+ background: #fff;
2930
3820
  background-clip: padding-box;
2931
- box-shadow: 0 2px 6px var(--vb-shadow-color, hsl(var(--vb-neutral-hs, 214deg, 20%), 20%, 20%));
2932
- color: var(--vb-foreground, var(--vb-neutral-20, hsl(214, 20%, 20%)));
3821
+ box-shadow: 0 0 2px 1px rgba(33, 33, 33, 0.05), 0 2px 6px rgba(33, 33, 33, 0.2);
2933
3822
  font-size: 0.875rem;
2934
3823
  }
2935
3824
  .popover::before {
2936
3825
  content: "";
2937
3826
  position: absolute;
2938
- inset: auto 0 100%;
3827
+ top: auto;
3828
+ right: 0;
3829
+ bottom: 100%;
3830
+ left: 0;
2939
3831
  width: 100%;
2940
3832
  height: calc((var(--vb-popover-offset) + 1) * 1px);
2941
3833
  }
@@ -2951,7 +3843,10 @@ input::-moz-placeholder {
2951
3843
  margin: 0 0 calc(var(--vb-popover-offset) * 1px) 0;
2952
3844
  }
2953
3845
  .popover[data-popper-placement^=top]::before {
2954
- inset: 100% 0 auto;
3846
+ top: 100%;
3847
+ right: 0;
3848
+ bottom: auto;
3849
+ left: 0;
2955
3850
  width: 100%;
2956
3851
  height: calc((var(--vb-popover-offset) + 1) * 1px);
2957
3852
  }
@@ -2960,7 +3855,10 @@ input::-moz-placeholder {
2960
3855
  margin: calc(var(--vb-popover-offset) * 1px) 0 0 0;
2961
3856
  }
2962
3857
  .popover[data-popper-placement^=bottom]::before {
2963
- inset: auto 0 100%;
3858
+ top: auto;
3859
+ right: 0;
3860
+ bottom: 100%;
3861
+ left: 0;
2964
3862
  width: 100%;
2965
3863
  height: calc((var(--vb-popover-offset) + 1) * 1px);
2966
3864
  }
@@ -2969,7 +3867,10 @@ input::-moz-placeholder {
2969
3867
  margin: 0 calc(var(--vb-popover-offset) * 1px) 0 0;
2970
3868
  }
2971
3869
  .popover[data-popper-placement^=left]::before {
2972
- inset: 0 auto 0 100%;
3870
+ top: 0;
3871
+ right: auto;
3872
+ bottom: 0;
3873
+ left: 100%;
2973
3874
  width: calc((var(--vb-popover-offset) + 1) * 1px);
2974
3875
  height: 100%;
2975
3876
  }
@@ -2978,7 +3879,10 @@ input::-moz-placeholder {
2978
3879
  margin: 0 0 0 calc(var(--vb-popover-offset) * 1px);
2979
3880
  }
2980
3881
  .popover[data-popper-placement^=right]::before {
2981
- inset: 0 100% 0 auto;
3882
+ top: 0;
3883
+ right: 100%;
3884
+ bottom: 0;
3885
+ left: auto;
2982
3886
  width: calc((var(--vb-popover-offset) + 1) * 1px);
2983
3887
  height: 100%;
2984
3888
  }
@@ -2997,7 +3901,7 @@ input::-moz-placeholder {
2997
3901
  content: "";
2998
3902
  visibility: visible;
2999
3903
  transform: rotate(45deg);
3000
- border: var(--vb-popover-arrow-border, 1px solid var(--vb-border-color, rgba(0, 0, 0, 0.1)));
3904
+ border: var(--vb-popover-arrow-border, 1px solid rgba(0, 0, 0, 0.05));
3001
3905
  border-right-color: transparent;
3002
3906
  border-bottom-color: transparent;
3003
3907
  background-clip: padding-box;
@@ -3051,8 +3955,9 @@ input::-moz-placeholder {
3051
3955
  width: auto;
3052
3956
  max-width: 16rem;
3053
3957
  padding: 0.5rem 0.75rem;
3054
- background: var(--vb-foreground, var(--vb-neutral-20, hsl(214, 20%, 20%)));
3055
- color: var(--vb-background, var(--vb-neutral-100, hsl(214, 20%, 100%)));
3958
+ background: #212121;
3959
+ color: #fff;
3960
+ font-size: 0.75em;
3056
3961
  }
3057
3962
 
3058
3963
  .radio {
@@ -3082,9 +3987,9 @@ input::-moz-placeholder {
3082
3987
  display: flex;
3083
3988
  align-items: center;
3084
3989
  justify-content: center;
3085
- border: 2px solid var(--vb-neutral-50, hsl(214, 20%, 50%));
3990
+ border: 2px solid #bdbdbd;
3086
3991
  border-radius: 20px;
3087
- background-color: white;
3992
+ background-color: #fff;
3088
3993
  color: transparent;
3089
3994
  }
3090
3995
 
@@ -3092,7 +3997,7 @@ input::-moz-placeholder {
3092
3997
  width: 0;
3093
3998
  height: 0;
3094
3999
  border-radius: 8px;
3095
- background-color: white;
4000
+ background-color: #fff;
3096
4001
  opacity: 0;
3097
4002
  }
3098
4003
 
@@ -3107,26 +4012,26 @@ input::-moz-placeholder {
3107
4012
  cursor: pointer;
3108
4013
  }
3109
4014
  .radio__native:hover + .radio__background {
3110
- background-color: rgba(var(--vb-primary-50, hsl(152, 60%, 50%)), 0.1);
4015
+ background-color: rgba(0, 188, 212, 0.1);
3111
4016
  }
3112
4017
  .radio__native:hover + .radio__background .radio__circle {
3113
- border-color: var(--vb-primary-50, hsl(152, 60%, 50%));
4018
+ border-color: #00bcd4;
3114
4019
  }
3115
4020
  .radio__native:focus + .radio__background {
3116
- background-color: rgba(var(--vb-primary-50, hsl(152, 60%, 50%)), 0.1);
4021
+ background-color: rgba(0, 188, 212, 0.1);
3117
4022
  }
3118
4023
  .radio__native:focus + .radio__background .radio__circle {
3119
- border-color: var(--vb-primary-50, hsl(152, 60%, 50%));
4024
+ border-color: #00bcd4;
3120
4025
  }
3121
4026
  .radio__native:focus-visible + .radio__background, .radio__native:active + .radio__background {
3122
- background-color: rgba(var(--vb-primary-50, hsl(152, 60%, 50%)), 0.2);
4027
+ background-color: rgba(0, 188, 212, 0.2);
3123
4028
  }
3124
4029
  .radio__native:focus-visible + .radio__background .radio__circle, .radio__native:active + .radio__background .radio__circle {
3125
- border-color: var(--vb-primary-50, hsl(152, 60%, 50%));
4030
+ border-color: #00bcd4;
3126
4031
  }
3127
4032
  .radio__native:checked + .radio__background .radio__circle {
3128
- border-color: var(--vb-primary-50, hsl(152, 60%, 50%));
3129
- background-color: var(--vb-primary-50, hsl(152, 60%, 50%));
4033
+ border-color: #00bcd4;
4034
+ background-color: #00bcd4;
3130
4035
  }
3131
4036
  .radio__native:checked + .radio__background .radio__dot {
3132
4037
  width: 8px;
@@ -3196,7 +4101,10 @@ input::-moz-placeholder {
3196
4101
  width: 100%;
3197
4102
  height: 100%;
3198
4103
  position: absolute;
3199
- inset: 0;
4104
+ top: 0;
4105
+ right: 0;
4106
+ bottom: 0;
4107
+ left: 0;
3200
4108
  }
3201
4109
 
3202
4110
  .section__background {
@@ -3206,7 +4114,7 @@ input::-moz-placeholder {
3206
4114
 
3207
4115
  .section__screen {
3208
4116
  z-index: 2;
3209
- background: var(--vb-neutral-10, hsl(214, 20%, 10%));
4117
+ background: #424242;
3210
4118
  opacity: 0.7;
3211
4119
  }
3212
4120
 
@@ -3317,9 +4225,9 @@ input::-moz-placeholder {
3317
4225
  height: 20px;
3318
4226
  position: relative;
3319
4227
  display: block;
3320
- border: 2px solid var(--vb-neutral-50, hsl(214, 20%, 50%));
4228
+ border: 2px solid #bdbdbd;
3321
4229
  border-radius: 9999px;
3322
- background-color: var(--vb-neutral-80, hsl(214, 20%, 80%));
4230
+ background-color: #eeeeee;
3323
4231
  }
3324
4232
 
3325
4233
  .switch__thumb {
@@ -3332,8 +4240,8 @@ input::-moz-placeholder {
3332
4240
  display: block;
3333
4241
  transition: left 0.15s cubic-bezier(0.4, 0, 0.2, 1);
3334
4242
  border-radius: 9999px;
3335
- background-color: white;
3336
- box-shadow: 0 0 0 2px var(--vb-neutral-50, hsl(214, 20%, 50%));
4243
+ background-color: #fff;
4244
+ box-shadow: 0 0 0 2px #bdbdbd;
3337
4245
  }
3338
4246
 
3339
4247
  .switch__native {
@@ -3347,33 +4255,33 @@ input::-moz-placeholder {
3347
4255
  cursor: pointer;
3348
4256
  }
3349
4257
  .switch__native:hover + .switch__background::after {
3350
- background-color: rgba(var(--vb-primary-50, hsl(152, 60%, 50%)), 0.1);
4258
+ background-color: rgba(0, 188, 212, 0.1);
3351
4259
  }
3352
4260
  .switch__native:hover + .switch__background .switch__thumb {
3353
- box-shadow: 0 0 0 2px var(--vb-primary-50, hsl(152, 60%, 50%));
4261
+ box-shadow: 0 0 0 2px #00bcd4;
3354
4262
  }
3355
4263
  .switch__native:focus + .switch__background::after {
3356
- background-color: rgba(var(--vb-primary-50, hsl(152, 60%, 50%)), 0.1);
4264
+ background-color: rgba(0, 188, 212, 0.1);
3357
4265
  }
3358
4266
  .switch__native:focus + .switch__background .switch__thumb {
3359
- box-shadow: 0 0 0 2px var(--vb-primary-50, hsl(152, 60%, 50%));
4267
+ box-shadow: 0 0 0 2px #00bcd4;
3360
4268
  }
3361
4269
  .switch__native:focus-visible + .switch__background::after, .switch__native:active + .switch__background::after {
3362
- background-color: rgba(var(--vb-primary-50, hsl(152, 60%, 50%)), 0.2);
4270
+ background-color: rgba(0, 188, 212, 0.2);
3363
4271
  }
3364
4272
  .switch__native:focus-visible + .switch__background .switch__thumb, .switch__native:active + .switch__background .switch__thumb {
3365
- box-shadow: 0 0 0 2px var(--vb-primary-50, hsl(152, 60%, 50%));
4273
+ box-shadow: 0 0 0 2px #00bcd4;
3366
4274
  }
3367
4275
  .switch__native:checked + .switch__background::after {
3368
4276
  left: calc(100% - 1.875rem);
3369
4277
  }
3370
4278
  .switch__native:checked + .switch__background .switch__track {
3371
- border-color: var(--vb-primary-50, hsl(152, 60%, 50%));
3372
- background-color: var(--vb-primary-50, hsl(152, 60%, 50%));
4279
+ border-color: #00bcd4;
4280
+ background-color: #00bcd4;
3373
4281
  }
3374
4282
  .switch__native:checked + .switch__background .switch__thumb {
3375
4283
  left: calc(100% - 16px);
3376
- box-shadow: 0 0 0 2px var(--vb-primary-50, hsl(152, 60%, 50%));
4284
+ box-shadow: 0 0 0 2px #00bcd4;
3377
4285
  }
3378
4286
 
3379
4287
  .switch_size_sm {
@@ -3397,23 +4305,23 @@ input::-moz-placeholder {
3397
4305
  .switch_size_sm .switch__thumb {
3398
4306
  width: 12px;
3399
4307
  height: 12px;
3400
- box-shadow: 0 0 0 2px var(--vb-neutral-50, hsl(214, 20%, 50%));
4308
+ box-shadow: 0 0 0 2px #bdbdbd;
3401
4309
  }
3402
4310
  .switch_size_sm .switch__native:hover + .switch__background .switch__thumb {
3403
- box-shadow: 0 0 0 2px var(--vb-primary-50, hsl(152, 60%, 50%));
4311
+ box-shadow: 0 0 0 2px #00bcd4;
3404
4312
  }
3405
4313
  .switch_size_sm .switch__native:focus + .switch__background .switch__thumb {
3406
- box-shadow: 0 0 0 2px var(--vb-primary-50, hsl(152, 60%, 50%));
4314
+ box-shadow: 0 0 0 2px #00bcd4;
3407
4315
  }
3408
4316
  .switch_size_sm .switch__native:active + .switch__background .switch__thumb {
3409
- box-shadow: 0 0 0 2px var(--vb-primary-50, hsl(152, 60%, 50%));
4317
+ box-shadow: 0 0 0 2px #00bcd4;
3410
4318
  }
3411
4319
  .switch_size_sm .switch__native:checked + .switch__background::after {
3412
4320
  left: calc(100% - 1.40625rem);
3413
4321
  }
3414
4322
  .switch_size_sm .switch__native:checked + .switch__background .switch__thumb {
3415
4323
  left: calc(100% - 12px);
3416
- box-shadow: 0 0 0 2px var(--vb-primary-50, hsl(152, 60%, 50%));
4324
+ box-shadow: 0 0 0 2px #00bcd4;
3417
4325
  }
3418
4326
 
3419
4327
  .switch_size_lg {
@@ -3437,23 +4345,23 @@ input::-moz-placeholder {
3437
4345
  .switch_size_lg .switch__thumb {
3438
4346
  width: 21px;
3439
4347
  height: 21px;
3440
- box-shadow: 0 0 0 2.5px var(--vb-neutral-50, hsl(214, 20%, 50%));
4348
+ box-shadow: 0 0 0 2.5px #bdbdbd;
3441
4349
  }
3442
4350
  .switch_size_lg .switch__native:hover + .switch__background .switch__thumb {
3443
- box-shadow: 0 0 0 2.5px var(--vb-primary-50, hsl(152, 60%, 50%));
4351
+ box-shadow: 0 0 0 2.5px #00bcd4;
3444
4352
  }
3445
4353
  .switch_size_lg .switch__native:focus + .switch__background .switch__thumb {
3446
- box-shadow: 0 0 0 2.5px var(--vb-primary-50, hsl(152, 60%, 50%));
4354
+ box-shadow: 0 0 0 2.5px #00bcd4;
3447
4355
  }
3448
4356
  .switch_size_lg .switch__native:active + .switch__background .switch__thumb {
3449
- box-shadow: 0 0 0 2.5px var(--vb-primary-50, hsl(152, 60%, 50%));
4357
+ box-shadow: 0 0 0 2.5px #00bcd4;
3450
4358
  }
3451
4359
  .switch_size_lg .switch__native:checked + .switch__background::after {
3452
4360
  left: calc(100% - 2.34375rem);
3453
4361
  }
3454
4362
  .switch_size_lg .switch__native:checked + .switch__background .switch__thumb {
3455
4363
  left: calc(100% - 21px);
3456
- box-shadow: 0 0 0 2.5px var(--vb-primary-50, hsl(152, 60%, 50%));
4364
+ box-shadow: 0 0 0 2.5px #00bcd4;
3457
4365
  }
3458
4366
 
3459
4367
  .table {
@@ -3491,7 +4399,7 @@ input::-moz-placeholder {
3491
4399
  .table_hover tbody tr:hover,
3492
4400
  .table_hover tbody tr:focus {
3493
4401
  z-index: 2;
3494
- background-color: hsla(53, 100%, 50%, 0.15);
4402
+ background-color: rgba(255, 235, 59, 0.3);
3495
4403
  }
3496
4404
 
3497
4405
  .table_responsive thead,
@@ -3538,20 +4446,20 @@ input::-moz-placeholder {
3538
4446
  padding: 0.648rem 1.5rem;
3539
4447
  }
3540
4448
  .table_responsive.table_style_bordered {
3541
- border: 1px solid var(--vb-border-color, rgba(0, 0, 0, 0.1));
4449
+ border: 1px solid rgba(0, 0, 0, 0.1);
3542
4450
  }
3543
4451
  .table_responsive.table_style_bordered td {
3544
4452
  border: none;
3545
4453
  }
3546
4454
  .table_responsive.table_style_bordered td + td,
3547
4455
  .table_responsive.table_style_bordered th + td {
3548
- border-top: 1px dotted var(--vb-border-color, rgba(0, 0, 0, 0.1));
4456
+ border-top: 1px dotted rgba(0, 0, 0, 0.1);
3549
4457
  }
3550
4458
  .table_responsive.table_style_bordered [data-mobile-label]::before {
3551
- border-right: 1px solid var(--vb-border-color, rgba(0, 0, 0, 0.1));
4459
+ border-right: 1px solid rgba(0, 0, 0, 0.1);
3552
4460
  }
3553
4461
  .table_responsive.table_style_bordered tr + tr {
3554
- border-top: 1px solid var(--vb-border-color, rgba(0, 0, 0, 0.1));
4462
+ border-top: 1px solid rgba(0, 0, 0, 0.1);
3555
4463
  }
3556
4464
 
3557
4465
  @media (max-width: 479px) {
@@ -3599,20 +4507,20 @@ input::-moz-placeholder {
3599
4507
  padding: 0.648rem 1.5rem;
3600
4508
  }
3601
4509
  .table_responsive_xs.table_style_bordered {
3602
- border: 1px solid var(--vb-border-color, rgba(0, 0, 0, 0.1));
4510
+ border: 1px solid rgba(0, 0, 0, 0.1);
3603
4511
  }
3604
4512
  .table_responsive_xs.table_style_bordered td {
3605
4513
  border: none;
3606
4514
  }
3607
4515
  .table_responsive_xs.table_style_bordered td + td,
3608
4516
  .table_responsive_xs.table_style_bordered th + td {
3609
- border-top: 1px dotted var(--vb-border-color, rgba(0, 0, 0, 0.1));
4517
+ border-top: 1px dotted rgba(0, 0, 0, 0.1);
3610
4518
  }
3611
4519
  .table_responsive_xs.table_style_bordered [data-mobile-label]::before {
3612
- border-right: 1px solid var(--vb-border-color, rgba(0, 0, 0, 0.1));
4520
+ border-right: 1px solid rgba(0, 0, 0, 0.1);
3613
4521
  }
3614
4522
  .table_responsive_xs.table_style_bordered tr + tr {
3615
- border-top: 1px solid var(--vb-border-color, rgba(0, 0, 0, 0.1));
4523
+ border-top: 1px solid rgba(0, 0, 0, 0.1);
3616
4524
  }
3617
4525
  }
3618
4526
 
@@ -3661,20 +4569,20 @@ input::-moz-placeholder {
3661
4569
  padding: 0.648rem 1.5rem;
3662
4570
  }
3663
4571
  .table_responsive_sm.table_style_bordered {
3664
- border: 1px solid var(--vb-border-color, rgba(0, 0, 0, 0.1));
4572
+ border: 1px solid rgba(0, 0, 0, 0.1);
3665
4573
  }
3666
4574
  .table_responsive_sm.table_style_bordered td {
3667
4575
  border: none;
3668
4576
  }
3669
4577
  .table_responsive_sm.table_style_bordered td + td,
3670
4578
  .table_responsive_sm.table_style_bordered th + td {
3671
- border-top: 1px dotted var(--vb-border-color, rgba(0, 0, 0, 0.1));
4579
+ border-top: 1px dotted rgba(0, 0, 0, 0.1);
3672
4580
  }
3673
4581
  .table_responsive_sm.table_style_bordered [data-mobile-label]::before {
3674
- border-right: 1px solid var(--vb-border-color, rgba(0, 0, 0, 0.1));
4582
+ border-right: 1px solid rgba(0, 0, 0, 0.1);
3675
4583
  }
3676
4584
  .table_responsive_sm.table_style_bordered tr + tr {
3677
- border-top: 1px solid var(--vb-border-color, rgba(0, 0, 0, 0.1));
4585
+ border-top: 1px solid rgba(0, 0, 0, 0.1);
3678
4586
  }
3679
4587
  }
3680
4588
 
@@ -3723,20 +4631,20 @@ input::-moz-placeholder {
3723
4631
  padding: 0.648rem 1.5rem;
3724
4632
  }
3725
4633
  .table_responsive_md.table_style_bordered {
3726
- border: 1px solid var(--vb-border-color, rgba(0, 0, 0, 0.1));
4634
+ border: 1px solid rgba(0, 0, 0, 0.1);
3727
4635
  }
3728
4636
  .table_responsive_md.table_style_bordered td {
3729
4637
  border: none;
3730
4638
  }
3731
4639
  .table_responsive_md.table_style_bordered td + td,
3732
4640
  .table_responsive_md.table_style_bordered th + td {
3733
- border-top: 1px dotted var(--vb-border-color, rgba(0, 0, 0, 0.1));
4641
+ border-top: 1px dotted rgba(0, 0, 0, 0.1);
3734
4642
  }
3735
4643
  .table_responsive_md.table_style_bordered [data-mobile-label]::before {
3736
- border-right: 1px solid var(--vb-border-color, rgba(0, 0, 0, 0.1));
4644
+ border-right: 1px solid rgba(0, 0, 0, 0.1);
3737
4645
  }
3738
4646
  .table_responsive_md.table_style_bordered tr + tr {
3739
- border-top: 1px solid var(--vb-border-color, rgba(0, 0, 0, 0.1));
4647
+ border-top: 1px solid rgba(0, 0, 0, 0.1);
3740
4648
  }
3741
4649
  }
3742
4650
 
@@ -3785,20 +4693,20 @@ input::-moz-placeholder {
3785
4693
  padding: 0.648rem 1.5rem;
3786
4694
  }
3787
4695
  .table_responsive_lg.table_style_bordered {
3788
- border: 1px solid var(--vb-border-color, rgba(0, 0, 0, 0.1));
4696
+ border: 1px solid rgba(0, 0, 0, 0.1);
3789
4697
  }
3790
4698
  .table_responsive_lg.table_style_bordered td {
3791
4699
  border: none;
3792
4700
  }
3793
4701
  .table_responsive_lg.table_style_bordered td + td,
3794
4702
  .table_responsive_lg.table_style_bordered th + td {
3795
- border-top: 1px dotted var(--vb-border-color, rgba(0, 0, 0, 0.1));
4703
+ border-top: 1px dotted rgba(0, 0, 0, 0.1);
3796
4704
  }
3797
4705
  .table_responsive_lg.table_style_bordered [data-mobile-label]::before {
3798
- border-right: 1px solid var(--vb-border-color, rgba(0, 0, 0, 0.1));
4706
+ border-right: 1px solid rgba(0, 0, 0, 0.1);
3799
4707
  }
3800
4708
  .table_responsive_lg.table_style_bordered tr + tr {
3801
- border-top: 1px solid var(--vb-border-color, rgba(0, 0, 0, 0.1));
4709
+ border-top: 1px solid rgba(0, 0, 0, 0.1);
3802
4710
  }
3803
4711
  }
3804
4712
 
@@ -3823,872 +4731,600 @@ input::-moz-placeholder {
3823
4731
  }
3824
4732
  .table_responsive_xl [data-mobile-label]::before {
3825
4733
  overflow: hidden;
3826
- text-overflow: ellipsis;
3827
- white-space: nowrap;
3828
- content: attr(data-mobile-label);
3829
- position: absolute;
3830
- top: 0;
3831
- bottom: 0;
3832
- left: 0;
3833
- width: 8rem;
3834
- padding: 0.5em 1em;
3835
- font-weight: 600;
3836
- }
3837
- .table_responsive_xl.table_size_sm [data-mobile-label] {
3838
- padding-left: calc(8rem + 0.5rem);
3839
- }
3840
- .table_responsive_xl.table_size_sm [data-mobile-label]::before {
3841
- padding: 0.25rem 0.5rem;
3842
- }
3843
- .table_responsive_xl.table_size_lg [data-mobile-label] {
3844
- padding-left: calc(8rem + 1.5rem);
3845
- }
3846
- .table_responsive_xl.table_size_lg [data-mobile-label]::before {
3847
- padding: 0.648rem 1.5rem;
3848
- }
3849
- .table_responsive_xl.table_style_bordered {
3850
- border: 1px solid var(--vb-border-color, rgba(0, 0, 0, 0.1));
3851
- }
3852
- .table_responsive_xl.table_style_bordered td {
3853
- border: none;
3854
- }
3855
- .table_responsive_xl.table_style_bordered td + td,
3856
- .table_responsive_xl.table_style_bordered th + td {
3857
- border-top: 1px dotted var(--vb-border-color, rgba(0, 0, 0, 0.1));
3858
- }
3859
- .table_responsive_xl.table_style_bordered [data-mobile-label]::before {
3860
- border-right: 1px solid var(--vb-border-color, rgba(0, 0, 0, 0.1));
3861
- }
3862
- .table_responsive_xl.table_style_bordered tr + tr {
3863
- border-top: 1px solid var(--vb-border-color, rgba(0, 0, 0, 0.1));
3864
- }
3865
- }
3866
-
3867
- .table_size_sm th,
3868
- .table_size_sm td,
3869
- .table_size_sm caption {
3870
- padding: 0.25rem 0.5rem;
3871
- }
3872
-
3873
- .table_size_lg th,
3874
- .table_size_lg td,
3875
- .table_size_lg caption {
3876
- padding: 0.648rem 1.5rem;
3877
- }
3878
-
3879
- .table_style_rowed {
3880
- border-bottom: 1px solid var(--vb-border-color, rgba(0, 0, 0, 0.1));
3881
- }
3882
- .table_style_rowed tr {
3883
- border-top: 1px solid var(--vb-border-color, rgba(0, 0, 0, 0.1));
3884
- }
3885
-
3886
- .table_style_bordered th,
3887
- .table_style_bordered td {
3888
- border: 1px solid var(--vb-border-color, rgba(0, 0, 0, 0.1));
3889
- }
3890
-
3891
- .table_zebra thead tr {
3892
- background-color: hsl(var(--vb-neutral-hs, 214deg, 20%), 50%, 3%);
3893
- }
3894
- .table_zebra tr:nth-child(even) {
3895
- background-color: hsl(var(--vb-neutral-hs, 214deg, 20%), 50%, 3%);
3896
- }
3897
-
3898
- .background-clip-border {
3899
- background-clip: border-box !important;
3900
- }
3901
-
3902
- .background-clip-content {
3903
- background-clip: content-box !important;
3904
- }
3905
-
3906
- .background-clip-padding {
3907
- background-clip: padding-box !important;
3908
- }
3909
-
3910
- .background {
3911
- background-color: var(--vb-background, var(--vb-neutral-100, hsl(214, 20%, 100%))) !important;
3912
- }
3913
-
3914
- .background-dark {
3915
- background-color: var(--vb-background-dark, var(--vb-neutral-98, hsl(214, 20%, 98%))) !important;
3916
- }
3917
-
3918
- .background-darker {
3919
- background-color: var(--vb-background-darker, var(--vb-neutral-95, hsl(214, 20%, 95%))) !important;
3920
- }
3921
-
3922
- .background-black {
3923
- background-color: black !important;
3924
- }
3925
-
3926
- .background-white {
3927
- background-color: white !important;
3928
- }
3929
-
3930
- .background-transparent {
3931
- background-color: transparent !important;
3932
- }
3933
-
3934
- .background-primary {
3935
- background-color: var(--vb-primary) !important;
3936
- }
3937
-
3938
- .background-primary-0 {
3939
- background-color: var(--vb-primary-0, hsl(152, 60%, 0%)) !important;
3940
- }
3941
-
3942
- .background-primary-5 {
3943
- background-color: var(--vb-primary-5, hsl(152, 60%, 5%)) !important;
3944
- }
3945
-
3946
- .background-primary-10 {
3947
- background-color: var(--vb-primary-10, hsl(152, 60%, 10%)) !important;
3948
- }
3949
-
3950
- .background-primary-12 {
3951
- background-color: var(--vb-primary-12, hsl(152, 60%, 12%)) !important;
3952
- }
3953
-
3954
- .background-primary-15 {
3955
- background-color: var(--vb-primary-15, hsl(152, 60%, 15%)) !important;
3956
- }
3957
-
3958
- .background-primary-20 {
3959
- background-color: var(--vb-primary-20, hsl(152, 60%, 20%)) !important;
3960
- }
3961
-
3962
- .background-primary-30 {
3963
- background-color: var(--vb-primary-30, hsl(152, 60%, 30%)) !important;
3964
- }
3965
-
3966
- .background-primary-40 {
3967
- background-color: var(--vb-primary-40, hsl(152, 60%, 40%)) !important;
3968
- }
3969
-
3970
- .background-primary-50 {
3971
- background-color: var(--vb-primary-50, hsl(152, 60%, 50%)) !important;
3972
- }
3973
-
3974
- .background-primary-60 {
3975
- background-color: var(--vb-primary-60, hsl(152, 60%, 60%)) !important;
3976
- }
3977
-
3978
- .background-primary-70 {
3979
- background-color: var(--vb-primary-70, hsl(152, 60%, 70%)) !important;
3980
- }
3981
-
3982
- .background-primary-80 {
3983
- background-color: var(--vb-primary-80, hsl(152, 60%, 80%)) !important;
3984
- }
3985
-
3986
- .background-primary-90 {
3987
- background-color: var(--vb-primary-90, hsl(152, 60%, 90%)) !important;
3988
- }
3989
-
3990
- .background-primary-95 {
3991
- background-color: var(--vb-primary-95, hsl(152, 60%, 95%)) !important;
3992
- }
3993
-
3994
- .background-primary-98 {
3995
- background-color: var(--vb-primary-98, hsl(152, 60%, 98%)) !important;
3996
- }
3997
-
3998
- .background-primary-100 {
3999
- background-color: var(--vb-primary-100, hsl(152, 60%, 100%)) !important;
4000
- }
4001
-
4002
- .background-secondary {
4003
- background-color: var(--vb-secondary) !important;
4004
- }
4005
-
4006
- .background-secondary-0 {
4007
- background-color: var(--vb-secondary-0, hsl(214, 50%, 0%)) !important;
4008
- }
4009
-
4010
- .background-secondary-5 {
4011
- background-color: var(--vb-secondary-5, hsl(214, 50%, 5%)) !important;
4012
- }
4013
-
4014
- .background-secondary-10 {
4015
- background-color: var(--vb-secondary-10, hsl(214, 50%, 10%)) !important;
4016
- }
4017
-
4018
- .background-secondary-12 {
4019
- background-color: var(--vb-secondary-12, hsl(214, 50%, 12%)) !important;
4020
- }
4021
-
4022
- .background-secondary-15 {
4023
- background-color: var(--vb-secondary-15, hsl(214, 50%, 15%)) !important;
4024
- }
4025
-
4026
- .background-secondary-20 {
4027
- background-color: var(--vb-secondary-20, hsl(214, 50%, 20%)) !important;
4028
- }
4029
-
4030
- .background-secondary-30 {
4031
- background-color: var(--vb-secondary-30, hsl(214, 50%, 30%)) !important;
4032
- }
4033
-
4034
- .background-secondary-40 {
4035
- background-color: var(--vb-secondary-40, hsl(214, 50%, 40%)) !important;
4036
- }
4037
-
4038
- .background-secondary-50 {
4039
- background-color: var(--vb-secondary-50, hsl(214, 50%, 50%)) !important;
4040
- }
4041
-
4042
- .background-secondary-60 {
4043
- background-color: var(--vb-secondary-60, hsl(214, 50%, 60%)) !important;
4044
- }
4045
-
4046
- .background-secondary-70 {
4047
- background-color: var(--vb-secondary-70, hsl(214, 50%, 70%)) !important;
4048
- }
4049
-
4050
- .background-secondary-80 {
4051
- background-color: var(--vb-secondary-80, hsl(214, 50%, 80%)) !important;
4052
- }
4053
-
4054
- .background-secondary-90 {
4055
- background-color: var(--vb-secondary-90, hsl(214, 50%, 90%)) !important;
4056
- }
4057
-
4058
- .background-secondary-95 {
4059
- background-color: var(--vb-secondary-95, hsl(214, 50%, 95%)) !important;
4060
- }
4061
-
4062
- .background-secondary-98 {
4063
- background-color: var(--vb-secondary-98, hsl(214, 50%, 98%)) !important;
4064
- }
4065
-
4066
- .background-secondary-100 {
4067
- background-color: var(--vb-secondary-100, hsl(214, 50%, 100%)) !important;
4068
- }
4069
-
4070
- .background-neutral {
4071
- background-color: var(--vb-neutral) !important;
4072
- }
4073
-
4074
- .background-neutral-0 {
4075
- background-color: var(--vb-neutral-0, hsl(214, 20%, 0%)) !important;
4076
- }
4077
-
4078
- .background-neutral-5 {
4079
- background-color: var(--vb-neutral-5, hsl(214, 20%, 5%)) !important;
4080
- }
4081
-
4082
- .background-neutral-10 {
4083
- background-color: var(--vb-neutral-10, hsl(214, 20%, 10%)) !important;
4084
- }
4085
-
4086
- .background-neutral-12 {
4087
- background-color: var(--vb-neutral-12, hsl(214, 20%, 12%)) !important;
4088
- }
4089
-
4090
- .background-neutral-15 {
4091
- background-color: var(--vb-neutral-15, hsl(214, 20%, 15%)) !important;
4092
- }
4093
-
4094
- .background-neutral-20 {
4095
- background-color: var(--vb-neutral-20, hsl(214, 20%, 20%)) !important;
4096
- }
4097
-
4098
- .background-neutral-30 {
4099
- background-color: var(--vb-neutral-30, hsl(214, 20%, 30%)) !important;
4100
- }
4101
-
4102
- .background-neutral-40 {
4103
- background-color: var(--vb-neutral-40, hsl(214, 20%, 40%)) !important;
4104
- }
4105
-
4106
- .background-neutral-50 {
4107
- background-color: var(--vb-neutral-50, hsl(214, 20%, 50%)) !important;
4108
- }
4109
-
4110
- .background-neutral-60 {
4111
- background-color: var(--vb-neutral-60, hsl(214, 20%, 60%)) !important;
4112
- }
4113
-
4114
- .background-neutral-70 {
4115
- background-color: var(--vb-neutral-70, hsl(214, 20%, 70%)) !important;
4116
- }
4117
-
4118
- .background-neutral-80 {
4119
- background-color: var(--vb-neutral-80, hsl(214, 20%, 80%)) !important;
4120
- }
4121
-
4122
- .background-neutral-90 {
4123
- background-color: var(--vb-neutral-90, hsl(214, 20%, 90%)) !important;
4124
- }
4125
-
4126
- .background-neutral-95 {
4127
- background-color: var(--vb-neutral-95, hsl(214, 20%, 95%)) !important;
4128
- }
4129
-
4130
- .background-neutral-98 {
4131
- background-color: var(--vb-neutral-98, hsl(214, 20%, 98%)) !important;
4734
+ text-overflow: ellipsis;
4735
+ white-space: nowrap;
4736
+ content: attr(data-mobile-label);
4737
+ position: absolute;
4738
+ top: 0;
4739
+ bottom: 0;
4740
+ left: 0;
4741
+ width: 8rem;
4742
+ padding: 0.5em 1em;
4743
+ font-weight: 600;
4744
+ }
4745
+ .table_responsive_xl.table_size_sm [data-mobile-label] {
4746
+ padding-left: calc(8rem + 0.5rem);
4747
+ }
4748
+ .table_responsive_xl.table_size_sm [data-mobile-label]::before {
4749
+ padding: 0.25rem 0.5rem;
4750
+ }
4751
+ .table_responsive_xl.table_size_lg [data-mobile-label] {
4752
+ padding-left: calc(8rem + 1.5rem);
4753
+ }
4754
+ .table_responsive_xl.table_size_lg [data-mobile-label]::before {
4755
+ padding: 0.648rem 1.5rem;
4756
+ }
4757
+ .table_responsive_xl.table_style_bordered {
4758
+ border: 1px solid rgba(0, 0, 0, 0.1);
4759
+ }
4760
+ .table_responsive_xl.table_style_bordered td {
4761
+ border: none;
4762
+ }
4763
+ .table_responsive_xl.table_style_bordered td + td,
4764
+ .table_responsive_xl.table_style_bordered th + td {
4765
+ border-top: 1px dotted rgba(0, 0, 0, 0.1);
4766
+ }
4767
+ .table_responsive_xl.table_style_bordered [data-mobile-label]::before {
4768
+ border-right: 1px solid rgba(0, 0, 0, 0.1);
4769
+ }
4770
+ .table_responsive_xl.table_style_bordered tr + tr {
4771
+ border-top: 1px solid rgba(0, 0, 0, 0.1);
4772
+ }
4132
4773
  }
4133
4774
 
4134
- .background-neutral-100 {
4135
- background-color: var(--vb-neutral-100, hsl(214, 20%, 100%)) !important;
4775
+ .table_size_sm th,
4776
+ .table_size_sm td,
4777
+ .table_size_sm caption {
4778
+ padding: 0.25rem 0.5rem;
4136
4779
  }
4137
4780
 
4138
- .background-important {
4139
- background-color: var(--vb-important) !important;
4781
+ .table_size_lg th,
4782
+ .table_size_lg td,
4783
+ .table_size_lg caption {
4784
+ padding: 0.648rem 1.5rem;
4140
4785
  }
4141
4786
 
4142
- .background-important-0 {
4143
- background-color: var(--vb-important-0, hsl(0, 80%, 0%)) !important;
4787
+ .table_style_rowed {
4788
+ border-bottom: 1px solid rgba(0, 0, 0, 0.1);
4144
4789
  }
4145
-
4146
- .background-important-5 {
4147
- background-color: var(--vb-important-5, hsl(0, 80%, 5%)) !important;
4790
+ .table_style_rowed tr {
4791
+ border-top: 1px solid rgba(0, 0, 0, 0.1);
4148
4792
  }
4149
4793
 
4150
- .background-important-10 {
4151
- background-color: var(--vb-important-10, hsl(0, 80%, 10%)) !important;
4794
+ .table_style_bordered th,
4795
+ .table_style_bordered td {
4796
+ border: 1px solid rgba(0, 0, 0, 0.1);
4152
4797
  }
4153
4798
 
4154
- .background-important-12 {
4155
- background-color: var(--vb-important-12, hsl(0, 80%, 12%)) !important;
4799
+ .table_zebra thead tr {
4800
+ background-color: rgba(0, 0, 0, 0.03);
4156
4801
  }
4157
-
4158
- .background-important-15 {
4159
- background-color: var(--vb-important-15, hsl(0, 80%, 15%)) !important;
4802
+ .table_zebra tr:nth-child(even) {
4803
+ background-color: rgba(0, 0, 0, 0.03);
4160
4804
  }
4161
4805
 
4162
- .background-important-20 {
4163
- background-color: var(--vb-important-20, hsl(0, 80%, 20%)) !important;
4806
+ .background-clip-border {
4807
+ background-clip: border-box !important;
4164
4808
  }
4165
4809
 
4166
- .background-important-30 {
4167
- background-color: var(--vb-important-30, hsl(0, 80%, 30%)) !important;
4810
+ .background-clip-content {
4811
+ background-clip: content-box !important;
4168
4812
  }
4169
4813
 
4170
- .background-important-40 {
4171
- background-color: var(--vb-important-40, hsl(0, 80%, 40%)) !important;
4814
+ .background-clip-padding {
4815
+ background-clip: padding-box !important;
4172
4816
  }
4173
4817
 
4174
- .background-important-50 {
4175
- background-color: var(--vb-important-50, hsl(0, 80%, 50%)) !important;
4818
+ .background-black {
4819
+ background-color: #000 !important;
4176
4820
  }
4177
4821
 
4178
- .background-important-60 {
4179
- background-color: var(--vb-important-60, hsl(0, 80%, 60%)) !important;
4822
+ .background-white {
4823
+ background-color: #fff !important;
4180
4824
  }
4181
4825
 
4182
- .background-important-70 {
4183
- background-color: var(--vb-important-70, hsl(0, 80%, 70%)) !important;
4826
+ .background-transparent {
4827
+ background-color: transparent !important;
4184
4828
  }
4185
4829
 
4186
- .background-important-80 {
4187
- background-color: var(--vb-important-80, hsl(0, 80%, 80%)) !important;
4830
+ .background-primary-lighter {
4831
+ background-color: #e0f7fa !important;
4188
4832
  }
4189
4833
 
4190
- .background-important-90 {
4191
- background-color: var(--vb-important-90, hsl(0, 80%, 90%)) !important;
4834
+ .background-primary-light {
4835
+ background-color: #4dd0e1 !important;
4192
4836
  }
4193
4837
 
4194
- .background-important-95 {
4195
- background-color: var(--vb-important-95, hsl(0, 80%, 95%)) !important;
4838
+ .background-primary {
4839
+ background-color: #00bcd4 !important;
4196
4840
  }
4197
4841
 
4198
- .background-important-98 {
4199
- background-color: var(--vb-important-98, hsl(0, 80%, 98%)) !important;
4842
+ .background-primary-dark {
4843
+ background-color: #0097a7 !important;
4200
4844
  }
4201
4845
 
4202
- .background-important-100 {
4203
- background-color: var(--vb-important-100, hsl(0, 80%, 100%)) !important;
4846
+ .background-primary-darker {
4847
+ background-color: #006064 !important;
4204
4848
  }
4205
4849
 
4206
- .foreground {
4207
- color: var(--vb-foreground, var(--vb-neutral-20, hsl(214, 20%, 20%))) !important;
4850
+ .background-secondary-lighter {
4851
+ background-color: #eceff1 !important;
4208
4852
  }
4209
4853
 
4210
- .foreground-light {
4211
- color: var(--vb-foreground-light, var(--vb-neutral-40, hsl(214, 20%, 40%))) !important;
4854
+ .background-secondary-light {
4855
+ background-color: #90a4ae !important;
4212
4856
  }
4213
4857
 
4214
- .foreground-lighter {
4215
- color: var(--vb-foreground-lighter, var(--vb-neutral-60, hsl(214, 20%, 60%))) !important;
4858
+ .background-secondary {
4859
+ background-color: #607d8b !important;
4216
4860
  }
4217
4861
 
4218
- .foreground-black {
4219
- color: black !important;
4862
+ .background-secondary-dark {
4863
+ background-color: #455a64 !important;
4220
4864
  }
4221
4865
 
4222
- .foreground-white {
4223
- color: white !important;
4866
+ .background-secondary-darker {
4867
+ background-color: #263238 !important;
4224
4868
  }
4225
4869
 
4226
- .foreground-transparent {
4227
- color: transparent !important;
4870
+ .background-shade-light {
4871
+ background-color: #fafafa !important;
4228
4872
  }
4229
4873
 
4230
- .foreground-primary {
4231
- color: var(--vb-primary) !important;
4874
+ .background-shade {
4875
+ background-color: #f5f5f5 !important;
4232
4876
  }
4233
4877
 
4234
- .foreground-primary-0 {
4235
- color: var(--vb-primary-0, hsl(152, 60%, 0%)) !important;
4878
+ .background-shade-dark {
4879
+ background-color: #e0e0e0 !important;
4236
4880
  }
4237
4881
 
4238
- .foreground-primary-5 {
4239
- color: var(--vb-primary-5, hsl(152, 60%, 5%)) !important;
4882
+ .background-night-light {
4883
+ background-color: #616161 !important;
4240
4884
  }
4241
4885
 
4242
- .foreground-primary-10 {
4243
- color: var(--vb-primary-10, hsl(152, 60%, 10%)) !important;
4886
+ .background-night {
4887
+ background-color: #424242 !important;
4244
4888
  }
4245
4889
 
4246
- .foreground-primary-12 {
4247
- color: var(--vb-primary-12, hsl(152, 60%, 12%)) !important;
4890
+ .background-night-dark {
4891
+ background-color: #212121 !important;
4248
4892
  }
4249
4893
 
4250
- .foreground-primary-15 {
4251
- color: var(--vb-primary-15, hsl(152, 60%, 15%)) !important;
4894
+ .background-info-lighter {
4895
+ background-color: #e1f5fe !important;
4252
4896
  }
4253
4897
 
4254
- .foreground-primary-20 {
4255
- color: var(--vb-primary-20, hsl(152, 60%, 20%)) !important;
4898
+ .background-info-light {
4899
+ background-color: #4fc3f7 !important;
4256
4900
  }
4257
4901
 
4258
- .foreground-primary-30 {
4259
- color: var(--vb-primary-30, hsl(152, 60%, 30%)) !important;
4902
+ .background-info {
4903
+ background-color: #03a9f4 !important;
4260
4904
  }
4261
4905
 
4262
- .foreground-primary-40 {
4263
- color: var(--vb-primary-40, hsl(152, 60%, 40%)) !important;
4906
+ .background-info-dark {
4907
+ background-color: #0288d1 !important;
4264
4908
  }
4265
4909
 
4266
- .foreground-primary-50 {
4267
- color: var(--vb-primary-50, hsl(152, 60%, 50%)) !important;
4910
+ .background-info-darker {
4911
+ background-color: #01579b !important;
4268
4912
  }
4269
4913
 
4270
- .foreground-primary-60 {
4271
- color: var(--vb-primary-60, hsl(152, 60%, 60%)) !important;
4914
+ .background-success-lighter {
4915
+ background-color: #e8f5e9 !important;
4272
4916
  }
4273
4917
 
4274
- .foreground-primary-70 {
4275
- color: var(--vb-primary-70, hsl(152, 60%, 70%)) !important;
4918
+ .background-success-light {
4919
+ background-color: #81c784 !important;
4276
4920
  }
4277
4921
 
4278
- .foreground-primary-80 {
4279
- color: var(--vb-primary-80, hsl(152, 60%, 80%)) !important;
4922
+ .background-success {
4923
+ background-color: #4caf50 !important;
4280
4924
  }
4281
4925
 
4282
- .foreground-primary-90 {
4283
- color: var(--vb-primary-90, hsl(152, 60%, 90%)) !important;
4926
+ .background-success-dark {
4927
+ background-color: #388e3c !important;
4284
4928
  }
4285
4929
 
4286
- .foreground-primary-95 {
4287
- color: var(--vb-primary-95, hsl(152, 60%, 95%)) !important;
4930
+ .background-success-darker {
4931
+ background-color: #1b5e20 !important;
4288
4932
  }
4289
4933
 
4290
- .foreground-primary-98 {
4291
- color: var(--vb-primary-98, hsl(152, 60%, 98%)) !important;
4934
+ .background-caution-lighter {
4935
+ background-color: #fff3e0 !important;
4292
4936
  }
4293
4937
 
4294
- .foreground-primary-100 {
4295
- color: var(--vb-primary-100, hsl(152, 60%, 100%)) !important;
4938
+ .background-caution-light {
4939
+ background-color: #ffb74d !important;
4296
4940
  }
4297
4941
 
4298
- .foreground-secondary {
4299
- color: var(--vb-secondary) !important;
4942
+ .background-caution {
4943
+ background-color: #ff9800 !important;
4300
4944
  }
4301
4945
 
4302
- .foreground-secondary-0 {
4303
- color: var(--vb-secondary-0, hsl(214, 50%, 0%)) !important;
4946
+ .background-caution-dark {
4947
+ background-color: #e64a19 !important;
4304
4948
  }
4305
4949
 
4306
- .foreground-secondary-5 {
4307
- color: var(--vb-secondary-5, hsl(214, 50%, 5%)) !important;
4950
+ .background-caution-darker {
4951
+ background-color: #bf360c !important;
4308
4952
  }
4309
4953
 
4310
- .foreground-secondary-10 {
4311
- color: var(--vb-secondary-10, hsl(214, 50%, 10%)) !important;
4954
+ .background-danger-lighter {
4955
+ background-color: #ffebee !important;
4312
4956
  }
4313
4957
 
4314
- .foreground-secondary-12 {
4315
- color: var(--vb-secondary-12, hsl(214, 50%, 12%)) !important;
4958
+ .background-danger-light {
4959
+ background-color: #e57373 !important;
4316
4960
  }
4317
4961
 
4318
- .foreground-secondary-15 {
4319
- color: var(--vb-secondary-15, hsl(214, 50%, 15%)) !important;
4962
+ .background-danger {
4963
+ background-color: #f44336 !important;
4320
4964
  }
4321
4965
 
4322
- .foreground-secondary-20 {
4323
- color: var(--vb-secondary-20, hsl(214, 50%, 20%)) !important;
4966
+ .background-danger-dark {
4967
+ background-color: #d32f2f !important;
4324
4968
  }
4325
4969
 
4326
- .foreground-secondary-30 {
4327
- color: var(--vb-secondary-30, hsl(214, 50%, 30%)) !important;
4970
+ .background-danger-darker {
4971
+ background-color: #b71c1c !important;
4328
4972
  }
4329
4973
 
4330
- .foreground-secondary-40 {
4331
- color: var(--vb-secondary-40, hsl(214, 50%, 40%)) !important;
4974
+ .border {
4975
+ border: 1px solid rgba(0, 0, 0, 0.1) !important;
4332
4976
  }
4333
4977
 
4334
- .foreground-secondary-50 {
4335
- color: var(--vb-secondary-50, hsl(214, 50%, 50%)) !important;
4978
+ .border-top {
4979
+ border-top: 1px solid rgba(0, 0, 0, 0.1) !important;
4336
4980
  }
4337
4981
 
4338
- .foreground-secondary-60 {
4339
- color: var(--vb-secondary-60, hsl(214, 50%, 60%)) !important;
4982
+ .border-bottom {
4983
+ border-bottom: 1px solid rgba(0, 0, 0, 0.1) !important;
4340
4984
  }
4341
4985
 
4342
- .foreground-secondary-70 {
4343
- color: var(--vb-secondary-70, hsl(214, 50%, 70%)) !important;
4986
+ .border-left {
4987
+ border-left: 1px solid rgba(0, 0, 0, 0.1) !important;
4344
4988
  }
4345
4989
 
4346
- .foreground-secondary-80 {
4347
- color: var(--vb-secondary-80, hsl(214, 50%, 80%)) !important;
4990
+ .border-right {
4991
+ border-right: 1px solid rgba(0, 0, 0, 0.1) !important;
4348
4992
  }
4349
4993
 
4350
- .foreground-secondary-90 {
4351
- color: var(--vb-secondary-90, hsl(214, 50%, 90%)) !important;
4994
+ .border-none {
4995
+ border: 0 !important;
4352
4996
  }
4353
4997
 
4354
- .foreground-secondary-95 {
4355
- color: var(--vb-secondary-95, hsl(214, 50%, 95%)) !important;
4998
+ .border-top-none {
4999
+ border-top: 0 !important;
4356
5000
  }
4357
5001
 
4358
- .foreground-secondary-98 {
4359
- color: var(--vb-secondary-98, hsl(214, 50%, 98%)) !important;
5002
+ .border-bottom-none {
5003
+ border-bottom: 0 !important;
4360
5004
  }
4361
5005
 
4362
- .foreground-secondary-100 {
4363
- color: var(--vb-secondary-100, hsl(214, 50%, 100%)) !important;
5006
+ .border-left-none {
5007
+ border-left: 0 !important;
4364
5008
  }
4365
5009
 
4366
- .foreground-neutral {
4367
- color: var(--vb-neutral) !important;
5010
+ .border-right-none {
5011
+ border-right: 0 !important;
4368
5012
  }
4369
5013
 
4370
- .foreground-neutral-0 {
4371
- color: var(--vb-neutral-0, hsl(214, 20%, 0%)) !important;
5014
+ .border-color-light {
5015
+ border-color: rgba(0, 0, 0, 0.05) !important;
4372
5016
  }
4373
5017
 
4374
- .foreground-neutral-5 {
4375
- color: var(--vb-neutral-5, hsl(214, 20%, 5%)) !important;
5018
+ .border-color-dark {
5019
+ border-color: rgba(0, 0, 0, 0.2) !important;
4376
5020
  }
4377
5021
 
4378
- .foreground-neutral-10 {
4379
- color: var(--vb-neutral-10, hsl(214, 20%, 10%)) !important;
5022
+ .border-color-darker {
5023
+ border-color: rgba(0, 0, 0, 0.5) !important;
4380
5024
  }
4381
5025
 
4382
- .foreground-neutral-12 {
4383
- color: var(--vb-neutral-12, hsl(214, 20%, 12%)) !important;
5026
+ .border-color-invert {
5027
+ border-color: rgba(255, 255, 255, 0.1) !important;
4384
5028
  }
4385
5029
 
4386
- .foreground-neutral-15 {
4387
- color: var(--vb-neutral-15, hsl(214, 20%, 15%)) !important;
5030
+ .border-color-invert-light {
5031
+ border-color: rgba(255, 255, 255, 0.05) !important;
4388
5032
  }
4389
5033
 
4390
- .foreground-neutral-20 {
4391
- color: var(--vb-neutral-20, hsl(214, 20%, 20%)) !important;
5034
+ .border-color-invert-dark {
5035
+ border-color: rgba(255, 255, 255, 0.2) !important;
4392
5036
  }
4393
5037
 
4394
- .foreground-neutral-30 {
4395
- color: var(--vb-neutral-30, hsl(214, 20%, 30%)) !important;
5038
+ .border-color-invert-darker {
5039
+ border-color: rgba(255, 255, 255, 0.5) !important;
4396
5040
  }
4397
5041
 
4398
- .foreground-neutral-40 {
4399
- color: var(--vb-neutral-40, hsl(214, 20%, 40%)) !important;
5042
+ .border-color-transparent {
5043
+ border-color: transparent !important;
4400
5044
  }
4401
5045
 
4402
- .foreground-neutral-50 {
4403
- color: var(--vb-neutral-50, hsl(214, 20%, 50%)) !important;
5046
+ .radius {
5047
+ border-radius: 0.25rem !important;
4404
5048
  }
4405
5049
 
4406
- .foreground-neutral-60 {
4407
- color: var(--vb-neutral-60, hsl(214, 20%, 60%)) !important;
5050
+ .radius-top,
5051
+ .radius-left,
5052
+ .radius-top-left {
5053
+ border-top-left-radius: 0.25rem !important;
4408
5054
  }
4409
5055
 
4410
- .foreground-neutral-70 {
4411
- color: var(--vb-neutral-70, hsl(214, 20%, 70%)) !important;
5056
+ .radius-top,
5057
+ .radius-right,
5058
+ .radius-top-right {
5059
+ border-top-right-radius: 0.25rem !important;
4412
5060
  }
4413
5061
 
4414
- .foreground-neutral-80 {
4415
- color: var(--vb-neutral-80, hsl(214, 20%, 80%)) !important;
5062
+ .radius-bottom,
5063
+ .radius-right,
5064
+ .radius-bottom-right {
5065
+ border-bottom-right-radius: 0.25rem !important;
4416
5066
  }
4417
5067
 
4418
- .foreground-neutral-90 {
4419
- color: var(--vb-neutral-90, hsl(214, 20%, 90%)) !important;
5068
+ .radius-bottom,
5069
+ .radius-left,
5070
+ .radius-bottom-left {
5071
+ border-bottom-left-radius: 0.25rem !important;
4420
5072
  }
4421
5073
 
4422
- .foreground-neutral-95 {
4423
- color: var(--vb-neutral-95, hsl(214, 20%, 95%)) !important;
5074
+ .radius-circle {
5075
+ border-radius: 9999px !important;
4424
5076
  }
4425
5077
 
4426
- .foreground-neutral-98 {
4427
- color: var(--vb-neutral-98, hsl(214, 20%, 98%)) !important;
5078
+ .radius-circle-top,
5079
+ .radius-circle-left,
5080
+ .radius-circle-top-left {
5081
+ border-top-left-radius: 9999px !important;
4428
5082
  }
4429
5083
 
4430
- .foreground-neutral-100 {
4431
- color: var(--vb-neutral-100, hsl(214, 20%, 100%)) !important;
5084
+ .radius-circle-top,
5085
+ .radius-circle-right,
5086
+ .radius-circle-top-right {
5087
+ border-top-right-radius: 9999px !important;
4432
5088
  }
4433
5089
 
4434
- .foreground-important {
4435
- color: var(--vb-important) !important;
5090
+ .radius-circle-bottom,
5091
+ .radius-circle-right,
5092
+ .radius-circle-bottom-right {
5093
+ border-bottom-right-radius: 9999px !important;
4436
5094
  }
4437
5095
 
4438
- .foreground-important-0 {
4439
- color: var(--vb-important-0, hsl(0, 80%, 0%)) !important;
5096
+ .radius-circle-bottom,
5097
+ .radius-circle-left,
5098
+ .radius-circle-bottom-left {
5099
+ border-bottom-left-radius: 9999px !important;
4440
5100
  }
4441
5101
 
4442
- .foreground-important-5 {
4443
- color: var(--vb-important-5, hsl(0, 80%, 5%)) !important;
5102
+ .radius-square {
5103
+ border-radius: 0 !important;
4444
5104
  }
4445
5105
 
4446
- .foreground-important-10 {
4447
- color: var(--vb-important-10, hsl(0, 80%, 10%)) !important;
5106
+ .radius-square-top,
5107
+ .radius-square-left,
5108
+ .radius-square-top-left {
5109
+ border-top-left-radius: 0 !important;
4448
5110
  }
4449
5111
 
4450
- .foreground-important-12 {
4451
- color: var(--vb-important-12, hsl(0, 80%, 12%)) !important;
5112
+ .radius-square-top,
5113
+ .radius-square-right,
5114
+ .radius-square-top-right {
5115
+ border-top-right-radius: 0 !important;
4452
5116
  }
4453
5117
 
4454
- .foreground-important-15 {
4455
- color: var(--vb-important-15, hsl(0, 80%, 15%)) !important;
5118
+ .radius-square-bottom,
5119
+ .radius-square-right,
5120
+ .radius-square-bottom-right {
5121
+ border-bottom-right-radius: 0 !important;
4456
5122
  }
4457
5123
 
4458
- .foreground-important-20 {
4459
- color: var(--vb-important-20, hsl(0, 80%, 20%)) !important;
5124
+ .radius-square-bottom,
5125
+ .radius-square-left,
5126
+ .radius-square-bottom-left {
5127
+ border-bottom-left-radius: 0 !important;
4460
5128
  }
4461
5129
 
4462
- .foreground-important-30 {
4463
- color: var(--vb-important-30, hsl(0, 80%, 30%)) !important;
5130
+ .elevate {
5131
+ box-shadow: 0 0 2px 1px rgba(33, 33, 33, 0.05), 0 2px 6px rgba(33, 33, 33, 0.2) !important;
4464
5132
  }
4465
5133
 
4466
- .foreground-important-40 {
4467
- color: var(--vb-important-40, hsl(0, 80%, 40%)) !important;
5134
+ .elevate-flat {
5135
+ box-shadow: 0 0 0 0 transparent !important;
4468
5136
  }
4469
5137
 
4470
- .foreground-important-50 {
4471
- color: var(--vb-important-50, hsl(0, 80%, 50%)) !important;
5138
+ .elevate-1 {
5139
+ box-shadow: 0 0 2px 1px rgba(33, 33, 33, 0.05), 0 1px 3px rgba(33, 33, 33, 0.2) !important;
4472
5140
  }
4473
5141
 
4474
- .foreground-important-60 {
4475
- color: var(--vb-important-60, hsl(0, 80%, 60%)) !important;
5142
+ .elevate-2 {
5143
+ box-shadow: 0 0 2px 1px rgba(33, 33, 33, 0.05), 0 2px 6px rgba(33, 33, 33, 0.2) !important;
4476
5144
  }
4477
5145
 
4478
- .foreground-important-70 {
4479
- color: var(--vb-important-70, hsl(0, 80%, 70%)) !important;
5146
+ .elevate-3 {
5147
+ box-shadow: 0 0 2px 1px rgba(33, 33, 33, 0.05), 0 4px 12px rgba(33, 33, 33, 0.2) !important;
4480
5148
  }
4481
5149
 
4482
- .foreground-important-80 {
4483
- color: var(--vb-important-80, hsl(0, 80%, 80%)) !important;
5150
+ .elevate-4 {
5151
+ box-shadow: 0 0 2px 1px rgba(33, 33, 33, 0.05), 0 8px 18px rgba(33, 33, 33, 0.2) !important;
4484
5152
  }
4485
5153
 
4486
- .foreground-important-90 {
4487
- color: var(--vb-important-90, hsl(0, 80%, 90%)) !important;
5154
+ .elevate-5 {
5155
+ box-shadow: 0 0 2px 1px rgba(33, 33, 33, 0.05), 0 12px 24px rgba(33, 33, 33, 0.2) !important;
4488
5156
  }
4489
5157
 
4490
- .foreground-important-95 {
4491
- color: var(--vb-important-95, hsl(0, 80%, 95%)) !important;
5158
+ .color {
5159
+ color: #212121 !important;
4492
5160
  }
4493
5161
 
4494
- .foreground-important-98 {
4495
- color: var(--vb-important-98, hsl(0, 80%, 98%)) !important;
5162
+ .color-subtle {
5163
+ color: #9e9e9e !important;
4496
5164
  }
4497
5165
 
4498
- .foreground-important-100 {
4499
- color: var(--vb-important-100, hsl(0, 80%, 100%)) !important;
5166
+ .color-invert {
5167
+ color: #fff !important;
4500
5168
  }
4501
5169
 
4502
- .border {
4503
- border: 1px solid var(--vb-border-color, rgba(0, 0, 0, 0.1)) !important;
5170
+ .color-invert-subtle {
5171
+ color: rgba(255, 255, 255, 0.6) !important;
4504
5172
  }
4505
5173
 
4506
- .border-top {
4507
- border-top: 1px solid var(--vb-border-color, rgba(0, 0, 0, 0.1)) !important;
5174
+ .color-black {
5175
+ color: #000 !important;
4508
5176
  }
4509
5177
 
4510
- .border-bottom {
4511
- border-bottom: 1px solid var(--vb-border-color, rgba(0, 0, 0, 0.1)) !important;
5178
+ .color-white {
5179
+ color: #fff !important;
4512
5180
  }
4513
5181
 
4514
- .border-left {
4515
- border-left: 1px solid var(--vb-border-color, rgba(0, 0, 0, 0.1)) !important;
5182
+ .color-transparent {
5183
+ color: transparent !important;
4516
5184
  }
4517
5185
 
4518
- .border-right {
4519
- border-right: 1px solid var(--vb-border-color, rgba(0, 0, 0, 0.1)) !important;
5186
+ .color-primary-lighter {
5187
+ color: #e0f7fa !important;
4520
5188
  }
4521
5189
 
4522
- .border-none {
4523
- border: 0 !important;
5190
+ .color-primary-light {
5191
+ color: #4dd0e1 !important;
4524
5192
  }
4525
5193
 
4526
- .border-top-none {
4527
- border-top: 0 !important;
5194
+ .color-primary {
5195
+ color: #00bcd4 !important;
4528
5196
  }
4529
5197
 
4530
- .border-bottom-none {
4531
- border-bottom: 0 !important;
5198
+ .color-primary-dark {
5199
+ color: #0097a7 !important;
4532
5200
  }
4533
5201
 
4534
- .border-left-none {
4535
- border-left: 0 !important;
5202
+ .color-primary-darker {
5203
+ color: #006064 !important;
4536
5204
  }
4537
5205
 
4538
- .border-right-none {
4539
- border-right: 0 !important;
5206
+ .color-secondary-lighter {
5207
+ color: #eceff1 !important;
4540
5208
  }
4541
5209
 
4542
- .border-color-dark {
4543
- border-color: var(--vb-border-color-dark, rgba(0, 0, 0, 0.2)) !important;
5210
+ .color-secondary-light {
5211
+ color: #90a4ae !important;
4544
5212
  }
4545
5213
 
4546
- .border-color-darker {
4547
- border-color: var(--vb-border-color-darker, rgba(0, 0, 0, 0.3)) !important;
5214
+ .color-secondary {
5215
+ color: #607d8b !important;
4548
5216
  }
4549
5217
 
4550
- .border-color-transparent {
4551
- border-color: transparent !important;
5218
+ .color-secondary-dark {
5219
+ color: #455a64 !important;
4552
5220
  }
4553
5221
 
4554
- .radius {
4555
- border-radius: 0.25rem !important;
5222
+ .color-secondary-darker {
5223
+ color: #263238 !important;
4556
5224
  }
4557
5225
 
4558
- .radius-top,
4559
- .radius-left,
4560
- .radius-top-left {
4561
- border-top-left-radius: 0.25rem !important;
5226
+ .color-shade-light {
5227
+ color: #fafafa !important;
4562
5228
  }
4563
5229
 
4564
- .radius-top,
4565
- .radius-right,
4566
- .radius-top-right {
4567
- border-top-right-radius: 0.25rem !important;
5230
+ .color-shade {
5231
+ color: #f5f5f5 !important;
4568
5232
  }
4569
5233
 
4570
- .radius-bottom,
4571
- .radius-right,
4572
- .radius-bottom-right {
4573
- border-bottom-right-radius: 0.25rem !important;
5234
+ .color-shade-dark {
5235
+ color: #e0e0e0 !important;
4574
5236
  }
4575
5237
 
4576
- .radius-bottom,
4577
- .radius-left,
4578
- .radius-bottom-left {
4579
- border-bottom-left-radius: 0.25rem !important;
5238
+ .color-night-light {
5239
+ color: #616161 !important;
4580
5240
  }
4581
5241
 
4582
- .radius-lg {
4583
- border-radius: 0.5rem !important;
5242
+ .color-night {
5243
+ color: #424242 !important;
4584
5244
  }
4585
5245
 
4586
- .radius-lg-top,
4587
- .radius-lg-left,
4588
- .radius-lg-top-left {
4589
- border-top-left-radius: 0.5rem !important;
5246
+ .color-night-dark {
5247
+ color: #212121 !important;
4590
5248
  }
4591
5249
 
4592
- .radius-lg-top,
4593
- .radius-lg-right,
4594
- .radius-lg-top-right {
4595
- border-top-right-radius: 0.5rem !important;
5250
+ .color-info-lighter {
5251
+ color: #e1f5fe !important;
4596
5252
  }
4597
5253
 
4598
- .radius-lg-bottom,
4599
- .radius-lg-right,
4600
- .radius-lg-bottom-right {
4601
- border-bottom-right-radius: 0.5rem !important;
5254
+ .color-info-light {
5255
+ color: #4fc3f7 !important;
4602
5256
  }
4603
5257
 
4604
- .radius-lg-bottom,
4605
- .radius-lg-left,
4606
- .radius-lg-bottom-left {
4607
- border-bottom-left-radius: 0.5rem !important;
5258
+ .color-info {
5259
+ color: #03a9f4 !important;
4608
5260
  }
4609
5261
 
4610
- .radius-lg-circle {
4611
- border-radius: 9999px !important;
5262
+ .color-info-dark {
5263
+ color: #0288d1 !important;
4612
5264
  }
4613
5265
 
4614
- .radius-lg-circle-top,
4615
- .radius-lg-circle-left,
4616
- .radius-lg-circle-top-left {
4617
- border-top-left-radius: 9999px !important;
5266
+ .color-info-darker {
5267
+ color: #01579b !important;
4618
5268
  }
4619
5269
 
4620
- .radius-lg-circle-top,
4621
- .radius-lg-circle-right,
4622
- .radius-lg-circle-top-right {
4623
- border-top-right-radius: 9999px !important;
5270
+ .color-success-lighter {
5271
+ color: #e8f5e9 !important;
4624
5272
  }
4625
5273
 
4626
- .radius-lg-circle-bottom,
4627
- .radius-lg-circle-right,
4628
- .radius-lg-circle-bottom-right {
4629
- border-bottom-right-radius: 9999px !important;
5274
+ .color-success-light {
5275
+ color: #81c784 !important;
4630
5276
  }
4631
5277
 
4632
- .radius-lg-circle-bottom,
4633
- .radius-lg-circle-left,
4634
- .radius-lg-circle-bottom-left {
4635
- border-bottom-left-radius: 9999px !important;
5278
+ .color-success {
5279
+ color: #4caf50 !important;
4636
5280
  }
4637
5281
 
4638
- .radius-lg-circle-square {
4639
- border-radius: 0 !important;
5282
+ .color-success-dark {
5283
+ color: #388e3c !important;
4640
5284
  }
4641
5285
 
4642
- .radius-lg-circle-square-top,
4643
- .radius-lg-circle-square-left,
4644
- .radius-lg-circle-square-top-left {
4645
- border-top-left-radius: 0 !important;
5286
+ .color-success-darker {
5287
+ color: #1b5e20 !important;
4646
5288
  }
4647
5289
 
4648
- .radius-lg-circle-square-top,
4649
- .radius-lg-circle-square-right,
4650
- .radius-lg-circle-square-top-right {
4651
- border-top-right-radius: 0 !important;
5290
+ .color-caution-lighter {
5291
+ color: #fff3e0 !important;
4652
5292
  }
4653
5293
 
4654
- .radius-lg-circle-square-bottom,
4655
- .radius-lg-circle-square-right,
4656
- .radius-lg-circle-square-bottom-right {
4657
- border-bottom-right-radius: 0 !important;
5294
+ .color-caution-light {
5295
+ color: #ffb74d !important;
4658
5296
  }
4659
5297
 
4660
- .radius-lg-circle-square-bottom,
4661
- .radius-lg-circle-square-left,
4662
- .radius-lg-circle-square-bottom-left {
4663
- border-bottom-left-radius: 0 !important;
5298
+ .color-caution {
5299
+ color: #ff9800 !important;
4664
5300
  }
4665
5301
 
4666
- .shadow {
4667
- box-shadow: 0 2px 6px var(--vb-shadow-color, hsl(var(--vb-neutral-hs, 214deg, 20%), 20%, 20%)) !important;
5302
+ .color-caution-dark {
5303
+ color: #e64a19 !important;
4668
5304
  }
4669
5305
 
4670
- .shadow-flat {
4671
- box-shadow: 0 0 0 0 transparent !important;
5306
+ .color-caution-darker {
5307
+ color: #bf360c !important;
4672
5308
  }
4673
5309
 
4674
- .shadow-1 {
4675
- box-shadow: 0 1px 3px var(--vb-shadow-color, hsl(var(--vb-neutral-hs, 214deg, 20%), 20%, 20%)) !important;
5310
+ .color-danger-lighter {
5311
+ color: #ffebee !important;
4676
5312
  }
4677
5313
 
4678
- .shadow-2 {
4679
- box-shadow: 0 2px 6px var(--vb-shadow-color, hsl(var(--vb-neutral-hs, 214deg, 20%), 20%, 20%)) !important;
5314
+ .color-danger-light {
5315
+ color: #e57373 !important;
4680
5316
  }
4681
5317
 
4682
- .shadow-3 {
4683
- box-shadow: 0 4px 12px var(--vb-shadow-color, hsl(var(--vb-neutral-hs, 214deg, 20%), 20%, 20%)) !important;
5318
+ .color-danger {
5319
+ color: #f44336 !important;
4684
5320
  }
4685
5321
 
4686
- .shadow-4 {
4687
- box-shadow: 0 8px 18px var(--vb-shadow-color, hsl(var(--vb-neutral-hs, 214deg, 20%), 20%, 20%)) !important;
5322
+ .color-danger-dark {
5323
+ color: #d32f2f !important;
4688
5324
  }
4689
5325
 
4690
- .shadow-5 {
4691
- box-shadow: 0 12px 24px var(--vb-shadow-color, hsl(var(--vb-neutral-hs, 214deg, 20%), 20%, 20%)) !important;
5326
+ .color-danger-darker {
5327
+ color: #b71c1c !important;
4692
5328
  }
4693
5329
 
4694
5330
  .display-inline {
@@ -5040,87 +5676,164 @@ input::-moz-placeholder {
5040
5676
  }
5041
5677
 
5042
5678
  .flex-gap {
5043
- gap: 1em !important;
5679
+ margin-top: -1em !important;
5680
+ margin-left: -1em !important;
5681
+ }
5682
+ .flex-gap > * {
5683
+ margin-top: 1em !important;
5684
+ margin-left: 1em !important;
5044
5685
  }
5045
5686
 
5046
5687
  .flex-gap-none {
5047
- gap: 0 !important;
5688
+ margin-top: 0 !important;
5689
+ margin-left: 0 !important;
5690
+ }
5691
+ .flex-gap-none > * {
5692
+ margin-top: 0 !important;
5693
+ margin-left: 0 !important;
5048
5694
  }
5049
5695
 
5050
5696
  .flex-gap-xs {
5051
- gap: 0.25em !important;
5697
+ margin-top: -0.25em !important;
5698
+ margin-left: -0.25em !important;
5699
+ }
5700
+ .flex-gap-xs > * {
5701
+ margin-top: 0.25em !important;
5702
+ margin-left: 0.25em !important;
5052
5703
  }
5053
5704
 
5054
5705
  .flex-gap-sm {
5055
- gap: 0.5em !important;
5706
+ margin-top: -0.5em !important;
5707
+ margin-left: -0.5em !important;
5708
+ }
5709
+ .flex-gap-sm > * {
5710
+ margin-top: 0.5em !important;
5711
+ margin-left: 0.5em !important;
5056
5712
  }
5057
5713
 
5058
5714
  .flex-gap-md {
5059
- gap: 1em !important;
5715
+ margin-top: -1em !important;
5716
+ margin-left: -1em !important;
5717
+ }
5718
+ .flex-gap-md > * {
5719
+ margin-top: 1em !important;
5720
+ margin-left: 1em !important;
5060
5721
  }
5061
5722
 
5062
5723
  .flex-gap-lg {
5063
- gap: 1.5em !important;
5724
+ margin-top: -1.5em !important;
5725
+ margin-left: -1.5em !important;
5726
+ }
5727
+ .flex-gap-lg > * {
5728
+ margin-top: 1.5em !important;
5729
+ margin-left: 1.5em !important;
5064
5730
  }
5065
5731
 
5066
5732
  .flex-gap-xl {
5067
- gap: 2em !important;
5733
+ margin-top: -2em !important;
5734
+ margin-left: -2em !important;
5735
+ }
5736
+ .flex-gap-xl > * {
5737
+ margin-top: 2em !important;
5738
+ margin-left: 2em !important;
5068
5739
  }
5069
5740
 
5070
5741
  .flex-gap-x {
5071
- column-gap: 1em !important;
5742
+ margin-left: -1em !important;
5743
+ }
5744
+ .flex-gap-x > * {
5745
+ margin-left: 1em !important;
5072
5746
  }
5073
5747
 
5074
5748
  .flex-gap-x-none {
5075
- column-gap: 0 !important;
5749
+ margin-left: 0 !important;
5750
+ }
5751
+ .flex-gap-x-none > * {
5752
+ margin-left: 0 !important;
5076
5753
  }
5077
5754
 
5078
5755
  .flex-gap-x-xs {
5079
- column-gap: 0.25em !important;
5756
+ margin-left: -0.25em !important;
5757
+ }
5758
+ .flex-gap-x-xs > * {
5759
+ margin-left: 0.25em !important;
5080
5760
  }
5081
5761
 
5082
5762
  .flex-gap-x-sm {
5083
- column-gap: 0.5em !important;
5763
+ margin-left: -0.5em !important;
5764
+ }
5765
+ .flex-gap-x-sm > * {
5766
+ margin-left: 0.5em !important;
5084
5767
  }
5085
5768
 
5086
5769
  .flex-gap-x-md {
5087
- column-gap: 1em !important;
5770
+ margin-left: -1em !important;
5771
+ }
5772
+ .flex-gap-x-md > * {
5773
+ margin-left: 1em !important;
5088
5774
  }
5089
5775
 
5090
5776
  .flex-gap-x-lg {
5091
- column-gap: 1.5em !important;
5777
+ margin-left: -1.5em !important;
5778
+ }
5779
+ .flex-gap-x-lg > * {
5780
+ margin-left: 1.5em !important;
5092
5781
  }
5093
5782
 
5094
5783
  .flex-gap-x-xl {
5095
- column-gap: 2em !important;
5784
+ margin-left: -2em !important;
5785
+ }
5786
+ .flex-gap-x-xl > * {
5787
+ margin-left: 2em !important;
5096
5788
  }
5097
5789
 
5098
5790
  .flex-gap-y {
5099
- row-gap: 1em !important;
5791
+ margin-top: -1em !important;
5792
+ }
5793
+ .flex-gap-y > * {
5794
+ margin-top: 1em !important;
5100
5795
  }
5101
5796
 
5102
5797
  .flex-gap-y-none {
5103
- row-gap: 0 !important;
5798
+ margin-top: 0 !important;
5799
+ }
5800
+ .flex-gap-y-none > * {
5801
+ margin-top: 0 !important;
5104
5802
  }
5105
5803
 
5106
5804
  .flex-gap-y-xs {
5107
- row-gap: 0.25em !important;
5805
+ margin-top: -0.25em !important;
5806
+ }
5807
+ .flex-gap-y-xs > * {
5808
+ margin-top: 0.25em !important;
5108
5809
  }
5109
5810
 
5110
5811
  .flex-gap-y-sm {
5111
- row-gap: 0.5em !important;
5812
+ margin-top: -0.5em !important;
5813
+ }
5814
+ .flex-gap-y-sm > * {
5815
+ margin-top: 0.5em !important;
5112
5816
  }
5113
5817
 
5114
5818
  .flex-gap-y-md {
5115
- row-gap: 1em !important;
5819
+ margin-top: -1em !important;
5820
+ }
5821
+ .flex-gap-y-md > * {
5822
+ margin-top: 1em !important;
5116
5823
  }
5117
5824
 
5118
5825
  .flex-gap-y-lg {
5119
- row-gap: 1.5em !important;
5826
+ margin-top: -1.5em !important;
5827
+ }
5828
+ .flex-gap-y-lg > * {
5829
+ margin-top: 1.5em !important;
5120
5830
  }
5121
5831
 
5122
5832
  .flex-gap-y-xl {
5123
- row-gap: 2em !important;
5833
+ margin-top: -2em !important;
5834
+ }
5835
+ .flex-gap-y-xl > * {
5836
+ margin-top: 2em !important;
5124
5837
  }
5125
5838
 
5126
5839
  .font-family-sans {
@@ -5136,7 +5849,7 @@ input::-moz-placeholder {
5136
5849
  }
5137
5850
 
5138
5851
  .font-size-base {
5139
- font-size: 1rem !important;
5852
+ font-size: 16px !important;
5140
5853
  }
5141
5854
 
5142
5855
  .font-size-sm {
@@ -5148,7 +5861,7 @@ input::-moz-placeholder {
5148
5861
  }
5149
5862
 
5150
5863
  .font-leading-base {
5151
- line-height: 1.625 !important;
5864
+ line-height: 1.5 !important;
5152
5865
  }
5153
5866
 
5154
5867
  .font-leading-sm {
@@ -5156,7 +5869,7 @@ input::-moz-placeholder {
5156
5869
  }
5157
5870
 
5158
5871
  .font-leading-lg {
5159
- line-height: 1.875 !important;
5872
+ line-height: 1.625 !important;
5160
5873
  }
5161
5874
 
5162
5875
  .font-kerning-0 {
@@ -5541,66 +6254,6 @@ input::-moz-placeholder {
5541
6254
  max-width: 100% !important;
5542
6255
  }
5543
6256
 
5544
- .overflow-visible {
5545
- overflow: visible !important;
5546
- }
5547
-
5548
- .overflow-x-visible {
5549
- overflow-x: visible !important;
5550
- }
5551
-
5552
- .overflow-y-visible {
5553
- overflow-y: visible !important;
5554
- }
5555
-
5556
- .overflow-hidden {
5557
- overflow: hidden !important;
5558
- }
5559
-
5560
- .overflow-x-hidden {
5561
- overflow-x: hidden !important;
5562
- }
5563
-
5564
- .overflow-y-hidden {
5565
- overflow-y: hidden !important;
5566
- }
5567
-
5568
- .overflow-clip {
5569
- overflow: clip !important;
5570
- }
5571
-
5572
- .overflow-x-clip {
5573
- overflow-x: clip !important;
5574
- }
5575
-
5576
- .overflow-y-clip {
5577
- overflow-y: clip !important;
5578
- }
5579
-
5580
- .overflow-scroll {
5581
- overflow: scroll !important;
5582
- }
5583
-
5584
- .overflow-x-scroll {
5585
- overflow-x: scroll !important;
5586
- }
5587
-
5588
- .overflow-y-scroll {
5589
- overflow-y: scroll !important;
5590
- }
5591
-
5592
- .overflow-auto {
5593
- overflow: auto !important;
5594
- }
5595
-
5596
- .overflow-x-auto {
5597
- overflow-x: auto !important;
5598
- }
5599
-
5600
- .overflow-y-auto {
5601
- overflow-y: auto !important;
5602
- }
5603
-
5604
6257
  .padding {
5605
6258
  padding: 1em !important;
5606
6259
  }
@@ -5877,154 +6530,6 @@ input::-moz-placeholder {
5877
6530
  white-space: nowrap !important;
5878
6531
  }
5879
6532
 
5880
- :root {
5881
- --vb-primary-hs: 152deg, 60%;
5882
- --vb-primary: var(--vb-primary-50);
5883
- --vb-primary-0: hsl(var(--vb-primary-hs), 0%);
5884
- --vb-primary-5: hsl(var(--vb-primary-hs), 5%);
5885
- --vb-primary-10: hsl(var(--vb-primary-hs), 10%);
5886
- --vb-primary-12: hsl(var(--vb-primary-hs), 12%);
5887
- --vb-primary-15: hsl(var(--vb-primary-hs), 15%);
5888
- --vb-primary-20: hsl(var(--vb-primary-hs), 20%);
5889
- --vb-primary-30: hsl(var(--vb-primary-hs), 30%);
5890
- --vb-primary-40: hsl(var(--vb-primary-hs), 40%);
5891
- --vb-primary-50: hsl(var(--vb-primary-hs), 50%);
5892
- --vb-primary-60: hsl(var(--vb-primary-hs), 60%);
5893
- --vb-primary-70: hsl(var(--vb-primary-hs), 70%);
5894
- --vb-primary-80: hsl(var(--vb-primary-hs), 80%);
5895
- --vb-primary-90: hsl(var(--vb-primary-hs), 90%);
5896
- --vb-primary-95: hsl(var(--vb-primary-hs), 95%);
5897
- --vb-primary-98: hsl(var(--vb-primary-hs), 98%);
5898
- --vb-primary-100: hsl(var(--vb-primary-hs), 100%);
5899
- --vb-secondary-hs: 214deg, 50%;
5900
- --vb-secondary: var(--vb-secondary-50);
5901
- --vb-secondary-0: hsl(var(--vb-secondary-hs), 0%);
5902
- --vb-secondary-5: hsl(var(--vb-secondary-hs), 5%);
5903
- --vb-secondary-10: hsl(var(--vb-secondary-hs), 10%);
5904
- --vb-secondary-12: hsl(var(--vb-secondary-hs), 12%);
5905
- --vb-secondary-15: hsl(var(--vb-secondary-hs), 15%);
5906
- --vb-secondary-20: hsl(var(--vb-secondary-hs), 20%);
5907
- --vb-secondary-30: hsl(var(--vb-secondary-hs), 30%);
5908
- --vb-secondary-40: hsl(var(--vb-secondary-hs), 40%);
5909
- --vb-secondary-50: hsl(var(--vb-secondary-hs), 50%);
5910
- --vb-secondary-60: hsl(var(--vb-secondary-hs), 60%);
5911
- --vb-secondary-70: hsl(var(--vb-secondary-hs), 70%);
5912
- --vb-secondary-80: hsl(var(--vb-secondary-hs), 80%);
5913
- --vb-secondary-90: hsl(var(--vb-secondary-hs), 90%);
5914
- --vb-secondary-95: hsl(var(--vb-secondary-hs), 95%);
5915
- --vb-secondary-98: hsl(var(--vb-secondary-hs), 98%);
5916
- --vb-secondary-100: hsl(var(--vb-secondary-hs), 100%);
5917
- --vb-neutral-hs: 214deg, 20%;
5918
- --vb-neutral: var(--vb-neutral-50);
5919
- --vb-neutral-0: hsl(var(--vb-neutral-hs), 0%);
5920
- --vb-neutral-5: hsl(var(--vb-neutral-hs), 5%);
5921
- --vb-neutral-10: hsl(var(--vb-neutral-hs), 10%);
5922
- --vb-neutral-12: hsl(var(--vb-neutral-hs), 12%);
5923
- --vb-neutral-15: hsl(var(--vb-neutral-hs), 15%);
5924
- --vb-neutral-20: hsl(var(--vb-neutral-hs), 20%);
5925
- --vb-neutral-30: hsl(var(--vb-neutral-hs), 30%);
5926
- --vb-neutral-40: hsl(var(--vb-neutral-hs), 40%);
5927
- --vb-neutral-50: hsl(var(--vb-neutral-hs), 50%);
5928
- --vb-neutral-60: hsl(var(--vb-neutral-hs), 60%);
5929
- --vb-neutral-70: hsl(var(--vb-neutral-hs), 70%);
5930
- --vb-neutral-80: hsl(var(--vb-neutral-hs), 80%);
5931
- --vb-neutral-90: hsl(var(--vb-neutral-hs), 90%);
5932
- --vb-neutral-95: hsl(var(--vb-neutral-hs), 95%);
5933
- --vb-neutral-98: hsl(var(--vb-neutral-hs), 98%);
5934
- --vb-neutral-100: hsl(var(--vb-neutral-hs), 100%);
5935
- --vb-important-hs: 0deg, 80%;
5936
- --vb-important: var(--vb-important-50);
5937
- --vb-important-0: hsl(var(--vb-important-hs), 0%);
5938
- --vb-important-5: hsl(var(--vb-important-hs), 5%);
5939
- --vb-important-10: hsl(var(--vb-important-hs), 10%);
5940
- --vb-important-12: hsl(var(--vb-important-hs), 12%);
5941
- --vb-important-15: hsl(var(--vb-important-hs), 15%);
5942
- --vb-important-20: hsl(var(--vb-important-hs), 20%);
5943
- --vb-important-30: hsl(var(--vb-important-hs), 30%);
5944
- --vb-important-40: hsl(var(--vb-important-hs), 40%);
5945
- --vb-important-50: hsl(var(--vb-important-hs), 50%);
5946
- --vb-important-60: hsl(var(--vb-important-hs), 60%);
5947
- --vb-important-70: hsl(var(--vb-important-hs), 70%);
5948
- --vb-important-80: hsl(var(--vb-important-hs), 80%);
5949
- --vb-important-90: hsl(var(--vb-important-hs), 90%);
5950
- --vb-important-95: hsl(var(--vb-important-hs), 95%);
5951
- --vb-important-98: hsl(var(--vb-important-hs), 98%);
5952
- --vb-important-100: hsl(var(--vb-important-hs), 100%);
5953
- }
5954
-
5955
- :root, .vb-theme-root {
5956
- --vb-background: var(--vb-neutral-100, hsl(214, 20%, 100%));
5957
- --vb-background-dark: var(--vb-neutral-98, hsl(214, 20%, 98%));
5958
- --vb-background-darker: var(--vb-neutral-95, hsl(214, 20%, 95%));
5959
- --vb-background-hover: rgba(0, 0, 0, 0.05);
5960
- --vb-background-focus: rgba(0, 0, 0, 0.05);
5961
- --vb-background-active: rgba(0, 0, 0, 0.1);
5962
- --vb-foreground: var(--vb-neutral-20, hsl(214, 20%, 20%));
5963
- --vb-foreground-light: var(--vb-neutral-40, hsl(214, 20%, 40%));
5964
- --vb-foreground-lighter: var(--vb-neutral-60, hsl(214, 20%, 60%));
5965
- --vb-border-color: rgba(0, 0, 0, 0.1);
5966
- --vb-border-color-dark: rgba(0, 0, 0, 0.2);
5967
- --vb-border-color-darker: rgba(0, 0, 0, 0.3);
5968
- --vb-shadow-color: hsl(var(--vb-neutral-hs, 214deg, 20%), 20%, 20%);
5969
- --vb-focus-visible: var(--vb-primary-50, hsl(152, 60%, 50%));
5970
- color-scheme: light;
5971
- }
5972
- @media (prefers-color-scheme: dark) {
5973
- :root, .vb-theme-root {
5974
- --vb-background: var(--vb-neutral-10, hsl(214, 20%, 10%));
5975
- --vb-background-dark: var(--vb-neutral-12, hsl(214, 20%, 12%));
5976
- --vb-background-darker: var(--vb-neutral-15, hsl(214, 20%, 15%));
5977
- --vb-background-hover: rgba(255, 255, 255, 0.05);
5978
- --vb-background-focus: rgba(255, 255, 255, 0.05);
5979
- --vb-background-active: rgba(255, 255, 255, 0.1);
5980
- --vb-foreground: var(--vb-neutral-90, hsl(214, 20%, 90%));
5981
- --vb-foreground-light: var(--vb-neutral-70, hsl(214, 20%, 70%));
5982
- --vb-foreground-lighter: var(--vb-neutral-50, hsl(214, 20%, 50%));
5983
- --vb-border-color: rgba(255, 255, 255, 0.1);
5984
- --vb-border-color-dark: rgba(255, 255, 255, 0.2);
5985
- --vb-border-color-darker: rgba(255, 255, 255, 0.3);
5986
- --vb-shadow-color: hsl(var(--vb-neutral-hs, 214deg, 20%), 0%, 20%);
5987
- --vb-focus-visible: var(--vb-primary-50, hsl(152, 60%, 50%));
5988
- color-scheme: dark;
5989
- }
5990
- }
5991
-
5992
- .vb-theme-light {
5993
- --vb-background: var(--vb-neutral-100, hsl(214, 20%, 100%));
5994
- --vb-background-dark: var(--vb-neutral-98, hsl(214, 20%, 98%));
5995
- --vb-background-darker: var(--vb-neutral-95, hsl(214, 20%, 95%));
5996
- --vb-background-hover: rgba(0, 0, 0, 0.05);
5997
- --vb-background-focus: rgba(0, 0, 0, 0.05);
5998
- --vb-background-active: rgba(0, 0, 0, 0.1);
5999
- --vb-foreground: var(--vb-neutral-20, hsl(214, 20%, 20%));
6000
- --vb-foreground-light: var(--vb-neutral-40, hsl(214, 20%, 40%));
6001
- --vb-foreground-lighter: var(--vb-neutral-60, hsl(214, 20%, 60%));
6002
- --vb-border-color: rgba(0, 0, 0, 0.1);
6003
- --vb-border-color-dark: rgba(0, 0, 0, 0.2);
6004
- --vb-border-color-darker: rgba(0, 0, 0, 0.3);
6005
- --vb-shadow-color: hsl(var(--vb-neutral-hs, 214deg, 20%), 20%, 20%);
6006
- --vb-focus-visible: var(--vb-primary-50, hsl(152, 60%, 50%));
6007
- color-scheme: light;
6008
- }
6009
-
6010
- .vb-theme-dark {
6011
- --vb-background: var(--vb-neutral-10, hsl(214, 20%, 10%));
6012
- --vb-background-dark: var(--vb-neutral-12, hsl(214, 20%, 12%));
6013
- --vb-background-darker: var(--vb-neutral-15, hsl(214, 20%, 15%));
6014
- --vb-background-hover: rgba(255, 255, 255, 0.05);
6015
- --vb-background-focus: rgba(255, 255, 255, 0.05);
6016
- --vb-background-active: rgba(255, 255, 255, 0.1);
6017
- --vb-foreground: var(--vb-neutral-90, hsl(214, 20%, 90%));
6018
- --vb-foreground-light: var(--vb-neutral-70, hsl(214, 20%, 70%));
6019
- --vb-foreground-lighter: var(--vb-neutral-50, hsl(214, 20%, 50%));
6020
- --vb-border-color: rgba(255, 255, 255, 0.1);
6021
- --vb-border-color-dark: rgba(255, 255, 255, 0.2);
6022
- --vb-border-color-darker: rgba(255, 255, 255, 0.3);
6023
- --vb-shadow-color: hsl(var(--vb-neutral-hs, 214deg, 20%), 0%, 20%);
6024
- --vb-focus-visible: var(--vb-primary-50, hsl(152, 60%, 50%));
6025
- color-scheme: dark;
6026
- }
6027
-
6028
6533
  :root {
6029
6534
  --vb-breakpoint-xs: 480px;
6030
6535
  --vb-breakpoint-sm: 620px;
@@ -6033,17 +6538,4 @@ input::-moz-placeholder {
6033
6538
  --vb-breakpoint-xl: 1380px;
6034
6539
  }
6035
6540
 
6036
- :root {
6037
- --vb-border-radius: 0.25rem;
6038
- --vb-border-radius-lg: 0.5rem;
6039
- --vb-border-radius-circle: 9999px;
6040
- }
6041
-
6042
- :root {
6043
- --vb-transition-duration: 0.3s;
6044
- --vb-transition-duration-short: 0.15s;
6045
- --vb-transition-duration-long: 0.6s;
6046
- --vb-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
6047
- }
6048
-
6049
- /*# sourceMappingURL=index.css.map */
6541
+ /*# sourceMappingURL=styles.css.map */