@pelcro/react-pelcro-js 3.11.1 → 4.0.0-alpha.2

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/dist/pelcro.css CHANGED
@@ -22,8 +22,7 @@ Use a more readable tab size (opinionated).
22
22
  */
23
23
 
24
24
  .pelcro-root {
25
- -moz-tab-size: 4;
26
- tab-size: 4;
25
+ tab-size: 4;
27
26
  }
28
27
 
29
28
  /**
@@ -660,20 +659,20 @@ Add the correct display in Chrome and Safari.
660
659
  }
661
660
 
662
661
  .pelcro-root .pelcro-badge {
663
- background-color: hsl(var(--plc-primary-hue), var(--plc-primary-saturation), var(--plc-primary-lightness));
664
- border-radius: 9999px;
662
+ position: absolute;
665
663
  display: flex;
664
+ height: 25%;
665
+ width: 25%;
666
666
  flex-wrap: wrap;
667
667
  align-items: center;
668
668
  justify-content: center;
669
- font-weight: 700;
670
- height: 25%;
669
+ border-radius: 9999px;
670
+ background-color: hsl(var(--plc-primary-hue), var(--plc-primary-saturation), var(--plc-primary-lightness));
671
671
  font-size: 0.875rem;
672
672
  line-height: 1.25rem;
673
- position: absolute;
673
+ font-weight: 700;
674
674
  --tw-text-opacity: 1;
675
675
  color: rgba(255, 255, 255, var(--tw-text-opacity));
676
- width: 25%;
677
676
  top: -5%;
678
677
  right: -5%;
679
678
  }
@@ -683,19 +682,19 @@ Add the correct display in Chrome and Safari.
683
682
  }
684
683
 
685
684
  .pelcro-root .pelcro-modal-overlay {
686
- --tw-bg-opacity: 1;
687
- background-color: rgba(0, 0, 0, var(--tw-bg-opacity));
688
- --tw-bg-opacity: 0.6;
689
- display: flex;
690
- align-items: center;
691
- justify-content: center;
692
- height: 100%;
693
- overflow: auto;
694
685
  position: fixed;
695
686
  top: 0px;
696
687
  left: 0px;
697
- width: 100%;
698
688
  z-index: 999999;
689
+ display: flex;
690
+ height: 100%;
691
+ width: 100%;
692
+ align-items: center;
693
+ justify-content: center;
694
+ overflow: auto;
695
+ --tw-bg-opacity: 1;
696
+ background-color: rgba(0, 0, 0, var(--tw-bg-opacity));
697
+ --tw-bg-opacity: 0.6;
699
698
  -webkit-backdrop-filter: blur(2px);
700
699
  backdrop-filter: blur(2px);
701
700
  }
@@ -735,17 +734,16 @@ Add the correct display in Chrome and Safari.
735
734
  }
736
735
 
737
736
  .pelcro-root .pelcro-modal {
738
- --tw-bg-opacity: 1;
739
- background-color: rgba(255, 255, 255, var(--tw-bg-opacity));
740
- border-color: hsl(var(--plc-primary-hue), var(--plc-primary-saturation), var(--plc-primary-lightness));
741
- border-radius: 0.375rem;
742
- border-top-width: 8px;
737
+ position: absolute;
738
+ top: 0px;
743
739
  display: flex;
740
+ max-width: 42rem;
744
741
  flex-direction: column;
745
742
  align-items: center;
746
- max-width: 32rem;
747
- position: absolute;
748
- top: 0px;
743
+ overflow: hidden;
744
+ border-radius: 0.5rem;
745
+ --tw-bg-opacity: 1;
746
+ background-color: rgba(255, 255, 255, var(--tw-bg-opacity));
749
747
  }
750
748
 
751
749
  @media (min-width: 768px) {
@@ -759,10 +757,36 @@ Add the correct display in Chrome and Safari.
759
757
  }
760
758
 
761
759
  .pelcro-root .pelcro-modal-header {
762
- padding: 0.25rem;
760
+ position: relative;
761
+ display: flex;
762
+ min-height: 8rem;
763
+ flex-direction: column;
764
+ border-bottom-width: 2px;
765
+ --tw-bg-opacity: 1;
766
+ background-color: rgba(255, 255, 255, var(--tw-bg-opacity));
767
+ padding-left: 3rem;
768
+ padding-right: 3rem;
769
+ padding-top: 0.75rem;
770
+ padding-bottom: 0.75rem;
771
+ border-bottom-width: 1px;
763
772
  }
764
773
 
765
774
  .pelcro-root .pelcro-modal-close {
775
+ position: absolute;
776
+ top: 50%;
777
+ right: 1.25rem;
778
+ z-index: 999999;
779
+ width: 1.5rem;
780
+ --tw-translate-x: 0;
781
+ --tw-translate-y: 0;
782
+ --tw-rotate: 0;
783
+ --tw-skew-x: 0;
784
+ --tw-skew-y: 0;
785
+ --tw-scale-x: 1;
786
+ --tw-scale-y: 1;
787
+ transform: translateX(var(--tw-translate-x)) translateY(var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
788
+ --tw-translate-y: -50%;
789
+ border-width: 0px;
766
790
  background-color: transparent;
767
791
  }
768
792
 
@@ -774,18 +798,6 @@ Add the correct display in Chrome and Safari.
774
798
  background-color: transparent;
775
799
  }
776
800
 
777
- .pelcro-root .pelcro-modal-close {
778
- border-width: 0px;
779
- position: absolute;
780
- top: 0.75rem;
781
- right: 0.75rem;
782
- }
783
-
784
- .pelcro-root .pelcro-modal-close:hover {
785
- --tw-shadow: 0 0 #0000;
786
- box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
787
- }
788
-
789
801
  .pelcro-root .pelcro-modal-close {
790
802
  --tw-text-opacity: 1;
791
803
  color: rgba(107, 114, 128, var(--tw-text-opacity));
@@ -801,16 +813,25 @@ Add the correct display in Chrome and Safari.
801
813
  color: rgba(0, 0, 0, var(--tw-text-opacity));
802
814
  }
803
815
 
804
- .pelcro-root .pelcro-modal-close {
805
- width: 1.5rem;
806
- z-index: 999999;
816
+ .pelcro-root .pelcro-modal-close:hover {
817
+ --tw-shadow: 0 0 #0000;
818
+ box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
807
819
  }
808
820
 
809
821
  .pelcro-root .pelcro-modal-body {
810
- margin-top: 1rem;
811
- margin-bottom: 1rem;
812
- margin-left: 2rem;
813
- margin-right: 2rem;
822
+ --tw-bg-opacity: 1;
823
+ background-color: rgba(243, 244, 246, var(--tw-bg-opacity));
824
+ padding-left: 1rem;
825
+ padding-right: 1rem;
826
+ padding-top: 1rem;
827
+ padding-bottom: 1rem;
828
+ }
829
+
830
+ @media (min-width: 768px) {
831
+ .pelcro-root .pelcro-modal-body {
832
+ padding-left: 4rem;
833
+ padding-right: 4rem;
834
+ }
814
835
  }
815
836
 
816
837
  .pelcro-root .pelcro-modal-footer {
@@ -818,12 +839,12 @@ Add the correct display in Chrome and Safari.
818
839
  flex-direction: column;
819
840
  align-items: center;
820
841
  justify-content: center;
842
+ --tw-bg-opacity: 1;
843
+ background-color: rgba(243, 244, 246, var(--tw-bg-opacity));
844
+ padding: 1rem;
845
+ padding-bottom: 2.75rem;
821
846
  font-size: 0.875rem;
822
847
  line-height: 1.25rem;
823
- margin-left: 2rem;
824
- margin-right: 2rem;
825
- margin-bottom: 1rem;
826
- margin-top: 1.5rem;
827
848
  }
828
849
 
829
850
  .pelcro-root .pelcro-input-wrapper {
@@ -833,19 +854,21 @@ Add the correct display in Chrome and Safari.
833
854
 
834
855
  .pelcro-root .pelcro-input-label {
835
856
  margin-bottom: 0.25rem;
857
+ display: inline-flex;
858
+ font-weight: 500;
836
859
  --tw-text-opacity: 1;
837
860
  color: rgba(17, 24, 39, var(--tw-text-opacity));
838
861
  }
839
862
 
840
863
  .pelcro-root .pelcro-input-error {
864
+ position: absolute;
865
+ margin-top: 0.125rem;
841
866
  height: auto;
842
867
  font-size: 0.875rem;
843
868
  line-height: 1.25rem;
844
- margin-top: 0.125rem;
845
- position: absolute;
869
+ text-transform: none;
846
870
  --tw-text-opacity: 1;
847
871
  color: rgba(180, 48, 43, var(--tw-text-opacity));
848
- text-transform: none;
849
872
  }
850
873
 
851
874
  .pelcro-root .pelcro-input-invalid {
@@ -857,52 +880,64 @@ Add the correct display in Chrome and Safari.
857
880
  }
858
881
 
859
882
  .pelcro-root .pelcro-input-field {
860
- -webkit-appearance: none;
861
- appearance: none;
862
- --tw-bg-opacity: 1;
863
- background-color: rgba(249, 250, 251, var(--tw-bg-opacity));
883
+ min-height: 3rem;
884
+ width: 100%;
864
885
  }
865
886
 
866
887
  .pelcro-root .pelcro-input-field:disabled {
867
- --tw-bg-opacity: 1;
868
- background-color: rgba(209, 213, 219, var(--tw-bg-opacity));
888
+ cursor: not-allowed;
869
889
  }
870
890
 
871
891
  .pelcro-root .pelcro-input-field {
892
+ -webkit-appearance: none;
893
+ appearance: none;
894
+ border-radius: 0.25rem;
895
+ border-width: 1px;
896
+ border-style: solid;
872
897
  --tw-border-opacity: 1;
873
898
  border-color: rgba(209, 213, 219, var(--tw-border-opacity));
874
- border-radius: 0.125rem;
875
- border-style: solid;
876
- border-width: 1px;
899
+ --tw-bg-opacity: 1;
900
+ background-color: rgba(249, 250, 251, var(--tw-bg-opacity));
877
901
  }
878
902
 
879
903
  .pelcro-root .pelcro-input-field:disabled {
880
- cursor: not-allowed;
904
+ --tw-bg-opacity: 1;
905
+ background-color: rgba(209, 213, 219, var(--tw-bg-opacity));
881
906
  }
882
907
 
883
908
  .pelcro-root .pelcro-input-field {
909
+ padding: 0.5rem;
910
+ --tw-text-opacity: 1;
911
+ color: rgba(17, 24, 39, var(--tw-text-opacity));
884
912
  outline: 2px solid transparent;
885
913
  outline-offset: 2px;
886
- padding: 0.5rem;
887
914
  }
888
915
 
889
916
  .pelcro-root .pelcro-input-field:focus {
890
917
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
891
- --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
918
+ --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
892
919
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
893
920
  --tw-ring-color: hsl(var(--plc-primary-hue), var(--plc-primary-saturation), calc(var(--plc-primary-lightness) + 10%));
894
921
  }
895
922
 
896
- .pelcro-root .pelcro-input-field {
923
+ .pelcro-root .pelcro-checkbox-label {
924
+ padding-left: 0.5rem;
897
925
  --tw-text-opacity: 1;
898
926
  color: rgba(17, 24, 39, var(--tw-text-opacity));
899
- width: 100%;
900
927
  }
901
928
 
902
- .pelcro-root .pelcro-checkbox-label {
903
- margin-left: 0.5rem;
904
- --tw-text-opacity: 1;
905
- color: rgba(17, 24, 39, var(--tw-text-opacity));
929
+ .pelcro-root .pelcro-checkbox {
930
+ height: 1.25rem;
931
+ width: 1.25rem;
932
+ cursor: pointer;
933
+ }
934
+
935
+ .pelcro-root .pelcro-checkbox:disabled {
936
+ cursor: not-allowed;
937
+ }
938
+
939
+ .pelcro-root .pelcro-checkbox {
940
+ border-radius: 0.125rem;
906
941
  }
907
942
 
908
943
  .pelcro-root .pelcro-checkbox:checked {
@@ -910,30 +945,22 @@ Add the correct display in Chrome and Safari.
910
945
  }
911
946
 
912
947
  .pelcro-root .pelcro-checkbox {
913
- border-radius: 0.25rem;
948
+ color: hsl(var(--plc-primary-hue), var(--plc-primary-saturation), var(--plc-primary-lightness));
914
949
  }
915
950
 
916
951
  .pelcro-root .pelcro-checkbox:disabled {
917
- cursor: not-allowed;
952
+ --tw-text-opacity: 1;
953
+ color: rgba(209, 213, 219, var(--tw-text-opacity));
918
954
  }
919
955
 
920
956
  .pelcro-root .pelcro-checkbox:focus {
921
957
  outline: 2px solid transparent;
922
958
  outline-offset: 2px;
923
959
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
924
- --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
960
+ --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
925
961
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
926
- --tw-ring-offset-width: 2px;
927
962
  --tw-ring-color: hsl(var(--plc-primary-hue), var(--plc-primary-saturation), calc(var(--plc-primary-lightness) + 20%));
928
- }
929
-
930
- .pelcro-root .pelcro-checkbox {
931
- color: hsl(var(--plc-primary-hue), var(--plc-primary-saturation), var(--plc-primary-lightness));
932
- }
933
-
934
- .pelcro-root .pelcro-checkbox:disabled {
935
- --tw-text-opacity: 1;
936
- color: rgba(209, 213, 219, var(--tw-text-opacity));
963
+ --tw-ring-offset-width: 1px;
937
964
  }
938
965
 
939
966
  .pelcro-root .pelcro-checkbox::before {
@@ -942,13 +969,28 @@ Add the correct display in Chrome and Safari.
942
969
 
943
970
  .pelcro-root .pelcro-loader-wrapper {
944
971
  display: flex;
972
+ width: 100%;
945
973
  align-items: center;
946
- align-self: center;
947
974
  justify-content: center;
948
- width: 100%;
975
+ align-self: center;
976
+ }
977
+
978
+ .pelcro-root .pelcro-button-solid {
979
+ display: inline-flex;
980
+ min-height: 3rem;
981
+ width: max-content;
982
+ }
983
+
984
+ .pelcro-root .pelcro-button-solid:disabled {
985
+ cursor: not-allowed;
949
986
  }
950
987
 
951
988
  .pelcro-root .pelcro-button-solid {
989
+ align-items: center;
990
+ justify-content: center;
991
+ justify-items: center;
992
+ border-radius: 0.25rem;
993
+ border-width: 0px;
952
994
  background-color: hsl(var(--plc-primary-hue), var(--plc-primary-saturation), var(--plc-primary-lightness));
953
995
  }
954
996
 
@@ -966,32 +1008,30 @@ Add the correct display in Chrome and Safari.
966
1008
  }
967
1009
 
968
1010
  .pelcro-root .pelcro-button-solid {
969
- border-radius: 0.25rem;
970
- border-width: 0px;
971
- }
972
-
973
- .pelcro-root .pelcro-button-solid:disabled {
974
- cursor: not-allowed;
1011
+ padding-left: 1.5rem;
1012
+ padding-right: 1.5rem;
1013
+ padding-top: 0.5rem;
1014
+ padding-bottom: 0.5rem;
1015
+ font-weight: 600;
1016
+ text-transform: uppercase;
1017
+ letter-spacing: 0.05em;
1018
+ --tw-text-opacity: 1;
1019
+ color: rgba(255, 255, 255, var(--tw-text-opacity));
975
1020
  }
976
1021
 
977
- .pelcro-root .pelcro-button-solid {
978
- display: inline-flex;
979
- align-items: center;
980
- justify-items: center;
981
- justify-content: center;
982
- font-weight: 600;
1022
+ .pelcro-root .pelcro-button-solid:hover {
1023
+ --tw-text-opacity: 1;
1024
+ color: rgba(255, 255, 255, var(--tw-text-opacity));
983
1025
  }
984
1026
 
985
1027
  .pelcro-root .pelcro-button-solid:focus {
986
- outline: 2px solid transparent;
987
- outline-offset: 2px;
1028
+ --tw-text-opacity: 1;
1029
+ color: rgba(255, 255, 255, var(--tw-text-opacity));
988
1030
  }
989
1031
 
990
- .pelcro-root .pelcro-button-solid {
991
- padding-top: 0.5rem;
992
- padding-bottom: 0.5rem;
993
- padding-left: 1.5rem;
994
- padding-right: 1.5rem;
1032
+ .pelcro-root .pelcro-button-solid:disabled {
1033
+ --tw-text-opacity: 1;
1034
+ color: rgba(255, 255, 255, var(--tw-text-opacity));
995
1035
  }
996
1036
 
997
1037
  .pelcro-root .pelcro-button-solid:hover {
@@ -1000,36 +1040,35 @@ Add the correct display in Chrome and Safari.
1000
1040
  }
1001
1041
 
1002
1042
  .pelcro-root .pelcro-button-solid:focus {
1043
+ outline: 2px solid transparent;
1044
+ outline-offset: 2px;
1003
1045
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
1004
1046
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
1005
1047
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
1006
1048
  --tw-ring-color: hsl(var(--plc-primary-hue), var(--plc-primary-saturation), calc(var(--plc-primary-lightness) + 20%));
1007
1049
  }
1008
1050
 
1009
- .pelcro-root .pelcro-button-solid {
1010
- --tw-text-opacity: 1;
1011
- color: rgba(255, 255, 255, var(--tw-text-opacity));
1051
+ .pelcro-root .pelcro-button-outline {
1052
+ display: inline-flex;
1053
+ width: max-content;
1012
1054
  }
1013
1055
 
1014
- .pelcro-root .pelcro-button-solid:hover {
1015
- --tw-text-opacity: 1;
1016
- color: rgba(255, 255, 255, var(--tw-text-opacity));
1056
+ .pelcro-root .pelcro-button-outline:disabled {
1057
+ cursor: not-allowed;
1017
1058
  }
1018
1059
 
1019
- .pelcro-root .pelcro-button-solid:focus {
1020
- --tw-text-opacity: 1;
1021
- color: rgba(255, 255, 255, var(--tw-text-opacity));
1060
+ .pelcro-root .pelcro-button-outline {
1061
+ align-items: center;
1062
+ justify-content: center;
1063
+ justify-items: center;
1064
+ border-radius: 0.25rem;
1065
+ border-width: 1px;
1066
+ border-color: hsl(var(--plc-primary-hue), var(--plc-primary-saturation), var(--plc-primary-lightness));
1022
1067
  }
1023
1068
 
1024
- .pelcro-root .pelcro-button-solid:disabled {
1025
- --tw-text-opacity: 1;
1026
- color: rgba(255, 255, 255, var(--tw-text-opacity));
1027
- }
1028
-
1029
- .pelcro-root .pelcro-button-solid {
1030
- text-transform: uppercase;
1031
- letter-spacing: 0.05em;
1032
- width: max-content;
1069
+ .pelcro-root .pelcro-button-outline:disabled {
1070
+ --tw-border-opacity: 1;
1071
+ border-color: rgba(107, 114, 128, var(--tw-border-opacity));
1033
1072
  }
1034
1073
 
1035
1074
  .pelcro-root .pelcro-button-outline {
@@ -1049,56 +1088,13 @@ Add the correct display in Chrome and Safari.
1049
1088
  }
1050
1089
 
1051
1090
  .pelcro-root .pelcro-button-outline {
1052
- border-color: hsl(var(--plc-primary-hue), var(--plc-primary-saturation), var(--plc-primary-lightness));
1053
- }
1054
-
1055
- .pelcro-root .pelcro-button-outline:disabled {
1056
- --tw-border-opacity: 1;
1057
- border-color: rgba(107, 114, 128, var(--tw-border-opacity));
1058
- }
1059
-
1060
- .pelcro-root .pelcro-button-outline {
1061
- border-radius: 0.25rem;
1062
- border-width: 1px;
1063
- }
1064
-
1065
- .pelcro-root .pelcro-button-outline:disabled {
1066
- cursor: not-allowed;
1067
- }
1068
-
1069
- .pelcro-root .pelcro-button-outline {
1070
- display: inline-flex;
1071
- align-items: center;
1072
- justify-items: center;
1073
- justify-content: center;
1074
- font-weight: 600;
1075
- }
1076
-
1077
- .pelcro-root .pelcro-button-outline:focus {
1078
- outline: 2px solid transparent;
1079
- outline-offset: 2px;
1080
- }
1081
-
1082
- .pelcro-root .pelcro-button-outline {
1083
- padding-top: 0.5rem;
1084
- padding-bottom: 0.5rem;
1085
1091
  padding-left: 1.5rem;
1086
1092
  padding-right: 1.5rem;
1087
- }
1088
-
1089
- .pelcro-root .pelcro-button-outline:hover {
1090
- --tw-shadow: 0 0 #0000;
1091
- box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
1092
- }
1093
-
1094
- .pelcro-root .pelcro-button-outline:focus {
1095
- --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
1096
- --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
1097
- box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
1098
- --tw-ring-color: hsl(var(--plc-primary-hue), var(--plc-primary-saturation), calc(var(--plc-primary-lightness) + 20%));
1099
- }
1100
-
1101
- .pelcro-root .pelcro-button-outline {
1093
+ padding-top: 0.5rem;
1094
+ padding-bottom: 0.5rem;
1095
+ font-weight: 600;
1096
+ text-transform: uppercase;
1097
+ letter-spacing: 0.05em;
1102
1098
  color: hsl(var(--plc-primary-hue), var(--plc-primary-saturation), var(--plc-primary-lightness));
1103
1099
  }
1104
1100
 
@@ -1117,20 +1113,24 @@ Add the correct display in Chrome and Safari.
1117
1113
  color: rgba(107, 114, 128, var(--tw-text-opacity));
1118
1114
  }
1119
1115
 
1120
- .pelcro-root .pelcro-button-outline {
1121
- text-transform: uppercase;
1122
- letter-spacing: 0.05em;
1123
- width: max-content;
1116
+ .pelcro-root .pelcro-button-outline:hover {
1117
+ --tw-shadow: 0 0 #0000;
1118
+ box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
1124
1119
  }
1125
1120
 
1126
- .pelcro-root .pelcro-button-icon:hover {
1127
- --tw-bg-opacity: 1;
1128
- background-color: rgba(229, 231, 235, var(--tw-bg-opacity));
1121
+ .pelcro-root .pelcro-button-outline:focus {
1122
+ outline: 2px solid transparent;
1123
+ outline-offset: 2px;
1124
+ --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
1125
+ --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
1126
+ box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
1127
+ --tw-ring-color: hsl(var(--plc-primary-hue), var(--plc-primary-saturation), calc(var(--plc-primary-lightness) + 20%));
1129
1128
  }
1130
1129
 
1131
1130
  .pelcro-root .pelcro-button-icon {
1132
- border-radius: 9999px;
1133
- border-width: 0px;
1131
+ display: inline-flex;
1132
+ height: 2rem;
1133
+ width: 2rem;
1134
1134
  }
1135
1135
 
1136
1136
  .pelcro-root .pelcro-button-icon:disabled {
@@ -1138,15 +1138,22 @@ Add the correct display in Chrome and Safari.
1138
1138
  }
1139
1139
 
1140
1140
  .pelcro-root .pelcro-button-icon {
1141
- display: inline-flex;
1142
1141
  align-items: center;
1143
1142
  justify-content: center;
1144
- height: 2rem;
1143
+ border-radius: 9999px;
1144
+ border-width: 0px;
1145
1145
  }
1146
1146
 
1147
- .pelcro-root .pelcro-button-icon:focus {
1148
- outline: 2px solid transparent;
1149
- outline-offset: 2px;
1147
+ .pelcro-root .pelcro-button-icon:hover {
1148
+ --tw-bg-opacity: 1;
1149
+ background-color: rgba(229, 231, 235, var(--tw-bg-opacity));
1150
+ --tw-text-opacity: 1;
1151
+ color: rgba(75, 85, 99, var(--tw-text-opacity));
1152
+ }
1153
+
1154
+ .pelcro-root .pelcro-button-icon:disabled {
1155
+ --tw-text-opacity: 1;
1156
+ color: rgba(209, 213, 219, var(--tw-text-opacity));
1150
1157
  }
1151
1158
 
1152
1159
  .pelcro-root .pelcro-button-icon:hover {
@@ -1155,27 +1162,29 @@ Add the correct display in Chrome and Safari.
1155
1162
  }
1156
1163
 
1157
1164
  .pelcro-root .pelcro-button-icon:focus {
1165
+ outline: 2px solid transparent;
1166
+ outline-offset: 2px;
1158
1167
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
1159
1168
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
1160
1169
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
1161
1170
  --tw-ring-color: hsl(var(--plc-primary-hue), var(--plc-primary-saturation), calc(var(--plc-primary-lightness) + 20%));
1162
1171
  }
1163
1172
 
1164
- .pelcro-root .pelcro-button-icon:hover {
1165
- --tw-text-opacity: 1;
1166
- color: rgba(75, 85, 99, var(--tw-text-opacity));
1167
- }
1168
-
1169
- .pelcro-root .pelcro-button-icon:disabled {
1170
- --tw-text-opacity: 1;
1171
- color: rgba(209, 213, 219, var(--tw-text-opacity));
1173
+ .pelcro-root .pelcro-button-ghost {
1174
+ display: inline-flex;
1175
+ width: max-content;
1172
1176
  }
1173
1177
 
1174
- .pelcro-root .pelcro-button-icon {
1175
- width: 2rem;
1178
+ .pelcro-root .pelcro-button-ghost:disabled {
1179
+ cursor: not-allowed;
1176
1180
  }
1177
1181
 
1178
1182
  .pelcro-root .pelcro-button-ghost {
1183
+ align-items: center;
1184
+ justify-content: center;
1185
+ justify-items: center;
1186
+ border-radius: 0.5rem;
1187
+ border-width: 0px;
1179
1188
  background-color: transparent;
1180
1189
  }
1181
1190
 
@@ -1194,46 +1203,10 @@ Add the correct display in Chrome and Safari.
1194
1203
  }
1195
1204
 
1196
1205
  .pelcro-root .pelcro-button-ghost {
1197
- border-radius: 0.5rem;
1198
- border-width: 0px;
1199
- }
1200
-
1201
- .pelcro-root .pelcro-button-ghost:disabled {
1202
- cursor: not-allowed;
1203
- }
1204
-
1205
- .pelcro-root .pelcro-button-ghost {
1206
- display: inline-flex;
1207
- align-items: center;
1208
- justify-items: center;
1209
- justify-content: center;
1210
- font-weight: 600;
1206
+ padding: 0.25rem;
1211
1207
  font-size: 0.75rem;
1212
1208
  line-height: 1rem;
1213
- }
1214
-
1215
- .pelcro-root .pelcro-button-ghost:focus {
1216
- outline: 2px solid transparent;
1217
- outline-offset: 2px;
1218
- }
1219
-
1220
- .pelcro-root .pelcro-button-ghost {
1221
- padding: 0.25rem;
1222
- }
1223
-
1224
- .pelcro-root .pelcro-button-ghost:hover {
1225
- --tw-shadow: 0 0 #0000;
1226
- box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
1227
- }
1228
-
1229
- .pelcro-root .pelcro-button-ghost:focus {
1230
- --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
1231
- --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
1232
- box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
1233
- --tw-ring-color: hsl(var(--plc-primary-hue), var(--plc-primary-saturation), calc(var(--plc-primary-lightness) + 20%));
1234
- }
1235
-
1236
- .pelcro-root .pelcro-button-ghost {
1209
+ font-weight: 600;
1237
1210
  --tw-text-opacity: 1;
1238
1211
  color: rgba(107, 114, 128, var(--tw-text-opacity));
1239
1212
  }
@@ -1253,13 +1226,23 @@ Add the correct display in Chrome and Safari.
1253
1226
  color: rgba(209, 213, 219, var(--tw-text-opacity));
1254
1227
  }
1255
1228
 
1256
- .pelcro-root .pelcro-button-ghost {
1257
- width: max-content;
1229
+ .pelcro-root .pelcro-button-ghost:hover {
1230
+ --tw-shadow: 0 0 #0000;
1231
+ box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
1232
+ }
1233
+
1234
+ .pelcro-root .pelcro-button-ghost:focus {
1235
+ outline: 2px solid transparent;
1236
+ outline-offset: 2px;
1237
+ --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
1238
+ --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
1239
+ box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
1240
+ --tw-ring-color: hsl(var(--plc-primary-hue), var(--plc-primary-saturation), calc(var(--plc-primary-lightness) + 20%));
1258
1241
  }
1259
1242
 
1260
1243
  .pelcro-root .pelcro-button-spinner {
1261
- height: 1.25rem;
1262
1244
  margin-right: 0.25rem;
1245
+ height: 1.25rem;
1263
1246
  width: 1.25rem;
1264
1247
  animation: plc-spin 1s linear infinite;
1265
1248
  }
@@ -1274,39 +1257,35 @@ Add the correct display in Chrome and Safari.
1274
1257
  color: hsl(var(--plc-primary-hue), var(--plc-primary-saturation), calc(var(--plc-primary-lightness) - 10%));
1275
1258
  }
1276
1259
 
1277
- .pelcro-root .pelcro-link {
1278
- text-decoration: underline;
1279
- }
1280
-
1281
1260
  .pelcro-root .pelcro-radio-label {
1282
1261
  margin-left: 0.5rem;
1283
1262
  --tw-text-opacity: 1;
1284
1263
  color: rgba(17, 24, 39, var(--tw-text-opacity));
1285
1264
  }
1286
1265
 
1287
- .pelcro-root .pelcro-radio:checked {
1288
- border-color: transparent;
1266
+ .pelcro-root [type="radio"]:checked {
1267
+ background-image: none;
1289
1268
  }
1290
1269
 
1291
1270
  .pelcro-root .pelcro-radio {
1292
- border-radius: 9999px;
1271
+ cursor: pointer;
1293
1272
  }
1294
1273
 
1295
1274
  .pelcro-root .pelcro-radio:disabled {
1296
1275
  cursor: not-allowed;
1297
1276
  }
1298
1277
 
1299
- .pelcro-root .pelcro-radio:focus {
1300
- outline: 2px solid transparent;
1301
- outline-offset: 2px;
1302
- --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
1303
- --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
1304
- box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
1305
- --tw-ring-offset-width: 2px;
1306
- --tw-ring-color: hsl(var(--plc-primary-hue), var(--plc-primary-saturation), calc(var(--plc-primary-lightness) + 20%));
1278
+ .pelcro-root .pelcro-radio {
1279
+ border-radius: 9999px;
1280
+ border-style: none;
1281
+ }
1282
+
1283
+ .pelcro-root .pelcro-radio:checked {
1284
+ border-color: transparent;
1307
1285
  }
1308
1286
 
1309
1287
  .pelcro-root .pelcro-radio {
1288
+ background-image: none;
1310
1289
  color: hsl(var(--plc-primary-hue), var(--plc-primary-saturation), var(--plc-primary-lightness));
1311
1290
  }
1312
1291
 
@@ -1315,56 +1294,69 @@ Add the correct display in Chrome and Safari.
1315
1294
  color: rgba(209, 213, 219, var(--tw-text-opacity));
1316
1295
  }
1317
1296
 
1297
+ .pelcro-root .pelcro-radio:focus {
1298
+ outline: 2px solid transparent;
1299
+ outline-offset: 2px;
1300
+ }
1301
+
1302
+ .pelcro-root .pelcro-radio {
1303
+ --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
1304
+ --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
1305
+ box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
1306
+ --tw-ring-color: hsl(var(--plc-primary-hue), var(--plc-primary-saturation), calc(var(--plc-primary-lightness) + 20%));
1307
+ --tw-ring-offset-width: 2px;
1308
+ }
1309
+
1318
1310
  .pelcro-root .pelcro-radio:checked::before {
1319
1311
  display: none;
1320
1312
  }
1321
1313
 
1322
1314
  .pelcro-root .pelcro-alert-error {
1323
- --tw-bg-opacity: 1;
1324
- background-color: rgba(239, 190, 188, var(--tw-bg-opacity));
1325
- border-radius: 0.125rem;
1315
+ margin-bottom: 0.5rem;
1326
1316
  display: flex;
1317
+ width: 100%;
1327
1318
  align-items: center;
1328
1319
  justify-content: space-between;
1329
- font-weight: 600;
1330
- font-size: 0.875rem;
1331
- line-height: 1.25rem;
1332
- margin-bottom: 0.5rem;
1333
- padding-top: 0.75rem;
1334
- padding-bottom: 0.75rem;
1320
+ border-radius: 0.125rem;
1321
+ --tw-bg-opacity: 1;
1322
+ background-color: rgba(239, 190, 188, var(--tw-bg-opacity));
1335
1323
  padding-left: 1rem;
1336
1324
  padding-right: 1rem;
1325
+ padding-top: 0.75rem;
1326
+ padding-bottom: 0.75rem;
1327
+ font-size: 0.875rem;
1328
+ line-height: 1.25rem;
1329
+ font-weight: 600;
1337
1330
  --tw-text-opacity: 1;
1338
1331
  color: rgba(139, 37, 33, var(--tw-text-opacity));
1339
- width: 100%;
1340
1332
  }
1341
1333
 
1342
1334
  .pelcro-root .pelcro-alert-success {
1343
- --tw-bg-opacity: 1;
1344
- background-color: rgba(167, 243, 208, var(--tw-bg-opacity));
1345
- border-radius: 0.125rem;
1335
+ margin-bottom: 0.5rem;
1346
1336
  display: flex;
1337
+ width: 100%;
1347
1338
  align-items: center;
1348
1339
  justify-content: space-between;
1349
- font-weight: 600;
1350
- font-size: 0.875rem;
1351
- line-height: 1.25rem;
1352
- margin-bottom: 0.5rem;
1353
- padding-top: 0.75rem;
1354
- padding-bottom: 0.75rem;
1340
+ border-radius: 0.125rem;
1341
+ --tw-bg-opacity: 1;
1342
+ background-color: rgba(167, 243, 208, var(--tw-bg-opacity));
1355
1343
  padding-left: 1rem;
1356
1344
  padding-right: 1rem;
1345
+ padding-top: 0.75rem;
1346
+ padding-bottom: 0.75rem;
1347
+ font-size: 0.875rem;
1348
+ line-height: 1.25rem;
1349
+ font-weight: 600;
1357
1350
  --tw-text-opacity: 1;
1358
1351
  color: rgba(6, 95, 70, var(--tw-text-opacity));
1359
- width: 100%;
1360
1352
  }
1361
1353
 
1362
1354
  .pelcro-root .pelcro-alert-icon {
1363
- flex-shrink: 0;
1364
- height: 1.5rem;
1365
1355
  margin-right: 0.75rem;
1366
- fill: currentColor;
1356
+ height: 1.5rem;
1367
1357
  width: 1.5rem;
1358
+ flex-shrink: 0;
1359
+ fill: currentColor;
1368
1360
  }
1369
1361
 
1370
1362
  .pelcro-root .pelcro-alert-content {
@@ -1372,6 +1364,9 @@ Add the correct display in Chrome and Safari.
1372
1364
  }
1373
1365
 
1374
1366
  .pelcro-root .pelcro-alert-close {
1367
+ width: 1rem;
1368
+ flex-shrink: 0;
1369
+ border-width: 0px;
1375
1370
  background-color: transparent;
1376
1371
  }
1377
1372
 
@@ -1384,8 +1379,6 @@ Add the correct display in Chrome and Safari.
1384
1379
  }
1385
1380
 
1386
1381
  .pelcro-root .pelcro-alert-close {
1387
- border-width: 0px;
1388
- flex-shrink: 0;
1389
1382
  fill: currentColor;
1390
1383
  color: currentColor;
1391
1384
  }
@@ -1398,16 +1391,12 @@ Add the correct display in Chrome and Safari.
1398
1391
  color: currentColor;
1399
1392
  }
1400
1393
 
1401
- .pelcro-root .pelcro-alert-close {
1402
- width: 1rem;
1403
- }
1404
-
1405
1394
  .pelcro-root .pelcro-notification-error {
1406
1395
  --tw-bg-opacity: 1;
1407
1396
  background-color: rgba(180, 48, 43, var(--tw-bg-opacity));
1408
- font-weight: 600;
1409
1397
  font-size: 0.875rem;
1410
1398
  line-height: 1.25rem;
1399
+ font-weight: 600;
1411
1400
  --tw-text-opacity: 1;
1412
1401
  color: rgba(255, 255, 255, var(--tw-text-opacity));
1413
1402
  }
@@ -1415,9 +1404,9 @@ Add the correct display in Chrome and Safari.
1415
1404
  .pelcro-root .pelcro-notification-success {
1416
1405
  --tw-bg-opacity: 1;
1417
1406
  background-color: rgba(16, 185, 129, var(--tw-bg-opacity));
1418
- font-weight: 600;
1419
1407
  font-size: 0.875rem;
1420
1408
  line-height: 1.25rem;
1409
+ font-weight: 600;
1421
1410
  --tw-text-opacity: 1;
1422
1411
  color: rgba(255, 255, 255, var(--tw-text-opacity));
1423
1412
  }
@@ -1431,9 +1420,9 @@ Add the correct display in Chrome and Safari.
1431
1420
  .pelcro-root .pelcro-notification-confirm {
1432
1421
  --tw-bg-opacity: 1;
1433
1422
  background-color: rgba(255, 255, 255, var(--tw-bg-opacity));
1434
- font-weight: 600;
1435
1423
  font-size: 0.875rem;
1436
1424
  line-height: 1.25rem;
1425
+ font-weight: 600;
1437
1426
  }
1438
1427
 
1439
1428
  .pelcro-root .pelcro-notification-loading > :not([hidden]) ~ :not([hidden]) {
@@ -1443,29 +1432,29 @@ Add the correct display in Chrome and Safari.
1443
1432
  }
1444
1433
 
1445
1434
  .pelcro-root .pelcro-notification-loading {
1446
- font-weight: 600;
1447
1435
  font-size: 0.875rem;
1448
1436
  line-height: 1.25rem;
1437
+ font-weight: 600;
1449
1438
  }
1450
1439
 
1451
1440
  .pelcro-root .pelcro-notification-warning {
1452
1441
  --tw-bg-opacity: 1;
1453
1442
  background-color: rgba(245, 158, 11, var(--tw-bg-opacity));
1454
- font-weight: 600;
1455
1443
  font-size: 0.875rem;
1456
1444
  line-height: 1.25rem;
1445
+ font-weight: 600;
1457
1446
  --tw-text-opacity: 1;
1458
1447
  color: rgba(255, 255, 255, var(--tw-text-opacity));
1459
1448
  }
1460
1449
 
1461
1450
  .pelcro-root .pelcro-notification-entitlement {
1451
+ border-top-width: 8px;
1452
+ border-color: hsl(var(--plc-primary-hue), var(--plc-primary-saturation), var(--plc-primary-lightness));
1462
1453
  --tw-bg-opacity: 1;
1463
1454
  background-color: rgba(255, 255, 255, var(--tw-bg-opacity));
1464
- border-color: hsl(var(--plc-primary-hue), var(--plc-primary-saturation), var(--plc-primary-lightness));
1465
- border-top-width: 8px;
1466
- font-weight: 600;
1467
1455
  font-size: 0.875rem;
1468
1456
  line-height: 1.25rem;
1457
+ font-weight: 600;
1469
1458
  --tw-text-opacity: 1;
1470
1459
  color: rgba(75, 85, 99, var(--tw-text-opacity));
1471
1460
  }
@@ -1473,33 +1462,40 @@ Add the correct display in Chrome and Safari.
1473
1462
  .pelcro-root .pelcro-notification-warning {
1474
1463
  --tw-bg-opacity: 1;
1475
1464
  background-color: rgba(245, 158, 11, var(--tw-bg-opacity));
1476
- font-weight: 600;
1477
1465
  font-size: 0.875rem;
1478
1466
  line-height: 1.25rem;
1467
+ font-weight: 600;
1479
1468
  --tw-text-opacity: 1;
1480
1469
  color: rgba(255, 255, 255, var(--tw-text-opacity));
1481
1470
  }
1482
1471
 
1483
1472
  .pelcro-root .pelcro-notification-entitlement {
1473
+ border-top-width: 8px;
1474
+ border-color: hsl(var(--plc-primary-hue), var(--plc-primary-saturation), var(--plc-primary-lightness));
1484
1475
  --tw-bg-opacity: 1;
1485
1476
  background-color: rgba(255, 255, 255, var(--tw-bg-opacity));
1486
- border-color: hsl(var(--plc-primary-hue), var(--plc-primary-saturation), var(--plc-primary-lightness));
1487
- border-top-width: 8px;
1488
- font-weight: 600;
1489
1477
  font-size: 0.875rem;
1490
1478
  line-height: 1.25rem;
1479
+ font-weight: 600;
1491
1480
  --tw-text-opacity: 1;
1492
1481
  color: rgba(75, 85, 99, var(--tw-text-opacity));
1493
1482
  }
1494
1483
 
1495
1484
  .pelcro-root .pelcro-tooltip {
1496
- display: none;
1497
1485
  position: absolute;
1486
+ display: none;
1498
1487
  }
1499
1488
 
1500
1489
  .pelcro-root .pelcro-tooltip-container:hover .pelcro-tooltip, .pelcro-root .pelcro-tooltip:hover {
1501
- display: block;
1502
1490
  z-index: 50;
1491
+ display: block;
1492
+ }
1493
+
1494
+ .pelcro-root .pelcro-vertical-separator {
1495
+ display: inline-block;
1496
+ --tw-bg-opacity: 1;
1497
+ background-color: rgba(229, 231, 235, var(--tw-bg-opacity));
1498
+ width: 1px;
1503
1499
  }
1504
1500
 
1505
1501
  .pelcro-root .pelcro-shop-product-image {
@@ -1511,10 +1507,11 @@ Add the correct display in Chrome and Safari.
1511
1507
  }
1512
1508
 
1513
1509
  .pelcro-root input[type="range"] {
1514
- -webkit-appearance: none;
1515
- appearance: none;
1516
1510
  height: 1.75rem;
1517
1511
  width: 100%;
1512
+ -webkit-appearance: none;
1513
+ appearance: none;
1514
+ background-color: transparent;
1518
1515
  }
1519
1516
 
1520
1517
  .pelcro-root input[type="range"]:focus {
@@ -1523,32 +1520,32 @@ Add the correct display in Chrome and Safari.
1523
1520
  }
1524
1521
 
1525
1522
  .pelcro-root input[type="range"]::-webkit-slider-runnable-track {
1526
- background-color: hsl(var(--plc-primary-hue), var(--plc-primary-saturation), var(--plc-primary-lightness));
1523
+ width: 100%;
1524
+ cursor: pointer;
1527
1525
  border-radius: 0.375rem;
1528
1526
  border-style: none;
1529
- cursor: pointer;
1527
+ background-color: hsl(var(--plc-primary-hue), var(--plc-primary-saturation), var(--plc-primary-lightness));
1530
1528
  --tw-shadow: 0 0 #0000;
1531
1529
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
1532
- width: 100%;
1533
1530
  height: 0.375rem;
1534
1531
  }
1535
1532
 
1536
1533
  .pelcro-root input[type="range"]::-webkit-slider-thumb {
1534
+ margin-top: -0.5rem;
1535
+ height: 1.25rem;
1536
+ width: 1.25rem;
1537
+ cursor: pointer;
1537
1538
  -webkit-appearance: none;
1538
1539
  appearance: none;
1539
- --tw-bg-opacity: 1;
1540
- background-color: rgba(255, 255, 255, var(--tw-bg-opacity));
1541
- --tw-border-opacity: 1;
1542
- border-color: rgba(107, 114, 128, var(--tw-border-opacity));
1543
1540
  border-radius: 0.75rem;
1544
- border-style: solid;
1545
1541
  border-width: 1px;
1546
- cursor: pointer;
1547
- height: 1.25rem;
1548
- margin-top: -0.5rem;
1542
+ border-style: solid;
1543
+ --tw-border-opacity: 1;
1544
+ border-color: rgba(107, 114, 128, var(--tw-border-opacity));
1545
+ --tw-bg-opacity: 1;
1546
+ background-color: rgba(255, 255, 255, var(--tw-bg-opacity));
1549
1547
  --tw-shadow: 0 0 #0000;
1550
1548
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
1551
- width: 1.25rem;
1552
1549
  }
1553
1550
 
1554
1551
  .pelcro-root
@@ -1557,65 +1554,65 @@ Add the correct display in Chrome and Safari.
1557
1554
  }
1558
1555
 
1559
1556
  .pelcro-root input[type="range"]::-moz-range-track {
1560
- background-color: hsl(var(--plc-primary-hue), var(--plc-primary-saturation), var(--plc-primary-lightness));
1557
+ width: 100%;
1558
+ cursor: pointer;
1561
1559
  border-radius: 0.375rem;
1562
1560
  border-style: none;
1563
- cursor: pointer;
1561
+ background-color: hsl(var(--plc-primary-hue), var(--plc-primary-saturation), var(--plc-primary-lightness));
1564
1562
  --tw-shadow: 0 0 #0000;
1565
1563
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
1566
- width: 100%;
1567
1564
  height: 0.375rem;
1568
1565
  }
1569
1566
 
1570
1567
  .pelcro-root input[type="range"]::-moz-range-thumb {
1571
- --tw-bg-opacity: 1;
1572
- background-color: rgba(255, 255, 255, var(--tw-bg-opacity));
1573
- --tw-border-opacity: 1;
1574
- border-color: rgba(107, 114, 128, var(--tw-border-opacity));
1568
+ margin-top: -0.5rem;
1569
+ height: 1.25rem;
1570
+ width: 1.25rem;
1571
+ cursor: pointer;
1575
1572
  border-radius: 0.75rem;
1576
- border-style: solid;
1577
1573
  border-width: 1px;
1578
- cursor: pointer;
1579
- height: 1.25rem;
1580
- margin-top: -0.5rem;
1574
+ border-style: solid;
1575
+ --tw-border-opacity: 1;
1576
+ border-color: rgba(107, 114, 128, var(--tw-border-opacity));
1577
+ --tw-bg-opacity: 1;
1578
+ background-color: rgba(255, 255, 255, var(--tw-bg-opacity));
1581
1579
  --tw-shadow: 0 0 #0000;
1582
1580
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
1583
- width: 1.25rem;
1584
1581
  }
1585
1582
 
1586
1583
  .pelcro-root input[type="range"]::-ms-track {
1587
- background-color: hsl(var(--plc-primary-hue), var(--plc-primary-saturation), var(--plc-primary-lightness));
1584
+ width: 100%;
1585
+ cursor: pointer;
1588
1586
  border-radius: 0.375rem;
1589
1587
  border-style: none;
1590
- cursor: pointer;
1588
+ background-color: hsl(var(--plc-primary-hue), var(--plc-primary-saturation), var(--plc-primary-lightness));
1591
1589
  --tw-shadow: 0 0 #0000;
1592
1590
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
1593
- width: 100%;
1594
1591
  height: 0.375rem;
1595
1592
  }
1596
1593
 
1597
1594
  .pelcro-root input[type="range"]::-ms-fill-lower, .pelcro-root input[type="range"]::-ms-fill-upper {
1598
- background-color: hsl(var(--plc-primary-hue), var(--plc-primary-saturation), var(--plc-primary-lightness));
1599
1595
  border-radius: 0.375rem;
1600
1596
  border-style: none;
1597
+ background-color: hsl(var(--plc-primary-hue), var(--plc-primary-saturation), var(--plc-primary-lightness));
1601
1598
  --tw-shadow: 0 0 #0000;
1602
1599
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
1603
1600
  }
1604
1601
 
1605
1602
  .pelcro-root input[type="range"]::-ms-thumb {
1606
- --tw-bg-opacity: 1;
1607
- background-color: rgba(255, 255, 255, var(--tw-bg-opacity));
1608
- --tw-border-opacity: 1;
1609
- border-color: rgba(107, 114, 128, var(--tw-border-opacity));
1603
+ margin-top: 1px;
1604
+ height: 1.25rem;
1605
+ width: 1.25rem;
1606
+ cursor: pointer;
1610
1607
  border-radius: 0.75rem;
1611
- border-style: solid;
1612
1608
  border-width: 1px;
1613
- cursor: pointer;
1614
- height: 1.25rem;
1615
- margin-top: 1px;
1609
+ border-style: solid;
1610
+ --tw-border-opacity: 1;
1611
+ border-color: rgba(107, 114, 128, var(--tw-border-opacity));
1612
+ --tw-bg-opacity: 1;
1613
+ background-color: rgba(255, 255, 255, var(--tw-bg-opacity));
1616
1614
  --tw-shadow: 0 0 #0000;
1617
1615
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
1618
- width: 1.25rem;
1619
1616
  }
1620
1617
 
1621
1618
  .pelcro-root input[type="range"]:focus::-ms-fill-lower, .pelcro-root input[type="range"]:focus::-ms-fill-upper {
@@ -1627,7 +1624,6 @@ Add the correct display in Chrome and Safari.
1627
1624
  }
1628
1625
 
1629
1626
  .pelcro-root .accordion-header:hover .accordion-chevron {
1630
- color: hsl(var(--plc-primary-hue), var(--plc-primary-saturation), calc(var(--plc-primary-lightness) + 10%));
1631
1627
  --tw-translate-x: 0;
1632
1628
  --tw-translate-y: 0;
1633
1629
  --tw-rotate: 0;
@@ -1637,12 +1633,60 @@ Add the correct display in Chrome and Safari.
1637
1633
  --tw-scale-y: 1;
1638
1634
  transform: translateX(var(--tw-translate-x)) translateY(var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
1639
1635
  --tw-translate-x: 0.25rem;
1636
+ color: hsl(var(--plc-primary-hue), var(--plc-primary-saturation), calc(var(--plc-primary-lightness) + 10%));
1640
1637
  }
1641
1638
 
1642
1639
  .pelcro-root .pelcro-select-plan-radio {
1643
1640
  margin-top: 0.4rem;
1644
1641
  }
1645
1642
 
1643
+ .pelcro-root .pelcro-product:before {
1644
+ content: "";
1645
+ position: absolute;
1646
+ top: 0px;
1647
+ left: 0px;
1648
+ height: 0.25rem;
1649
+ width: 100%;
1650
+ background-color: hsl(var(--plc-primary-hue), var(--plc-primary-saturation), calc(var(--plc-primary-lightness) - 30%));
1651
+ }
1652
+
1653
+ .pelcro-root .productTabs .tabs::-webkit-scrollbar {
1654
+ display: none;
1655
+ }
1656
+
1657
+ .pelcro-root .productTabs .tabs {
1658
+ -ms-overflow-style: none;
1659
+ scrollbar-width: none;
1660
+ }
1661
+
1662
+ .pelcro-root .productTabs .tabs li:first-child {
1663
+ margin-left: auto;
1664
+ }
1665
+
1666
+ .pelcro-root .productTabs .tabs li:last-child {
1667
+ margin-right: auto;
1668
+ }
1669
+
1670
+ .pelcro-root .productTabs .tabs li#activeTab button {
1671
+ color: hsl(var(--plc-primary-hue), var(--plc-primary-saturation), calc(var(--plc-primary-lightness) - 30%));
1672
+ }
1673
+
1674
+ .pelcro-root .productTabs .tabs li#activeTab:after {
1675
+ content: "";
1676
+ position: absolute;
1677
+ bottom: 0px;
1678
+ left: 0px;
1679
+ display: block;
1680
+ height: 0.25rem;
1681
+ width: 100%;
1682
+ background-color: hsl(var(--plc-primary-hue), var(--plc-primary-saturation), calc(var(--plc-primary-lightness) - 30%));
1683
+ }
1684
+
1685
+ .pelcro-root .selectedProduct img {
1686
+ max-width: 150px;
1687
+ height: auto;
1688
+ }
1689
+
1646
1690
  .pelcro-user-profile-picture:hover {
1647
1691
  filter: brightness(0.8);
1648
1692
  }
@@ -1725,289 +1769,254 @@ in order to scope selectors under pelcro-root
1725
1769
 
1726
1770
  /* utilities */
