@forgerock/login-widget 1.1.0 → 1.2.0-beta.10

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/widget.css CHANGED
@@ -45,9 +45,22 @@
45
45
  -moz-tab-size: 4; /* 3 */
46
46
  -o-tab-size: 4;
47
47
  tab-size: 4; /* 3 */
48
- font-family: 'Open Sans', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI',
49
- Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', Segoe UI Emoji,
50
- Segoe UI Symbol, Noto Color Emoji; /* 4 */
48
+ font-family:
49
+ 'Open Sans',
50
+ ui-sans-serif,
51
+ system-ui,
52
+ -apple-system,
53
+ BlinkMacSystemFont,
54
+ 'Segoe UI',
55
+ Roboto,
56
+ 'Helvetica Neue',
57
+ Arial,
58
+ 'Noto Sans',
59
+ sans-serif,
60
+ 'Apple Color Emoji',
61
+ Segoe UI Emoji,
62
+ Segoe UI Symbol,
63
+ Noto Color Emoji; /* 4 */
51
64
  }
52
65
  /*
53
66
  1. Add the correct height in Firefox.
@@ -85,7 +98,8 @@ Base link color when inside of localized content.
85
98
  --tw-text-opacity: 1;
86
99
  color: rgb(37 99 235 / var(--tw-text-opacity));
87
100
  }
88
- :where(.tw_dark) a {
101
+ :where(.tw_dark) :where(.fr_widget-root) a,
102
+ :where(.tw_dark) :where(.fr_widget-root) a {
89
103
  --tw-text-opacity: 1;
90
104
  color: rgb(96 165 250 / var(--tw-text-opacity));
91
105
  }
@@ -396,11 +410,17 @@ position: absolute;
396
410
  .tw_relative {
397
411
  position: relative;
398
412
  }
413
+ .tw_left-0 {
414
+ left: 0px;
415
+ }
416
+ .tw_right-1 {
417
+ right: 0.25rem;
418
+ }
399
419
  .tw_top-0 {
400
420
  top: 0px;
401
421
  }
402
- .tw_left-0 {
403
- left: 0px;
422
+ .tw_top-1 {
423
+ top: 0.25rem;
404
424
  }
405
425
  .tw_col-start-2 {
406
426
  grid-column-start: 2;
@@ -408,6 +428,9 @@ grid-column-start: 2;
408
428
  .tw_row-start-2 {
409
429
  grid-row-start: 2;
410
430
  }
431
+ .tw_m-auto {
432
+ margin: auto;
433
+ }
411
434
  .tw_my-4 {
412
435
  margin-top: 1rem;
413
436
  margin-bottom: 1rem;
@@ -416,20 +439,23 @@ margin-bottom: 1rem;
416
439
  margin-top: 1.5rem;
417
440
  margin-bottom: 1.5rem;
418
441
  }
419
- .tw_mb-6 {
420
- margin-bottom: 1.5rem;
421
- }
422
442
  .tw_-mt-5 {
423
443
  margin-top: -1.25rem;
424
444
  }
425
445
  .tw_mb-2 {
426
446
  margin-bottom: 0.5rem;
427
447
  }
448
+ .tw_mb-4 {
449
+ margin-bottom: 1rem;
450
+ }
451
+ .tw_mb-6 {
452
+ margin-bottom: 1.5rem;
453
+ }
428
454
  .tw_mb-8 {
429
455
  margin-bottom: 2rem;
430
456
  }
431
- .tw_mb-4 {
432
- margin-bottom: 1rem;
457
+ .tw_ml-1 {
458
+ margin-left: 0.25rem;
433
459
  }
434
460
  .tw_ml-10 {
435
461
  margin-left: 2.5rem;
@@ -437,9 +463,6 @@ margin-left: 2.5rem;
437
463
  .tw_mr-2 {
438
464
  margin-right: 0.5rem;
439
465
  }
440
- .tw_ml-1 {
441
- margin-left: 0.25rem;
442
- }
443
466
  .tw_mt-6 {
444
467
  margin-top: 1.5rem;
445
468
  }
@@ -458,12 +481,12 @@ display: grid;
458
481
  .tw_hidden {
459
482
  display: none;
460
483
  }
484
+ .tw_h-24 {
485
+ height: 6rem;
486
+ }
461
487
  .tw_h-28 {
462
488
  height: 7rem;
463
489
  }
464
- .tw_h-full {
465
- height: 100%;
466
- }
467
490
  .tw_h-32 {
468
491
  height: 8rem;
469
492
  }
@@ -473,29 +496,29 @@ height: 1rem;
473
496
  .tw_h-8 {
474
497
  height: 2rem;
475
498
  }
476
- .tw_h-24 {
477
- height: 6rem;
499
+ .tw_h-full {
500
+ height: 100%;
478
501
  }
479
502
  .tw_min-h-full {
480
503
  min-height: 100%;
481
504
  }
482
- .tw_w-full {
483
- width: 100%;
505
+ .tw_w-24 {
506
+ width: 6rem;
484
507
  }
485
508
  .tw_w-28 {
486
509
  width: 7rem;
487
510
  }
488
- .tw_w-auto {
489
- width: auto;
490
- }
491
511
  .tw_w-4 {
492
512
  width: 1rem;
493
513
  }
494
514
  .tw_w-8 {
495
515
  width: 2rem;
496
516
  }
497
- .tw_w-24 {
498
- width: 6rem;
517
+ .tw_w-auto {
518
+ width: auto;
519
+ }
520
+ .tw_w-full {
521
+ width: 100%;
499
522
  }
500
523
  .tw_flex-1 {
501
524
  flex: 1 1 0%;
@@ -524,27 +547,18 @@ list-style-type: disc;
524
547
  -moz-columns: 2;
525
548
  columns: 2;
526
549
  }
527
- .tw_grid-cols-\[2\.5em_1fr\] {
528
- grid-template-columns: 2.5em 1fr;
550
+ .tw_grid-cols-1 {
551
+ grid-template-columns: repeat(1, minmax(0, 1fr));
529
552
  }
530
553
  .tw_grid-cols-\[1\.5em_1fr\] {
531
554
  grid-template-columns: 1.5em 1fr;
532
555
  }
556
+ .tw_grid-cols-\[2\.5em_1fr\] {
557
+ grid-template-columns: 2.5em 1fr;
558
+ }
533
559
  .tw_grid-cols-\[2em_1fr\] {
534
560
  grid-template-columns: 2em 1fr;
535
561
  }
536
- .tw_grid-cols-4 {
537
- grid-template-columns: repeat(4, minmax(0, 1fr));
538
- }
539
- .tw_grid-cols-3 {
540
- grid-template-columns: repeat(3, minmax(0, 1fr));
541
- }
542
- .tw_grid-cols-2 {
543
- grid-template-columns: repeat(2, minmax(0, 1fr));
544
- }
545
- .tw_grid-cols-1 {
546
- grid-template-columns: repeat(1, minmax(0, 1fr));
547
- }
548
562
  .tw_flex-wrap {
549
563
  flex-wrap: wrap;
550
564
  }
@@ -557,30 +571,36 @@ justify-items: stretch;
557
571
  .tw_gap-4 {
558
572
  gap: 1rem;
559
573
  }
560
- .tw_rounded-md {
561
- border-radius: 0.375rem;
574
+ .tw_overflow-hidden {
575
+ overflow: hidden;
562
576
  }
563
577
  .tw_rounded-full {
564
578
  border-radius: 9999px;
565
579
  }
580
+ .tw_rounded-md {
581
+ border-radius: 0.375rem;
582
+ }
566
583
  .\!tw_rounded-r-none {
567
584
  border-top-right-radius: 0px !important;
568
585
  border-bottom-right-radius: 0px !important;
569
586
  }
570
- .tw_border-0 {
571
- border-width: 0px;
572
- }
573
587
  .tw_border {
574
588
  border-width: 1px;
575
589
  }
590
+ .tw_border-0 {
591
+ border-width: 0px;
592
+ }
576
593
  .tw_border-4 {
577
594
  border-width: 4px;
578
595
  }
596
+ .\!tw_border-r-0 {
597
+ border-right-width: 0px !important;
598
+ }
579
599
  .tw_border-b {
580
600
  border-bottom-width: 1px;
581
601
  }
582
- .\!tw_border-r-0 {
583
- border-right-width: 0px !important;
602
+ .tw_border-none {
603
+ border-style: none;
584
604
  }
585
605
  .tw_border-secondary-light {
586
606
  --tw-border-opacity: 1;
@@ -589,6 +609,10 @@ border-color: rgb(209 213 219 / var(--tw-border-opacity));
589
609
  .tw_border-transparent {
590
610
  border-color: transparent;
591
611
  }
612
+ .tw_bg-background-dark {
613
+ --tw-bg-opacity: 1;
614
+ background-color: rgb(30 41 59 / var(--tw-bg-opacity));
615
+ }
592
616
  .tw_bg-background-light {
593
617
  --tw-bg-opacity: 1;
594
618
  background-color: rgb(241 245 249 / var(--tw-bg-opacity));
@@ -597,6 +621,13 @@ background-color: rgb(241 245 249 / var(--tw-bg-opacity));
597
621
  --tw-bg-opacity: 1;
598
622
  background-color: rgb(51 65 85 / var(--tw-bg-opacity));
599
623
  }
624
+ .tw_bg-transparent {
625
+ background-color: transparent;
626
+ }
627
+ .tw_bg-white {
628
+ --tw-bg-opacity: 1;
629
+ background-color: rgb(255 255 255 / var(--tw-bg-opacity));
630
+ }
600
631
  .tw_fill-current {
601
632
  fill: currentColor;
602
633
  }
@@ -607,85 +638,99 @@ padding: 1.5rem;
607
638
  padding-top: 1rem;
608
639
  padding-bottom: 1rem;
609
640
  }
610
- .tw_pt-10 {
611
- padding-top: 2.5rem;
612
- }
613
641
  .tw_pb-6 {
614
642
  padding-bottom: 1.5rem;
615
643
  }
644
+ .tw_pt-10 {
645
+ padding-top: 2.5rem;
646
+ }
616
647
  .tw_text-center {
617
648
  text-align: center;
618
649
  }
619
650
  .tw_text-right {
620
651
  text-align: right;
621
652
  }
653
+ .tw_align-top {
654
+ vertical-align: top;
655
+ }
622
656
  .tw_font-mono {
623
657
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
624
658
  }
659
+ .tw_text-4xl {
660
+ font-size: 2.25rem;
661
+ line-height: 2.5rem;
662
+ }
625
663
  .tw_text-base {
626
664
  font-size: 0.9375rem;
627
665
  line-height: 1.25;
628
666
  }
629
- .tw_text-sm {
630
- font-size: 0.875rem;
631
- line-height: 1.25;
632
- }
633
667
  .tw_text-lg {
634
668
  font-size: 1.25rem;
635
669
  line-height: 1;
636
670
  }
637
- .tw_text-4xl {
638
- font-size: 2.25rem;
639
- line-height: 2.5rem;
640
- }
641
- .tw_font-light {
642
- font-weight: 300;
671
+ .tw_text-sm {
672
+ font-size: 0.875rem;
673
+ line-height: 1.25;
643
674
  }
644
675
  .tw_font-bold {
645
676
  font-weight: 700;
646
677
  }
678
+ .tw_font-light {
679
+ font-weight: 300;
680
+ }
647
681
  .tw_font-semibold {
648
682
  font-weight: 600;
649
683
  }
650
- .tw_text-primary-light {
684
+ .tw_text-error-dark {
651
685
  --tw-text-opacity: 1;
652
- color: rgb(2 122 184 / var(--tw-text-opacity));
686
+ color: rgb(153 27 27 / var(--tw-text-opacity));
653
687
  }
654
688
  .tw_text-gray-400 {
655
689
  --tw-text-opacity: 1;
656
690
  color: rgb(156 163 175 / var(--tw-text-opacity));
657
691
  }
658
- .tw_text-secondary-dark {
659
- --tw-text-opacity: 1;
660
- color: rgb(55 65 81 / var(--tw-text-opacity));
661
- }
662
692
  .tw_text-link-dark {
663
693
  --tw-text-opacity: 1;
664
694
  color: rgb(37 99 235 / var(--tw-text-opacity));
665
695
  }
696
+ .tw_text-primary-light {
697
+ --tw-text-opacity: 1;
698
+ color: rgb(2 122 184 / var(--tw-text-opacity));
699
+ }
700
+ .tw_text-secondary-dark {
701
+ --tw-text-opacity: 1;
702
+ color: rgb(55 65 81 / var(--tw-text-opacity));
703
+ }
666
704
  .tw_text-secondary-light {
667
705
  --tw-text-opacity: 1;
668
706
  color: rgb(209 213 219 / var(--tw-text-opacity));
669
707
  }
670
- .tw_text-error-dark {
671
- --tw-text-opacity: 1;
672
- color: rgb(153 27 27 / var(--tw-text-opacity));
708
+ .tw_shadow-\[0_0_1rem_2rem_black\] {
709
+ --tw-shadow: 0 0 1rem 2rem black;
710
+ --tw-shadow-colored: 0 0 1rem 2rem var(--tw-shadow-color);
711
+ box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
712
+ }
713
+ .tw_shadow-background-light {
714
+ --tw-shadow-color: #f1f5f9;
715
+ --tw-shadow: var(--tw-shadow-colored);
673
716
  }
674
717
  .tw_outline-none {
675
718
  outline: 2px solid transparent;
676
719
  outline-offset: 2px;
677
720
  }
678
721
  .tw_focusable-element {
679
- outline-color: rgba(126, 34, 206, 0.30000000000000004);
722
+ --outline-color: hsl(var(--tw-colors-focus-default-hs),var(--tw-colors-focus-default-l), 0.7);
723
+ outline-color: var(--outline-color, rgba(126, 34, 206, 0.30000000000000004));
680
724
  outline-offset: 0;
681
725
  outline-style: solid;
682
726
  outline-width: 0;
683
727
  transition: background-color ease-in-out 0.15s, outline-color ease-in-out 0.2s, outline-offset ease-in-out 0.1s;
684
728
  }
685
729
  .tw_focusable-element:focus {
730
+ --outline-color: hsl(var(--tw-colors-focus-default-hs),var(--tw-colors-focus-default-l), 0.1);
686
731
  outline-offset: 0;
687
732
  outline-width: 3px;
688
- outline-color: rgba(126, 34, 206, 0.9);
733
+ outline-color: var(--outline-color, rgba(126, 34, 206, 0.9));
689
734
  }
690
735
  .tw_focusable-element:active {
691
736
  outline-offset: 2px;
@@ -695,66 +740,85 @@ outline-width: 4px;
695
740
  margin-bottom: 1rem;
696
741
  }
697
742
  .tw_primary-header {
698
- color: #334155;
699
- font-size: 2rem;
743
+ --color: hsl(var(--tw-colors-header-dark-hs),var(--tw-colors-header-dark-l));
744
+ --font-size: var(--tw-font-size-2xl-type);
745
+ color: var(--color, #334155);
746
+ font-size: var(--font-size, 2rem);
700
747
  font-weight: 300;
701
748
  margin-bottom: 1rem;
702
749
  text-align: center;
703
750
  }
704
751
  .tw_secondary-header {
752
+ --font-size: var(--tw-font-size-lg-type);
705
753
  font-weight: 500;
706
- font-size: 1.25rem;
754
+ font-size: var(--font-size, 1.25rem);
707
755
  margin-bottom: 1rem;
708
756
  }
709
757
  }
710
758
  @layer fr-widget.components {
711
759
  .tw_alert {
712
- background-color: #f1f5f9;
713
- border-color: hsl(210, 40%, 86.5%);
760
+ --bg-color: hsl(var(--tw-colors-background-light-hs),var(--tw-colors-background-light-l));
761
+ --border-color: hsl(var(--tw-colors-background-light-hs), calc(var(--tw-colors-background-light-l) - 10%));
762
+ --font-size: var(--tw-font-size-base-type);
763
+ background-color: var(--bg-color, #f1f5f9);
764
+ border-color: var(--border-color, hsl(210, 40%, 86.5%));
714
765
  border-radius: 0.25rem;
715
766
  border-width: 1px;
716
767
  color: #000;
717
- font-size: 0.9375rem;
768
+ font-size: var(--font-size, 0.9375rem);
718
769
  margin-bottom: 1.5rem;
719
770
  padding: 1rem;
720
771
  }
721
772
  .tw_alert:focus {
773
+ --outline-color: hsl(var(--tw-colors-focus-default-hs),var(--tw-colors-focus-default-l), 0.1);
722
774
  border-radius: 0.25rem;
723
- outline-color: rgba(126, 34, 206, 0.9);
775
+ outline-color: var(--outline-color, rgba(126, 34, 206, 0.9));
724
776
  outline-offset: 2px;
725
777
  outline-style: solid;
726
778
  outline-width: 3px;
727
779
  }
728
780
  .tw_alert-error {
729
- background-color: #fecaca;
730
- border-color: #991b1b;
781
+ --bg-color: hsl(var(--tw-colors-error-light-hs),var(--tw-colors-error-light-l));
782
+ --border-color: hsl(var(--tw-colors-error-dark-hs),var(--tw-colors-error-dark-l));
783
+ background-color: var(--bg-color, #fecaca);
784
+ border-color: var(--border-color, #991b1b);
731
785
  }
732
786
  .tw_alert-error svg {
733
- color: #991b1b;
787
+ --color: hsl(var(--tw-colors-error-dark-hs),var(--tw-colors-error-dark-l));
788
+ color: var(--color, #991b1b);
734
789
  fill: currentColor;
735
790
  }
736
791
  .tw_alert-info {
737
- background-color: hsl(200.39999999999998, 97.8%, 69.3%);
738
- border-color: #027AB8;
792
+ --bg-color: hsl(var(--tw-colors-primary-light-hs), calc(var(--tw-colors-primary-light-l) + 90%));
793
+ --border-color: hsl(var(--tw-colors-primary-light-hs),var(--tw-colors-primary-light-l));
794
+ background-color: var(--bg-color, hsl(200.39999999999998, 97.8%, 69.3%));
795
+ border-color: var(--border-color, #027AB8);
739
796
  }
740
797
  .tw_alert-info svg {
741
- color: #334155;
798
+ --color: hsl(var(--tw-colors-primary-dark-hs),var(--tw-colors-primary-dark-l));
799
+ color: var(--color, #334155);
742
800
  fill: currentColor;
743
801
  }
744
802
  .tw_alert-success {
745
- background-color: #bbf7d0;
746
- border-color: #166534;
803
+ --bg-color: hsl(var(--tw-colors-success-light-hs),var(--tw-colors-success-light-l));
804
+ --border-color: hsl(var(--tw-colors-success-dark-hs),var(--tw-colors-success-dark-l));
805
+ background-color: var(--alert-success-background-color, #bbf7d0);
806
+ border-color: var(--border-color, #166534);
747
807
  }
748
808
  .tw_alert-success svg {
749
- color: #166534;
809
+ --color: hsl(var(--tw-colors-success-dark-hs),var(--tw-colors-success-dark-l));
810
+ color: var(--color, #166534);
750
811
  fill: currentColor;
751
812
  }
752
813
  .tw_alert-warning {
753
- background-color: #fef08a;
754
- border-color: #854d0e;
814
+ --bg-color: hsl(var(--tw-colors-warning-light-hs),var(--tw-colors-warning-light-l));
815
+ --border-color: hsl(var(--tw-colors-warning-dark-hs),var(--tw-colors-warning-dark-l));
816
+ background-color: var(--bg-color, #fef08a);
817
+ border-color: var(--border-color, #854d0e);
755
818
  }
756
819
  .tw_alert-warning svg {
757
- color: #854d0e;
820
+ --color: hsl(var(--tw-colors-warning-dark-hs),var(tw-tw-colors-warning-dark-l));
821
+ color: var(--color, #854d0e);
758
822
  fill: currentColor;
759
823
  }
760
824
  .tw_button-base {
@@ -792,26 +856,32 @@ z-index: -1;
792
856
  opacity: 0.05;
793
857
  }
794
858
  .tw_button-primary {
795
- border-color: #334155;
796
- background-color: #334155;
859
+ --bg-color: hsl(var(--tw-colors-primary-dark-hs),var(--tw-colors-primary-dark-l));
860
+ --border-color: hsl(var(--tw-colors-primary-dark-hs),var(--tw-colors-primary-dark-l));
861
+ background-color: var(--bg-color, #334155);
862
+ border-color: var(--border-color, #334155);
797
863
  color: #fff;
798
864
  }
799
865
  .tw_button-primary:hover::before, .tw_button-primary:focus::before {
800
866
  opacity: 0.2;
801
867
  }
802
868
  .tw_button-outline {
803
- border-color: #374151;
869
+ --border-color: hsl(var(--tw-colors-secondary-dark-hs),var(--tw-colors-secondary-dark-l));
870
+ border-color: var(--border-color, #374151);
804
871
  }
805
872
  .tw_button-secondary {
806
- border-color: #d1d5db;
807
- background-color: #d1d5db;
873
+ --bg-color: hsl(var(--tw-colors-secondary-light-hs),var(--tw-colors-secondary-light-l));
874
+ --border-color: hsl(var(--tw-colors-secondary-light-hs),var(--tw-colors-secondary-light-l));
875
+ background-color: var(--bg-color, #d1d5db);
876
+ border-color: var(--border-color, #d1d5db);
808
877
  color: #000;
809
878
  }
810
879
  .tw_button-secondary:hover::before, .tw_button-secondary:focus::before {
811
880
  opacity: 0.1;
812
881
  }
813
882
  .tw_checkbox-input {
814
- accent-color: #334155;
883
+ --accent-color: hsl(var(--tw-colors-primary-dark-hs),var(--tw-colors-primary-dark-l));
884
+ accent-color: var(--accent-color, #334155);
815
885
  border-radius: 0.25rem;
816
886
  flex: 1;
817
887
  height: 1rem;
@@ -830,8 +900,9 @@ display: none;
830
900
  display: none;
831
901
  }
832
902
  .tw_checkbox-input[aria-invalid="true"] {
903
+ --bg-color: hsl(var(--tw-colors-background-light-hs), calc(var(--tw-colors-background-light-l) + 1%));
833
904
  background: no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='rgb(153, 27, 27)' viewBox='0 0 16 16'%3E%3Cpath d='M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM8 4a.905.905 0 0 0-.9.995l.35 3.507a.552.552 0 0 0 1.1 0l.35-3.507A.905.905 0 0 0 8 4zm.002 6a1 1 0 1 0 0 2 1 1 0 0 0 0-2z'/%3E%3C/svg%3E");;
834
- background-color: hsl(210, 40%, 97%);
905
+ background-color: var(--bg-color, hsl(210, 40%, 97%));
835
906
  background-position: right 0.75rem center;
836
907
  background-size: 1rem 1rem;
837
908
  }
@@ -839,102 +910,133 @@ background-size: 1rem 1rem;
839
910
  display: block;
840
911
  }
841
912
  .tw_checkbox-input[aria-invalid="true"] ~ button {
842
- border-color: #991b1b;
913
+ --border-color: hsl(var(--tw-colors-error-dark-hs),var(--tw-colors-error-dark-l));
914
+ border-color: var(--border-color, #991b1b);
843
915
  }
844
916
  .tw_checkbox-input.tw_checkbox-input[aria-invalid="true"] {
845
- outline-color: rgba(254, 202, 202, 0.19999999999999996);
917
+ --outline-color: hsl(var(--tw-colors-error-light-hs),var(--tw-colors-error-light-l), 0.8);
918
+ outline-color: var(--outline-color, rgba(254, 202, 202, 0.19999999999999996));
846
919
  }
847
920
  .tw_checkbox-input.tw_checkbox-input[aria-invalid="true"]:focus {
848
- outline-color: rgba(254, 202, 202, 0.5);
921
+ --outline-color: hsl(var(--tw-colors-error-light-hs),var(--tw-colors-error-light-l), 0.5);
922
+ outline-color: var(--outline-color, rgba(254, 202, 202, 0.5));
849
923
  }
850
924
  .tw_checkbox-input[aria-invalid="true"]:focus {
851
- background-color: hsl(210, 40%, 100%);
925
+ --bg-color: hsl(var(--tw-colors-background-light-hs), calc(var(--tw-colors-background-light-l) + 5%));
926
+ background-color: var(--bg-color, hsl(210, 40%, 100%));
852
927
  }
853
928
  .tw_form-base {}
854
929
  .tw_input-base {
855
- background-color: hsl(210, 40%, 94.2%);
930
+ --bg-color: hsl(var(--tw-colors-background-light-hs), calc(var(--tw-colors-background-light-l) - 2%));
931
+ --border: 1px solid hsl(var(--tw-colors-secondary-default-hs),var(--tw-colors-secondary-default-l));
932
+ --font-size: var(--tw-font-size-base-type);
933
+ background-color: var(--bg-color, hsl(210, 40%, 94.2%));
856
934
  border: 1px solid #9ca3af;
857
935
  border-radius: 0.25rem;
858
936
  color: #000;
859
- font-size: 0.9375rem;
937
+ font-size: var(--font-size, 0.9375rem);
860
938
  line-height: 1.5rem;
861
939
  padding: 0.75rem;
862
940
  }
863
941
  .tw_input-base:hover {
864
- background-color: #f1f5f9;
942
+ --bg-color: hsl(var(--tw-colors-background-light-hs),var(--tw-colors-background-light-l));
943
+ background-color: var(--bg-color, #f1f5f9);
865
944
  }
866
945
  .tw_input-base:focus {
867
- background-color: #f1f5f9;
946
+ --bg-color: hsl(var(--tw-colors-background-light-hs),var(--tw-colors-background-light-l));
947
+ background-color: var(--bg-color, #f1f5f9);
868
948
  }
869
949
  .tw_input-base[aria-invalid="true"] {
870
- border-color: #991b1b;
950
+ --border-color: hsl(var(--tw-colors-error-dark-hs),var(--tw-colors-error-dark-l));
951
+ --bg-color: hsl(var(--tw-colors-background-light-hs), calc(var(--tw-colors-background-light-l) - 2%));
871
952
  background: no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='rgb(153, 27, 27)' viewBox='0 0 16 16'%3E%3Cpath d='M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM8 4a.905.905 0 0 0-.9.995l.35 3.507a.552.552 0 0 0 1.1 0l.35-3.507A.905.905 0 0 0 8 4zm.002 6a1 1 0 1 0 0 2 1 1 0 0 0 0-2z'/%3E%3C/svg%3E");;
872
- background-color: hsl(210, 40%, 94.2%);
953
+ border-color: var(--border-color, #991b1b);
954
+ background-color: var(--bg-color, hsl(210, 40%, 94.2%));
873
955
  background-position: right 0.75rem center;
874
956
  background-size: 1rem 1rem;
875
957
  }
876
958
  .tw_input-base[aria-invalid="true"] ~ button {
877
- border-color: #991b1b;
959
+ --border-color: hsl(var(--tw-colors-error-dark-hs),var(--tw-colors-error-dark-l));
960
+ border-color: var(--border-color, #991b1b);
878
961
  }
879
962
  .tw_input-base.tw_input-base[aria-invalid="true"] {
880
- outline-color: rgba(254, 202, 202, 0.19999999999999996);
963
+ --outline-color: hsl(var(--tw-colors-error-light-hs),var(--tw-colors-error-light-l), 0.8);
964
+ outline-color: var(--outline-color, rgba(254, 202, 202, 0.19999999999999996));
881
965
  }
882
966
  .tw_input-base.tw_input-base[aria-invalid="true"]:focus {
883
- outline-color: rgba(153, 27, 27, 0.7);
884
- background-color: #f1f5f9;
967
+ --outline-color: hsl(var(--tw-colors-error-dark-hs),var(--tw-colors-error-dark-l), 0.3);
968
+ --bg-color: hsl(var(--tw-colors-background-light-hs),var(--tw-colors-background-light-l));
969
+ outline-color: var(--outline-color, rgba(153, 27, 27, 0.7));
970
+ background-color: var(--bg-color, #f1f5f9);
885
971
  }
886
972
  .tw_input-base[aria-invalid="true"]:hover {
887
- background-color: #f1f5f9;
973
+ --bg-color: hsl(var(--tw-colors-background-light-hs),var(--tw-colors-background-light-l));
974
+ background-color: var(--bg-color, #f1f5f9);
888
975
  }
889
976
  .tw_input-label {
890
- color: #374151;
891
- font-size: 0.9375rem;
977
+ --font-size: var(--tw-font-size-base-type);
978
+ --color: hsl(var(--tw-colors-label-dark-hs), var(--tw-colors-label-dark-l));
979
+ font-size: var(--font-size, 0.9375rem);
980
+ color: var(--color, #374151);
892
981
  }
893
982
  .tw_input-error-message {
894
- color: #991b1b;
895
- font-size: 0.875rem;
983
+ --color: hsl(var(--tw-colors-error-dark-hs),var(--tw-colors-error-dark-l));
984
+ --font-size: var(--tw-font-size-sm-type);
985
+ color: var(--color, #991b1b);
986
+ font-size: var(--font-size, 0.875rem);
896
987
  margin: 0.25rem;
897
988
  width: 100%;
898
989
  }
899
990
  .tw_input-info-message {
900
- color: #374151;
901
- font-size: 0.875rem;
991
+ --color: hsl(var(--tw-colors-secondary-dark-hs),var(--tw-colors-secondary-dark-l));
992
+ --font-size: var(--tw-font-size-sm-type);
993
+ color: var(--color, #374151);
994
+ font-size: var(--font-size, 0.875rem);
902
995
  margin: 0.25rem;
903
996
  width: 100%;
904
997
  }
905
998
  .tw_input-info-message.tw_isInvalid {
906
- color: #991b1b;
999
+ --color: hsl(var(--tw-colors-error-dark-hs),var(--tw-colors-error-dark-l));
1000
+ color: var(--color, #991b1b);
907
1001
  }
908
1002
  .tw_input-info-message_dark.tw_isInvalid {
909
- color: #fecaca;
1003
+ --color: hsl(var(--tw-colors-error-light-hs),var(--tw-colors-error-light-l));
1004
+ color: var(--color, #fecaca);
910
1005
  }
911
1006
  .tw_link {
912
- color: #2563eb;
913
- font-size: 0.9375rem;
1007
+ --color: hsl(var(--tw-colors-link-dark-hs),var(--tw-colors-link-dark-l));
1008
+ --font-size: var(--tw-font-size-base-type);
1009
+ color: var(--color, #2563eb);
1010
+ font-size: var(--font-size, 0.9375rem);
914
1011
  text-decoration: underline;
915
1012
  }
916
1013
  .tw_link:hover {
917
1014
  text-decoration: none;
918
1015
  }
919
1016
  .tw_select-base {
1017
+ --bg-color: hsl(var(--tw-colors-background-light-hs), calc(var(--tw-colors-background-light-l) - 2%));
1018
+ --color: hsl(var(--tw-colors-label-dark-hs), var(--tw-colors-label-dark-l));
920
1019
  -webkit-appearance: none;
921
1020
  -moz-appearance: none;
922
1021
  appearance: none;
923
1022
  background: no-repeat right 0.75rem center url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='rgb(55, 65, 81)' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
924
- background-color: hsl(210, 40%, 94.2%);
1023
+ background-color: var(--bg-color, hsl(210, 40%, 94.2%));
925
1024
  background-size: 16px 12px;
926
- color: #374151;
1025
+ color: var(--color, #374151);
927
1026
  height: calc(3rem + 2px);
928
1027
  }
929
1028
  .tw_select-base:hover {
930
- background-color: hsl(210, 40%, 91.3%);
1029
+ --bg-color: hsl(var(--tw-colors-background-light-hs), calc(var(--tw-colors-background-light-l) - 5%));
1030
+ background-color: var(--bg-color, hsl(210, 40%, 91.3%));
931
1031
  }
932
1032
  .tw_select-base:focus {
933
- background-color: hsl(210, 40%, 91.3%);
1033
+ --bg-color: hsl(var(--tw-colors-background-light-hs), calc(var(--tw-colors-background-light-l) - 5%));
1034
+ background-color: var(--bg-color, hsl(210, 40%, 91.3%));
934
1035
  }
935
1036
  .tw_select-base[aria-invalid="true"] {
1037
+ --bg-color: hsl(var(--tw-colors-background-light-hs), calc(var(--tw-colors-background-light-l) - 2%));
936
1038
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='rgb(55, 65, 81)' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='rgb(153, 27, 27)' viewBox='0 0 16 16'%3E%3Cpath d='M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM8 4a.905.905 0 0 0-.9.995l.35 3.507a.552.552 0 0 0 1.1 0l.35-3.507A.905.905 0 0 0 8 4zm.002 6a1 1 0 1 0 0 2 1 1 0 0 0 0-2z'/%3E%3C/svg%3E");;
937
- background-color: hsl(210, 40%, 94.2%);
1039
+ background-color: var(--bg-color, hsl(210, 40%, 94.2%));
938
1040
  background-position: right 0.75rem center, center right 2.25rem;
939
1041
  background-size: 16px 12px, 1rem 1rem;
940
1042
  }
@@ -944,7 +1046,8 @@ border: 0.25em solid;
944
1046
  border-right-color: transparent;
945
1047
  }
946
1048
  .tw_containing-box {
947
- background-color: #f1f5f9;
1049
+ --bg-color: hsl(var(--tw-colors-background-light-hs),var(--tw-colors-background-light-l));
1050
+ background-color: var(--bg-color, #f1f5f9);
948
1051
  border-color: #000;
949
1052
  border-radius: 0.25rem;
950
1053
  box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
@@ -973,13 +1076,15 @@ width: 0.35em;
973
1076
  will-change: height;
974
1077
  }
975
1078
  .tw_animated-check:before {
976
- border-color: #9ca3af;
1079
+ --border-color: hsl(var(--tw-colors-secondary-default-hs),var(--tw-colors-secondary-default-l));
1080
+ --outline-color: hsl(var(--tw-colors-focus-default-hs),var(--tw-colors-focus-default-l), 0.7);
1081
+ border-color: var(--border-color, #9ca3af);
977
1082
  border-radius: 0.25rem;
978
1083
  border-width: 1px;
979
1084
  content: "";
980
1085
  display: block;
981
1086
  height: 100%;
982
- outline-color: rgba(126, 34, 206, 0.30000000000000004);
1087
+ outline-color: var(--outline-color, rgba(126, 34, 206, 0.30000000000000004));
983
1088
  outline-offset: 0;
984
1089
  outline-style: solid;
985
1090
  outline-width: 0;
@@ -998,18 +1103,22 @@ animation: tw_check 100ms 250ms cubic-bezier(.4,.0,.23,1) forwards;
998
1103
  content: "";
999
1104
  }
1000
1105
  .tw_checkbox-input_animated:checked + label > span:before {
1106
+ --border-color: hsl(var(--tw-colors-primary-dark-hs),var(--tw-colors-primary-dark-l));
1001
1107
  animation: tw_squish 200ms cubic-bezier(.4,.0,.23,1);
1002
- border-color: #334155;
1108
+ border-color: var(--border-color, #334155);
1003
1109
  border-width: 0.5em;
1004
1110
  }
1005
1111
  .tw_checkbox-input_animated:focus + label > span:before {
1006
- outline-color: rgba(126, 34, 206, 0.9);
1112
+ --outline-color: hsl(var(--tw-colors-focus-default-hs),var(--tw-colors-focus-default-l), 0.1);
1113
+ outline-color: var(--outline-color, rgba(126, 34, 206, 0.9));
1007
1114
  outline-offset: 1px;
1008
1115
  outline-width: 3px;
1009
1116
  }
1010
1117
  .tw_dialog-box {
1011
- background-color: #f1f5f9;
1012
- border: 1px solid #374151;
1118
+ --bg-color: hsl(var(--tw-colors-background-light-hs),var(--tw-colors-background-light-l));
1119
+ --border: 1px solid hsl(var(--tw-colors-secondary-dark-hs),var(--tw-colors-secondary-dark-l));
1120
+ background-color: var(--bg-color, #f1f5f9);
1121
+ border: var(--border, 1px solid #374151);
1013
1122
  bottom: 0;
1014
1123
  border-radius: 0.25rem;
1015
1124
  box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
@@ -1031,16 +1140,19 @@ will-change: top, opacity;
1031
1140
  animation: tw_slideUp 100ms ease-out forwards;
1032
1141
  }
1033
1142
  .tw_dialog-box_animate::backdrop {
1143
+ --bg-color: hsl(var(--tw-colors-body-light-hs),var(--tw-colors-body-light-l), 0.2);
1034
1144
  animation: tw_fadeIn 500ms ease forwards;
1035
- background-color: rgba(51, 65, 85, 0.8);
1145
+ background-color: var(--bg-color, rgba(51, 65, 85, 0.8));
1036
1146
  }
1037
1147
  .tw_dialog-body {
1038
1148
  margin: 2.5rem 1.5rem;
1039
1149
  }
1040
1150
  .tw_dialog-header {
1151
+ --border-bottom: 1px solid hsl(var(--tw-colors-secondary-default-hs),var(--tw-colors-secondary-default-l));
1152
+ --bg-color: hsl(var(--tw-colors-tertiary-light-hs),var(--tw-colors-tertiary-light-l));
1041
1153
  align-items: stretch;
1042
- background-color: #f1f5f9;
1043
- border-bottom: 1px solid #9ca3af;
1154
+ background-color: var(--bg-color, #f1f5f9);
1155
+ border-bottom: var(--border-bottom, 1px solid #9ca3af);
1044
1156
  border-top-left-radius: 0.25rem;
1045
1157
  border-top-right-radius: 0.25rem;
1046
1158
  display: flex;
@@ -1074,8 +1186,9 @@ animation: tw_slideDown 100ms ease-out forwards;
1074
1186
  display: block;
1075
1187
  }
1076
1188
  .tw_dialog-closing::backdrop {
1189
+ --bg-color: hsl(var(--tw-colors-body-light-hs),var(--tw-colors-body-light-l), 0.2);
1077
1190
  animation: tw_fadeOut 500ms ease-out forwards;
1078
- background-color: rgba(51, 65, 85, 0.8);
1191
+ background-color: var(--bg-color, rgba(51, 65, 85, 0.8));
1079
1192
  }
1080
1193
  .tw_dialog-x {
1081
1194
  border-radius: 0.25rem;
@@ -1143,7 +1256,8 @@ height: 24px;
1143
1256
  width: 24px;
1144
1257
  }
1145
1258
  .tw_animated-radio:after {
1146
- background-color: #334155;
1259
+ --bg-color: hsl(var(--tw-colors-primary-dark-hs),var(--tw-colors-primary-dark-l));
1260
+ background-color: var(--bg-color, #334155);
1147
1261
  border-radius: 9999px;
1148
1262
  height: 100%;
1149
1263
  left: 0;
@@ -1156,10 +1270,11 @@ width: 100%;
1156
1270
  will-change: transform;
1157
1271
  }
1158
1272
  .tw_animated-radio:before {
1273
+ --box-shadow: 0 0 0 1px hsl(var(--tw-colors-secondary-default-hs),var(--tw-colors-secondary-default-l));
1159
1274
  border-color: #fff;
1160
1275
  border-radius: 9999px;
1161
1276
  border-width: 2px;
1162
- box-shadow: 0 0 0 1px #9ca3af;
1277
+ box-shadow: var(--box-shadow, 0 0 0 1px #9ca3af);
1163
1278
  content: "";
1164
1279
  cursor: pointer;
1165
1280
  display: block;
@@ -1169,7 +1284,8 @@ transition: border-width 250ms cubic-bezier(.4,.0,.23,1), box-shadow ease-in-out
1169
1284
  width: 100%;
1170
1285
  }
1171
1286
  .tw_radio-input_animated:focus + label > span:before {
1172
- box-shadow: 0 0 0 4px rgba(126, 34, 206, 0.9) !important;
1287
+ --box-shadow: 0 0 0 4px hsl(var(--tw-colors-focus-default-hs), var(--tw-colors-focus-default-l), 0.1) !important;
1288
+ box-shadow: var(--box-shadow, 0 0 0 4px rgba(126, 34, 206, 0.9)) !important;
1173
1289
  }
1174
1290
  .tw_radio-input_animated:checked + label > span:after {
1175
1291
  animation: tw_radio 125ms 150ms cubic-bezier(.4,.0,.23,1) forwards;
@@ -1180,7 +1296,8 @@ animation: tw_squish 200ms cubic-bezier(.4,.0,.23,1);
1180
1296
  border-width: 0.5em;
1181
1297
  }
1182
1298
  .tw_button-apple {
1183
- border-color: #d1d5db;
1299
+ --border-color: hsl(var(--tw-colors-secondary-light-hs),var(--tw-colors-secondary-light-l));
1300
+ border-color: var(--border-color, #d1d5db);
1184
1301
  background-color: #000;
1185
1302
  color: #fff;
1186
1303
  }
@@ -1188,7 +1305,8 @@ color: #fff;
1188
1305
  opacity: 0.1;
1189
1306
  }
1190
1307
  .tw_button-facebook {
1191
- border-color: #d1d5db;
1308
+ --border-color: hsl(var(--tw-colors-secondary-light-hs),var(--tw-colors-secondary-light-l));
1309
+ border-color: var(--border-color, #d1d5db);
1192
1310
  background-color: #1877F2;
1193
1311
  color: #fff;
1194
1312
  }
@@ -1196,7 +1314,8 @@ color: #fff;
1196
1314
  opacity: 0.1;
1197
1315
  }
1198
1316
  .tw_button-google {
1199
- border-color: #d1d5db;
1317
+ --border-color: hsl(var(--tw-colors-secondary-light-hs),var(--tw-colors-secondary-light-l));
1318
+ border-color: var(--border-color, #d1d5db);
1200
1319
  background-color: #fff;
1201
1320
  color: #000;
1202
1321
  }
@@ -1204,7 +1323,8 @@ color: #000;
1204
1323
  opacity: 0.1;
1205
1324
  }
1206
1325
  .tw_input-policies {
1207
- font-size: 0.875rem;
1326
+ --font-size: var(--tw-font-size-sm-type);
1327
+ font-size: var(--font-size, 0.875rem);
1208
1328
  }
1209
1329
  .tw_input-policies p {
1210
1330
  font-weight: 700;
@@ -1214,8 +1334,9 @@ margin: 0.25rem;
1214
1334
  margin: 0.25rem;
1215
1335
  }
1216
1336
  .tw_kba-fieldset {
1337
+ --border-color: hsl(var(--tw-colors-secondary-default-hs),var(--tw-colors-secondary-default-l));
1338
+ border-color: var(--border-color, #9ca3af);
1217
1339
  position: relative;
1218
- border-color: #9ca3af;
1219
1340
  border-bottom-width: 0;
1220
1341
  border-top-width: 1px;
1221
1342
  border-top-style: dashed;
@@ -1232,7 +1353,8 @@ margin-top: 2.5rem;
1232
1353
  display: block;
1233
1354
  }
1234
1355
  .tw_kba-fieldset:first-of-type:after {
1235
- border-color: #9ca3af;
1356
+ --border-color: hsl(var(--tw-colors-secondary-default-hs),var(--tw-colors-secondary-default-l));
1357
+ border-color: var(--border-color, #9ca3af);
1236
1358
  border-top-width: 1px;
1237
1359
  content: "";
1238
1360
  display: block;
@@ -1242,7 +1364,8 @@ top: -0.1em;
1242
1364
  width: 45%;
1243
1365
  }
1244
1366
  .tw_kba-fieldset:first-of-type:before {
1245
- border-color: #9ca3af;
1367
+ --border-color: hsl(var(--tw-colors-secondary-default-hs),var(--tw-colors-secondary-default-l));
1368
+ border-color: var(--border-color, #9ca3af);
1246
1369
  border-top-width: 1px;
1247
1370
  content: "";
1248
1371
  display: block;
@@ -1266,14 +1389,15 @@ top: -0.75rem;
1266
1389
  width: 100%;
1267
1390
  }
1268
1391
  .tw_kba-lock-icon > svg {
1269
- color: #9ca3af;
1392
+ --color: hsl(var(--tw-colors-secondary-default-hs),var(--tw-colors-secondary-default-l));
1393
+ color: var(--color, #9ca3af);
1270
1394
  fill: currentcolor;
1271
1395
  top: -0.75rem;
1272
1396
  width: 3em;
1273
1397
  }
1274
1398
  .tw_password-button {
1275
- align-items: center;
1276
- background-color: hsl(210, 40%, 94.2%);
1399
+ --bg-color: hsl(var(--tw-colors-background-light-hs), calc(var(--tw-colors-background-light-l) - 2%));
1400
+ background-color: var(--bg-color, hsl(210, 40%, 94.2%));
1277
1401
  border-left: 0 !important;
1278
1402
  border-top-left-radius: 0px !important;
1279
1403
  border-bottom-left-radius: 0px !important;
@@ -1282,286 +1406,374 @@ line-height: 1.5rem;
1282
1406
  padding: 0.25rem 0.75rem;
1283
1407
  text-align: center;
1284
1408
  vertical-align: middle;
1409
+ align-items: center;
1285
1410
  }
1286
1411
  .tw_password-icon {
1287
- color: #374151;
1412
+ --color: hsl(var(--tw-colors-secondary-dark-hs), var(--tw-colors-secondary-dark-l));
1413
+ color: var(--color, #374151);
1288
1414
  fill: currentcolor;
1289
1415
  }
1290
1416
  }
1291
1417
  @layer fr-widget.variants {
1292
- .tw_dark .dark\:tw_alert_dark {
1293
- background-color: #1e293b;
1418
+ :is(.tw_dark .dark\:tw_alert_dark) {
1419
+ --bg-color: hsl(var(--tw-colors-background-dark-hs),var(--tw-colors-background-dark-l));
1420
+ background-color: var(--bg-color, #1e293b);
1294
1421
  border-color: #000;
1295
1422
  color: #fff;
1296
1423
  }
1297
- .tw_dark .dark\:tw_alert_dark:focus {
1298
- outline-color: hsla(272.1, 71.7%, 56.5%, 0.9);
1424
+ :is(.tw_dark .dark\:tw_alert_dark):focus {
1425
+ --outline-color: hsl(var(--tw-colors-focus-default-hs), calc(var(--tw-colors-focus-default-l) + 20%), 0.1);
1426
+ outline-color: var(--outline-color, hsla(272.1, 71.7%, 56.5%, 0.9));
1299
1427
  }
1300
- .tw_dark .dark\:tw_alert_dark svg {
1428
+ :is(.tw_dark .dark\:tw_alert_dark) svg {
1301
1429
  color: #fff;
1302
1430
  fill: currentColor;
1303
1431
  }
1304
- .tw_dark .dark\:tw_alert-error_dark {
1305
- background-color: #991b1b;
1306
- border-color: hsl(0, 70%, 28.2%);
1432
+ :is(.tw_dark .dark\:tw_alert-error_dark) {
1433
+ --bg-color: hsl(var(--tw-colors-error-dark-hs),var(--tw-colors-error-dark-l));
1434
+ --border-color: hsl(var(--tw-colors-error-dark-hs), calc(var(--tw-colors-error-dark-l) - 20%));
1435
+ background-color: var(--bg-color, #991b1b);
1436
+ border-color: var(--border-color, hsl(0, 70%, 28.2%));
1307
1437
  }
1308
- .tw_dark .dark\:tw_alert-error_dark svg {
1309
- color: #fecaca;
1438
+ :is(.tw_dark .dark\:tw_alert-error_dark) svg {
1439
+ --color: hsl(var(--tw-colors-error-light-hs),var(--tw-colors-error-light-l));
1440
+ color: var(--color, #fecaca);
1310
1441
  fill: currentColor;
1311
1442
  }
1312
- .tw_dark .dark\:tw_alert-info_dark {
1313
- background-color: hsl(200.39999999999998, 97.8%, 21.9%);
1314
- border-color: hsl(215.29999999999995, 25%, 21.3%);
1443
+ :is(.tw_dark .dark\:tw_alert-info_dark) {
1444
+ --bg-color: hsl(var(--tw-colors-primary-light-hs), calc(var(--tw-colors-primary-light-l) - 40%));
1445
+ --border-color: hsl(var(--tw-colors-primary-dark-hs), calc(var(--tw-colors-primary-dark-l) - 20%));
1446
+ background-color: var(--bg-color, hsl(200.39999999999998, 97.8%, 21.9%));
1447
+ border-color: var(--border-color, hsl(215.29999999999995, 25%, 21.3%));
1315
1448
  }
1316
- .tw_dark .dark\:tw_alert-info_dark svg {
1317
- color: hsl(200.39999999999998, 97.8%, 69.3%);
1449
+ :is(.tw_dark .dark\:tw_alert-info_dark) svg {
1450
+ --color: hsl(var(--tw-colors-primary-light-hs), calc(var(--tw-colors-primary-light-l) + 90%));
1451
+ color: var(--color, hsl(200.39999999999998, 97.8%, 69.3%));
1318
1452
  fill: currentColor;
1319
1453
  }
1320
- .tw_dark .dark\:tw_alert-success_dark {
1321
- background-color: #166534;
1322
- border-color: hsl(142.8, 64.2%, 19.3%);
1454
+ :is(.tw_dark .dark\:tw_alert-success_dark) {
1455
+ --bg-color: hsl(var(--tw-colors-success-dark-hs),var(--tw-colors-success-dark-l));
1456
+ --border-color: hsl(var(--tw-colors-success-dark-hs), calc(var(--tw-colors-success-dark-l) - 20%));
1457
+ background-color: var(--bg-color, #166534);
1458
+ border-color: var(--border-color, hsl(142.8, 64.2%, 19.3%));
1323
1459
  }
1324
- .tw_dark .dark\:tw_alert-success_dark svg {
1325
- color: #bbf7d0;
1460
+ :is(.tw_dark .dark\:tw_alert-success_dark) svg {
1461
+ --color: hsl(var(--tw-colors-success-light-hs),var(--tw-colors-success-light-l));
1462
+ color: var(--color, #bbf7d0);
1326
1463
  fill: currentColor;
1327
1464
  }
1328
- .tw_dark .dark\:tw_alert-warning_dark {
1329
- background-color: #854d0e;
1330
- border-color: hsl(31.80000000000001, 81%, 23.1%);
1465
+ :is(.tw_dark .dark\:tw_alert-warning_dark) {
1466
+ --bg-color: hsl(var(--tw-colors-warning-dark-hs),var(--tw-colors-warning-dark-l));
1467
+ --border-color: hsl(var(--tw-colors-warning-dark-hs), calc(var(--tw-colors-warning-dark-l) - 20%));
1468
+ background-color: var(--bg-color, #854d0e);
1469
+ border-color: var(--border-color, hsl(31.80000000000001, 81%, 23.1%));
1331
1470
  }
1332
- .tw_dark .dark\:tw_alert-warning_dark svg {
1333
- color: #fef08a;
1471
+ :is(.tw_dark .dark\:tw_alert-warning_dark) svg {
1472
+ --color: hsl(var(--tw-colors-warning-light-hs),var(--tw-colors-warning-light-l));
1473
+ color: var(--color, #fef08a);
1334
1474
  fill: currentColor;
1335
1475
  }
1336
- .tw_dark .dark\:tw_button-primary_dark {
1337
- border-color: #027AB8;
1338
- background-color: #027AB8;
1476
+ :is(.tw_dark .dark\:tw_button-primary_dark) {
1477
+ --bg-color: hsl(var(--tw-colors-primary-light-hs),var(--tw-colors-primary-light-l));
1478
+ --border-color: hsl(var(--tw-colors-primary-light-hs),var(--tw-colors-primary-light-l));
1479
+ background-color: var(--bg-color, #027AB8);
1480
+ border-color: var(--border-color, #027AB8);
1339
1481
  }
1340
- .tw_dark .dark\:tw_button-primary_dark:hover::before,.tw_dark .dark\:tw_button-primary_dark:focus::before {
1482
+ :is(.tw_dark .dark\:tw_button-primary_dark):hover::before,:is(.tw_dark .dark\:tw_button-primary_dark):focus::before {
1341
1483
  opacity: 0.2;
1342
1484
  }
1343
- .tw_dark .dark\:tw_button-outline_dark {
1344
- border-color: #d1d5db;
1485
+ :is(.tw_dark .dark\:tw_button-outline_dark) {
1486
+ --border-color: hsl(var(--tw-colors-secondary-light-hs),var(--tw-colors-secondary-light-l));
1487
+ border-color: var(--border-color, #d1d5db);
1345
1488
  color: #fff;
1346
1489
  }
1347
- .tw_dark .dark\:tw_button-outline_dark:hover::before,.tw_dark .dark\:tw_button-outline_dark:focus::before {
1490
+ :is(.tw_dark .dark\:tw_button-outline_dark):hover::before,:is(.tw_dark .dark\:tw_button-outline_dark):focus::before {
1348
1491
  opacity: 0.3;
1349
1492
  }
1350
- .tw_dark .dark\:tw_button-secondary_dark {}
1351
- .tw_dark .dark\:tw_checkbox-input_dark {
1352
- accent-color: #027AB8;
1493
+ :is(.tw_dark .dark\:tw_button-secondary_dark) {}
1494
+ :is(.tw_dark .dark\:tw_checkbox-input_dark) {
1495
+ --accent-color: hsl(var(--tw-colors-primary-light-hs),var(--tw-colors-primary-light-l));
1496
+ accent-color: var(--accent-color, #027AB8);
1353
1497
  }
1354
- .tw_dark .dark\:tw_input-base_dark {
1355
- background-color: rgba(15, 23, 42, 0.5);
1356
- border-color: #374151;
1498
+ :is(.tw_dark .dark\:tw_input-base_dark) {
1499
+ --bg-color: hsl(var(--tw-colors-body-dark-hs),var(--tw-colors-body-dark-l), 0.5);
1500
+ --border-color: hsl(var(--tw-colors-secondary-dark-hs),var(--tw-colors-secondary-dark-l));
1501
+ background-color: var(--bg-color, rgba(15, 23, 42, 0.5));
1502
+ border-color: var(--border-color, #374151);
1357
1503
  color: #fff;
1358
1504
  }
1359
- .tw_dark .dark\:tw_input-base_dark:focus {
1360
- background-color: rgba(15, 23, 42, 0.75);
1505
+ :is(.tw_dark .dark\:tw_input-base_dark):focus {
1506
+ --bg-color: hsl(var(--tw-colors-body-dark-hs),var(--tw-colors-body-dark-l), 0.25);
1507
+ background-color: var(--bg-color, rgba(15, 23, 42, 0.75));
1361
1508
  }
1362
- .tw_dark .dark\:tw_input-base_dark:hover {
1363
- background-color: rgba(15, 23, 42, 0.75);
1509
+ :is(.tw_dark .dark\:tw_input-base_dark):hover {
1510
+ --bg-color: hsl(var(--tw-colors-body-dark-hs),var(--tw-colors-body-dark-l), 0.25);
1511
+ background-color: var(--bg-color, rgba(15, 23, 42, 0.75));
1364
1512
  }
1365
- .tw_dark .dark\:tw_input-base_dark[aria-invalid="true"] {
1366
- border-color: #fecaca;
1513
+ :is(.tw_dark .dark\:tw_input-base_dark)[aria-invalid="true"] {
1514
+ --border-color: hsl(var(--tw-colors-error-light-hs),var(--tw-colors-error-light-l));
1515
+ --bg-color: hsl(var(--tw-colors-error-light-hs),var(--tw-colors-error-light-l),0.5);
1516
+ border-color: var(--border-color, #fecaca);
1367
1517
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='rgb(254, 202, 202)' viewBox='0 0 16 16'%3E%3Cpath d='M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM8 4a.905.905 0 0 0-.9.995l.35 3.507a.552.552 0 0 0 1.1 0l.35-3.507A.905.905 0 0 0 8 4zm.002 6a1 1 0 1 0 0 2 1 1 0 0 0 0-2z'/%3E%3C/svg%3E");;
1368
- background-color: rgba(15, 23, 42, 0.5);
1518
+ background-color: var(--bg-color, rgba(15, 23, 42, 0.5));
1369
1519
  }
1370
- .tw_dark .dark\:tw_input-base_dark[aria-invalid="true"]:focus {
1371
- outline-color: rgba(254, 202, 202, 0.7) !important;
1372
- background-color: rgba(15, 23, 42, 0.75);
1520
+ :is(.tw_dark .dark\:tw_input-base_dark)[aria-invalid="true"]:focus {
1521
+ --outline-color: hsl(var(--tw-colors-error-light-hs),var(--tw-colors-error-light-l), 0.3) !important;
1522
+ --bg-color: hsl(var(--tw-colors-body-dark-hs),var(--tw-colors-body-dark-l), 0.25);
1523
+ outline-color: var(--outline-color, rgba(254, 202, 202, 0.7)) !important;
1524
+ background-color: var(--bg-color, rgba(15, 23, 42, 0.75));
1373
1525
  }
1374
- .tw_dark .dark\:tw_input-base_dark[aria-invalid="true"]:hover {
1375
- background-color: rgba(15, 23, 42, 0.75);
1526
+ :is(.tw_dark .dark\:tw_input-base_dark)[aria-invalid="true"]:hover {
1527
+ --bg-color: hsl(var(--tw-colors-body-dark-hs),var(--tw-colors-body-dark-l), 0.25);
1528
+ background-color: var(--bg-color, rgba(15, 23, 42, 0.75));
1376
1529
  }
1377
- .tw_dark .dark\:tw_input-base_dark[aria-invalid="true"] ~ button {
1378
- border-color: #fecaca;
1530
+ :is(.tw_dark .dark\:tw_input-base_dark)[aria-invalid="true"] ~ button {
1531
+ --border-color: hsl(var(--tw-colors-error-light-hs),var(--tw-colors-error-light-l));
1532
+ border-color: var(--border-color, #fecaca);
1379
1533
  }
1380
- .tw_dark .dark\:tw_input-label_dark {
1381
- color: #d1d5db;
1534
+ :is(.tw_dark .dark\:tw_input-label_dark) {
1535
+ --color: hsl(var(--tw-colors-label-light-hs),var(--tw-colors-label-light-l));
1536
+ color: var(--color, #d1d5db);
1382
1537
  }
1383
- :where(input:-webkit-autofill) + .tw_dark .dark\:tw_input-label_dark {
1384
- color: #374151;
1538
+ :where(input:-webkit-autofill) + :is(.tw_dark .dark\:tw_input-label_dark) {
1539
+ --color: hsl(var(--tw-colors-secondary-dark-hs),var(--tw-colors-secondary-dark-l));
1540
+ color: var(--color, #374151);
1385
1541
  }
1386
- :where(input:autofill) + .tw_dark .dark\:tw_input-label_dark {
1387
- color: #374151;
1542
+ :where(input:autofill) + :is(.tw_dark .dark\:tw_input-label_dark) {
1543
+ --color: hsl(var(--tw-colors-secondary-dark-hs),var(--tw-colors-secondary-dark-l));
1544
+ color: var(--color, #374151);
1388
1545
  }
1389
- .tw_dark .dark\:tw_input-error-message_dark {
1390
- color: #fecaca;
1546
+ :is(.tw_dark .dark\:tw_input-error-message_dark) {
1547
+ --color: hsl(var(--tw-colors-error-light-hs),var(--tw-colors-error-light-l));
1548
+ color: var(--color, #fecaca);
1391
1549
  }
1392
- .tw_dark .dark\:tw_input-info-message_dark {
1393
- color: #d1d5db;
1550
+ :is(.tw_dark .dark\:tw_input-info-message_dark) {
1551
+ --color: hsl(var(--tw-colors-secondary-light-hs),var(--tw-colors-secondary-light-l));
1552
+ color: var(--color, #d1d5db);
1394
1553
  }
1395
- .tw_dark .dark\:tw_input-info-message_dark.tw_isInvalid {
1396
- color: #fecaca;
1554
+ :is(.tw_dark .dark\:tw_input-info-message_dark).tw_isInvalid {
1555
+ --color: hsl(var(--tw-colors-error-light-hs),var(--tw-colors-error-light-l));
1556
+ color: var(--color, #fecaca);
1397
1557
  }
1398
- .tw_dark .dark\:tw_link_dark {
1399
- color: #60a5fa;
1558
+ :is(.tw_dark .dark\:tw_link_dark) {
1559
+ --color: hsl(var(--tw-colors-link-light-hs),var(--tw-colors-link-light-l));
1560
+ color: var(--color, #60a5fa);
1400
1561
  }
1401
- .tw_dark .dark\:tw_select-base_dark {
1562
+ :is(.tw_dark .dark\:tw_select-base_dark) {
1563
+ --bg-color: hsl(var(--tw-colors-body-dark-hs), var(--tw-colors-body-dark-l), 0.5);
1564
+ --color: hsl(var(--tw-colors-label-light-hs), var(--tw-colors-label-light-l));
1402
1565
  background: no-repeat right 0.75rem center / 16px 12px url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='rgb(209, 213, 219)' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
1403
- background-color: rgba(15, 23, 42, 0.5);
1404
- color: #d1d5db;
1566
+ background-color: var(--bg-color, rgba(15, 23, 42, 0.5));
1567
+ color: var(--color, #d1d5db);
1405
1568
  }
1406
- .tw_dark .dark\:tw_select-base_dark:hover {
1407
- background-color: rgba(15, 23, 42, 0.75);
1569
+ :is(.tw_dark .dark\:tw_select-base_dark):hover {
1570
+ --bg-color: hsl(var(--tw-colors-body-dark-hs), var(--tw-colors-body-dark-l), 0.25);
1571
+ background-color: var(--bg-color, rgba(15, 23, 42, 0.75));
1408
1572
  }
1409
- .tw_dark .dark\:tw_select-base_dark:focus {
1410
- background-color: rgba(15, 23, 42, 0.75);
1573
+ :is(.tw_dark .dark\:tw_select-base_dark):focus {
1574
+ --bg-color: hsl(var(--tw-colors-body-dark-hs), var(--tw-colors-body-dark-l), 0.25);
1575
+ background-color: var(--bg-color, rgba(15, 23, 42, 0.75));
1411
1576
  }
1412
- .tw_dark .dark\:tw_select-base_dark[aria-invalid="true"] {
1577
+ :is(.tw_dark .dark\:tw_select-base_dark)[aria-invalid="true"] {
1578
+ --bg-color: hsl(var(--tw-colors-body-dark-hs), var(--tw-colors-body-dark-l), 0.5);
1413
1579
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='rgb(209, 213, 219)' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='rgb(254, 202, 202)' viewBox='0 0 16 16'%3E%3Cpath d='M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM8 4a.905.905 0 0 0-.9.995l.35 3.507a.552.552 0 0 0 1.1 0l.35-3.507A.905.905 0 0 0 8 4zm.002 6a1 1 0 1 0 0 2 1 1 0 0 0 0-2z'/%3E%3C/svg%3E");;
1414
- background-color: rgba(15, 23, 42, 0.5);
1580
+ background-color: var(--bg-color, rgba(15, 23, 42, 0.5));
1415
1581
  background-position: right 0.75rem center, center right 2.25rem;
1416
1582
  background-size: 16px 12px, 1rem 1rem;
1417
1583
  }
1418
- .tw_dark .dark\:tw_containing-box_dark {
1419
- background-color: #1e293b;
1584
+ :is(.tw_dark .dark\:tw_containing-box_dark) {
1585
+ --bg-color: hsl(var(--tw-colors-background-dark-hs),var(--tw-colors-background-dark-l));
1586
+ background-color: var(--bg-color, #1e293b);
1420
1587
  }
1421
- .tw_dark .dark\:tw_checkbox-input_animated_dark:checked + label > span:before {
1422
- border-color: #027AB8;
1588
+ :is(.tw_dark .dark\:tw_checkbox-input_animated_dark):checked + label > span:before {
1589
+ --border-color: hsl(var(--tw-colors-primary-light-hs),var(--tw-colors-primary-light-l));
1590
+ border-color: var(--border-color, #027AB8);
1423
1591
  }
1424
- .tw_dark .dark\:tw_dialog-box_dark {
1425
- background-color: #1e293b;
1592
+ :is(.tw_dark .dark\:tw_dialog-box_dark) {
1593
+ --bg-color: hsl(var(--tw-colors-background-dark-hs),var(--tw-colors-background-dark-l));
1594
+ background-color: var(--bg-color, #1e293b);
1426
1595
  border-color: #000;
1427
1596
  }
1428
- .tw_dark .dark\:tw_dialog-box_dark::backdrop {
1429
- background-color: rgba(15, 23, 42, 0.8);
1597
+ :is(.tw_dark .dark\:tw_dialog-box_dark)::backdrop {
1598
+ --bg-color: hsl(var(--tw-colors-body-dark-hs),var(--tw-colors-body-dark-l), 0.2);
1599
+ background-color: var(--bg-color, rgba(15, 23, 42, 0.8));
1430
1600
  }
1431
- .tw_dark .dark\:tw_dialog-header_dark {
1432
- background-color: #1e293b;
1433
- border-bottom-color: #374151;
1601
+ :is(.tw_dark .dark\:tw_dialog-header_dark) {
1602
+ --bg-color: hsl(var(--tw-colors-tertiary-dark-hs),var(--tw-colors-tertiary-dark-l));
1603
+ --border-bottom-color: hsl(var(--tw-colors-secondary-dark-hs),var(--tw-colors-secondary-dark-l));
1604
+ background-color: var(--bg-color, #1e293b);
1605
+ border-bottom-color: var(--border-bottom-color, #374151);
1434
1606
  }
1435
- .tw_dark .dark\:tw_dialog-logo_dark {
1607
+ :is(.tw_dark .dark\:tw_dialog-logo_dark) {
1436
1608
  background-image: var(--logo-dark);
1437
1609
  }
1438
- .tw_dark .dark\:tw_input-floating_dark:-webkit-autofill + label {
1439
- color: #374151 !important;
1610
+ :is(.tw_dark .dark\:tw_input-floating_dark):-webkit-autofill + label {
1611
+ --color: hsl(var(--tw-colors-secondary-dark-hs),var(--tw-colors-secondary-dark-l)) !important;
1612
+ color: var(--color, #374151) !important;
1440
1613
  }
1441
- .tw_dark .dark\:tw_input-floating_dark:autofill + label {
1442
- color: #374151 !important;
1614
+ :is(.tw_dark .dark\:tw_input-floating_dark):autofill + label {
1615
+ --color: hsl(var(--tw-colors-secondary-dark-hs),var(--tw-colors-secondary-dark-l)) !important;
1616
+ color: var(--color, #374151) !important;
1443
1617
  }
1444
- .tw_dark .dark\:tw_animated-radio_dark:before {
1445
- border-color: #d1d5db;
1618
+ :is(.tw_dark .dark\:tw_animated-radio_dark):before {
1619
+ --border-color: hsl(var(--tw-colors-secondary-light-hs),var(--tw-colors-secondary-light-l));
1620
+ border-color: var(--border-color, #d1d5db);
1446
1621
  box-shadow: none;
1447
1622
  }
1448
- .tw_dark .dark\:tw_animated-radio_dark:after {
1449
- background-color: #027AB8;
1623
+ :is(.tw_dark .dark\:tw_animated-radio_dark):after {
1624
+ --bg-color: hsl(var(--tw-colors-primary-light-hs),var(--tw-colors-primary-light-l));
1625
+ background-color: var(--bg-color, #027AB8);
1450
1626
  }
1451
- .tw_dark .dark\:tw_radio-input_animated_dark:checked + label > span:before {
1452
- border-color: #d1d5db;
1627
+ :is(.tw_dark .dark\:tw_radio-input_animated_dark):checked + label > span:before {
1628
+ --border-color: hsl(var(--tw-colors-secondary-light-hs),var(--tw-colors-secondary-light-l));
1629
+ border-color: var(--border-color, #d1d5db);
1453
1630
  }
1454
- .tw_dark .dark\:tw_button-apple_dark {
1455
- border-color: #d1d5db;
1631
+ :is(.tw_dark .dark\:tw_button-apple_dark) {
1632
+ --border-color: hsl(var(--tw-colors-secondary-light-hs),var(--tw-colors-secondary-light-l));
1633
+ border-color: var(--border-color, #d1d5db);
1456
1634
  background-color: #fff;
1457
1635
  color: #000;
1458
1636
  }
1459
- .tw_dark .dark\:tw_button-apple_dark:hover::before,.tw_dark .dark\:tw_button-apple_dark:focus::before {
1637
+ :is(.tw_dark .dark\:tw_button-apple_dark):hover::before,:is(.tw_dark .dark\:tw_button-apple_dark):focus::before {
1460
1638
  opacity: 0.1;
1461
1639
  }
1462
- .tw_dark .dark\:tw_button-facebook_dark {
1463
- border-color: #d1d5db;
1640
+ :is(.tw_dark .dark\:tw_button-facebook_dark) {
1641
+ --border-color: hsl(var(--tw-colors-secondary-light-hs),var(--tw-colors-secondary-light-l));
1642
+ border-color: var(--border-color, #d1d5db);
1464
1643
  background-color: #fff;
1465
1644
  color: #1877F2;
1466
1645
  }
1467
- .tw_dark .dark\:tw_button-facebook_dark:hover::before,.tw_dark .dark\:tw_button-facebook_dark:focus::before {
1646
+ :is(.tw_dark .dark\:tw_button-facebook_dark):hover::before,:is(.tw_dark .dark\:tw_button-facebook_dark):focus::before {
1468
1647
  opacity: 0.1;
1469
1648
  }
1470
- .tw_dark .dark\:tw_button-google_dark {
1471
- border-color: #d1d5db;
1649
+ :is(.tw_dark .dark\:tw_button-google_dark) {
1650
+ --border-color: hsl(var(--tw-colors-secondary-light-hs),var(--tw-colors-secondary-light-l));
1651
+ border-color: var(--border-color, #d1d5db);
1472
1652
  background-color: #fff;
1473
1653
  color: #000;
1474
1654
  }
1475
- .tw_dark .dark\:tw_button-google_dark:hover::before,.tw_dark .dark\:tw_button-google_dark:focus::before {
1655
+ :is(.tw_dark .dark\:tw_button-google_dark):hover::before,:is(.tw_dark .dark\:tw_button-google_dark):focus::before {
1476
1656
  opacity: 0.1;
1477
1657
  }
1478
- .tw_dark .dark\:tw_kba-fieldset_dark {
1479
- border-color: hsl(217.89999999999998, 10.6%, 48.7%);
1658
+ :is(.tw_dark .dark\:tw_kba-fieldset_dark) {
1659
+ --border-color: hsl(var(--tw-colors-secondary-default-hs), calc(var(--tw-colors-secondary-default-l) - 25%));
1660
+ border-color: var(--border-color, hsl(217.89999999999998, 10.6%, 48.7%));
1480
1661
  }
1481
- .tw_dark .dark\:tw_kba-fieldset_dark:after {
1482
- border-color: hsl(217.89999999999998, 10.6%, 48.7%);
1662
+ :is(.tw_dark .dark\:tw_kba-fieldset_dark):after {
1663
+ --border-color: hsl(var(--tw-colors-secondary-default-hs), calc(var(--tw-colors-secondary-default-l) - 25%));
1664
+ border-color: var(--border-color, hsl(217.89999999999998, 10.6%, 48.7%));
1483
1665
  }
1484
- .tw_dark .dark\:tw_kba-fieldset_dark:before {
1485
- border-color: hsl(217.89999999999998, 10.6%, 48.7%);
1666
+ :is(.tw_dark .dark\:tw_kba-fieldset_dark):before {
1667
+ --border-color: hsl(var(--tw-colors-secondary-default-hs), calc(var(--tw-colors-secondary-default-l) - 25%));
1668
+ border-color: var(--border-color, hsl(217.89999999999998, 10.6%, 48.7%));
1486
1669
  }
1487
- .tw_dark .dark\:tw_kba-lock-icon_dark > svg {
1488
- color: #d1d5db;
1670
+ :is(.tw_dark .dark\:tw_kba-lock-icon_dark) > svg {
1671
+ --color: hsl(var(--tw-colors-secondary-light-hs),var(--tw-colors-secondary-light-l));
1672
+ color: var(--color, #d1d5db);
1489
1673
  fill: currentcolor;
1490
1674
  }
1491
- .tw_dark .dark\:tw_password-button_dark {
1492
- background-color: rgba(15, 23, 42, 0.5);
1675
+ :is(.tw_dark .dark\:tw_password-button_dark) {
1676
+ --bg-color: hsl(var(--tw-colors-body-dark-hs), var(--tw-colors-body-dark-l), 0.5);
1677
+ background-color: var(--bg-color, rgba(15, 23, 42, 0.5));
1678
+ }
1679
+ :is(.tw_dark .dark\:tw_password-icon_dark) {
1680
+ --color: hsl(var(--tw-colors-secondary-light-hs), var(--tw-colors-secondary-light-l));
1681
+ color: var(--color, #d1d5db);
1682
+ }
1683
+ @media (min-width: 768px) {
1684
+ .md\:tw_containing-box_medium {
1685
+ height: -moz-fit-content;
1686
+ height: fit-content;
1687
+ margin: auto 0;
1688
+ padding: 2.5rem 2.5rem;
1689
+ }
1690
+ .md\:tw_dialog-box_medium {
1691
+ height: -moz-fit-content;
1692
+ height: fit-content;
1693
+ margin: auto;
1694
+ max-width: 32rem;
1695
+ padding: 0px;
1696
+ }
1697
+ .md\:tw_dialog-box_medium .tw_dialog-body {
1698
+ margin: 1.5rem 3rem 4rem;
1699
+ }
1700
+ .md\:tw_dialog-box_medium .tw_dialog-header {
1701
+ padding: 2rem 7rem;
1702
+ margin-bottom: 4rem;
1493
1703
  }
1494
- .tw_dark .dark\:tw_password-icon_dark {
1495
- color: #d1d5db;
1704
+ .md\:tw_dialog-box_medium .tw_dialog-no-header {
1705
+ padding: 2.5rem 0;
1706
+ }
1707
+ .md\:tw_dialog-x_medium {}
1708
+ }
1709
+ .focus-visible\:tw_outline-none:focus-visible {
1710
+ outline: 2px solid transparent;
1711
+ outline-offset: 2px;
1496
1712
  }
1497
- .tw_dark .dark\:tw_border-secondary-dark {
1713
+ :is(.tw_dark .dark\:tw_border-secondary-dark) {
1498
1714
  --tw-border-opacity: 1;
1499
1715
  border-color: rgb(55 65 81 / var(--tw-border-opacity));
1500
1716
  }
1501
- .tw_dark .dark\:tw_bg-background-dark {
1717
+ :is(.tw_dark .dark\:tw_bg-background-dark) {
1502
1718
  --tw-bg-opacity: 1;
1503
1719
  background-color: rgb(30 41 59 / var(--tw-bg-opacity));
1504
1720
  }
1505
- .tw_dark .dark\:tw_bg-body-dark {
1721
+ :is(.tw_dark .dark\:tw_bg-body-dark) {
1506
1722
  --tw-bg-opacity: 1;
1507
1723
  background-color: rgb(15 23 42 / var(--tw-bg-opacity));
1508
1724
  }
1509
- .tw_dark .dark\:tw_text-secondary-light {
1725
+ :is(.tw_dark .dark\:tw_text-error-light) {
1510
1726
  --tw-text-opacity: 1;
1511
- color: rgb(209 213 219 / var(--tw-text-opacity));
1727
+ color: rgb(254 202 202 / var(--tw-text-opacity));
1512
1728
  }
1513
- .tw_dark .dark\:tw_text-link-light {
1729
+ :is(.tw_dark .dark\:tw_text-link-light) {
1514
1730
  --tw-text-opacity: 1;
1515
1731
  color: rgb(96 165 250 / var(--tw-text-opacity));
1516
1732
  }
1517
- .tw_dark .dark\:tw_text-white {
1733
+ :is(.tw_dark .dark\:tw_text-secondary-light) {
1518
1734
  --tw-text-opacity: 1;
1519
- color: rgb(255 255 255 / var(--tw-text-opacity));
1735
+ color: rgb(209 213 219 / var(--tw-text-opacity));
1520
1736
  }
1521
- .tw_dark .dark\:tw_text-error-light {
1737
+ :is(.tw_dark .dark\:tw_text-white) {
1522
1738
  --tw-text-opacity: 1;
1523
- color: rgb(254 202 202 / var(--tw-text-opacity));
1739
+ color: rgb(255 255 255 / var(--tw-text-opacity));
1524
1740
  }
1525
- .tw_dark .dark\:tw_focusable-element_dark {
1526
- outline-color: hsla(272.1, 71.7%, 56.5%, 0.30000000000000004);
1741
+ :is(.tw_dark .dark\:tw_shadow-background-dark) {
1742
+ --tw-shadow-color: #1e293b;
1743
+ --tw-shadow: var(--tw-shadow-colored);
1527
1744
  }
1528
- .tw_dark .dark\:tw_focusable-element_dark:focus {
1529
- outline-color: hsla(272.1, 71.7%, 56.5%, 0.9);
1745
+ :is(.tw_dark .dark\:tw_focusable-element_dark) {
1746
+ --outline-color: hsl(var(--tw-colors-focus-default-hs), calc(var(--tw-colors-focus-default-l) + 20%), 0.7);
1747
+ outline-color: var(--outline-color, hsla(272.1, 71.7%, 56.5%, 0.30000000000000004));
1530
1748
  }
1531
- .tw_dark .dark\:tw_primary-header_dark {
1532
- color: #d1d5db;
1749
+ :is(.tw_dark .dark\:tw_focusable-element_dark):focus {
1750
+ --outline-color: hsl(var(--tw-colors-focus-default-hs), calc(var(--tw-colors-focus-default-l) + 20%), 0.1);
1751
+ outline-color: var(--outline-color, hsla(272.1, 71.7%, 56.5%, 0.9));
1533
1752
  }
1534
- .tw_dark .dark\:tw_secondary-header_dark {
1535
- color: #d1d5db;
1753
+ :is(.tw_dark .dark\:tw_primary-header_dark) {
1754
+ --color: hsl(var(--tw-colors-header-light-hs),var(--tw-colors-header-light-l));
1755
+ color: var(--color, #d1d5db);
1756
+ }
1757
+ :is(.tw_dark .dark\:tw_secondary-header_dark) {
1758
+ --color: hsl(var(--tw-colors-secondary-light-hs),var(--tw-colors-secondary-light-l));
1759
+ color: var(--color, #d1d5db);
1536
1760
  }
1537
1761
  @media (min-width: 768px) {
1538
1762
  .md\:tw_h-36 {
1539
1763
  height: 9rem;
1540
1764
  }
1541
- .md\:tw_containing-box_medium {
1542
- height: -moz-fit-content;
1543
- height: fit-content;
1544
- margin: auto 0;
1545
- padding: 2.5rem 2.5rem;
1546
- }
1547
- .md\:tw_dialog-box_medium {
1548
- height: -moz-fit-content;
1549
- height: fit-content;
1550
- margin: auto;
1551
- max-width: 32rem;
1552
- padding: 0px;
1765
+ .md\:tw_grid-cols-1 {
1766
+ grid-template-columns: repeat(1, minmax(0, 1fr));
1553
1767
  }
1554
- .md\:tw_dialog-box_medium .tw_dialog-body {
1555
- margin: 1.5rem 3rem 4rem;
1768
+ .md\:tw_grid-cols-2 {
1769
+ grid-template-columns: repeat(2, minmax(0, 1fr));
1556
1770
  }
1557
- .md\:tw_dialog-box_medium .tw_dialog-header {
1558
- padding: 2rem 7rem;
1559
- margin-bottom: 4rem;
1771
+ .md\:tw_grid-cols-3 {
1772
+ grid-template-columns: repeat(3, minmax(0, 1fr));
1560
1773
  }
1561
- .md\:tw_dialog-box_medium .tw_dialog-no-header {
1562
- padding: 2.5rem 0;
1774
+ .md\:tw_grid-cols-4 {
1775
+ grid-template-columns: repeat(4, minmax(0, 1fr));
1563
1776
  }
1564
- .md\:tw_dialog-x_medium {}
1565
1777
  .md\:tw_pt-10 {
1566
1778
  padding-top: 2.5rem;
1567
1779
  }