@pelcro/react-pelcro-js 4.0.0-alpha.11 → 4.0.0-alpha.110

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
  /**
@@ -548,7 +550,7 @@ Add the correct display in Chrome and Safari.
548
550
  background-size: 1.5em 1.5em;
549
551
  padding-right: 2.5rem;
550
552
  -webkit-print-color-adjust: exact;
551
- color-adjust: exact;
553
+ print-color-adjust: exact;
552
554
  }
553
555
 
554
556
  .pelcro-root [multiple] {
@@ -558,7 +560,7 @@ Add the correct display in Chrome and Safari.
558
560
  background-size: initial;
559
561
  padding-right: 0.75rem;
560
562
  -webkit-print-color-adjust: unset;
561
- color-adjust: unset;
563
+ print-color-adjust: unset;
562
564
  }
563
565
 
564
566
  .pelcro-root [type="checkbox"],
@@ -567,7 +569,7 @@ Add the correct display in Chrome and Safari.
567
569
  appearance: none;
568
570
  padding: 0;
569
571
  -webkit-print-color-adjust: exact;
570
- color-adjust: exact;
572
+ print-color-adjust: exact;
571
573
  display: inline-block;
572
574
  vertical-align: middle;
573
575
  background-origin: border-box;
@@ -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-4 {
2134
+ .pelcro-root .plc-right-3{
2135
+ right: 0.75rem;
2136
+ }
2137
+
2138
+ .pelcro-root .plc-right-4{
1995
2139
  right: 1rem;
1996
2140
  }
1997
2141
 
1998
- .pelcro-root .plc-right-10 {
1999
- right: 2.5rem;
2142
+ .pelcro-root .plc-right-5{
2143
+ right: 1.25rem;
2000
2144
  }
2001
2145
 
2002
- .pelcro-root .plc--right-16 {
2003
- right: -4rem;
2146
+ .pelcro-root .plc--right-14{
2147
+ right: -3.5rem;
2004
2148
  }
2005
2149
 
2006
- .pelcro-root .plc-bottom-0 {
2150
+ .pelcro-root .plc-bottom-0{
2007
2151
  bottom: 0px;
2008
2152
  }
2009
2153
 
2010
- .pelcro-root .plc-bottom-4 {
2154
+ .pelcro-root .plc-bottom-4{
2011
2155
  bottom: 1rem;
2012
2156
  }
2013
2157
 
2014
- .pelcro-root .plc-left-0 {
2158
+ .pelcro-root .plc-left-0{
2015
2159
  left: 0px;
2016
2160
  }
2017
2161
 
2018
- .pelcro-root .plc-left-5 {
2019
- left: 1.25rem;
2162
+ .pelcro-root .plc-left-4{
2163
+ left: 1rem;
2164
+ }
2165
+
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,957 +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-full {
2691
+ .pelcro-root .plc--translate-x-1{
2692
+ --tw-translate-x: -0.25rem;
2693
+ }
2694
+
2695
+ .pelcro-root .plc-translate-x-full{
2696
+ --tw-translate-x: 100%;
2697
+ }
2698
+
2699
+ .pelcro-root .plc--translate-x-full{
2460
2700
  --tw-translate-x: -100%;
2461
2701
  }
2462
2702
 
2463
- .pelcro-root .plc--translate-y-1\/2 {
2703
+ .pelcro-root .plc--translate-y-1\/2{
2464
2704
  --tw-translate-y: -50%;
2465
2705
  }
2466
2706
 
2467
- .pelcro-root .plc-group:hover .group-hover\:plc-translate-x-1 {
2707
+ .pelcro-root .plc-group:hover .group-hover\:plc-translate-x-1{
2468
2708
  --tw-translate-x: 0.25rem;
2469
2709
  }
2470
2710
 
2471
- .pelcro-root .plc-rotate-90 {
2711
+ .pelcro-root .plc-rotate-90{
2472
2712
  --tw-rotate: 90deg;
2473
2713
  }
2474
2714
 
2475
- .pelcro-root .plc-rotate-180 {
2715
+ .pelcro-root .plc-rotate-180{
2476
2716
  --tw-rotate: 180deg;
2477
2717
  }
2478
2718
 
2479
- .pelcro-root .plc-scale-120 {
2719
+ .pelcro-root .plc-scale-105{
2720
+ --tw-scale-x: 1.05;
2721
+ --tw-scale-y: 1.05;
2722
+ }
2723
+
2724
+ .pelcro-root .plc-scale-120{
2480
2725
  --tw-scale-x: 1.2;
2481
2726
  --tw-scale-y: 1.2;
2482
2727
  }
2483
2728
 
2484
- .pelcro-root .plc-scale-x-0 {
2729
+ .pelcro-root .plc-scale-x-0{
2485
2730
  --tw-scale-x: 0;
2486
2731
  }
2487
2732
 
2488
- .pelcro-root .plc-scale-x-100 {
2733
+ .pelcro-root .plc-scale-x-100{
2489
2734
  --tw-scale-x: 1;
2490
2735
  }
2491
2736
 
2492
- @keyframes plc-spin {
2493
- to {
2737
+ @keyframes plc-spin{
2738
+ to{
2494
2739
  transform: rotate(360deg);
2495
2740
  }
2496
2741
  }
2497
2742
 
2498
- @keyframes plc-ping {
2499
- 75%, 100% {
2743
+ @keyframes plc-ping{
2744
+ 75%, 100%{
2500
2745
  transform: scale(2);
2501
2746
  opacity: 0;
2502
2747
  }
2503
2748
  }
2504
2749
 
2505
- @keyframes plc-pulse {
2506
- 50% {
2750
+ @keyframes plc-pulse{
2751
+ 50%{
2507
2752
  opacity: .5;
2508
2753
  }
2509
2754
  }
2510
2755
 
2511
- @keyframes plc-bounce {
2512
- 0%, 100% {
2756
+ @keyframes plc-bounce{
2757
+ 0%, 100%{
2513
2758
  transform: translateY(-25%);
2514
2759
  animation-timing-function: cubic-bezier(0.8,0,1,1);
2515
2760
  }
2516
2761
 
2517
- 50% {
2762
+ 50%{
2518
2763
  transform: none;
2519
2764
  animation-timing-function: cubic-bezier(0,0,0.2,1);
2520
2765
  }
2521
2766
  }
2522
2767
 
2523
- @keyframes plc-slideInBottom {
2524
- 0% {
2768
+ @keyframes plc-slideInBottom{
2769
+ 0%{
2525
2770
  transform: translateY(1000px);
2526
2771
  opacity: 0;
2527
2772
  }
2528
2773
 
2529
- 100% {
2774
+ 100%{
2530
2775
  transform: translateY(0);
2531
2776
  opacity: 1;
2532
2777
  }
2533
2778
  }
2534
2779
 
2535
- .pelcro-root .plc-animate-spin {
2780
+ .pelcro-root .plc-animate-spin{
2536
2781
  animation: plc-spin 1s linear infinite;
2537
2782
  }
2538
2783
 
2539
- @media (prefers-reduced-motion: no-preference) {
2540
- .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{
2541
2790
  animation: plc-slideInBottom 0.5s ease-out;
2542
2791
  }
2543
2792
  }
2544
2793
 
2545
- .pelcro-root .plc-cursor-default {
2794
+ .pelcro-root .plc-cursor-default{
2546
2795
  cursor: default;
2547
2796
  }
2548
2797
 
2549
- .pelcro-root .plc-cursor-pointer {
2798
+ .pelcro-root .plc-cursor-pointer{
2550
2799
  cursor: pointer;
2551
2800
  }
2552
2801
 
2553
- .pelcro-root .plc-select-none {
2802
+ .pelcro-root .plc-select-none{
2554
2803
  -webkit-user-select: none;
2555
2804
  user-select: none;
2556
2805
  }
2557
2806
 
2558
- .pelcro-root .plc-appearance-none {
2559
- -webkit-appearance: none;
2560
- appearance: none;
2807
+ .pelcro-root .plc-grid-cols-1{
2808
+ grid-template-columns: repeat(1, minmax(0, 1fr));
2561
2809
  }
2562
2810
 
2563
- .pelcro-root .plc-flex-row-reverse {
2811
+ .pelcro-root .plc-grid-cols-2{
2812
+ grid-template-columns: repeat(2, minmax(0, 1fr));
2813
+ }
2814
+
2815
+ .pelcro-root .plc-flex-row{
2816
+ flex-direction: row;
2817
+ }
2818
+
2819
+ .pelcro-root .plc-flex-row-reverse{
2564
2820
  flex-direction: row-reverse;
2565
2821
  }
2566
2822
 
2567
- .pelcro-root .plc-flex-col {
2823
+ .pelcro-root .plc-flex-col{
2568
2824
  flex-direction: column;
2569
2825
  }
2570
2826
 
2571
- .pelcro-root .plc-flex-wrap {
2827
+ .pelcro-root .plc-flex-wrap{
2572
2828
  flex-wrap: wrap;
2573
2829
  }
2574
2830
 
2575
- .pelcro-root .plc-place-items-center {
2831
+ .pelcro-root .plc-place-items-center{
2576
2832
  place-items: center;
2577
2833
  }
2578
2834
 
2579
- .pelcro-root .plc-items-start {
2835
+ .pelcro-root .plc-items-start{
2580
2836
  align-items: flex-start;
2581
2837
  }
2582
2838
 
2583
- .pelcro-root .plc-items-end {
2839
+ .pelcro-root .plc-items-end{
2584
2840
  align-items: flex-end;
2585
2841
  }
2586
2842
 
2587
- .pelcro-root .plc-items-center {
2843
+ .pelcro-root .plc-items-center{
2588
2844
  align-items: center;
2589
2845
  }
2590
2846
 
2591
- .pelcro-root .plc-items-stretch {
2847
+ .pelcro-root .plc-items-stretch{
2592
2848
  align-items: stretch;
2593
2849
  }
2594
2850
 
2595
- .pelcro-root .plc-justify-end {
2851
+ .pelcro-root .plc-justify-end{
2596
2852
  justify-content: flex-end;
2597
2853
  }
2598
2854
 
2599
- .pelcro-root .plc-justify-center {
2855
+ .pelcro-root .plc-justify-center{
2600
2856
  justify-content: center;
2601
2857
  }
2602
2858
 
2603
- .pelcro-root .plc-justify-between {
2859
+ .pelcro-root .plc-justify-between{
2604
2860
  justify-content: space-between;
2605
2861
  }
2606
2862
 
2607
- .pelcro-root .plc-justify-evenly {
2863
+ .pelcro-root .plc-justify-evenly{
2608
2864
  justify-content: space-evenly;
2609
2865
  }
2610
2866
 
2611
- .pelcro-root .plc-justify-items-center {
2867
+ .pelcro-root .plc-justify-items-center{
2612
2868
  justify-items: center;
2613
2869
  }
2614
2870
 
2615
- .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{
2616
2880
  column-gap: 0.75rem;
2617
2881
  }
2618
2882
 
2619
- .pelcro-root .plc-gap-y-2 {
2883
+ .pelcro-root .plc-gap-y-2{
2620
2884
  row-gap: 0.5rem;
2621
2885
  }
2622
2886
 
2623
- .pelcro-root .plc-gap-y-5 {
2887
+ .pelcro-root .plc-gap-y-5{
2624
2888
  row-gap: 1.25rem;
2625
2889
  }
2626
2890
 
2627
- .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]){
2628
2898
  --tw-space-x-reverse: 0;
2629
2899
  margin-right: calc(0.5rem * var(--tw-space-x-reverse));
2630
2900
  margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse)));
2631
2901
  }
2632
2902
 
2633
- .pelcro-root .plc-space-x-3 > :not([hidden]) ~ :not([hidden]) {
2903
+ .pelcro-root .plc-space-x-3 > :not([hidden]) ~ :not([hidden]){
2634
2904
  --tw-space-x-reverse: 0;
2635
2905
  margin-right: calc(0.75rem * var(--tw-space-x-reverse));
2636
2906
  margin-left: calc(0.75rem * calc(1 - var(--tw-space-x-reverse)));
2637
2907
  }
2638
2908
 
2639
- .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]){
2640
2928
  --tw-space-y-reverse: 0;
2641
2929
  margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));
2642
2930
  margin-bottom: calc(0.5rem * var(--tw-space-y-reverse));
2643
2931
  }
2644
2932
 
2645
- .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]){
2646
2940
  --tw-space-y-reverse: 0;
2647
2941
  margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));
2648
2942
  margin-bottom: calc(1rem * var(--tw-space-y-reverse));
2649
2943
  }
2650
2944
 
2651
- .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{
2652
2963
  overflow: auto;
2653
2964
  }
2654
2965
 
2655
- .pelcro-root .plc-overflow-hidden {
2966
+ .pelcro-root .plc-overflow-hidden{
2656
2967
  overflow: hidden;
2657
2968
  }
2658
2969
 
2659
- .pelcro-root .plc-overflow-x-auto {
2660
- overflow-x: auto;
2970
+ .pelcro-root .plc-overflow-y-auto{
2971
+ overflow-y: auto;
2661
2972
  }
2662
2973
 
2663
- .pelcro-root .plc-overflow-y-auto {
2664
- overflow-y: auto;
2974
+ .pelcro-root .plc-overflow-x-hidden{
2975
+ overflow-x: hidden;
2665
2976
  }
2666
2977
 
2667
- .pelcro-root .plc-overflow-y-scroll {
2978
+ .pelcro-root .plc-overflow-y-scroll{
2668
2979
  overflow-y: scroll;
2669
2980
  }
2670
2981
 
2671
- .pelcro-root .plc-truncate {
2982
+ .pelcro-root .plc-truncate{
2672
2983
  overflow: hidden;
2673
2984
  text-overflow: ellipsis;
2674
2985
  white-space: nowrap;
2675
2986
  }
2676
2987
 
2677
- .pelcro-root .plc-whitespace-nowrap {
2678
- white-space: nowrap;
2988
+ .pelcro-root .plc-whitespace-normal{
2989
+ white-space: normal;
2679
2990
  }
2680
2991
 
2681
- .pelcro-root .plc-whitespace-pre-line {
2992
+ .pelcro-root .plc-whitespace-pre-line{
2682
2993
  white-space: pre-line;
2683
2994
  }
2684
2995
 
2685
- .pelcro-root .plc-break-words {
2996
+ .pelcro-root .plc-break-words{
2686
2997
  overflow-wrap: break-word;
2687
2998
  }
2688
2999
 
2689
- .pelcro-root .plc-rounded-none {
3000
+ .pelcro-root .plc-break-all{
3001
+ word-break: break-all;
3002
+ }
3003
+
3004
+ .pelcro-root .plc-rounded-none{
2690
3005
  border-radius: 0px;
2691
3006
  }
2692
3007
 
2693
- .pelcro-root .plc-rounded-sm {
3008
+ .pelcro-root .plc-rounded-sm{
2694
3009
  border-radius: 0.125rem;
2695
3010
  }
2696
3011
 
2697
- .pelcro-root .plc-rounded {
3012
+ .pelcro-root .plc-rounded{
2698
3013
  border-radius: 0.25rem;
2699
3014
  }
2700
3015
 
2701
- .pelcro-root .plc-rounded-md {
3016
+ .pelcro-root .plc-rounded-md{
2702
3017
  border-radius: 0.375rem;
2703
3018
  }
2704
3019
 
2705
- .pelcro-root .plc-rounded-lg {
3020
+ .pelcro-root .plc-rounded-lg{
2706
3021
  border-radius: 0.5rem;
2707
3022
  }
2708
3023
 
2709
- .pelcro-root .plc-rounded-2xl {
3024
+ .pelcro-root .plc-rounded-2xl{
2710
3025
  border-radius: 1rem;
2711
3026
  }
2712
3027
 
2713
- .pelcro-root .plc-rounded-full {
3028
+ .pelcro-root .plc-rounded-full{
2714
3029
  border-radius: 9999px;
2715
3030
  }
2716
3031
 
2717
- .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{
2718
3043
  border-width: 0px;
2719
3044
  }
2720
3045
 
2721
- .pelcro-root .plc-border-2 {
3046
+ .pelcro-root .plc-border-2{
2722
3047
  border-width: 2px;
2723
3048
  }
2724
3049
 
2725
- .pelcro-root .plc-border {
3050
+ .pelcro-root .plc-border{
2726
3051
  border-width: 1px;
2727
3052
  }
2728
3053
 
2729
- .pelcro-root .last\:plc-border-0:last-child {
3054
+ .pelcro-root .last\:plc-border-0:last-child{
2730
3055
  border-width: 0px;
2731
3056
  }
2732
3057
 
2733
- .pelcro-root .plc-border-t-2 {
3058
+ .pelcro-root .plc-border-t-2{
2734
3059
  border-top-width: 2px;
2735
3060
  }
2736
3061
 
2737
- .pelcro-root .plc-border-t-4 {
3062
+ .pelcro-root .plc-border-t-4{
2738
3063
  border-top-width: 4px;
2739
3064
  }
2740
3065
 
2741
- .pelcro-root .plc-border-t-8 {
3066
+ .pelcro-root .plc-border-t-8{
2742
3067
  border-top-width: 8px;
2743
3068
  }
2744
3069
 
2745
- .pelcro-root .plc-border-t {
3070
+ .pelcro-root .plc-border-t{
2746
3071
  border-top-width: 1px;
2747
3072
  }
2748
3073
 
2749
- .pelcro-root .plc-border-b-2 {
3074
+ .pelcro-root .plc-border-b-2{
2750
3075
  border-bottom-width: 2px;
2751
3076
  }
2752
3077
 
2753
- .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{
2754
3083
  border-bottom-width: 1px;
2755
3084
  }
2756
3085
 
2757
- .pelcro-root .plc-border-l-2 {
3086
+ .pelcro-root .plc-border-l-2{
2758
3087
  border-left-width: 2px;
2759
3088
  }
2760
3089
 
2761
- .pelcro-root .plc-border-l-4 {
3090
+ .pelcro-root .plc-border-l-4{
2762
3091
  border-left-width: 4px;
2763
3092
  }
2764
3093
 
2765
- .pelcro-root .plc-border-solid {
3094
+ .pelcro-root .plc-border-solid{
2766
3095
  border-style: solid;
2767
3096
  }
2768
3097
 
2769
- .pelcro-root .plc-border-transparent {
3098
+ .pelcro-root .plc-border-transparent{
2770
3099
  border-color: transparent;
2771
3100
  }
2772
3101
 
2773
- .pelcro-root .plc-border-primary-300 {
3102
+ .pelcro-root .plc-border-primary-300{
2774
3103
  border-color: hsl(var(--plc-primary-hue), var(--plc-primary-saturation), calc(var(--plc-primary-lightness) + 20%));
2775
3104
  }
2776
3105
 
2777
- .pelcro-root .plc-border-primary-400 {
3106
+ .pelcro-root .plc-border-primary-400{
2778
3107
  border-color: hsl(var(--plc-primary-hue), var(--plc-primary-saturation), calc(var(--plc-primary-lightness) + 10%));
2779
3108
  }
2780
3109
 
2781
- .pelcro-root .plc-border-primary-500 {
3110
+ .pelcro-root .plc-border-primary-500{
2782
3111
  border-color: hsl(var(--plc-primary-hue), var(--plc-primary-saturation), var(--plc-primary-lightness));
2783
3112
  }
2784
3113
 
2785
- .pelcro-root .plc-border-primary-800 {
2786
- border-color: hsl(var(--plc-primary-hue), var(--plc-primary-saturation), calc(var(--plc-primary-lightness) - 30%));
2787
- }
2788
-
2789
- .pelcro-root .plc-border-primary {
3114
+ .pelcro-root .plc-border-primary{
2790
3115
  border-color: hsl(var(--plc-primary-hue), var(--plc-primary-saturation), var(--plc-primary-lightness));
2791
3116
  }
2792
3117
 
2793
- .pelcro-root .plc-border-white {
3118
+ .pelcro-root .plc-border-white{
2794
3119
  --tw-border-opacity: 1;
2795
3120
  border-color: rgba(255, 255, 255, var(--tw-border-opacity));
2796
3121
  }
2797
3122
 
2798
- .pelcro-root .plc-border-gray-200 {
3123
+ .pelcro-root .plc-border-gray-200{
2799
3124
  --tw-border-opacity: 1;
2800
3125
  border-color: rgba(229, 231, 235, var(--tw-border-opacity));
2801
3126
  }
2802
3127
 
2803
- .pelcro-root .plc-border-gray-300 {
3128
+ .pelcro-root .plc-border-gray-300{
2804
3129
  --tw-border-opacity: 1;
2805
3130
  border-color: rgba(209, 213, 219, var(--tw-border-opacity));
2806
3131
  }
2807
3132
 
2808
- .pelcro-root .plc-border-gray-400 {
3133
+ .pelcro-root .plc-border-gray-400{
2809
3134
  --tw-border-opacity: 1;
2810
3135
  border-color: rgba(156, 163, 175, var(--tw-border-opacity));
2811
3136
  }
2812
3137
 
2813
- .pelcro-root .plc-border-green-400 {
3138
+ .pelcro-root .plc-border-green-400{
2814
3139
  --tw-border-opacity: 1;
2815
3140
  border-color: rgba(52, 211, 153, var(--tw-border-opacity));
2816
3141
  }
2817
3142
 
2818
- .pelcro-root .hover\:plc-border-primary-800:hover {
2819
- 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%));
2820
3145
  }
2821
3146
 
2822
- .pelcro-root .plc-bg-transparent {
2823
- 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%));
2824
3149
  }
2825
3150
 
2826
- .pelcro-root .plc-bg-primary-200 {
2827
- 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));
2828
3153
  }
2829
3154
 
2830
- .pelcro-root .plc-bg-primary-400 {
2831
- 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;
2832
3157
  }
2833
3158
 
2834
- .pelcro-root .plc-bg-primary-700 {
2835
- 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%));
2836
3161
  }
2837
3162
 
2838
- .pelcro-root .plc-bg-primary-800 {
2839
- 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%));
2840
3165
  }
2841
3166
 
2842
- .pelcro-root .plc-bg-primary {
3167
+ .pelcro-root .plc-bg-primary{
2843
3168
  background-color: hsl(var(--plc-primary-hue), var(--plc-primary-saturation), var(--plc-primary-lightness));
2844
3169
  }
2845
3170
 
2846
- .pelcro-root .plc-bg-white {
3171
+ .pelcro-root .plc-bg-white{
2847
3172
  --tw-bg-opacity: 1;
2848
3173
  background-color: rgba(255, 255, 255, var(--tw-bg-opacity));
2849
3174
  }
2850
3175
 
2851
- .pelcro-root .plc-bg-gray-50 {
2852
- --tw-bg-opacity: 1;
2853
- background-color: rgba(249, 250, 251, var(--tw-bg-opacity));
2854
- }
2855
-
2856
- .pelcro-root .plc-bg-gray-100 {
3176
+ .pelcro-root .plc-bg-gray-100{
2857
3177
  --tw-bg-opacity: 1;
2858
3178
  background-color: rgba(243, 244, 246, var(--tw-bg-opacity));
2859
3179
  }
2860
3180
 
2861
- .pelcro-root .plc-bg-gray-200 {
3181
+ .pelcro-root .plc-bg-gray-200{
2862
3182
  --tw-bg-opacity: 1;
2863
3183
  background-color: rgba(229, 231, 235, var(--tw-bg-opacity));
2864
3184
  }
2865
3185
 
2866
- .pelcro-root .plc-bg-gray-300 {
3186
+ .pelcro-root .plc-bg-gray-300{
2867
3187
  --tw-bg-opacity: 1;
2868
3188
  background-color: rgba(209, 213, 219, var(--tw-bg-opacity));
2869
3189
  }
2870
3190
 
2871
- .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{
2872
3197
  --tw-bg-opacity: 1;
2873
3198
  background-color: rgba(107, 114, 128, var(--tw-bg-opacity));
2874
3199
  }
2875
3200
 
2876
- .pelcro-root .plc-bg-gray-600 {
3201
+ .pelcro-root .plc-bg-gray-600{
2877
3202
  --tw-bg-opacity: 1;
2878
3203
  background-color: rgba(75, 85, 99, var(--tw-bg-opacity));
2879
3204
  }
2880
3205
 
2881
- .pelcro-root .plc-bg-gray-800 {
3206
+ .pelcro-root .plc-bg-gray-800{
2882
3207
  --tw-bg-opacity: 1;
2883
3208
  background-color: rgba(31, 41, 55, var(--tw-bg-opacity));
2884
3209
  }
2885
3210
 
2886
- .pelcro-root .plc-bg-red-100 {
3211
+ .pelcro-root .plc-bg-red-100{
2887
3212
  --tw-bg-opacity: 1;
2888
3213
  background-color: rgba(239, 190, 188, var(--tw-bg-opacity));
2889
3214
  }
2890
3215
 
2891
- .pelcro-root .plc-bg-red-500 {
3216
+ .pelcro-root .plc-bg-red-500{
2892
3217
  --tw-bg-opacity: 1;
2893
3218
  background-color: rgba(180, 48, 43, var(--tw-bg-opacity));
2894
3219
  }
2895
3220
 
2896
- .pelcro-root .plc-bg-yellow-100 {
3221
+ .pelcro-root .plc-bg-yellow-100{
2897
3222
  --tw-bg-opacity: 1;
2898
3223
  background-color: rgba(254, 243, 199, var(--tw-bg-opacity));
2899
3224
  }
2900
3225
 
2901
- .pelcro-root .plc-bg-green-50 {
3226
+ .pelcro-root .plc-bg-green-50{
2902
3227
  --tw-bg-opacity: 1;
2903
3228
  background-color: rgba(236, 253, 245, var(--tw-bg-opacity));
2904
3229
  }
2905
3230
 
2906
- .pelcro-root .plc-bg-green-100 {
3231
+ .pelcro-root .plc-bg-green-100{
2907
3232
  --tw-bg-opacity: 1;
2908
3233
  background-color: rgba(209, 250, 229, var(--tw-bg-opacity));
2909
3234
  }
2910
3235
 
2911
- .pelcro-root .plc-bg-blue-100 {
3236
+ .pelcro-root .plc-bg-blue-100{
2912
3237
  --tw-bg-opacity: 1;
2913
3238
  background-color: rgba(219, 234, 254, var(--tw-bg-opacity));
2914
3239
  }
2915
3240
 
2916
- .pelcro-root .plc-bg-orange-100 {
3241
+ .pelcro-root .plc-bg-orange-100{
2917
3242
  --tw-bg-opacity: 1;
2918
3243
  background-color: rgba(255, 237, 213, var(--tw-bg-opacity));
2919
3244
  }
2920
3245
 
2921
- .pelcro-root .hover\:plc-bg-transparent:hover {
3246
+ .pelcro-root .hover\:plc-bg-transparent:hover{
2922
3247
  background-color: transparent;
2923
3248
  }
2924
3249
 
2925
- .pelcro-root .hover\:plc-bg-primary-600:hover {
3250
+ .pelcro-root .hover\:plc-bg-primary-600:hover{
2926
3251
  background-color: hsl(var(--plc-primary-hue), var(--plc-primary-saturation), calc(var(--plc-primary-lightness) - 10%));
2927
3252
  }
2928
3253
 
2929
- .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{
2930
3259
  --tw-bg-opacity: 1;
2931
3260
  background-color: rgba(255, 255, 255, var(--tw-bg-opacity));
2932
3261
  }
2933
3262
 
2934
- .pelcro-root .hover\:plc-bg-gray-50:hover {
3263
+ .pelcro-root .hover\:plc-bg-gray-50:hover{
2935
3264
  --tw-bg-opacity: 1;
2936
3265
  background-color: rgba(249, 250, 251, var(--tw-bg-opacity));
2937
3266
  }
2938
3267
 
2939
- .pelcro-root .hover\:plc-bg-gray-100:hover {
3268
+ .pelcro-root .hover\:plc-bg-gray-100:hover{
2940
3269
  --tw-bg-opacity: 1;
2941
3270
  background-color: rgba(243, 244, 246, var(--tw-bg-opacity));
2942
3271
  }
2943
3272
 
2944
- .pelcro-root .hover\:plc-bg-gray-600:hover {
3273
+ .pelcro-root .hover\:plc-bg-gray-600:hover{
2945
3274
  --tw-bg-opacity: 1;
2946
3275
  background-color: rgba(75, 85, 99, var(--tw-bg-opacity));
2947
3276
  }
2948
3277
 
2949
- .pelcro-root .hover\:plc-bg-gray-900:hover {
3278
+ .pelcro-root .hover\:plc-bg-gray-900:hover{
2950
3279
  --tw-bg-opacity: 1;
2951
3280
  background-color: rgba(17, 24, 39, var(--tw-bg-opacity));
2952
3281
  }
2953
3282
 
2954
- .pelcro-root .hover\:plc-bg-red-600:hover {
3283
+ .pelcro-root .hover\:plc-bg-red-600:hover{
2955
3284
  --tw-bg-opacity: 1;
2956
3285
  background-color: rgba(139, 37, 33, var(--tw-bg-opacity));
2957
3286
  }
2958
3287
 
2959
- .pelcro-root .focus\:plc-bg-transparent:focus {
3288
+ .pelcro-root .focus\:plc-bg-transparent:focus{
2960
3289
  background-color: transparent;
2961
3290
  }
2962
3291
 
2963
- .pelcro-root .focus\:plc-bg-primary-600:focus {
3292
+ .pelcro-root .focus\:plc-bg-primary-600:focus{
2964
3293
  background-color: hsl(var(--plc-primary-hue), var(--plc-primary-saturation), calc(var(--plc-primary-lightness) - 10%));
2965
3294
  }
2966
3295
 
2967
- .pelcro-root .disabled\:plc-bg-gray-400:disabled {
3296
+ .pelcro-root .disabled\:plc-bg-gray-400:disabled{
2968
3297
  --tw-bg-opacity: 1;
2969
3298
  background-color: rgba(156, 163, 175, var(--tw-bg-opacity));
2970
3299
  }
2971
3300
 
2972
- .pelcro-root .plc-fill-current {
3301
+ .pelcro-root .plc-fill-current{
2973
3302
  fill: currentColor;
2974
3303
  }
2975
3304
 
2976
- .pelcro-root .plc-object-contain {
3305
+ .pelcro-root .plc-object-contain{
2977
3306
  object-fit: contain;
2978
3307
  }
2979
3308
 
2980
- .pelcro-root .plc-object-left {
2981
- object-position: left;
3309
+ .pelcro-root .plc-object-cover{
3310
+ object-fit: cover;
2982
3311
  }
2983
3312
 
2984
- .pelcro-root .plc-p-1 {
2985
- padding: 0.25rem;
3313
+ .pelcro-root .plc-object-center{
3314
+ object-position: center;
2986
3315
  }
2987
3316
 
2988
- .pelcro-root .plc-p-2 {
2989
- padding: 0.5rem;
3317
+ .pelcro-root .plc-p-1{
3318
+ padding: 0.25rem;
2990
3319
  }
2991
3320
 
2992
- .pelcro-root .plc-p-3 {
2993
- padding: 0.75rem;
3321
+ .pelcro-root .plc-p-2{
3322
+ padding: 0.5rem;
2994
3323
  }
2995
3324
 
2996
- .pelcro-root .plc-p-4 {
3325
+ .pelcro-root .plc-p-4{
2997
3326
  padding: 1rem;
2998
3327
  }
2999
3328
 
3000
- .pelcro-root .plc-p-5 {
3329
+ .pelcro-root .plc-p-5{
3001
3330
  padding: 1.25rem;
3002
3331
  }
3003
3332
 
3004
- .pelcro-root .plc-p-6 {
3333
+ .pelcro-root .plc-p-6{
3005
3334
  padding: 1.5rem;
3006
3335
  }
3007
3336
 
3008
- .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{
3009
3343
  padding-left: 0.25rem;
3010
3344
  padding-right: 0.25rem;
3011
3345
  }
3012
3346
 
3013
- .pelcro-root .plc-px-2 {
3347
+ .pelcro-root .plc-px-2{
3014
3348
  padding-left: 0.5rem;
3015
3349
  padding-right: 0.5rem;
3016
3350
  }
3017
3351
 
3018
- .pelcro-root .plc-px-3 {
3352
+ .pelcro-root .plc-px-3{
3019
3353
  padding-left: 0.75rem;
3020
3354
  padding-right: 0.75rem;
3021
3355
  }
3022
3356
 
3023
- .pelcro-root .plc-px-4 {
3357
+ .pelcro-root .plc-px-4{
3024
3358
  padding-left: 1rem;
3025
3359
  padding-right: 1rem;
3026
3360
  }
3027
3361
 
3028
- .pelcro-root .plc-px-5 {
3362
+ .pelcro-root .plc-px-5{
3029
3363
  padding-left: 1.25rem;
3030
3364
  padding-right: 1.25rem;
3031
3365
  }
3032
3366
 
3033
- .pelcro-root .plc-px-6 {
3367
+ .pelcro-root .plc-px-6{
3034
3368
  padding-left: 1.5rem;
3035
3369
  padding-right: 1.5rem;
3036
3370
  }
3037
3371
 
3038
- .pelcro-root .plc-px-16 {
3039
- padding-left: 4rem;
3040
- padding-right: 4rem;
3372
+ .pelcro-root .plc-px-8{
3373
+ padding-left: 2rem;
3374
+ padding-right: 2rem;
3041
3375
  }
3042
3376
 
3043
- .pelcro-root .plc-py-1 {
3377
+ .pelcro-root .plc-py-1{
3044
3378
  padding-top: 0.25rem;
3045
3379
  padding-bottom: 0.25rem;
3046
3380
  }
3047
3381
 
3048
- .pelcro-root .plc-py-2 {
3382
+ .pelcro-root .plc-py-2{
3049
3383
  padding-top: 0.5rem;
3050
3384
  padding-bottom: 0.5rem;
3051
3385
  }
3052
3386
 
3053
- .pelcro-root .plc-py-3 {
3387
+ .pelcro-root .plc-py-3{
3054
3388
  padding-top: 0.75rem;
3055
3389
  padding-bottom: 0.75rem;
3056
3390
  }
3057
3391
 
3058
- .pelcro-root .plc-py-4 {
3392
+ .pelcro-root .plc-py-4{
3059
3393
  padding-top: 1rem;
3060
3394
  padding-bottom: 1rem;
3061
3395
  }
3062
3396
 
3063
- .pelcro-root .plc-py-5 {
3397
+ .pelcro-root .plc-py-5{
3064
3398
  padding-top: 1.25rem;
3065
3399
  padding-bottom: 1.25rem;
3066
3400
  }
3067
3401
 
3068
- .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{
3069
3408
  padding-top: 0.25rem;
3070
3409
  }
3071
3410
 
3072
- .pelcro-root .plc-pt-2 {
3411
+ .pelcro-root .plc-pt-2{
3073
3412
  padding-top: 0.5rem;
3074
3413
  }
3075
3414
 
3076
- .pelcro-root .plc-pt-4 {
3415
+ .pelcro-root .plc-pt-4{
3077
3416
  padding-top: 1rem;
3078
3417
  }
3079
3418
 
3080
- .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{
3081
3428
  padding-right: 0.25rem;
3082
3429
  }
3083
3430
 
3084
- .pelcro-root .plc-pr-2 {
3431
+ .pelcro-root .plc-pr-2{
3085
3432
  padding-right: 0.5rem;
3086
3433
  }
3087
3434
 
3088
- .pelcro-root .plc-pr-4 {
3435
+ .pelcro-root .plc-pr-4{
3089
3436
  padding-right: 1rem;
3090
3437
  }
3091
3438
 
3092
- .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{
3093
3448
  padding-bottom: 1rem;
3094
3449
  }
3095
3450
 
3096
- .pelcro-root .plc-pl-2 {
3451
+ .pelcro-root .plc-pl-2{
3097
3452
  padding-left: 0.5rem;
3098
3453
  }
3099
3454
 
3100
- .pelcro-root .plc-pl-4 {
3455
+ .pelcro-root .plc-pl-4{
3101
3456
  padding-left: 1rem;
3102
3457
  }
3103
3458
 
3104
- .pelcro-root .plc-text-left {
3459
+ .pelcro-root .plc-pl-20{
3460
+ padding-left: 5rem;
3461
+ }
3462
+
3463
+ .pelcro-root .plc-text-left{
3105
3464
  text-align: left;
3106
3465
  }
3107
3466
 
3108
- .pelcro-root .plc-text-center {
3467
+ .pelcro-root .plc-text-center{
3109
3468
  text-align: center;
3110
3469
  }
3111
3470
 
3112
- .pelcro-root .plc-align-top {
3471
+ .pelcro-root .plc-text-justify{
3472
+ text-align: justify;
3473
+ }
3474
+
3475
+ .pelcro-root .plc-align-top{
3113
3476
  vertical-align: top;
3114
3477
  }
3115
3478
 
3116
- .pelcro-root .plc-align-middle {
3479
+ .pelcro-root .plc-align-middle{
3117
3480
  vertical-align: middle;
3118
3481
  }
3119
3482
 
3120
- .pelcro-root .plc-text-xs {
3483
+ .pelcro-root .plc-text-xs{
3121
3484
  font-size: 0.75rem;
3122
3485
  line-height: 1rem;
3123
3486
  }
3124
3487
 
3125
- .pelcro-root .plc-text-sm {
3488
+ .pelcro-root .plc-text-sm{
3126
3489
  font-size: 0.875rem;
3127
3490
  line-height: 1.25rem;
3128
3491
  }
3129
3492
 
3130
- .pelcro-root .plc-text-base {
3493
+ .pelcro-root .plc-text-base{
3131
3494
  font-size: 1rem;
3132
3495
  line-height: 1.5rem;
3133
3496
  }
3134
3497
 
3135
- .pelcro-root .plc-text-lg {
3498
+ .pelcro-root .plc-text-lg{
3136
3499
  font-size: 1.125rem;
3137
3500
  line-height: 1.75rem;
3138
3501
  }
3139
3502
 
3140
- .pelcro-root .plc-text-xl {
3503
+ .pelcro-root .plc-text-xl{
3141
3504
  font-size: 1.25rem;
3142
3505
  line-height: 1.75rem;
3143
3506
  }
3144
3507
 
3145
- .pelcro-root .plc-text-2xl {
3508
+ .pelcro-root .plc-text-2xl{
3146
3509
  font-size: 1.5rem;
3147
3510
  line-height: 2rem;
3148
3511
  }
3149
3512
 
3150
- .pelcro-root .plc-text-3xl {
3513
+ .pelcro-root .plc-text-3xl{
3151
3514
  font-size: 1.875rem;
3152
3515
  line-height: 2.25rem;
3153
3516
  }
3154
3517
 
3155
- .pelcro-root .plc-text-4xl {
3156
- font-size: 2.25rem;
3157
- line-height: 2.5rem;
3158
- }
3159
-
3160
- .pelcro-root .plc-font-thin {
3518
+ .pelcro-root .plc-font-thin{
3161
3519
  font-weight: 100;
3162
3520
  }
3163
3521
 
3164
- .pelcro-root .plc-font-normal {
3522
+ .pelcro-root .plc-font-normal{
3165
3523
  font-weight: 400;
3166
3524
  }
3167
3525
 
3168
- .pelcro-root .plc-font-medium {
3526
+ .pelcro-root .plc-font-medium{
3169
3527
  font-weight: 500;
3170
3528
  }
3171
3529
 
3172
- .pelcro-root .plc-font-semibold {
3530
+ .pelcro-root .plc-font-semibold{
3173
3531
  font-weight: 600;
3174
3532
  }
3175
3533
 
3176
- .pelcro-root .plc-font-bold {
3534
+ .pelcro-root .plc-font-bold{
3177
3535
  font-weight: 700;
3178
3536
  }
3179
3537
 
3180
- .pelcro-root .plc-uppercase {
3538
+ .pelcro-root .plc-font-extrabold{
3539
+ font-weight: 800;
3540
+ }
3541
+
3542
+ .pelcro-root .plc-uppercase{
3181
3543
  text-transform: uppercase;
3182
3544
  }
3183
3545
 
3184
- .pelcro-root .plc-capitalize {
3546
+ .pelcro-root .plc-capitalize{
3185
3547
  text-transform: capitalize;
3186
3548
  }
3187
3549
 
3188
- .pelcro-root .plc-tracking-wider {
3550
+ .pelcro-root .plc-tracking-wider{
3189
3551
  letter-spacing: 0.05em;
3190
3552
  }
3191
3553
 
3192
- .pelcro-root .plc-tracking-widest {
3554
+ .pelcro-root .plc-tracking-widest{
3193
3555
  letter-spacing: 0.1em;
3194
3556
  }
3195
3557
 
3196
- .pelcro-root .plc-text-primary-400 {
3558
+ .pelcro-root .plc-text-primary-400{
3197
3559
  color: hsl(var(--plc-primary-hue), var(--plc-primary-saturation), calc(var(--plc-primary-lightness) + 10%));
3198
3560
  }
3199
3561
 
3200
- .pelcro-root .plc-text-primary-500 {
3562
+ .pelcro-root .plc-text-primary-500{
3201
3563
  color: hsl(var(--plc-primary-hue), var(--plc-primary-saturation), var(--plc-primary-lightness));
3202
3564
  }
3203
3565
 
3204
- .pelcro-root .plc-text-primary-600 {
3566
+ .pelcro-root .plc-text-primary-600{
3205
3567
  color: hsl(var(--plc-primary-hue), var(--plc-primary-saturation), calc(var(--plc-primary-lightness) - 10%));
3206
3568
  }
3207
3569
 
3208
- .pelcro-root .plc-text-primary-800 {
3209
- 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));
3210
3572
  }
3211
3573
 
3212
- .pelcro-root .plc-text-black {
3574
+ .pelcro-root .plc-text-black{
3213
3575
  --tw-text-opacity: 1;
3214
3576
  color: rgba(0, 0, 0, var(--tw-text-opacity));
3215
3577
  }
3216
3578
 
3217
- .pelcro-root .plc-text-white {
3579
+ .pelcro-root .plc-text-white{
3218
3580
  --tw-text-opacity: 1;
3219
3581
  color: rgba(255, 255, 255, var(--tw-text-opacity));
3220
3582
  }
3221
3583
 
3222
- .pelcro-root .plc-text-gray-400 {
3584
+ .pelcro-root .plc-text-gray-400{
3223
3585
  --tw-text-opacity: 1;
3224
3586
  color: rgba(156, 163, 175, var(--tw-text-opacity));
3225
3587
  }
3226
3588
 
3227
- .pelcro-root .plc-text-gray-500 {
3589
+ .pelcro-root .plc-text-gray-500{
3228
3590
  --tw-text-opacity: 1;
3229
3591
  color: rgba(107, 114, 128, var(--tw-text-opacity));
3230
3592
  }
3231
3593
 
3232
- .pelcro-root .plc-text-gray-600 {
3594
+ .pelcro-root .plc-text-gray-600{
3233
3595
  --tw-text-opacity: 1;
3234
3596
  color: rgba(75, 85, 99, var(--tw-text-opacity));
3235
3597
  }
3236
3598
 
3237
- .pelcro-root .plc-text-gray-700 {
3599
+ .pelcro-root .plc-text-gray-700{
3238
3600
  --tw-text-opacity: 1;
3239
3601
  color: rgba(55, 65, 81, var(--tw-text-opacity));
3240
3602
  }
3241
3603
 
3242
- .pelcro-root .plc-text-gray-900 {
3604
+ .pelcro-root .plc-text-gray-900{
3243
3605
  --tw-text-opacity: 1;
3244
3606
  color: rgba(17, 24, 39, var(--tw-text-opacity));
3245
3607
  }
3246
3608
 
3247
- .pelcro-root .plc-text-red-500 {
3609
+ .pelcro-root .plc-text-red-500{
3248
3610
  --tw-text-opacity: 1;
3249
3611
  color: rgba(180, 48, 43, var(--tw-text-opacity));
3250
3612
  }
3251
3613
 
3252
- .pelcro-root .plc-text-red-700 {
3614
+ .pelcro-root .plc-text-red-700{
3253
3615
  --tw-text-opacity: 1;
3254
3616
  color: rgba(98, 26, 23, var(--tw-text-opacity));
3255
3617
  }
3256
3618
 
3257
- .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{
3258
3625
  --tw-text-opacity: 1;
3259
3626
  color: rgba(180, 83, 9, var(--tw-text-opacity));
3260
3627
  }
3261
3628
 
3262
- .pelcro-root .plc-text-green-400 {
3629
+ .pelcro-root .plc-text-green-400{
3263
3630
  --tw-text-opacity: 1;
3264
3631
  color: rgba(52, 211, 153, var(--tw-text-opacity));
3265
3632
  }
3266
3633
 
3267
- .pelcro-root .plc-text-green-500 {
3634
+ .pelcro-root .plc-text-green-500{
3268
3635
  --tw-text-opacity: 1;
3269
3636
  color: rgba(16, 185, 129, var(--tw-text-opacity));
3270
3637
  }
3271
3638
 
3272
- .pelcro-root .plc-text-green-600 {
3639
+ .pelcro-root .plc-text-green-600{
3273
3640
  --tw-text-opacity: 1;
3274
3641
  color: rgba(5, 150, 105, var(--tw-text-opacity));
3275
3642
  }
3276
3643
 
3277
- .pelcro-root .plc-text-green-700 {
3644
+ .pelcro-root .plc-text-green-700{
3278
3645
  --tw-text-opacity: 1;
3279
3646
  color: rgba(4, 120, 87, var(--tw-text-opacity));
3280
3647
  }
3281
3648
 
3282
- .pelcro-root .plc-text-blue-400 {
3649
+ .pelcro-root .plc-text-blue-400{
3283
3650
  --tw-text-opacity: 1;
3284
3651
  color: rgba(96, 165, 250, var(--tw-text-opacity));
3285
3652
  }
3286
3653
 
3287
- .pelcro-root .plc-text-blue-500 {
3654
+ .pelcro-root .plc-text-blue-500{
3288
3655
  --tw-text-opacity: 1;
3289
3656
  color: rgba(59, 130, 246, var(--tw-text-opacity));
3290
3657
  }
3291
3658
 
3292
- .pelcro-root .plc-text-blue-700 {
3659
+ .pelcro-root .plc-text-blue-700{
3293
3660
  --tw-text-opacity: 1;
3294
3661
  color: rgba(29, 78, 216, var(--tw-text-opacity));
3295
3662
  }
3296
3663
 
3297
- .pelcro-root .plc-text-orange-700 {
3664
+ .pelcro-root .plc-text-orange-700{
3298
3665
  --tw-text-opacity: 1;
3299
3666
  color: rgba(194, 65, 12, var(--tw-text-opacity));
3300
3667
  }
3301
3668
 
3302
- .pelcro-root .plc-group:hover .group-hover\:plc-text-primary-400 {
3669
+ .pelcro-root .plc-group:hover .group-hover\:plc-text-primary-400{
3303
3670
  color: hsl(var(--plc-primary-hue), var(--plc-primary-saturation), calc(var(--plc-primary-lightness) + 10%));
3304
3671
  }
3305
3672
 
3306
- .pelcro-root .hover\:plc-text-primary-500:hover {
3673
+ .pelcro-root .hover\:plc-text-primary-500:hover{
3307
3674
  color: hsl(var(--plc-primary-hue), var(--plc-primary-saturation), var(--plc-primary-lightness));
3308
3675
  }
3309
3676
 
3310
- .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{
3311
3682
  color: hsl(var(--plc-primary-hue), var(--plc-primary-saturation), var(--plc-primary-lightness));
3312
3683
  }
3313
3684
 
3314
- .pelcro-root .hover\:plc-text-black:hover {
3685
+ .pelcro-root .hover\:plc-text-black:hover{
3315
3686
  --tw-text-opacity: 1;
3316
3687
  color: rgba(0, 0, 0, var(--tw-text-opacity));
3317
3688
  }
3318
3689
 
3319
- .pelcro-root .hover\:plc-text-white:hover {
3690
+ .pelcro-root .hover\:plc-text-white:hover{
3320
3691
  --tw-text-opacity: 1;
3321
3692
  color: rgba(255, 255, 255, var(--tw-text-opacity));
3322
3693
  }
3323
3694
 
3324
- .pelcro-root .hover\:plc-text-gray-900:hover {
3695
+ .pelcro-root .hover\:plc-text-gray-900:hover{
3325
3696
  --tw-text-opacity: 1;
3326
3697
  color: rgba(17, 24, 39, var(--tw-text-opacity));
3327
3698
  }
3328
3699
 
3329
- .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{
3330
3706
  --tw-text-opacity: 1;
3331
3707
  color: rgba(0, 0, 0, var(--tw-text-opacity));
3332
3708
  }
3333
3709
 
3334
- .pelcro-root .focus\:plc-text-white:focus {
3710
+ .pelcro-root .focus\:plc-text-white:focus{
3335
3711
  --tw-text-opacity: 1;
3336
3712
  color: rgba(255, 255, 255, var(--tw-text-opacity));
3337
3713
  }
3338
3714
 
3339
- .pelcro-root .plc-underline {
3715
+ .pelcro-root .plc-underline{
3340
3716
  text-decoration: underline;
3341
3717
  }
3342
3718
 
3343
- .pelcro-root .plc-no-underline {
3719
+ .pelcro-root .plc-no-underline{
3344
3720
  text-decoration: none;
3345
3721
  }
3346
3722
 
3347
- .pelcro-root .hover\:plc-opacity-30:hover {
3348
- opacity: 0.3;
3723
+ .pelcro-root .hover\:plc-no-underline:hover{
3724
+ text-decoration: none;
3349
3725
  }
3350
3726
 
3351
- *, ::before, ::after {
3727
+ *, ::before, ::after{
3352
3728
  --tw-shadow: 0 0 #0000;
3353
3729
  }
3354
3730
 
3355
- .pelcro-root .plc-shadow-sm {
3731
+ .pelcro-root .plc-shadow-sm{
3356
3732
  --tw-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
3357
3733
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
3358
3734
  }
3359
3735
 
3360
- .pelcro-root .plc-shadow-md {
3736
+ .pelcro-root .plc-shadow-md{
3361
3737
  --tw-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
3362
3738
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
3363
3739
  }
3364
3740
 
3365
- .pelcro-root .plc-shadow-md_dark {
3741
+ .pelcro-root .plc-shadow-md_dark{
3366
3742
  --tw-shadow: 0 0px 6px -1px rgba(0, 0, 0, 0.1), 0 0px 4px -1px rgba(0, 0, 0, 0.4);
3367
3743
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
3368
3744
  }
3369
3745
 
3370
- .pelcro-root .plc-shadow-lg {
3746
+ .pelcro-root .plc-shadow-lg{
3371
3747
  --tw-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
3372
3748
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
3373
3749
  }
3374
3750
 
3375
- .pelcro-root .plc-shadow-xl {
3751
+ .pelcro-root .plc-shadow-xl{
3376
3752
  --tw-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
3377
3753
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
3378
3754
  }
3379
3755
 
3380
- .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{
3381
3762
  --tw-shadow: 0 0 #0000;
3382
3763
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
3383
3764
  }
3384
3765
 
3385
- .pelcro-root .focus\:plc-shadow-none:focus {
3766
+ .pelcro-root .focus\:plc-shadow-none:focus{
3386
3767
  --tw-shadow: 0 0 #0000;
3387
3768
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
3388
3769
  }
3389
3770
 
3390
- .pelcro-root .plc-outline-none {
3771
+ .pelcro-root .plc-outline-none{
3391
3772
  outline: 2px solid transparent;
3392
3773
  outline-offset: 2px;
3393
3774
  }
3394
3775
 
3395
- .pelcro-root .focus-within\:plc-outline-none:focus-within {
3776
+ .pelcro-root .focus-within\:plc-outline-none:focus-within{
3396
3777
  outline: 2px solid transparent;
3397
3778
  outline-offset: 2px;
3398
3779
  }
3399
3780
 
3400
- .pelcro-root .focus\:plc-outline-none:focus {
3781
+ .pelcro-root .focus\:plc-outline-none:focus{
3401
3782
  outline: 2px solid transparent;
3402
3783
  outline-offset: 2px;
3403
3784
  }
3404
3785
 
3405
- *, ::before, ::after {
3786
+ *, ::before, ::after{
3406
3787
  --tw-ring-inset: var(--tw-empty,/*!*/ /*!*/);