1727
1771
 
1728
- .pelcro-root .plc-space-y-2 > :not([hidden]) ~ :not([hidden]) {
1729
- --tw-space-y-reverse: 0;
1730
- margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));
1731
- margin-bottom: calc(0.5rem * var(--tw-space-y-reverse));
1772
+ .pelcro-root .plc-pointer-events-none {
1773
+ pointer-events: none;
1732
1774
  }
1733
1775
 
1734
- .pelcro-root .plc-space-x-2 > :not([hidden]) ~ :not([hidden]) {
1735
- --tw-space-x-reverse: 0;
1736
- margin-right: calc(0.5rem * var(--tw-space-x-reverse));
1737
- margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse)));
1776
+ .pelcro-root .plc-fixed {
1777
+ position: fixed;
1738
1778
  }
1739
1779
 
1740
- .pelcro-root .plc-space-x-3 > :not([hidden]) ~ :not([hidden]) {
1741
- --tw-space-x-reverse: 0;
1742
- margin-right: calc(0.75rem * var(--tw-space-x-reverse));
1743
- margin-left: calc(0.75rem * calc(1 - var(--tw-space-x-reverse)));
1780
+ .pelcro-root .plc-absolute {
1781
+ position: absolute;
1744
1782
  }
1745
1783
 
1746
- .pelcro-root .plc-space-y-4 > :not([hidden]) ~ :not([hidden]) {
1747
- --tw-space-y-reverse: 0;
1748
- margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));
1749
- margin-bottom: calc(1rem * var(--tw-space-y-reverse));
1784
+ .pelcro-root .plc-relative {
1785
+ position: relative;
1750
1786
  }
