vrembem 3.0.18 → 3.0.20

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;
666
779
  }
667
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;
1158
+ }
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,
@@ -755,7 +1272,7 @@ input::-moz-placeholder {
755
1272
 
756
1273
  .card__screen {
757
1274
  z-index: 2;
758
- background: var(--vb-neutral-10, hsl(214, 20%, 10%));
1275
+ background: #424242;
759
1276
  opacity: 0.7;
760
1277
  }
761
1278
 
@@ -780,13 +1297,26 @@ input::-moz-placeholder {
780
1297
  opacity: 0.7;
781
1298
  }
782
1299
  }
1300
+ .card_invert {
1301
+ background: #424242;
1302
+ color: #fff;
1303
+ }
1304
+ .card_invert .card__body,
1305
+ .card_invert .card__header,
1306
+ .card_invert .card__footer {
1307
+ border-color: rgba(255, 255, 255, 0.1);
1308
+ }
1309
+ .card_invert .card__screen {
1310
+ background: #424242;
1311
+ }
1312
+
783
1313
  .card_link {
784
1314
  transform: translate(0, 0);
785
- box-shadow: 0 2px 6px var(--vb-shadow-color, hsl(var(--vb-neutral-hs, 214deg, 20%), 20%, 20%));
1315
+ box-shadow: 0 0 2px 1px rgba(33, 33, 33, 0.05), 0 2px 6px rgba(33, 33, 33, 0.2);
786
1316
  }
787
1317
  .card_link:hover, .card_link:focus, .card_link:focus-within {
788
1318
  transform: translate(0, -0.25em);
789
- box-shadow: 0 4px 12px var(--vb-shadow-color, hsl(var(--vb-neutral-hs, 214deg, 20%), 20%, 20%));
1319
+ box-shadow: 0 0 2px 1px rgba(33, 33, 33, 0.05), 0 4px 12px rgba(33, 33, 33, 0.2);
790
1320
  }
791
1321
 
792
1322
  .card_zoom .card__background {
@@ -823,9 +1353,9 @@ input::-moz-placeholder {
823
1353
  display: flex;
824
1354
  align-items: center;
825
1355
  justify-content: center;
826
- border: 2px solid var(--vb-neutral-50, hsl(214, 20%, 50%));
1356
+ border: 2px solid #bdbdbd;
827
1357
  border-radius: 0.25rem;
828
- background-color: white;
1358
+ background-color: #fff;
829
1359
  color: transparent;
830
1360
  }
831
1361
 
@@ -850,26 +1380,26 @@ input::-moz-placeholder {
850
1380
  cursor: pointer;
851
1381
  }
852
1382
  .checkbox__native:hover + .checkbox__background {
853
- background-color: rgba(var(--vb-primary-50, hsl(152, 60%, 50%)), 0.1);
1383
+ background-color: rgba(0, 188, 212, 0.1);
854
1384
  }
855
1385
  .checkbox__native:hover + .checkbox__background .checkbox__box {
856
- border-color: var(--vb-primary-50, hsl(152, 60%, 50%));
1386
+ border-color: #00bcd4;
857
1387
  }
858
1388
  .checkbox__native:focus + .checkbox__background {
859
- background-color: rgba(var(--vb-primary-50, hsl(152, 60%, 50%)), 0.1);
1389
+ background-color: rgba(0, 188, 212, 0.1);
860
1390
  }
861
1391
  .checkbox__native:focus + .checkbox__background .checkbox__box {
862
- border-color: var(--vb-primary-50, hsl(152, 60%, 50%));
1392
+ border-color: #00bcd4;
863
1393
  }
864
1394
  .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);
1395
+ background-color: rgba(0, 188, 212, 0.2);
866
1396
  }
867
1397
  .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%));
1398
+ border-color: #00bcd4;
869
1399
  }
870
1400
  .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%));
1401
+ border-color: #00bcd4;
1402
+ background-color: #00bcd4;
873
1403
  }
874
1404
  .checkbox__native:checked + .checkbox__background .checkbox__icon {
875
1405
  transition-property: opacity, background-position;
@@ -879,8 +1409,8 @@ input::-moz-placeholder {
879
1409
  opacity: 1;
880
1410
  }
881
1411
  .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%));
1412
+ border-color: #00bcd4;
1413
+ background-color: #00bcd4;
884
1414
  }
885
1415
  .checkbox__native:indeterminate + .checkbox__background .checkbox__icon {
886
1416
  transition-property: opacity, background-position;
@@ -934,10 +1464,9 @@ input::-moz-placeholder {
934
1464
  flex-direction: column;
935
1465
  overflow: auto;
936
1466
  border-radius: 0.25rem;
937
- background: var(--vb-background, var(--vb-neutral-100, hsl(214, 20%, 100%)));
1467
+ background: #fff;
938
1468
  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%)));
1469
+ box-shadow: 0 0 2px 1px rgba(33, 33, 33, 0.05), 0 8px 18px rgba(33, 33, 33, 0.2);
941
1470
  -webkit-overflow-scrolling: touch;
942
1471
  }
943
1472
 
@@ -954,7 +1483,7 @@ input::-moz-placeholder {
954
1483
  z-index: 1;
955
1484
  display: flex;
956
1485
  align-items: center;
957
- background: var(--vb-background, var(--vb-neutral-100, hsl(214, 20%, 100%)));
1486
+ background: #fff;
958
1487
  vertical-align: middle;
959
1488
  }
960
1489
  .dialog__header > * + *,