3407
3788
  --tw-ring-offset-width: 0px;
3408
3789
  --tw-ring-offset-color: #fff;
@@ -3411,208 +3792,370 @@ in order to scope selectors under pelcro-root
3411
3792
  --tw-ring-shadow: 0 0 #0000;
3412
3793
  }
3413
3794
 
3414
- .pelcro-root .plc-ring-1 {
3795
+ .pelcro-root .plc-ring-1{
3415
3796
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
3416
3797
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
3417
3798
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
3418
3799
  }
3419
3800
 
3420
- .pelcro-root .plc-ring-2 {
3801
+ .pelcro-root .plc-ring-2{
3421
3802
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
3422
3803
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
3423
3804
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
3424
3805
  }
3425
3806
 
3426
- .pelcro-root .focus\:plc-ring-0:focus {
3807
+ .pelcro-root .focus\:plc-ring-0:focus{
3427
3808
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
3428
3809
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);
3429
3810
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
3430
3811
  }
3431
3812
 
3432
- .pelcro-root .focus\:plc-ring-2:focus {
3813
+ .pelcro-root .focus\:plc-ring-2:focus{
3433
3814
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
3434
3815
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
3435
3816
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
3436
3817
  }
3437
3818
 
3438
- .pelcro-root .plc-ring-primary-400 {
3819
+ .pelcro-root .plc-ring-primary-400{
3439
3820
  --tw-ring-color: hsl(var(--plc-primary-hue), var(--plc-primary-saturation), calc(var(--plc-primary-lightness) + 10%));
3440
3821
  }
3441
3822
 
3442
- .pelcro-root .plc-ring-gray-200 {
3823
+ .pelcro-root .plc-ring-gray-200{
3443
3824
  --tw-ring-opacity: 1;
3444
3825
  --tw-ring-color: rgba(229, 231, 235, var(--tw-ring-opacity));
3445
3826
  }
3446
3827
 
3447
- .pelcro-root .plc-ring-red-400 {
3448
- --tw-ring-opacity: 1;
3449
- --tw-ring-color: rgba(209, 70, 65, var(--tw-ring-opacity));
3450
- }
3451
-
3452
- .pelcro-root .focus\:plc-ring-primary-300:focus {
3828
+ .pelcro-root .focus\:plc-ring-primary-300:focus{
3453
3829
  --tw-ring-color: hsl(var(--plc-primary-hue), var(--plc-primary-saturation), calc(var(--plc-primary-lightness) + 20%));
3454
3830
  }
3455
3831
 
3456
- .pelcro-root .focus\:plc-ring-red-500:focus {
3832
+ .pelcro-root .focus\:plc-ring-red-500:focus{
3457
3833
  --tw-ring-opacity: 1;
3458
3834
  --tw-ring-color: rgba(180, 48, 43, var(--tw-ring-opacity));
3459
3835
  }
3460
3836
 
3461
- .pelcro-root .focus\:plc-ring-green-300:focus {
3837
+ .pelcro-root .focus\:plc-ring-green-300:focus{
3462
3838
  --tw-ring-opacity: 1;
3463
3839
  --tw-ring-color: rgba(110, 231, 183, var(--tw-ring-opacity));
3464
3840
  }
3465
3841
 
3466
- .pelcro-root .focus\:plc-ring-blue-400:focus {
3842
+ .pelcro-root .focus\:plc-ring-blue-400:focus{
3467
3843
  --tw-ring-opacity: 1;
3468
3844
  --tw-ring-color: rgba(96, 165, 250, var(--tw-ring-opacity));
3469
3845
  }
3470
3846
 
3471
- .pelcro-root .focus\:plc-ring-blue-500:focus {
3847
+ .pelcro-root .focus\:plc-ring-blue-500:focus{
3472
3848
  --tw-ring-opacity: 1;
3473
3849
  --tw-ring-color: rgba(59, 130, 246, var(--tw-ring-opacity));
3474
3850
  }
3475
3851
 
3476
- .pelcro-root .plc-transition-all {
3852
+ .pelcro-root .plc-transition-all{
3477
3853
  transition-property: all;
3478
3854
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
3479
3855
  transition-duration: 150ms;
3480
3856
  }
3481
3857
 
3482
- .pelcro-root .plc-transition {
3858
+ .pelcro-root .plc-transition{
3483
3859
  transition-property: background-color, border-color, color, fill, stroke, opacity, box-shadow, transform;
3484
3860
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
3485
3861
  transition-duration: 150ms;
3486
3862
  }
3487
3863
 
3488
- .pelcro-root .plc-transition-transform {
3864
+ .pelcro-root .plc-transition-transform{
3489
3865
  transition-property: transform;
3490
3866
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
3491
3867
  transition-duration: 150ms;
3492
3868
  }
3493
3869
 
3494
- .pelcro-root .plc-duration-500 {
3870
+ .pelcro-root .plc-duration-500{
3495
3871
  transition-duration: 500ms;
3496
3872
  }
3497
3873
 
3498
- .pelcro-root .plc-ease-out {
3874
+ .pelcro-root .plc-ease-out{
3499
3875
  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
3500
3876
  }
3501
3877
 
3502
- @media (min-width: 640px) {
3503
- .pelcro-root .sm\:plc-m-4 {
3504
- 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;
3505
3892
  }
3506
3893
 
3507
- .pelcro-root .sm\:plc-mb-0 {
3508
- margin-bottom: 0px;
3894
+ .pelcro-root .sm\:plc--left-14{
3895
+ left: -3.5rem;
3509
3896
  }
3510
3897
 
3511
- .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{
3512
3903
  margin-left: 0.5rem;
3513
3904
  }
3514
3905
 
3515
- .pelcro-root .sm\:plc-ml-6 {
3906
+ .pelcro-root .sm\:plc-ml-6{
3516
3907
  margin-left: 1.5rem;
3517
3908
  }
3518
3909
 
3519
- .pelcro-root .sm\:plc-ml-8 {
3910
+ .pelcro-root .sm\:plc-ml-8{
3520
3911
  margin-left: 2rem;
3521
3912
  }
3522
3913
 
3523
- .pelcro-root .sm\:plc-flex {
3524
- display: flex;
3914
+ .pelcro-root .sm\:plc-block{
3915
+ display: block;
3525
3916
  }
3526
3917
 
3527
- .pelcro-root .sm\:plc-inline-grid {
3528
- display: inline-grid;
3918
+ .pelcro-root .sm\:plc-flex{
3919
+ display: flex;
3529
3920
  }
3530
3921
 
3531
- .pelcro-root .sm\:plc-h-8 {
3922
+ .pelcro-root .sm\:plc-h-8{
3532
3923
  height: 2rem;
3533
3924
  }
3534
3925
 
3535
- .pelcro-root .sm\:plc-h-96 {
3926
+ .pelcro-root .sm\:plc-h-96{
3536
3927
  height: 24rem;
3537
3928
  }
3538
3929
 
3539
- .pelcro-root .sm\:plc-w-auto {
3930
+ .pelcro-root .sm\:plc-w-auto{
3540
3931
  width: auto;
3541
3932
  }
3542
3933
 
3543
- .pelcro-root .sm\:plc-w-1\/2 {
3544
- width: 50%;
3545
- }
3546
-
3547
- .pelcro-root .sm\:plc-max-w-md {
3934
+ .pelcro-root .sm\:plc-max-w-md{
3548
3935
  max-width: 28rem;
3549
3936
  }
3550
3937
 
3551
- .pelcro-root .sm\:plc-max-w-90\% {
3938
+ .pelcro-root .sm\:plc-max-w-90\%{
3552
3939
  max-width: 90%;
3553
3940
  }
3554
3941
 
3555
- .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{
3556
3947
  flex-direction: row;
3557
3948
  }
3558
3949
 
3559
- .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]){
3560
3959
  --tw-space-x-reverse: 0;
3561
3960
  margin-right: calc(0.5rem * var(--tw-space-x-reverse));
3562
3961
  margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse)));
3563
3962
  }
3564
3963
 
3565
- .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]){
3566
3971
  --tw-space-y-reverse: 0;
3567
3972
  margin-top: calc(0px * calc(1 - var(--tw-space-y-reverse)));
3568
3973
  margin-bottom: calc(0px * var(--tw-space-y-reverse));
3569
3974
  }
3570
3975
 
3571
- .pelcro-root .sm\:plc-p-2 {
3976
+ .pelcro-root .sm\:plc-p-2{
3572
3977
  padding: 0.5rem;
3573
3978
  }
3574
3979
 
3575
- .pelcro-root .sm\:plc-px-8 {
3980
+ .pelcro-root .sm\:plc-px-8{
3576
3981
  padding-left: 2rem;
3577
3982
  padding-right: 2rem;
3578
3983
  }
3579
3984
 
3580
- .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{
3581
3996
  padding-left: 2rem;
3582
3997
  }
3583
3998
  }
3584
3999
 
3585
- @media (min-width: 768px) {
3586
- .pelcro-root .md\:plc-max-w-70\% {
3587
- 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;
3588
4012
  }
3589
- }
3590
4013
 
3591
- @media (min-width: 1024px) {
3592
- .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{
3593
4039
  width: 25%;
3594
4040
  }
3595
4041
 
3596
- .pelcro-root .lg\:plc-w-9\/12 {
3597
- width: 75%;
4042
+ .pelcro-root .md\:plc-max-w-xl{
4043
+ max-width: 36rem;
3598
4044
  }
3599
- }
3600
4045
 
3601
- @media (min-width: 1280px) {
3602
- .pelcro-root .xl\:plc-px-0 {
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;
4084
+ }
4085
+
4086
+ .pelcro-root .md\:plc-p-8{
4087
+ padding: 2rem;
4088
+ }
4089
+
4090
+ .pelcro-root .md\:plc-px-0{
3603
4091
  padding-left: 0px;
3604
4092
  padding-right: 0px;
3605
4093
  }
4094
+ }
3606
4095
 
3607
- .pelcro-root .xl\:plc-px-16 {
3608
- padding-left: 4rem;
3609
- 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%;
3610
4103
  }
3611
4104
  }
3612
4105
 
3613
- @media (min-width: 1536px) {
4106
+ @media (min-width: 1280px){
3614
4107
  }
3615
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
+
3616
4159
  /* purgecss start ignore */
3617
4160
 
3618
4161
  .toggle-switch {