1751
1787
 
1752
- .pelcro-root .plc-appearance-none {
1753
- -webkit-appearance: none;
1754
- appearance: none;
1788
+ .pelcro-root .plc-inset-0 {
1789
+ top: 0px;
1790
+ right: 0px;
1791
+ bottom: 0px;
1792
+ left: 0px;
1755
1793
  }
1756
1794
 
1757
- .pelcro-root .plc-bg-transparent {
1758
- background-color: transparent;
1795
+ .pelcro-root .plc-inset-y-0 {
1796
+ top: 0px;
1797
+ bottom: 0px;
1759
1798
  }
1760
1799
 
1761
- .pelcro-root .plc-bg-primary-400 {
1762
- background-color: hsl(var(--plc-primary-hue), var(--plc-primary-saturation), calc(var(--plc-primary-lightness) + 10%));
1800
+ .pelcro-root .plc-top-0 {
1801
+ top: 0px;
1763
1802
  }
1764
1803
 
1765
- .pelcro-root .plc-bg-primary-500 {
1766
- background-color: hsl(var(--plc-primary-hue), var(--plc-primary-saturation), var(--plc-primary-lightness));
1804
+ .pelcro-root .plc-top-1 {
1805
+ top: 0.25rem;
1767
1806
  }
1768
1807
 
1769
- .pelcro-root .plc-bg-primary-700 {
1770
- background-color: hsl(var(--plc-primary-hue), var(--plc-primary-saturation), calc(var(--plc-primary-lightness) - 20%));
1808
+ .pelcro-root .plc-top-5 {
1809
+ top: 1.25rem;
1771
1810
  }
1772
1811
 
1773
- .pelcro-root .plc-bg-white {
1774
- --tw-bg-opacity: 1;
1775
- background-color: rgba(255, 255, 255, var(--tw-bg-opacity));
1812
+ .pelcro-root .plc-top-7 {
1813
+ top: 1.75rem;
1776
1814
  }
1777
1815
 
1778
- .pelcro-root .plc-bg-gray-50 {
1779
- --tw-bg-opacity: 1;
1780
- background-color: rgba(249, 250, 251, var(--tw-bg-opacity));
1816
+ .pelcro-root .plc-top-24 {
1817
+ top: 6rem;
1781
1818
  }
1782
1819
 
1783
- .pelcro-root .plc-bg-gray-100 {
1784
- --tw-bg-opacity: 1;
1785
- background-color: rgba(243, 244, 246, var(--tw-bg-opacity));
1820
+ .pelcro-root .plc-top-1\.5 {
1821
+ top: 0.375rem;
1786
1822
  }
1787
1823
 
1788
- .pelcro-root .plc-bg-gray-200 {
1789
- --tw-bg-opacity: 1;
1790
- background-color: rgba(229, 231, 235, var(--tw-bg-opacity));
1824
+ .pelcro-root .plc-top-1\/2 {
1825
+ top: 50%;
1791
1826
  }
1792
1827
 
1793
- .pelcro-root .plc-bg-gray-300 {
1794
- --tw-bg-opacity: 1;
1795
- background-color: rgba(209, 213, 219, var(--tw-bg-opacity));
1828
+ .pelcro-root .plc-right-0 {
1829
+ right: 0px;
1796
1830
  }
1797
1831
 
1798
- .pelcro-root .plc-bg-gray-500 {
1799
- --tw-bg-opacity: 1;
1800
- background-color: rgba(107, 114, 128, var(--tw-bg-opacity));
1832
+ .pelcro-root .plc-right-1 {
1833
+ right: 0.25rem;
1801
1834
  }
1802
1835
 
1803
- .pelcro-root .plc-bg-gray-600 {
1804
- --tw-bg-opacity: 1;
1805
- background-color: rgba(75, 85, 99, var(--tw-bg-opacity));
1836
+ .pelcro-root .plc-right-2 {
1837
+ right: 0.5rem;
1806
1838
  }
1807
1839
 
1808
- .pelcro-root .plc-bg-gray-800 {
1809
- --tw-bg-opacity: 1;
1810
- background-color: rgba(31, 41, 55, var(--tw-bg-opacity));
1840
+ .pelcro-root .plc-right-4 {
1841
+ right: 1rem;
1811
1842
  }
1812
1843
 
1813
- .pelcro-root .plc-bg-red-100 {
1814
- --tw-bg-opacity: 1;
1815
- background-color: rgba(239, 190, 188, var(--tw-bg-opacity));
1844
+ .pelcro-root .plc-right-10 {
1845
+ right: 2.5rem;
1816
1846
  }
1817
1847
 
1818
- .pelcro-root .plc-bg-red-500 {
1819
- --tw-bg-opacity: 1;
1820
- background-color: rgba(180, 48, 43, var(--tw-bg-opacity));
1848
+ .pelcro-root .plc-bottom-0 {
1849
+ bottom: 0px;
1821
1850
  }
1822
1851
 
1823
- .pelcro-root .plc-bg-yellow-100 {
1824
- --tw-bg-opacity: 1;
1825
- background-color: rgba(254, 243, 199, var(--tw-bg-opacity));
1852
+ .pelcro-root .plc-bottom-4 {
1853
+ bottom: 1rem;
1826
1854
  }
1827
1855
 
1828
- .pelcro-root .plc-bg-green-50 {
1829
- --tw-bg-opacity: 1;
1830
- background-color: rgba(236, 253, 245, var(--tw-bg-opacity));
1856
+ .pelcro-root .plc-left-0 {
1857
+ left: 0px;
1831
1858
  }
1832
1859
 
1833
- .pelcro-root .plc-bg-green-100 {
1834
- --tw-bg-opacity: 1;
1835
- background-color: rgba(209, 250, 229, var(--tw-bg-opacity));
1860
+ .pelcro-root .plc-left-5 {
1861
+ left: 1.25rem;
1836
1862
  }
1837
1863
 
1838
- .pelcro-root .plc-bg-blue-100 {
1839
- --tw-bg-opacity: 1;
1840
- background-color: rgba(219, 234, 254, var(--tw-bg-opacity));
1841
- }
1842
-
1843
- .pelcro-root .plc-bg-orange-100 {
1844
- --tw-bg-opacity: 1;
1845
- background-color: rgba(255, 237, 213, var(--tw-bg-opacity));
1846
- }
1847
-
1848
- .pelcro-root .hover\:plc-bg-transparent:hover {
1849
- background-color: transparent;
1864
+ .pelcro-root .plc-z-max {
1865
+ z-index: 999999;
1850
1866
  }
1851
1867
 
1852
- .pelcro-root .hover\:plc-bg-primary-600:hover {
1853
- background-color: hsl(var(--plc-primary-hue), var(--plc-primary-saturation), calc(var(--plc-primary-lightness) - 10%));
1868
+ .pelcro-root .plc-order-1 {
1869
+ order: 1;
1854
1870
  }
1855
1871
 
1856
- .pelcro-root .hover\:plc-bg-white:hover {
1857
- --tw-bg-opacity: 1;
1858
- background-color: rgba(255, 255, 255, var(--tw-bg-opacity));
1872
+ .pelcro-root .plc-order-2 {
1873
+ order: 2;
1859
1874
  }
1860
1875
 
1861
- .pelcro-root .hover\:plc-bg-gray-50:hover {
1862
- --tw-bg-opacity: 1;
1863
- background-color: rgba(249, 250, 251, var(--tw-bg-opacity));
1876
+ .pelcro-root .plc-m-0 {
1877
+ margin: 0px;
1864
1878
  }
1865
1879
 
1866
- .pelcro-root .hover\:plc-bg-gray-100:hover {
1867
- --tw-bg-opacity: 1;
1868
- background-color: rgba(243, 244, 246, var(--tw-bg-opacity));
1880
+ .pelcro-root .plc-m-3 {
1881
+ margin: 0.75rem;
1869
1882
  }
1870
1883
 
1871
- .pelcro-root .hover\:plc-bg-gray-200:hover {
1872
- --tw-bg-opacity: 1;
1873
- background-color: rgba(229, 231, 235, var(--tw-bg-opacity));
1884
+ .pelcro-root .plc-m-auto {
1885
+ margin: auto;
1874
1886
  }
1875
1887
 
1876
- .pelcro-root .hover\:plc-bg-gray-600:hover {
1877
- --tw-bg-opacity: 1;
1878
- background-color: rgba(75, 85, 99, var(--tw-bg-opacity));
1888
+ .pelcro-root .plc-mx-4 {
1889
+ margin-left: 1rem;
1890
+ margin-right: 1rem;
1879
1891
  }
1880
1892
 
1881
- .pelcro-root .hover\:plc-bg-gray-900:hover {
1882
- --tw-bg-opacity: 1;
1883
- background-color: rgba(17, 24, 39, var(--tw-bg-opacity));
1893
+ .pelcro-root .plc-mx-auto {
1894
+ margin-left: auto;
1895
+ margin-right: auto;
1884
1896
  }
1885
1897
 
1886
- .pelcro-root .hover\:plc-bg-red-600:hover {
1887
- --tw-bg-opacity: 1;
1888
- background-color: rgba(139, 37, 33, var(--tw-bg-opacity));
1898
+ .pelcro-root .plc-my-2 {
1899
+ margin-top: 0.5rem;
1900
+ margin-bottom: 0.5rem;
1889
1901
  }
1890
1902
 
1891
- .pelcro-root .focus\:plc-bg-transparent:focus {
1892
- background-color: transparent;
1903
+ .pelcro-root .plc-my-4 {
1904
+ margin-top: 1rem;
1905
+ margin-bottom: 1rem;
1893
1906
  }
1894
1907
 
1895
- .pelcro-root .focus\:plc-bg-primary-600:focus {
1896
- background-color: hsl(var(--plc-primary-hue), var(--plc-primary-saturation), calc(var(--plc-primary-lightness) - 10%));
1908
+ .pelcro-root .plc-my-5 {
1909
+ margin-top: 1.25rem;
1910
+ margin-bottom: 1.25rem;
1897
1911
  }
1898
1912
 
1899
- .pelcro-root .disabled\:plc-bg-gray-400:disabled {
1900
- --tw-bg-opacity: 1;
1901
- background-color: rgba(156, 163, 175, var(--tw-bg-opacity));
1913
+ .pelcro-root .plc-my-20 {
1914
+ margin-top: 5rem;
1915
+ margin-bottom: 5rem;
1902
1916
  }
1903
1917
 
1904
- .pelcro-root .plc-border-transparent {
1905
- border-color: transparent;
1918
+ .pelcro-root .plc-mt-1 {
1919
+ margin-top: 0.25rem;
1906
1920
  }
1907
1921
 
1908
- .pelcro-root .plc-border-primary-300 {
1909
- border-color: hsl(var(--plc-primary-hue), var(--plc-primary-saturation), calc(var(--plc-primary-lightness) + 20%));
1922
+ .pelcro-root .plc-mt-2 {
1923
+ margin-top: 0.5rem;
1910
1924
  }
1911
1925
 
1912
- .pelcro-root .plc-border-primary-400 {
1913
- border-color: hsl(var(--plc-primary-hue), var(--plc-primary-saturation), calc(var(--plc-primary-lightness) + 10%));
1926
+ .pelcro-root .plc-mt-3 {
1927
+ margin-top: 0.75rem;
1914
1928
  }
1915
1929
 
1916
- .pelcro-root .plc-border-primary-500 {
1917
- border-color: hsl(var(--plc-primary-hue), var(--plc-primary-saturation), var(--plc-primary-lightness));
1930
+ .pelcro-root .plc-mt-4 {
1931
+ margin-top: 1rem;
1918
1932
  }
1919
1933
 
1920
- .pelcro-root .plc-border-white {
1921
- --tw-border-opacity: 1;
1922
- border-color: rgba(255, 255, 255, var(--tw-border-opacity));
1934
+ .pelcro-root .plc-mt-5 {
1935
+ margin-top: 1.25rem;
1923
1936
  }
1924
1937
 
1925
- .pelcro-root .plc-border-gray-200 {
1926
- --tw-border-opacity: 1;
1927
- border-color: rgba(229, 231, 235, var(--tw-border-opacity));
1938
+ .pelcro-root .plc-mt-6 {
1939
+ margin-top: 1.5rem;
1928
1940
  }
1929
1941
 
1930
- .pelcro-root .plc-border-gray-300 {
1931
- --tw-border-opacity: 1;
1932
- border-color: rgba(209, 213, 219, var(--tw-border-opacity));
1942
+ .pelcro-root .plc-mt-8 {
1943
+ margin-top: 2rem;
1933
1944
  }
1934
1945
 
1935
- .pelcro-root .plc-border-gray-400 {
1936
- --tw-border-opacity: 1;
1937
- border-color: rgba(156, 163, 175, var(--tw-border-opacity));
1946
+ .pelcro-root .plc-mt-auto {
1947
+ margin-top: auto;
1938
1948
  }
1939
1949
 
1940
- .pelcro-root .plc-border-green-400 {
1941
- --tw-border-opacity: 1;
1942
- border-color: rgba(52, 211, 153, var(--tw-border-opacity));
1950
+ .pelcro-root .plc--mt-8 {
1951
+ margin-top: -2rem;
1943
1952
  }
1944
1953
 
1945
- .pelcro-root .plc-rounded-none {
1946
- border-radius: 0px;
1954
+ .pelcro-root .plc-mr-1 {
1955
+ margin-right: 0.25rem;
1947
1956
  }
1948
1957
 
1949
- .pelcro-root .plc-rounded-sm {
1950
- border-radius: 0.125rem;
1958
+ .pelcro-root .plc-mr-2 {
1959
+ margin-right: 0.5rem;
1951
1960
  }
1952
1961
 
1953
- .pelcro-root .plc-rounded {
1954
- border-radius: 0.25rem;
1962
+ .pelcro-root .plc-mr-6 {
1963
+ margin-right: 1.5rem;
1955
1964
  }
1956
1965
 
1957
- .pelcro-root .plc-rounded-md {
1958
- border-radius: 0.375rem;
1966
+ .pelcro-root .plc-mb-1 {
1967
+ margin-bottom: 0.25rem;
1959
1968
  }
1960
1969
 
1961
- .pelcro-root .plc-rounded-lg {
1962
- border-radius: 0.5rem;
1970
+ .pelcro-root .plc-mb-2 {
1971
+ margin-bottom: 0.5rem;
1963
1972
  }
1964
1973
 
1965
- .pelcro-root .plc-rounded-3xl {
1966
- border-radius: 1.5rem;
1974
+ .pelcro-root .plc-mb-3 {
1975
+ margin-bottom: 0.75rem;
1967
1976
  }
1968
1977
 
1969
- .pelcro-root .plc-rounded-full {
1970
- border-radius: 9999px;
1978
+ .pelcro-root .plc-mb-4 {
1979
+ margin-bottom: 1rem;
1971
1980
  }
1972
1981
 
1973
- .pelcro-root .plc-border-solid {
1974
- border-style: solid;
1982
+ .pelcro-root .plc-mb-6 {
1983
+ margin-bottom: 1.5rem;
1975
1984
  }
1976
1985
 
1977
- .pelcro-root .plc-border-0 {
1978
- border-width: 0px;
1986
+ .pelcro-root .plc-mb-8 {
1987
+ margin-bottom: 2rem;
1979
1988
  }
1980
1989
 
1981
- .pelcro-root .plc-border-2 {
1982
- border-width: 2px;
1990
+ .pelcro-root .plc-mb-9 {
1991
+ margin-bottom: 2.25rem;
1983
1992
  }
1984
1993
 
1985
- .pelcro-root .plc-border {
1986
- border-width: 1px;
1994
+ .pelcro-root .plc-ml-0 {
1995
+ margin-left: 0px;
1987
1996
  }
1988
1997
 
1989
- .pelcro-root .plc-border-l-2 {
1990
- border-left-width: 2px;
1998
+ .pelcro-root .plc-ml-1 {
1999
+ margin-left: 0.25rem;
1991
2000
  }
1992
2001
 
1993
- .pelcro-root .plc-border-t-4 {
1994
- border-top-width: 4px;
2002
+ .pelcro-root .plc-ml-2 {
2003
+ margin-left: 0.5rem;
1995
2004
  }
1996
2005
 
1997
- .pelcro-root .plc-border-t-8 {
1998
- border-top-width: 8px;
2006
+ .pelcro-root .plc-ml-3 {
2007
+ margin-left: 0.75rem;
1999
2008
  }
2000
2009
 
2001
- .pelcro-root .plc-border-t {
2002
- border-top-width: 1px;
2010
+ .pelcro-root .plc-ml-4 {
2011
+ margin-left: 1rem;
2003
2012
  }
2004
2013
 
2005
- .pelcro-root .plc-cursor-default {
2006
- cursor: default;
2014
+ .pelcro-root .plc--ml-2 {
2015
+ margin-left: -0.5rem;
2007
2016
  }
2008
2017
 
2009
- .pelcro-root .plc-cursor-pointer {
2010
- cursor: pointer;
2018
+ .pelcro-root .last\:plc-mb-0:last-child {
2019
+ margin-bottom: 0px;
2011
2020
  }
2012
2021
 
2013
2022
  .pelcro-root .plc-block {
@@ -2034,86 +2043,6 @@ in order to scope selectors under pelcro-root
2034
2043
  display: none;
2035
2044
  }
2036
2045
 
2037
- .pelcro-root .plc-flex-row-reverse {
2038
- flex-direction: row-reverse;
2039
- }
2040
-
2041
- .pelcro-root .plc-flex-col {
2042
- flex-direction: column;
2043
- }
2044
-
2045
- .pelcro-root .plc-flex-wrap {
2046
- flex-wrap: wrap;
2047
- }
2048
-
2049
- .pelcro-root .plc-place-items-center {
2050
- place-items: center;
2051
- }
2052
-
2053
- .pelcro-root .plc-items-start {
2054
- align-items: flex-start;
2055
- }
2056
-
2057
- .pelcro-root .plc-items-end {
2058
- align-items: flex-end;
2059
- }
2060
-
2061
- .pelcro-root .plc-items-center {
2062
- align-items: center;
2063
- }
2064
-
2065
- .pelcro-root .plc-self-start {
2066
- align-self: flex-start;
2067
- }
2068
-
2069
- .pelcro-root .plc-justify-items-center {
2070
- justify-items: center;
2071
- }
2072
-
2073
- .pelcro-root .plc-justify-start {
2074
- justify-content: flex-start;
2075
- }
2076
-
2077
- .pelcro-root .plc-justify-end {
2078
- justify-content: flex-end;
2079
- }
2080
-
2081
- .pelcro-root .plc-justify-center {
2082
- justify-content: center;
2083
- }
2084
-
2085
- .pelcro-root .plc-justify-between {
2086
- justify-content: space-between;
2087
- }
2088
-
2089
- .pelcro-root .plc-justify-evenly {
2090
- justify-content: space-evenly;
2091
- }
2092
-
2093
- .pelcro-root .plc-flex-grow {
2094
- flex-grow: 1;
2095
- }
2096
-
2097
- .pelcro-root .plc-flex-shrink-0 {
2098
- flex-shrink: 0;
2099
- }
2100
-
2101
- .pelcro-root .plc-font-thin {
2102
- font-weight: 100;
2103
- }
2104
-
2105
- .pelcro-root .plc-font-normal {
2106
- font-weight: 400;
2107
- }
2108
-
2109
- .pelcro-root .plc-font-semibold {
2110
- font-weight: 600;
2111
- }
2112
-
2113
- .pelcro-root .plc-font-bold {
2114
- font-weight: 700;
2115
- }
2116
-
2117
2046
  .pelcro-root .plc-h-4 {
2118
2047
  height: 1rem;
2119
2048
  }
@@ -2146,16 +2075,12 @@ in order to scope selectors under pelcro-root
2146
2075
  height: 3rem;
2147
2076
  }
2148
2077
 
2149
- .pelcro-root .plc-h-14 {
2150
- height: 3.5rem;
2151
- }
2152
-
2153
2078
  .pelcro-root .plc-h-20 {
2154
2079
  height: 5rem;
2155
2080
  }
2156
2081
 
2157
- .pelcro-root .plc-h-24 {
2158
- height: 6rem;
2082
+ .pelcro-root .plc-h-28 {
2083
+ height: 7rem;
2159
2084
  }
2160
2085
 
2161
2086
  .pelcro-root .plc-h-32 {
@@ -2178,1021 +2103,1576 @@ in order to scope selectors under pelcro-root
2178
2103
  height: 100%;
2179
2104
  }
2180
2105
 
2181
- .pelcro-root .plc-text-xs {
2182
- font-size: 0.75rem;
2183
- line-height: 1rem;
2106
+ .pelcro-root .plc-max-h-0 {
2107
+ max-height: 0px;
2184
2108
  }
2185
2109
 
2186
- .pelcro-root .plc-text-sm {
2187
- font-size: 0.875rem;
2188
- line-height: 1.25rem;
2110
+ .pelcro-root .plc-max-h-14 {
2111
+ max-height: 3.5rem;
2189
2112
  }
2190
2113
 
2191
- .pelcro-root .plc-text-base {
2192
- font-size: 1rem;
2193
- line-height: 1.5rem;
2114
+ .pelcro-root .plc-max-h-80 {
2115
+ max-height: 20rem;
2194
2116
  }
2195
2117
 
2196
- .pelcro-root .plc-text-lg {
2197
- font-size: 1.125rem;
2198
- line-height: 1.75rem;
2118
+ .pelcro-root .plc-max-h-full {
2119
+ max-height: 100%;
2199
2120
  }
2200
2121
 
2201
- .pelcro-root .plc-text-xl {
2202
- font-size: 1.25rem;
2203
- line-height: 1.75rem;
2122
+ .pelcro-root .plc-min-h-12 {
2123
+ min-height: 3rem;
2204
2124
  }
2205
2125
 
2206
- .pelcro-root .plc-text-2xl {
2207
- font-size: 1.5rem;
2208
- line-height: 2rem;
2126
+ .pelcro-root .plc-w-3 {
2127
+ width: 0.75rem;
2209
2128
  }
2210
2129
 
2211
- .pelcro-root .plc-text-3xl {
2212
- font-size: 1.875rem;
2213
- line-height: 2.25rem;
2130
+ .pelcro-root .plc-w-4 {
2131
+ width: 1rem;
2214
2132
  }
2215
2133
 
2216
- .pelcro-root .plc-m-0 {
2217
- margin: 0px;
2134
+ .pelcro-root .plc-w-5 {
2135
+ width: 1.25rem;
2218
2136
  }
2219
2137
 
2220
- .pelcro-root .plc-m-3 {
2221
- margin: 0.75rem;
2138
+ .pelcro-root .plc-w-6 {
2139
+ width: 1.5rem;
2222
2140
  }
2223
2141
 
2224
- .pelcro-root .plc-my-2 {
2225
- margin-top: 0.5rem;
2226
- margin-bottom: 0.5rem;
2142
+ .pelcro-root .plc-w-7 {
2143
+ width: 1.75rem;
2227
2144
  }
2228
2145
 
2229
- .pelcro-root .plc-mx-3 {
2230
- margin-left: 0.75rem;
2231
- margin-right: 0.75rem;
2146
+ .pelcro-root .plc-w-8 {
2147
+ width: 2rem;
2232
2148
  }
2233
2149
 
2234
- .pelcro-root .plc-my-4 {
2235
- margin-top: 1rem;
2236
- margin-bottom: 1rem;
2150
+ .pelcro-root .plc-w-9 {
2151
+ width: 2.25rem;
2237
2152
  }
2238
2153
 
2239
- .pelcro-root .plc-mx-auto {
2240
- margin-left: auto;
2241
- margin-right: auto;
2154
+ .pelcro-root .plc-w-10 {
2155
+ width: 2.5rem;
2242
2156
  }
2243
2157
 
2244
- .pelcro-root .plc-mt-1 {
2245
- margin-top: 0.25rem;
2158
+ .pelcro-root .plc-w-12 {
2159
+ width: 3rem;
2246
2160
  }
2247
2161
 
2248
- .pelcro-root .plc-mr-1 {
2249
- margin-right: 0.25rem;
2162
+ .pelcro-root .plc-w-16 {
2163
+ width: 4rem;
2250
2164
  }
2251
2165
 
2252
- .pelcro-root .plc-mb-1 {
2253
- margin-bottom: 0.25rem;
2166
+ .pelcro-root .plc-w-20 {
2167
+ width: 5rem;
2254
2168
  }
2255
2169
 
2256
- .pelcro-root .plc-ml-1 {
2257
- margin-left: 0.25rem;
2170
+ .pelcro-root .plc-w-24 {
2171
+ width: 6rem;
2258
2172
  }
2259
2173
 
2260
- .pelcro-root .plc-mt-2 {
2261
- margin-top: 0.5rem;
2174
+ .pelcro-root .plc-w-32 {
2175
+ width: 8rem;
2262
2176
  }
2263
2177
 
2264
- .pelcro-root .plc-mr-2 {
2265
- margin-right: 0.5rem;
2178
+ .pelcro-root .plc-w-36 {
2179
+ width: 9rem;
2266
2180
  }
2267
2181
 
2268
- .pelcro-root .plc-mb-2 {
2269
- margin-bottom: 0.5rem;
2182
+ .pelcro-root .plc-w-56 {
2183
+ width: 14rem;
2270
2184
  }
2271
2185
 
2272
- .pelcro-root .plc-ml-2 {
2273
- margin-left: 0.5rem;
2186
+ .pelcro-root .plc-w-auto {
2187
+ width: auto;
2274
2188
  }
2275
2189
 
2276
- .pelcro-root .plc-mt-3 {
2277
- margin-top: 0.75rem;
2190
+ .pelcro-root .plc-w-1\/2 {
2191
+ width: 50%;
2278
2192
  }
2279
2193
 
2280
- .pelcro-root .plc-mb-3 {
2281
- margin-bottom: 0.75rem;
2194
+ .pelcro-root .plc-w-1\/4 {
2195
+ width: 25%;
2282
2196
  }
2283
2197
 
2284
- .pelcro-root .plc-ml-3 {
2285
- margin-left: 0.75rem;
2198
+ .pelcro-root .plc-w-1\/5 {
2199
+ width: 20%;
2286
2200
  }
2287
2201
 
2288
- .pelcro-root .plc-mt-4 {
2289
- margin-top: 1rem;
2202
+ .pelcro-root .plc-w-2\/5 {
2203
+ width: 40%;
2290
2204
  }
2291
2205
 
2292
- .pelcro-root .plc-mb-4 {
2293
- margin-bottom: 1rem;
2206
+ .pelcro-root .plc-w-2\/12 {
2207
+ width: 16.666667%;
2294
2208
  }
2295
2209
 
2296
- .pelcro-root .plc-ml-4 {
2297
- margin-left: 1rem;
2210
+ .pelcro-root .plc-w-3\/12 {
2211
+ width: 25%;
2298
2212
  }
2299
2213
 
2300
- .pelcro-root .plc-mt-5 {
2301
- margin-top: 1.25rem;
2214
+ .pelcro-root .plc-w-4\/12 {
2215
+ width: 33.333333%;
2302
2216
  }
2303
2217
 
2304
- .pelcro-root .plc-mt-6 {
2305
- margin-top: 1.5rem;
2218
+ .pelcro-root .plc-w-5\/12 {
2219
+ width: 41.666667%;
2306
2220
  }
2307
2221
 
2308
- .pelcro-root .plc-mb-6 {
2309
- margin-bottom: 1.5rem;
2222
+ .pelcro-root .plc-w-6\/12 {
2223
+ width: 50%;
2310
2224
  }
2311
2225
 
2312
- .pelcro-root .plc-mt-auto {
2313
- margin-top: auto;
2226
+ .pelcro-root .plc-w-10\/12 {
2227
+ width: 83.333333%;
2314
2228
  }
2315
2229
 
2316
- .pelcro-root .plc-ml-auto {
2317
- margin-left: auto;
2230
+ .pelcro-root .plc-w-full {
2231
+ width: 100%;
2318
2232
  }
2319
2233
 
2320
- .pelcro-root .plc--ml-2 {
2321
- margin-left: -0.5rem;
2234
+ .pelcro-root .plc-w-max {
2235
+ width: max-content;
2322
2236
  }
2323
2237
 
2324
- .pelcro-root .plc--mt-8 {
2325
- margin-top: -2rem;
2238
+ .pelcro-root .plc-max-w-50\% {
2239
+ max-width: 50%;
2326
2240
  }
2327
2241
 
2328
- .pelcro-root .plc-max-h-0 {
2329
- max-height: 0px;
2242
+ .pelcro-root .plc-max-w-80\% {
2243
+ max-width: 80%;
2330
2244
  }
2331
2245
 
2332
- .pelcro-root .plc-max-h-14 {
2333
- max-height: 3.5rem;
2246
+ .pelcro-root .plc-max-w-90\% {
2247
+ max-width: 90%;
2334
2248
  }
2335
2249
 
2336
- .pelcro-root .plc-max-h-72 {
2337
- max-height: 18rem;
2250
+ .pelcro-root .plc-flex-1 {
2251
+ flex: 1 1 0%;
2338
2252
  }
2339
2253
 
2340
- .pelcro-root .plc-max-h-80 {
2341
- max-height: 20rem;
2254
+ .pelcro-root .plc-flex-shrink-0 {
2255
+ flex-shrink: 0;
2342
2256
  }
2343
2257
 
2344
- .pelcro-root .plc-max-w-xs {
2345
- max-width: 20rem;
2258
+ .pelcro-root .plc-flex-grow {
2259
+ flex-grow: 1;
2346
2260
  }
2347
2261
 
2348
- .pelcro-root .plc-max-w-xl {
2349
- max-width: 36rem;
2262
+ .pelcro-root .plc-table-fixed {
2263
+ table-layout: fixed;
2350
2264
  }
2351
2265
 
2352
- .pelcro-root .plc-min-h-12 {
2353
- min-height: 3rem;
2266
+ .pelcro-root .plc-origin-right {
2267
+ transform-origin: right;
2354
2268
  }
2355
2269
 
2356
- .pelcro-root .plc-min-h-40 {
2357
- min-height: 10rem;
2270
+ .pelcro-root .plc-transform {
2271
+ --tw-translate-x: 0;
2272
+ --tw-translate-y: 0;
2273
+ --tw-rotate: 0;
2274
+ --tw-skew-x: 0;
2275
+ --tw-skew-y: 0;
2276
+ --tw-scale-x: 1;
2277
+ --tw-scale-y: 1;
2278
+ transform: translateX(var(--tw-translate-x)) translateY(var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
2358
2279
  }
2359
2280
 
2360
- .pelcro-root .plc-object-contain {
2361
- object-fit: contain;
2281
+ .pelcro-root .plc-translate-x-0 {
2282
+ --tw-translate-x: 0px;
2362
2283
  }
2363
2284
 
2364
- .pelcro-root .plc-outline-none {
2365
- outline: 2px solid transparent;
2366
- outline-offset: 2px;
2285
+ .pelcro-root .plc--translate-x-full {
2286
+ --tw-translate-x: -100%;
2367
2287
  }
2368
2288
 
2369
- .pelcro-root .focus\:plc-outline-none:focus {
2370
- outline: 2px solid transparent;
2371
- outline-offset: 2px;
2289
+ .pelcro-root .plc--translate-y-1\/2 {
2290
+ --tw-translate-y: -50%;
2372
2291
  }
2373
2292
 
2374
- .pelcro-root .plc-overflow-auto {
2375
- overflow: auto;
2293
+ .pelcro-root .plc-group:hover .group-hover\:plc-translate-x-1 {
2294
+ --tw-translate-x: 0.25rem;
2376
2295
  }
2377
2296
 
2378
- .pelcro-root .plc-overflow-y-auto {
2379
- overflow-y: auto;
2297
+ .pelcro-root .plc-rotate-90 {
2298
+ --tw-rotate: 90deg;
2380
2299
  }
2381
2300
 
2382
- .pelcro-root .plc-overflow-y-scroll {
2383
- overflow-y: scroll;
2301
+ .pelcro-root .plc-rotate-180 {
2302
+ --tw-rotate: 180deg;
2384
2303
  }
2385
2304
 
2386
- .pelcro-root .plc-p-1 {
2387
- padding: 0.25rem;
2305
+ .pelcro-root .plc-scale-120 {
2306
+ --tw-scale-x: 1.2;
2307
+ --tw-scale-y: 1.2;
2388
2308
  }
2389
2309
 
2390
- .pelcro-root .plc-p-2 {
2391
- padding: 0.5rem;
2310
+ .pelcro-root .plc-scale-x-0 {
2311
+ --tw-scale-x: 0;
2392
2312
  }
2393
2313
 
2394
- .pelcro-root .plc-p-3 {
2395
- padding: 0.75rem;
2314
+ .pelcro-root .plc-scale-x-100 {
2315
+ --tw-scale-x: 1;
2396
2316
  }
2397
2317
 
2398
- .pelcro-root .plc-p-4 {
2399
- padding: 1rem;
2318
+ @keyframes plc-spin {
2319
+ to {
2320
+ transform: rotate(360deg);
2321
+ }
2400
2322
  }
2401
2323
 
2402
- .pelcro-root .plc-p-5 {
2403
- padding: 1.25rem;
2324
+ @keyframes plc-ping {
2325
+ 75%, 100% {
2326
+ transform: scale(2);
2327
+ opacity: 0;
2328
+ }
2404
2329
  }
2405
2330
 
2406
- .pelcro-root .plc-py-1 {
2407
- padding-top: 0.25rem;
2408
- padding-bottom: 0.25rem;
2331
+ @keyframes plc-pulse {
2332
+ 50% {
2333
+ opacity: .5;
2334
+ }
2409
2335
  }
2410
2336
 
2411
- .pelcro-root .plc-px-1 {
2412
- padding-left: 0.25rem;
2413
- padding-right: 0.25rem;
2414
- }
2337
+ @keyframes plc-bounce {
2338
+ 0%, 100% {
2339
+ transform: translateY(-25%);
2340
+ animation-timing-function: cubic-bezier(0.8,0,1,1);
2341
+ }
2415
2342
 
2416
- .pelcro-root .plc-py-2 {
2417
- padding-top: 0.5rem;
2418
- padding-bottom: 0.5rem;
2343
+ 50% {
2344
+ transform: none;
2345
+ animation-timing-function: cubic-bezier(0,0,0.2,1);
2346
+ }
2419
2347
  }
2420
2348
 
2421
- .pelcro-root .plc-px-2 {
2422
- padding-left: 0.5rem;
2423
- padding-right: 0.5rem;
2349
+ @keyframes plc-slideInBottom {
2350
+ 0% {
2351
+ transform: translateY(1000px);
2352
+ opacity: 0;
2353
+ }
2354
+
2355
+ 100% {
2356
+ transform: translateY(0);
2357
+ opacity: 1;
2358
+ }
2424
2359
  }
2425
2360
 
2426
- .pelcro-root .plc-py-3 {
2427
- padding-top: 0.75rem;
2428
- padding-bottom: 0.75rem;
2361
+ .pelcro-root .plc-animate-spin {
2362
+ animation: plc-spin 1s linear infinite;
2429
2363
  }
2430
2364
 
2431
- .pelcro-root .plc-px-3 {
2432
- padding-left: 0.75rem;
2433
- padding-right: 0.75rem;
2365
+ @media (prefers-reduced-motion: no-preference) {
2366
+ .pelcro-root .motion-safe\:plc-animate-slideInBottom {
2367
+ animation: plc-slideInBottom 0.5s ease-out;
2368
+ }
2434
2369
  }
2435
2370
 
2436
- .pelcro-root .plc-py-4 {
2437
- padding-top: 1rem;
2438
- padding-bottom: 1rem;
2371
+ .pelcro-root .plc-cursor-default {
2372
+ cursor: default;
2439
2373
  }
2440
2374
 
2441
- .pelcro-root .plc-px-4 {
2442
- padding-left: 1rem;
2443
- padding-right: 1rem;
2375
+ .pelcro-root .plc-cursor-pointer {
2376
+ cursor: pointer;
2444
2377
  }
2445
2378
 
2446
- .pelcro-root .plc-px-5 {
2447
- padding-left: 1.25rem;
2448
- padding-right: 1.25rem;
2379
+ .pelcro-root .plc-select-none {
2380
+ -webkit-user-select: none;
2381
+ user-select: none;
2449
2382
  }
2450
2383
 
2451
- .pelcro-root .plc-px-6 {
2452
- padding-left: 1.5rem;
2453
- padding-right: 1.5rem;
2384
+ .pelcro-root .plc-appearance-none {
2385
+ -webkit-appearance: none;
2386
+ appearance: none;
2454
2387
  }
2455
2388
 
2456
- .pelcro-root .plc-pt-1 {
2457
- padding-top: 0.25rem;
2389
+ .pelcro-root .plc-flex-row-reverse {
2390
+ flex-direction: row-reverse;
2458
2391
  }
2459
2392
 
2460
- .pelcro-root .plc-pr-1 {
2461
- padding-right: 0.25rem;
2393
+ .pelcro-root .plc-flex-col {
2394
+ flex-direction: column;
2462
2395
  }
2463
2396
 
2464
- .pelcro-root .plc-pt-2 {
2465
- padding-top: 0.5rem;
2397
+ .pelcro-root .plc-flex-wrap {
2398
+ flex-wrap: wrap;
2466
2399
  }
2467
2400
 
2468
- .pelcro-root .plc-pr-2 {
2469
- padding-right: 0.5rem;
2401
+ .pelcro-root .plc-place-items-center {
2402
+ place-items: center;
2470
2403
  }
2471
2404
 
2472
- .pelcro-root .plc-pl-2 {
2473
- padding-left: 0.5rem;
2405
+ .pelcro-root .plc-items-start {
2406
+ align-items: flex-start;
2474
2407
  }
2475
2408
 
2476
- .pelcro-root .plc-pr-4 {
2477
- padding-right: 1rem;
2409
+ .pelcro-root .plc-items-end {
2410
+ align-items: flex-end;
2478
2411
  }
2479
2412
 
2480
- .pelcro-root .plc-pl-4 {
2481
- padding-left: 1rem;
2413
+ .pelcro-root .plc-items-center {
2414
+ align-items: center;
2482
2415
  }
2483
2416
 
2484
- .pelcro-root .plc-pointer-events-none {
2485
- pointer-events: none;
2417
+ .pelcro-root .plc-items-stretch {
2418
+ align-items: stretch;
2486
2419
  }
2487
2420
 
2488
- .pelcro-root .plc-fixed {
2489
- position: fixed;
2421
+ .pelcro-root .plc-justify-end {
2422
+ justify-content: flex-end;
2490
2423
  }
2491
2424
 
2492
- .pelcro-root .plc-absolute {
2493
- position: absolute;
2425
+ .pelcro-root .plc-justify-center {
2426
+ justify-content: center;
2494
2427
  }
2495
2428
 
2496
- .pelcro-root .plc-relative {
2497
- position: relative;
2429
+ .pelcro-root .plc-justify-between {
2430
+ justify-content: space-between;
2498
2431
  }
2499
2432
 
2500
- .pelcro-root .plc-inset-0 {
2501
- top: 0px;
2502
- right: 0px;
2503
- bottom: 0px;
2504
- left: 0px;
2433
+ .pelcro-root .plc-justify-evenly {
2434
+ justify-content: space-evenly;
2505
2435
  }
2506
2436
 
2507
- .pelcro-root .plc-inset-y-0 {
2508
- top: 0px;
2509
- bottom: 0px;
2437
+ .pelcro-root .plc-justify-items-center {
2438
+ justify-items: center;
2510
2439
  }
2511
2440
 
2512
- .pelcro-root .plc-top-0 {
2513
- top: 0px;
2441
+ .pelcro-root .plc-gap-x-3 {
2442
+ column-gap: 0.75rem;
2514
2443
  }
2515
2444
 
2516
- .pelcro-root .plc-right-0 {
2517
- right: 0px;
2445
+ .pelcro-root .plc-gap-y-2 {
2446
+ row-gap: 0.5rem;
2518
2447
  }
2519
2448
 
2520
- .pelcro-root .plc-bottom-0 {
2521
- bottom: 0px;
2449
+ .pelcro-root .plc-gap-y-5 {
2450
+ row-gap: 1.25rem;
2522
2451
  }
2523
2452
 
2524
- .pelcro-root .plc-right-1 {
2525
- right: 0.25rem;
2453
+ .pelcro-root .plc-space-x-2 > :not([hidden]) ~ :not([hidden]) {
2454
+ --tw-space-x-reverse: 0;
2455
+ margin-right: calc(0.5rem * var(--tw-space-x-reverse));
2456
+ margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse)));
2526
2457
  }
2527
2458
 
2528
- .pelcro-root .plc-right-2 {
2529
- right: 0.5rem;
2459
+ .pelcro-root .plc-space-x-3 > :not([hidden]) ~ :not([hidden]) {
2460
+ --tw-space-x-reverse: 0;
2461
+ margin-right: calc(0.75rem * var(--tw-space-x-reverse));
2462
+ margin-left: calc(0.75rem * calc(1 - var(--tw-space-x-reverse)));
2530
2463
  }
2531
2464
 
2532
- .pelcro-root .plc-right-4 {
2533
- right: 1rem;
2465
+ .pelcro-root .plc-space-y-2 > :not([hidden]) ~ :not([hidden]) {
2466
+ --tw-space-y-reverse: 0;
2467
+ margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));
2468
+ margin-bottom: calc(0.5rem * var(--tw-space-y-reverse));
2534
2469
  }
2535
2470
 
2536
- .pelcro-root .plc-bottom-4 {
2537
- bottom: 1rem;
2471
+ .pelcro-root .plc-space-y-4 > :not([hidden]) ~ :not([hidden]) {
2472
+ --tw-space-y-reverse: 0;
2473
+ margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));
2474
+ margin-bottom: calc(1rem * var(--tw-space-y-reverse));
2538
2475
  }
2539
2476
 
2540
- .pelcro-root .plc-top-7 {
2541
- top: 1.75rem;
2477
+ .pelcro-root .plc-overflow-auto {
2478
+ overflow: auto;
2542
2479
  }
2543
2480
 
2544
- .pelcro-root .plc-top-16 {
2545
- top: 4rem;
2481
+ .pelcro-root .plc-overflow-hidden {
2482
+ overflow: hidden;
2546
2483
  }
2547
2484
 
2548
- .pelcro-root .plc-top-24 {
2549
- top: 6rem;
2485
+ .pelcro-root .plc-overflow-x-auto {
2486
+ overflow-x: auto;
2550
2487
  }
2551
2488
 
2552
- .pelcro-root .plc--right-1 {
2553
- right: -0.25rem;
2489
+ .pelcro-root .plc-overflow-y-auto {
2490
+ overflow-y: auto;
2554
2491
  }
2555
2492
 
2556
- * {
2557
- --tw-shadow: 0 0 #0000;
2493
+ .pelcro-root .plc-overflow-y-scroll {
2494
+ overflow-y: scroll;
2558
2495
  }
2559
2496
 
2560
- .pelcro-root .plc-shadow-sm {
2561
- --tw-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
2562
- box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
2497
+ .pelcro-root .plc-truncate {
2498
+ overflow: hidden;
2499
+ text-overflow: ellipsis;
2500
+ white-space: nowrap;
2563
2501
  }
2564
2502
 
2565
- .pelcro-root .plc-shadow-md {
2566
- --tw-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
2567
- box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
2503
+ .pelcro-root .plc-whitespace-nowrap {
2504
+ white-space: nowrap;
2568
2505
  }
2569
2506
 
2570
- .pelcro-root .plc-shadow-lg {
2571
- --tw-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
2572
- box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
2507
+ .pelcro-root .plc-whitespace-pre-line {
2508
+ white-space: pre-line;
2573
2509
  }
2574
2510
 
2575
- .pelcro-root .plc-shadow-xl {
2576
- --tw-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
2577
- box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
2511
+ .pelcro-root .plc-break-words {
2512
+ overflow-wrap: break-word;
2578
2513
  }
2579
2514
 
2580
- .pelcro-root .hover\:plc-shadow-none:hover {
2581
- --tw-shadow: 0 0 #0000;
2582
- box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
2515
+ .pelcro-root .plc-rounded-none {
2516
+ border-radius: 0px;
2583
2517
  }
2584
2518
 
2585
- .pelcro-root .focus\:plc-shadow-none:focus {
2586
- --tw-shadow: 0 0 #0000;
2587
- box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
2519
+ .pelcro-root .plc-rounded-sm {
2520
+ border-radius: 0.125rem;
2588
2521
  }
2589
2522
 
2590
- * {
2591
- --tw-ring-inset: var(--tw-empty,/*!*/ /*!*/);
2592
- --tw-ring-offset-width: 0px;
2593
- --tw-ring-offset-color: #fff;
2594
- --tw-ring-color: rgba(147, 197, 253, 0.5);
2595
- --tw-ring-offset-shadow: 0 0 #0000;
2596
- --tw-ring-shadow: 0 0 #0000;
2523
+ .pelcro-root .plc-rounded {
2524
+ border-radius: 0.25rem;
2597
2525
  }
2598
2526
 
2599
- .pelcro-root .plc-ring-1 {
2600
- --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
2601
- --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
2602
- box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
2527
+ .pelcro-root .plc-rounded-md {
2528
+ border-radius: 0.375rem;
2603
2529
  }
2604
2530
 
2605
- .pelcro-root .plc-ring-2 {
2606
- --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
2607
- --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
2608
- box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
2531
+ .pelcro-root .plc-rounded-lg {
2532
+ border-radius: 0.5rem;
2609
2533
  }
2610
2534
 
2611
- .pelcro-root .focus\:plc-ring-0:focus {
2612
- --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
2613
- --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);
2614
- box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
2535
+ .pelcro-root .plc-rounded-2xl {
2536
+ border-radius: 1rem;
2615
2537
  }
2616
2538
 
2617
- .pelcro-root .focus\:plc-ring-2:focus {
2618
- --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
2619
- --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
2620
- box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
2539
+ .pelcro-root .plc-rounded-full {
2540
+ border-radius: 9999px;
2621
2541
  }
2622
2542
 
2623
- .pelcro-root .plc-ring-primary-400 {
2624
- --tw-ring-color: hsl(var(--plc-primary-hue), var(--plc-primary-saturation), calc(var(--plc-primary-lightness) + 10%));
2543
+ .pelcro-root .plc-border-0 {
2544
+ border-width: 0px;
2625
2545
  }
2626
2546
 
2627
- .pelcro-root .plc-ring-gray-200 {
2628
- --tw-ring-opacity: 1;
2629
- --tw-ring-color: rgba(229, 231, 235, var(--tw-ring-opacity));
2547
+ .pelcro-root .plc-border-2 {
2548
+ border-width: 2px;
2630
2549
  }
2631
2550
 
2632
- .pelcro-root .plc-ring-red-400 {
2633
- --tw-ring-opacity: 1;
2634
- --tw-ring-color: rgba(209, 70, 65, var(--tw-ring-opacity));
2551
+ .pelcro-root .plc-border {
2552
+ border-width: 1px;
2635
2553
  }
2636
2554
 
2637
- .pelcro-root .focus\:plc-ring-primary-300:focus {
2638
- --tw-ring-color: hsl(var(--plc-primary-hue), var(--plc-primary-saturation), calc(var(--plc-primary-lightness) + 20%));
2555
+ .pelcro-root .last\:plc-border-0:last-child {
2556
+ border-width: 0px;
2639
2557
  }
2640
2558
 
2641
- .pelcro-root .focus\:plc-ring-red-500:focus {
2642
- --tw-ring-opacity: 1;
2643
- --tw-ring-color: rgba(180, 48, 43, var(--tw-ring-opacity));
2559
+ .pelcro-root .plc-border-t-2 {
2560
+ border-top-width: 2px;
2644
2561
  }
2645
2562
 
2646
- .pelcro-root .focus\:plc-ring-green-300:focus {
2647
- --tw-ring-opacity: 1;
2648
- --tw-ring-color: rgba(110, 231, 183, var(--tw-ring-opacity));
2563
+ .pelcro-root .plc-border-t-4 {
2564
+ border-top-width: 4px;
2649
2565
  }
2650
2566
 
2651
- .pelcro-root .focus\:plc-ring-blue-400:focus {
2652
- --tw-ring-opacity: 1;
2653
- --tw-ring-color: rgba(96, 165, 250, var(--tw-ring-opacity));
2567
+ .pelcro-root .plc-border-t-8 {
2568
+ border-top-width: 8px;
2654
2569
  }
2655
2570
 
2656
- .pelcro-root .focus\:plc-ring-blue-500:focus {
2657
- --tw-ring-opacity: 1;
2658
- --tw-ring-color: rgba(59, 130, 246, var(--tw-ring-opacity));
2571
+ .pelcro-root .plc-border-t {
2572
+ border-top-width: 1px;
2659
2573
  }
2660
2574
 
2661
- .pelcro-root .plc-fill-current {
2662
- fill: currentColor;
2575
+ .pelcro-root .plc-border-b-2 {
2576
+ border-bottom-width: 2px;
2663
2577
  }
2664
2578
 
2665
- .pelcro-root .plc-table-fixed {
2666
- table-layout: fixed;
2579
+ .pelcro-root .plc-border-b {
2580
+ border-bottom-width: 1px;
2667
2581
  }
2668
2582
 
2669
- .pelcro-root .plc-text-left {
2670
- text-align: left;
2583
+ .pelcro-root .plc-border-l-2 {
2584
+ border-left-width: 2px;
2671
2585
  }
2672
2586
 
2673
- .pelcro-root .plc-text-center {
2674
- text-align: center;
2587
+ .pelcro-root .plc-border-l-4 {
2588
+ border-left-width: 4px;
2675
2589
  }
2676
2590
 
2677
- .pelcro-root .plc-text-primary-400 {
2678
- color: hsl(var(--plc-primary-hue), var(--plc-primary-saturation), calc(var(--plc-primary-lightness) + 10%));
2591
+ .pelcro-root .plc-border-solid {
2592
+ border-style: solid;
2679
2593
  }
2680
2594
 
2681
- .pelcro-root .plc-text-primary-500 {
2682
- color: hsl(var(--plc-primary-hue), var(--plc-primary-saturation), var(--plc-primary-lightness));
2595
+ .pelcro-root .plc-border-transparent {
2596
+ border-color: transparent;
2683
2597
  }
2684
2598
 
2685
- .pelcro-root .plc-text-primary-600 {
2686
- color: hsl(var(--plc-primary-hue), var(--plc-primary-saturation), calc(var(--plc-primary-lightness) - 10%));
2599
+ .pelcro-root .plc-border-primary-300 {
2600
+ border-color: hsl(var(--plc-primary-hue), var(--plc-primary-saturation), calc(var(--plc-primary-lightness) + 20%));
2687
2601
  }
2688
2602
 
2689
- .pelcro-root .plc-text-black {
2690
- --tw-text-opacity: 1;
2691
- color: rgba(0, 0, 0, var(--tw-text-opacity));
2603
+ .pelcro-root .plc-border-primary-400 {
2604
+ border-color: hsl(var(--plc-primary-hue), var(--plc-primary-saturation), calc(var(--plc-primary-lightness) + 10%));
2692
2605
  }
2693
2606
 
2694
- .pelcro-root .plc-text-white {
2695
- --tw-text-opacity: 1;
2696
- color: rgba(255, 255, 255, var(--tw-text-opacity));
2607
+ .pelcro-root .plc-border-primary-500 {
2608
+ border-color: hsl(var(--plc-primary-hue), var(--plc-primary-saturation), var(--plc-primary-lightness));
2697
2609
  }
2698
2610
 
2699
- .pelcro-root .plc-text-gray-100 {
2700
- --tw-text-opacity: 1;
2701
- color: rgba(243, 244, 246, var(--tw-text-opacity));
2611
+ .pelcro-root .plc-border-primary-800 {
2612
+ border-color: hsl(var(--plc-primary-hue), var(--plc-primary-saturation), calc(var(--plc-primary-lightness) - 30%));
2702
2613
  }
2703
2614
 
2704
- .pelcro-root .plc-text-gray-400 {
2705
- --tw-text-opacity: 1;
2706
- color: rgba(156, 163, 175, var(--tw-text-opacity));
2615
+ .pelcro-root .plc-border-white {
2616
+ --tw-border-opacity: 1;
2617
+ border-color: rgba(255, 255, 255, var(--tw-border-opacity));
2707
2618
  }
2708
2619
 
2709
- .pelcro-root .plc-text-gray-500 {
2710
- --tw-text-opacity: 1;
2711
- color: rgba(107, 114, 128, var(--tw-text-opacity));
2620
+ .pelcro-root .plc-border-gray-200 {
2621
+ --tw-border-opacity: 1;
2622
+ border-color: rgba(229, 231, 235, var(--tw-border-opacity));
2712
2623
  }
2713
2624
 
2714
- .pelcro-root .plc-text-gray-600 {
2715
- --tw-text-opacity: 1;
2716
- color: rgba(75, 85, 99, var(--tw-text-opacity));
2625
+ .pelcro-root .plc-border-gray-300 {
2626
+ --tw-border-opacity: 1;
2627
+ border-color: rgba(209, 213, 219, var(--tw-border-opacity));
2717
2628
  }
2718
2629
 
2719
- .pelcro-root .plc-text-gray-700 {
2720
- --tw-text-opacity: 1;
2721
- color: rgba(55, 65, 81, var(--tw-text-opacity));
2630
+ .pelcro-root .plc-border-gray-400 {
2631
+ --tw-border-opacity: 1;
2632
+ border-color: rgba(156, 163, 175, var(--tw-border-opacity));
2722
2633
  }
2723
2634
 
2724
- .pelcro-root .plc-text-gray-900 {
2725
- --tw-text-opacity: 1;
2726
- color: rgba(17, 24, 39, var(--tw-text-opacity));
2635
+ .pelcro-root .plc-border-green-400 {
2636
+ --tw-border-opacity: 1;
2637
+ border-color: rgba(52, 211, 153, var(--tw-border-opacity));
2727
2638
  }
2728
2639
 
2729
- .pelcro-root .plc-text-red-500 {
2730
- --tw-text-opacity: 1;
2731
- color: rgba(180, 48, 43, var(--tw-text-opacity));
2640
+ .pelcro-root .hover\:plc-border-primary-800:hover {
2641
+ border-color: hsl(var(--plc-primary-hue), var(--plc-primary-saturation), calc(var(--plc-primary-lightness) - 30%));
2732
2642
  }
2733
2643
 
2734
- .pelcro-root .plc-text-red-700 {
2735
- --tw-text-opacity: 1;
2736
- color: rgba(98, 26, 23, var(--tw-text-opacity));
2644
+ .pelcro-root .plc-bg-transparent {
2645
+ background-color: transparent;
2737
2646
  }
2738
2647
 
2739
- .pelcro-root .plc-text-yellow-700 {
2740
- --tw-text-opacity: 1;
2741
- color: rgba(180, 83, 9, var(--tw-text-opacity));
2648
+ .pelcro-root .plc-bg-primary-200 {
2649
+ background-color: hsl(var(--plc-primary-hue), var(--plc-primary-saturation), calc(var(--plc-primary-lightness) + 30%));
2742
2650
  }
2743
2651
 
2744
- .pelcro-root .plc-text-green-400 {
2745
- --tw-text-opacity: 1;
2746
- color: rgba(52, 211, 153, var(--tw-text-opacity));
2652
+ .pelcro-root .plc-bg-primary-400 {
2653
+ background-color: hsl(var(--plc-primary-hue), var(--plc-primary-saturation), calc(var(--plc-primary-lightness) + 10%));
2747
2654
  }
2748
2655
 
2749
- .pelcro-root .plc-text-green-500 {
2750
- --tw-text-opacity: 1;
2751
- color: rgba(16, 185, 129, var(--tw-text-opacity));
2656
+ .pelcro-root .plc-bg-primary-700 {
2657
+ background-color: hsl(var(--plc-primary-hue), var(--plc-primary-saturation), calc(var(--plc-primary-lightness) - 20%));
2752
2658
  }
2753
2659
 
2754
- .pelcro-root .plc-text-green-600 {
2755
- --tw-text-opacity: 1;
2756
- color: rgba(5, 150, 105, var(--tw-text-opacity));
2660
+ .pelcro-root .plc-bg-primary-800 {
2661
+ background-color: hsl(var(--plc-primary-hue), var(--plc-primary-saturation), calc(var(--plc-primary-lightness) - 30%));
2757
2662
  }
2758
2663
 
2759
- .pelcro-root .plc-text-green-700 {
2760
- --tw-text-opacity: 1;
2761
- color: rgba(4, 120, 87, var(--tw-text-opacity));
2664
+ .pelcro-root .plc-bg-white {
2665
+ --tw-bg-opacity: 1;
2666
+ background-color: rgba(255, 255, 255, var(--tw-bg-opacity));
2762
2667
  }
2763
2668
 
2764
- .pelcro-root .plc-text-blue-400 {
2765
- --tw-text-opacity: 1;
2766
- color: rgba(96, 165, 250, var(--tw-text-opacity));
2669
+ .pelcro-root .plc-bg-gray-50 {
2670
+ --tw-bg-opacity: 1;
2671
+ background-color: rgba(249, 250, 251, var(--tw-bg-opacity));
2767
2672
  }
2768
2673
 
2769
- .pelcro-root .plc-text-blue-700 {
2770
- --tw-text-opacity: 1;
2771
- color: rgba(29, 78, 216, var(--tw-text-opacity));
2674
+ .pelcro-root .plc-bg-gray-100 {
2675
+ --tw-bg-opacity: 1;
2676
+ background-color: rgba(243, 244, 246, var(--tw-bg-opacity));
2772
2677
  }
2773
2678
 
2774
- .pelcro-root .plc-text-orange-700 {
2775
- --tw-text-opacity: 1;
2776
- color: rgba(194, 65, 12, var(--tw-text-opacity));
2679
+ .pelcro-root .plc-bg-gray-200 {
2680
+ --tw-bg-opacity: 1;
2681
+ background-color: rgba(229, 231, 235, var(--tw-bg-opacity));
2777
2682
  }
2778
2683
 
2779
- .pelcro-root .plc-group:hover .group-hover\:plc-text-primary-400 {
2780
- color: hsl(var(--plc-primary-hue), var(--plc-primary-saturation), calc(var(--plc-primary-lightness) + 10%));
2684
+ .pelcro-root .plc-bg-gray-300 {
2685
+ --tw-bg-opacity: 1;
2686
+ background-color: rgba(209, 213, 219, var(--tw-bg-opacity));
2781
2687
  }
2782
2688
 
2783
- .pelcro-root .hover\:plc-text-primary-500:hover {
2784
- color: hsl(var(--plc-primary-hue), var(--plc-primary-saturation), var(--plc-primary-lightness));
2689
+ .pelcro-root .plc-bg-gray-500 {
2690
+ --tw-bg-opacity: 1;
2691
+ background-color: rgba(107, 114, 128, var(--tw-bg-opacity));
2785
2692
  }
2786
2693
 
2787
- .pelcro-root .hover\:plc-text-primary-700:hover {
2788
- color: hsl(var(--plc-primary-hue), var(--plc-primary-saturation), calc(var(--plc-primary-lightness) - 20%));
2694
+ .pelcro-root .plc-bg-gray-600 {
2695
+ --tw-bg-opacity: 1;
2696
+ background-color: rgba(75, 85, 99, var(--tw-bg-opacity));
2789
2697
  }
2790
2698
 
2791
- .pelcro-root .hover\:plc-text-black:hover {
2792
- --tw-text-opacity: 1;
2793
- color: rgba(0, 0, 0, var(--tw-text-opacity));
2699
+ .pelcro-root .plc-bg-gray-800 {
2700
+ --tw-bg-opacity: 1;
2701
+ background-color: rgba(31, 41, 55, var(--tw-bg-opacity));
2794
2702
  }
2795
2703
 
2796
- .pelcro-root .hover\:plc-text-white:hover {
2797
- --tw-text-opacity: 1;
2798
- color: rgba(255, 255, 255, var(--tw-text-opacity));
2704
+ .pelcro-root .plc-bg-red-100 {
2705
+ --tw-bg-opacity: 1;
2706
+ background-color: rgba(239, 190, 188, var(--tw-bg-opacity));
2799
2707
  }
2800
2708
 
2801
- .pelcro-root .hover\:plc-text-gray-500:hover {
2802
- --tw-text-opacity: 1;
2803
- color: rgba(107, 114, 128, var(--tw-text-opacity));
2709
+ .pelcro-root .plc-bg-red-500 {
2710
+ --tw-bg-opacity: 1;
2711
+ background-color: rgba(180, 48, 43, var(--tw-bg-opacity));
2804
2712
  }
2805
2713
 
2806
- .pelcro-root .hover\:plc-text-gray-900:hover {
2807
- --tw-text-opacity: 1;
2808
- color: rgba(17, 24, 39, var(--tw-text-opacity));
2714
+ .pelcro-root .plc-bg-yellow-100 {
2715
+ --tw-bg-opacity: 1;
2716
+ background-color: rgba(254, 243, 199, var(--tw-bg-opacity));
2809
2717
  }
2810
2718
 
2811
- .pelcro-root .focus\:plc-text-black:focus {
2812
- --tw-text-opacity: 1;
2813
- color: rgba(0, 0, 0, var(--tw-text-opacity));
2719
+ .pelcro-root .plc-bg-green-50 {
2720
+ --tw-bg-opacity: 1;
2721
+ background-color: rgba(236, 253, 245, var(--tw-bg-opacity));
2814
2722
  }
2815
2723
 
2816
- .pelcro-root .focus\:plc-text-white:focus {
2817
- --tw-text-opacity: 1;
2818
- color: rgba(255, 255, 255, var(--tw-text-opacity));
2724
+ .pelcro-root .plc-bg-green-100 {
2725
+ --tw-bg-opacity: 1;
2726
+ background-color: rgba(209, 250, 229, var(--tw-bg-opacity));
2819
2727
  }
2820
2728
 
2821
- .pelcro-root .plc-truncate {
2822
- overflow: hidden;
2823
- text-overflow: ellipsis;
2824
- white-space: nowrap;
2729
+ .pelcro-root .plc-bg-blue-100 {
2730
+ --tw-bg-opacity: 1;
2731
+ background-color: rgba(219, 234, 254, var(--tw-bg-opacity));
2825
2732
  }
2826
2733
 
2827
- .pelcro-root .plc-uppercase {
2828
- text-transform: uppercase;
2734
+ .pelcro-root .plc-bg-orange-100 {
2735
+ --tw-bg-opacity: 1;
2736
+ background-color: rgba(255, 237, 213, var(--tw-bg-opacity));
2829
2737
  }
2830
2738
 
2831
- .pelcro-root .plc-capitalize {
2832
- text-transform: capitalize;
2739
+ .pelcro-root .hover\:plc-bg-transparent:hover {
2740
+ background-color: transparent;
2833
2741
  }
2834
2742
 
2835
- .pelcro-root .plc-underline {
2836
- text-decoration: underline;
2743
+ .pelcro-root .hover\:plc-bg-primary-600:hover {
2744
+ background-color: hsl(var(--plc-primary-hue), var(--plc-primary-saturation), calc(var(--plc-primary-lightness) - 10%));
2837
2745
  }
2838
2746
 
2839
- .pelcro-root .plc-no-underline {
2840
- text-decoration: none;
2747
+ .pelcro-root .hover\:plc-bg-white:hover {
2748
+ --tw-bg-opacity: 1;
2749
+ background-color: rgba(255, 255, 255, var(--tw-bg-opacity));
2841
2750
  }
2842
2751
 
2843
- .pelcro-root .plc-tracking-wider {
2844
- letter-spacing: 0.05em;
2752
+ .pelcro-root .hover\:plc-bg-gray-50:hover {
2753
+ --tw-bg-opacity: 1;
2754
+ background-color: rgba(249, 250, 251, var(--tw-bg-opacity));
2845
2755
  }
2846
2756
 
2847
- .pelcro-root .plc-tracking-widest {
2848
- letter-spacing: 0.1em;
2757
+ .pelcro-root .hover\:plc-bg-gray-100:hover {
2758
+ --tw-bg-opacity: 1;
2759
+ background-color: rgba(243, 244, 246, var(--tw-bg-opacity));
2849
2760
  }
2850
2761
 
2851
- .pelcro-root .plc-select-none {
2852
- -webkit-user-select: none;
2853
- user-select: none;
2762
+ .pelcro-root .hover\:plc-bg-gray-600:hover {
2763
+ --tw-bg-opacity: 1;
2764
+ background-color: rgba(75, 85, 99, var(--tw-bg-opacity));
2854
2765
  }
2855
2766
 
2856
- .pelcro-root .plc-align-top {
2857
- vertical-align: top;
2767
+ .pelcro-root .hover\:plc-bg-gray-900:hover {
2768
+ --tw-bg-opacity: 1;
2769
+ background-color: rgba(17, 24, 39, var(--tw-bg-opacity));
2858
2770
  }
2859
2771
 
2860
- .pelcro-root .plc-align-middle {
2861
- vertical-align: middle;
2772
+ .pelcro-root .hover\:plc-bg-red-600:hover {
2773
+ --tw-bg-opacity: 1;
2774
+ background-color: rgba(139, 37, 33, var(--tw-bg-opacity));
2862
2775
  }
2863
2776
 
2864
- .pelcro-root .plc-whitespace-pre-line {
2865
- white-space: pre-line;
2777
+ .pelcro-root .focus\:plc-bg-transparent:focus {
2778
+ background-color: transparent;
2866
2779
  }
2867
2780
 
2868
- .pelcro-root .plc-break-words {
2869
- overflow-wrap: break-word;
2781
+ .pelcro-root .focus\:plc-bg-primary-600:focus {
2782
+ background-color: hsl(var(--plc-primary-hue), var(--plc-primary-saturation), calc(var(--plc-primary-lightness) - 10%));
2870
2783
  }
2871
2784
 
2872
- .pelcro-root .plc-w-3 {
2873
- width: 0.75rem;
2785
+ .pelcro-root .disabled\:plc-bg-gray-400:disabled {
2786
+ --tw-bg-opacity: 1;
2787
+ background-color: rgba(156, 163, 175, var(--tw-bg-opacity));
2874
2788
  }
2875
2789
 
2876
- .pelcro-root .plc-w-4 {
2877
- width: 1rem;
2790
+ .pelcro-root .plc-fill-current {
2791
+ fill: currentColor;
2878
2792
  }
2879
2793
 
2880
- .pelcro-root .plc-w-5 {
2881
- width: 1.25rem;
2794
+ .pelcro-root .plc-object-contain {
2795
+ object-fit: contain;
2882
2796
  }
2883
2797
 
2884
- .pelcro-root .plc-w-6 {
2885
- width: 1.5rem;
2798
+ .pelcro-root .plc-object-left {
2799
+ object-position: left;
2886
2800
  }
2887
2801
 
2888
- .pelcro-root .plc-w-7 {
2889
- width: 1.75rem;
2802
+ .pelcro-root .plc-p-1 {
2803
+ padding: 0.25rem;
2890
2804
  }
2891
2805
 
2892
- .pelcro-root .plc-w-8 {
2893
- width: 2rem;
2806
+ .pelcro-root .plc-p-2 {
2807
+ padding: 0.5rem;
2894
2808
  }
2895
2809
 
2896
- .pelcro-root .plc-w-9 {
2897
- width: 2.25rem;
2810
+ .pelcro-root .plc-p-3 {
2811
+ padding: 0.75rem;
2898
2812
  }
2899
2813
 
2900
- .pelcro-root .plc-w-10 {
2901
- width: 2.5rem;
2814
+ .pelcro-root .plc-p-4 {
2815
+ padding: 1rem;
2902
2816
  }
2903
2817
 
2904
- .pelcro-root .plc-w-12 {
2905
- width: 3rem;
2818
+ .pelcro-root .plc-p-5 {
2819
+ padding: 1.25rem;
2906
2820
  }
2907
2821
 
2908
- .pelcro-root .plc-w-16 {
2909
- width: 4rem;
2822
+ .pelcro-root .plc-p-6 {
2823
+ padding: 1.5rem;
2910
2824
  }
2911
2825
 
2912
- .pelcro-root .plc-w-20 {
2913
- width: 5rem;
2826
+ .pelcro-root .plc-p-8 {
2827
+ padding: 2rem;
2914
2828
  }
2915
2829
 
2916
- .pelcro-root .plc-w-24 {
2917
- width: 6rem;
2830
+ .pelcro-root .plc-px-1 {
2831
+ padding-left: 0.25rem;
2832
+ padding-right: 0.25rem;
2918
2833
  }
2919
2834
 
2920
- .pelcro-root .plc-w-32 {
2921
- width: 8rem;
2835
+ .pelcro-root .plc-px-2 {
2836
+ padding-left: 0.5rem;
2837
+ padding-right: 0.5rem;
2922
2838
  }
2923
2839
 
2924
- .pelcro-root .plc-w-36 {
2925
- width: 9rem;
2840
+ .pelcro-root .plc-px-3 {
2841
+ padding-left: 0.75rem;
2842
+ padding-right: 0.75rem;
2926
2843
  }
2927
2844
 
2928
- .pelcro-root .plc-w-56 {
2929
- width: 14rem;
2845
+ .pelcro-root .plc-px-4 {
2846
+ padding-left: 1rem;
2847
+ padding-right: 1rem;
2930
2848
  }
2931
2849
 
2932
- .pelcro-root .plc-w-auto {
2933
- width: auto;
2850
+ .pelcro-root .plc-px-5 {
2851
+ padding-left: 1.25rem;
2852
+ padding-right: 1.25rem;
2934
2853
  }
2935
2854
 
2936
- .pelcro-root .plc-w-1\/2 {
2937
- width: 50%;
2855
+ .pelcro-root .plc-px-6 {
2856
+ padding-left: 1.5rem;
2857
+ padding-right: 1.5rem;
2938
2858
  }
2939
2859
 
2940
- .pelcro-root .plc-w-1\/4 {
2941
- width: 25%;
2860
+ .pelcro-root .plc-px-8 {
2861
+ padding-left: 2rem;
2862
+ padding-right: 2rem;
2942
2863
  }
2943
2864
 
2944
- .pelcro-root .plc-w-3\/4 {
2945
- width: 75%;
2865
+ .pelcro-root .plc-py-1 {
2866
+ padding-top: 0.25rem;
2867
+ padding-bottom: 0.25rem;
2946
2868
  }
2947
2869
 
2948
- .pelcro-root .plc-w-1\/5 {
2949
- width: 20%;
2870
+ .pelcro-root .plc-py-2 {
2871
+ padding-top: 0.5rem;
2872
+ padding-bottom: 0.5rem;
2950
2873
  }
2951
2874
 
2952
- .pelcro-root .plc-w-2\/5 {
2953
- width: 40%;
2875
+ .pelcro-root .plc-py-3 {
2876
+ padding-top: 0.75rem;
2877
+ padding-bottom: 0.75rem;
2954
2878
  }
2955
2879
 
2956
- .pelcro-root .plc-w-2\/12 {
2957
- width: 16.666667%;
2880
+ .pelcro-root .plc-py-4 {
2881
+ padding-top: 1rem;
2882
+ padding-bottom: 1rem;
2958
2883
  }
2959
2884
 
2960
- .pelcro-root .plc-w-3\/12 {
2961
- width: 25%;
2885
+ .pelcro-root .plc-py-5 {
2886
+ padding-top: 1.25rem;
2887
+ padding-bottom: 1.25rem;
2962
2888
  }
2963
2889
 
2964
- .pelcro-root .plc-w-4\/12 {
2965
- width: 33.333333%;
2890
+ .pelcro-root .plc-pt-1 {
2891
+ padding-top: 0.25rem;
2892
+ }
2893
+
2894
+ .pelcro-root .plc-pt-2 {
2895
+ padding-top: 0.5rem;
2896
+ }
2897
+
2898
+ .pelcro-root .plc-pt-4 {
2899
+ padding-top: 1rem;
2900
+ }
2901
+
2902
+ .pelcro-root .plc-pr-1 {
2903
+ padding-right: 0.25rem;
2904
+ }
2905
+
2906
+ .pelcro-root .plc-pr-2 {
2907
+ padding-right: 0.5rem;
2908
+ }
2909
+
2910
+ .pelcro-root .plc-pr-4 {
2911
+ padding-right: 1rem;
2912
+ }
2913
+
2914
+ .pelcro-root .plc-pb-4 {
2915
+ padding-bottom: 1rem;
2916
+ }
2917
+
2918
+ .pelcro-root .plc-pl-2 {
2919
+ padding-left: 0.5rem;
2966
2920
  }
2967
2921
 
2968
- .pelcro-root .plc-w-5\/12 {
2969
- width: 41.666667%;
2970
- }
2922
+ .pelcro-root .plc-pl-4 {
2923
+ padding-left: 1rem;
2924
+ }
2925
+
2926
+ .pelcro-root .plc-text-left {
2927
+ text-align: left;
2928
+ }
2929
+
2930
+ .pelcro-root .plc-text-center {
2931
+ text-align: center;
2932
+ }
2933
+
2934
+ .pelcro-root .plc-align-top {
2935
+ vertical-align: top;
2936
+ }
2937
+
2938
+ .pelcro-root .plc-align-middle {
2939
+ vertical-align: middle;
2940
+ }
2941
+
2942
+ .pelcro-root .plc-text-xs {
2943
+ font-size: 0.75rem;
2944
+ line-height: 1rem;
2945
+ }
2946
+
2947
+ .pelcro-root .plc-text-sm {
2948
+ font-size: 0.875rem;
2949
+ line-height: 1.25rem;
2950
+ }
2951
+
2952
+ .pelcro-root .plc-text-base {
2953
+ font-size: 1rem;
2954
+ line-height: 1.5rem;
2955
+ }
2956
+
2957
+ .pelcro-root .plc-text-lg {
2958
+ font-size: 1.125rem;
2959
+ line-height: 1.75rem;
2960
+ }
2961
+
2962
+ .pelcro-root .plc-text-xl {
2963
+ font-size: 1.25rem;
2964
+ line-height: 1.75rem;
2965
+ }
2966
+
2967
+ .pelcro-root .plc-text-2xl {
2968
+ font-size: 1.5rem;
2969
+ line-height: 2rem;
2970
+ }
2971
+
2972
+ .pelcro-root .plc-text-3xl {
2973
+ font-size: 1.875rem;
2974
+ line-height: 2.25rem;
2975
+ }
2976
+
2977
+ .pelcro-root .plc-text-4xl {
2978
+ font-size: 2.25rem;
2979
+ line-height: 2.5rem;
2980
+ }
2981
+
2982
+ .pelcro-root .plc-font-thin {
2983
+ font-weight: 100;
2984
+ }
2985
+
2986
+ .pelcro-root .plc-font-normal {
2987
+ font-weight: 400;
2988
+ }
2989
+
2990
+ .pelcro-root .plc-font-medium {
2991
+ font-weight: 500;
2992
+ }
2993
+
2994
+ .pelcro-root .plc-font-semibold {
2995
+ font-weight: 600;
2996
+ }
2997
+
2998
+ .pelcro-root .plc-font-bold {
2999
+ font-weight: 700;
3000
+ }
3001
+
3002
+ .pelcro-root .plc-uppercase {
3003
+ text-transform: uppercase;
3004
+ }
3005
+
3006
+ .pelcro-root .plc-capitalize {
3007
+ text-transform: capitalize;
3008
+ }
3009
+
3010
+ .pelcro-root .plc-tracking-wider {
3011
+ letter-spacing: 0.05em;
3012
+ }
3013
+
3014
+ .pelcro-root .plc-tracking-widest {
3015
+ letter-spacing: 0.1em;
3016
+ }
3017
+
3018
+ .pelcro-root .plc-text-primary-400 {
3019
+ color: hsl(var(--plc-primary-hue), var(--plc-primary-saturation), calc(var(--plc-primary-lightness) + 10%));
3020
+ }
3021
+
3022
+ .pelcro-root .plc-text-primary-500 {
3023
+ color: hsl(var(--plc-primary-hue), var(--plc-primary-saturation), var(--plc-primary-lightness));
3024
+ }
3025
+
3026
+ .pelcro-root .plc-text-primary-600 {
3027
+ color: hsl(var(--plc-primary-hue), var(--plc-primary-saturation), calc(var(--plc-primary-lightness) - 10%));
3028
+ }
3029
+
3030
+ .pelcro-root .plc-text-primary-800 {
3031
+ color: hsl(var(--plc-primary-hue), var(--plc-primary-saturation), calc(var(--plc-primary-lightness) - 30%));
3032
+ }
3033
+
3034
+ .pelcro-root .plc-text-black {
3035
+ --tw-text-opacity: 1;
3036
+ color: rgba(0, 0, 0, var(--tw-text-opacity));
3037
+ }
3038
+
3039
+ .pelcro-root .plc-text-white {
3040
+ --tw-text-opacity: 1;
3041
+ color: rgba(255, 255, 255, var(--tw-text-opacity));
3042
+ }
3043
+
3044
+ .pelcro-root .plc-text-gray-400 {
3045
+ --tw-text-opacity: 1;
3046
+ color: rgba(156, 163, 175, var(--tw-text-opacity));
3047
+ }
3048
+
3049
+ .pelcro-root .plc-text-gray-500 {
3050
+ --tw-text-opacity: 1;
3051
+ color: rgba(107, 114, 128, var(--tw-text-opacity));
3052
+ }
3053
+
3054
+ .pelcro-root .plc-text-gray-600 {
3055
+ --tw-text-opacity: 1;
3056
+ color: rgba(75, 85, 99, var(--tw-text-opacity));
3057
+ }
3058
+
3059
+ .pelcro-root .plc-text-gray-700 {
3060
+ --tw-text-opacity: 1;
3061
+ color: rgba(55, 65, 81, var(--tw-text-opacity));
3062
+ }
3063
+
3064
+ .pelcro-root .plc-text-gray-900 {
3065
+ --tw-text-opacity: 1;
3066
+ color: rgba(17, 24, 39, var(--tw-text-opacity));
3067
+ }
3068
+
3069
+ .pelcro-root .plc-text-red-500 {
3070
+ --tw-text-opacity: 1;
3071
+ color: rgba(180, 48, 43, var(--tw-text-opacity));
3072
+ }
3073
+
3074
+ .pelcro-root .plc-text-red-700 {
3075
+ --tw-text-opacity: 1;
3076
+ color: rgba(98, 26, 23, var(--tw-text-opacity));
3077
+ }
3078
+
3079
+ .pelcro-root .plc-text-yellow-700 {
3080
+ --tw-text-opacity: 1;
3081
+ color: rgba(180, 83, 9, var(--tw-text-opacity));
3082
+ }
3083
+
3084
+ .pelcro-root .plc-text-green-400 {
3085
+ --tw-text-opacity: 1;
3086
+ color: rgba(52, 211, 153, var(--tw-text-opacity));
3087
+ }
3088
+
3089
+ .pelcro-root .plc-text-green-500 {
3090
+ --tw-text-opacity: 1;
3091
+ color: rgba(16, 185, 129, var(--tw-text-opacity));
3092
+ }
3093
+
3094
+ .pelcro-root .plc-text-green-600 {
3095
+ --tw-text-opacity: 1;
3096
+ color: rgba(5, 150, 105, var(--tw-text-opacity));
3097
+ }
3098
+
3099
+ .pelcro-root .plc-text-green-700 {
3100
+ --tw-text-opacity: 1;
3101
+ color: rgba(4, 120, 87, var(--tw-text-opacity));
3102
+ }
3103
+
3104
+ .pelcro-root .plc-text-blue-400 {
3105
+ --tw-text-opacity: 1;
3106
+ color: rgba(96, 165, 250, var(--tw-text-opacity));
3107
+ }
3108
+
3109
+ .pelcro-root .plc-text-blue-500 {
3110
+ --tw-text-opacity: 1;
3111
+ color: rgba(59, 130, 246, var(--tw-text-opacity));
3112
+ }
3113
+
3114
+ .pelcro-root .plc-text-blue-700 {
3115
+ --tw-text-opacity: 1;
3116
+ color: rgba(29, 78, 216, var(--tw-text-opacity));
3117
+ }
3118
+
3119
+ .pelcro-root .plc-text-orange-700 {
3120
+ --tw-text-opacity: 1;
3121
+ color: rgba(194, 65, 12, var(--tw-text-opacity));
3122
+ }
3123
+
3124
+ .pelcro-root .plc-group:hover .group-hover\:plc-text-primary-400 {
3125
+ color: hsl(var(--plc-primary-hue), var(--plc-primary-saturation), calc(var(--plc-primary-lightness) + 10%));
3126
+ }
3127
+
3128
+ .pelcro-root .hover\:plc-text-primary-500:hover {
3129
+ color: hsl(var(--plc-primary-hue), var(--plc-primary-saturation), var(--plc-primary-lightness));
3130
+ }
3131
+
3132
+ .pelcro-root .hover\:plc-text-black:hover {
3133
+ --tw-text-opacity: 1;
3134
+ color: rgba(0, 0, 0, var(--tw-text-opacity));
3135
+ }
3136
+
3137
+ .pelcro-root .hover\:plc-text-white:hover {
3138
+ --tw-text-opacity: 1;
3139
+ color: rgba(255, 255, 255, var(--tw-text-opacity));
3140
+ }
3141
+
3142
+ .pelcro-root .hover\:plc-text-gray-900:hover {
3143
+ --tw-text-opacity: 1;
3144
+ color: rgba(17, 24, 39, var(--tw-text-opacity));
3145
+ }
3146
+
3147
+ .pelcro-root .focus\:plc-text-black:focus {
3148
+ --tw-text-opacity: 1;
3149
+ color: rgba(0, 0, 0, var(--tw-text-opacity));
3150
+ }
3151
+
3152
+ .pelcro-root .focus\:plc-text-white:focus {
3153
+ --tw-text-opacity: 1;
3154
+ color: rgba(255, 255, 255, var(--tw-text-opacity));
3155
+ }
3156
+
3157
+ .pelcro-root .plc-underline {
3158
+ text-decoration: underline;
3159
+ }
3160
+
3161
+ .pelcro-root .plc-no-underline {
3162
+ text-decoration: none;
3163
+ }
3164
+
3165
+ *, ::before, ::after {
3166
+ --tw-shadow: 0 0 #0000;
3167
+ }
3168
+
3169
+ .pelcro-root .plc-shadow-sm {
3170
+ --tw-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
3171
+ box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
3172
+ }
3173
+
3174
+ .pelcro-root .plc-shadow-md {
3175
+ --tw-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
3176
+ box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
3177
+ }
3178
+
3179
+ .pelcro-root .plc-shadow-md_dark {
3180
+ --tw-shadow: 0 0px 6px -1px rgba(0, 0, 0, 0.1), 0 0px 4px -1px rgba(0, 0, 0, 0.4);
3181
+ box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
3182
+ }
3183
+
3184
+ .pelcro-root .plc-shadow-lg {
3185
+ --tw-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
3186
+ box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
3187
+ }
3188
+
3189
+ .pelcro-root .plc-shadow-xl {
3190
+ --tw-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
3191
+ box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
3192
+ }
3193
+
3194
+ .pelcro-root .hover\:plc-shadow-none:hover {
3195
+ --tw-shadow: 0 0 #0000;
3196
+ box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
3197
+ }
3198
+
3199
+ .pelcro-root .focus\:plc-shadow-none:focus {
3200
+ --tw-shadow: 0 0 #0000;
3201
+ box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
3202
+ }
3203
+
3204
+ .pelcro-root .plc-outline-none {
3205
+ outline: 2px solid transparent;
3206
+ outline-offset: 2px;
3207
+ }
3208
+
3209
+ .pelcro-root .focus-within\:plc-outline-none:focus-within {
3210
+ outline: 2px solid transparent;
3211
+ outline-offset: 2px;
3212
+ }
3213
+
3214
+ .pelcro-root .focus\:plc-outline-none:focus {
3215
+ outline: 2px solid transparent;
3216
+ outline-offset: 2px;
3217
+ }
3218
+
3219
+ *, ::before, ::after {
3220
+ --tw-ring-inset: var(--tw-empty,/*!*/ /*!*/);
3221
+ --tw-ring-offset-width: 0px;
3222
+ --tw-ring-offset-color: #fff;
3223
+ --tw-ring-color: rgba(147, 197, 253, 0.5);
3224
+ --tw-ring-offset-shadow: 0 0 #0000;
3225
+ --tw-ring-shadow: 0 0 #0000;
3226
+ }
3227
+
3228
+ .pelcro-root .plc-ring-1 {
3229
+ --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
3230
+ --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
3231
+ box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
3232
+ }
3233
+
3234
+ .pelcro-root .plc-ring-2 {
3235
+ --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
3236
+ --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
3237
+ box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
3238
+ }
3239
+
3240
+ .pelcro-root .focus\:plc-ring-0:focus {
3241
+ --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
3242
+ --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);
3243
+ box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
3244
+ }
3245
+
3246
+ .pelcro-root .focus\:plc-ring-2:focus {
3247
+ --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
3248
+ --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
3249
+ box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
3250
+ }
3251
+
3252
+ .pelcro-root .plc-ring-primary-400 {
3253
+ --tw-ring-color: hsl(var(--plc-primary-hue), var(--plc-primary-saturation), calc(var(--plc-primary-lightness) + 10%));
3254
+ }
3255
+
3256
+ .pelcro-root .plc-ring-gray-200 {
3257
+ --tw-ring-opacity: 1;
3258
+ --tw-ring-color: rgba(229, 231, 235, var(--tw-ring-opacity));
3259
+ }
3260
+
3261
+ .pelcro-root .plc-ring-red-400 {
3262
+ --tw-ring-opacity: 1;
3263
+ --tw-ring-color: rgba(209, 70, 65, var(--tw-ring-opacity));
3264
+ }
3265
+
3266
+ .pelcro-root .focus\:plc-ring-primary-300:focus {
3267
+ --tw-ring-color: hsl(var(--plc-primary-hue), var(--plc-primary-saturation), calc(var(--plc-primary-lightness) + 20%));
3268
+ }
3269
+
3270
+ .pelcro-root .focus\:plc-ring-red-500:focus {
3271
+ --tw-ring-opacity: 1;
3272
+ --tw-ring-color: rgba(180, 48, 43, var(--tw-ring-opacity));
3273
+ }
3274
+
3275
+ .pelcro-root .focus\:plc-ring-green-300:focus {
3276
+ --tw-ring-opacity: 1;
3277
+ --tw-ring-color: rgba(110, 231, 183, var(--tw-ring-opacity));
3278
+ }
3279
+
3280
+ .pelcro-root .focus\:plc-ring-blue-400:focus {
3281
+ --tw-ring-opacity: 1;
3282
+ --tw-ring-color: rgba(96, 165, 250, var(--tw-ring-opacity));
3283
+ }
3284
+
3285
+ .pelcro-root .focus\:plc-ring-blue-500:focus {
3286
+ --tw-ring-opacity: 1;
3287
+ --tw-ring-color: rgba(59, 130, 246, var(--tw-ring-opacity));
3288
+ }
3289
+
3290
+ .pelcro-root .plc-transition {
3291
+ transition-property: background-color, border-color, color, fill, stroke, opacity, box-shadow, transform;
3292
+ transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
3293
+ transition-duration: 150ms;
3294
+ }
3295
+
3296
+ .pelcro-root .plc-transition-transform {
3297
+ transition-property: transform;
3298
+ transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
3299
+ transition-duration: 150ms;
3300
+ }
3301
+
3302
+ .pelcro-root .plc-duration-500 {
3303
+ transition-duration: 500ms;
3304
+ }
3305
+
3306
+ .pelcro-root .plc-ease-out {
3307
+ transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
3308
+ }
3309
+
3310
+ @media (min-width: 640px) {
3311
+ .pelcro-root .sm\:plc-m-4 {
3312
+ margin: 1rem;
3313
+ }
3314
+
3315
+ .pelcro-root .sm\:plc-mb-0 {
3316
+ margin-bottom: 0px;
3317
+ }
3318
+
3319
+ .pelcro-root .sm\:plc-ml-2 {
3320
+ margin-left: 0.5rem;
3321
+ }
3322
+
3323
+ .pelcro-root .sm\:plc-ml-6 {
3324
+ margin-left: 1.5rem;
3325
+ }
3326
+
3327
+ .pelcro-root .sm\:plc-ml-8 {
3328
+ margin-left: 2rem;
3329
+ }
3330
+
3331
+ .pelcro-root .sm\:plc-flex {
3332
+ display: flex;
3333
+ }
3334
+
3335
+ .pelcro-root .sm\:plc-inline-grid {
3336
+ display: inline-grid;
3337
+ }
3338
+
3339
+ .pelcro-root .sm\:plc-h-8 {
3340
+ height: 2rem;
3341
+ }
3342
+
3343
+ .pelcro-root .sm\:plc-h-96 {
3344
+ height: 24rem;
3345
+ }
3346
+
3347
+ .pelcro-root .sm\:plc-w-auto {
3348
+ width: auto;
3349
+ }
3350
+
3351
+ .pelcro-root .sm\:plc-w-1\/2 {
3352
+ width: 50%;
3353
+ }
3354
+
3355
+ .pelcro-root .sm\:plc-max-w-md {
3356
+ max-width: 28rem;
3357
+ }
3358
+
3359
+ .pelcro-root .sm\:plc-flex-row {
3360
+ flex-direction: row;
3361
+ }
3362
+
3363
+ .pelcro-root .sm\:plc-space-x-2 > :not([hidden]) ~ :not([hidden]) {
3364
+ --tw-space-x-reverse: 0;
3365
+ margin-right: calc(0.5rem * var(--tw-space-x-reverse));
3366
+ margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse)));
3367
+ }
3368
+
3369
+ .pelcro-root .sm\:plc-space-y-0 > :not([hidden]) ~ :not([hidden]) {
3370
+ --tw-space-y-reverse: 0;
3371
+ margin-top: calc(0px * calc(1 - var(--tw-space-y-reverse)));
3372
+ margin-bottom: calc(0px * var(--tw-space-y-reverse));
3373
+ }
3374
+
3375
+ .pelcro-root .sm\:plc-p-2 {
3376
+ padding: 0.5rem;
3377
+ }
2971
3378
 
2972
- .pelcro-root .plc-w-6\/12 {
2973
- width: 50%;
2974
- }
3379
+ .pelcro-root .sm\:plc-px-8 {
3380
+ padding-left: 2rem;
3381
+ padding-right: 2rem;
3382
+ }
2975
3383
 
2976
- .pelcro-root .plc-w-10\/12 {
2977
- width: 83.333333%;
3384
+ .pelcro-root .sm\:plc-pl-8 {
3385
+ padding-left: 2rem;
3386
+ }
2978
3387
  }
2979
3388
 
2980
- .pelcro-root .plc-w-full {
2981
- width: 100%;
3389
+ @media (min-width: 768px) {
2982
3390
  }
2983
3391
 
2984
- .pelcro-root .plc-w-max {
2985
- width: max-content;
2986
- }
3392
+ @media (min-width: 1024px) {
3393
+ .pelcro-root .lg\:plc-w-3\/12 {
3394
+ width: 25%;
3395
+ }
2987
3396
 
2988
- .pelcro-root .plc-z-max {
2989
- z-index: 999999;
3397
+ .pelcro-root .lg\:plc-w-9\/12 {
3398
+ width: 75%;
3399
+ }
2990
3400
  }
2991
3401
 
2992
- .pelcro-root .plc-gap-x-3 {
2993
- column-gap: 0.75rem;
3402
+ @media (min-width: 1280px) {
2994
3403
  }
2995
3404
 
2996
- .pelcro-root .plc-gap-y-2 {
2997
- row-gap: 0.5rem;
3405
+ @media (min-width: 1536px) {
2998
3406
  }
2999
3407
 
3000
- .pelcro-root .plc-gap-y-5 {
3001
- row-gap: 1.25rem;
3002
- }
3408
+ /* purgecss start ignore */
3003
3409
 
3004
- .pelcro-root .plc-transform {
3005
- --tw-translate-x: 0;
3006
- --tw-translate-y: 0;
3007
- --tw-rotate: 0;
3008
- --tw-skew-x: 0;
3009
- --tw-skew-y: 0;
3010
- --tw-scale-x: 1;
3011
- --tw-scale-y: 1;
3012
- transform: translateX(var(--tw-translate-x)) translateY(var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
3410
+ .alice-carousel .animated {
3411
+ animation-fill-mode: both;
3013
3412
  }
3014
3413
 
3015
- .pelcro-root .plc-origin-right {
3016
- transform-origin: right;
3414
+ .alice-carousel .animated-out {
3415
+ z-index: 1;
3017
3416
  }
3018
3417
 
3019
- .pelcro-root .plc-scale-120 {
3020
- --tw-scale-x: 1.2;
3021
- --tw-scale-y: 1.2;
3418
+ .alice-carousel .fadeOut {
3419
+ animation-name: fadeOut;
3022
3420
  }
3023
3421
 
3024
- .pelcro-root .plc-scale-x-0 {
3025
- --tw-scale-x: 0;
3026
- }
3422
+ @keyframes fadeOut {
3423
+ 0% {
3424
+ opacity: 1;
3425
+ }
3027
3426
 
3028
- .pelcro-root .plc-scale-x-100 {
3029
- --tw-scale-x: 1;
3427
+ 100% {
3428
+ opacity: 0;
3429
+ visibility: hidden;
3430
+ }
3030
3431
  }
3031
3432
 
3032
- .pelcro-root .plc-rotate-90 {
3033
- --tw-rotate: 90deg;
3433
+ .alice-carousel {
3434
+ position: relative;
3435
+ width: 100%;
3436
+ margin: auto;
3437
+ direction: ltr;
3034
3438
  }
3035
3439
 
3036
- .pelcro-root .plc-rotate-180 {
3037
- --tw-rotate: 180deg;
3440
+ .alice-carousel__wrapper {
3441
+ position: relative;
3442
+ overflow-x: hidden;
3443
+ overflow-y: hidden;
3444
+ box-sizing: border-box;
3445
+ width: 100%;
3446
+ height: auto;
3038
3447
  }
3039
3448
 
3040
- .pelcro-root .plc-translate-x-0 {
3041
- --tw-translate-x: 0px;
3449
+ .alice-carousel__stage {
3450
+ position: relative;
3451
+ box-sizing: border-box;
3452
+ width: 100%;
3453
+ height: 100%;
3454
+ margin: 0;
3455
+ padding: 0;
3456
+ white-space: nowrap;
3457
+ transform-style: flat;
3458
+ -webkit-transform-style: flat;
3459
+ backface-visibility: hidden;
3460
+ -webkit-backface-visibility: hidden;
3042
3461
  }
3043
3462
 
3044
- .pelcro-root .plc-translate-x-full {
3045
- --tw-translate-x: 100%;
3463
+ .alice-carousel__stage-item {
3464
+ position: relative;
3465
+ display: inline-block;
3466
+ padding: 0;
3467
+ margin: 0;
3468
+ box-sizing: border-box;
3469
+ width: 100%;
3470
+ height: 100%;
3471
+ vertical-align: top;
3472
+ white-space: normal;
3473
+ line-height: 0;
3046
3474
  }
3047
3475
 
3048
- .pelcro-root .plc-group:hover .group-hover\:plc-translate-x-1 {
3049
- --tw-translate-x: 0.25rem;
3476
+ .alice-carousel__stage-item * {
3477
+ line-height: initial;
3050
3478
  }
3051
3479
 
3052
- .pelcro-root .plc-transition {
3053
- transition-property: background-color, border-color, color, fill, stroke, opacity, box-shadow, transform;
3054
- transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
3055
- transition-duration: 150ms;
3480
+ .alice-carousel__stage-item.__hidden {
3481
+ opacity: 0;
3482
+ overflow: hidden;
3056
3483
  }
3057
3484
 
3058
- .pelcro-root .plc-transition-transform {
3059
- transition-property: transform;
3060
- transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
3061
- transition-duration: 150ms;
3485
+ .alice-carousel__prev-btn,
3486
+ .alice-carousel__next-btn {
3487
+ display: inline-block;
3488
+ box-sizing: border-box;
3489
+ width: 50%;
3490
+ padding: 10px 5px;
3062
3491
  }
3063
3492
 
3064
- .pelcro-root .plc-ease-out {
3065
- transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
3493
+ .alice-carousel__prev-btn [data-area]::after,
3494
+ .alice-carousel__next-btn [data-area]::after {
3495
+ position: relative;
3496
+ content: attr(data-area);
3497
+ text-transform: capitalize;
3066
3498
  }
3067
3499
 
3068
- .pelcro-root .plc-duration-500 {
3069
- transition-duration: 500ms;
3500
+ .alice-carousel__prev-btn {
3501
+ text-align: right;
3070
3502
  }
3071
3503
 
3072
- @keyframes plc-spin {
3073
- to {
3074
- transform: rotate(360deg);
3075
- }
3504
+ .alice-carousel__prev-btn-item,
3505
+ .alice-carousel__next-btn-item {
3506
+ display: inline-block;
3507
+ cursor: pointer;
3508
+ padding: 5px;
3509
+ margin: 0;
3510
+ color: #465798;
3076
3511
  }
3077
3512
 
3078
- @keyframes plc-ping {
3079
- 75%, 100% {
3080
- transform: scale(2);
3081
- opacity: 0;
3082
- }
3513
+ .alice-carousel__prev-btn-item:hover,
3514
+ .alice-carousel__next-btn-item:hover {
3515
+ color: darkred;
3083
3516
  }
3084
3517
 
3085
- @keyframes plc-pulse {
3086
- 50% {
3087
- opacity: .5;
3088
- }
3518
+ .alice-carousel__prev-btn-item.__inactive,
3519
+ .alice-carousel__next-btn-item.__inactive {
3520
+ opacity: 0.4;
3521
+ pointer-events: none;
3089
3522
  }
3090
3523
 
3091
- @keyframes plc-bounce {
3092
- 0%, 100% {
3093
- transform: translateY(-25%);
3094
- animation-timing-function: cubic-bezier(0.8,0,1,1);
3095
- }
3096
-
3097
- 50% {
3098
- transform: none;
3099
- animation-timing-function: cubic-bezier(0,0,0.2,1);
3100
- }
3524
+ .alice-carousel__play-btn {
3525
+ position: absolute;
3526
+ top: 30px;
3527
+ left: 20px;
3528
+ display: inline-block;
3101
3529
  }
3102
3530
 
3103
- @keyframes plc-slideInBottom {
3104
- 0% {
3105
- transform: translateY(1000px);
3106
- opacity: 0;
3107
- }
3531
+ .alice-carousel__play-btn:hover {
3532
+ cursor: pointer;
3533
+ }
3108
3534
 
3109
- 100% {
3110
- transform: translateY(0);
3111
- opacity: 1;
3112
- }
3535
+ .alice-carousel__play-btn-wrapper {
3536
+ position: relative;
3537
+ width: 32px;
3538
+ height: 32px;
3539
+ padding: 10px;
3540
+ border-radius: 50%;
3541
+ background-color: #fff;
3113
3542
  }
3114
3543
 
3115
- .pelcro-root .plc-animate-spin {
3116
- animation: plc-spin 1s linear infinite;
3544
+ .alice-carousel__play-btn-item {
3545
+ position: absolute;
3546
+ width: 32px;
3547
+ height: 32px;
3548
+ cursor: pointer;
3549
+ border: 0;
3550
+ outline: none;
3551
+ background: transparent;
3117
3552
  }
3118
3553
 
3119
- @media (prefers-reduced-motion: no-preference) {
3120
- .pelcro-root .motion-safe\:plc-animate-slideInBottom {
3121
- animation: plc-slideInBottom 0.5s ease-out;
3122
- }
3554
+ .alice-carousel__play-btn-item::before, .alice-carousel__play-btn-item::after {
3555
+ position: absolute;
3556
+ pointer-events: none;
3557
+ display: block;
3558
+ width: 0;
3559
+ height: 0;
3560
+ content: "";
3561
+ transition: all 0.4s linear;
3562
+ border-width: 8px 0 8px 15px;
3563
+ border-style: solid;
3564
+ border-color: transparent;
3565
+ border-left-color: #465798;
3123
3566
  }
3124
3567
 
3125
- @media (min-width: 640px) {
3126
- .pelcro-root .sm\:plc-space-y-0 > :not([hidden]) ~ :not([hidden]) {
3127
- --tw-space-y-reverse: 0;
3128
- margin-top: calc(0px * calc(1 - var(--tw-space-y-reverse)));
3129
- margin-bottom: calc(0px * var(--tw-space-y-reverse));
3130
- }
3568
+ .alice-carousel__play-btn-item::before {
3569
+ left: 5px;
3570
+ height: 14px;
3571
+ }
3131
3572
 
3132
- .pelcro-root .sm\:plc-space-x-2 > :not([hidden]) ~ :not([hidden]) {
3133
- --tw-space-x-reverse: 0;
3134
- margin-right: calc(0.5rem * var(--tw-space-x-reverse));
3135
- margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse)));
3136
- }
3573
+ .alice-carousel__play-btn-item::after {
3574
+ top: 7px;
3575
+ left: 18px;
3576
+ }
3137
3577
 
3138
- .pelcro-root .sm\:plc-h-8 {
3139
- height: 2rem;
3140
- }
3578
+ .alice-carousel__play-btn-item.__pause::before, .alice-carousel__play-btn-item.__pause::after {
3579
+ height: 30px;
3580
+ border-width: 0 0 0 10px;
3581
+ }
3141
3582
 
3142
- .pelcro-root .sm\:plc-h-96 {
3143
- height: 24rem;
3144
- }
3583
+ .alice-carousel__play-btn-item.__pause::after {
3584
+ top: 0;
3585
+ left: 18px;
3586
+ }
3145
3587
 
3146
- .pelcro-root .sm\:plc-m-4 {
3147
- margin: 1rem;
3148
- }
3588
+ .alice-carousel__dots {
3589
+ margin: 30px 3px 5px;
3590
+ padding: 0;
3591
+ list-style: none;
3592
+ text-align: center;
3593
+ }
3149
3594
 
3150
- .pelcro-root .sm\:plc-ml-2 {
3151
- margin-left: 0.5rem;
3152
- }
3595
+ .alice-carousel__dots > li {
3596
+ display: inline-block;
3597
+ }
3153
3598
 
3154
- .pelcro-root .sm\:plc-ml-6 {
3155
- margin-left: 1.5rem;
3156
- }
3599
+ .alice-carousel__dots-item:not(.__custom) {
3600
+ width: 8px;
3601
+ height: 8px;
3602
+ cursor: pointer;
3603
+ border-radius: 50%;
3604
+ background-color: #e0e4fb;
3605
+ }
3157
3606
 
3158
- .pelcro-root .sm\:plc-ml-8 {
3159
- margin-left: 2rem;
3160
- }
3607
+ .alice-carousel__dots-item:not(.__custom):not(:last-child) {
3608
+ margin-right: 20px;
3609
+ }
3161
3610
 
3162
- .pelcro-root .sm\:plc-max-w-md {
3163
- max-width: 28rem;
3164
- }
3611
+ .alice-carousel__dots-item:not(.__custom):hover, .alice-carousel__dots-item:not(.__custom).__active {
3612
+ background-color: #6e7ebc;
3613
+ }
3165
3614
 
3166
- .pelcro-root .sm\:plc-p-2 {
3167
- padding: 0.5rem;
3168
- }
3615
+ .alice-carousel__slide-info {
3616
+ position: absolute;
3617
+ top: 20px;
3618
+ right: 20px;
3619
+ display: inline-block;
3620
+ padding: 5px 10px;
3621
+ color: #465798;
3622
+ border-radius: 5px;
3623
+ background-color: rgba(224, 228, 251, 0.6);
3624
+ }
3169
3625
 
3170
- .pelcro-root .sm\:plc-px-8 {
3171
- padding-left: 2rem;
3172
- padding-right: 2rem;
3173
- }
3626
+ .alice-carousel__slide-info-item {
3627
+ vertical-align: middle;
3628
+ line-height: 0;
3629
+ }
3174
3630
 
3175
- .pelcro-root .sm\:plc-pr-8 {
3176
- padding-right: 2rem;
3177
- }
3631
+ /* purgecss end ignore */
3632
+ /* purgecss start ignore */
3178
3633
 
3179
- .pelcro-root .sm\:plc-pl-8 {
3180
- padding-left: 2rem;
3181
- }
3634
+ .toggle-switch {
3635
+ position: relative;
3636
+ display: inline-block;
3637
+ width: 50px;
3638
+ height: 25px;
3639
+ }
3182
3640
 
3183
- .pelcro-root .sm\:plc-w-auto {
3184
- width: auto;
3185
- }
3641
+ .toggle-switch input[type="checkbox"] {
3642
+ display: none;
3186
3643
  }
3187
3644
 
3188
- @media (min-width: 768px) {
3645
+ .toggle-switch .switch {
3646
+ position: absolute;
3647
+ cursor: pointer;
3648
+ background-color: #ccc;
3649
+ border-radius: 25px;
3650
+ top: 0;
3651
+ right: 0;
3652
+ bottom: 0;
3653
+ left: 0;
3654
+ transition: background-color 0.2s ease;
3189
3655
  }
3190
3656
 
3191
- @media (min-width: 1024px) {
3657
+ .toggle-switch .switch::before {
3658
+ position: absolute;
3659
+ content: "";
3660
+ left: 2px;
3661
+ top: 2px;
3662
+ width: 20px;
3663
+ height: 21px;
3664
+ background-color: #fff;
3665
+ border-radius: 50%;
3666
+ transition: transform 0.3s ease;
3192
3667
  }
3193
3668
 
3194
- @media (min-width: 1280px) {
3669
+ .toggle-switch input[type="checkbox"]:checked+.switch::before {
3670
+ transform: translateX(25px);
3671
+ /* background-color: #6699cc; */
3195
3672
  }
3196
3673
 
3197
- @media (min-width: 1536px) {
3674
+ .toggle-switch input[type="checkbox"]:checked+.switch {
3675
+ /* background-color: #336699; */
3198
3676
  }
3677
+
3678
+ /* purgecss end ignore */