@@ -964,26 +1493,26 @@ input::-moz-placeholder {
964
1493
 
965
1494
  .dialog__header {
966
1495
  top: 0;
967
- border-bottom: 1px solid var(--vb-border-color, rgba(0, 0, 0, 0.1));
1496
+ border-bottom: 1px solid rgba(0, 0, 0, 0.1);
968
1497
  }
969
1498
 
970
1499
  .dialog__body {
971
1500
  flex-grow: 1;
972
1501
  }
973
1502
  .dialog__body + .dialog__body {
974
- border-top: 1px solid var(--vb-border-color, rgba(0, 0, 0, 0.1));
1503
+ border-top: 1px solid rgba(0, 0, 0, 0.1);
975
1504
  }
976
1505
 
977
1506
  .dialog__footer {
978
1507
  bottom: 0;
979
- border-top: 1px solid var(--vb-border-color, rgba(0, 0, 0, 0.1));
1508
+ border-top: 1px solid rgba(0, 0, 0, 0.1);
980
1509
  }
981
1510
 
982
1511
  .dialog__title {
983
1512
  flex-grow: 1;
984
1513
  font-size: 1.125rem;
985
1514
  font-weight: 600;
986
- line-height: 1.875;
1515
+ line-height: 1.625;
987
1516
  }
988
1517
 
989
1518
  .dialog > .dialog__close {
@@ -995,15 +1524,6 @@ input::-moz-placeholder {
995
1524
  padding-right: 3.5em;
996
1525
  }
997
1526
 
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
1527
  /**
1008
1528
  * Required structure styles
1009
1529
  */
@@ -1046,17 +1566,17 @@ input::-moz-placeholder {
1046
1566
  height: 100%;
1047
1567
  overflow: auto;
1048
1568
  border-radius: 0;
1049
- background: var(--vb-background-darker, var(--vb-neutral-95, hsl(214, 20%, 95%)));
1569
+ background: #f5f5f5;
1050
1570
  box-shadow: none;
1051
1571
  opacity: 0;
1052
1572
  -webkit-overflow-scrolling: touch;
1053
1573
  }
1054
1574
  .drawer__dialog .dialog__header,
1055
1575
  .drawer__dialog .dialog__footer {
1056
- background: var(--vb-background-darker, var(--vb-neutral-95, hsl(214, 20%, 95%)));
1576
+ background: #f5f5f5;
1057
1577
  }
1058
1578
  .drawer__dialog .dialog__body {
1059
- background: var(--vb-background-darker, var(--vb-neutral-95, hsl(214, 20%, 95%)));
1579
+ background: #f5f5f5;
1060
1580
  }
1061
1581
 
1062
1582
  /**
@@ -1080,14 +1600,14 @@ input::-moz-placeholder {
1080
1600
  .drawer.is-opening,
1081
1601
  .drawer.is-closing {
1082
1602
  transition-property: background-color, opacity, transform;
1083
- transition-duration: var(--vb-drawer-transition-duration);
1084
- transition-timing-function: var(--vb-drawer-transition-timing-function);
1603
+ transition-duration: 0.3s;
1604
+ transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
1085
1605
  }
1086
1606
  .drawer.is-opening .drawer__dialog,
1087
1607
  .drawer.is-closing .drawer__dialog {
1088
1608
  transition-property: opacity, transform;
1089
- transition-duration: var(--vb-drawer-transition-duration);
1090
- transition-timing-function: var(--vb-drawer-transition-timing-function);
1609
+ transition-duration: 0.3s;
1610
+ transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
1091
1611
  }
1092
1612
 
1093
1613
  .drawer.is-opening .drawer__dialog,
@@ -1153,15 +1673,7 @@ input::-moz-placeholder {
1153
1673
  height: 0;
1154
1674
  overflow: hidden;
1155
1675
  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;
1676
+ background-color: rgba(255, 255, 255, 0);
1165
1677
  }
1166
1678
  .drawer_modal .drawer__dialog {
1167
1679
  position: absolute;
@@ -1170,8 +1682,8 @@ input::-moz-placeholder {
1170
1682
  width: 18em;
1171
1683
  max-width: 80%;
1172
1684
  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%));
1685
+ background-color: #fff;
1686
+ box-shadow: 0 0 2px 1px rgba(33, 33, 33, 0.05), 0 12px 24px rgba(33, 33, 33, 0.2);
1175
1687
  }
1176
1688
  .drawer_modal.drawer_switch {
1177
1689
  right: auto;
@@ -1185,10 +1697,10 @@ input::-moz-placeholder {
1185
1697
  }
1186
1698
  .drawer_modal .dialog__header,
1187
1699
  .drawer_modal .dialog__footer {
1188
- background: white;
1700
+ background: #fff;
1189
1701
  }
1190
1702
  .drawer_modal .dialog__body {
1191
- background: white;
1703
+ background: #fff;
1192
1704
  }
1193
1705
 
1194
1706
  /**
@@ -1202,18 +1714,10 @@ input::-moz-placeholder {
1202
1714
  height: 100%;
1203
1715
  }
1204
1716
 
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
1717
  .drawer_modal.is-opening,
1211
1718
  .drawer_modal.is-opened {
1212
1719
  transform: translateX(0);
1213
- }
1214
- .drawer_modal.is-opening::before,
1215
- .drawer_modal.is-opened::before {
1216
- opacity: 0.8;
1720
+ background-color: rgba(66, 66, 66, 0.8);
1217
1721
  }
1218
1722
  .drawer_modal.is-opening .drawer__dialog,
1219
1723
  .drawer_modal.is-opened .drawer__dialog {
@@ -1222,6 +1726,7 @@ input::-moz-placeholder {
1222
1726
 
1223
1727
  .drawer_modal.is-closing {
1224
1728
  transform: translateX(0);
1729
+ background-color: rgba(66, 66, 66, 0);
1225
1730
  }
1226
1731
  .drawer_modal.is-closing .drawer__dialog {
1227
1732
  transform: translateX(-100%);
@@ -1826,42 +2331,39 @@ input::-moz-placeholder {
1826
2331
  }
1827
2332
  .icon {
1828
2333
  stroke: currentcolor;
1829
- stroke-width: 2;
2334
+ stroke-width: 2px;
1830
2335
  fill: none;
1831
2336
  display: inline-block;
1832
2337
  box-sizing: content-box;
1833
2338
  flex-shrink: 0;
1834
2339
  width: 1em;
1835
2340
  height: 1em;
2341
+ stroke-width: 2px;
1836
2342
  stroke-linecap: round;
1837
2343
  stroke-linejoin: round;
1838
- font-size: 1.5em;
2344
+ font-size: 1.25em;
1839
2345
  vertical-align: top;
1840
2346
  }
1841
2347
 
1842
2348
  .icon_size_xs {
1843
- stroke-width: 3.5;
1844
2349
  font-size: 0.75em;
1845
2350
  }
1846
2351
 
1847
2352
  .icon_size_sm {
1848
- stroke-width: 2.5;
1849
- font-size: 1.125em;
2353
+ font-size: 1em;
1850
2354
  }
1851
2355
 
1852
2356
  .icon_size_lg {
1853
- stroke-width: 1.75;
1854
- font-size: 2em;
2357
+ font-size: 1.75em;
1855
2358
  }
1856
2359
 
1857
2360
  .icon_size_xl {
1858
- stroke-width: 1.3;
1859
- font-size: 3em;
2361
+ font-size: 2.25em;
1860
2362
  }
1861
2363
 
1862
2364
  .icon_style_stroke {
1863
2365
  stroke: currentcolor;
1864
- stroke-width: 2;
2366
+ stroke-width: 2px;
1865
2367
  fill: none;
1866
2368
  }
1867
2369
 
@@ -1871,6 +2373,228 @@ input::-moz-placeholder {
1871
2373
  fill: currentcolor;
1872
2374
  }
1873
2375
 
2376
+ .icon-action {
2377
+ width: 24px;
2378
+ height: 24px;
2379
+ position: relative;
2380
+ display: inline-flex;
2381
+ flex-shrink: 0;
2382
+ align-items: center;
2383
+ justify-content: center;
2384
+ transition-property: box-shadow, outline, outline-offset;
2385
+ transition-duration: 0.15s;
2386
+ transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
2387
+ outline: none;
2388
+ border-radius: 9999px;
2389
+ background: rgba(0, 0, 0, 0.4);
2390
+ background-clip: border-box;
2391
+ box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
2392
+ color: #fff;
2393
+ cursor: pointer;
2394
+ }
2395
+ .icon-action:disabled:not(.is-loading) {
2396
+ opacity: 0.6;
2397
+ pointer-events: none;
2398
+ }
2399
+ .icon-action:hover {
2400
+ background-color: rgba(0, 0, 0, 0.5);
2401
+ }
2402
+ .icon-action:focus {
2403
+ background-color: rgba(0, 0, 0, 0.5);
2404
+ box-shadow: 0 0 0 0.2rem rgba(0, 0, 0, 0.2);
2405
+ }
2406
+ .icon-action:active {
2407
+ background-color: rgba(0, 0, 0, 0.6);
2408
+ }
2409
+ .icon-action .icon {
2410
+ stroke-width: 2.5px;
2411
+ font-size: 0.875rem;
2412
+ }
2413
+ .icon-action.is-loading {
2414
+ color: transparent !important;
2415
+ pointer-events: none;
2416
+ }
2417
+ .icon-action.is-loading::after {
2418
+ width: 0.7em;
2419
+ height: 0.7em;
2420
+ content: "";
2421
+ position: absolute;
2422
+ top: calc(50% - 0.7em * 0.5);
2423
+ left: calc(50% - 0.7em * 0.5);
2424
+ animation: spin 0.6s infinite linear;
2425
+ border: 2px solid;
2426
+ border-radius: 9999px;
2427
+ border-color: #fff #fff transparent transparent;
2428
+ }
2429
+
2430
+ @keyframes spin {
2431
+ from {
2432
+ transform: rotate(0deg);
2433
+ }
2434
+ to {
2435
+ transform: rotate(360deg);
2436
+ }
2437
+ }
2438
+ .icon-action_invert {
2439
+ border-color: transparent;
2440
+ background-color: rgba(255, 255, 255, 0.5);
2441
+ box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
2442
+ color: #212121;
2443
+ }
2444
+ .icon-action_invert:hover {
2445
+ border-color: transparent;
2446
+ background-color: rgba(255, 255, 255, 0.6);
2447
+ }
2448
+ .icon-action_invert:focus {
2449
+ border-color: transparent;
2450
+ background-color: rgba(255, 255, 255, 0.6);
2451
+ box-shadow: 0 0 0 0.2rem rgba(255, 255, 255, 0.25);
2452
+ }
2453
+ .icon-action_invert:active {
2454
+ border-color: transparent;
2455
+ background-color: rgba(255, 255, 255, 0.7);
2456
+ }
2457
+ .icon-action_invert.is-loading::after {
2458
+ border-color: #212121 #212121 transparent transparent;
2459
+ }
2460
+
2461
+ .icon-action_state_info {
2462
+ border-color: transparent;
2463
+ background-color: #03a9f4;
2464
+ box-shadow: 0 0 0 0 rgba(3, 169, 244, 0);
2465
+ color: #fff;
2466
+ }
2467
+ .icon-action_state_info:hover {
2468
+ border-color: transparent;
2469
+ background-color: #0398dc;
2470
+ }
2471
+ .icon-action_state_info:focus {
2472
+ border-color: transparent;
2473
+ background-color: #0398dc;
2474
+ box-shadow: 0 0 0 0.2rem rgba(3, 169, 244, 0.5);
2475
+ }
2476
+ .icon-action_state_info:active {
2477
+ border-color: transparent;
2478
+ background-color: #0287c3;
2479
+ }
2480
+ .icon-action_state_info.is-loading::after {
2481
+ border-color: #fff #fff transparent transparent;
2482
+ }
2483
+
2484
+ .icon-action_state_success {
2485
+ border-color: transparent;
2486
+ background-color: #4caf50;
2487
+ box-shadow: 0 0 0 0 rgba(76, 175, 80, 0);
2488
+ color: #fff;
2489
+ }
2490
+ .icon-action_state_success:hover {
2491
+ border-color: transparent;
2492
+ background-color: #449e48;
2493
+ }
2494
+ .icon-action_state_success:focus {
2495
+ border-color: transparent;
2496
+ background-color: #449e48;
2497
+ box-shadow: 0 0 0 0.2rem rgba(76, 175, 80, 0.5);
2498
+ }
2499
+ .icon-action_state_success:active {
2500
+ border-color: transparent;
2501
+ background-color: #3d8c40;
2502
+ }
2503
+ .icon-action_state_success.is-loading::after {
2504
+ border-color: #fff #fff transparent transparent;
2505
+ }
2506
+
2507
+ .icon-action_state_caution {
2508
+ border-color: transparent;
2509
+ background-color: #ff9800;
2510
+ box-shadow: 0 0 0 0 rgba(255, 152, 0, 0);
2511
+ color: #fff;
2512
+ }
2513
+ .icon-action_state_caution:hover {
2514
+ border-color: transparent;
2515
+ background-color: #e68900;
2516
+ }
2517
+ .icon-action_state_caution:focus {
2518
+ border-color: transparent;
2519
+ background-color: #e68900;
2520
+ box-shadow: 0 0 0 0.2rem rgba(255, 152, 0, 0.5);
2521
+ }
2522
+ .icon-action_state_caution:active {
2523
+ border-color: transparent;
2524
+ background-color: #cc7a00;
2525
+ }
2526
+ .icon-action_state_caution.is-loading::after {
2527
+ border-color: #fff #fff transparent transparent;
2528
+ }
2529
+
2530
+ .icon-action_state_danger {
2531
+ border-color: transparent;
2532
+ background-color: #f44336;
2533
+ box-shadow: 0 0 0 0 rgba(244, 67, 54, 0);
2534
+ color: #fff;
2535
+ }
2536
+ .icon-action_state_danger:hover {
2537
+ border-color: transparent;
2538
+ background-color: #f2291a;
2539
+ }
2540
+ .icon-action_state_danger:focus {
2541
+ border-color: transparent;
2542
+ background-color: #f2291a;
2543
+ box-shadow: 0 0 0 0.2rem rgba(244, 67, 54, 0.5);
2544
+ }
2545
+ .icon-action_state_danger:active {
2546
+ border-color: transparent;
2547
+ background-color: #e21b0c;
2548
+ }
2549
+ .icon-action_state_danger.is-loading::after {
2550
+ border-color: #fff #fff transparent transparent;
2551
+ }
2552
+
2553
+ .icon-action_subtle {
2554
+ border-color: transparent;
2555
+ background-color: transparent;
2556
+ box-shadow: none;
2557
+ color: #212121;
2558
+ }
2559
+ .icon-action_subtle:hover {
2560
+ border-color: transparent;
2561
+ background-color: rgba(33, 33, 33, 0.1);
2562
+ }
2563
+ .icon-action_subtle:focus {
2564
+ border-color: transparent;
2565
+ background-color: rgba(33, 33, 33, 0.1);
2566
+ box-shadow: none;
2567
+ }
2568
+ .icon-action_subtle:active {
2569
+ border-color: transparent;
2570
+ background-color: rgba(33, 33, 33, 0.15);
2571
+ }
2572
+ .icon-action_subtle.is-loading::after {
2573
+ border-color: #212121 #212121 transparent transparent;
2574
+ }
2575
+ .icon-action_subtle.icon-action_invert {
2576
+ border-color: transparent;
2577
+ background-color: transparent;
2578
+ box-shadow: none;
2579
+ color: #fff;
2580
+ }
2581
+ .icon-action_subtle.icon-action_invert:hover {
2582
+ border-color: transparent;
2583
+ background-color: rgba(255, 255, 255, 0.1);
2584
+ }
2585
+ .icon-action_subtle.icon-action_invert:focus {
2586
+ border-color: transparent;
2587
+ background-color: rgba(255, 255, 255, 0.1);
2588
+ box-shadow: none;
2589
+ }
2590
+ .icon-action_subtle.icon-action_invert:active {
2591
+ border-color: transparent;
2592
+ background-color: rgba(255, 255, 255, 0.15);
2593
+ }
2594
+ .icon-action_subtle.icon-action_invert.is-loading::after {
2595
+ border-color: #fff #fff transparent transparent;
2596
+ }
2597
+
1874
2598
  .input {
1875
2599
  position: relative;
1876
2600
  display: block;
@@ -1882,34 +2606,34 @@ input::-moz-placeholder {
1882
2606
  transition-duration: 0.15s;
1883
2607
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
1884
2608
  outline: none;
1885
- border: 1px solid var(--vb-border-color-dark, rgba(0, 0, 0, 0.2));
2609
+ border: 1px solid rgba(0, 0, 0, 0.2);
1886
2610
  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%)));
2611
+ background: #fff;
2612
+ box-shadow: 0 0 0 0 rgba(0, 188, 212, 0), inset 0 0.1rem 0.2rem rgba(0, 0, 0, 0.1);
2613
+ color: #212121;
1890
2614
  font-family: blinkmacsystemfont, -apple-system, system-ui, "Segoe UI", "Roboto", "Helvetica Neue", arial, sans-serif;
1891
2615
  font-size: 16px;
1892
- line-height: 1.625;
2616
+ line-height: 1.5;
1893
2617
  -moz-appearance: none;
1894
2618
  -webkit-appearance: none;
1895
2619
  appearance: none;
1896
2620
  }
1897
2621
  .input:hover {
1898
- border-color: var(--vb-border-color-darker, rgba(0, 0, 0, 0.3));
2622
+ border-color: rgba(0, 0, 0, 0.5);
1899
2623
  }
1900
2624
  .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);
2625
+ border-color: #00bcd4;
2626
+ box-shadow: 0 0 0 0.2rem rgba(0, 188, 212, 0.5), inset 0 0 0 rgba(0, 0, 0, 0);
1903
2627
  }
1904
2628
  .input:disabled {
1905
- background-color: var(--vb-background-darker, var(--vb-neutral-95, hsl(214, 20%, 95%)));
2629
+ background-color: #f5f5f5;
1906
2630
  pointer-events: none;
1907
2631
  }
1908
2632
  .input:read-only {
1909
- background-color: var(--vb-background-darker, var(--vb-neutral-95, hsl(214, 20%, 95%)));
2633
+ background-color: #f5f5f5;
1910
2634
  }
1911
2635
  .input::placeholder {
1912
- color: var(--vb-foreground-lighter, var(--vb-neutral-60, hsl(214, 20%, 60%)));
2636
+ color: #9e9e9e;
1913
2637
  }
1914
2638
 
1915
2639
  .input_auto {
@@ -1927,34 +2651,73 @@ input::-moz-placeholder {
1927
2651
  height: 3.125rem;
1928
2652
  padding: calc(0.648rem - 1px);
1929
2653
  font-size: 1.125rem;
1930
- line-height: 1.875;
2654
+ line-height: 1.625;
1931
2655
  }
1932
2656
 
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%)));
2657
+ .input_state_info {
2658
+ border-color: #03a9f4;
2659
+ box-shadow: 0 0 0 0 rgba(3, 169, 244, 0), inset 0 0.1rem 0.2rem rgba(0, 0, 0, 0.1);
2660
+ color: #212121;
1937
2661
  }
1938
- .input_error:hover {
1939
- border-color: hsl(0, 80%, 50%);
2662
+ .input_state_info:hover {
2663
+ border-color: #03a9f4;
1940
2664
  }
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);
2665
+ .input_state_info:focus {
2666
+ border-color: #03a9f4;
2667
+ box-shadow: 0 0 0 0.2rem rgba(3, 169, 244, 0.5), inset 0 0 0 rgba(0, 0, 0, 0);
2668
+ }
2669
+
2670
+ .input_state_success {
2671
+ border-color: #4caf50;
2672
+ box-shadow: 0 0 0 0 rgba(76, 175, 80, 0), inset 0 0.1rem 0.2rem rgba(0, 0, 0, 0.1);
2673
+ color: #212121;
2674
+ }
2675
+ .input_state_success:hover {
2676
+ border-color: #4caf50;
2677
+ }
2678
+ .input_state_success:focus {
2679
+ border-color: #4caf50;
2680
+ box-shadow: 0 0 0 0.2rem rgba(76, 175, 80, 0.5), inset 0 0 0 rgba(0, 0, 0, 0);
2681
+ }
2682
+
2683
+ .input_state_caution {
2684
+ border-color: #ff9800;
2685
+ box-shadow: 0 0 0 0 rgba(255, 152, 0, 0), inset 0 0.1rem 0.2rem rgba(0, 0, 0, 0.1);
2686
+ color: #212121;
2687
+ }
2688
+ .input_state_caution:hover {
2689
+ border-color: #ff9800;
2690
+ }
2691
+ .input_state_caution:focus {
2692
+ border-color: #ff9800;
2693
+ box-shadow: 0 0 0 0.2rem rgba(255, 152, 0, 0.5), inset 0 0 0 rgba(0, 0, 0, 0);
2694
+ }
2695
+
2696
+ .input_state_danger {
2697
+ border-color: #f44336;
2698
+ box-shadow: 0 0 0 0 rgba(244, 67, 54, 0), inset 0 0.1rem 0.2rem rgba(0, 0, 0, 0.1);
2699
+ color: #212121;
2700
+ }
2701
+ .input_state_danger:hover {
2702
+ border-color: #f44336;
2703
+ }
2704
+ .input_state_danger:focus {
2705
+ border-color: #f44336;
2706
+ box-shadow: 0 0 0 0.2rem rgba(244, 67, 54, 0.5), inset 0 0 0 rgba(0, 0, 0, 0);
1944
2707
  }
1945
2708
 
1946
2709
  .input_type_select {
1947
2710
  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>');
2711
+ 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
2712
  background-repeat: no-repeat;
1950
2713
  background-position: 100% center;
1951
2714
  cursor: pointer;
1952
2715
  }
1953
2716
  .input_type_select:read-only {
1954
- background-color: white;
2717
+ background-color: #fff;
1955
2718
  }
1956
2719
  .input_type_select:disabled {
1957
- background-color: var(--vb-background-darker, var(--vb-neutral-95, hsl(214, 20%, 95%)));
2720
+ background-color: #f5f5f5;
1958
2721
  }
1959
2722
 
1960
2723
  .input_type_textarea {
@@ -1972,86 +2735,203 @@ input::-moz-placeholder {
1972
2735
  }
1973
2736
 
1974
2737
  .level {
1975
- gap: 0.5em;
2738
+ margin-top: -0.5em;
2739
+ margin-left: -0.5em;
1976
2740
  display: flex;
1977
2741
  flex-wrap: wrap;
1978
2742
  align-items: center;
1979
2743
  }
2744
+ .level > * {
2745
+ margin-top: 0.5em;
2746
+ margin-left: 0.5em;
2747
+ }
2748
+ .level + .level {
2749
+ margin-top: 0;
2750
+ }
1980
2751
  .level > * {
1981
2752
  flex: 0 0 auto;
1982
- max-width: 100%;
2753
+ max-width: calc(100% - 0.5em);
1983
2754
  }
1984
2755
 
1985
2756
  .level_gap_none {
1986
- gap: 0;
2757
+ margin-top: 0;
2758
+ margin-left: 0;
2759
+ }
2760
+ .level_gap_none > * {
2761
+ margin-top: 0;
2762
+ margin-left: 0;
2763
+ }
2764
+ .level_gap_none > * {
2765
+ max-width: 100%;
1987
2766
  }
1988
2767
 
1989
2768
  .level_gap-x_none {
1990
- column-gap: 0;
2769
+ margin-left: 0;
2770
+ }
2771
+ .level_gap-x_none > * {
2772
+ margin-left: 0;
2773
+ }
2774
+ .level_gap-x_none > * {
2775
+ max-width: 100%;
1991
2776
  }
1992
2777
 
1993
2778
  .level_gap-y_none {
1994
- row-gap: 0;
2779
+ margin-top: 0;
2780
+ }
2781
+ .level_gap-y_none > * {
2782
+ margin-top: 0;
1995
2783
  }
1996
2784
 
1997
2785
  .level_gap_xs {
1998
- gap: 1px;
2786
+ margin-top: -1px;
2787
+ margin-left: -1px;
2788
+ }
2789
+ .level_gap_xs > * {
2790
+ margin-top: 1px;
2791
+ margin-left: 1px;
2792
+ }
2793
+ .level_gap_xs > * {
2794
+ max-width: calc(100% - 1px);
1999
2795
  }
2000
2796
 
2001
2797
  .level_gap-x_xs {
2002
- column-gap: 1px;
2798
+ margin-left: -1px;
2799
+ }
2800
+ .level_gap-x_xs > * {
2801
+ margin-left: 1px;
2802
+ }
2803
+ .level_gap-x_xs > * {
2804
+ max-width: calc(100% - 1px);
2003
2805
  }
2004
2806
 
2005
2807
  .level_gap-y_xs {
2006
- row-gap: 1px;
2808
+ margin-top: -1px;
2809
+ }
2810
+ .level_gap-y_xs > * {
2811
+ margin-top: 1px;
2007
2812
  }
2008
2813
 
2009
2814
  .level_gap_sm {
2010
- gap: 0.25em;
2815
+ margin-top: -0.25em;
2816
+ margin-left: -0.25em;
2817
+ }
2818
+ .level_gap_sm > * {
2819
+ margin-top: 0.25em;
2820
+ margin-left: 0.25em;
2821
+ }
2822
+ .level_gap_sm > * {
2823
+ max-width: calc(100% - 0.25em);
2011
2824
  }
2012
2825
 
2013
2826
  .level_gap-x_sm {
2014
- column-gap: 0.25em;
2827
+ margin-left: -0.25em;
2828
+ }
2829
+ .level_gap-x_sm > * {
2830
+ margin-left: 0.25em;
2831
+ }
2832
+ .level_gap-x_sm > * {
2833
+ max-width: calc(100% - 0.25em);
2015
2834
  }
2016
2835
 
2017
2836
  .level_gap-y_sm {
2018
- row-gap: 0.25em;
2837
+ margin-top: -0.25em;
2838
+ }
2839
+ .level_gap-y_sm > * {
2840
+ margin-top: 0.25em;
2019
2841
  }
2020
2842
 
2021
2843
  .level_gap_md {
2022
- gap: 0.5em;
2844
+ margin-top: -0.5em;
2845
+ margin-left: -0.5em;
2846
+ }
2847
+ .level_gap_md > * {
2848
+ margin-top: 0.5em;
2849
+ margin-left: 0.5em;
2850
+ }
2851
+ .level_gap_md > * {
2852
+ max-width: calc(100% - 0.5em);
2023
2853
  }
2024
2854
 
2025
2855
  .level_gap-x_md {
2026
- column-gap: 0.5em;
2856
+ margin-left: -0.5em;
2857
+ }
2858
+ .level_gap-x_md > * {
2859
+ margin-left: 0.5em;
2860
+ }
2861
+ .level_gap-x_md > * {
2862
+ max-width: calc(100% - 0.5em);
2027
2863
  }
2028
2864
 
2029
2865
  .level_gap-y_md {
2030
- row-gap: 0.5em;
2866
+ margin-top: -0.5em;
2867
+ }
2868
+ .level_gap-y_md > * {
2869
+ margin-top: 0.5em;
2031
2870
  }
2032
2871
 
2033
2872
  .level_gap_lg {
2034
- gap: 1em;
2873
+ margin-top: -1em;
2874
+ margin-left: -1em;
2875
+ }
2876
+ .level_gap_lg > * {
2877
+ margin-top: 1em;
2878
+ margin-left: 1em;
2879
+ }
2880
+ .level_gap_lg > * {
2881
+ max-width: calc(100% - 1em);
2035
2882
  }
2036
2883
 
2037
2884
  .level_gap-x_lg {
2038
- column-gap: 1em;
2885
+ margin-left: -1em;
2886
+ }
2887
+ .level_gap-x_lg > * {
2888
+ margin-left: 1em;
2889
+ }
2890
+ .level_gap-x_lg > * {
2891
+ max-width: calc(100% - 1em);
2039
2892
  }
2040
2893
 
2041
2894
  .level_gap-y_lg {
2042
- row-gap: 1em;
2895
+ margin-top: -1em;
2896
+ }
2897
+ .level_gap-y_lg > * {
2898
+ margin-top: 1em;
2043
2899
  }
2044
2900
 
2045
2901
  .level_gap_xl {
2046
- gap: 1.5em;
2902
+ margin-top: -1.5em;
2903
+ margin-left: -1.5em;
2904
+ }
2905
+ .level_gap_xl > * {
2906
+ margin-top: 1.5em;
2907
+ margin-left: 1.5em;
2908
+ }
2909
+ .level_gap_xl > * {
2910
+ max-width: calc(100% - 1.5em);
2047
2911
  }
2048
2912
 
2049
2913
  .level_gap-x_xl {
2050
- column-gap: 1.5em;
2914
+ margin-left: -1.5em;
2915
+ }
2916
+ .level_gap-x_xl > * {
2917
+ margin-left: 1.5em;
2918
+ }
2919
+ .level_gap-x_xl > * {
2920
+ max-width: calc(100% - 1.5em);
2051
2921
  }
2052
2922
 
2053
2923
  .level_gap-y_xl {
2054
- row-gap: 1.5em;
2924
+ margin-top: -1.5em;
2925
+ }
2926
+ .level_gap-y_xl > * {
2927
+ margin-top: 1.5em;
2928
+ }
2929
+
2930
+ .level_nowrap {
2931
+ flex-wrap: nowrap;
2932
+ }
2933
+ .level_nowrap > * {
2934
+ flex-shrink: 1;
2055
2935
  }
2056
2936
 
2057
2937
  .media {
@@ -2071,7 +2951,7 @@ input::-moz-placeholder {
2071
2951
  flex: 0 0 auto;
2072
2952
  align-items: center;
2073
2953
  max-width: 30%;
2074
- min-height: 1.625em;
2954
+ min-height: 1.5em;
2075
2955
  }
2076
2956
 
2077
2957
  .media_gap_none > * + * {
@@ -2409,7 +3289,7 @@ input::-moz-placeholder {
2409
3289
  width: auto;
2410
3290
  height: 1px;
2411
3291
  margin: 0.5em 0;
2412
- background: var(--vb-border-color, rgba(0, 0, 0, 0.1));
3292
+ background: rgba(0, 0, 0, 0.1);
2413
3293
  }
2414
3294
  .menu__sep:first-child {
2415
3295
  margin-top: 0;
@@ -2429,7 +3309,7 @@ input::-moz-placeholder {
2429
3309
  padding: 0.5em 1em;
2430
3310
  border-radius: 0.25rem;
2431
3311
  background: none;
2432
- color: var(--vb-foreground, var(--vb-neutral-20, hsl(214, 20%, 20%)));
3312
+ color: #212121;
2433
3313
  white-space: normal;
2434
3314
  }
2435
3315
  .menu__action > * {
@@ -2442,36 +3322,32 @@ input::-moz-placeholder {
2442
3322
  padding: 0.5em;
2443
3323
  }
2444
3324
  .menu__action:hover {
2445
- background: var(--vb-background-hover, rgba(0, 0, 0, 0.05));
3325
+ background: rgba(0, 0, 0, 0.05);
2446
3326
  }
2447
3327
  .menu__action:focus {
2448
3328
  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%)));
3329
+ background: rgba(0, 0, 0, 0.05);
2454
3330
  }
2455
3331
  .menu__action:active {
2456
- background: var(--vb-background-active, rgba(0, 0, 0, 0.1));
3332
+ background: rgba(0, 0, 0, 0.1);
2457
3333
  }
2458
3334
  .menu__action.is-active, .menu__action.is-active[disabled] {
2459
3335
  background: none;
2460
- color: var(--vb-primary-50, hsl(152, 60%, 50%));
3336
+ color: #00bcd4;
2461
3337
  cursor: pointer;
2462
3338
  }
2463
3339
  .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
3340
  background: none;
2465
- color: var(--vb-primary-50, hsl(152, 60%, 50%));
3341
+ color: #00bcd4;
2466
3342
  }
2467
3343
  .menu__action.is-disabled, .menu__action[disabled] {
2468
3344
  background: none;
2469
- color: var(--vb-foreground-lighter, var(--vb-neutral-60, hsl(214, 20%, 60%)));
3345
+ color: #9e9e9e;
2470
3346
  cursor: default;
2471
3347
  }
2472
3348
  .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
3349
  background: none;
2474
- color: var(--vb-foreground-lighter, var(--vb-neutral-60, hsl(214, 20%, 60%)));
3350
+ color: #9e9e9e;
2475
3351
  }
2476
3352
 
2477
3353
  .menu__text {
@@ -2674,6 +3550,38 @@ input::-moz-placeholder {
2674
3550
  white-space: nowrap;
2675
3551
  }
2676
3552
  }
3553
+ .menu_invert .menu__sep {
3554
+ background: rgba(255, 255, 255, 0.1);
3555
+ }
3556
+ .menu_invert .menu__action {
3557
+ color: #fff;
3558
+ }
3559
+ .menu_invert .menu__action:hover {
3560
+ background: rgba(255, 255, 255, 0.05);
3561
+ }
3562
+ .menu_invert .menu__action:focus {
3563
+ background: rgba(255, 255, 255, 0.05);
3564
+ }
3565
+ .menu_invert .menu__action:active {
3566
+ background: rgba(255, 255, 255, 0.1);
3567
+ }
3568
+ .menu_invert .menu__action.is-active, .menu_invert .menu__action.is-active[disabled] {
3569
+ background: none;
3570
+ color: #00bcd4;
3571
+ }
3572
+ .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 {
3573
+ background: none;
3574
+ color: #00bcd4;
3575
+ }
3576
+ .menu_invert .menu__action.is-disabled, .menu_invert .menu__action[disabled] {
3577
+ background: none;
3578
+ color: rgba(255, 255, 255, 0.5);
3579
+ }
3580
+ .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 {
3581
+ background: none;
3582
+ color: rgba(255, 255, 255, 0.5);
3583
+ }
3584
+
2677
3585
  .menu_size_sm {
2678
3586
  font-size: 0.875rem;
2679
3587
  line-height: 1.375;
@@ -2689,7 +3597,7 @@ input::-moz-placeholder {
2689
3597
 
2690
3598
  .menu_size_lg {
2691
3599
  font-size: 1.125rem;
2692
- line-height: 1.875;
3600
+ line-height: 1.625;
2693
3601
  }
2694
3602
  .menu_size_lg .menu__action {
2695
3603
  min-width: 3.125rem;
@@ -2700,11 +3608,6 @@ input::-moz-placeholder {
2700
3608
  padding: 0.648rem;
2701
3609
  }
2702
3610
 
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
3611
  .modal {
2709
3612
  position: fixed;
2710
3613
  z-index: 1000;
@@ -2718,15 +3621,7 @@ input::-moz-placeholder {
2718
3621
  width: 0;
2719
3622
  height: 0;
2720
3623
  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;
3624
+ background-color: rgba(66, 66, 66, 0);
2730
3625
  }
2731
3626
 
2732
3627
  .modal__dialog {
@@ -2735,17 +3630,17 @@ input::-moz-placeholder {
2735
3630
  overflow: auto;
2736
3631
  transform: translateY(-5em);
2737
3632
  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%));
3633
+ transition-duration: 0.3s;
3634
+ transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
3635
+ outline: 0 solid rgba(0, 188, 212, 0);
3636
+ box-shadow: 0 0 2px 1px rgba(33, 33, 33, 0.05), 0 12px 24px rgba(33, 33, 33, 0.2);
2742
3637
  opacity: 0;
2743
3638
  }
2744
3639
  .modal__dialog:focus {
2745
- outline: 4px solid var(--vb-primary-50, hsl(152, 60%, 50%));
3640
+ outline: 4px solid #00bcd4;
2746
3641
  }
2747
3642
  .modal__dialog[role=alertdialog]:focus {
2748
- outline: 4px solid var(--vb-important-50, hsl(0, 80%, 50%));
3643
+ outline: 4px solid #f44336;
2749
3644
  }
2750
3645
 
2751
3646
  .modal.is-closed {
@@ -2761,20 +3656,20 @@ input::-moz-placeholder {
2761
3656
  padding: 1em;
2762
3657
  }
2763
3658
 
2764
- .modal.is-opening::before,
2765
- .modal.is-closing::before {
2766
- transition: opacity var(--vb-modal-transition-duration) var(--vb-modal-transition-timing-function);
3659
+ .modal.is-opening,
3660
+ .modal.is-closing {
3661
+ transition: background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
2767
3662
  }
2768
3663
  .modal.is-opening .modal__dialog,
2769
3664
  .modal.is-closing .modal__dialog {
2770
3665
  transition-property: opacity, transform;
2771
- transition-duration: var(--vb-modal-transition-duration);
2772
- transition-timing-function: var(--vb-modal-transition-timing-function);
3666
+ transition-duration: 0.3s;
3667
+ transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
2773
3668
  }
2774
3669
 
2775
- .modal.is-opening::before,
2776
- .modal.is-opened::before {
2777
- opacity: 0.8;
3670
+ .modal.is-opening,
3671
+ .modal.is-opened {
3672
+ background-color: rgba(66, 66, 66, 0.8);
2778
3673
  }
2779
3674
  .modal.is-opening .modal__dialog,
2780
3675
  .modal.is-opened .modal__dialog {
@@ -2795,7 +3690,7 @@ input::-moz-placeholder {
2795
3690
  transform: scale(1);
2796
3691
  }
2797
3692
  .modal_full.is-closing .modal__dialog {
2798
- transform: scale(0.75);
3693
+ transform: scale(1);
2799
3694
  }
2800
3695
 
2801
3696
  .modal_pos_top {
@@ -2863,11 +3758,8 @@ input::-moz-placeholder {
2863
3758
 
2864
3759
  .notice {
2865
3760
  padding: 1em;
2866
- border: var(--vb-notice-border);
2867
3761
  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%))));
3762
+ background: #f5f5f5;
2871
3763
  }
2872
3764
  .notice > * + * {
2873
3765
  margin-top: 0.5em;
@@ -2876,36 +3768,31 @@ input::-moz-placeholder {
2876
3768
  .notice__title {
2877
3769
  font-size: 1.125rem;
2878
3770
  font-weight: 600;
2879
- line-height: 1.875;
3771
+ line-height: 1.625;
2880
3772
  }
2881
3773
 
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%));
3774
+ .notice_state_info {
3775
+ background-color: #e1f5fe;
3776
+ color: #01579b;
2885
3777
  }
2886
3778
 
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%));
3779
+ .notice_state_success {
3780
+ background-color: #e8f5e9;
3781
+ color: #1b5e20;
2890
3782
  }
2891
3783
 
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%));
3784
+ .notice_state_caution {
3785
+ background-color: #fff3e0;
3786
+ color: #bf360c;
2895
3787
  }
2896
3788
 
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%));
3789
+ .notice_state_danger {
3790
+ background-color: #ffebee;
3791
+ color: #b71c1c;
2900
3792
  }
2901
3793
 
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%)));
3794
+ :root {
3795
+ --vrembem-variable-prefix: vb-;
2909
3796
  }
2910
3797
 
2911
3798
  :root {
@@ -2926,10 +3813,9 @@ input::-moz-placeholder {
2926
3813
  margin: calc(var(--vb-popover-offset) * 1px) 0 0;
2927
3814
  padding: 0.5em;
2928
3815
  border-radius: 0.25rem;
2929
- background: var(--vb-background, var(--vb-neutral-100, hsl(214, 20%, 100%)));
3816
+ background: #fff;
2930
3817
  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%)));
3818
+ box-shadow: 0 0 2px 1px rgba(33, 33, 33, 0.05), 0 2px 6px rgba(33, 33, 33, 0.2);
2933
3819
  font-size: 0.875rem;
2934
3820
  }
2935
3821
  .popover::before {
@@ -2997,7 +3883,7 @@ input::-moz-placeholder {
2997
3883
  content: "";
2998
3884
  visibility: visible;
2999
3885
  transform: rotate(45deg);
3000
- border: var(--vb-popover-arrow-border, 1px solid var(--vb-border-color, rgba(0, 0, 0, 0.1)));
3886
+ border: var(--vb-popover-arrow-border, 1px solid rgba(0, 0, 0, 0.05));
3001
3887
  border-right-color: transparent;
3002
3888
  border-bottom-color: transparent;
3003
3889
  background-clip: padding-box;
@@ -3051,8 +3937,9 @@ input::-moz-placeholder {
3051
3937
  width: auto;
3052
3938
  max-width: 16rem;
3053
3939
  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%)));
3940
+ background: #212121;
3941
+ color: #fff;
3942
+ font-size: 0.75em;
3056
3943
  }
3057
3944
 
3058
3945
  .radio {
@@ -3082,9 +3969,9 @@ input::-moz-placeholder {
3082
3969
  display: flex;
3083
3970
  align-items: center;
3084
3971
  justify-content: center;
3085
- border: 2px solid var(--vb-neutral-50, hsl(214, 20%, 50%));
3972
+ border: 2px solid #bdbdbd;
3086
3973
  border-radius: 20px;
3087
- background-color: white;
3974
+ background-color: #fff;
3088
3975
  color: transparent;
3089
3976
  }
3090
3977
 
@@ -3092,7 +3979,7 @@ input::-moz-placeholder {
3092
3979
  width: 0;
3093
3980
  height: 0;
3094
3981
  border-radius: 8px;
3095
- background-color: white;
3982
+ background-color: #fff;
3096
3983
  opacity: 0;
3097
3984
  }
3098
3985
 
@@ -3107,26 +3994,26 @@ input::-moz-placeholder {
3107
3994
  cursor: pointer;
3108
3995
  }
3109
3996
  .radio__native:hover + .radio__background {
3110
- background-color: rgba(var(--vb-primary-50, hsl(152, 60%, 50%)), 0.1);
3997
+ background-color: rgba(0, 188, 212, 0.1);
3111
3998
  }
3112
3999
  .radio__native:hover + .radio__background .radio__circle {
3113
- border-color: var(--vb-primary-50, hsl(152, 60%, 50%));
4000
+ border-color: #00bcd4;
3114
4001
  }
3115
4002
  .radio__native:focus + .radio__background {
3116
- background-color: rgba(var(--vb-primary-50, hsl(152, 60%, 50%)), 0.1);
4003
+ background-color: rgba(0, 188, 212, 0.1);
3117
4004
  }
3118
4005
  .radio__native:focus + .radio__background .radio__circle {
3119
- border-color: var(--vb-primary-50, hsl(152, 60%, 50%));
4006
+ border-color: #00bcd4;
3120
4007
  }
3121
4008
  .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);
4009
+ background-color: rgba(0, 188, 212, 0.2);
3123
4010
  }
3124
4011
  .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%));
4012
+ border-color: #00bcd4;
3126
4013
  }
3127
4014
  .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%));
4015
+ border-color: #00bcd4;
4016
+ background-color: #00bcd4;
3130
4017
  }
3131
4018
  .radio__native:checked + .radio__background .radio__dot {
3132
4019
  width: 8px;
@@ -3206,7 +4093,7 @@ input::-moz-placeholder {
3206
4093
 
3207
4094
  .section__screen {
3208
4095
  z-index: 2;
3209
- background: var(--vb-neutral-10, hsl(214, 20%, 10%));
4096
+ background: #424242;
3210
4097
  opacity: 0.7;
3211
4098
  }
3212
4099
 
@@ -3317,9 +4204,9 @@ input::-moz-placeholder {
3317
4204
  height: 20px;
3318
4205
  position: relative;
3319
4206
  display: block;
3320
- border: 2px solid var(--vb-neutral-50, hsl(214, 20%, 50%));
4207
+ border: 2px solid #bdbdbd;
3321
4208
  border-radius: 9999px;
3322
- background-color: var(--vb-neutral-80, hsl(214, 20%, 80%));
4209
+ background-color: #eeeeee;
3323
4210
  }
3324
4211
 
3325
4212
  .switch__thumb {
@@ -3332,8 +4219,8 @@ input::-moz-placeholder {
3332
4219
  display: block;
3333
4220
  transition: left 0.15s cubic-bezier(0.4, 0, 0.2, 1);
3334
4221
  border-radius: 9999px;
3335
- background-color: white;
3336
- box-shadow: 0 0 0 2px var(--vb-neutral-50, hsl(214, 20%, 50%));
4222
+ background-color: #fff;
4223
+ box-shadow: 0 0 0 2px #bdbdbd;
3337
4224
  }
3338
4225
 
3339
4226
  .switch__native {
@@ -3347,33 +4234,33 @@ input::-moz-placeholder {
3347
4234
  cursor: pointer;
3348
4235
  }
3349
4236
  .switch__native:hover + .switch__background::after {
3350
- background-color: rgba(var(--vb-primary-50, hsl(152, 60%, 50%)), 0.1);
4237
+ background-color: rgba(0, 188, 212, 0.1);
3351
4238
  }
3352
4239
  .switch__native:hover + .switch__background .switch__thumb {
3353
- box-shadow: 0 0 0 2px var(--vb-primary-50, hsl(152, 60%, 50%));
4240
+ box-shadow: 0 0 0 2px #00bcd4;
3354
4241
  }
3355
4242
  .switch__native:focus + .switch__background::after {
3356
- background-color: rgba(var(--vb-primary-50, hsl(152, 60%, 50%)), 0.1);
4243
+ background-color: rgba(0, 188, 212, 0.1);
3357
4244
  }
3358
4245
  .switch__native:focus + .switch__background .switch__thumb {
3359
- box-shadow: 0 0 0 2px var(--vb-primary-50, hsl(152, 60%, 50%));
4246
+ box-shadow: 0 0 0 2px #00bcd4;
3360
4247
  }
3361
4248
  .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);
4249
+ background-color: rgba(0, 188, 212, 0.2);
3363
4250
  }
3364
4251
  .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%));
4252
+ box-shadow: 0 0 0 2px #00bcd4;
3366
4253
  }
3367
4254
  .switch__native:checked + .switch__background::after {
3368
4255
  left: calc(100% - 1.875rem);
3369
4256
  }
3370
4257
  .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%));
4258
+ border-color: #00bcd4;
4259
+ background-color: #00bcd4;
3373
4260
  }
3374
4261
  .switch__native:checked + .switch__background .switch__thumb {
3375
4262
  left: calc(100% - 16px);
3376
- box-shadow: 0 0 0 2px var(--vb-primary-50, hsl(152, 60%, 50%));
4263
+ box-shadow: 0 0 0 2px #00bcd4;
3377
4264
  }
3378
4265
 
3379
4266
  .switch_size_sm {
@@ -3397,23 +4284,23 @@ input::-moz-placeholder {
3397
4284
  .switch_size_sm .switch__thumb {
3398
4285
  width: 12px;
3399
4286
  height: 12px;
3400
- box-shadow: 0 0 0 2px var(--vb-neutral-50, hsl(214, 20%, 50%));
4287
+ box-shadow: 0 0 0 2px #bdbdbd;
3401
4288
  }
3402
4289
  .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%));
4290
+ box-shadow: 0 0 0 2px #00bcd4;
3404
4291
  }
3405
4292
  .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%));
4293
+ box-shadow: 0 0 0 2px #00bcd4;
3407
4294
  }
3408
4295
  .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%));
4296
+ box-shadow: 0 0 0 2px #00bcd4;
3410
4297
  }
3411
4298
  .switch_size_sm .switch__native:checked + .switch__background::after {
3412
4299
  left: calc(100% - 1.40625rem);
3413
4300
  }
3414
4301
  .switch_size_sm .switch__native:checked + .switch__background .switch__thumb {
3415
4302
  left: calc(100% - 12px);
3416
- box-shadow: 0 0 0 2px var(--vb-primary-50, hsl(152, 60%, 50%));
4303
+ box-shadow: 0 0 0 2px #00bcd4;
3417
4304
  }
3418
4305
 
3419
4306
  .switch_size_lg {
@@ -3437,23 +4324,23 @@ input::-moz-placeholder {
3437
4324
  .switch_size_lg .switch__thumb {
3438
4325
  width: 21px;
3439
4326
  height: 21px;
3440
- box-shadow: 0 0 0 2.5px var(--vb-neutral-50, hsl(214, 20%, 50%));
4327
+ box-shadow: 0 0 0 2.5px #bdbdbd;
3441
4328
  }
3442
4329
  .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%));
4330
+ box-shadow: 0 0 0 2.5px #00bcd4;
3444
4331
  }
3445
4332
  .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%));
4333
+ box-shadow: 0 0 0 2.5px #00bcd4;
3447
4334
  }
3448
4335
  .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%));
4336
+ box-shadow: 0 0 0 2.5px #00bcd4;
3450
4337
  }
3451
4338
  .switch_size_lg .switch__native:checked + .switch__background::after {
3452
4339
  left: calc(100% - 2.34375rem);
3453
4340
  }
3454
4341
  .switch_size_lg .switch__native:checked + .switch__background .switch__thumb {
3455
4342
  left: calc(100% - 21px);
3456
- box-shadow: 0 0 0 2.5px var(--vb-primary-50, hsl(152, 60%, 50%));
4343
+ box-shadow: 0 0 0 2.5px #00bcd4;
3457
4344
  }
3458
4345
 
3459
4346
  .table {
@@ -3491,7 +4378,7 @@ input::-moz-placeholder {
3491
4378
  .table_hover tbody tr:hover,
3492
4379
  .table_hover tbody tr:focus {
3493
4380
  z-index: 2;
3494
- background-color: hsla(53, 100%, 50%, 0.15);
4381
+ background-color: rgba(255, 235, 59, 0.3);
3495
4382
  }
3496
4383
 
3497
4384
  .table_responsive thead,
@@ -3538,20 +4425,20 @@ input::-moz-placeholder {
3538
4425
  padding: 0.648rem 1.5rem;
3539
4426
  }
3540
4427
  .table_responsive.table_style_bordered {
3541
- border: 1px solid var(--vb-border-color, rgba(0, 0, 0, 0.1));
4428
+ border: 1px solid rgba(0, 0, 0, 0.1);
3542
4429
  }
3543
4430
  .table_responsive.table_style_bordered td {
3544
4431
  border: none;
3545
4432
  }
3546
4433
  .table_responsive.table_style_bordered td + td,
3547
4434
  .table_responsive.table_style_bordered th + td {
3548
- border-top: 1px dotted var(--vb-border-color, rgba(0, 0, 0, 0.1));
4435
+ border-top: 1px dotted rgba(0, 0, 0, 0.1);
3549
4436
  }
3550
4437
  .table_responsive.table_style_bordered [data-mobile-label]::before {
3551
- border-right: 1px solid var(--vb-border-color, rgba(0, 0, 0, 0.1));
4438
+ border-right: 1px solid rgba(0, 0, 0, 0.1);
3552
4439
  }
3553
4440
  .table_responsive.table_style_bordered tr + tr {
3554
- border-top: 1px solid var(--vb-border-color, rgba(0, 0, 0, 0.1));
4441
+ border-top: 1px solid rgba(0, 0, 0, 0.1);
3555
4442
  }
3556
4443
 
3557
4444
  @media (max-width: 479px) {
@@ -3599,20 +4486,20 @@ input::-moz-placeholder {
3599
4486
  padding: 0.648rem 1.5rem;
3600
4487
  }
3601
4488
  .table_responsive_xs.table_style_bordered {
3602
- border: 1px solid var(--vb-border-color, rgba(0, 0, 0, 0.1));
4489
+ border: 1px solid rgba(0, 0, 0, 0.1);
3603
4490
  }
3604
4491
  .table_responsive_xs.table_style_bordered td {
3605
4492
  border: none;
3606
4493
  }
3607
4494
  .table_responsive_xs.table_style_bordered td + td,
3608
4495
  .table_responsive_xs.table_style_bordered th + td {
3609
- border-top: 1px dotted var(--vb-border-color, rgba(0, 0, 0, 0.1));
4496
+ border-top: 1px dotted rgba(0, 0, 0, 0.1);
3610
4497
  }
3611
4498
  .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));
4499
+ border-right: 1px solid rgba(0, 0, 0, 0.1);
3613
4500
  }
3614
4501
  .table_responsive_xs.table_style_bordered tr + tr {
3615
- border-top: 1px solid var(--vb-border-color, rgba(0, 0, 0, 0.1));
4502
+ border-top: 1px solid rgba(0, 0, 0, 0.1);
3616
4503
  }
3617
4504
  }
3618
4505
 
@@ -3661,20 +4548,20 @@ input::-moz-placeholder {
3661
4548
  padding: 0.648rem 1.5rem;
3662
4549
  }
3663
4550
  .table_responsive_sm.table_style_bordered {
3664
- border: 1px solid var(--vb-border-color, rgba(0, 0, 0, 0.1));
4551
+ border: 1px solid rgba(0, 0, 0, 0.1);
3665
4552
  }
3666
4553
  .table_responsive_sm.table_style_bordered td {
3667
4554
  border: none;
3668
4555
  }
3669
4556
  .table_responsive_sm.table_style_bordered td + td,
3670
4557
  .table_responsive_sm.table_style_bordered th + td {
3671
- border-top: 1px dotted var(--vb-border-color, rgba(0, 0, 0, 0.1));
4558
+ border-top: 1px dotted rgba(0, 0, 0, 0.1);
3672
4559
  }
3673
4560
  .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));
4561
+ border-right: 1px solid rgba(0, 0, 0, 0.1);
3675
4562
  }
3676
4563
  .table_responsive_sm.table_style_bordered tr + tr {
3677
- border-top: 1px solid var(--vb-border-color, rgba(0, 0, 0, 0.1));
4564
+ border-top: 1px solid rgba(0, 0, 0, 0.1);
3678
4565
  }
3679
4566
  }
3680
4567
 
@@ -3723,20 +4610,20 @@ input::-moz-placeholder {
3723
4610
  padding: 0.648rem 1.5rem;
3724
4611
  }
3725
4612
  .table_responsive_md.table_style_bordered {
3726
- border: 1px solid var(--vb-border-color, rgba(0, 0, 0, 0.1));
4613
+ border: 1px solid rgba(0, 0, 0, 0.1);
3727
4614
  }
3728
4615
  .table_responsive_md.table_style_bordered td {
3729
4616
  border: none;
3730
4617
  }
3731
4618
  .table_responsive_md.table_style_bordered td + td,
3732
4619
  .table_responsive_md.table_style_bordered th + td {
3733
- border-top: 1px dotted var(--vb-border-color, rgba(0, 0, 0, 0.1));
4620
+ border-top: 1px dotted rgba(0, 0, 0, 0.1);
3734
4621
  }
3735
4622
  .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));
4623
+ border-right: 1px solid rgba(0, 0, 0, 0.1);
3737
4624
  }
3738
4625
  .table_responsive_md.table_style_bordered tr + tr {
3739
- border-top: 1px solid var(--vb-border-color, rgba(0, 0, 0, 0.1));
4626
+ border-top: 1px solid rgba(0, 0, 0, 0.1);
3740
4627
  }
3741
4628
  }
3742
4629
 
@@ -3785,20 +4672,20 @@ input::-moz-placeholder {
3785
4672
  padding: 0.648rem 1.5rem;
3786
4673
  }
3787
4674
  .table_responsive_lg.table_style_bordered {
3788
- border: 1px solid var(--vb-border-color, rgba(0, 0, 0, 0.1));
4675
+ border: 1px solid rgba(0, 0, 0, 0.1);
3789
4676
  }
3790
4677
  .table_responsive_lg.table_style_bordered td {
3791
4678
  border: none;
3792
4679
  }
3793
4680
  .table_responsive_lg.table_style_bordered td + td,
3794
4681
  .table_responsive_lg.table_style_bordered th + td {
3795
- border-top: 1px dotted var(--vb-border-color, rgba(0, 0, 0, 0.1));
4682
+ border-top: 1px dotted rgba(0, 0, 0, 0.1);
3796
4683
  }
3797
4684
  .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));
4685
+ border-right: 1px solid rgba(0, 0, 0, 0.1);
3799
4686
  }
3800
4687
  .table_responsive_lg.table_style_bordered tr + tr {
3801
- border-top: 1px solid var(--vb-border-color, rgba(0, 0, 0, 0.1));
4688
+ border-top: 1px solid rgba(0, 0, 0, 0.1);
3802
4689
  }
3803
4690
  }
3804
4691
 
@@ -3823,872 +4710,600 @@ input::-moz-placeholder {
3823
4710
  }
3824
4711
  .table_responsive_xl [data-mobile-label]::before {
3825
4712
  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;
4713
+ text-overflow: ellipsis;
4714
+ white-space: nowrap;
4715
+ content: attr(data-mobile-label);
4716
+ position: absolute;
4717
+ top: 0;
4718
+ bottom: 0;
4719
+ left: 0;
4720
+ width: 8rem;
4721
+ padding: 0.5em 1em;
4722
+ font-weight: 600;
4723
+ }
4724
+ .table_responsive_xl.table_size_sm [data-mobile-label] {
4725
+ padding-left: calc(8rem + 0.5rem);
4726
+ }
4727
+ .table_responsive_xl.table_size_sm [data-mobile-label]::before {
4728
+ padding: 0.25rem 0.5rem;
4729
+ }
4730
+ .table_responsive_xl.table_size_lg [data-mobile-label] {
4731
+ padding-left: calc(8rem + 1.5rem);
4732
+ }
4733
+ .table_responsive_xl.table_size_lg [data-mobile-label]::before {
4734
+ padding: 0.648rem 1.5rem;
4735
+ }
4736
+ .table_responsive_xl.table_style_bordered {
4737
+ border: 1px solid rgba(0, 0, 0, 0.1);
4738
+ }
4739
+ .table_responsive_xl.table_style_bordered td {
4740
+ border: none;
4741
+ }
4742
+ .table_responsive_xl.table_style_bordered td + td,
4743
+ .table_responsive_xl.table_style_bordered th + td {
4744
+ border-top: 1px dotted rgba(0, 0, 0, 0.1);
4745
+ }
4746
+ .table_responsive_xl.table_style_bordered [data-mobile-label]::before {
4747
+ border-right: 1px solid rgba(0, 0, 0, 0.1);
4748
+ }
4749
+ .table_responsive_xl.table_style_bordered tr + tr {
4750
+ border-top: 1px solid rgba(0, 0, 0, 0.1);
4751
+ }
4132
4752
  }
4133
4753
 
4134
- .background-neutral-100 {
4135
- background-color: var(--vb-neutral-100, hsl(214, 20%, 100%)) !important;
4754
+ .table_size_sm th,
4755
+ .table_size_sm td,
4756
+ .table_size_sm caption {
4757
+ padding: 0.25rem 0.5rem;
4136
4758
  }
4137
4759
 
4138
- .background-important {
4139
- background-color: var(--vb-important) !important;
4760
+ .table_size_lg th,
4761
+ .table_size_lg td,
4762
+ .table_size_lg caption {
4763
+ padding: 0.648rem 1.5rem;
4140
4764
  }
4141
4765
 
4142
- .background-important-0 {
4143
- background-color: var(--vb-important-0, hsl(0, 80%, 0%)) !important;
4766
+ .table_style_rowed {
4767
+ border-bottom: 1px solid rgba(0, 0, 0, 0.1);
4144
4768
  }
4145
-
4146
- .background-important-5 {
4147
- background-color: var(--vb-important-5, hsl(0, 80%, 5%)) !important;
4769
+ .table_style_rowed tr {
4770
+ border-top: 1px solid rgba(0, 0, 0, 0.1);
4148
4771
  }
4149
4772
 
4150
- .background-important-10 {
4151
- background-color: var(--vb-important-10, hsl(0, 80%, 10%)) !important;
4773
+ .table_style_bordered th,
4774
+ .table_style_bordered td {
4775
+ border: 1px solid rgba(0, 0, 0, 0.1);
4152
4776
  }
4153
4777
 
4154
- .background-important-12 {
4155
- background-color: var(--vb-important-12, hsl(0, 80%, 12%)) !important;
4778
+ .table_zebra thead tr {
4779
+ background-color: rgba(0, 0, 0, 0.03);
4156
4780
  }
4157
-
4158
- .background-important-15 {
4159
- background-color: var(--vb-important-15, hsl(0, 80%, 15%)) !important;
4781
+ .table_zebra tr:nth-child(even) {
4782
+ background-color: rgba(0, 0, 0, 0.03);
4160
4783
  }
4161
4784
 
4162
- .background-important-20 {
4163
- background-color: var(--vb-important-20, hsl(0, 80%, 20%)) !important;
4785
+ .background-clip-border {
4786
+ background-clip: border-box !important;
4164
4787
  }
4165
4788
 
4166
- .background-important-30 {
4167
- background-color: var(--vb-important-30, hsl(0, 80%, 30%)) !important;
4789
+ .background-clip-content {
4790
+ background-clip: content-box !important;
4168
4791
  }
4169
4792
 
4170
- .background-important-40 {
4171
- background-color: var(--vb-important-40, hsl(0, 80%, 40%)) !important;
4793
+ .background-clip-padding {
4794
+ background-clip: padding-box !important;
4172
4795
  }
4173
4796
 
4174
- .background-important-50 {
4175
- background-color: var(--vb-important-50, hsl(0, 80%, 50%)) !important;
4797
+ .background-black {
4798
+ background-color: #000 !important;
4176
4799
  }
4177
4800
 
4178
- .background-important-60 {
4179
- background-color: var(--vb-important-60, hsl(0, 80%, 60%)) !important;
4801
+ .background-white {
4802
+ background-color: #fff !important;
4180
4803
  }
4181
4804
 
4182
- .background-important-70 {
4183
- background-color: var(--vb-important-70, hsl(0, 80%, 70%)) !important;
4805
+ .background-transparent {
4806
+ background-color: transparent !important;
4184
4807
  }
4185
4808
 
4186
- .background-important-80 {
4187
- background-color: var(--vb-important-80, hsl(0, 80%, 80%)) !important;
4809
+ .background-primary-lighter {
4810
+ background-color: #e0f7fa !important;
4188
4811
  }
4189
4812
 
4190
- .background-important-90 {
4191
- background-color: var(--vb-important-90, hsl(0, 80%, 90%)) !important;
4813
+ .background-primary-light {
4814
+ background-color: #4dd0e1 !important;
4192
4815
  }
4193
4816
 
4194
- .background-important-95 {
4195
- background-color: var(--vb-important-95, hsl(0, 80%, 95%)) !important;
4817
+ .background-primary {
4818
+ background-color: #00bcd4 !important;
4196
4819
  }
4197
4820
 
4198
- .background-important-98 {
4199
- background-color: var(--vb-important-98, hsl(0, 80%, 98%)) !important;
4821
+ .background-primary-dark {
4822
+ background-color: #0097a7 !important;
4200
4823
  }
4201
4824
 
4202
- .background-important-100 {
4203
- background-color: var(--vb-important-100, hsl(0, 80%, 100%)) !important;
4825
+ .background-primary-darker {
4826
+ background-color: #006064 !important;
4204
4827
  }
4205
4828
 
4206
- .foreground {
4207
- color: var(--vb-foreground, var(--vb-neutral-20, hsl(214, 20%, 20%))) !important;
4829
+ .background-secondary-lighter {
4830
+ background-color: #eceff1 !important;
4208
4831
  }
4209
4832
 
4210
- .foreground-light {
4211
- color: var(--vb-foreground-light, var(--vb-neutral-40, hsl(214, 20%, 40%))) !important;
4833
+ .background-secondary-light {
4834
+ background-color: #90a4ae !important;
4212
4835
  }
4213
4836
 
4214
- .foreground-lighter {
4215
- color: var(--vb-foreground-lighter, var(--vb-neutral-60, hsl(214, 20%, 60%))) !important;
4837
+ .background-secondary {
4838
+ background-color: #607d8b !important;
4216
4839
  }
4217
4840
 
4218
- .foreground-black {
4219
- color: black !important;
4841
+ .background-secondary-dark {
4842
+ background-color: #455a64 !important;
4220
4843
  }
4221
4844
 
4222
- .foreground-white {
4223
- color: white !important;
4845
+ .background-secondary-darker {
4846
+ background-color: #263238 !important;
4224
4847
  }
4225
4848
 
4226
- .foreground-transparent {
4227
- color: transparent !important;
4849
+ .background-shade-light {
4850
+ background-color: #fafafa !important;
4228
4851
  }
4229
4852
 
4230
- .foreground-primary {
4231
- color: var(--vb-primary) !important;
4853
+ .background-shade {
4854
+ background-color: #f5f5f5 !important;
4232
4855
  }
4233
4856
 
4234
- .foreground-primary-0 {
4235
- color: var(--vb-primary-0, hsl(152, 60%, 0%)) !important;
4857
+ .background-shade-dark {
4858
+ background-color: #e0e0e0 !important;
4236
4859
  }
4237
4860
 
4238
- .foreground-primary-5 {
4239
- color: var(--vb-primary-5, hsl(152, 60%, 5%)) !important;
4861
+ .background-night-light {
4862
+ background-color: #616161 !important;
4240
4863
  }
4241
4864
 
4242
- .foreground-primary-10 {
4243
- color: var(--vb-primary-10, hsl(152, 60%, 10%)) !important;
4865
+ .background-night {
4866
+ background-color: #424242 !important;
4244
4867
  }
4245
4868
 
4246
- .foreground-primary-12 {
4247
- color: var(--vb-primary-12, hsl(152, 60%, 12%)) !important;
4869
+ .background-night-dark {
4870
+ background-color: #212121 !important;
4248
4871
  }
4249
4872
 
4250
- .foreground-primary-15 {
4251
- color: var(--vb-primary-15, hsl(152, 60%, 15%)) !important;
4873
+ .background-info-lighter {
4874
+ background-color: #e1f5fe !important;
4252
4875
  }
4253
4876
 
4254
- .foreground-primary-20 {
4255
- color: var(--vb-primary-20, hsl(152, 60%, 20%)) !important;
4877
+ .background-info-light {
4878
+ background-color: #4fc3f7 !important;
4256
4879
  }
4257
4880
 
4258
- .foreground-primary-30 {
4259
- color: var(--vb-primary-30, hsl(152, 60%, 30%)) !important;
4881
+ .background-info {
4882
+ background-color: #03a9f4 !important;
4260
4883
  }
4261
4884
 
4262
- .foreground-primary-40 {
4263
- color: var(--vb-primary-40, hsl(152, 60%, 40%)) !important;
4885
+ .background-info-dark {
4886
+ background-color: #0288d1 !important;
4264
4887
  }
4265
4888
 
4266
- .foreground-primary-50 {
4267
- color: var(--vb-primary-50, hsl(152, 60%, 50%)) !important;
4889
+ .background-info-darker {
4890
+ background-color: #01579b !important;
4268
4891
  }
4269
4892
 
4270
- .foreground-primary-60 {
4271
- color: var(--vb-primary-60, hsl(152, 60%, 60%)) !important;
4893
+ .background-success-lighter {
4894
+ background-color: #e8f5e9 !important;
4272
4895
  }
4273
4896
 
4274
- .foreground-primary-70 {
4275
- color: var(--vb-primary-70, hsl(152, 60%, 70%)) !important;
4897
+ .background-success-light {
4898
+ background-color: #81c784 !important;
4276
4899
  }
4277
4900
 
4278
- .foreground-primary-80 {
4279
- color: var(--vb-primary-80, hsl(152, 60%, 80%)) !important;
4901
+ .background-success {
4902
+ background-color: #4caf50 !important;
4280
4903
  }
4281
4904
 
4282
- .foreground-primary-90 {
4283
- color: var(--vb-primary-90, hsl(152, 60%, 90%)) !important;
4905
+ .background-success-dark {
4906
+ background-color: #388e3c !important;
4284
4907
  }
4285
4908
 
4286
- .foreground-primary-95 {
4287
- color: var(--vb-primary-95, hsl(152, 60%, 95%)) !important;
4909
+ .background-success-darker {
4910
+ background-color: #1b5e20 !important;
4288
4911
  }
4289
4912
 
4290
- .foreground-primary-98 {
4291
- color: var(--vb-primary-98, hsl(152, 60%, 98%)) !important;
4913
+ .background-caution-lighter {
4914
+ background-color: #fff3e0 !important;
4292
4915
  }
4293
4916
 
4294
- .foreground-primary-100 {
4295
- color: var(--vb-primary-100, hsl(152, 60%, 100%)) !important;
4917
+ .background-caution-light {
4918
+ background-color: #ffb74d !important;
4296
4919
  }
4297
4920
 
4298
- .foreground-secondary {
4299
- color: var(--vb-secondary) !important;
4921
+ .background-caution {
4922
+ background-color: #ff9800 !important;
4300
4923
  }
4301
4924
 
4302
- .foreground-secondary-0 {
4303
- color: var(--vb-secondary-0, hsl(214, 50%, 0%)) !important;
4925
+ .background-caution-dark {
4926
+ background-color: #e64a19 !important;
4304
4927
  }
4305
4928
 
4306
- .foreground-secondary-5 {
4307
- color: var(--vb-secondary-5, hsl(214, 50%, 5%)) !important;
4929
+ .background-caution-darker {
4930
+ background-color: #bf360c !important;
4308
4931
  }
4309
4932
 
4310
- .foreground-secondary-10 {
4311
- color: var(--vb-secondary-10, hsl(214, 50%, 10%)) !important;
4933
+ .background-danger-lighter {
4934
+ background-color: #ffebee !important;
4312
4935
  }
4313
4936
 
4314
- .foreground-secondary-12 {
4315
- color: var(--vb-secondary-12, hsl(214, 50%, 12%)) !important;
4937
+ .background-danger-light {
4938
+ background-color: #e57373 !important;
4316
4939
  }
4317
4940
 
4318
- .foreground-secondary-15 {
4319
- color: var(--vb-secondary-15, hsl(214, 50%, 15%)) !important;
4941
+ .background-danger {
4942
+ background-color: #f44336 !important;
4320
4943
  }
4321
4944
 
4322
- .foreground-secondary-20 {
4323
- color: var(--vb-secondary-20, hsl(214, 50%, 20%)) !important;
4945
+ .background-danger-dark {
4946
+ background-color: #d32f2f !important;
4324
4947
  }
4325
4948
 
4326
- .foreground-secondary-30 {
4327
- color: var(--vb-secondary-30, hsl(214, 50%, 30%)) !important;
4949
+ .background-danger-darker {
4950
+ background-color: #b71c1c !important;
4328
4951
  }
4329
4952
 
4330
- .foreground-secondary-40 {
4331
- color: var(--vb-secondary-40, hsl(214, 50%, 40%)) !important;
4953
+ .border {
4954
+ border: 1px solid rgba(0, 0, 0, 0.1) !important;
4332
4955
  }
4333
4956
 
4334
- .foreground-secondary-50 {
4335
- color: var(--vb-secondary-50, hsl(214, 50%, 50%)) !important;
4957
+ .border-top {
4958
+ border-top: 1px solid rgba(0, 0, 0, 0.1) !important;
4336
4959
  }
4337
4960
 
4338
- .foreground-secondary-60 {
4339
- color: var(--vb-secondary-60, hsl(214, 50%, 60%)) !important;
4961
+ .border-bottom {
4962
+ border-bottom: 1px solid rgba(0, 0, 0, 0.1) !important;
4340
4963
  }
4341
4964
 
4342
- .foreground-secondary-70 {
4343
- color: var(--vb-secondary-70, hsl(214, 50%, 70%)) !important;
4965
+ .border-left {
4966
+ border-left: 1px solid rgba(0, 0, 0, 0.1) !important;
4344
4967
  }
4345
4968
 
4346
- .foreground-secondary-80 {
4347
- color: var(--vb-secondary-80, hsl(214, 50%, 80%)) !important;
4969
+ .border-right {
4970
+ border-right: 1px solid rgba(0, 0, 0, 0.1) !important;
4348
4971
  }
4349
4972
 
4350
- .foreground-secondary-90 {
4351
- color: var(--vb-secondary-90, hsl(214, 50%, 90%)) !important;
4973
+ .border-none {
4974
+ border: 0 !important;
4352
4975
  }
4353
4976
 
4354
- .foreground-secondary-95 {
4355
- color: var(--vb-secondary-95, hsl(214, 50%, 95%)) !important;
4977
+ .border-top-none {
4978
+ border-top: 0 !important;
4356
4979
  }
4357
4980
 
4358
- .foreground-secondary-98 {
4359
- color: var(--vb-secondary-98, hsl(214, 50%, 98%)) !important;
4981
+ .border-bottom-none {
4982
+ border-bottom: 0 !important;
4360
4983
  }
4361
4984
 
4362
- .foreground-secondary-100 {
4363
- color: var(--vb-secondary-100, hsl(214, 50%, 100%)) !important;
4985
+ .border-left-none {
4986
+ border-left: 0 !important;
4364
4987
  }
4365
4988
 
4366
- .foreground-neutral {
4367
- color: var(--vb-neutral) !important;
4989
+ .border-right-none {
4990
+ border-right: 0 !important;
4368
4991
  }
4369
4992
 
4370
- .foreground-neutral-0 {
4371
- color: var(--vb-neutral-0, hsl(214, 20%, 0%)) !important;
4993
+ .border-color-light {
4994
+ border-color: rgba(0, 0, 0, 0.05) !important;
4372
4995
  }
4373
4996
 
4374
- .foreground-neutral-5 {
4375
- color: var(--vb-neutral-5, hsl(214, 20%, 5%)) !important;
4997
+ .border-color-dark {
4998
+ border-color: rgba(0, 0, 0, 0.2) !important;
4376
4999
  }
4377
5000
 
4378
- .foreground-neutral-10 {
4379
- color: var(--vb-neutral-10, hsl(214, 20%, 10%)) !important;
5001
+ .border-color-darker {
5002
+ border-color: rgba(0, 0, 0, 0.5) !important;
4380
5003
  }
4381
5004
 
4382
- .foreground-neutral-12 {
4383
- color: var(--vb-neutral-12, hsl(214, 20%, 12%)) !important;
5005
+ .border-color-invert {
5006
+ border-color: rgba(255, 255, 255, 0.1) !important;
4384
5007
  }
4385
5008
 
4386
- .foreground-neutral-15 {
4387
- color: var(--vb-neutral-15, hsl(214, 20%, 15%)) !important;
5009
+ .border-color-invert-light {
5010
+ border-color: rgba(255, 255, 255, 0.05) !important;
4388
5011
  }
4389
5012
 
4390
- .foreground-neutral-20 {
4391
- color: var(--vb-neutral-20, hsl(214, 20%, 20%)) !important;
5013
+ .border-color-invert-dark {
5014
+ border-color: rgba(255, 255, 255, 0.2) !important;
4392
5015
  }
4393
5016
 
4394
- .foreground-neutral-30 {
4395
- color: var(--vb-neutral-30, hsl(214, 20%, 30%)) !important;
5017
+ .border-color-invert-darker {
5018
+ border-color: rgba(255, 255, 255, 0.5) !important;
4396
5019
  }
4397
5020
 
4398
- .foreground-neutral-40 {
4399
- color: var(--vb-neutral-40, hsl(214, 20%, 40%)) !important;
5021
+ .border-color-transparent {
5022
+ border-color: transparent !important;
4400
5023
  }
4401
5024
 
4402
- .foreground-neutral-50 {
4403
- color: var(--vb-neutral-50, hsl(214, 20%, 50%)) !important;
5025
+ .radius {
5026
+ border-radius: 0.25rem !important;
4404
5027
  }
4405
5028
 
4406
- .foreground-neutral-60 {
4407
- color: var(--vb-neutral-60, hsl(214, 20%, 60%)) !important;
5029
+ .radius-top,
5030
+ .radius-left,
5031
+ .radius-top-left {
5032
+ border-top-left-radius: 0.25rem !important;
4408
5033
  }
4409
5034
 
4410
- .foreground-neutral-70 {
4411
- color: var(--vb-neutral-70, hsl(214, 20%, 70%)) !important;
5035
+ .radius-top,
5036
+ .radius-right,
5037
+ .radius-top-right {
5038
+ border-top-right-radius: 0.25rem !important;
4412
5039
  }
4413
5040
 
4414
- .foreground-neutral-80 {
4415
- color: var(--vb-neutral-80, hsl(214, 20%, 80%)) !important;
5041
+ .radius-bottom,
5042
+ .radius-right,
5043
+ .radius-bottom-right {
5044
+ border-bottom-right-radius: 0.25rem !important;
4416
5045
  }
4417
5046
 
4418
- .foreground-neutral-90 {
4419
- color: var(--vb-neutral-90, hsl(214, 20%, 90%)) !important;
5047
+ .radius-bottom,
5048
+ .radius-left,
5049
+ .radius-bottom-left {
5050
+ border-bottom-left-radius: 0.25rem !important;
4420
5051
  }
4421
5052
 
4422
- .foreground-neutral-95 {
4423
- color: var(--vb-neutral-95, hsl(214, 20%, 95%)) !important;
5053
+ .radius-circle {
5054
+ border-radius: 9999px !important;
4424
5055
  }
4425
5056
 
4426
- .foreground-neutral-98 {
4427
- color: var(--vb-neutral-98, hsl(214, 20%, 98%)) !important;
5057
+ .radius-circle-top,
5058
+ .radius-circle-left,
5059
+ .radius-circle-top-left {
5060
+ border-top-left-radius: 9999px !important;
4428
5061
  }
4429
5062
 
4430
- .foreground-neutral-100 {
4431
- color: var(--vb-neutral-100, hsl(214, 20%, 100%)) !important;
5063
+ .radius-circle-top,
5064
+ .radius-circle-right,
5065
+ .radius-circle-top-right {
5066
+ border-top-right-radius: 9999px !important;
4432
5067
  }
4433
5068
 
4434
- .foreground-important {
4435
- color: var(--vb-important) !important;
5069
+ .radius-circle-bottom,
5070
+ .radius-circle-right,
5071
+ .radius-circle-bottom-right {
5072
+ border-bottom-right-radius: 9999px !important;
4436
5073
  }
4437
5074
 
4438
- .foreground-important-0 {
4439
- color: var(--vb-important-0, hsl(0, 80%, 0%)) !important;
5075
+ .radius-circle-bottom,
5076
+ .radius-circle-left,
5077
+ .radius-circle-bottom-left {
5078
+ border-bottom-left-radius: 9999px !important;
4440
5079
  }
4441
5080
 
4442
- .foreground-important-5 {
4443
- color: var(--vb-important-5, hsl(0, 80%, 5%)) !important;
5081
+ .radius-square {
5082
+ border-radius: 0 !important;
4444
5083
  }
4445
5084
 
4446
- .foreground-important-10 {
4447
- color: var(--vb-important-10, hsl(0, 80%, 10%)) !important;
5085
+ .radius-square-top,
5086
+ .radius-square-left,
5087
+ .radius-square-top-left {
5088
+ border-top-left-radius: 0 !important;
4448
5089
  }
4449
5090
 
4450
- .foreground-important-12 {
4451
- color: var(--vb-important-12, hsl(0, 80%, 12%)) !important;
5091
+ .radius-square-top,
5092
+ .radius-square-right,
5093
+ .radius-square-top-right {
5094
+ border-top-right-radius: 0 !important;
4452
5095
  }
4453
5096
 
4454
- .foreground-important-15 {
4455
- color: var(--vb-important-15, hsl(0, 80%, 15%)) !important;
5097
+ .radius-square-bottom,
5098
+ .radius-square-right,
5099
+ .radius-square-bottom-right {
5100
+ border-bottom-right-radius: 0 !important;
4456
5101
  }
4457
5102
 
4458
- .foreground-important-20 {
4459
- color: var(--vb-important-20, hsl(0, 80%, 20%)) !important;
5103
+ .radius-square-bottom,
5104
+ .radius-square-left,
5105
+ .radius-square-bottom-left {
5106
+ border-bottom-left-radius: 0 !important;
4460
5107
  }
4461
5108
 
4462
- .foreground-important-30 {
4463
- color: var(--vb-important-30, hsl(0, 80%, 30%)) !important;
5109
+ .elevate {
5110
+ box-shadow: 0 0 2px 1px rgba(33, 33, 33, 0.05), 0 2px 6px rgba(33, 33, 33, 0.2) !important;
4464
5111
  }
4465
5112
 
4466
- .foreground-important-40 {
4467
- color: var(--vb-important-40, hsl(0, 80%, 40%)) !important;
5113
+ .elevate-flat {
5114
+ box-shadow: 0 0 0 0 transparent !important;
4468
5115
  }
4469
5116
 
4470
- .foreground-important-50 {
4471
- color: var(--vb-important-50, hsl(0, 80%, 50%)) !important;
5117
+ .elevate-1 {
5118
+ box-shadow: 0 0 2px 1px rgba(33, 33, 33, 0.05), 0 1px 3px rgba(33, 33, 33, 0.2) !important;
4472
5119
  }
4473
5120
 
4474
- .foreground-important-60 {
4475
- color: var(--vb-important-60, hsl(0, 80%, 60%)) !important;
5121
+ .elevate-2 {
5122
+ box-shadow: 0 0 2px 1px rgba(33, 33, 33, 0.05), 0 2px 6px rgba(33, 33, 33, 0.2) !important;
4476
5123
  }
4477
5124
 
4478
- .foreground-important-70 {
4479
- color: var(--vb-important-70, hsl(0, 80%, 70%)) !important;
5125
+ .elevate-3 {
5126
+ box-shadow: 0 0 2px 1px rgba(33, 33, 33, 0.05), 0 4px 12px rgba(33, 33, 33, 0.2) !important;
4480
5127
  }
4481
5128
 
4482
- .foreground-important-80 {
4483
- color: var(--vb-important-80, hsl(0, 80%, 80%)) !important;
5129
+ .elevate-4 {
5130
+ box-shadow: 0 0 2px 1px rgba(33, 33, 33, 0.05), 0 8px 18px rgba(33, 33, 33, 0.2) !important;
4484
5131
  }
4485
5132
 
4486
- .foreground-important-90 {
4487
- color: var(--vb-important-90, hsl(0, 80%, 90%)) !important;
5133
+ .elevate-5 {
5134
+ box-shadow: 0 0 2px 1px rgba(33, 33, 33, 0.05), 0 12px 24px rgba(33, 33, 33, 0.2) !important;
4488
5135
  }
4489
5136
 
4490
- .foreground-important-95 {
4491
- color: var(--vb-important-95, hsl(0, 80%, 95%)) !important;
5137
+ .color {
5138
+ color: #212121 !important;
4492
5139
  }
4493
5140
 
4494
- .foreground-important-98 {
4495
- color: var(--vb-important-98, hsl(0, 80%, 98%)) !important;
5141
+ .color-subtle {
5142
+ color: #9e9e9e !important;
4496
5143
  }
4497
5144
 
4498
- .foreground-important-100 {
4499
- color: var(--vb-important-100, hsl(0, 80%, 100%)) !important;
5145
+ .color-invert {
5146
+ color: #fff !important;
4500
5147
  }
4501
5148
 
4502
- .border {
4503
- border: 1px solid var(--vb-border-color, rgba(0, 0, 0, 0.1)) !important;
5149
+ .color-invert-subtle {
5150
+ color: rgba(255, 255, 255, 0.6) !important;
4504
5151
  }
4505
5152
 
4506
- .border-top {
4507
- border-top: 1px solid var(--vb-border-color, rgba(0, 0, 0, 0.1)) !important;
5153
+ .color-black {
5154
+ color: #000 !important;
4508
5155
  }
4509
5156
 
4510
- .border-bottom {
4511
- border-bottom: 1px solid var(--vb-border-color, rgba(0, 0, 0, 0.1)) !important;
5157
+ .color-white {
5158
+ color: #fff !important;
4512
5159
  }
4513
5160
 
4514
- .border-left {
4515
- border-left: 1px solid var(--vb-border-color, rgba(0, 0, 0, 0.1)) !important;
5161
+ .color-transparent {
5162
+ color: transparent !important;
4516
5163
  }
4517
5164
 
4518
- .border-right {
4519
- border-right: 1px solid var(--vb-border-color, rgba(0, 0, 0, 0.1)) !important;
5165
+ .color-primary-lighter {
5166
+ color: #e0f7fa !important;
4520
5167
  }
4521
5168
 
4522
- .border-none {
4523
- border: 0 !important;
5169
+ .color-primary-light {
5170
+ color: #4dd0e1 !important;
4524
5171
  }
4525
5172
 
4526
- .border-top-none {
4527
- border-top: 0 !important;
5173
+ .color-primary {
5174
+ color: #00bcd4 !important;
4528
5175
  }
4529
5176
 
4530
- .border-bottom-none {
4531
- border-bottom: 0 !important;
5177
+ .color-primary-dark {
5178
+ color: #0097a7 !important;
4532
5179
  }
4533
5180
 
4534
- .border-left-none {
4535
- border-left: 0 !important;
5181
+ .color-primary-darker {
5182
+ color: #006064 !important;
4536
5183
  }
4537
5184
 
4538
- .border-right-none {
4539
- border-right: 0 !important;
5185
+ .color-secondary-lighter {
5186
+ color: #eceff1 !important;
4540
5187
  }
4541
5188
 
4542
- .border-color-dark {
4543
- border-color: var(--vb-border-color-dark, rgba(0, 0, 0, 0.2)) !important;
5189
+ .color-secondary-light {
5190
+ color: #90a4ae !important;
4544
5191
  }
4545
5192
 
4546
- .border-color-darker {
4547
- border-color: var(--vb-border-color-darker, rgba(0, 0, 0, 0.3)) !important;
5193
+ .color-secondary {
5194
+ color: #607d8b !important;
4548
5195
  }
4549
5196
 
4550
- .border-color-transparent {
4551
- border-color: transparent !important;
5197
+ .color-secondary-dark {
5198
+ color: #455a64 !important;
4552
5199
  }
4553
5200
 
4554
- .radius {
4555
- border-radius: 0.25rem !important;
5201
+ .color-secondary-darker {
5202
+ color: #263238 !important;
4556
5203
  }
4557
5204
 
4558
- .radius-top,
4559
- .radius-left,
4560
- .radius-top-left {
4561
- border-top-left-radius: 0.25rem !important;
5205
+ .color-shade-light {
5206
+ color: #fafafa !important;
4562
5207
  }
4563
5208
 
4564
- .radius-top,
4565
- .radius-right,
4566
- .radius-top-right {
4567
- border-top-right-radius: 0.25rem !important;
5209
+ .color-shade {
5210
+ color: #f5f5f5 !important;
4568
5211
  }
4569
5212
 
4570
- .radius-bottom,
4571
- .radius-right,
4572
- .radius-bottom-right {
4573
- border-bottom-right-radius: 0.25rem !important;
5213
+ .color-shade-dark {
5214
+ color: #e0e0e0 !important;
4574
5215
  }
4575
5216
 
4576
- .radius-bottom,
4577
- .radius-left,
4578
- .radius-bottom-left {
4579
- border-bottom-left-radius: 0.25rem !important;
5217
+ .color-night-light {
5218
+ color: #616161 !important;
4580
5219
  }
4581
5220
 
4582
- .radius-lg {
4583
- border-radius: 0.5rem !important;
5221
+ .color-night {
5222
+ color: #424242 !important;
4584
5223
  }
4585
5224
 
4586
- .radius-lg-top,
4587
- .radius-lg-left,
4588
- .radius-lg-top-left {
4589
- border-top-left-radius: 0.5rem !important;
5225
+ .color-night-dark {
5226
+ color: #212121 !important;
4590
5227
  }
4591
5228
 
4592
- .radius-lg-top,
4593
- .radius-lg-right,
4594
- .radius-lg-top-right {
4595
- border-top-right-radius: 0.5rem !important;
5229
+ .color-info-lighter {
5230
+ color: #e1f5fe !important;
4596
5231
  }
4597
5232
 
4598
- .radius-lg-bottom,
4599
- .radius-lg-right,
4600
- .radius-lg-bottom-right {
4601
- border-bottom-right-radius: 0.5rem !important;
5233
+ .color-info-light {
5234
+ color: #4fc3f7 !important;
4602
5235
  }
4603
5236
 
4604
- .radius-lg-bottom,
4605
- .radius-lg-left,
4606
- .radius-lg-bottom-left {
4607
- border-bottom-left-radius: 0.5rem !important;
5237
+ .color-info {
5238
+ color: #03a9f4 !important;
4608
5239
  }
4609
5240
 
4610
- .radius-lg-circle {
4611
- border-radius: 9999px !important;
5241
+ .color-info-dark {
5242
+ color: #0288d1 !important;
4612
5243
  }
4613
5244
 
4614
- .radius-lg-circle-top,
4615
- .radius-lg-circle-left,
4616
- .radius-lg-circle-top-left {
4617
- border-top-left-radius: 9999px !important;
5245
+ .color-info-darker {
5246
+ color: #01579b !important;
4618
5247
  }
4619
5248
 
4620
- .radius-lg-circle-top,
4621
- .radius-lg-circle-right,
4622
- .radius-lg-circle-top-right {
4623
- border-top-right-radius: 9999px !important;
5249
+ .color-success-lighter {
5250
+ color: #e8f5e9 !important;
4624
5251
  }
4625
5252
 
4626
- .radius-lg-circle-bottom,
4627
- .radius-lg-circle-right,
4628
- .radius-lg-circle-bottom-right {
4629
- border-bottom-right-radius: 9999px !important;
5253
+ .color-success-light {
5254
+ color: #81c784 !important;
4630
5255
  }
4631
5256
 
4632
- .radius-lg-circle-bottom,
4633
- .radius-lg-circle-left,
4634
- .radius-lg-circle-bottom-left {
4635
- border-bottom-left-radius: 9999px !important;
5257
+ .color-success {
5258
+ color: #4caf50 !important;
4636
5259
  }
4637
5260
 
4638
- .radius-lg-circle-square {
4639
- border-radius: 0 !important;
5261
+ .color-success-dark {
5262
+ color: #388e3c !important;
4640
5263
  }
4641
5264
 
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;
5265
+ .color-success-darker {
5266
+ color: #1b5e20 !important;
4646
5267
  }
4647
5268
 
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;
5269
+ .color-caution-lighter {
5270
+ color: #fff3e0 !important;
4652
5271
  }
4653
5272
 
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;
5273
+ .color-caution-light {
5274
+ color: #ffb74d !important;
4658
5275
  }
4659
5276
 
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;
5277
+ .color-caution {
5278
+ color: #ff9800 !important;
4664
5279
  }
4665
5280
 
4666
- .shadow {
4667
- box-shadow: 0 2px 6px var(--vb-shadow-color, hsl(var(--vb-neutral-hs, 214deg, 20%), 20%, 20%)) !important;
5281
+ .color-caution-dark {
5282
+ color: #e64a19 !important;
4668
5283
  }
4669
5284
 
4670
- .shadow-flat {
4671
- box-shadow: 0 0 0 0 transparent !important;
5285
+ .color-caution-darker {
5286
+ color: #bf360c !important;
4672
5287
  }
4673
5288
 
4674
- .shadow-1 {
4675
- box-shadow: 0 1px 3px var(--vb-shadow-color, hsl(var(--vb-neutral-hs, 214deg, 20%), 20%, 20%)) !important;
5289
+ .color-danger-lighter {
5290
+ color: #ffebee !important;
4676
5291
  }
4677
5292
 
4678
- .shadow-2 {
4679
- box-shadow: 0 2px 6px var(--vb-shadow-color, hsl(var(--vb-neutral-hs, 214deg, 20%), 20%, 20%)) !important;
5293
+ .color-danger-light {
5294
+ color: #e57373 !important;
4680
5295
  }
4681
5296
 
4682
- .shadow-3 {
4683
- box-shadow: 0 4px 12px var(--vb-shadow-color, hsl(var(--vb-neutral-hs, 214deg, 20%), 20%, 20%)) !important;
5297
+ .color-danger {
5298
+ color: #f44336 !important;
4684
5299
  }
4685
5300
 
4686
- .shadow-4 {
4687
- box-shadow: 0 8px 18px var(--vb-shadow-color, hsl(var(--vb-neutral-hs, 214deg, 20%), 20%, 20%)) !important;
5301
+ .color-danger-dark {
5302
+ color: #d32f2f !important;
4688
5303
  }
4689
5304
 
4690
- .shadow-5 {
4691
- box-shadow: 0 12px 24px var(--vb-shadow-color, hsl(var(--vb-neutral-hs, 214deg, 20%), 20%, 20%)) !important;
5305
+ .color-danger-darker {
5306
+ color: #b71c1c !important;
4692
5307
  }
4693
5308
 
4694
5309
  .display-inline {
@@ -5040,87 +5655,164 @@ input::-moz-placeholder {
5040
5655
  }
5041
5656
 
5042
5657
  .flex-gap {
5043
- gap: 1em !important;
5658
+ margin-top: -1em !important;
5659
+ margin-left: -1em !important;
5660
+ }
5661
+ .flex-gap > * {
5662
+ margin-top: 1em !important;
5663
+ margin-left: 1em !important;
5044
5664
  }
5045
5665
 
5046
5666
  .flex-gap-none {
5047
- gap: 0 !important;
5667
+ margin-top: 0 !important;
5668
+ margin-left: 0 !important;
5669
+ }
5670
+ .flex-gap-none > * {
5671
+ margin-top: 0 !important;
5672
+ margin-left: 0 !important;
5048
5673
  }
5049
5674
 
5050
5675
  .flex-gap-xs {
5051
- gap: 0.25em !important;
5676
+ margin-top: -0.25em !important;
5677
+ margin-left: -0.25em !important;
5678
+ }
5679
+ .flex-gap-xs > * {
5680
+ margin-top: 0.25em !important;
5681
+ margin-left: 0.25em !important;
5052
5682
  }
5053
5683
 
5054
5684
  .flex-gap-sm {
5055
- gap: 0.5em !important;
5685
+ margin-top: -0.5em !important;
5686
+ margin-left: -0.5em !important;
5687
+ }
5688
+ .flex-gap-sm > * {
5689
+ margin-top: 0.5em !important;
5690
+ margin-left: 0.5em !important;
5056
5691
  }
5057
5692
 
5058
5693
  .flex-gap-md {
5059
- gap: 1em !important;
5694
+ margin-top: -1em !important;
5695
+ margin-left: -1em !important;
5696
+ }
5697
+ .flex-gap-md > * {
5698
+ margin-top: 1em !important;
5699
+ margin-left: 1em !important;
5060
5700
  }
5061
5701
 
5062
5702
  .flex-gap-lg {
5063
- gap: 1.5em !important;
5703
+ margin-top: -1.5em !important;
5704
+ margin-left: -1.5em !important;
5705
+ }
5706
+ .flex-gap-lg > * {
5707
+ margin-top: 1.5em !important;
5708
+ margin-left: 1.5em !important;
5064
5709
  }
5065
5710
 
5066
5711
  .flex-gap-xl {
5067
- gap: 2em !important;
5712
+ margin-top: -2em !important;
5713
+ margin-left: -2em !important;
5714
+ }
5715
+ .flex-gap-xl > * {
5716
+ margin-top: 2em !important;
5717
+ margin-left: 2em !important;
5068
5718
  }
5069
5719
 
5070
5720
  .flex-gap-x {
5071
- column-gap: 1em !important;
5721
+ margin-left: -1em !important;
5722
+ }
5723
+ .flex-gap-x > * {
5724
+ margin-left: 1em !important;
5072
5725
  }
5073
5726
 
5074
5727
  .flex-gap-x-none {
5075
- column-gap: 0 !important;
5728
+ margin-left: 0 !important;
5729
+ }
5730
+ .flex-gap-x-none > * {
5731
+ margin-left: 0 !important;
5076
5732
  }
5077
5733
 
5078
5734
  .flex-gap-x-xs {
5079
- column-gap: 0.25em !important;
5735
+ margin-left: -0.25em !important;
5736
+ }
5737
+ .flex-gap-x-xs > * {
5738
+ margin-left: 0.25em !important;
5080
5739
  }
5081
5740
 
5082
5741
  .flex-gap-x-sm {
5083
- column-gap: 0.5em !important;
5742
+ margin-left: -0.5em !important;
5743
+ }
5744
+ .flex-gap-x-sm > * {
5745
+ margin-left: 0.5em !important;
5084
5746
  }
5085
5747
 
5086
5748
  .flex-gap-x-md {
5087
- column-gap: 1em !important;
5749
+ margin-left: -1em !important;
5750
+ }
5751
+ .flex-gap-x-md > * {
5752
+ margin-left: 1em !important;
5088
5753
  }
5089
5754
 
5090
5755
  .flex-gap-x-lg {
5091
- column-gap: 1.5em !important;
5756
+ margin-left: -1.5em !important;
5757
+ }
5758
+ .flex-gap-x-lg > * {
5759
+ margin-left: 1.5em !important;
5092
5760
  }
5093
5761
 
5094
5762
  .flex-gap-x-xl {
5095
- column-gap: 2em !important;
5763
+ margin-left: -2em !important;
5764
+ }
5765
+ .flex-gap-x-xl > * {
5766
+ margin-left: 2em !important;
5096
5767
  }
5097
5768
 
5098
5769
  .flex-gap-y {
5099
- row-gap: 1em !important;
5770
+ margin-top: -1em !important;
5771
+ }
5772
+ .flex-gap-y > * {
5773
+ margin-top: 1em !important;
5100
5774
  }
5101
5775
 
5102
5776
  .flex-gap-y-none {
5103
- row-gap: 0 !important;
5777
+ margin-top: 0 !important;
5778
+ }
5779
+ .flex-gap-y-none > * {
5780
+ margin-top: 0 !important;
5104
5781
  }
5105
5782
 
5106
5783
  .flex-gap-y-xs {
5107
- row-gap: 0.25em !important;
5784
+ margin-top: -0.25em !important;
5785
+ }
5786
+ .flex-gap-y-xs > * {
5787
+ margin-top: 0.25em !important;
5108
5788
  }
5109
5789
 
5110
5790
  .flex-gap-y-sm {
5111
- row-gap: 0.5em !important;
5791
+ margin-top: -0.5em !important;
5792
+ }
5793
+ .flex-gap-y-sm > * {
5794
+ margin-top: 0.5em !important;
5112
5795
  }
5113
5796
 
5114
5797
  .flex-gap-y-md {
5115
- row-gap: 1em !important;
5798
+ margin-top: -1em !important;
5799
+ }
5800
+ .flex-gap-y-md > * {
5801
+ margin-top: 1em !important;
5116
5802
  }
5117
5803
 
5118
5804
  .flex-gap-y-lg {
5119
- row-gap: 1.5em !important;
5805
+ margin-top: -1.5em !important;
5806
+ }
5807
+ .flex-gap-y-lg > * {
5808
+ margin-top: 1.5em !important;
5120
5809
  }
5121
5810
 
5122
5811
  .flex-gap-y-xl {
5123
- row-gap: 2em !important;
5812
+ margin-top: -2em !important;
5813
+ }
5814
+ .flex-gap-y-xl > * {
5815
+ margin-top: 2em !important;
5124
5816
  }
5125
5817
 
5126
5818
  .font-family-sans {
@@ -5136,7 +5828,7 @@ input::-moz-placeholder {
5136
5828
  }
5137
5829
 
5138
5830
  .font-size-base {
5139
- font-size: 1rem !important;
5831
+ font-size: 16px !important;
5140
5832
  }
5141
5833
 
5142
5834
  .font-size-sm {
@@ -5148,7 +5840,7 @@ input::-moz-placeholder {
5148
5840
  }
5149
5841
 
5150
5842
  .font-leading-base {
5151
- line-height: 1.625 !important;
5843
+ line-height: 1.5 !important;
5152
5844
  }
5153
5845
 
5154
5846
  .font-leading-sm {
@@ -5156,7 +5848,7 @@ input::-moz-placeholder {
5156
5848
  }
5157
5849
 
5158
5850
  .font-leading-lg {
5159
- line-height: 1.875 !important;
5851
+ line-height: 1.625 !important;
5160
5852
  }
5161
5853
 
5162
5854
  .font-kerning-0 {
@@ -5541,66 +6233,6 @@ input::-moz-placeholder {
5541
6233
  max-width: 100% !important;
5542
6234
  }
5543
6235
 
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
6236
  .padding {
5605
6237
  padding: 1em !important;
5606
6238
  }
@@ -5877,154 +6509,6 @@ input::-moz-placeholder {
5877
6509
  white-space: nowrap !important;
5878
6510
  }
5879
6511
 
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
6512
  :root {
6029
6513
  --vb-breakpoint-xs: 480px;
6030
6514
  --vb-breakpoint-sm: 620px;
@@ -6033,17 +6517,4 @@ input::-moz-placeholder {
6033
6517
  --vb-breakpoint-xl: 1380px;
6034
6518
  }
6035
6519
 
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 */
6520
+ /*# sourceMappingURL=styles.css.map */