@pelcro/react-pelcro-js 4.0.0-alpha.12 → 4.0.0-alpha.120

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
@@ -1,3 +1,5 @@
1
+ @import url("https://fonts.googleapis.com/css2?family=Tajawal:wght@400;700&display=swap");
2
+
1
3
  /* globals */
2
4
 
3
5
  /*! modern-normalize v1.0.0 | MIT License | https://github.com/sindresorhus/modern-normalize */
@@ -54,7 +56,7 @@ Improve consistency of default fonts in all browsers. (https://github.com/sindre
54
56
  */
55
57
 
56
58
  .pelcro-root {
57
- font-family: system-ui, -apple-system,
59
+ font-family: "Lato", system-ui, -apple-system,
58
60
  /* Firefox supports this but not yet `system-ui` */ "Segoe UI",
59
61
  Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji",
60
62
  "Segoe UI Emoji";
@@ -107,7 +109,7 @@ Add the correct font weight in Edge and Safari.
107
109
  .pelcro-root kbd,
108
110
  .pelcro-root samp,
109
111
  .pelcro-root pre {
110
- font-family: ui-monospace, SFMono-Regular, Consolas,
112
+ font-family: "Lato", ui-monospace, SFMono-Regular, Consolas,
111
113
  "Liberation Mono", Menlo, monospace; /* 1 */
112
114
  font-size: 1em; /* 2 */
113
115
  }
@@ -326,7 +328,7 @@ Add the correct display in Chrome and Safari.
326
328
  */
327
329
 
328
330
  .pelcro-root {
329
- font-family: ui-sans-serif, system-ui, -apple-system,
331
+ font-family: "Lato", ui-sans-serif, system-ui, -apple-system,
330
332
  BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial,
331
333
  "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
332
334
  "Segoe UI Symbol", "Noto Color Emoji"; /* 1 */
@@ -457,8 +459,8 @@ Add the correct display in Chrome and Safari.
457
459
  .pelcro-root code,
458
460
  .pelcro-root kbd,
459
461
  .pelcro-root samp {
460
- font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
461
- "Liberation Mono", "Courier New", monospace;
462
+ font-family: "Lato", ui-monospace, SFMono-Regular, Menlo, Monaco,
463
+ Consolas, "Liberation Mono", "Courier New", monospace;
462
464
  }
463
465
 
464
466
  /**
@@ -703,53 +705,52 @@ Add the correct display in Chrome and Safari.
703
705
  width: 100%;
704
706
  }
705
707
 
706
- @media (min-width: 640px) {
707
- .pelcro-root .pelcro-modal {
708
+ @media (min-width: 425px){
709
+ .pelcro-root .pelcro-modal{
710
+ max-width: 425px;
711
+ }
712
+ }
713
+
714
+ @media (min-width: 640px){
715
+ .pelcro-root .pelcro-modal{
708
716
  max-width: 640px;
709
717
  }
710
718
  }
711
719
 
712
- @media (min-width: 768px) {
713
- .pelcro-root .pelcro-modal {
720
+ @media (min-width: 768px){
721
+ .pelcro-root .pelcro-modal{
714
722
  max-width: 768px;
715
723
  }
716
724
  }
717
725
 
718
- @media (min-width: 1024px) {
719
- .pelcro-root .pelcro-modal {
726
+ @media (min-width: 1024px){
727
+ .pelcro-root .pelcro-modal{
720
728
  max-width: 1024px;
721
729
  }
722
730
  }
723
731
 
724
- @media (min-width: 1280px) {
725
- .pelcro-root .pelcro-modal {
732
+ @media (min-width: 1280px){
733
+ .pelcro-root .pelcro-modal{
726
734
  max-width: 1280px;
727
735
  }
728
736
  }
729
737
 
730
- @media (min-width: 1536px) {
731
- .pelcro-root .pelcro-modal {
738
+ @media (min-width: 1536px){
739
+ .pelcro-root .pelcro-modal{
732
740
  max-width: 1536px;
733
741
  }
734
742
  }
735
743
 
736
- .pelcro-root .pelcro-modal {
744
+ .pelcro-root .pelcro-modal{
737
745
  position: absolute;
738
- top: 0px;
739
746
  display: flex;
740
747
  max-width: 36rem;
741
748
  flex-direction: column;
742
749
  align-items: center;
743
- overflow: hidden;
744
750
  border-radius: 0.5rem;
745
751
  --tw-bg-opacity: 1;
746
752
  background-color: rgba(255, 255, 255, var(--tw-bg-opacity));
747
- }
748
-
749
- @media (min-width: 768px) {
750
- .pelcro-root .pelcro-modal {
751
- margin-top: 2rem;
752
- }
753
+ max-height: 100vh;
753
754
  }
754
755
 
755
756
  .pelcro-root .pelcro-modal-content {
@@ -759,22 +760,25 @@ Add the correct display in Chrome and Safari.
759
760
  .pelcro-root .pelcro-modal-header {
760
761
  position: relative;
761
762
  display: flex;
762
- min-height: 3rem;
763
+ min-height: 6rem;
763
764
  flex-direction: column;
765
+ border-top-left-radius: 0.5rem;
766
+ border-top-right-radius: 0.5rem;
764
767
  border-bottom-width: 2px;
768
+ border-color: hsl(var(--plc-primary-hue), var(--plc-primary-saturation), calc(var(--plc-primary-lightness) + 10%));
765
769
  --tw-bg-opacity: 1;
766
770
  background-color: rgba(255, 255, 255, var(--tw-bg-opacity));
767
- padding-left: 1.5rem;
768
- padding-right: 1.5rem;
771
+ padding-left: 3.5rem;
772
+ padding-right: 3.5rem;
769
773
  padding-top: 0.75rem;
770
774
  padding-bottom: 0.75rem;
771
- border-bottom-width: 1px;
775
+ border-bottom-width: 1.5px;
772
776
  }
773
777
 
774
778
  .pelcro-root .pelcro-modal-close {
775
779
  position: absolute;
776
780
  top: 50%;
777
- right: 1.25rem;
781
+ right: 1.5rem;
778
782
  z-index: 999999;
779
783
  width: 1.5rem;
780
784
  --tw-translate-x: 0;
@@ -790,47 +794,46 @@ Add the correct display in Chrome and Safari.
790
794
  background-color: transparent;
791
795
  }
792
796
 
793
- .pelcro-root .pelcro-modal-close:hover {
797
+ .pelcro-root .pelcro-modal-close:hover{
794
798
  background-color: transparent;
795
799
  }
796
800
 
797
- .pelcro-root .pelcro-modal-close:focus {
801
+ .pelcro-root .pelcro-modal-close:focus{
798
802
  background-color: transparent;
799
803
  }
800
804
 
801
- .pelcro-root .pelcro-modal-close {
805
+ .pelcro-root .pelcro-modal-close{
802
806
  --tw-text-opacity: 1;
803
807
  color: rgba(107, 114, 128, var(--tw-text-opacity));
804
808
  }
805
809
 
806
- .pelcro-root .pelcro-modal-close:hover {
810
+ .pelcro-root .pelcro-modal-close:hover{
807
811
  --tw-text-opacity: 1;
808
812
  color: rgba(0, 0, 0, var(--tw-text-opacity));
809
813
  }
810
814
 
811
- .pelcro-root .pelcro-modal-close:focus {
815
+ .pelcro-root .pelcro-modal-close:focus{
812
816
  --tw-text-opacity: 1;
813
817
  color: rgba(0, 0, 0, var(--tw-text-opacity));
814
818
  }
815
819
 
816
- .pelcro-root .pelcro-modal-close:hover {
820
+ .pelcro-root .pelcro-modal-close:hover{
817
821
  --tw-shadow: 0 0 #0000;
818
822
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
819
823
  }
820
824
 
821
825
  .pelcro-root .pelcro-modal-body {
822
826
  --tw-bg-opacity: 1;
823
- background-color: rgba(243, 244, 246, var(--tw-bg-opacity));
824
- padding-left: 0.5rem;
825
- padding-right: 0.5rem;
826
- padding-top: 0.5rem;
827
- padding-bottom: 0.5rem;
827
+ background-color: rgba(255, 255, 255, var(--tw-bg-opacity));
828
+ padding-left: 1rem;
829
+ padding-right: 1rem;
830
+ padding-top: 1.5rem;
828
831
  }
829
832
 
830
- @media (min-width: 768px) {
831
- .pelcro-root .pelcro-modal-body {
832
- padding-left: 2rem;
833
- padding-right: 2rem;
833
+ @media (min-width: 768px){
834
+ .pelcro-root .pelcro-modal-body{
835
+ padding-left: 3.5rem;
836
+ padding-right: 3.5rem;
834
837
  }
835
838
  }
836
839
 
@@ -839,36 +842,53 @@ Add the correct display in Chrome and Safari.
839
842
  flex-direction: column;
840
843
  align-items: center;
841
844
  justify-content: center;
845
+ border-bottom-right-radius: 0.5rem;
846
+ border-bottom-left-radius: 0.5rem;
842
847
  --tw-bg-opacity: 1;
843
- background-color: rgba(243, 244, 246, var(--tw-bg-opacity));
844
- padding: 1rem;
845
- padding-bottom: 2.75rem;
848
+ background-color: rgba(255, 255, 255, var(--tw-bg-opacity));
849
+ padding-left: 1rem;
850
+ padding-right: 1rem;
851
+ padding-top: 2rem;
852
+ padding-bottom: 2rem;
846
853
  font-size: 0.875rem;
847
854
  line-height: 1.25rem;
848
855
  }
849
856
 
850
857
  .pelcro-root .pelcro-input-wrapper {
851
- margin-bottom: 1.5rem;
858
+ position: relative;
859
+ margin-bottom: 2rem;
852
860
  width: 100%;
853
861
  }
854
862
 
855
863
  .pelcro-root .pelcro-input-label {
856
- margin-bottom: 0.25rem;
864
+ position: absolute;
865
+ top: -0.5rem;
866
+ left: 0.5rem;
857
867
  display: inline-flex;
868
+ --tw-bg-opacity: 1;
869
+ background-color: rgba(255, 255, 255, var(--tw-bg-opacity));
870
+ padding-left: 0.25rem;
871
+ padding-right: 0.25rem;
872
+ font-size: 0.75rem;
873
+ line-height: 1rem;
858
874
  font-weight: 500;
859
875
  --tw-text-opacity: 1;
860
- color: rgba(17, 24, 39, var(--tw-text-opacity));
876
+ color: rgba(156, 163, 175, var(--tw-text-opacity));
877
+ transition-property: all;
878
+ transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
879
+ transition-duration: 150ms;
861
880
  }
862
881
 
863
882
  .pelcro-root .pelcro-input-error {
864
883
  position: absolute;
884
+ left: 0.75rem;
865
885
  margin-top: 0.125rem;
866
886
  height: auto;
867
- font-size: 0.875rem;
868
- line-height: 1.25rem;
887
+ font-size: 0.75rem;
888
+ line-height: 1rem;
869
889
  text-transform: none;
870
890
  --tw-text-opacity: 1;
871
- color: rgba(180, 48, 43, var(--tw-text-opacity));
891
+ color: rgba(209, 70, 65, var(--tw-text-opacity));
872
892
  }
873
893
 
874
894
  .pelcro-root .pelcro-input-invalid {
@@ -876,19 +896,19 @@ Add the correct display in Chrome and Safari.
876
896
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
877
897
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
878
898
  --tw-ring-opacity: 1;
879
- --tw-ring-color: rgba(209, 70, 65, var(--tw-ring-opacity));
899
+ --tw-ring-color: rgba(219, 110, 106, var(--tw-ring-opacity));
880
900
  }
881
901
 
882
902
  .pelcro-root .pelcro-input-field {
883
- min-height: 3rem;
903
+ min-height: 1rem;
884
904
  width: 100%;
885
905
  }
886
906
 
887
- .pelcro-root .pelcro-input-field:disabled {
907
+ .pelcro-root .pelcro-input-field:disabled{
888
908
  cursor: not-allowed;
889
909
  }
890
910
 
891
- .pelcro-root .pelcro-input-field {
911
+ .pelcro-root .pelcro-input-field{
892
912
  -webkit-appearance: none;
893
913
  appearance: none;
894
914
  border-radius: 0.25rem;
@@ -897,29 +917,94 @@ Add the correct display in Chrome and Safari.
897
917
  --tw-border-opacity: 1;
898
918
  border-color: rgba(209, 213, 219, var(--tw-border-opacity));
899
919
  --tw-bg-opacity: 1;
900
- background-color: rgba(249, 250, 251, var(--tw-bg-opacity));
920
+ background-color: rgba(255, 255, 255, var(--tw-bg-opacity));
901
921
  }
902
922
 
903
- .pelcro-root .pelcro-input-field:disabled {
923
+ .pelcro-root .pelcro-input-field:disabled{
904
924
  --tw-bg-opacity: 1;
905
925
  background-color: rgba(209, 213, 219, var(--tw-bg-opacity));
906
926
  }
907
927
 
908
- .pelcro-root .pelcro-input-field {
928
+ .pelcro-root .pelcro-input-field{
909
929
  padding: 0.5rem;
910
930
  --tw-text-opacity: 1;
911
931
  color: rgba(17, 24, 39, var(--tw-text-opacity));
932
+ }
933
+
934
+ .pelcro-root .pelcro-input-field::placeholder{
935
+ color: transparent;
936
+ }
937
+
938
+ .pelcro-root .pelcro-input-field{
912
939
  outline: 2px solid transparent;
913
940
  outline-offset: 2px;
914
941
  }
915
942
 
916
- .pelcro-root .pelcro-input-field:focus {
943
+ .pelcro-root .pelcro-input-field:focus{
917
944
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
918
945
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
919
946
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
920
947
  --tw-ring-color: hsl(var(--plc-primary-hue), var(--plc-primary-saturation), calc(var(--plc-primary-lightness) + 10%));
921
948
  }
922
949
 
950
+ .pelcro-root
951
+ .pelcro-input-field:placeholder-shown
952
+ ~ .pelcro-input-label {
953
+ top: 0.625rem;
954
+ left: 0.5rem;
955
+ font-size: 0.875rem;
956
+ line-height: 1.25rem;
957
+ font-weight: 500;
958
+ --tw-text-opacity: 1;
959
+ color: rgba(156, 163, 175, var(--tw-text-opacity));
960
+ }
961
+
962
+ .pelcro-root .pelcro-input-field:focus ~ .pelcro-input-label {
963
+ top: -0.5rem;
964
+ --tw-bg-opacity: 1;
965
+ background-color: rgba(255, 255, 255, var(--tw-bg-opacity));
966
+ padding-left: 0.25rem;
967
+ padding-right: 0.25rem;
968
+ font-size: 0.75rem;
969
+ line-height: 1rem;
970
+ transition-property: all;
971
+ transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
972
+ transition-duration: 150ms;
973
+ }
974
+
975
+ .pelcro-root .pelcro-input-field:disabled ~ .pelcro-input-label {
976
+ display: none;
977
+ }
978
+
979
+ /* .pelcro-root .pelcro-input-card-number-label,
980
+ .pelcro-root .pelcro-input-cvc-number-label,
981
+ .pelcro-root .pelcro-input-expiry-date-label {
982
+ @apply plc-inline-flex plc-text-gray-400 plc-font-medium plc-absolute plc--top-2 plc-left-2 plc-text-xs plc-transition-all plc-bg-white plc-px-1;
983
+ }
984
+
985
+ .pelcro-root
986
+ #pelcro-input-card-number:placeholder-shown
987
+ ~ .pelcro-input-card-number-label,
988
+ .pelcro-root
989
+ #pelcro-input-cvc-number:placeholder-shown
990
+ ~ .pelcro-input-cvc-number-label,
991
+ .pelcro-root
992
+ #pelcro-input-expiry-date:placeholder-shown
993
+ ~ .pelcro-input-expiry-date-label {
994
+ @apply plc-text-gray-400 plc-font-medium plc-top-2.5 plc-left-2 plc-text-sm;
995
+ }
996
+ .pelcro-root
997
+ #pelcro-input-card-number:focus
998
+ ~ .pelcro-input-card-number-label,
999
+ .pelcro-root
1000
+ #pelcro-input-cvc-number:focus
1001
+ ~ .pelcro-input-cvc-number-label,
1002
+ .pelcro-root
1003
+ #pelcro-input-expiry-date:focus
1004
+ ~ .pelcro-input-expiry-date-label {
1005
+ @apply plc-text-xs plc--top-2 plc-transition-all plc-bg-white plc-px-1;
1006
+ } */
1007
+
923
1008
  .pelcro-root .pelcro-checkbox-label {
924
1009
  padding-left: 0.5rem;
925
1010
  --tw-text-opacity: 1;
@@ -932,28 +1017,28 @@ Add the correct display in Chrome and Safari.
932
1017
  cursor: pointer;
933
1018
  }
934
1019
 
935
- .pelcro-root .pelcro-checkbox:disabled {
1020
+ .pelcro-root .pelcro-checkbox:disabled{
936
1021
  cursor: not-allowed;
937
1022
  }
938
1023
 
939
- .pelcro-root .pelcro-checkbox {
1024
+ .pelcro-root .pelcro-checkbox{
940
1025
  border-radius: 0.125rem;
941
1026
  }
942
1027
 
943
- .pelcro-root .pelcro-checkbox:checked {
1028
+ .pelcro-root .pelcro-checkbox:checked{
944
1029
  border-color: transparent;
945
1030
  }
946
1031
 
947
- .pelcro-root .pelcro-checkbox {
1032
+ .pelcro-root .pelcro-checkbox{
948
1033
  color: hsl(var(--plc-primary-hue), var(--plc-primary-saturation), var(--plc-primary-lightness));
949
1034
  }
950
1035
 
951
- .pelcro-root .pelcro-checkbox:disabled {
1036
+ .pelcro-root .pelcro-checkbox:disabled{
952
1037
  --tw-text-opacity: 1;
953
1038
  color: rgba(209, 213, 219, var(--tw-text-opacity));
954
1039
  }
955
1040
 
956
- .pelcro-root .pelcro-checkbox:focus {
1041
+ .pelcro-root .pelcro-checkbox:focus{
957
1042
  outline: 2px solid transparent;
958
1043
  outline-offset: 2px;
959
1044
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
@@ -981,11 +1066,11 @@ Add the correct display in Chrome and Safari.
981
1066
  width: max-content;
982
1067
  }
983
1068
 
984
- .pelcro-root .pelcro-button-solid:disabled {
1069
+ .pelcro-root .pelcro-button-solid:disabled{
985
1070
  cursor: not-allowed;
986
1071
  }
987
1072
 
988
- .pelcro-root .pelcro-button-solid {
1073
+ .pelcro-root .pelcro-button-solid{
989
1074
  align-items: center;
990
1075
  justify-content: center;
991
1076
  justify-items: center;
@@ -994,20 +1079,20 @@ Add the correct display in Chrome and Safari.
994
1079
  background-color: hsl(var(--plc-primary-hue), var(--plc-primary-saturation), var(--plc-primary-lightness));
995
1080
  }
996
1081
 
997
- .pelcro-root .pelcro-button-solid:hover {
1082
+ .pelcro-root .pelcro-button-solid:hover{
998
1083
  background-color: hsl(var(--plc-primary-hue), var(--plc-primary-saturation), calc(var(--plc-primary-lightness) - 10%));
999
1084
  }
1000
1085
 
1001
- .pelcro-root .pelcro-button-solid:focus {
1086
+ .pelcro-root .pelcro-button-solid:focus{
1002
1087
  background-color: hsl(var(--plc-primary-hue), var(--plc-primary-saturation), calc(var(--plc-primary-lightness) - 10%));
1003
1088
  }
1004
1089
 
1005
- .pelcro-root .pelcro-button-solid:disabled {
1090
+ .pelcro-root .pelcro-button-solid:disabled{
1006
1091
  --tw-bg-opacity: 1;
1007
1092
  background-color: rgba(156, 163, 175, var(--tw-bg-opacity));
1008
1093
  }
1009
1094
 
1010
- .pelcro-root .pelcro-button-solid {
1095
+ .pelcro-root .pelcro-button-solid{
1011
1096
  padding-left: 1.5rem;
1012
1097
  padding-right: 1.5rem;
1013
1098
  padding-top: 0.5rem;
@@ -1019,27 +1104,27 @@ Add the correct display in Chrome and Safari.
1019
1104
  color: rgba(255, 255, 255, var(--tw-text-opacity));
1020
1105
  }
1021
1106
 
1022
- .pelcro-root .pelcro-button-solid:hover {
1107
+ .pelcro-root .pelcro-button-solid:hover{
1023
1108
  --tw-text-opacity: 1;
1024
1109
  color: rgba(255, 255, 255, var(--tw-text-opacity));
1025
1110
  }
1026
1111
 
1027
- .pelcro-root .pelcro-button-solid:focus {
1112
+ .pelcro-root .pelcro-button-solid:focus{
1028
1113
  --tw-text-opacity: 1;
1029
1114
  color: rgba(255, 255, 255, var(--tw-text-opacity));
1030
1115
  }
1031
1116
 
1032
- .pelcro-root .pelcro-button-solid:disabled {
1117
+ .pelcro-root .pelcro-button-solid:disabled{
1033
1118
  --tw-text-opacity: 1;
1034
1119
  color: rgba(255, 255, 255, var(--tw-text-opacity));
1035
1120
  }
1036
1121
 
1037
- .pelcro-root .pelcro-button-solid:hover {
1122
+ .pelcro-root .pelcro-button-solid:hover{
1038
1123
  --tw-shadow: 0 0 #0000;
1039
1124
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
1040
1125
  }
1041
1126
 
1042
- .pelcro-root .pelcro-button-solid:focus {
1127
+ .pelcro-root .pelcro-button-solid:focus{
1043
1128
  outline: 2px solid transparent;
1044
1129
  outline-offset: 2px;
1045
1130
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
@@ -1053,11 +1138,11 @@ Add the correct display in Chrome and Safari.
1053
1138
  width: max-content;
1054
1139
  }
1055
1140
 
1056
- .pelcro-root .pelcro-button-outline:disabled {
1141
+ .pelcro-root .pelcro-button-outline:disabled{
1057
1142
  cursor: not-allowed;
1058
1143
  }
1059
1144
 
1060
- .pelcro-root .pelcro-button-outline {
1145
+ .pelcro-root .pelcro-button-outline{
1061
1146
  align-items: center;
1062
1147
  justify-content: center;
1063
1148
  justify-items: center;
@@ -1066,28 +1151,28 @@ Add the correct display in Chrome and Safari.
1066
1151
  border-color: hsl(var(--plc-primary-hue), var(--plc-primary-saturation), var(--plc-primary-lightness));
1067
1152
  }
1068
1153
 
1069
- .pelcro-root .pelcro-button-outline:disabled {
1154
+ .pelcro-root .pelcro-button-outline:disabled{
1070
1155
  --tw-border-opacity: 1;
1071
1156
  border-color: rgba(107, 114, 128, var(--tw-border-opacity));
1072
1157
  }
1073
1158
 
1074
- .pelcro-root .pelcro-button-outline {
1159
+ .pelcro-root .pelcro-button-outline{
1075
1160
  background-color: transparent;
1076
1161
  }
1077
1162
 
1078
- .pelcro-root .pelcro-button-outline:hover {
1163
+ .pelcro-root .pelcro-button-outline:hover{
1079
1164
  background-color: hsl(var(--plc-primary-hue), var(--plc-primary-saturation), calc(var(--plc-primary-lightness) - 10%));
1080
1165
  }
1081
1166
 
1082
- .pelcro-root .pelcro-button-outline:focus {
1167
+ .pelcro-root .pelcro-button-outline:focus{
1083
1168
  background-color: hsl(var(--plc-primary-hue), var(--plc-primary-saturation), calc(var(--plc-primary-lightness) - 10%));
1084
1169
  }
1085
1170
 
1086
- .pelcro-root .pelcro-button-outline:disabled {
1171
+ .pelcro-root .pelcro-button-outline:disabled{
1087
1172
  background-color: transparent;
1088
1173
  }
1089
1174
 
1090
- .pelcro-root .pelcro-button-outline {
1175
+ .pelcro-root .pelcro-button-outline{
1091
1176
  padding-left: 1.5rem;
1092
1177
  padding-right: 1.5rem;
1093
1178
  padding-top: 0.5rem;
@@ -1098,27 +1183,27 @@ Add the correct display in Chrome and Safari.
1098
1183
  color: hsl(var(--plc-primary-hue), var(--plc-primary-saturation), var(--plc-primary-lightness));
1099
1184
  }
1100
1185
 
1101
- .pelcro-root .pelcro-button-outline:hover {
1186
+ .pelcro-root .pelcro-button-outline:hover{
1102
1187
  --tw-text-opacity: 1;
1103
1188
  color: rgba(255, 255, 255, var(--tw-text-opacity));
1104
1189
  }
1105
1190
 
1106
- .pelcro-root .pelcro-button-outline:focus {
1191
+ .pelcro-root .pelcro-button-outline:focus{
1107
1192
  --tw-text-opacity: 1;
1108
1193
  color: rgba(255, 255, 255, var(--tw-text-opacity));
1109
1194
  }
1110
1195
 
1111
- .pelcro-root .pelcro-button-outline:disabled {
1196
+ .pelcro-root .pelcro-button-outline:disabled{
1112
1197
  --tw-text-opacity: 1;
1113
1198
  color: rgba(107, 114, 128, var(--tw-text-opacity));
1114
1199
  }
1115
1200
 
1116
- .pelcro-root .pelcro-button-outline:hover {
1201
+ .pelcro-root .pelcro-button-outline:hover{
1117
1202
  --tw-shadow: 0 0 #0000;
1118
1203
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
1119
1204
  }
1120
1205
 
1121
- .pelcro-root .pelcro-button-outline:focus {
1206
+ .pelcro-root .pelcro-button-outline:focus{
1122
1207
  outline: 2px solid transparent;
1123
1208
  outline-offset: 2px;
1124
1209
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
@@ -1133,35 +1218,35 @@ Add the correct display in Chrome and Safari.
1133
1218
  width: 2rem;
1134
1219
  }
1135
1220
 
1136
- .pelcro-root .pelcro-button-icon:disabled {
1221
+ .pelcro-root .pelcro-button-icon:disabled{
1137
1222
  cursor: not-allowed;
1138
1223
  }
1139
1224
 
1140
- .pelcro-root .pelcro-button-icon {
1225
+ .pelcro-root .pelcro-button-icon{
1141
1226
  align-items: center;
1142
1227
  justify-content: center;
1143
1228
  border-radius: 9999px;
1144
1229
  border-width: 0px;
1145
1230
  }
1146
1231
 
1147
- .pelcro-root .pelcro-button-icon:hover {
1232
+ .pelcro-root .pelcro-button-icon:hover{
1148
1233
  --tw-bg-opacity: 1;
1149
1234
  background-color: rgba(229, 231, 235, var(--tw-bg-opacity));
1150
1235
  --tw-text-opacity: 1;
1151
1236
  color: rgba(75, 85, 99, var(--tw-text-opacity));
1152
1237
  }
1153
1238
 
1154
- .pelcro-root .pelcro-button-icon:disabled {
1239
+ .pelcro-root .pelcro-button-icon:disabled{
1155
1240
  --tw-text-opacity: 1;
1156
1241
  color: rgba(209, 213, 219, var(--tw-text-opacity));
1157
1242
  }
1158
1243
 
1159
- .pelcro-root .pelcro-button-icon:hover {
1244
+ .pelcro-root .pelcro-button-icon:hover{
1160
1245
  --tw-shadow: 0 0 #0000;
1161
1246
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
1162
1247
  }
1163
1248
 
1164
- .pelcro-root .pelcro-button-icon:focus {
1249
+ .pelcro-root .pelcro-button-icon:focus{
1165
1250
  outline: 2px solid transparent;
1166
1251
  outline-offset: 2px;
1167
1252
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
@@ -1175,11 +1260,11 @@ Add the correct display in Chrome and Safari.
1175
1260
  width: max-content;
1176
1261
  }
1177
1262
 
1178
- .pelcro-root .pelcro-button-ghost:disabled {
1263
+ .pelcro-root .pelcro-button-ghost:disabled{
1179
1264
  cursor: not-allowed;
1180
1265
  }
1181
1266
 
1182
- .pelcro-root .pelcro-button-ghost {
1267
+ .pelcro-root .pelcro-button-ghost{
1183
1268
  align-items: center;
1184
1269
  justify-content: center;
1185
1270
  justify-items: center;
@@ -1188,21 +1273,21 @@ Add the correct display in Chrome and Safari.
1188
1273
  background-color: transparent;
1189
1274
  }
1190
1275
 
1191
- .pelcro-root .pelcro-button-ghost:hover {
1276
+ .pelcro-root .pelcro-button-ghost:hover{
1192
1277
  --tw-bg-opacity: 1;
1193
1278
  background-color: rgba(243, 244, 246, var(--tw-bg-opacity));
1194
1279
  }
1195
1280
 
1196
- .pelcro-root .pelcro-button-ghost:focus {
1281
+ .pelcro-root .pelcro-button-ghost:focus{
1197
1282
  --tw-bg-opacity: 1;
1198
1283
  background-color: rgba(243, 244, 246, var(--tw-bg-opacity));
1199
1284
  }
1200
1285
 
1201
- .pelcro-root .pelcro-button-ghost:disabled {
1286
+ .pelcro-root .pelcro-button-ghost:disabled{
1202
1287
  background-color: transparent;
1203
1288
  }
1204
1289
 
1205
- .pelcro-root .pelcro-button-ghost {
1290
+ .pelcro-root .pelcro-button-ghost{
1206
1291
  padding: 0.25rem;
1207
1292
  font-size: 0.75rem;
1208
1293
  line-height: 1rem;
@@ -1211,27 +1296,27 @@ Add the correct display in Chrome and Safari.
1211
1296
  color: rgba(107, 114, 128, var(--tw-text-opacity));
1212
1297
  }
1213
1298
 
1214
- .pelcro-root .pelcro-button-ghost:hover {
1299
+ .pelcro-root .pelcro-button-ghost:hover{
1215
1300
  --tw-text-opacity: 1;
1216
1301
  color: rgba(107, 114, 128, var(--tw-text-opacity));
1217
1302
  }
1218
1303
 
1219
- .pelcro-root .pelcro-button-ghost:focus {
1304
+ .pelcro-root .pelcro-button-ghost:focus{
1220
1305
  --tw-text-opacity: 1;
1221
1306
  color: rgba(107, 114, 128, var(--tw-text-opacity));
1222
1307
  }
1223
1308
 
1224
- .pelcro-root .pelcro-button-ghost:disabled {
1309
+ .pelcro-root .pelcro-button-ghost:disabled{
1225
1310
  --tw-text-opacity: 1;
1226
1311
  color: rgba(209, 213, 219, var(--tw-text-opacity));
1227
1312
  }
1228
1313
 
1229
- .pelcro-root .pelcro-button-ghost:hover {
1314
+ .pelcro-root .pelcro-button-ghost:hover{
1230
1315
  --tw-shadow: 0 0 #0000;
1231
1316
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
1232
1317
  }
1233
1318
 
1234
- .pelcro-root .pelcro-button-ghost:focus {
1319
+ .pelcro-root .pelcro-button-ghost:focus{
1235
1320
  outline: 2px solid transparent;
1236
1321
  outline-offset: 2px;
1237
1322
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
@@ -1253,7 +1338,7 @@ Add the correct display in Chrome and Safari.
1253
1338
  color: hsl(var(--plc-primary-hue), var(--plc-primary-saturation), var(--plc-primary-lightness));
1254
1339
  }
1255
1340
 
1256
- .pelcro-root .pelcro-link:hover {
1341
+ .pelcro-root .pelcro-link:hover{
1257
1342
  color: hsl(var(--plc-primary-hue), var(--plc-primary-saturation), calc(var(--plc-primary-lightness) - 10%));
1258
1343
  }
1259
1344
 
@@ -1271,35 +1356,35 @@ Add the correct display in Chrome and Safari.
1271
1356
  cursor: pointer;
1272
1357
  }
1273
1358
 
1274
- .pelcro-root .pelcro-radio:disabled {
1359
+ .pelcro-root .pelcro-radio:disabled{
1275
1360
  cursor: not-allowed;
1276
1361
  }
1277
1362
 
1278
- .pelcro-root .pelcro-radio {
1363
+ .pelcro-root .pelcro-radio{
1279
1364
  border-radius: 9999px;
1280
1365
  border-style: none;
1281
1366
  }
1282
1367
 
1283
- .pelcro-root .pelcro-radio:checked {
1368
+ .pelcro-root .pelcro-radio:checked{
1284
1369
  border-color: transparent;
1285
1370
  }
1286
1371
 
1287
- .pelcro-root .pelcro-radio {
1372
+ .pelcro-root .pelcro-radio{
1288
1373
  background-image: none;
1289
1374
  color: hsl(var(--plc-primary-hue), var(--plc-primary-saturation), var(--plc-primary-lightness));
1290
1375
  }
1291
1376
 
1292
- .pelcro-root .pelcro-radio:disabled {
1377
+ .pelcro-root .pelcro-radio:disabled{
1293
1378
  --tw-text-opacity: 1;
1294
1379
  color: rgba(209, 213, 219, var(--tw-text-opacity));
1295
1380
  }
1296
1381
 
1297
- .pelcro-root .pelcro-radio:focus {
1382
+ .pelcro-root .pelcro-radio:focus{
1298
1383
  outline: 2px solid transparent;
1299
1384
  outline-offset: 2px;
1300
1385
  }
1301
1386
 
1302
- .pelcro-root .pelcro-radio {
1387
+ .pelcro-root .pelcro-radio{
1303
1388
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
1304
1389
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
1305
1390
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
@@ -1312,12 +1397,12 @@ Add the correct display in Chrome and Safari.
1312
1397
  }
1313
1398
 
1314
1399
  .pelcro-root .pelcro-alert-error {
1315
- margin-bottom: 0.5rem;
1400
+ margin-bottom: 1rem;
1316
1401
  display: flex;
1317
1402
  width: 100%;
1318
1403
  align-items: center;
1319
1404
  justify-content: space-between;
1320
- border-radius: 0.125rem;
1405
+ border-radius: 0.375rem;
1321
1406
  --tw-bg-opacity: 1;
1322
1407
  background-color: rgba(239, 190, 188, var(--tw-bg-opacity));
1323
1408
  padding-left: 1rem;
@@ -1332,12 +1417,12 @@ Add the correct display in Chrome and Safari.
1332
1417
  }
1333
1418
 
1334
1419
  .pelcro-root .pelcro-alert-success {
1335
- margin-bottom: 0.5rem;
1420
+ margin-bottom: 1rem;
1336
1421
  display: flex;
1337
1422
  width: 100%;
1338
1423
  align-items: center;
1339
1424
  justify-content: space-between;
1340
- border-radius: 0.125rem;
1425
+ border-radius: 0.375rem;
1341
1426
  --tw-bg-opacity: 1;
1342
1427
  background-color: rgba(167, 243, 208, var(--tw-bg-opacity));
1343
1428
  padding-left: 1rem;
@@ -1370,24 +1455,24 @@ Add the correct display in Chrome and Safari.
1370
1455
  background-color: transparent;
1371
1456
  }
1372
1457
 
1373
- .pelcro-root .pelcro-alert-close:hover {
1458
+ .pelcro-root .pelcro-alert-close:hover{
1374
1459
  background-color: transparent;
1375
1460
  }
1376
1461
 
1377
- .pelcro-root .pelcro-alert-close:focus {
1462
+ .pelcro-root .pelcro-alert-close:focus{
1378
1463
  background-color: transparent;
1379
1464
  }
1380
1465
 
1381
- .pelcro-root .pelcro-alert-close {
1466
+ .pelcro-root .pelcro-alert-close{
1382
1467
  fill: currentColor;
1383
1468
  color: currentColor;
1384
1469
  }
1385
1470
 
1386
- .pelcro-root .pelcro-alert-close:hover {
1471
+ .pelcro-root .pelcro-alert-close:hover{
1387
1472
  color: currentColor;
1388
1473
  }
1389
1474
 
1390
- .pelcro-root .pelcro-alert-close:focus {
1475
+ .pelcro-root .pelcro-alert-close:focus{
1391
1476
  color: currentColor;
1392
1477
  }
1393
1478
 
@@ -1411,13 +1496,13 @@ Add the correct display in Chrome and Safari.
1411
1496
  color: rgba(255, 255, 255, var(--tw-text-opacity));
1412
1497
  }
1413
1498
 
1414
- .pelcro-root .pelcro-notification-confirm > :not([hidden]) ~ :not([hidden]) {
1499
+ .pelcro-root .pelcro-notification-confirm > :not([hidden]) ~ :not([hidden]){
1415
1500
  --tw-space-x-reverse: 0;
1416
1501
  margin-right: calc(1rem * var(--tw-space-x-reverse));
1417
1502
  margin-left: calc(1rem * calc(1 - var(--tw-space-x-reverse)));
1418
1503
  }
1419
1504
 
1420
- .pelcro-root .pelcro-notification-confirm {
1505
+ .pelcro-root .pelcro-notification-confirm{
1421
1506
  --tw-bg-opacity: 1;
1422
1507
  background-color: rgba(255, 255, 255, var(--tw-bg-opacity));
1423
1508
  font-size: 0.875rem;
@@ -1425,13 +1510,13 @@ Add the correct display in Chrome and Safari.
1425
1510
  font-weight: 600;
1426
1511
  }
1427
1512
 
1428
- .pelcro-root .pelcro-notification-loading > :not([hidden]) ~ :not([hidden]) {
1513
+ .pelcro-root .pelcro-notification-loading > :not([hidden]) ~ :not([hidden]){
1429
1514
  --tw-space-x-reverse: 0;
1430
1515
  margin-right: calc(1rem * var(--tw-space-x-reverse));
1431
1516
  margin-left: calc(1rem * calc(1 - var(--tw-space-x-reverse)));
1432
1517
  }
1433
1518
 
1434
- .pelcro-root .pelcro-notification-loading {
1519
+ .pelcro-root .pelcro-notification-loading{
1435
1520
  font-size: 0.875rem;
1436
1521
  line-height: 1.25rem;
1437
1522
  font-weight: 600;
@@ -1486,22 +1571,11 @@ Add the correct display in Chrome and Safari.
1486
1571
  display: none;
1487
1572
  }
1488
1573
 
1489
- .pelcro-root .pelcro-tooltip-container:hover .pelcro-tooltip, .pelcro-root .pelcro-tooltip:hover {
1574
+ .pelcro-root .pelcro-tooltip-container:hover .pelcro-tooltip, .pelcro-root .pelcro-tooltip:hover{
1490
1575
  z-index: 50;
1491
1576
  display: block;
1492
1577
  }
1493
1578
 
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;
1499
- }
1500
-
1501
- .pelcro-root .pelcro-vertical-separator:first-child {
1502
- display: none;
1503
- }
1504
-
1505
1579
  .pelcro-root .pelcro-shop-product-image {
1506
1580
  max-width: 13rem;
1507
1581
  }
@@ -1595,7 +1669,7 @@ Add the correct display in Chrome and Safari.
1595
1669
  height: 0.375rem;
1596
1670
  }
1597
1671
 
1598
- .pelcro-root input[type="range"]::-ms-fill-lower, .pelcro-root input[type="range"]::-ms-fill-upper {
1672
+ .pelcro-root input[type="range"]::-ms-fill-lower, .pelcro-root input[type="range"]::-ms-fill-upper{
1599
1673
  border-radius: 0.375rem;
1600
1674
  border-style: none;
1601
1675
  background-color: hsl(var(--plc-primary-hue), var(--plc-primary-saturation), var(--plc-primary-lightness));
@@ -1619,7 +1693,7 @@ Add the correct display in Chrome and Safari.
1619
1693
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
1620
1694
  }
1621
1695
 
1622
- .pelcro-root input[type="range"]:focus::-ms-fill-lower, .pelcro-root input[type="range"]:focus::-ms-fill-upper {
1696
+ .pelcro-root input[type="range"]:focus::-ms-fill-lower, .pelcro-root input[type="range"]:focus::-ms-fill-upper{
1623
1697
  background-color: hsl(var(--plc-primary-hue), var(--plc-primary-saturation), var(--plc-primary-lightness));
1624
1698
  }
1625
1699
 
@@ -1644,77 +1718,80 @@ Add the correct display in Chrome and Safari.
1644
1718
  display: flex !important;
1645
1719
  }
1646
1720
 
1647
- .pelcro-root .pelcro-select-plan-radio {
1648
- margin-top: 0.4rem;
1649
- }
1650
-
1651
- .pelcro-root .pelcro-product:before {
1721
+ .pelcro-root .productTabs:before {
1652
1722
  content: "";
1723
+ width: calc(100% - 5.5rem);
1724
+ left: 2.75rem;
1653
1725
  position: absolute;
1654
- top: 0px;
1655
- left: 0px;
1656
- height: 0.25rem;
1657
- width: 100%;
1658
- background-color: hsl(var(--plc-primary-hue), var(--plc-primary-saturation), calc(var(--plc-primary-lightness) - 30%));
1726
+ bottom: 0.125rem;
1727
+ height: 1px;
1728
+ --tw-bg-opacity: 1;
1729
+ background-color: rgba(209, 213, 219, var(--tw-bg-opacity));
1659
1730
  }
1660
1731
 
1661
- /* Firefox */
1662
-
1663
- .pelcro-root .productTabs .tabs {
1664
- padding-bottom: 5px;
1665
- scrollbar-width: thin;
1666
- scrollbar-color: grey;
1732
+ .pelcro-root .selectedProduct img {
1733
+ max-width: 150px;
1734
+ height: auto;
1667
1735
  }
1668
1736
 
1669
- /* Chrome, Edge, and Safari */
1670
-
1671
- .pelcro-root .productTabs .tabs::-webkit-scrollbar {
1672
- width: 15px;
1673
- height: 5px;
1737
+ .pelcro-root .pelcro-select-plan-wrapper:hover, .pelcro-root .pelcro-select-product-wrapper:hover{
1738
+ border-width: 2px;
1739
+ border-color: hsl(var(--plc-primary-hue), var(--plc-primary-saturation), var(--plc-primary-lightness));
1674
1740
  }
1675
1741
 
1676
- .pelcro-root .productTabs .tabs::-webkit-scrollbar-track {
1677
- background: lightGrey;
1678
- border-radius: 5px;
1742
+ .pelcro-root .pelcro-select-plan-wrapper:hover,
1743
+ .pelcro-root .pelcro-select-product-wrapper:hover{
1744
+ transform: scale(1.05);
1745
+ transition: all 0.2s ease-out;
1746
+ box-shadow: 0px 4px 8px rgba(38, 38, 38, 0.2);
1679
1747
  }
1680
1748
 
1681
- .pelcro-root .productTabs .tabs::-webkit-scrollbar-thumb {
1682
- background-color: hsl(var(--plc-primary-hue), var(--plc-primary-saturation), var(--plc-primary-lightness));
1683
- border-radius: 14px;
1749
+ .pelcro-root .pelcro-select-plan-wrapper,
1750
+ .pelcro-root .pelcro-select-product-wrapper {
1751
+ transition: all 0.2s ease-in-out;
1684
1752
  }
1685
1753
 
1686
- .pelcro-root .productTabs .tabs li:first-child {
1687
- margin-left: auto;
1754
+ .pelcro-root .loginOptions.threeColumns {
1755
+ display: flex;
1756
+ flex-wrap: wrap;
1757
+ justify-content: center;
1688
1758
  }
1689
1759
 
1690
- .pelcro-root .productTabs .tabs li:last-child {
1691
- margin-right: auto;
1760
+ .pelcro-root .loginOptions.threeColumns li {
1761
+ flex: 1;
1762
+ min-width: 140px;
1763
+ margin-bottom: 10px;
1692
1764
  }
1693
1765
 
1694
- .pelcro-root .productTabs .tabs li#activeTab button {
1695
- color: hsl(var(--plc-primary-hue), var(--plc-primary-saturation), calc(var(--plc-primary-lightness) - 30%));
1766
+ .pelcro-root .loginOptions.threeColumns li:first-child {
1767
+ margin-right: 10px;
1696
1768
  }
1697
1769
 
1698
- .pelcro-root .productTabs .tabs li#activeTab:after {
1699
- content: "";
1700
- position: absolute;
1701
- bottom: 0px;
1702
- left: 0px;
1703
- display: block;
1704
- height: 0.25rem;
1705
- width: 100%;
1706
- background-color: hsl(var(--plc-primary-hue), var(--plc-primary-saturation), calc(var(--plc-primary-lightness) - 30%));
1770
+ .pelcro-root
1771
+ .loginOptions.threeColumns
1772
+ li:nth-child(2):not(:last-child) {
1773
+ margin-right: 10px;
1707
1774
  }
1708
1775
 
1709
- .pelcro-root .selectedProduct img {
1710
- max-width: 150px;
1711
- height: auto;
1776
+ .pelcro-root .loginOptions.twoColumns {
1777
+ display: grid;
1778
+ grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
1779
+ gap: 10px;
1712
1780
  }
1713
1781
 
1714
1782
  .pelcro-user-profile-picture:hover {
1715
1783
  filter: brightness(0.8);
1716
1784
  }
1717
1785
 
1786
+ #pelcro-view-dashboard-submenus {
1787
+ /* From https://css.glass */
1788
+ background: rgba(255, 255, 255, 0.12);
1789
+ /* border-radius: 16px; */
1790
+ /* box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1); */
1791
+ backdrop-filter: blur(3.5px);
1792
+ -webkit-backdrop-filter: blur(3.5px);
1793
+ }
1794
+
1718
1795
  /* used by multiple input sub-components */
1719
1796
 
1720
1797
  /* Slider */
@@ -1733,7 +1810,9 @@ Add the correct display in Chrome and Safari.
1733
1810
  display: block;
1734
1811
  overflow: hidden;
1735
1812
  padding: 0;
1736
- margin: 0 -10px;
1813
+ padding-top: 0.75rem;
1814
+ padding-bottom: 0.75rem;
1815
+ /* margin: 0 -10px; */
1737
1816
  }
1738
1817
 
1739
1818
  .pelcro-root .slick-list:focus {
@@ -1772,7 +1851,7 @@ Add the correct display in Chrome and Safari.
1772
1851
  }
1773
1852
 
1774
1853
  .pelcro-root .slick-slide {
1775
- display: flex;
1854
+ display: flex !important;
1776
1855
  align-self: stretch;
1777
1856
  height: unset;
1778
1857
  margin: 0 10px;
@@ -1816,8 +1895,8 @@ Add the correct display in Chrome and Safari.
1816
1895
  }
1817
1896
 
1818
1897
  .pelcro-root .slick-disabled {
1819
- opacity: 0.5;
1820
- cursor: not-allowed;
1898
+ opacity: 0;
1899
+ cursor: auto;
1821
1900
  }
1822
1901
 
1823
1902
  .pelcro-root .slick-dots {
@@ -1825,28 +1904,69 @@ Add the correct display in Chrome and Safari.
1825
1904
  display: flex !important;
1826
1905
  align-items: center;
1827
1906
  justify-content: center;
1907
+ flex-wrap: wrap;
1828
1908
  }
1829
1909
 
1830
1910
  .pelcro-root .slick-dots li {
1831
- padding: 2px;
1832
- border: solid 1px transparent;
1833
- border-radius: 9999999px;
1834
- width: 20px;
1835
- height: 20px;
1836
- display: flex;
1837
- align-items: center;
1838
- justify-content: center;
1839
- line-height: 1;
1911
+ margin: 0 2px;
1840
1912
  }
1841
1913
 
1842
- .pelcro-root .slick-dots li.slick-active {
1914
+ .pelcro-root .slick-dots li.slick-active span {
1843
1915
  border-color: grey;
1916
+ background-color: hsl(
1917
+ var(--plc-primary-hue),
1918
+ var(--plc-primary-saturation),
1919
+ var(--plc-primary-lightness)
1920
+ );
1844
1921
  }
1845
1922
 
1846
1923
  .pelcro-root .slick-arrow {
1847
1924
  outline: none !important;
1848
1925
  }
1849
1926
 
1927
+ .custom-single-value {
1928
+ display: flex;
1929
+ align-items: center;
1930
+ }
1931
+
1932
+ .custom-option {
1933
+ display: flex;
1934
+ align-items: center;
1935
+ padding: 5px;
1936
+ }
1937
+
1938
+ .custom-option img {
1939
+ margin-right: 10px;
1940
+ }
1941
+
1942
+ .css-hlgwow {
1943
+ display: flex !important;
1944
+ }
1945
+
1946
+ .custom-option {
1947
+ display: flex;
1948
+ align-items: center;
1949
+ cursor: pointer; /* Show pointer cursor on hover */
1950
+ padding: 10px; /* Add padding for better hover area */
1951
+ }
1952
+
1953
+ .custom-option:hover {
1954
+ background-color: #f0f0f0; /* Highlight background on hover */
1955
+ }
1956
+
1957
+ .custom-single-value {
1958
+ display: flex;
1959
+ align-items: center;
1960
+ }
1961
+
1962
+ .menu-list {
1963
+ font-family: "Lato", system-ui, -apple-system,
1964
+ /* Firefox supports this but not yet `system-ui` */
1965
+ "Segoe UI",
1966
+ Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji",
1967
+ "Segoe UI Emoji";
1968
+ }
1969
+
1850
1970
  /*
1851
1971
  styling is copied from react-easy-crop/react-easy-crop.css
1852
1972
  in order to scope selectors under pelcro-root
@@ -1921,527 +2041,639 @@ in order to scope selectors under pelcro-root
1921
2041
  border-right: 0;
1922
2042
  }
1923
2043
 
2044
+ apple-pay-button {
2045
+ --apple-pay-button-width: 100%;
2046
+ --apple-pay-button-height: 48px;
2047
+ --apple-pay-button-border-radius: 0.25rem;
2048
+ --apple-pay-button-padding: 0px 0px;
2049
+ --apple-pay-button-box-sizing: border-box;
2050
+ }
2051
+
1924
2052
  /* utilities */
1925
2053
 
1926
- .pelcro-root .plc-pointer-events-none {
2054
+ .pelcro-root .plc-pointer-events-none{
1927
2055
  pointer-events: none;
1928
2056
  }
1929
2057
 
1930
- .pelcro-root .plc-fixed {
2058
+ .pelcro-root .plc-fixed{
1931
2059
  position: fixed;
1932
2060
  }
1933
2061
 
1934
- .pelcro-root .plc-absolute {
2062
+ .pelcro-root .plc-absolute{
1935
2063
  position: absolute;
1936
2064
  }
1937
2065
 
1938
- .pelcro-root .plc-relative {
2066
+ .pelcro-root .plc-relative{
1939
2067
  position: relative;
1940
2068
  }
1941
2069
 
1942
- .pelcro-root .plc-inset-0 {
2070
+ .pelcro-root .plc-inset-0{
1943
2071
  top: 0px;
1944
2072
  right: 0px;
1945
2073
  bottom: 0px;
1946
2074
  left: 0px;
1947
2075
  }
1948
2076
 
1949
- .pelcro-root .plc-inset-y-0 {
2077
+ .pelcro-root .plc-inset-y-0{
1950
2078
  top: 0px;
1951
2079
  bottom: 0px;
1952
2080
  }
1953
2081
 
1954
- .pelcro-root .plc-top-0 {
2082
+ .pelcro-root .plc-top-0{
1955
2083
  top: 0px;
1956
2084
  }
1957
2085
 
1958
- .pelcro-root .plc-top-1 {
2086
+ .pelcro-root .plc-top-1{
1959
2087
  top: 0.25rem;
1960
2088
  }
1961
2089
 
1962
- .pelcro-root .plc-top-5 {
2090
+ .pelcro-root .plc-top-4{
2091
+ top: 1rem;
2092
+ }
2093
+
2094
+ .pelcro-root .plc-top-5{
1963
2095
  top: 1.25rem;
1964
2096
  }
1965
2097
 
1966
- .pelcro-root .plc-top-7 {
1967
- top: 1.75rem;
2098
+ .pelcro-root .plc-top-6{
2099
+ top: 1.5rem;
1968
2100
  }
1969
2101
 
1970
- .pelcro-root .plc-top-24 {
2102
+ .pelcro-root .plc-top-24{
1971
2103
  top: 6rem;
1972
2104
  }
1973
2105
 
1974
- .pelcro-root .plc-top-1\.5 {
2106
+ .pelcro-root .plc-top-1\.5{
1975
2107
  top: 0.375rem;
1976
2108
  }
1977
2109
 
1978
- .pelcro-root .plc-top-1\/2 {
2110
+ .pelcro-root .plc--top-1{
2111
+ top: -0.25rem;
2112
+ }
2113
+
2114
+ .pelcro-root .plc--top-3{
2115
+ top: -0.75rem;
2116
+ }
2117
+
2118
+ .pelcro-root .plc-top-1\/2{
1979
2119
  top: 50%;
1980
2120
  }
1981
2121
 
1982
- .pelcro-root .plc-right-0 {
2122
+ .pelcro-root .plc-right-0{
1983
2123
  right: 0px;
1984
2124
  }
1985
2125
 
1986
- .pelcro-root .plc-right-1 {
2126
+ .pelcro-root .plc-right-1{
1987
2127
  right: 0.25rem;
1988
2128
  }
1989
2129
 
1990
- .pelcro-root .plc-right-2 {
2130
+ .pelcro-root .plc-right-2{
1991
2131
  right: 0.5rem;
1992
2132
  }
1993
2133
 
1994
- .pelcro-root .plc-right-10 {
1995
- right: 2.5rem;
2134
+ .pelcro-root .plc-right-3{
2135
+ right: 0.75rem;
2136
+ }
2137
+
2138
+ .pelcro-root .plc-right-4{
2139
+ right: 1rem;
2140
+ }
2141
+
2142
+ .pelcro-root .plc-right-5{
2143
+ right: 1.25rem;
1996
2144
  }
1997
2145
 
1998
- .pelcro-root .plc--right-16 {
1999
- right: -4rem;
2146
+ .pelcro-root .plc--right-14{
2147
+ right: -3.5rem;
2000
2148
  }
2001
2149
 
2002
- .pelcro-root .plc-bottom-0 {
2150
+ .pelcro-root .plc-bottom-0{
2003
2151
  bottom: 0px;
2004
2152
  }
2005
2153
 
2006
- .pelcro-root .plc-bottom-4 {
2154
+ .pelcro-root .plc-bottom-4{
2007
2155
  bottom: 1rem;
2008
2156
  }
2009
2157
 
2010
- .pelcro-root .plc-left-0 {
2158
+ .pelcro-root .plc-left-0{
2011
2159
  left: 0px;
2012
2160
  }
2013
2161
 
2014
- .pelcro-root .plc-left-4 {
2162
+ .pelcro-root .plc-left-4{
2015
2163
  left: 1rem;
2016
2164
  }
2017
2165
 
2018
- .pelcro-root .plc-left-5 {
2019
- left: 1.25rem;
2166
+ .pelcro-root .plc-left-6{
2167
+ left: 1.5rem;
2020
2168
  }
2021
2169
 
2022
- .pelcro-root .plc--left-16 {
2023
- left: -4rem;
2170
+ .pelcro-root .plc--left-14{
2171
+ left: -3.5rem;
2024
2172
  }
2025
2173
 
2026
- .pelcro-root .plc-z-max {
2174
+ .pelcro-root .plc-z-max{
2027
2175
  z-index: 999999;
2028
2176
  }
2029
2177
 
2030
- .pelcro-root .plc-order-1 {
2178
+ .pelcro-root .plc-order-1{
2031
2179
  order: 1;
2032
2180
  }
2033
2181
 
2034
- .pelcro-root .plc-order-2 {
2182
+ .pelcro-root .plc-order-2{
2035
2183
  order: 2;
2036
2184
  }
2037
2185
 
2038
- .pelcro-root .plc-m-0 {
2186
+ .pelcro-root .plc-m-0{
2039
2187
  margin: 0px;
2040
2188
  }
2041
2189
 
2042
- .pelcro-root .plc-m-3 {
2190
+ .pelcro-root .plc-m-1{
2191
+ margin: 0.25rem;
2192
+ }
2193
+
2194
+ .pelcro-root .plc-m-3{
2043
2195
  margin: 0.75rem;
2044
2196
  }
2045
2197
 
2046
- .pelcro-root .plc-m-auto {
2198
+ .pelcro-root .plc-m-auto{
2047
2199
  margin: auto;
2048
2200
  }
2049
2201
 
2050
- .pelcro-root .plc-mx-4 {
2051
- margin-left: 1rem;
2052
- margin-right: 1rem;
2202
+ .pelcro-root .plc-m-0\.5{
2203
+ margin: 0.125rem;
2053
2204
  }
2054
2205
 
2055
- .pelcro-root .plc-mx-auto {
2206
+ .pelcro-root .plc-mx-auto{
2056
2207
  margin-left: auto;
2057
2208
  margin-right: auto;
2058
2209
  }
2059
2210
 
2060
- .pelcro-root .plc-my-2 {
2211
+ .pelcro-root .plc-my-2{
2061
2212
  margin-top: 0.5rem;
2062
2213
  margin-bottom: 0.5rem;
2063
2214
  }
2064
2215
 
2065
- .pelcro-root .plc-my-4 {
2216
+ .pelcro-root .plc-my-4{
2066
2217
  margin-top: 1rem;
2067
2218
  margin-bottom: 1rem;
2068
2219
  }
2069
2220
 
2070
- .pelcro-root .plc-my-5 {
2221
+ .pelcro-root .plc-my-5{
2071
2222
  margin-top: 1.25rem;
2072
2223
  margin-bottom: 1.25rem;
2073
2224
  }
2074
2225
 
2075
- .pelcro-root .plc-my-20 {
2076
- margin-top: 5rem;
2077
- margin-bottom: 5rem;
2226
+ .pelcro-root .plc-my-11{
2227
+ margin-top: 2.75rem;
2228
+ margin-bottom: 2.75rem;
2078
2229
  }
2079
2230
 
2080
- .pelcro-root .plc-mt-1 {
2231
+ .pelcro-root .plc-my-auto{
2232
+ margin-top: auto;
2233
+ margin-bottom: auto;
2234
+ }
2235
+
2236
+ .pelcro-root .plc-mt-1{
2081
2237
  margin-top: 0.25rem;
2082
2238
  }
2083
2239
 
2084
- .pelcro-root .plc-mt-2 {
2240
+ .pelcro-root .plc-mt-2{
2085
2241
  margin-top: 0.5rem;
2086
2242
  }
2087
2243
 
2088
- .pelcro-root .plc-mt-3 {
2244
+ .pelcro-root .plc-mt-3{
2089
2245
  margin-top: 0.75rem;
2090
2246
  }
2091
2247
 
2092
- .pelcro-root .plc-mt-4 {
2248
+ .pelcro-root .plc-mt-4{
2093
2249
  margin-top: 1rem;
2094
2250
  }
2095
2251
 
2096
- .pelcro-root .plc-mt-5 {
2252
+ .pelcro-root .plc-mt-5{
2097
2253
  margin-top: 1.25rem;
2098
2254
  }
2099
2255
 
2100
- .pelcro-root .plc-mt-6 {
2256
+ .pelcro-root .plc-mt-6{
2101
2257
  margin-top: 1.5rem;
2102
2258
  }
2103
2259
 
2104
- .pelcro-root .plc-mt-8 {
2105
- margin-top: 2rem;
2106
- }
2107
-
2108
- .pelcro-root .plc-mt-auto {
2260
+ .pelcro-root .plc-mt-auto{
2109
2261
  margin-top: auto;
2110
2262
  }
2111
2263
 
2112
- .pelcro-root .plc--mt-8 {
2264
+ .pelcro-root .plc--mt-8{
2113
2265
  margin-top: -2rem;
2114
2266
  }
2115
2267
 
2116
- .pelcro-root .plc-mr-1 {
2268
+ .pelcro-root .plc-mr-1{
2117
2269
  margin-right: 0.25rem;
2118
2270
  }
2119
2271
 
2120
- .pelcro-root .plc-mr-2 {
2272
+ .pelcro-root .plc-mr-2{
2121
2273
  margin-right: 0.5rem;
2122
2274
  }
2123
2275
 
2124
- .pelcro-root .plc-mr-6 {
2276
+ .pelcro-root .plc-mr-4{
2277
+ margin-right: 1rem;
2278
+ }
2279
+
2280
+ .pelcro-root .plc-mr-6{
2125
2281
  margin-right: 1.5rem;
2126
2282
  }
2127
2283
 
2128
- .pelcro-root .plc-mb-1 {
2284
+ .pelcro-root .plc-mr-auto{
2285
+ margin-right: auto;
2286
+ }
2287
+
2288
+ .pelcro-root .plc-mb-1{
2129
2289
  margin-bottom: 0.25rem;
2130
2290
  }
2131
2291
 
2132
- .pelcro-root .plc-mb-2 {
2292
+ .pelcro-root .plc-mb-2{
2133
2293
  margin-bottom: 0.5rem;
2134
2294
  }
2135
2295
 
2136
- .pelcro-root .plc-mb-3 {
2296
+ .pelcro-root .plc-mb-3{
2137
2297
  margin-bottom: 0.75rem;
2138
2298
  }
2139
2299
 
2140
- .pelcro-root .plc-mb-4 {
2300
+ .pelcro-root .plc-mb-4{
2141
2301
  margin-bottom: 1rem;
2142
2302
  }
2143
2303
 
2144
- .pelcro-root .plc-mb-6 {
2304
+ .pelcro-root .plc-mb-6{
2145
2305
  margin-bottom: 1.5rem;
2146
2306
  }
2147
2307
 
2148
- .pelcro-root .plc-mb-8 {
2308
+ .pelcro-root .plc-mb-8{
2149
2309
  margin-bottom: 2rem;
2150
2310
  }
2151
2311
 
2152
- .pelcro-root .plc-mb-9 {
2312
+ .pelcro-root .plc-mb-9{
2153
2313
  margin-bottom: 2.25rem;
2154
2314
  }
2155
2315
 
2156
- .pelcro-root .plc-ml-0 {
2316
+ .pelcro-root .plc-mb-10{
2317
+ margin-bottom: 2.5rem;
2318
+ }
2319
+
2320
+ .pelcro-root .plc-ml-0{
2157
2321
  margin-left: 0px;
2158
2322
  }
2159
2323
 
2160
- .pelcro-root .plc-ml-1 {
2324
+ .pelcro-root .plc-ml-1{
2161
2325
  margin-left: 0.25rem;
2162
2326
  }
2163
2327
 
2164
- .pelcro-root .plc-ml-2 {
2328
+ .pelcro-root .plc-ml-2{
2165
2329
  margin-left: 0.5rem;
2166
2330
  }
2167
2331
 
2168
- .pelcro-root .plc-ml-3 {
2332
+ .pelcro-root .plc-ml-3{
2169
2333
  margin-left: 0.75rem;
2170
2334
  }
2171
2335
 
2172
- .pelcro-root .plc-ml-4 {
2336
+ .pelcro-root .plc-ml-4{
2173
2337
  margin-left: 1rem;
2174
2338
  }
2175
2339
 
2176
- .pelcro-root .plc--ml-2 {
2340
+ .pelcro-root .plc-ml-11{
2341
+ margin-left: 2.75rem;
2342
+ }
2343
+
2344
+ .pelcro-root .plc--ml-2{
2177
2345
  margin-left: -0.5rem;
2178
2346
  }
2179
2347
 
2180
- .pelcro-root .last\:plc-mb-0:last-child {
2348
+ .pelcro-root .last\:plc-mb-0:last-child{
2181
2349
  margin-bottom: 0px;
2182
2350
  }
2183
2351
 
2184
- .pelcro-root .plc-block {
2352
+ .pelcro-root .plc-block{
2185
2353
  display: block;
2186
2354
  }
2187
2355
 
2188
- .pelcro-root .plc-inline-block {
2356
+ .pelcro-root .plc-inline-block{
2189
2357
  display: inline-block;
2190
2358
  }
2191
2359
 
2192
- .pelcro-root .plc-flex {
2360
+ .pelcro-root .plc-inline{
2361
+ display: inline;
2362
+ }
2363
+
2364
+ .pelcro-root .plc-flex{
2193
2365
  display: flex;
2194
2366
  }
2195
2367
 
2196
- .pelcro-root .plc-inline-flex {
2368
+ .pelcro-root .plc-inline-flex{
2197
2369
  display: inline-flex;
2198
2370
  }
2199
2371
 
2200
- .pelcro-root .plc-grid {
2372
+ .pelcro-root .plc-flow-root{
2373
+ display: flow-root;
2374
+ }
2375
+
2376
+ .pelcro-root .plc-grid{
2201
2377
  display: grid;
2202
2378
  }
2203
2379
 
2204
- .pelcro-root .plc-hidden {
2380
+ .pelcro-root .plc-hidden{
2205
2381
  display: none;
2206
2382
  }
2207
2383
 
2208
- .pelcro-root .plc-h-3 {
2384
+ .pelcro-root .plc-h-3{
2209
2385
  height: 0.75rem;
2210
2386
  }
2211
2387
 
2212
- .pelcro-root .plc-h-4 {
2388
+ .pelcro-root .plc-h-4{
2213
2389
  height: 1rem;
2214
2390
  }
2215
2391
 
2216
- .pelcro-root .plc-h-5 {
2392
+ .pelcro-root .plc-h-5{
2217
2393
  height: 1.25rem;
2218
2394
  }
2219
2395
 
2220
- .pelcro-root .plc-h-6 {
2396
+ .pelcro-root .plc-h-6{
2221
2397
  height: 1.5rem;
2222
2398
  }
2223
2399
 
2224
- .pelcro-root .plc-h-7 {
2400
+ .pelcro-root .plc-h-7{
2225
2401
  height: 1.75rem;
2226
2402
  }
2227
2403
 
2228
- .pelcro-root .plc-h-8 {
2404
+ .pelcro-root .plc-h-8{
2229
2405
  height: 2rem;
2230
2406
  }
2231
2407
 
2232
- .pelcro-root .plc-h-9 {
2408
+ .pelcro-root .plc-h-9{
2233
2409
  height: 2.25rem;
2234
2410
  }
2235
2411
 
2236
- .pelcro-root .plc-h-10 {
2412
+ .pelcro-root .plc-h-10{
2237
2413
  height: 2.5rem;
2238
2414
  }
2239
2415
 
2240
- .pelcro-root .plc-h-11 {
2416
+ .pelcro-root .plc-h-11{
2241
2417
  height: 2.75rem;
2242
2418
  }
2243
2419
 
2244
- .pelcro-root .plc-h-12 {
2420
+ .pelcro-root .plc-h-12{
2245
2421
  height: 3rem;
2246
2422
  }
2247
2423
 
2248
- .pelcro-root .plc-h-20 {
2424
+ .pelcro-root .plc-h-16{
2425
+ height: 4rem;
2426
+ }
2427
+
2428
+ .pelcro-root .plc-h-20{
2249
2429
  height: 5rem;
2250
2430
  }
2251
2431
 
2252
- .pelcro-root .plc-h-28 {
2432
+ .pelcro-root .plc-h-24{
2433
+ height: 6rem;
2434
+ }
2435
+
2436
+ .pelcro-root .plc-h-28{
2253
2437
  height: 7rem;
2254
2438
  }
2255
2439
 
2256
- .pelcro-root .plc-h-32 {
2440
+ .pelcro-root .plc-h-32{
2257
2441
  height: 8rem;
2258
2442
  }
2259
2443
 
2260
- .pelcro-root .plc-h-36 {
2444
+ .pelcro-root .plc-h-36{
2261
2445
  height: 9rem;
2262
2446
  }
2263
2447
 
2264
- .pelcro-root .plc-h-52 {
2448
+ .pelcro-root .plc-h-52{
2265
2449
  height: 13rem;
2266
2450
  }
2267
2451
 
2268
- .pelcro-root .plc-h-auto {
2452
+ .pelcro-root .plc-h-auto{
2269
2453
  height: auto;
2270
2454
  }
2271
2455
 
2272
- .pelcro-root .plc-h-full {
2456
+ .pelcro-root .plc-h-full{
2273
2457
  height: 100%;
2274
2458
  }
2275
2459
 
2276
- .pelcro-root .plc-max-h-0 {
2460
+ .pelcro-root .plc-max-h-0{
2277
2461
  max-height: 0px;
2278
2462
  }
2279
2463
 
2280
- .pelcro-root .plc-max-h-14 {
2464
+ .pelcro-root .plc-max-h-14{
2281
2465
  max-height: 3.5rem;
2282
2466
  }
2283
2467
 
2284
- .pelcro-root .plc-max-h-80 {
2468
+ .pelcro-root .plc-max-h-48{
2469
+ max-height: 12rem;
2470
+ }
2471
+
2472
+ .pelcro-root .plc-max-h-80{
2285
2473
  max-height: 20rem;
2286
2474
  }
2287
2475
 
2288
- .pelcro-root .plc-max-h-full {
2476
+ .pelcro-root .plc-max-h-checkout{
2477
+ max-height: 35rem;
2478
+ }
2479
+
2480
+ .pelcro-root .plc-max-h-full{
2289
2481
  max-height: 100%;
2290
2482
  }
2291
2483
 
2292
- .pelcro-root .plc-min-h-12 {
2484
+ .pelcro-root .plc-min-h-0{
2485
+ min-height: 0px;
2486
+ }
2487
+
2488
+ .pelcro-root .plc-min-h-12{
2293
2489
  min-height: 3rem;
2294
2490
  }
2295
2491
 
2296
- .pelcro-root .plc-w-3 {
2492
+ .pelcro-root .plc-min-h-14{
2493
+ min-height: 5rem;
2494
+ }
2495
+
2496
+ .pelcro-root .plc-min-h-16{
2497
+ min-height: 6rem;
2498
+ }
2499
+
2500
+ .pelcro-root .plc-min-h-card{
2501
+ min-height: 24.75rem;
2502
+ }
2503
+
2504
+ .pelcro-root .plc-w-3{
2297
2505
  width: 0.75rem;
2298
2506
  }
2299
2507
 
2300
- .pelcro-root .plc-w-4 {
2508
+ .pelcro-root .plc-w-4{
2301
2509
  width: 1rem;
2302
2510
  }
2303
2511
 
2304
- .pelcro-root .plc-w-5 {
2512
+ .pelcro-root .plc-w-5{
2305
2513
  width: 1.25rem;
2306
2514
  }
2307
2515
 
2308
- .pelcro-root .plc-w-6 {
2516
+ .pelcro-root .plc-w-6{
2309
2517
  width: 1.5rem;
2310
2518
  }
2311
2519
 
2312
- .pelcro-root .plc-w-7 {
2520
+ .pelcro-root .plc-w-7{
2313
2521
  width: 1.75rem;
2314
2522
  }
2315
2523
 
2316
- .pelcro-root .plc-w-8 {
2524
+ .pelcro-root .plc-w-8{
2317
2525
  width: 2rem;
2318
2526
  }
2319
2527
 
2320
- .pelcro-root .plc-w-9 {
2528
+ .pelcro-root .plc-w-9{
2321
2529
  width: 2.25rem;
2322
2530
  }
2323
2531
 
2324
- .pelcro-root .plc-w-10 {
2532
+ .pelcro-root .plc-w-10{
2325
2533
  width: 2.5rem;
2326
2534
  }
2327
2535
 
2328
- .pelcro-root .plc-w-11 {
2536
+ .pelcro-root .plc-w-11{
2329
2537
  width: 2.75rem;
2330
2538
  }
2331
2539
 
2332
- .pelcro-root .plc-w-12 {
2540
+ .pelcro-root .plc-w-12{
2333
2541
  width: 3rem;
2334
2542
  }
2335
2543
 
2336
- .pelcro-root .plc-w-16 {
2544
+ .pelcro-root .plc-w-16{
2337
2545
  width: 4rem;
2338
2546
  }
2339
2547
 
2340
- .pelcro-root .plc-w-20 {
2548
+ .pelcro-root .plc-w-20{
2341
2549
  width: 5rem;
2342
2550
  }
2343
2551
 
2344
- .pelcro-root .plc-w-24 {
2552
+ .pelcro-root .plc-w-24{
2345
2553
  width: 6rem;
2346
2554
  }
2347
2555
 
2348
- .pelcro-root .plc-w-32 {
2556
+ .pelcro-root .plc-w-32{
2349
2557
  width: 8rem;
2350
2558
  }
2351
2559
 
2352
- .pelcro-root .plc-w-36 {
2560
+ .pelcro-root .plc-w-36{
2353
2561
  width: 9rem;
2354
2562
  }
2355
2563
 
2356
- .pelcro-root .plc-w-56 {
2564
+ .pelcro-root .plc-w-56{
2357
2565
  width: 14rem;
2358
2566
  }
2359
2567
 
2360
- .pelcro-root .plc-w-auto {
2568
+ .pelcro-root .plc-w-84{
2569
+ width: 22.875rem;
2570
+ }
2571
+
2572
+ .pelcro-root .plc-w-auto{
2361
2573
  width: auto;
2362
2574
  }
2363
2575
 
2364
- .pelcro-root .plc-w-1\/2 {
2576
+ .pelcro-root .plc-w-1\/2{
2365
2577
  width: 50%;
2366
2578
  }
2367
2579
 
2368
- .pelcro-root .plc-w-1\/4 {
2580
+ .pelcro-root .plc-w-1\/3{
2581
+ width: 33.333333%;
2582
+ }
2583
+
2584
+ .pelcro-root .plc-w-1\/4{
2369
2585
  width: 25%;
2370
2586
  }
2371
2587
 
2372
- .pelcro-root .plc-w-1\/5 {
2588
+ .pelcro-root .plc-w-3\/4{
2589
+ width: 75%;
2590
+ }
2591
+
2592
+ .pelcro-root .plc-w-1\/5{
2373
2593
  width: 20%;
2374
2594
  }
2375
2595
 
2376
- .pelcro-root .plc-w-2\/5 {
2596
+ .pelcro-root .plc-w-2\/5{
2377
2597
  width: 40%;
2378
2598
  }
2379
2599
 
2380
- .pelcro-root .plc-w-2\/12 {
2600
+ .pelcro-root .plc-w-2\/12{
2381
2601
  width: 16.666667%;
2382
2602
  }
2383
2603
 
2384
- .pelcro-root .plc-w-3\/12 {
2604
+ .pelcro-root .plc-w-3\/12{
2385
2605
  width: 25%;
2386
2606
  }
2387
2607
 
2388
- .pelcro-root .plc-w-4\/12 {
2608
+ .pelcro-root .plc-w-4\/12{
2389
2609
  width: 33.333333%;
2390
2610
  }
2391
2611
 
2392
- .pelcro-root .plc-w-5\/12 {
2612
+ .pelcro-root .plc-w-5\/12{
2393
2613
  width: 41.666667%;
2394
2614
  }
2395
2615
 
2396
- .pelcro-root .plc-w-6\/12 {
2616
+ .pelcro-root .plc-w-6\/12{
2397
2617
  width: 50%;
2398
2618
  }
2399
2619
 
2400
- .pelcro-root .plc-w-10\/12 {
2401
- width: 83.333333%;
2402
- }
2403
-
2404
- .pelcro-root .plc-w-full {
2620
+ .pelcro-root .plc-w-full{
2405
2621
  width: 100%;
2406
2622
  }
2407
2623
 
2408
- .pelcro-root .plc-w-max {
2624
+ .pelcro-root .plc-w-max{
2409
2625
  width: max-content;
2410
2626
  }
2411
2627
 
2412
- .pelcro-root .plc-max-w-50\% {
2413
- max-width: 50%;
2628
+ .pelcro-root .plc-max-w-xl{
2629
+ max-width: 36rem;
2630
+ }
2631
+
2632
+ .pelcro-root .plc-max-w-3xl{
2633
+ max-width: 48rem;
2634
+ }
2635
+
2636
+ .pelcro-root .plc-max-w-7xl{
2637
+ max-width: 80rem;
2414
2638
  }
2415
2639
 
2416
- .pelcro-root .plc-max-w-80\% {
2417
- max-width: 80%;
2640
+ .pelcro-root .plc-max-w-50\%{
2641
+ max-width: 50%;
2418
2642
  }
2419
2643
 
2420
- .pelcro-root .plc-max-w-full {
2644
+ .pelcro-root .plc-max-w-full{
2421
2645
  max-width: 100%;
2422
2646
  }
2423
2647
 
2424
- .pelcro-root .plc-flex-1 {
2648
+ .pelcro-root .plc-flex-1{
2425
2649
  flex: 1 1 0%;
2426
2650
  }
2427
2651
 
2428
- .pelcro-root .plc-flex-shrink-0 {
2652
+ .pelcro-root .plc-flex-auto{
2653
+ flex: 1 1 auto;
2654
+ }
2655
+
2656
+ .pelcro-root .plc-flex-none{
2657
+ flex: none;
2658
+ }
2659
+
2660
+ .pelcro-root .plc-flex-shrink-0{
2429
2661
  flex-shrink: 0;
2430
2662
  }
2431
2663
 
2432
- .pelcro-root .plc-flex-grow {
2664
+ .pelcro-root .plc-flex-grow{
2433
2665
  flex-grow: 1;
2434
2666
  }
2435
2667
 
2436
- .pelcro-root .plc-table-fixed {
2668
+ .pelcro-root .plc-table-fixed{
2437
2669
  table-layout: fixed;
2438
2670
  }
2439
2671
 
2440
- .pelcro-root .plc-origin-right {
2672
+ .pelcro-root .plc-origin-right{
2441
2673
  transform-origin: right;
2442
2674
  }
2443
2675
 
2444
- .pelcro-root .plc-transform {
2676
+ .pelcro-root .plc-transform{
2445
2677
  --tw-translate-x: 0;
2446
2678
  --tw-translate-y: 0;
2447
2679
  --tw-rotate: 0;
@@ -2452,966 +2684,1106 @@ in order to scope selectors under pelcro-root
2452
2684
  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));
2453
2685
  }
2454
2686
 
2455
- .pelcro-root .plc-translate-x-0 {
2687
+ .pelcro-root .plc-translate-x-0{
2456
2688
  --tw-translate-x: 0px;
2457
2689
  }
2458
2690
 
2459
- .pelcro-root .plc--translate-x-1 {
2691
+ .pelcro-root .plc--translate-x-1{
2460
2692
  --tw-translate-x: -0.25rem;
2461
2693
  }
2462
2694
 
2463
- .pelcro-root .plc--translate-x-full {
2695
+ .pelcro-root .plc-translate-x-full{
2696
+ --tw-translate-x: 100%;
2697
+ }
2698
+
2699
+ .pelcro-root .plc--translate-x-full{
2464
2700
  --tw-translate-x: -100%;
2465
2701
  }
2466
2702
 
2467
- .pelcro-root .plc--translate-y-1\/2 {
2703
+ .pelcro-root .plc--translate-y-1\/2{
2468
2704
  --tw-translate-y: -50%;
2469
2705
  }
2470
2706
 
2471
- .pelcro-root .plc-group:hover .group-hover\:plc-translate-x-1 {
2707
+ .pelcro-root .plc-group:hover .group-hover\:plc-translate-x-1{
2472
2708
  --tw-translate-x: 0.25rem;
2473
2709
  }
2474
2710
 
2475
- .pelcro-root .plc-rotate-90 {
2711
+ .pelcro-root .plc-rotate-90{
2476
2712
  --tw-rotate: 90deg;
2477
2713
  }
2478
2714
 
2479
- .pelcro-root .plc-rotate-180 {
2715
+ .pelcro-root .plc-rotate-180{
2480
2716
  --tw-rotate: 180deg;
2481
2717
  }
2482
2718
 
2483
- .pelcro-root .plc-scale-105 {
2719
+ .pelcro-root .plc-scale-105{
2484
2720
  --tw-scale-x: 1.05;
2485
2721
  --tw-scale-y: 1.05;
2486
2722
  }
2487
2723
 
2488
- .pelcro-root .plc-scale-120 {
2724
+ .pelcro-root .plc-scale-120{
2489
2725
  --tw-scale-x: 1.2;
2490
2726
  --tw-scale-y: 1.2;
2491
2727
  }
2492
2728
 
2493
- .pelcro-root .plc-scale-x-0 {
2729
+ .pelcro-root .plc-scale-x-0{
2494
2730
  --tw-scale-x: 0;
2495
2731
  }
2496
2732
 
2497
- .pelcro-root .plc-scale-x-100 {
2733
+ .pelcro-root .plc-scale-x-100{
2498
2734
  --tw-scale-x: 1;
2499
2735
  }
2500
2736
 
2501
- @keyframes plc-spin {
2502
- to {
2737
+ @keyframes plc-spin{
2738
+ to{
2503
2739
  transform: rotate(360deg);
2504
2740
  }
2505
2741
  }
2506
2742
 
2507
- @keyframes plc-ping {
2508
- 75%, 100% {
2743
+ @keyframes plc-ping{
2744
+ 75%, 100%{
2509
2745
  transform: scale(2);
2510
2746
  opacity: 0;
2511
2747
  }
2512
2748
  }
2513
2749
 
2514
- @keyframes plc-pulse {
2515
- 50% {
2750
+ @keyframes plc-pulse{
2751
+ 50%{
2516
2752
  opacity: .5;
2517
2753
  }
2518
2754
  }
2519
2755
 
2520
- @keyframes plc-bounce {
2521
- 0%, 100% {
2756
+ @keyframes plc-bounce{
2757
+ 0%, 100%{
2522
2758
  transform: translateY(-25%);
2523
2759
  animation-timing-function: cubic-bezier(0.8,0,1,1);
2524
2760
  }
2525
2761
 
2526
- 50% {
2762
+ 50%{
2527
2763
  transform: none;
2528
2764
  animation-timing-function: cubic-bezier(0,0,0.2,1);
2529
2765
  }
2530
2766
  }
2531
2767
 
2532
- @keyframes plc-slideInBottom {
2533
- 0% {
2768
+ @keyframes plc-slideInBottom{
2769
+ 0%{
2534
2770
  transform: translateY(1000px);
2535
2771
  opacity: 0;
2536
2772
  }
2537
2773
 
2538
- 100% {
2774
+ 100%{
2539
2775
  transform: translateY(0);
2540
2776
  opacity: 1;
2541
2777
  }
2542
2778
  }
2543
2779
 
2544
- .pelcro-root .plc-animate-spin {
2780
+ .pelcro-root .plc-animate-spin{
2545
2781
  animation: plc-spin 1s linear infinite;
2546
2782
  }
2547
2783
 
2548
- @media (prefers-reduced-motion: no-preference) {
2549
- .pelcro-root .motion-safe\:plc-animate-slideInBottom {
2784
+ .pelcro-root .plc-animate-pulse{
2785
+ animation: plc-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
2786
+ }
2787
+
2788
+ @media (prefers-reduced-motion: no-preference){
2789
+ .pelcro-root .motion-safe\:plc-animate-slideInBottom{
2550
2790
  animation: plc-slideInBottom 0.5s ease-out;
2551
2791
  }
2552
2792
  }
2553
2793
 
2554
- .pelcro-root .plc-cursor-default {
2794
+ .pelcro-root .plc-cursor-default{
2555
2795
  cursor: default;
2556
2796
  }
2557
2797
 
2558
- .pelcro-root .plc-cursor-pointer {
2798
+ .pelcro-root .plc-cursor-pointer{
2559
2799
  cursor: pointer;
2560
2800
  }
2561
2801
 
2562
- .pelcro-root .plc-select-none {
2802
+ .pelcro-root .plc-select-none{
2563
2803
  -webkit-user-select: none;
2564
2804
  user-select: none;
2565
2805
  }
2566
2806
 
2567
- .pelcro-root .plc-appearance-none {
2568
- -webkit-appearance: none;
2569
- appearance: none;
2807
+ .pelcro-root .plc-grid-cols-1{
2808
+ grid-template-columns: repeat(1, minmax(0, 1fr));
2809
+ }
2810
+
2811
+ .pelcro-root .plc-grid-cols-2{
2812
+ grid-template-columns: repeat(2, minmax(0, 1fr));
2570
2813
  }
2571
2814
 
2572
- .pelcro-root .plc-flex-row-reverse {
2815
+ .pelcro-root .plc-flex-row{
2816
+ flex-direction: row;
2817
+ }
2818
+
2819
+ .pelcro-root .plc-flex-row-reverse{
2573
2820
  flex-direction: row-reverse;
2574
2821
  }
2575
2822
 
2576
- .pelcro-root .plc-flex-col {
2823
+ .pelcro-root .plc-flex-col{
2577
2824
  flex-direction: column;
2578
2825
  }
2579
2826
 
2580
- .pelcro-root .plc-flex-wrap {
2827
+ .pelcro-root .plc-flex-wrap{
2581
2828
  flex-wrap: wrap;
2582
2829
  }
2583
2830
 
2584
- .pelcro-root .plc-place-items-center {
2831
+ .pelcro-root .plc-place-items-center{
2585
2832
  place-items: center;
2586
2833
  }
2587
2834
 
2588
- .pelcro-root .plc-items-start {
2835
+ .pelcro-root .plc-items-start{
2589
2836
  align-items: flex-start;
2590
2837
  }
2591
2838
 
2592
- .pelcro-root .plc-items-end {
2839
+ .pelcro-root .plc-items-end{
2593
2840
  align-items: flex-end;
2594
2841
  }
2595
2842
 
2596
- .pelcro-root .plc-items-center {
2843
+ .pelcro-root .plc-items-center{
2597
2844
  align-items: center;
2598
2845
  }
2599
2846
 
2600
- .pelcro-root .plc-items-stretch {
2847
+ .pelcro-root .plc-items-stretch{
2601
2848
  align-items: stretch;
2602
2849
  }
2603
2850
 
2604
- .pelcro-root .plc-justify-end {
2851
+ .pelcro-root .plc-justify-end{
2605
2852
  justify-content: flex-end;
2606
2853
  }
2607
2854
 
2608
- .pelcro-root .plc-justify-center {
2855
+ .pelcro-root .plc-justify-center{
2609
2856
  justify-content: center;
2610
2857
  }
2611
2858
 
2612
- .pelcro-root .plc-justify-between {
2859
+ .pelcro-root .plc-justify-between{
2613
2860
  justify-content: space-between;
2614
2861
  }
2615
2862
 
2616
- .pelcro-root .plc-justify-evenly {
2863
+ .pelcro-root .plc-justify-evenly{
2617
2864
  justify-content: space-evenly;
2618
2865
  }
2619
2866
 
2620
- .pelcro-root .plc-justify-items-center {
2867
+ .pelcro-root .plc-justify-items-center{
2621
2868
  justify-items: center;
2622
2869
  }
2623
2870
 
2624
- .pelcro-root .plc-gap-x-3 {
2871
+ .pelcro-root .plc-gap-4{
2872
+ gap: 1rem;
2873
+ }
2874
+
2875
+ .pelcro-root .plc-gap-20{
2876
+ gap: 5rem;
2877
+ }
2878
+
2879
+ .pelcro-root .plc-gap-x-3{
2625
2880
  column-gap: 0.75rem;
2626
2881
  }
2627
2882
 
2628
- .pelcro-root .plc-gap-y-2 {
2883
+ .pelcro-root .plc-gap-y-2{
2629
2884
  row-gap: 0.5rem;
2630
2885
  }
2631
2886
 
2632
- .pelcro-root .plc-gap-y-5 {
2887
+ .pelcro-root .plc-gap-y-5{
2633
2888
  row-gap: 1.25rem;
2634
2889
  }
2635
2890
 
2636
- .pelcro-root .plc-space-x-2 > :not([hidden]) ~ :not([hidden]) {
2891
+ .pelcro-root .plc-space-x-0 > :not([hidden]) ~ :not([hidden]){
2892
+ --tw-space-x-reverse: 0;
2893
+ margin-right: calc(0px * var(--tw-space-x-reverse));
2894
+ margin-left: calc(0px * calc(1 - var(--tw-space-x-reverse)));
2895
+ }
2896
+
2897
+ .pelcro-root .plc-space-x-2 > :not([hidden]) ~ :not([hidden]){
2637
2898
  --tw-space-x-reverse: 0;
2638
2899
  margin-right: calc(0.5rem * var(--tw-space-x-reverse));
2639
2900
  margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse)));
2640
2901
  }
2641
2902
 
2642
- .pelcro-root .plc-space-x-3 > :not([hidden]) ~ :not([hidden]) {
2903
+ .pelcro-root .plc-space-x-3 > :not([hidden]) ~ :not([hidden]){
2643
2904
  --tw-space-x-reverse: 0;
2644
2905
  margin-right: calc(0.75rem * var(--tw-space-x-reverse));
2645
2906
  margin-left: calc(0.75rem * calc(1 - var(--tw-space-x-reverse)));
2646
2907
  }
2647
2908
 
2648
- .pelcro-root .plc-space-y-2 > :not([hidden]) ~ :not([hidden]) {
2909
+ .pelcro-root .plc-space-x-4 > :not([hidden]) ~ :not([hidden]){
2910
+ --tw-space-x-reverse: 0;
2911
+ margin-right: calc(1rem * var(--tw-space-x-reverse));
2912
+ margin-left: calc(1rem * calc(1 - var(--tw-space-x-reverse)));
2913
+ }
2914
+
2915
+ .pelcro-root .plc-space-x-6 > :not([hidden]) ~ :not([hidden]){
2916
+ --tw-space-x-reverse: 0;
2917
+ margin-right: calc(1.5rem * var(--tw-space-x-reverse));
2918
+ margin-left: calc(1.5rem * calc(1 - var(--tw-space-x-reverse)));
2919
+ }
2920
+
2921
+ .pelcro-root .plc-space-y-1 > :not([hidden]) ~ :not([hidden]){
2922
+ --tw-space-y-reverse: 0;
2923
+ margin-top: calc(0.25rem * calc(1 - var(--tw-space-y-reverse)));
2924
+ margin-bottom: calc(0.25rem * var(--tw-space-y-reverse));
2925
+ }
2926
+
2927
+ .pelcro-root .plc-space-y-2 > :not([hidden]) ~ :not([hidden]){
2649
2928
  --tw-space-y-reverse: 0;
2650
2929
  margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));
2651
2930
  margin-bottom: calc(0.5rem * var(--tw-space-y-reverse));
2652
2931
  }
2653
2932
 
2654
- .pelcro-root .plc-space-y-4 > :not([hidden]) ~ :not([hidden]) {
2933
+ .pelcro-root .plc-space-y-3 > :not([hidden]) ~ :not([hidden]){
2934
+ --tw-space-y-reverse: 0;
2935
+ margin-top: calc(0.75rem * calc(1 - var(--tw-space-y-reverse)));
2936
+ margin-bottom: calc(0.75rem * var(--tw-space-y-reverse));
2937
+ }
2938
+
2939
+ .pelcro-root .plc-space-y-4 > :not([hidden]) ~ :not([hidden]){
2655
2940
  --tw-space-y-reverse: 0;
2656
2941
  margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));
2657
2942
  margin-bottom: calc(1rem * var(--tw-space-y-reverse));
2658
2943
  }
2659
2944
 
2660
- .pelcro-root .plc-overflow-auto {
2945
+ .pelcro-root .plc-space-y-6 > :not([hidden]) ~ :not([hidden]){
2946
+ --tw-space-y-reverse: 0;
2947
+ margin-top: calc(1.5rem * calc(1 - var(--tw-space-y-reverse)));
2948
+ margin-bottom: calc(1.5rem * var(--tw-space-y-reverse));
2949
+ }
2950
+
2951
+ .pelcro-root .plc-divide-y > :not([hidden]) ~ :not([hidden]){
2952
+ --tw-divide-y-reverse: 0;
2953
+ border-top-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
2954
+ border-bottom-width: calc(1px * var(--tw-divide-y-reverse));
2955
+ }
2956
+
2957
+ .pelcro-root .plc-divide-gray-200 > :not([hidden]) ~ :not([hidden]){
2958
+ --tw-divide-opacity: 1;
2959
+ border-color: rgba(229, 231, 235, var(--tw-divide-opacity));
2960
+ }
2961
+
2962
+ .pelcro-root .plc-overflow-auto{
2661
2963
  overflow: auto;
2662
2964
  }
2663
2965
 
2664
- .pelcro-root .plc-overflow-hidden {
2966
+ .pelcro-root .plc-overflow-hidden{
2665
2967
  overflow: hidden;
2666
2968
  }
2667
2969
 
2668
- .pelcro-root .plc-overflow-x-auto {
2669
- overflow-x: auto;
2970
+ .pelcro-root .plc-overflow-y-auto{
2971
+ overflow-y: auto;
2670
2972
  }
2671
2973
 
2672
- .pelcro-root .plc-overflow-y-auto {
2673
- overflow-y: auto;
2974
+ .pelcro-root .plc-overflow-x-hidden{
2975
+ overflow-x: hidden;
2674
2976
  }
2675
2977
 
2676
- .pelcro-root .plc-overflow-y-scroll {
2978
+ .pelcro-root .plc-overflow-y-scroll{
2677
2979
  overflow-y: scroll;
2678
2980
  }
2679
2981
 
2680
- .pelcro-root .plc-truncate {
2982
+ .pelcro-root .plc-truncate{
2681
2983
  overflow: hidden;
2682
2984
  text-overflow: ellipsis;
2683
2985
  white-space: nowrap;
2684
2986
  }
2685
2987
 
2686
- .pelcro-root .plc-whitespace-nowrap {
2687
- white-space: nowrap;
2988
+ .pelcro-root .plc-whitespace-normal{
2989
+ white-space: normal;
2688
2990
  }
2689
2991
 
2690
- .pelcro-root .plc-whitespace-pre-line {
2992
+ .pelcro-root .plc-whitespace-pre-line{
2691
2993
  white-space: pre-line;
2692
2994
  }
2693
2995
 
2694
- .pelcro-root .plc-break-words {
2996
+ .pelcro-root .plc-break-words{
2695
2997
  overflow-wrap: break-word;
2696
2998
  }
2697
2999
 
2698
- .pelcro-root .plc-rounded-none {
3000
+ .pelcro-root .plc-break-all{
3001
+ word-break: break-all;
3002
+ }
3003
+
3004
+ .pelcro-root .plc-rounded-none{
2699
3005
  border-radius: 0px;
2700
3006
  }
2701
3007
 
2702
- .pelcro-root .plc-rounded-sm {
3008
+ .pelcro-root .plc-rounded-sm{
2703
3009
  border-radius: 0.125rem;
2704
3010
  }
2705
3011
 
2706
- .pelcro-root .plc-rounded {
3012
+ .pelcro-root .plc-rounded{
2707
3013
  border-radius: 0.25rem;
2708
3014
  }
2709
3015
 
2710
- .pelcro-root .plc-rounded-md {
3016
+ .pelcro-root .plc-rounded-md{
2711
3017
  border-radius: 0.375rem;
2712
3018
  }
2713
3019
 
2714
- .pelcro-root .plc-rounded-lg {
3020
+ .pelcro-root .plc-rounded-lg{
2715
3021
  border-radius: 0.5rem;
2716
3022
  }
2717
3023
 
2718
- .pelcro-root .plc-rounded-2xl {
3024
+ .pelcro-root .plc-rounded-2xl{
2719
3025
  border-radius: 1rem;
2720
3026
  }
2721
3027
 
2722
- .pelcro-root .plc-rounded-full {
3028
+ .pelcro-root .plc-rounded-full{
2723
3029
  border-radius: 9999px;
2724
3030
  }
2725
3031
 
2726
- .pelcro-root .plc-border-0 {
3032
+ .pelcro-root .plc-rounded-t-lg{
3033
+ border-top-left-radius: 0.5rem;
3034
+ border-top-right-radius: 0.5rem;
3035
+ }
3036
+
3037
+ .pelcro-root .plc-rounded-b-sm{
3038
+ border-bottom-right-radius: 0.125rem;
3039
+ border-bottom-left-radius: 0.125rem;
3040
+ }
3041
+
3042
+ .pelcro-root .plc-border-0{
2727
3043
  border-width: 0px;
2728
3044
  }
2729
3045
 
2730
- .pelcro-root .plc-border-2 {
3046
+ .pelcro-root .plc-border-2{
2731
3047
  border-width: 2px;
2732
3048
  }
2733
3049
 
2734
- .pelcro-root .plc-border {
3050
+ .pelcro-root .plc-border{
2735
3051
  border-width: 1px;
2736
3052
  }
2737
3053
 
2738
- .pelcro-root .last\:plc-border-0:last-child {
3054
+ .pelcro-root .last\:plc-border-0:last-child{
2739
3055
  border-width: 0px;
2740
3056
  }
2741
3057
 
2742
- .pelcro-root .plc-border-t-2 {
3058
+ .pelcro-root .plc-border-t-2{
2743
3059
  border-top-width: 2px;
2744
3060
  }
2745
3061
 
2746
- .pelcro-root .plc-border-t-4 {
3062
+ .pelcro-root .plc-border-t-4{
2747
3063
  border-top-width: 4px;
2748
3064
  }
2749
3065
 
2750
- .pelcro-root .plc-border-t-8 {
3066
+ .pelcro-root .plc-border-t-8{
2751
3067
  border-top-width: 8px;
2752
3068
  }
2753
3069
 
2754
- .pelcro-root .plc-border-t {
3070
+ .pelcro-root .plc-border-t{
2755
3071
  border-top-width: 1px;
2756
3072
  }
2757
3073
 
2758
- .pelcro-root .plc-border-b-2 {
3074
+ .pelcro-root .plc-border-b-2{
2759
3075
  border-bottom-width: 2px;
2760
3076
  }
2761
3077
 
2762
- .pelcro-root .plc-border-b {
3078
+ .pelcro-root .plc-border-b-4{
3079
+ border-bottom-width: 4px;
3080
+ }
3081
+
3082
+ .pelcro-root .plc-border-b{
2763
3083
  border-bottom-width: 1px;
2764
3084
  }
2765
3085
 
2766
- .pelcro-root .plc-border-l-2 {
3086
+ .pelcro-root .plc-border-l-2{
2767
3087
  border-left-width: 2px;
2768
3088
  }
2769
3089
 
2770
- .pelcro-root .plc-border-l-4 {
3090
+ .pelcro-root .plc-border-l-4{
2771
3091
  border-left-width: 4px;
2772
3092
  }
2773
3093
 
2774
- .pelcro-root .plc-border-solid {
3094
+ .pelcro-root .plc-border-solid{
2775
3095
  border-style: solid;
2776
3096
  }
2777
3097
 
2778
- .pelcro-root .plc-border-transparent {
3098
+ .pelcro-root .plc-border-transparent{
2779
3099
  border-color: transparent;
2780
3100
  }
2781
3101
 
2782
- .pelcro-root .plc-border-primary-300 {
3102
+ .pelcro-root .plc-border-primary-300{
2783
3103
  border-color: hsl(var(--plc-primary-hue), var(--plc-primary-saturation), calc(var(--plc-primary-lightness) + 20%));
2784
3104
  }
2785
3105
 
2786
- .pelcro-root .plc-border-primary-400 {
3106
+ .pelcro-root .plc-border-primary-400{
2787
3107
  border-color: hsl(var(--plc-primary-hue), var(--plc-primary-saturation), calc(var(--plc-primary-lightness) + 10%));
2788
3108
  }
2789
3109
 
2790
- .pelcro-root .plc-border-primary-500 {
3110
+ .pelcro-root .plc-border-primary-500{
2791
3111
  border-color: hsl(var(--plc-primary-hue), var(--plc-primary-saturation), var(--plc-primary-lightness));
2792
3112
  }
2793
3113
 
2794
- .pelcro-root .plc-border-primary-800 {
2795
- border-color: hsl(var(--plc-primary-hue), var(--plc-primary-saturation), calc(var(--plc-primary-lightness) - 30%));
2796
- }
2797
-
2798
- .pelcro-root .plc-border-primary {
3114
+ .pelcro-root .plc-border-primary{
2799
3115
  border-color: hsl(var(--plc-primary-hue), var(--plc-primary-saturation), var(--plc-primary-lightness));
2800
3116
  }
2801
3117
 
2802
- .pelcro-root .plc-border-white {
3118
+ .pelcro-root .plc-border-white{
2803
3119
  --tw-border-opacity: 1;
2804
3120
  border-color: rgba(255, 255, 255, var(--tw-border-opacity));
2805
3121
  }
2806
3122
 
2807
- .pelcro-root .plc-border-gray-200 {
3123
+ .pelcro-root .plc-border-gray-200{
2808
3124
  --tw-border-opacity: 1;
2809
3125
  border-color: rgba(229, 231, 235, var(--tw-border-opacity));
2810
3126
  }
2811
3127
 
2812
- .pelcro-root .plc-border-gray-300 {
3128
+ .pelcro-root .plc-border-gray-300{
2813
3129
  --tw-border-opacity: 1;
2814
3130
  border-color: rgba(209, 213, 219, var(--tw-border-opacity));
2815
3131
  }
2816
3132
 
2817
- .pelcro-root .plc-border-gray-400 {
3133
+ .pelcro-root .plc-border-gray-400{
2818
3134
  --tw-border-opacity: 1;
2819
3135
  border-color: rgba(156, 163, 175, var(--tw-border-opacity));
2820
3136
  }
2821
3137
 
2822
- .pelcro-root .plc-border-green-400 {
3138
+ .pelcro-root .plc-border-green-400{
2823
3139
  --tw-border-opacity: 1;
2824
3140
  border-color: rgba(52, 211, 153, var(--tw-border-opacity));
2825
3141
  }
2826
3142
 
2827
- .pelcro-root .hover\:plc-border-primary-800:hover {
2828
- border-color: hsl(var(--plc-primary-hue), var(--plc-primary-saturation), calc(var(--plc-primary-lightness) - 30%));
3143
+ .pelcro-root .hover\:plc-border-primary-600:hover{
3144
+ border-color: hsl(var(--plc-primary-hue), var(--plc-primary-saturation), calc(var(--plc-primary-lightness) - 10%));
2829
3145
  }
2830
3146
 
2831
- .pelcro-root .plc-bg-transparent {
2832
- background-color: transparent;
3147
+ .pelcro-root .hover\:plc-border-primary-800:hover{
3148
+ border-color: hsl(var(--plc-primary-hue), var(--plc-primary-saturation), calc(var(--plc-primary-lightness) - 30%));
2833
3149
  }
2834
3150
 
2835
- .pelcro-root .plc-bg-primary-200 {
2836
- background-color: hsl(var(--plc-primary-hue), var(--plc-primary-saturation), calc(var(--plc-primary-lightness) + 30%));
3151
+ .pelcro-root .hover\:plc-border-primary:hover{
3152
+ border-color: hsl(var(--plc-primary-hue), var(--plc-primary-saturation), var(--plc-primary-lightness));
2837
3153
  }
2838
3154
 
2839
- .pelcro-root .plc-bg-primary-400 {
2840
- background-color: hsl(var(--plc-primary-hue), var(--plc-primary-saturation), calc(var(--plc-primary-lightness) + 10%));
3155
+ .pelcro-root .plc-bg-transparent{
3156
+ background-color: transparent;
2841
3157
  }
2842
3158
 
2843
- .pelcro-root .plc-bg-primary-700 {
2844
- background-color: hsl(var(--plc-primary-hue), var(--plc-primary-saturation), calc(var(--plc-primary-lightness) - 20%));
3159
+ .pelcro-root .plc-bg-primary-200{
3160
+ background-color: hsl(var(--plc-primary-hue), var(--plc-primary-saturation), calc(var(--plc-primary-lightness) + 30%));
2845
3161
  }
2846
3162
 
2847
- .pelcro-root .plc-bg-primary-800 {
2848
- background-color: hsl(var(--plc-primary-hue), var(--plc-primary-saturation), calc(var(--plc-primary-lightness) - 30%));
3163
+ .pelcro-root .plc-bg-primary-400{
3164
+ background-color: hsl(var(--plc-primary-hue), var(--plc-primary-saturation), calc(var(--plc-primary-lightness) + 10%));
2849
3165
  }
2850
3166
 
2851
- .pelcro-root .plc-bg-primary {
3167
+ .pelcro-root .plc-bg-primary{
2852
3168
  background-color: hsl(var(--plc-primary-hue), var(--plc-primary-saturation), var(--plc-primary-lightness));
2853
3169
  }
2854
3170
 
2855
- .pelcro-root .plc-bg-white {
3171
+ .pelcro-root .plc-bg-white{
2856
3172
  --tw-bg-opacity: 1;
2857
3173
  background-color: rgba(255, 255, 255, var(--tw-bg-opacity));
2858
3174
  }
2859
3175
 
2860
- .pelcro-root .plc-bg-gray-50 {
2861
- --tw-bg-opacity: 1;
2862
- background-color: rgba(249, 250, 251, var(--tw-bg-opacity));
2863
- }
2864
-
2865
- .pelcro-root .plc-bg-gray-100 {
3176
+ .pelcro-root .plc-bg-gray-100{
2866
3177
  --tw-bg-opacity: 1;
2867
3178
  background-color: rgba(243, 244, 246, var(--tw-bg-opacity));
2868
3179
  }
2869
3180
 
2870
- .pelcro-root .plc-bg-gray-200 {
3181
+ .pelcro-root .plc-bg-gray-200{
2871
3182
  --tw-bg-opacity: 1;
2872
3183
  background-color: rgba(229, 231, 235, var(--tw-bg-opacity));
2873
3184
  }
2874
3185
 
2875
- .pelcro-root .plc-bg-gray-300 {
3186
+ .pelcro-root .plc-bg-gray-300{
2876
3187
  --tw-bg-opacity: 1;
2877
3188
  background-color: rgba(209, 213, 219, var(--tw-bg-opacity));
2878
3189
  }
2879
3190
 
2880
- .pelcro-root .plc-bg-gray-500 {
3191
+ .pelcro-root .plc-bg-gray-400{
3192
+ --tw-bg-opacity: 1;
3193
+ background-color: rgba(156, 163, 175, var(--tw-bg-opacity));
3194
+ }
3195
+
3196
+ .pelcro-root .plc-bg-gray-500{
2881
3197
  --tw-bg-opacity: 1;
2882
3198
  background-color: rgba(107, 114, 128, var(--tw-bg-opacity));
2883
3199
  }
2884
3200
 
2885
- .pelcro-root .plc-bg-gray-600 {
3201
+ .pelcro-root .plc-bg-gray-600{
2886
3202
  --tw-bg-opacity: 1;
2887
3203
  background-color: rgba(75, 85, 99, var(--tw-bg-opacity));
2888
3204
  }
2889
3205
 
2890
- .pelcro-root .plc-bg-gray-800 {
3206
+ .pelcro-root .plc-bg-gray-800{
2891
3207
  --tw-bg-opacity: 1;
2892
3208
  background-color: rgba(31, 41, 55, var(--tw-bg-opacity));
2893
3209
  }
2894
3210
 
2895
- .pelcro-root .plc-bg-red-100 {
3211
+ .pelcro-root .plc-bg-red-100{
2896
3212
  --tw-bg-opacity: 1;
2897
3213
  background-color: rgba(239, 190, 188, var(--tw-bg-opacity));
2898
3214
  }
2899
3215
 
2900
- .pelcro-root .plc-bg-red-500 {
3216
+ .pelcro-root .plc-bg-red-500{
2901
3217
  --tw-bg-opacity: 1;
2902
3218
  background-color: rgba(180, 48, 43, var(--tw-bg-opacity));
2903
3219
  }
2904
3220
 
2905
- .pelcro-root .plc-bg-yellow-100 {
3221
+ .pelcro-root .plc-bg-yellow-100{
2906
3222
  --tw-bg-opacity: 1;
2907
3223
  background-color: rgba(254, 243, 199, var(--tw-bg-opacity));
2908
3224
  }
2909
3225
 
2910
- .pelcro-root .plc-bg-green-50 {
3226
+ .pelcro-root .plc-bg-green-50{
2911
3227
  --tw-bg-opacity: 1;
2912
3228
  background-color: rgba(236, 253, 245, var(--tw-bg-opacity));
2913
3229
  }
2914
3230
 
2915
- .pelcro-root .plc-bg-green-100 {
3231
+ .pelcro-root .plc-bg-green-100{
2916
3232
  --tw-bg-opacity: 1;
2917
3233
  background-color: rgba(209, 250, 229, var(--tw-bg-opacity));
2918
3234
  }
2919
3235
 
2920
- .pelcro-root .plc-bg-blue-100 {
3236
+ .pelcro-root .plc-bg-blue-100{
2921
3237
  --tw-bg-opacity: 1;
2922
3238
  background-color: rgba(219, 234, 254, var(--tw-bg-opacity));
2923
3239
  }
2924
3240
 
2925
- .pelcro-root .plc-bg-orange-100 {
3241
+ .pelcro-root .plc-bg-orange-100{
2926
3242
  --tw-bg-opacity: 1;
2927
3243
  background-color: rgba(255, 237, 213, var(--tw-bg-opacity));
2928
3244
  }
2929
3245
 
2930
- .pelcro-root .hover\:plc-bg-transparent:hover {
3246
+ .pelcro-root .hover\:plc-bg-transparent:hover{
2931
3247
  background-color: transparent;
2932
3248
  }
2933
3249
 
2934
- .pelcro-root .hover\:plc-bg-primary-600:hover {
3250
+ .pelcro-root .hover\:plc-bg-primary-600:hover{
2935
3251
  background-color: hsl(var(--plc-primary-hue), var(--plc-primary-saturation), calc(var(--plc-primary-lightness) - 10%));
2936
3252
  }
2937
3253
 
2938
- .pelcro-root .hover\:plc-bg-white:hover {
3254
+ .pelcro-root .hover\:plc-bg-primary:hover{
3255
+ background-color: hsl(var(--plc-primary-hue), var(--plc-primary-saturation), var(--plc-primary-lightness));
3256
+ }
3257
+
3258
+ .pelcro-root .hover\:plc-bg-white:hover{
2939
3259
  --tw-bg-opacity: 1;
2940
3260
  background-color: rgba(255, 255, 255, var(--tw-bg-opacity));
2941
3261
  }
2942
3262
 
2943
- .pelcro-root .hover\:plc-bg-gray-50:hover {
3263
+ .pelcro-root .hover\:plc-bg-gray-50:hover{
2944
3264
  --tw-bg-opacity: 1;
2945
3265
  background-color: rgba(249, 250, 251, var(--tw-bg-opacity));
2946
3266
  }
2947
3267
 
2948
- .pelcro-root .hover\:plc-bg-gray-100:hover {
3268
+ .pelcro-root .hover\:plc-bg-gray-100:hover{
2949
3269
  --tw-bg-opacity: 1;
2950
3270
  background-color: rgba(243, 244, 246, var(--tw-bg-opacity));
2951
3271
  }
2952
3272
 
2953
- .pelcro-root .hover\:plc-bg-gray-600:hover {
3273
+ .pelcro-root .hover\:plc-bg-gray-600:hover{
2954
3274
  --tw-bg-opacity: 1;
2955
3275
  background-color: rgba(75, 85, 99, var(--tw-bg-opacity));
2956
3276
  }
2957
3277
 
2958
- .pelcro-root .hover\:plc-bg-gray-900:hover {
3278
+ .pelcro-root .hover\:plc-bg-gray-900:hover{
2959
3279
  --tw-bg-opacity: 1;
2960
3280
  background-color: rgba(17, 24, 39, var(--tw-bg-opacity));
2961
3281
  }
2962
3282
 
2963
- .pelcro-root .hover\:plc-bg-red-600:hover {
3283
+ .pelcro-root .hover\:plc-bg-red-600:hover{
2964
3284
  --tw-bg-opacity: 1;
2965
3285
  background-color: rgba(139, 37, 33, var(--tw-bg-opacity));
2966
3286
  }
2967
3287
 
2968
- .pelcro-root .focus\:plc-bg-transparent:focus {
3288
+ .pelcro-root .focus\:plc-bg-transparent:focus{
2969
3289
  background-color: transparent;
2970
3290
  }
2971
3291
 
2972
- .pelcro-root .focus\:plc-bg-primary-600:focus {
3292
+ .pelcro-root .focus\:plc-bg-primary-600:focus{
2973
3293
  background-color: hsl(var(--plc-primary-hue), var(--plc-primary-saturation), calc(var(--plc-primary-lightness) - 10%));
2974
3294
  }
2975
3295
 
2976
- .pelcro-root .disabled\:plc-bg-gray-400:disabled {
3296
+ .pelcro-root .disabled\:plc-bg-gray-400:disabled{
2977
3297
  --tw-bg-opacity: 1;
2978
3298
  background-color: rgba(156, 163, 175, var(--tw-bg-opacity));
2979
3299
  }
2980
3300
 
2981
- .pelcro-root .plc-fill-current {
3301
+ .pelcro-root .plc-fill-current{
2982
3302
  fill: currentColor;
2983
3303
  }
2984
3304
 
2985
- .pelcro-root .plc-object-contain {
3305
+ .pelcro-root .plc-object-contain{
2986
3306
  object-fit: contain;
2987
3307
  }
2988
3308
 
2989
- .pelcro-root .plc-object-left {
2990
- object-position: left;
3309
+ .pelcro-root .plc-object-cover{
3310
+ object-fit: cover;
2991
3311
  }
2992
3312
 
2993
- .pelcro-root .plc-p-1 {
2994
- padding: 0.25rem;
3313
+ .pelcro-root .plc-object-center{
3314
+ object-position: center;
2995
3315
  }
2996
3316
 
2997
- .pelcro-root .plc-p-2 {
2998
- padding: 0.5rem;
3317
+ .pelcro-root .plc-p-1{
3318
+ padding: 0.25rem;
2999
3319
  }
3000
3320
 
3001
- .pelcro-root .plc-p-3 {
3002
- padding: 0.75rem;
3321
+ .pelcro-root .plc-p-2{
3322
+ padding: 0.5rem;
3003
3323
  }
3004
3324
 
3005
- .pelcro-root .plc-p-4 {
3325
+ .pelcro-root .plc-p-4{
3006
3326
  padding: 1rem;
3007
3327
  }
3008
3328
 
3009
- .pelcro-root .plc-p-5 {
3329
+ .pelcro-root .plc-p-5{
3010
3330
  padding: 1.25rem;
3011
3331
  }
3012
3332
 
3013
- .pelcro-root .plc-p-6 {
3333
+ .pelcro-root .plc-p-6{
3014
3334
  padding: 1.5rem;
3015
3335
  }
3016
3336
 
3017
- .pelcro-root .plc-px-1 {
3337
+ .pelcro-root .plc-px-0{
3338
+ padding-left: 0px;
3339
+ padding-right: 0px;
3340
+ }
3341
+
3342
+ .pelcro-root .plc-px-1{
3018
3343
  padding-left: 0.25rem;
3019
3344
  padding-right: 0.25rem;
3020
3345
  }
3021
3346
 
3022
- .pelcro-root .plc-px-2 {
3347
+ .pelcro-root .plc-px-2{
3023
3348
  padding-left: 0.5rem;
3024
3349
  padding-right: 0.5rem;
3025
3350
  }
3026
3351
 
3027
- .pelcro-root .plc-px-3 {
3352
+ .pelcro-root .plc-px-3{
3028
3353
  padding-left: 0.75rem;
3029
3354
  padding-right: 0.75rem;
3030
3355
  }
3031
3356
 
3032
- .pelcro-root .plc-px-4 {
3357
+ .pelcro-root .plc-px-4{
3033
3358
  padding-left: 1rem;
3034
3359
  padding-right: 1rem;
3035
3360
  }
3036
3361
 
3037
- .pelcro-root .plc-px-5 {
3362
+ .pelcro-root .plc-px-5{
3038
3363
  padding-left: 1.25rem;
3039
3364
  padding-right: 1.25rem;
3040
3365
  }
3041
3366
 
3042
- .pelcro-root .plc-px-6 {
3367
+ .pelcro-root .plc-px-6{
3043
3368
  padding-left: 1.5rem;
3044
3369
  padding-right: 1.5rem;
3045
3370
  }
3046
3371
 
3047
- .pelcro-root .plc-px-16 {
3048
- padding-left: 4rem;
3049
- padding-right: 4rem;
3372
+ .pelcro-root .plc-px-8{
3373
+ padding-left: 2rem;
3374
+ padding-right: 2rem;
3050
3375
  }
3051
3376
 
3052
- .pelcro-root .plc-py-1 {
3377
+ .pelcro-root .plc-py-1{
3053
3378
  padding-top: 0.25rem;
3054
3379
  padding-bottom: 0.25rem;
3055
3380
  }
3056
3381
 
3057
- .pelcro-root .plc-py-2 {
3382
+ .pelcro-root .plc-py-2{
3058
3383
  padding-top: 0.5rem;
3059
3384
  padding-bottom: 0.5rem;
3060
3385
  }
3061
3386
 
3062
- .pelcro-root .plc-py-3 {
3387
+ .pelcro-root .plc-py-3{
3063
3388
  padding-top: 0.75rem;
3064
3389
  padding-bottom: 0.75rem;
3065
3390
  }
3066
3391
 
3067
- .pelcro-root .plc-py-4 {
3392
+ .pelcro-root .plc-py-4{
3068
3393
  padding-top: 1rem;
3069
3394
  padding-bottom: 1rem;
3070
3395
  }
3071
3396
 
3072
- .pelcro-root .plc-py-5 {
3397
+ .pelcro-root .plc-py-5{
3073
3398
  padding-top: 1.25rem;
3074
3399
  padding-bottom: 1.25rem;
3075
3400
  }
3076
3401
 
3077
- .pelcro-root .plc-pt-1 {
3402
+ .pelcro-root .plc-py-6{
3403
+ padding-top: 1.5rem;
3404
+ padding-bottom: 1.5rem;
3405
+ }
3406
+
3407
+ .pelcro-root .plc-pt-1{
3078
3408
  padding-top: 0.25rem;
3079
3409
  }
3080
3410
 
3081
- .pelcro-root .plc-pt-2 {
3411
+ .pelcro-root .plc-pt-2{
3082
3412
  padding-top: 0.5rem;
3083
3413
  }
3084
3414
 
3085
- .pelcro-root .plc-pt-4 {
3415
+ .pelcro-root .plc-pt-4{
3086
3416
  padding-top: 1rem;
3087
3417
  }
3088
3418
 
3089
- .pelcro-root .plc-pr-1 {
3419
+ .pelcro-root .plc-pt-5{
3420
+ padding-top: 1.25rem;
3421
+ }
3422
+
3423
+ .pelcro-root .plc-pt-6{
3424
+ padding-top: 1.5rem;
3425
+ }
3426
+
3427
+ .pelcro-root .plc-pr-1{
3090
3428
  padding-right: 0.25rem;
3091
3429
  }
3092
3430
 
3093
- .pelcro-root .plc-pr-2 {
3431
+ .pelcro-root .plc-pr-2{
3094
3432
  padding-right: 0.5rem;
3095
3433
  }
3096
3434
 
3097
- .pelcro-root .plc-pr-4 {
3435
+ .pelcro-root .plc-pr-4{
3098
3436
  padding-right: 1rem;
3099
3437
  }
3100
3438
 
3101
- .pelcro-root .plc-pb-4 {
3439
+ .pelcro-root .plc-pr-8{
3440
+ padding-right: 2rem;
3441
+ }
3442
+
3443
+ .pelcro-root .plc-pb-2{
3444
+ padding-bottom: 0.5rem;
3445
+ }
3446
+
3447
+ .pelcro-root .plc-pb-4{
3102
3448
  padding-bottom: 1rem;
3103
3449
  }
3104
3450
 
3105
- .pelcro-root .plc-pl-2 {
3451
+ .pelcro-root .plc-pl-2{
3106
3452
  padding-left: 0.5rem;
3107
3453
  }
3108
3454
 
3109
- .pelcro-root .plc-pl-4 {
3455
+ .pelcro-root .plc-pl-4{
3110
3456
  padding-left: 1rem;
3111
3457
  }
3112
3458
 
3113
- .pelcro-root .plc-text-left {
3459
+ .pelcro-root .plc-pl-20{
3460
+ padding-left: 5rem;
3461
+ }
3462
+
3463
+ .pelcro-root .plc-text-left{
3114
3464
  text-align: left;
3115
3465
  }
3116
3466
 
3117
- .pelcro-root .plc-text-center {
3467
+ .pelcro-root .plc-text-center{
3118
3468
  text-align: center;
3119
3469
  }
3120
3470
 
3121
- .pelcro-root .plc-align-top {
3471
+ .pelcro-root .plc-text-justify{
3472
+ text-align: justify;
3473
+ }
3474
+
3475
+ .pelcro-root .plc-align-top{
3122
3476
  vertical-align: top;
3123
3477
  }
3124
3478
 
3125
- .pelcro-root .plc-align-middle {
3479
+ .pelcro-root .plc-align-middle{
3126
3480
  vertical-align: middle;
3127
3481
  }
3128
3482
 
3129
- .pelcro-root .plc-text-xs {
3483
+ .pelcro-root .plc-text-xs{
3130
3484
  font-size: 0.75rem;
3131
3485
  line-height: 1rem;
3132
3486
  }
3133
3487
 
3134
- .pelcro-root .plc-text-sm {
3488
+ .pelcro-root .plc-text-sm{
3135
3489
  font-size: 0.875rem;
3136
3490
  line-height: 1.25rem;
3137
3491
  }
3138
3492
 
3139
- .pelcro-root .plc-text-base {
3493
+ .pelcro-root .plc-text-base{
3140
3494
  font-size: 1rem;
3141
3495
  line-height: 1.5rem;
3142
3496
  }
3143
3497
 
3144
- .pelcro-root .plc-text-lg {
3498
+ .pelcro-root .plc-text-lg{
3145
3499
  font-size: 1.125rem;
3146
3500
  line-height: 1.75rem;
3147
3501
  }
3148
3502
 
3149
- .pelcro-root .plc-text-xl {
3503
+ .pelcro-root .plc-text-xl{
3150
3504
  font-size: 1.25rem;
3151
3505
  line-height: 1.75rem;
3152
3506
  }
3153
3507
 
3154
- .pelcro-root .plc-text-2xl {
3508
+ .pelcro-root .plc-text-2xl{
3155
3509
  font-size: 1.5rem;
3156
3510
  line-height: 2rem;
3157
3511
  }
3158
3512
 
3159
- .pelcro-root .plc-text-3xl {
3513
+ .pelcro-root .plc-text-3xl{
3160
3514
  font-size: 1.875rem;
3161
3515
  line-height: 2.25rem;
3162
3516
  }
3163
3517
 
3164
- .pelcro-root .plc-text-4xl {
3165
- font-size: 2.25rem;
3166
- line-height: 2.5rem;
3167
- }
3168
-
3169
- .pelcro-root .plc-font-thin {
3518
+ .pelcro-root .plc-font-thin{
3170
3519
  font-weight: 100;
3171
3520
  }
3172
3521
 
3173
- .pelcro-root .plc-font-normal {
3522
+ .pelcro-root .plc-font-normal{
3174
3523
  font-weight: 400;
3175
3524
  }
3176
3525
 
3177
- .pelcro-root .plc-font-medium {
3526
+ .pelcro-root .plc-font-medium{
3178
3527
  font-weight: 500;
3179
3528
  }
3180
3529
 
3181
- .pelcro-root .plc-font-semibold {
3530
+ .pelcro-root .plc-font-semibold{
3182
3531
  font-weight: 600;
3183
3532
  }
3184
3533
 
3185
- .pelcro-root .plc-font-bold {
3534
+ .pelcro-root .plc-font-bold{
3186
3535
  font-weight: 700;
3187
3536
  }
3188
3537
 
3189
- .pelcro-root .plc-uppercase {
3538
+ .pelcro-root .plc-font-extrabold{
3539
+ font-weight: 800;
3540
+ }
3541
+
3542
+ .pelcro-root .plc-uppercase{
3190
3543
  text-transform: uppercase;
3191
3544
  }
3192
3545
 
3193
- .pelcro-root .plc-capitalize {
3546
+ .pelcro-root .plc-capitalize{
3194
3547
  text-transform: capitalize;
3195
3548
  }
3196
3549
 
3197
- .pelcro-root .plc-tracking-wider {
3550
+ .pelcro-root .plc-tracking-wider{
3198
3551
  letter-spacing: 0.05em;
3199
3552
  }
3200
3553
 
3201
- .pelcro-root .plc-tracking-widest {
3554
+ .pelcro-root .plc-tracking-widest{
3202
3555
  letter-spacing: 0.1em;
3203
3556
  }
3204
3557
 
3205
- .pelcro-root .plc-text-primary-400 {
3558
+ .pelcro-root .plc-text-primary-400{
3206
3559
  color: hsl(var(--plc-primary-hue), var(--plc-primary-saturation), calc(var(--plc-primary-lightness) + 10%));
3207
3560
  }
3208
3561
 
3209
- .pelcro-root .plc-text-primary-500 {
3562
+ .pelcro-root .plc-text-primary-500{
3210
3563
  color: hsl(var(--plc-primary-hue), var(--plc-primary-saturation), var(--plc-primary-lightness));
3211
3564
  }
3212
3565
 
3213
- .pelcro-root .plc-text-primary-600 {
3566
+ .pelcro-root .plc-text-primary-600{
3214
3567
  color: hsl(var(--plc-primary-hue), var(--plc-primary-saturation), calc(var(--plc-primary-lightness) - 10%));
3215
3568
  }
3216
3569
 
3217
- .pelcro-root .plc-text-primary-800 {
3218
- color: hsl(var(--plc-primary-hue), var(--plc-primary-saturation), calc(var(--plc-primary-lightness) - 30%));
3570
+ .pelcro-root .plc-text-primary{
3571
+ color: hsl(var(--plc-primary-hue), var(--plc-primary-saturation), var(--plc-primary-lightness));
3219
3572
  }
3220
3573
 
3221
- .pelcro-root .plc-text-black {
3574
+ .pelcro-root .plc-text-black{
3222
3575
  --tw-text-opacity: 1;
3223
3576
  color: rgba(0, 0, 0, var(--tw-text-opacity));
3224
3577
  }
3225
3578
 
3226
- .pelcro-root .plc-text-white {
3579
+ .pelcro-root .plc-text-white{
3227
3580
  --tw-text-opacity: 1;
3228
3581
  color: rgba(255, 255, 255, var(--tw-text-opacity));
3229
3582
  }
3230
3583
 
3231
- .pelcro-root .plc-text-gray-400 {
3584
+ .pelcro-root .plc-text-gray-400{
3232
3585
  --tw-text-opacity: 1;
3233
3586
  color: rgba(156, 163, 175, var(--tw-text-opacity));
3234
3587
  }
3235
3588
 
3236
- .pelcro-root .plc-text-gray-500 {
3589
+ .pelcro-root .plc-text-gray-500{
3237
3590
  --tw-text-opacity: 1;
3238
3591
  color: rgba(107, 114, 128, var(--tw-text-opacity));
3239
3592
  }
3240
3593
 
3241
- .pelcro-root .plc-text-gray-600 {
3594
+ .pelcro-root .plc-text-gray-600{
3242
3595
  --tw-text-opacity: 1;
3243
3596
  color: rgba(75, 85, 99, var(--tw-text-opacity));
3244
3597
  }
3245
3598
 
3246
- .pelcro-root .plc-text-gray-700 {
3599
+ .pelcro-root .plc-text-gray-700{
3247
3600
  --tw-text-opacity: 1;
3248
3601
  color: rgba(55, 65, 81, var(--tw-text-opacity));
3249
3602
  }
3250
3603
 
3251
- .pelcro-root .plc-text-gray-900 {
3604
+ .pelcro-root .plc-text-gray-900{
3252
3605
  --tw-text-opacity: 1;
3253
3606
  color: rgba(17, 24, 39, var(--tw-text-opacity));
3254
3607
  }
3255
3608
 
3256
- .pelcro-root .plc-text-red-500 {
3609
+ .pelcro-root .plc-text-red-500{
3257
3610
  --tw-text-opacity: 1;
3258
3611
  color: rgba(180, 48, 43, var(--tw-text-opacity));
3259
3612
  }
3260
3613
 
3261
- .pelcro-root .plc-text-red-700 {
3614
+ .pelcro-root .plc-text-red-700{
3262
3615
  --tw-text-opacity: 1;
3263
3616
  color: rgba(98, 26, 23, var(--tw-text-opacity));
3264
3617
  }
3265
3618
 
3266
- .pelcro-root .plc-text-yellow-700 {
3619
+ .pelcro-root .plc-text-yellow-500{
3620
+ --tw-text-opacity: 1;
3621
+ color: rgba(245, 158, 11, var(--tw-text-opacity));
3622
+ }
3623
+
3624
+ .pelcro-root .plc-text-yellow-700{
3267
3625
  --tw-text-opacity: 1;
3268
3626
  color: rgba(180, 83, 9, var(--tw-text-opacity));
3269
3627
  }
3270
3628
 
3271
- .pelcro-root .plc-text-green-400 {
3629
+ .pelcro-root .plc-text-green-400{
3272
3630
  --tw-text-opacity: 1;
3273
3631
  color: rgba(52, 211, 153, var(--tw-text-opacity));
3274
3632
  }
3275
3633
 
3276
- .pelcro-root .plc-text-green-500 {
3634
+ .pelcro-root .plc-text-green-500{
3277
3635
  --tw-text-opacity: 1;
3278
3636
  color: rgba(16, 185, 129, var(--tw-text-opacity));
3279
3637
  }
3280
3638
 
3281
- .pelcro-root .plc-text-green-600 {
3639
+ .pelcro-root .plc-text-green-600{
3282
3640
  --tw-text-opacity: 1;
3283
3641
  color: rgba(5, 150, 105, var(--tw-text-opacity));
3284
3642
  }
3285
3643
 
3286
- .pelcro-root .plc-text-green-700 {
3644
+ .pelcro-root .plc-text-green-700{
3287
3645
  --tw-text-opacity: 1;
3288
3646
  color: rgba(4, 120, 87, var(--tw-text-opacity));
3289
3647
  }
3290
3648
 
3291
- .pelcro-root .plc-text-blue-400 {
3649
+ .pelcro-root .plc-text-blue-400{
3292
3650
  --tw-text-opacity: 1;
3293
3651
  color: rgba(96, 165, 250, var(--tw-text-opacity));
3294
3652
  }
3295
3653
 
3296
- .pelcro-root .plc-text-blue-500 {
3654
+ .pelcro-root .plc-text-blue-500{
3297
3655
  --tw-text-opacity: 1;
3298
3656
  color: rgba(59, 130, 246, var(--tw-text-opacity));
3299
3657
  }
3300
3658
 
3301
- .pelcro-root .plc-text-blue-700 {
3659
+ .pelcro-root .plc-text-blue-700{
3302
3660
  --tw-text-opacity: 1;
3303
3661
  color: rgba(29, 78, 216, var(--tw-text-opacity));
3304
3662
  }
3305
3663
 
3306
- .pelcro-root .plc-text-orange-700 {
3664
+ .pelcro-root .plc-text-orange-700{
3307
3665
  --tw-text-opacity: 1;
3308
3666
  color: rgba(194, 65, 12, var(--tw-text-opacity));
3309
3667
  }
3310
3668
 
3311
- .pelcro-root .plc-group:hover .group-hover\:plc-text-primary-400 {
3669
+ .pelcro-root .plc-group:hover .group-hover\:plc-text-primary-400{
3312
3670
  color: hsl(var(--plc-primary-hue), var(--plc-primary-saturation), calc(var(--plc-primary-lightness) + 10%));
3313
3671
  }
3314
3672
 
3315
- .pelcro-root .hover\:plc-text-primary-500:hover {
3673
+ .pelcro-root .hover\:plc-text-primary-500:hover{
3316
3674
  color: hsl(var(--plc-primary-hue), var(--plc-primary-saturation), var(--plc-primary-lightness));
3317
3675
  }
3318
3676
 
3319
- .pelcro-root .hover\:plc-text-primary:hover {
3677
+ .pelcro-root .hover\:plc-text-primary-600:hover{
3678
+ color: hsl(var(--plc-primary-hue), var(--plc-primary-saturation), calc(var(--plc-primary-lightness) - 10%));
3679
+ }
3680
+
3681
+ .pelcro-root .hover\:plc-text-primary:hover{
3320
3682
  color: hsl(var(--plc-primary-hue), var(--plc-primary-saturation), var(--plc-primary-lightness));
3321
3683
  }
3322
3684
 
3323
- .pelcro-root .hover\:plc-text-black:hover {
3685
+ .pelcro-root .hover\:plc-text-black:hover{
3324
3686
  --tw-text-opacity: 1;
3325
3687
  color: rgba(0, 0, 0, var(--tw-text-opacity));
3326
3688
  }
3327
3689
 
3328
- .pelcro-root .hover\:plc-text-white:hover {
3690
+ .pelcro-root .hover\:plc-text-white:hover{
3329
3691
  --tw-text-opacity: 1;
3330
3692
  color: rgba(255, 255, 255, var(--tw-text-opacity));
3331
3693
  }
3332
3694
 
3333
- .pelcro-root .hover\:plc-text-gray-900:hover {
3695
+ .pelcro-root .hover\:plc-text-gray-900:hover{
3334
3696
  --tw-text-opacity: 1;
3335
3697
  color: rgba(17, 24, 39, var(--tw-text-opacity));
3336
3698
  }
3337
3699
 
3338
- .pelcro-root .focus\:plc-text-black:focus {
3700
+ .pelcro-root .hover\:plc-text-red-500:hover{
3701
+ --tw-text-opacity: 1;
3702
+ color: rgba(180, 48, 43, var(--tw-text-opacity));
3703
+ }
3704
+
3705
+ .pelcro-root .focus\:plc-text-black:focus{
3339
3706
  --tw-text-opacity: 1;
3340
3707
  color: rgba(0, 0, 0, var(--tw-text-opacity));
3341
3708
  }
3342
3709
 
3343
- .pelcro-root .focus\:plc-text-white:focus {
3710
+ .pelcro-root .focus\:plc-text-white:focus{
3344
3711
  --tw-text-opacity: 1;
3345
3712
  color: rgba(255, 255, 255, var(--tw-text-opacity));
3346
3713
  }
3347
3714
 
3348
- .pelcro-root .plc-underline {
3715
+ .pelcro-root .plc-underline{
3349
3716
  text-decoration: underline;
3350
3717
  }
3351
3718
 
3352
- .pelcro-root .plc-no-underline {
3719
+ .pelcro-root .plc-no-underline{
3353
3720
  text-decoration: none;
3354
3721
  }
3355
3722
 
3356
- .pelcro-root .hover\:plc-opacity-30:hover {
3357
- opacity: 0.3;
3723
+ .pelcro-root .hover\:plc-no-underline:hover{
3724
+ text-decoration: none;
3358
3725
  }
3359
3726
 
3360
- *, ::before, ::after {
3727
+ *, ::before, ::after{
3361
3728
  --tw-shadow: 0 0 #0000;
3362
3729
  }
3363
3730
 
3364
- .pelcro-root .plc-shadow-sm {
3731
+ .pelcro-root .plc-shadow-sm{
3365
3732
  --tw-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
3366
3733
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
3367
3734
  }
3368
3735
 
3369
- .pelcro-root .plc-shadow-md {
3736
+ .pelcro-root .plc-shadow-md{
3370
3737
  --tw-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
3371
3738
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
3372
3739
  }
3373
3740
 
3374
- .pelcro-root .plc-shadow-md_dark {
3741
+ .pelcro-root .plc-shadow-md_dark{
3375
3742
  --tw-shadow: 0 0px 6px -1px rgba(0, 0, 0, 0.1), 0 0px 4px -1px rgba(0, 0, 0, 0.4);
3376
3743
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
3377
3744
  }
3378
3745
 
3379
- .pelcro-root .plc-shadow-lg {
3746
+ .pelcro-root .plc-shadow-lg{
3380
3747
  --tw-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
3381
3748
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
3382
3749
  }
3383
3750
 
3384
- .pelcro-root .plc-shadow-xl {
3751
+ .pelcro-root .plc-shadow-xl{
3385
3752
  --tw-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
3386
3753
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
3387
3754
  }
3388
3755
 
3389
- .pelcro-root .hover\:plc-shadow-none:hover {
3756
+ .pelcro-root .hover\:plc-shadow-sm:hover{
3757
+ --tw-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
3758
+ box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
3759
+ }
3760
+
3761
+ .pelcro-root .hover\:plc-shadow-none:hover{
3390
3762
  --tw-shadow: 0 0 #0000;
3391
3763
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
3392
3764
  }
3393
3765
 
3394
- .pelcro-root .focus\:plc-shadow-none:focus {
3766
+ .pelcro-root .focus\:plc-shadow-none:focus{
3395
3767
  --tw-shadow: 0 0 #0000;
3396
3768
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
3397
3769
  }
3398
3770
 
3399
- .pelcro-root .plc-outline-none {
3771
+ .pelcro-root .plc-outline-none{
3400
3772
  outline: 2px solid transparent;
3401
3773
  outline-offset: 2px;
3402
3774
  }
3403
3775
 
3404
- .pelcro-root .focus-within\:plc-outline-none:focus-within {
3776
+ .pelcro-root .focus-within\:plc-outline-none:focus-within{
3405
3777
  outline: 2px solid transparent;
3406
3778
  outline-offset: 2px;
3407
3779
  }
3408
3780
 
3409
- .pelcro-root .focus\:plc-outline-none:focus {
3781
+ .pelcro-root .focus\:plc-outline-none:focus{
3410
3782
  outline: 2px solid transparent;
3411
3783
  outline-offset: 2px;
3412
3784
  }
3413
3785
 
3414
- *, ::before, ::after {
3786
+ *, ::before, ::after{
3415
3787
  --tw-ring-inset: var(--tw-empty,/*!*/ /*!*/);
3416
3788
  --tw-ring-offset-width: 0px;
3417
3789
  --tw-ring-offset-color: #fff;
@@ -3420,208 +3792,370 @@ in order to scope selectors under pelcro-root
3420
3792
  --tw-ring-shadow: 0 0 #0000;
3421
3793
  }
3422
3794
 
3423
- .pelcro-root .plc-ring-1 {
3795
+ .pelcro-root .plc-ring-1{
3424
3796
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
3425
3797
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
3426
3798
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
3427
3799
  }
3428
3800
 
3429
- .pelcro-root .plc-ring-2 {
3801
+ .pelcro-root .plc-ring-2{
3430
3802
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
3431
3803
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
3432
3804
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
3433
3805
  }
3434
3806
 
3435
- .pelcro-root .focus\:plc-ring-0:focus {
3807
+ .pelcro-root .focus\:plc-ring-0:focus{
3436
3808
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
3437
3809
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);
3438
3810
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
3439
3811
  }
3440
3812
 
3441
- .pelcro-root .focus\:plc-ring-2:focus {
3813
+ .pelcro-root .focus\:plc-ring-2:focus{
3442
3814
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
3443
3815
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
3444
3816
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
3445
3817
  }
3446
3818
 
3447
- .pelcro-root .plc-ring-primary-400 {
3819
+ .pelcro-root .plc-ring-primary-400{
3448
3820
  --tw-ring-color: hsl(var(--plc-primary-hue), var(--plc-primary-saturation), calc(var(--plc-primary-lightness) + 10%));
3449
3821
  }
3450
3822
 
3451
- .pelcro-root .plc-ring-gray-200 {
3823
+ .pelcro-root .plc-ring-gray-200{
3452
3824
  --tw-ring-opacity: 1;
3453
3825
  --tw-ring-color: rgba(229, 231, 235, var(--tw-ring-opacity));
3454
3826
  }
3455
3827
 
3456
- .pelcro-root .plc-ring-red-400 {
3457
- --tw-ring-opacity: 1;
3458
- --tw-ring-color: rgba(209, 70, 65, var(--tw-ring-opacity));
3459
- }
3460
-
3461
- .pelcro-root .focus\:plc-ring-primary-300:focus {
3828
+ .pelcro-root .focus\:plc-ring-primary-300:focus{
3462
3829
  --tw-ring-color: hsl(var(--plc-primary-hue), var(--plc-primary-saturation), calc(var(--plc-primary-lightness) + 20%));
3463
3830
  }
3464
3831
 
3465
- .pelcro-root .focus\:plc-ring-red-500:focus {
3832
+ .pelcro-root .focus\:plc-ring-red-500:focus{
3466
3833
  --tw-ring-opacity: 1;
3467
3834
  --tw-ring-color: rgba(180, 48, 43, var(--tw-ring-opacity));
3468
3835
  }
3469
3836
 
3470
- .pelcro-root .focus\:plc-ring-green-300:focus {
3837
+ .pelcro-root .focus\:plc-ring-green-300:focus{
3471
3838
  --tw-ring-opacity: 1;
3472
3839
  --tw-ring-color: rgba(110, 231, 183, var(--tw-ring-opacity));
3473
3840
  }
3474
3841
 
3475
- .pelcro-root .focus\:plc-ring-blue-400:focus {
3842
+ .pelcro-root .focus\:plc-ring-blue-400:focus{
3476
3843
  --tw-ring-opacity: 1;
3477
3844
  --tw-ring-color: rgba(96, 165, 250, var(--tw-ring-opacity));
3478
3845
  }
3479
3846
 
3480
- .pelcro-root .focus\:plc-ring-blue-500:focus {
3847
+ .pelcro-root .focus\:plc-ring-blue-500:focus{
3481
3848
  --tw-ring-opacity: 1;
3482
3849
  --tw-ring-color: rgba(59, 130, 246, var(--tw-ring-opacity));
3483
3850
  }
3484
3851
 
3485
- .pelcro-root .plc-transition-all {
3852
+ .pelcro-root .plc-transition-all{
3486
3853
  transition-property: all;
3487
3854
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
3488
3855
  transition-duration: 150ms;
3489
3856
  }
3490
3857
 
3491
- .pelcro-root .plc-transition {
3858
+ .pelcro-root .plc-transition{
3492
3859
  transition-property: background-color, border-color, color, fill, stroke, opacity, box-shadow, transform;
3493
3860
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
3494
3861
  transition-duration: 150ms;
3495
3862
  }
3496
3863
 
3497
- .pelcro-root .plc-transition-transform {
3864
+ .pelcro-root .plc-transition-transform{
3498
3865
  transition-property: transform;
3499
3866
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
3500
3867
  transition-duration: 150ms;
3501
3868
  }
3502
3869
 
3503
- .pelcro-root .plc-duration-500 {
3870
+ .pelcro-root .plc-duration-500{
3504
3871
  transition-duration: 500ms;
3505
3872
  }
3506
3873
 
3507
- .pelcro-root .plc-ease-out {
3874
+ .pelcro-root .plc-ease-out{
3508
3875
  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
3509
3876
  }
3510
3877
 
3511
- @media (min-width: 640px) {
3512
- .pelcro-root .sm\:plc-m-4 {
3513
- margin: 1rem;
3878
+ /* Hide scrollbar for Chrome, Safari and Opera */
3879
+
3880
+ /* Hide scrollbar for IE, Edge and Firefox */
3881
+
3882
+ @media (min-width: 425px){
3883
+ }
3884
+
3885
+ @media (min-width: 640px){
3886
+ .pelcro-root .sm\:plc-top-1\/2{
3887
+ top: 50%;
3888
+ }
3889
+
3890
+ .pelcro-root .sm\:plc--right-14{
3891
+ right: -3.5rem;
3514
3892
  }
3515
3893
 
3516
- .pelcro-root .sm\:plc-mb-0 {
3517
- margin-bottom: 0px;
3894
+ .pelcro-root .sm\:plc--left-14{
3895
+ left: -3.5rem;
3518
3896
  }
3519
3897
 
3520
- .pelcro-root .sm\:plc-ml-2 {
3898
+ .pelcro-root .sm\:plc-m-4{
3899
+ margin: 1rem;
3900
+ }
3901
+
3902
+ .pelcro-root .sm\:plc-ml-2{
3521
3903
  margin-left: 0.5rem;
3522
3904
  }
3523
3905
 
3524
- .pelcro-root .sm\:plc-ml-6 {
3906
+ .pelcro-root .sm\:plc-ml-6{
3525
3907
  margin-left: 1.5rem;
3526
3908
  }
3527
3909
 
3528
- .pelcro-root .sm\:plc-ml-8 {
3910
+ .pelcro-root .sm\:plc-ml-8{
3529
3911
  margin-left: 2rem;
3530
3912
  }
3531
3913
 
3532
- .pelcro-root .sm\:plc-flex {
3533
- display: flex;
3914
+ .pelcro-root .sm\:plc-block{
3915
+ display: block;
3534
3916
  }
3535
3917
 
3536
- .pelcro-root .sm\:plc-inline-grid {
3537
- display: inline-grid;
3918
+ .pelcro-root .sm\:plc-flex{
3919
+ display: flex;
3538
3920
  }
3539
3921
 
3540
- .pelcro-root .sm\:plc-h-8 {
3922
+ .pelcro-root .sm\:plc-h-8{
3541
3923
  height: 2rem;
3542
3924
  }
3543
3925
 
3544
- .pelcro-root .sm\:plc-h-96 {
3926
+ .pelcro-root .sm\:plc-h-96{
3545
3927
  height: 24rem;
3546
3928
  }
3547
3929
 
3548
- .pelcro-root .sm\:plc-w-auto {
3930
+ .pelcro-root .sm\:plc-w-auto{
3549
3931
  width: auto;
3550
3932
  }
3551
3933
 
3552
- .pelcro-root .sm\:plc-w-1\/2 {
3553
- width: 50%;
3554
- }
3555
-
3556
- .pelcro-root .sm\:plc-max-w-md {
3934
+ .pelcro-root .sm\:plc-max-w-md{
3557
3935
  max-width: 28rem;
3558
3936
  }
3559
3937
 
3560
- .pelcro-root .sm\:plc-max-w-90\% {
3938
+ .pelcro-root .sm\:plc-max-w-90\%{
3561
3939
  max-width: 90%;
3562
3940
  }
3563
3941
 
3564
- .pelcro-root .sm\:plc-flex-row {
3942
+ .pelcro-root .sm\:plc--translate-y-1\/2{
3943
+ --tw-translate-y: -50%;
3944
+ }
3945
+
3946
+ .pelcro-root .sm\:plc-flex-row{
3565
3947
  flex-direction: row;
3566
3948
  }
3567
3949
 
3568
- .pelcro-root .sm\:plc-space-x-2 > :not([hidden]) ~ :not([hidden]) {
3950
+ .pelcro-root .sm\:plc-items-start{
3951
+ align-items: flex-start;
3952
+ }
3953
+
3954
+ .pelcro-root .sm\:plc-justify-between{
3955
+ justify-content: space-between;
3956
+ }
3957
+
3958
+ .pelcro-root .sm\:plc-space-x-2 > :not([hidden]) ~ :not([hidden]){
3569
3959
  --tw-space-x-reverse: 0;
3570
3960
  margin-right: calc(0.5rem * var(--tw-space-x-reverse));
3571
3961
  margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse)));
3572
3962
  }
3573
3963
 
3574
- .pelcro-root .sm\:plc-space-y-0 > :not([hidden]) ~ :not([hidden]) {
3964
+ .pelcro-root .sm\:plc-space-x-6 > :not([hidden]) ~ :not([hidden]){
3965
+ --tw-space-x-reverse: 0;
3966
+ margin-right: calc(1.5rem * var(--tw-space-x-reverse));
3967
+ margin-left: calc(1.5rem * calc(1 - var(--tw-space-x-reverse)));
3968
+ }
3969
+
3970
+ .pelcro-root .sm\:plc-space-y-0 > :not([hidden]) ~ :not([hidden]){
3575
3971
  --tw-space-y-reverse: 0;
3576
3972
  margin-top: calc(0px * calc(1 - var(--tw-space-y-reverse)));
3577
3973
  margin-bottom: calc(0px * var(--tw-space-y-reverse));
3578
3974
  }
3579
3975
 
3580
- .pelcro-root .sm\:plc-p-2 {
3976
+ .pelcro-root .sm\:plc-p-2{
3581
3977
  padding: 0.5rem;
3582
3978
  }
3583
3979
 
3584
- .pelcro-root .sm\:plc-px-8 {
3980
+ .pelcro-root .sm\:plc-px-8{
3585
3981
  padding-left: 2rem;
3586
3982
  padding-right: 2rem;
3587
3983
  }
3588
3984
 
3589
- .pelcro-root .sm\:plc-pl-8 {
3985
+ .pelcro-root .sm\:plc-px-10{
3986
+ padding-left: 2.5rem;
3987
+ padding-right: 2.5rem;
3988
+ }
3989
+
3990
+ .pelcro-root .sm\:plc-px-14{
3991
+ padding-left: 3.5rem;
3992
+ padding-right: 3.5rem;
3993
+ }
3994
+
3995
+ .pelcro-root .sm\:plc-pl-8{
3590
3996
  padding-left: 2rem;
3591
3997
  }
3592
3998
  }
3593
3999
 
3594
- @media (min-width: 768px) {
3595
- .pelcro-root .md\:plc-max-w-70\% {
3596
- max-width: 70%;
4000
+ @media (min-width: 768px){
4001
+ .pelcro-root .md\:plc-mx-auto{
4002
+ margin-left: auto;
4003
+ margin-right: auto;
4004
+ }
4005
+
4006
+ .pelcro-root .md\:plc-mt-40{
4007
+ margin-top: 10rem;
4008
+ }
4009
+
4010
+ .pelcro-root .md\:plc-mb-20{
4011
+ margin-bottom: 5rem;
3597
4012
  }
3598
- }
3599
4013
 
3600
- @media (min-width: 1024px) {
3601
- .pelcro-root .lg\:plc-w-3\/12 {
4014
+ .pelcro-root .md\:plc-table-cell{
4015
+ display: table-cell;
4016
+ }
4017
+
4018
+ .pelcro-root .md\:plc-hidden{
4019
+ display: none;
4020
+ }
4021
+
4022
+ .pelcro-root .md\:plc-w-1\/5{
4023
+ width: 20%;
4024
+ }
4025
+
4026
+ .pelcro-root .md\:plc-w-2\/5{
4027
+ width: 40%;
4028
+ }
4029
+
4030
+ .pelcro-root .md\:plc-w-1\/12{
4031
+ width: 8.333333%;
4032
+ }
4033
+
4034
+ .pelcro-root .md\:plc-w-2\/12{
4035
+ width: 16.666667%;
4036
+ }
4037
+
4038
+ .pelcro-root .md\:plc-w-3\/12{
3602
4039
  width: 25%;
3603
4040
  }
3604
4041
 
3605
- .pelcro-root .lg\:plc-w-9\/12 {
3606
- width: 75%;
4042
+ .pelcro-root .md\:plc-max-w-xl{
4043
+ max-width: 36rem;
4044
+ }
4045
+
4046
+ .pelcro-root .md\:plc-max-w-60\%{
4047
+ max-width: 60%;
4048
+ }
4049
+
4050
+ .pelcro-root .md\:plc-max-w-70\%{
4051
+ max-width: 70%;
4052
+ }
4053
+
4054
+ .pelcro-root .md\:plc-max-w-80\%{
4055
+ max-width: 80%;
4056
+ }
4057
+
4058
+ .pelcro-root .md\:plc-grid-cols-2{
4059
+ grid-template-columns: repeat(2, minmax(0, 1fr));
4060
+ }
4061
+
4062
+ .pelcro-root .md\:plc-flex-row{
4063
+ flex-direction: row;
4064
+ }
4065
+
4066
+ .pelcro-root .md\:plc-space-x-3 > :not([hidden]) ~ :not([hidden]){
4067
+ --tw-space-x-reverse: 0;
4068
+ margin-right: calc(0.75rem * var(--tw-space-x-reverse));
4069
+ margin-left: calc(0.75rem * calc(1 - var(--tw-space-x-reverse)));
4070
+ }
4071
+
4072
+ .pelcro-root .md\:plc-space-y-0 > :not([hidden]) ~ :not([hidden]){
4073
+ --tw-space-y-reverse: 0;
4074
+ margin-top: calc(0px * calc(1 - var(--tw-space-y-reverse)));
4075
+ margin-bottom: calc(0px * var(--tw-space-y-reverse));
4076
+ }
4077
+
4078
+ .pelcro-root .md\:plc-whitespace-normal{
4079
+ white-space: normal;
4080
+ }
4081
+
4082
+ .pelcro-root .md\:plc-whitespace-nowrap{
4083
+ white-space: nowrap;
3607
4084
  }
3608
- }
3609
4085
 
3610
- @media (min-width: 1280px) {
3611
- .pelcro-root .xl\:plc-px-0 {
4086
+ .pelcro-root .md\:plc-p-8{
4087
+ padding: 2rem;
4088
+ }
4089
+
4090
+ .pelcro-root .md\:plc-px-0{
3612
4091
  padding-left: 0px;
3613
4092
  padding-right: 0px;
3614
4093
  }
4094
+ }
3615
4095
 
3616
- .pelcro-root .xl\:plc-px-16 {
3617
- padding-left: 4rem;
3618
- padding-right: 4rem;
4096
+ @media (min-width: 1024px){
4097
+ .pelcro-root .lg\:plc-w-3\/12{
4098
+ width: 25%;
4099
+ }
4100
+
4101
+ .pelcro-root .lg\:plc-w-9\/12{
4102
+ width: 75%;
3619
4103
  }
3620
4104
  }
3621
4105
 
3622
- @media (min-width: 1536px) {
4106
+ @media (min-width: 1280px){
3623
4107
  }
3624
4108
 
4109
+ @media (min-width: 1536px){
4110
+ }
4111
+
4112
+ /* purgecss start ignore */
4113
+
4114
+ .custom-single-value {
4115
+ display: flex;
4116
+ align-items: center;
4117
+ }
4118
+
4119
+ .custom-option {
4120
+ display: flex;
4121
+ align-items: center;
4122
+ padding: 5px;
4123
+ }
4124
+
4125
+ .custom-option img {
4126
+ margin-right: 10px;
4127
+ }
4128
+
4129
+ .css-hlgwow {
4130
+ display: flex !important;
4131
+ }
4132
+
4133
+ .custom-option {
4134
+ display: flex;
4135
+ align-items: center;
4136
+ cursor: pointer; /* Show pointer cursor on hover */
4137
+ padding: 10px; /* Add padding for better hover area */
4138
+ }
4139
+
4140
+ .custom-option:hover {
4141
+ background-color: #f0f0f0; /* Highlight background on hover */
4142
+ }
4143
+
4144
+ .custom-single-value {
4145
+ display: flex;
4146
+ align-items: center;
4147
+ }
4148
+
4149
+ .menu-list {
4150
+ font-family: "Lato", system-ui, -apple-system,
4151
+ /* Firefox supports this but not yet `system-ui` */
4152
+ "Segoe UI",
4153
+ Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji",
4154
+ "Segoe UI Emoji";
4155
+ }
4156
+
4157
+ /* purgecss end ignore */
4158
+
3625
4159
  /* purgecss start ignore */
3626
4160
 
3627
4161
  .toggle-switch {