@pelcro/react-pelcro-js 4.0.0-alpha.1 → 4.0.0-alpha.100

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
- max-width: 42rem;
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: 8rem;
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: 3rem;
768
- padding-right: 3rem;
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));
827
+ background-color: rgba(255, 255, 255, var(--tw-bg-opacity));
824
828
  padding-left: 1rem;
825
829
  padding-right: 1rem;
826
- padding-top: 1rem;
827
- padding-bottom: 1rem;
830
+ padding-top: 1.5rem;
828
831
  }
829
832
 
830
- @media (min-width: 768px) {
831
- .pelcro-root .pelcro-modal-body {
832
- padding-left: 4rem;
833
- padding-right: 4rem;
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,18 +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
1579
  .pelcro-root .pelcro-shop-product-image {
1502
1580
  max-width: 13rem;
1503
1581
  }
@@ -1591,7 +1669,7 @@ Add the correct display in Chrome and Safari.
1591
1669
  height: 0.375rem;
1592
1670
  }
1593
1671
 
1594
- .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{
1595
1673
  border-radius: 0.375rem;
1596
1674
  border-style: none;
1597
1675
  background-color: hsl(var(--plc-primary-hue), var(--plc-primary-saturation), var(--plc-primary-lightness));
@@ -1615,7 +1693,7 @@ Add the correct display in Chrome and Safari.
1615
1693
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
1616
1694
  }
1617
1695
 
1618
- .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{
1619
1697
  background-color: hsl(var(--plc-primary-hue), var(--plc-primary-saturation), var(--plc-primary-lightness));
1620
1698
  }
1621
1699
 
@@ -1636,63 +1714,251 @@ Add the correct display in Chrome and Safari.
1636
1714
  color: hsl(var(--plc-primary-hue), var(--plc-primary-saturation), calc(var(--plc-primary-lightness) + 10%));
1637
1715
  }
1638
1716
 
1639
- .pelcro-root .pelcro-select-plan-radio {
1640
- margin-top: 0.4rem;
1717
+ .pelcro-root .pelcro-product {
1718
+ display: flex !important;
1641
1719
  }
1642
1720
 
1643
- .pelcro-root .pelcro-product:before {
1721
+ .pelcro-root .productTabs:before {
1644
1722
  content: "";
1723
+ width: calc(100% - 5.5rem);
1724
+ left: 2.75rem;
1645
1725
  position: absolute;
1646
- top: 0px;
1647
- left: 0px;
1648
- height: 0.25rem;
1649
- width: 100%;
1650
- background-color: hsl(var(--plc-primary-hue), var(--plc-primary-saturation), calc(var(--plc-primary-lightness) - 30%));
1726
+ bottom: 0.125rem;
1727
+ height: 1px;
1728
+ --tw-bg-opacity: 1;
1729
+ background-color: rgba(209, 213, 219, var(--tw-bg-opacity));
1651
1730
  }
1652
1731
 
1653
- .pelcro-root .productTabs .tabs::-webkit-scrollbar {
1654
- display: none;
1732
+ .pelcro-root .selectedProduct img {
1733
+ max-width: 150px;
1734
+ height: auto;
1655
1735
  }
1656
1736
 
1657
- .pelcro-root .productTabs .tabs {
1658
- -ms-overflow-style: none;
1659
- scrollbar-width: none;
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));
1660
1740
  }
1661
1741
 
1662
- .pelcro-root .productTabs .tabs li:first-child {
1663
- margin-left: auto;
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);
1664
1747
  }
1665
1748
 
1666
- .pelcro-root .productTabs .tabs li:last-child {
1667
- margin-right: auto;
1749
+ .pelcro-root .pelcro-select-plan-wrapper,
1750
+ .pelcro-root .pelcro-select-product-wrapper {
1751
+ transition: all 0.2s ease-in-out;
1668
1752
  }
1669
1753
 
1670
- .pelcro-root .productTabs .tabs li#activeTab button {
1671
- color: hsl(var(--plc-primary-hue), var(--plc-primary-saturation), calc(var(--plc-primary-lightness) - 30%));
1754
+ .pelcro-root .loginOptions.threeColumns {
1755
+ display: flex;
1756
+ flex-wrap: wrap;
1757
+ justify-content: center;
1672
1758
  }
1673
1759
 
1674
- .pelcro-root .productTabs .tabs li#activeTab:after {
1675
- content: "";
1676
- position: absolute;
1677
- bottom: 0px;
1678
- left: 0px;
1679
- display: block;
1680
- height: 0.25rem;
1681
- width: 100%;
1682
- background-color: hsl(var(--plc-primary-hue), var(--plc-primary-saturation), calc(var(--plc-primary-lightness) - 30%));
1760
+ .pelcro-root .loginOptions.threeColumns li {
1761
+ flex: 1;
1762
+ min-width: 140px;
1763
+ margin-bottom: 10px;
1683
1764
  }
1684
1765
 
1685
- .pelcro-root .selectedProduct img {
1686
- max-width: 150px;
1687
- height: auto;
1766
+ .pelcro-root .loginOptions.threeColumns li:first-child {
1767
+ margin-right: 10px;
1768
+ }
1769
+
1770
+ .pelcro-root
1771
+ .loginOptions.threeColumns
1772
+ li:nth-child(2):not(:last-child) {
1773
+ margin-right: 10px;
1774
+ }
1775
+
1776
+ .pelcro-root .loginOptions.twoColumns {
1777
+ display: grid;
1778
+ grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
1779
+ gap: 10px;
1688
1780
  }
1689
1781
 
1690
1782
  .pelcro-user-profile-picture:hover {
1691
1783
  filter: brightness(0.8);
1692
1784
  }
1693
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
+
1694
1795
  /* used by multiple input sub-components */
1695
1796
 
1797
+ /* Slider */
1798
+
1799
+ .pelcro-root .slick-slider {
1800
+ position: relative;
1801
+ display: block;
1802
+ box-sizing: border-box;
1803
+ -webkit-user-select: none;
1804
+ user-select: none;
1805
+ touch-action: pan-y;
1806
+ }
1807
+
1808
+ .pelcro-root .slick-list {
1809
+ position: relative;
1810
+ display: block;
1811
+ overflow: hidden;
1812
+ padding: 0;
1813
+ padding-top: 0.75rem;
1814
+ padding-bottom: 0.75rem;
1815
+ /* margin: 0 -10px; */
1816
+ }
1817
+
1818
+ .pelcro-root .slick-list:focus {
1819
+ outline: none;
1820
+ }
1821
+
1822
+ .pelcro-root .slick-list.dragging {
1823
+ cursor: pointer;
1824
+ }
1825
+
1826
+ .pelcro-root .slick-slider .slick-track,
1827
+ .pelcro-root .slick-slider .slick-list {
1828
+ transform: translate3d(0, 0, 0);
1829
+ }
1830
+
1831
+ .pelcro-root .slick-track {
1832
+ position: relative;
1833
+ top: 0;
1834
+ left: 0;
1835
+ display: flex;
1836
+ align-items: stretch;
1837
+ }
1838
+
1839
+ .pelcro-root .slick-track:before,
1840
+ .pelcro-root .slick-track:after {
1841
+ display: table;
1842
+ content: "";
1843
+ }
1844
+
1845
+ .pelcro-root .slick-track:after {
1846
+ clear: both;
1847
+ }
1848
+
1849
+ .pelcro-root .slick-loading .slick-track {
1850
+ visibility: hidden;
1851
+ }
1852
+
1853
+ .pelcro-root .slick-slide {
1854
+ display: flex !important;
1855
+ align-self: stretch;
1856
+ height: unset;
1857
+ margin: 0 10px;
1858
+ }
1859
+
1860
+ .pelcro-root .slick-slide > div {
1861
+ display: flex;
1862
+ align-self: stretch;
1863
+ width: 100%;
1864
+ height: 100%;
1865
+ }
1866
+
1867
+ .pelcro-root .slick-slide img {
1868
+ display: block;
1869
+ }
1870
+
1871
+ .pelcro-root .slick-slide.slick-loading img {
1872
+ display: none;
1873
+ }
1874
+
1875
+ .pelcro-root .slick-slide.dragging img {
1876
+ pointer-events: none;
1877
+ }
1878
+
1879
+ .pelcro-root .slick-initialized .slick-slide {
1880
+ display: block;
1881
+ }
1882
+
1883
+ .pelcro-root .slick-loading .slick-slide {
1884
+ visibility: hidden;
1885
+ }
1886
+
1887
+ .pelcro-root .slick-vertical .slick-slide {
1888
+ display: block;
1889
+ height: auto;
1890
+ border: 1px solid transparent;
1891
+ }
1892
+
1893
+ .pelcro-root .slick-arrow.slick-hidden {
1894
+ display: none;
1895
+ }
1896
+
1897
+ .pelcro-root .slick-disabled {
1898
+ opacity: 0;
1899
+ cursor: auto;
1900
+ }
1901
+
1902
+ .pelcro-root .slick-dots {
1903
+ margin-top: 20px;
1904
+ display: flex !important;
1905
+ align-items: center;
1906
+ justify-content: center;
1907
+ flex-wrap: wrap;
1908
+ }
1909
+
1910
+ .pelcro-root .slick-dots li {
1911
+ margin: 0 2px;
1912
+ }
1913
+
1914
+ .pelcro-root .slick-dots li.slick-active span {
1915
+ border-color: grey;
1916
+ background-color: hsl(
1917
+ var(--plc-primary-hue),
1918
+ var(--plc-primary-saturation),
1919
+ var(--plc-primary-lightness)
1920
+ );
1921
+ }
1922
+
1923
+ .pelcro-root .slick-arrow {
1924
+ outline: none !important;
1925
+ }
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
+
1696
1962
  /*
1697
1963
  styling is copied from react-easy-crop/react-easy-crop.css
1698
1964
  in order to scope selectors under pelcro-root
@@ -1767,507 +2033,639 @@ in order to scope selectors under pelcro-root
1767
2033
  border-right: 0;
1768
2034
  }
1769
2035
 
2036
+ apple-pay-button {
2037
+ --apple-pay-button-width: 100%;
2038
+ --apple-pay-button-height: 48px;
2039
+ --apple-pay-button-border-radius: 0.25rem;
2040
+ --apple-pay-button-padding: 0px 0px;
2041
+ --apple-pay-button-box-sizing: border-box;
2042
+ }
2043
+
1770
2044
  /* utilities */
1771
2045
 
1772
- .pelcro-root .plc-pointer-events-none {
2046
+ .pelcro-root .plc-pointer-events-none{
1773
2047
  pointer-events: none;
1774
2048
  }
1775
2049
 
1776
- .pelcro-root .plc-fixed {
2050
+ .pelcro-root .plc-fixed{
1777
2051
  position: fixed;
1778
2052
  }
1779
2053
 
1780
- .pelcro-root .plc-absolute {
2054
+ .pelcro-root .plc-absolute{
1781
2055
  position: absolute;
1782
2056
  }
1783
2057
 
1784
- .pelcro-root .plc-relative {
2058
+ .pelcro-root .plc-relative{
1785
2059
  position: relative;
1786
2060
  }
1787
2061
 
1788
- .pelcro-root .plc-inset-0 {
2062
+ .pelcro-root .plc-inset-0{
1789
2063
  top: 0px;
1790
2064
  right: 0px;
1791
2065
  bottom: 0px;
1792
2066
  left: 0px;
1793
2067
  }
1794
2068
 
1795
- .pelcro-root .plc-inset-y-0 {
2069
+ .pelcro-root .plc-inset-y-0{
1796
2070
  top: 0px;
1797
2071
  bottom: 0px;
1798
2072
  }
1799
2073
 
1800
- .pelcro-root .plc-top-0 {
2074
+ .pelcro-root .plc-top-0{
1801
2075
  top: 0px;
1802
2076
  }
1803
2077
 
1804
- .pelcro-root .plc-top-1 {
2078
+ .pelcro-root .plc-top-1{
1805
2079
  top: 0.25rem;
1806
2080
  }
1807
2081
 
1808
- .pelcro-root .plc-top-5 {
2082
+ .pelcro-root .plc-top-4{
2083
+ top: 1rem;
2084
+ }
2085
+
2086
+ .pelcro-root .plc-top-5{
1809
2087
  top: 1.25rem;
1810
2088
  }
1811
2089
 
1812
- .pelcro-root .plc-top-7 {
1813
- top: 1.75rem;
2090
+ .pelcro-root .plc-top-6{
2091
+ top: 1.5rem;
1814
2092
  }
1815
2093
 
1816
- .pelcro-root .plc-top-24 {
2094
+ .pelcro-root .plc-top-24{
1817
2095
  top: 6rem;
1818
2096
  }
1819
2097
 
1820
- .pelcro-root .plc-top-1\.5 {
2098
+ .pelcro-root .plc-top-1\.5{
1821
2099
  top: 0.375rem;
1822
2100
  }
1823
2101
 
1824
- .pelcro-root .plc-top-1\/2 {
2102
+ .pelcro-root .plc--top-1{
2103
+ top: -0.25rem;
2104
+ }
2105
+
2106
+ .pelcro-root .plc--top-3{
2107
+ top: -0.75rem;
2108
+ }
2109
+
2110
+ .pelcro-root .plc-top-1\/2{
1825
2111
  top: 50%;
1826
2112
  }
1827
2113
 
1828
- .pelcro-root .plc-right-0 {
2114
+ .pelcro-root .plc-right-0{
1829
2115
  right: 0px;
1830
2116
  }
1831
2117
 
1832
- .pelcro-root .plc-right-1 {
2118
+ .pelcro-root .plc-right-1{
1833
2119
  right: 0.25rem;
1834
2120
  }
1835
2121
 
1836
- .pelcro-root .plc-right-2 {
2122
+ .pelcro-root .plc-right-2{
1837
2123
  right: 0.5rem;
1838
2124
  }
1839
2125
 
1840
- .pelcro-root .plc-right-4 {
2126
+ .pelcro-root .plc-right-3{
2127
+ right: 0.75rem;
2128
+ }
2129
+
2130
+ .pelcro-root .plc-right-4{
1841
2131
  right: 1rem;
1842
2132
  }
1843
2133
 
1844
- .pelcro-root .plc-right-10 {
1845
- right: 2.5rem;
2134
+ .pelcro-root .plc-right-5{
2135
+ right: 1.25rem;
2136
+ }
2137
+
2138
+ .pelcro-root .plc--right-14{
2139
+ right: -3.5rem;
1846
2140
  }
1847
2141
 
1848
- .pelcro-root .plc-bottom-0 {
2142
+ .pelcro-root .plc-bottom-0{
1849
2143
  bottom: 0px;
1850
2144
  }
1851
2145
 
1852
- .pelcro-root .plc-bottom-4 {
2146
+ .pelcro-root .plc-bottom-4{
1853
2147
  bottom: 1rem;
1854
2148
  }
1855
2149
 
1856
- .pelcro-root .plc-left-0 {
2150
+ .pelcro-root .plc-left-0{
1857
2151
  left: 0px;
1858
2152
  }
1859
2153
 
1860
- .pelcro-root .plc-left-5 {
1861
- left: 1.25rem;
2154
+ .pelcro-root .plc-left-4{
2155
+ left: 1rem;
1862
2156
  }
1863
2157
 
1864
- .pelcro-root .plc-z-max {
1865
- z-index: 999999;
2158
+ .pelcro-root .plc-left-6{
2159
+ left: 1.5rem;
1866
2160
  }
1867
2161
 
1868
- .pelcro-root .plc-order-1 {
2162
+ .pelcro-root .plc--left-14{
2163
+ left: -3.5rem;
2164
+ }
2165
+
2166
+ .pelcro-root .plc-z-max{
2167
+ z-index: 999999;
2168
+ }
2169
+
2170
+ .pelcro-root .plc-order-1{
1869
2171
  order: 1;
1870
2172
  }
1871
2173
 
1872
- .pelcro-root .plc-order-2 {
2174
+ .pelcro-root .plc-order-2{
1873
2175
  order: 2;
1874
2176
  }
1875
2177
 
1876
- .pelcro-root .plc-m-0 {
2178
+ .pelcro-root .plc-m-0{
1877
2179
  margin: 0px;
1878
2180
  }
1879
2181
 
1880
- .pelcro-root .plc-m-3 {
2182
+ .pelcro-root .plc-m-1{
2183
+ margin: 0.25rem;
2184
+ }
2185
+
2186
+ .pelcro-root .plc-m-3{
1881
2187
  margin: 0.75rem;
1882
2188
  }
1883
2189
 
1884
- .pelcro-root .plc-m-auto {
2190
+ .pelcro-root .plc-m-auto{
1885
2191
  margin: auto;
1886
2192
  }
1887
2193
 
1888
- .pelcro-root .plc-mx-4 {
1889
- margin-left: 1rem;
1890
- margin-right: 1rem;
2194
+ .pelcro-root .plc-m-0\.5{
2195
+ margin: 0.125rem;
1891
2196
  }
1892
2197
 
1893
- .pelcro-root .plc-mx-auto {
2198
+ .pelcro-root .plc-mx-auto{
1894
2199
  margin-left: auto;
1895
2200
  margin-right: auto;
1896
2201
  }
1897
2202
 
1898
- .pelcro-root .plc-my-2 {
2203
+ .pelcro-root .plc-my-2{
1899
2204
  margin-top: 0.5rem;
1900
2205
  margin-bottom: 0.5rem;
1901
2206
  }
1902
2207
 
1903
- .pelcro-root .plc-my-4 {
2208
+ .pelcro-root .plc-my-4{
1904
2209
  margin-top: 1rem;
1905
2210
  margin-bottom: 1rem;
1906
2211
  }
1907
2212
 
1908
- .pelcro-root .plc-my-5 {
2213
+ .pelcro-root .plc-my-5{
1909
2214
  margin-top: 1.25rem;
1910
2215
  margin-bottom: 1.25rem;
1911
2216
  }
1912
2217
 
1913
- .pelcro-root .plc-my-20 {
1914
- margin-top: 5rem;
1915
- margin-bottom: 5rem;
2218
+ .pelcro-root .plc-my-11{
2219
+ margin-top: 2.75rem;
2220
+ margin-bottom: 2.75rem;
2221
+ }
2222
+
2223
+ .pelcro-root .plc-my-auto{
2224
+ margin-top: auto;
2225
+ margin-bottom: auto;
1916
2226
  }
1917
2227
 
1918
- .pelcro-root .plc-mt-1 {
2228
+ .pelcro-root .plc-mt-1{
1919
2229
  margin-top: 0.25rem;
1920
2230
  }
1921
2231
 
1922
- .pelcro-root .plc-mt-2 {
2232
+ .pelcro-root .plc-mt-2{
1923
2233
  margin-top: 0.5rem;
1924
2234
  }
1925
2235
 
1926
- .pelcro-root .plc-mt-3 {
2236
+ .pelcro-root .plc-mt-3{
1927
2237
  margin-top: 0.75rem;
1928
2238
  }
1929
2239
 
1930
- .pelcro-root .plc-mt-4 {
2240
+ .pelcro-root .plc-mt-4{
1931
2241
  margin-top: 1rem;
1932
2242
  }
1933
2243
 
1934
- .pelcro-root .plc-mt-5 {
2244
+ .pelcro-root .plc-mt-5{
1935
2245
  margin-top: 1.25rem;
1936
2246
  }
1937
2247
 
1938
- .pelcro-root .plc-mt-6 {
2248
+ .pelcro-root .plc-mt-6{
1939
2249
  margin-top: 1.5rem;
1940
2250
  }
1941
2251
 
1942
- .pelcro-root .plc-mt-8 {
1943
- margin-top: 2rem;
1944
- }
1945
-
1946
- .pelcro-root .plc-mt-auto {
2252
+ .pelcro-root .plc-mt-auto{
1947
2253
  margin-top: auto;
1948
2254
  }
1949
2255
 
1950
- .pelcro-root .plc--mt-8 {
2256
+ .pelcro-root .plc--mt-8{
1951
2257
  margin-top: -2rem;
1952
2258
  }
1953
2259
 
1954
- .pelcro-root .plc-mr-1 {
2260
+ .pelcro-root .plc-mr-1{
1955
2261
  margin-right: 0.25rem;
1956
2262
  }
1957
2263
 
1958
- .pelcro-root .plc-mr-2 {
2264
+ .pelcro-root .plc-mr-2{
1959
2265
  margin-right: 0.5rem;
1960
2266
  }
1961
2267
 
1962
- .pelcro-root .plc-mr-6 {
2268
+ .pelcro-root .plc-mr-4{
2269
+ margin-right: 1rem;
2270
+ }
2271
+
2272
+ .pelcro-root .plc-mr-6{
1963
2273
  margin-right: 1.5rem;
1964
2274
  }
1965
2275
 
1966
- .pelcro-root .plc-mb-1 {
2276
+ .pelcro-root .plc-mr-auto{
2277
+ margin-right: auto;
2278
+ }
2279
+
2280
+ .pelcro-root .plc-mb-1{
1967
2281
  margin-bottom: 0.25rem;
1968
2282
  }
1969
2283
 
1970
- .pelcro-root .plc-mb-2 {
2284
+ .pelcro-root .plc-mb-2{
1971
2285
  margin-bottom: 0.5rem;
1972
2286
  }
1973
2287
 
1974
- .pelcro-root .plc-mb-3 {
2288
+ .pelcro-root .plc-mb-3{
1975
2289
  margin-bottom: 0.75rem;
1976
2290
  }
1977
2291
 
1978
- .pelcro-root .plc-mb-4 {
2292
+ .pelcro-root .plc-mb-4{
1979
2293
  margin-bottom: 1rem;
1980
2294
  }
1981
2295
 
1982
- .pelcro-root .plc-mb-6 {
2296
+ .pelcro-root .plc-mb-6{
1983
2297
  margin-bottom: 1.5rem;
1984
2298
  }
1985
2299
 
1986
- .pelcro-root .plc-mb-8 {
2300
+ .pelcro-root .plc-mb-8{
1987
2301
  margin-bottom: 2rem;
1988
2302
  }
1989
2303
 
1990
- .pelcro-root .plc-mb-9 {
2304
+ .pelcro-root .plc-mb-9{
1991
2305
  margin-bottom: 2.25rem;
1992
2306
  }
1993
2307
 
1994
- .pelcro-root .plc-ml-0 {
2308
+ .pelcro-root .plc-mb-10{
2309
+ margin-bottom: 2.5rem;
2310
+ }
2311
+
2312
+ .pelcro-root .plc-ml-0{
1995
2313
  margin-left: 0px;
1996
2314
  }
1997
2315
 
1998
- .pelcro-root .plc-ml-1 {
2316
+ .pelcro-root .plc-ml-1{
1999
2317
  margin-left: 0.25rem;
2000
2318
  }
2001
2319
 
2002
- .pelcro-root .plc-ml-2 {
2320
+ .pelcro-root .plc-ml-2{
2003
2321
  margin-left: 0.5rem;
2004
2322
  }
2005
2323
 
2006
- .pelcro-root .plc-ml-3 {
2324
+ .pelcro-root .plc-ml-3{
2007
2325
  margin-left: 0.75rem;
2008
2326
  }
2009
2327
 
2010
- .pelcro-root .plc-ml-4 {
2328
+ .pelcro-root .plc-ml-4{
2011
2329
  margin-left: 1rem;
2012
2330
  }
2013
2331
 
2014
- .pelcro-root .plc--ml-2 {
2332
+ .pelcro-root .plc-ml-11{
2333
+ margin-left: 2.75rem;
2334
+ }
2335
+
2336
+ .pelcro-root .plc--ml-2{
2015
2337
  margin-left: -0.5rem;
2016
2338
  }
2017
2339
 
2018
- .pelcro-root .last\:plc-mb-0:last-child {
2340
+ .pelcro-root .last\:plc-mb-0:last-child{
2019
2341
  margin-bottom: 0px;
2020
2342
  }
2021
2343
 
2022
- .pelcro-root .plc-block {
2344
+ .pelcro-root .plc-block{
2023
2345
  display: block;
2024
2346
  }
2025
2347
 
2026
- .pelcro-root .plc-inline-block {
2348
+ .pelcro-root .plc-inline-block{
2027
2349
  display: inline-block;
2028
2350
  }
2029
2351
 
2030
- .pelcro-root .plc-flex {
2352
+ .pelcro-root .plc-inline{
2353
+ display: inline;
2354
+ }
2355
+
2356
+ .pelcro-root .plc-flex{
2031
2357
  display: flex;
2032
2358
  }
2033
2359
 
2034
- .pelcro-root .plc-inline-flex {
2360
+ .pelcro-root .plc-inline-flex{
2035
2361
  display: inline-flex;
2036
2362
  }
2037
2363
 
2038
- .pelcro-root .plc-grid {
2364
+ .pelcro-root .plc-flow-root{
2365
+ display: flow-root;
2366
+ }
2367
+
2368
+ .pelcro-root .plc-grid{
2039
2369
  display: grid;
2040
2370
  }
2041
2371
 
2042
- .pelcro-root .plc-hidden {
2372
+ .pelcro-root .plc-hidden{
2043
2373
  display: none;
2044
2374
  }
2045
2375
 
2046
- .pelcro-root .plc-h-4 {
2376
+ .pelcro-root .plc-h-3{
2377
+ height: 0.75rem;
2378
+ }
2379
+
2380
+ .pelcro-root .plc-h-4{
2047
2381
  height: 1rem;
2048
2382
  }
2049
2383
 
2050
- .pelcro-root .plc-h-5 {
2384
+ .pelcro-root .plc-h-5{
2051
2385
  height: 1.25rem;
2052
2386
  }
2053
2387
 
2054
- .pelcro-root .plc-h-6 {
2388
+ .pelcro-root .plc-h-6{
2055
2389
  height: 1.5rem;
2056
2390
  }
2057
2391
 
2058
- .pelcro-root .plc-h-7 {
2392
+ .pelcro-root .plc-h-7{
2059
2393
  height: 1.75rem;
2060
2394
  }
2061
2395
 
2062
- .pelcro-root .plc-h-8 {
2396
+ .pelcro-root .plc-h-8{
2063
2397
  height: 2rem;
2064
2398
  }
2065
2399
 
2066
- .pelcro-root .plc-h-9 {
2400
+ .pelcro-root .plc-h-9{
2067
2401
  height: 2.25rem;
2068
2402
  }
2069
2403
 
2070
- .pelcro-root .plc-h-10 {
2404
+ .pelcro-root .plc-h-10{
2071
2405
  height: 2.5rem;
2072
2406
  }
2073
2407
 
2074
- .pelcro-root .plc-h-12 {
2408
+ .pelcro-root .plc-h-11{
2409
+ height: 2.75rem;
2410
+ }
2411
+
2412
+ .pelcro-root .plc-h-12{
2075
2413
  height: 3rem;
2076
2414
  }
2077
2415
 
2078
- .pelcro-root .plc-h-20 {
2416
+ .pelcro-root .plc-h-16{
2417
+ height: 4rem;
2418
+ }
2419
+
2420
+ .pelcro-root .plc-h-20{
2079
2421
  height: 5rem;
2080
2422
  }
2081
2423
 
2082
- .pelcro-root .plc-h-28 {
2424
+ .pelcro-root .plc-h-24{
2425
+ height: 6rem;
2426
+ }
2427
+
2428
+ .pelcro-root .plc-h-28{
2083
2429
  height: 7rem;
2084
2430
  }
2085
2431
 
2086
- .pelcro-root .plc-h-32 {
2432
+ .pelcro-root .plc-h-32{
2087
2433
  height: 8rem;
2088
2434
  }
2089
2435
 
2090
- .pelcro-root .plc-h-36 {
2436
+ .pelcro-root .plc-h-36{
2091
2437
  height: 9rem;
2092
2438
  }
2093
2439
 
2094
- .pelcro-root .plc-h-52 {
2440
+ .pelcro-root .plc-h-52{
2095
2441
  height: 13rem;
2096
2442
  }
2097
2443
 
2098
- .pelcro-root .plc-h-auto {
2444
+ .pelcro-root .plc-h-auto{
2099
2445
  height: auto;
2100
2446
  }
2101
2447
 
2102
- .pelcro-root .plc-h-full {
2448
+ .pelcro-root .plc-h-full{
2103
2449
  height: 100%;
2104
2450
  }
2105
2451
 
2106
- .pelcro-root .plc-max-h-0 {
2452
+ .pelcro-root .plc-max-h-0{
2107
2453
  max-height: 0px;
2108
2454
  }
2109
2455
 
2110
- .pelcro-root .plc-max-h-14 {
2456
+ .pelcro-root .plc-max-h-14{
2111
2457
  max-height: 3.5rem;
2112
2458
  }
2113
2459
 
2114
- .pelcro-root .plc-max-h-80 {
2460
+ .pelcro-root .plc-max-h-48{
2461
+ max-height: 12rem;
2462
+ }
2463
+
2464
+ .pelcro-root .plc-max-h-80{
2115
2465
  max-height: 20rem;
2116
2466
  }
2117
2467
 
2118
- .pelcro-root .plc-max-h-full {
2468
+ .pelcro-root .plc-max-h-checkout{
2469
+ max-height: 35rem;
2470
+ }
2471
+
2472
+ .pelcro-root .plc-max-h-full{
2119
2473
  max-height: 100%;
2120
2474
  }
2121
2475
 
2122
- .pelcro-root .plc-min-h-12 {
2476
+ .pelcro-root .plc-min-h-0{
2477
+ min-height: 0px;
2478
+ }
2479
+
2480
+ .pelcro-root .plc-min-h-12{
2123
2481
  min-height: 3rem;
2124
2482
  }
2125
2483
 
2126
- .pelcro-root .plc-w-3 {
2484
+ .pelcro-root .plc-min-h-14{
2485
+ min-height: 5rem;
2486
+ }
2487
+
2488
+ .pelcro-root .plc-min-h-16{
2489
+ min-height: 6rem;
2490
+ }
2491
+
2492
+ .pelcro-root .plc-min-h-card{
2493
+ min-height: 24.75rem;
2494
+ }
2495
+
2496
+ .pelcro-root .plc-w-3{
2127
2497
  width: 0.75rem;
2128
2498
  }
2129
2499
 
2130
- .pelcro-root .plc-w-4 {
2500
+ .pelcro-root .plc-w-4{
2131
2501
  width: 1rem;
2132
2502
  }
2133
2503
 
2134
- .pelcro-root .plc-w-5 {
2504
+ .pelcro-root .plc-w-5{
2135
2505
  width: 1.25rem;
2136
2506
  }
2137
2507
 
2138
- .pelcro-root .plc-w-6 {
2508
+ .pelcro-root .plc-w-6{
2139
2509
  width: 1.5rem;
2140
2510
  }
2141
2511
 
2142
- .pelcro-root .plc-w-7 {
2512
+ .pelcro-root .plc-w-7{
2143
2513
  width: 1.75rem;
2144
2514
  }
2145
2515
 
2146
- .pelcro-root .plc-w-8 {
2516
+ .pelcro-root .plc-w-8{
2147
2517
  width: 2rem;
2148
2518
  }
2149
2519
 
2150
- .pelcro-root .plc-w-9 {
2520
+ .pelcro-root .plc-w-9{
2151
2521
  width: 2.25rem;
2152
2522
  }
2153
2523
 
2154
- .pelcro-root .plc-w-10 {
2524
+ .pelcro-root .plc-w-10{
2155
2525
  width: 2.5rem;
2156
2526
  }
2157
2527
 
2158
- .pelcro-root .plc-w-12 {
2528
+ .pelcro-root .plc-w-11{
2529
+ width: 2.75rem;
2530
+ }
2531
+
2532
+ .pelcro-root .plc-w-12{
2159
2533
  width: 3rem;
2160
2534
  }
2161
2535
 
2162
- .pelcro-root .plc-w-16 {
2536
+ .pelcro-root .plc-w-16{
2163
2537
  width: 4rem;
2164
2538
  }
2165
2539
 
2166
- .pelcro-root .plc-w-20 {
2540
+ .pelcro-root .plc-w-20{
2167
2541
  width: 5rem;
2168
2542
  }
2169
2543
 
2170
- .pelcro-root .plc-w-24 {
2544
+ .pelcro-root .plc-w-24{
2171
2545
  width: 6rem;
2172
2546
  }
2173
2547
 
2174
- .pelcro-root .plc-w-32 {
2548
+ .pelcro-root .plc-w-32{
2175
2549
  width: 8rem;
2176
2550
  }
2177
2551
 
2178
- .pelcro-root .plc-w-36 {
2552
+ .pelcro-root .plc-w-36{
2179
2553
  width: 9rem;
2180
2554
  }
2181
2555
 
2182
- .pelcro-root .plc-w-56 {
2556
+ .pelcro-root .plc-w-56{
2183
2557
  width: 14rem;
2184
2558
  }
2185
2559
 
2186
- .pelcro-root .plc-w-auto {
2560
+ .pelcro-root .plc-w-84{
2561
+ width: 22.875rem;
2562
+ }
2563
+
2564
+ .pelcro-root .plc-w-auto{
2187
2565
  width: auto;
2188
2566
  }
2189
2567
 
2190
- .pelcro-root .plc-w-1\/2 {
2568
+ .pelcro-root .plc-w-1\/2{
2191
2569
  width: 50%;
2192
2570
  }
2193
2571
 
2194
- .pelcro-root .plc-w-1\/4 {
2572
+ .pelcro-root .plc-w-1\/3{
2573
+ width: 33.333333%;
2574
+ }
2575
+
2576
+ .pelcro-root .plc-w-1\/4{
2195
2577
  width: 25%;
2196
2578
  }
2197
2579
 
2198
- .pelcro-root .plc-w-1\/5 {
2580
+ .pelcro-root .plc-w-3\/4{
2581
+ width: 75%;
2582
+ }
2583
+
2584
+ .pelcro-root .plc-w-1\/5{
2199
2585
  width: 20%;
2200
2586
  }
2201
2587
 
2202
- .pelcro-root .plc-w-2\/5 {
2588
+ .pelcro-root .plc-w-2\/5{
2203
2589
  width: 40%;
2204
2590
  }
2205
2591
 
2206
- .pelcro-root .plc-w-2\/12 {
2592
+ .pelcro-root .plc-w-2\/12{
2207
2593
  width: 16.666667%;
2208
2594
  }
2209
2595
 
2210
- .pelcro-root .plc-w-3\/12 {
2596
+ .pelcro-root .plc-w-3\/12{
2211
2597
  width: 25%;
2212
2598
  }
2213
2599
 
2214
- .pelcro-root .plc-w-4\/12 {
2600
+ .pelcro-root .plc-w-4\/12{
2215
2601
  width: 33.333333%;
2216
2602
  }
2217
2603
 
2218
- .pelcro-root .plc-w-5\/12 {
2604
+ .pelcro-root .plc-w-5\/12{
2219
2605
  width: 41.666667%;
2220
2606
  }
2221
2607
 
2222
- .pelcro-root .plc-w-6\/12 {
2608
+ .pelcro-root .plc-w-6\/12{
2223
2609
  width: 50%;
2224
2610
  }
2225
2611
 
2226
- .pelcro-root .plc-w-10\/12 {
2227
- width: 83.333333%;
2228
- }
2229
-
2230
- .pelcro-root .plc-w-full {
2612
+ .pelcro-root .plc-w-full{
2231
2613
  width: 100%;
2232
2614
  }
2233
2615
 
2234
- .pelcro-root .plc-w-max {
2616
+ .pelcro-root .plc-w-max{
2235
2617
  width: max-content;
2236
2618
  }
2237
2619
 
2238
- .pelcro-root .plc-max-w-50\% {
2239
- max-width: 50%;
2620
+ .pelcro-root .plc-max-w-xl{
2621
+ max-width: 36rem;
2622
+ }
2623
+
2624
+ .pelcro-root .plc-max-w-3xl{
2625
+ max-width: 48rem;
2240
2626
  }
2241
2627
 
2242
- .pelcro-root .plc-max-w-80\% {
2243
- max-width: 80%;
2628
+ .pelcro-root .plc-max-w-7xl{
2629
+ max-width: 80rem;
2244
2630
  }
2245
2631
 
2246
- .pelcro-root .plc-max-w-90\% {
2247
- max-width: 90%;
2632
+ .pelcro-root .plc-max-w-50\%{
2633
+ max-width: 50%;
2248
2634
  }
2249
2635
 
2250
- .pelcro-root .plc-flex-1 {
2636
+ .pelcro-root .plc-max-w-full{
2637
+ max-width: 100%;
2638
+ }
2639
+
2640
+ .pelcro-root .plc-flex-1{
2251
2641
  flex: 1 1 0%;
2252
2642
  }
2253
2643
 
2254
- .pelcro-root .plc-flex-shrink-0 {
2644
+ .pelcro-root .plc-flex-auto{
2645
+ flex: 1 1 auto;
2646
+ }
2647
+
2648
+ .pelcro-root .plc-flex-none{
2649
+ flex: none;
2650
+ }
2651
+
2652
+ .pelcro-root .plc-flex-shrink-0{
2255
2653
  flex-shrink: 0;
2256
2654
  }
2257
2655
 
2258
- .pelcro-root .plc-flex-grow {
2656
+ .pelcro-root .plc-flex-grow{
2259
2657
  flex-grow: 1;
2260
2658
  }
2261
2659
 
2262
- .pelcro-root .plc-table-fixed {
2660
+ .pelcro-root .plc-table-fixed{
2263
2661
  table-layout: fixed;
2264
2662
  }
2265
2663
 
2266
- .pelcro-root .plc-origin-right {
2664
+ .pelcro-root .plc-origin-right{
2267
2665
  transform-origin: right;
2268
2666
  }
2269
2667
 
2270
- .pelcro-root .plc-transform {
2668
+ .pelcro-root .plc-transform{
2271
2669
  --tw-translate-x: 0;
2272
2670
  --tw-translate-y: 0;
2273
2671
  --tw-rotate: 0;
@@ -2278,945 +2676,1106 @@ in order to scope selectors under pelcro-root
2278
2676
  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));
2279
2677
  }
2280
2678
 
2281
- .pelcro-root .plc-translate-x-0 {
2679
+ .pelcro-root .plc-translate-x-0{
2282
2680
  --tw-translate-x: 0px;
2283
2681
  }
2284
2682
 
2285
- .pelcro-root .plc--translate-x-full {
2683
+ .pelcro-root .plc--translate-x-1{
2684
+ --tw-translate-x: -0.25rem;
2685
+ }
2686
+
2687
+ .pelcro-root .plc-translate-x-full{
2688
+ --tw-translate-x: 100%;
2689
+ }
2690
+
2691
+ .pelcro-root .plc--translate-x-full{
2286
2692
  --tw-translate-x: -100%;
2287
2693
  }
2288
2694
 
2289
- .pelcro-root .plc--translate-y-1\/2 {
2695
+ .pelcro-root .plc--translate-y-1\/2{
2290
2696
  --tw-translate-y: -50%;
2291
2697
  }
2292
2698
 
2293
- .pelcro-root .plc-group:hover .group-hover\:plc-translate-x-1 {
2699
+ .pelcro-root .plc-group:hover .group-hover\:plc-translate-x-1{
2294
2700
  --tw-translate-x: 0.25rem;
2295
2701
  }
2296
2702
 
2297
- .pelcro-root .plc-rotate-90 {
2703
+ .pelcro-root .plc-rotate-90{
2298
2704
  --tw-rotate: 90deg;
2299
2705
  }
2300
2706
 
2301
- .pelcro-root .plc-rotate-180 {
2707
+ .pelcro-root .plc-rotate-180{
2302
2708
  --tw-rotate: 180deg;
2303
2709
  }
2304
2710
 
2305
- .pelcro-root .plc-scale-120 {
2711
+ .pelcro-root .plc-scale-105{
2712
+ --tw-scale-x: 1.05;
2713
+ --tw-scale-y: 1.05;
2714
+ }
2715
+
2716
+ .pelcro-root .plc-scale-120{
2306
2717
  --tw-scale-x: 1.2;
2307
2718
  --tw-scale-y: 1.2;
2308
2719
  }
2309
2720
 
2310
- .pelcro-root .plc-scale-x-0 {
2721
+ .pelcro-root .plc-scale-x-0{
2311
2722
  --tw-scale-x: 0;
2312
2723
  }
2313
2724
 
2314
- .pelcro-root .plc-scale-x-100 {
2725
+ .pelcro-root .plc-scale-x-100{
2315
2726
  --tw-scale-x: 1;
2316
2727
  }
2317
2728
 
2318
- @keyframes plc-spin {
2319
- to {
2729
+ @keyframes plc-spin{
2730
+ to{
2320
2731
  transform: rotate(360deg);
2321
2732
  }
2322
2733
  }
2323
2734
 
2324
- @keyframes plc-ping {
2325
- 75%, 100% {
2735
+ @keyframes plc-ping{
2736
+ 75%, 100%{
2326
2737
  transform: scale(2);
2327
2738
  opacity: 0;
2328
2739
  }
2329
2740
  }
2330
2741
 
2331
- @keyframes plc-pulse {
2332
- 50% {
2742
+ @keyframes plc-pulse{
2743
+ 50%{
2333
2744
  opacity: .5;
2334
2745
  }
2335
2746
  }
2336
2747
 
2337
- @keyframes plc-bounce {
2338
- 0%, 100% {
2748
+ @keyframes plc-bounce{
2749
+ 0%, 100%{
2339
2750
  transform: translateY(-25%);
2340
2751
  animation-timing-function: cubic-bezier(0.8,0,1,1);
2341
2752
  }
2342
2753
 
2343
- 50% {
2754
+ 50%{
2344
2755
  transform: none;
2345
2756
  animation-timing-function: cubic-bezier(0,0,0.2,1);
2346
2757
  }
2347
2758
  }
2348
2759
 
2349
- @keyframes plc-slideInBottom {
2350
- 0% {
2760
+ @keyframes plc-slideInBottom{
2761
+ 0%{
2351
2762
  transform: translateY(1000px);
2352
2763
  opacity: 0;
2353
2764
  }
2354
2765
 
2355
- 100% {
2766
+ 100%{
2356
2767
  transform: translateY(0);
2357
2768
  opacity: 1;
2358
2769
  }
2359
2770
  }
2360
2771
 
2361
- .pelcro-root .plc-animate-spin {
2772
+ .pelcro-root .plc-animate-spin{
2362
2773
  animation: plc-spin 1s linear infinite;
2363
2774
  }
2364
2775
 
2365
- @media (prefers-reduced-motion: no-preference) {
2366
- .pelcro-root .motion-safe\:plc-animate-slideInBottom {
2776
+ .pelcro-root .plc-animate-pulse{
2777
+ animation: plc-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
2778
+ }
2779
+
2780
+ @media (prefers-reduced-motion: no-preference){
2781
+ .pelcro-root .motion-safe\:plc-animate-slideInBottom{
2367
2782
  animation: plc-slideInBottom 0.5s ease-out;
2368
2783
  }
2369
2784
  }
2370
2785
 
2371
- .pelcro-root .plc-cursor-default {
2786
+ .pelcro-root .plc-cursor-default{
2372
2787
  cursor: default;
2373
2788
  }
2374
2789
 
2375
- .pelcro-root .plc-cursor-pointer {
2790
+ .pelcro-root .plc-cursor-pointer{
2376
2791
  cursor: pointer;
2377
2792
  }
2378
2793
 
2379
- .pelcro-root .plc-select-none {
2794
+ .pelcro-root .plc-select-none{
2380
2795
  -webkit-user-select: none;
2381
2796
  user-select: none;
2382
2797
  }
2383
2798
 
2384
- .pelcro-root .plc-appearance-none {
2385
- -webkit-appearance: none;
2386
- appearance: none;
2799
+ .pelcro-root .plc-grid-cols-1{
2800
+ grid-template-columns: repeat(1, minmax(0, 1fr));
2387
2801
  }
2388
2802
 
2389
- .pelcro-root .plc-flex-row-reverse {
2803
+ .pelcro-root .plc-grid-cols-2{
2804
+ grid-template-columns: repeat(2, minmax(0, 1fr));
2805
+ }
2806
+
2807
+ .pelcro-root .plc-flex-row{
2808
+ flex-direction: row;
2809
+ }
2810
+
2811
+ .pelcro-root .plc-flex-row-reverse{
2390
2812
  flex-direction: row-reverse;
2391
2813
  }
2392
2814
 
2393
- .pelcro-root .plc-flex-col {
2815
+ .pelcro-root .plc-flex-col{
2394
2816
  flex-direction: column;
2395
2817
  }
2396
2818
 
2397
- .pelcro-root .plc-flex-wrap {
2819
+ .pelcro-root .plc-flex-wrap{
2398
2820
  flex-wrap: wrap;
2399
2821
  }
2400
2822
 
2401
- .pelcro-root .plc-place-items-center {
2823
+ .pelcro-root .plc-place-items-center{
2402
2824
  place-items: center;
2403
2825
  }
2404
2826
 
2405
- .pelcro-root .plc-items-start {
2827
+ .pelcro-root .plc-items-start{
2406
2828
  align-items: flex-start;
2407
2829
  }
2408
2830
 
2409
- .pelcro-root .plc-items-end {
2831
+ .pelcro-root .plc-items-end{
2410
2832
  align-items: flex-end;
2411
2833
  }
2412
2834
 
2413
- .pelcro-root .plc-items-center {
2835
+ .pelcro-root .plc-items-center{
2414
2836
  align-items: center;
2415
2837
  }
2416
2838
 
2417
- .pelcro-root .plc-items-stretch {
2839
+ .pelcro-root .plc-items-stretch{
2418
2840
  align-items: stretch;
2419
2841
  }
2420
2842
 
2421
- .pelcro-root .plc-justify-end {
2843
+ .pelcro-root .plc-justify-end{
2422
2844
  justify-content: flex-end;
2423
2845
  }
2424
2846
 
2425
- .pelcro-root .plc-justify-center {
2847
+ .pelcro-root .plc-justify-center{
2426
2848
  justify-content: center;
2427
2849
  }
2428
2850
 
2429
- .pelcro-root .plc-justify-between {
2851
+ .pelcro-root .plc-justify-between{
2430
2852
  justify-content: space-between;
2431
2853
  }
2432
2854
 
2433
- .pelcro-root .plc-justify-evenly {
2855
+ .pelcro-root .plc-justify-evenly{
2434
2856
  justify-content: space-evenly;
2435
2857
  }
2436
2858
 
2437
- .pelcro-root .plc-justify-items-center {
2859
+ .pelcro-root .plc-justify-items-center{
2438
2860
  justify-items: center;
2439
2861
  }
2440
2862
 
2441
- .pelcro-root .plc-gap-x-3 {
2863
+ .pelcro-root .plc-gap-4{
2864
+ gap: 1rem;
2865
+ }
2866
+
2867
+ .pelcro-root .plc-gap-20{
2868
+ gap: 5rem;
2869
+ }
2870
+
2871
+ .pelcro-root .plc-gap-x-3{
2442
2872
  column-gap: 0.75rem;
2443
2873
  }
2444
2874
 
2445
- .pelcro-root .plc-gap-y-2 {
2875
+ .pelcro-root .plc-gap-y-2{
2446
2876
  row-gap: 0.5rem;
2447
2877
  }
2448
2878
 
2449
- .pelcro-root .plc-gap-y-5 {
2879
+ .pelcro-root .plc-gap-y-5{
2450
2880
  row-gap: 1.25rem;
2451
2881
  }
2452
2882
 
2453
- .pelcro-root .plc-space-x-2 > :not([hidden]) ~ :not([hidden]) {
2883
+ .pelcro-root .plc-space-x-0 > :not([hidden]) ~ :not([hidden]){
2884
+ --tw-space-x-reverse: 0;
2885
+ margin-right: calc(0px * var(--tw-space-x-reverse));
2886
+ margin-left: calc(0px * calc(1 - var(--tw-space-x-reverse)));
2887
+ }
2888
+
2889
+ .pelcro-root .plc-space-x-2 > :not([hidden]) ~ :not([hidden]){
2454
2890
  --tw-space-x-reverse: 0;
2455
2891
  margin-right: calc(0.5rem * var(--tw-space-x-reverse));
2456
2892
  margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse)));
2457
2893
  }
2458
2894
 
2459
- .pelcro-root .plc-space-x-3 > :not([hidden]) ~ :not([hidden]) {
2895
+ .pelcro-root .plc-space-x-3 > :not([hidden]) ~ :not([hidden]){
2460
2896
  --tw-space-x-reverse: 0;
2461
2897
  margin-right: calc(0.75rem * var(--tw-space-x-reverse));
2462
2898
  margin-left: calc(0.75rem * calc(1 - var(--tw-space-x-reverse)));
2463
2899
  }
2464
2900
 
2465
- .pelcro-root .plc-space-y-2 > :not([hidden]) ~ :not([hidden]) {
2901
+ .pelcro-root .plc-space-x-4 > :not([hidden]) ~ :not([hidden]){
2902
+ --tw-space-x-reverse: 0;
2903
+ margin-right: calc(1rem * var(--tw-space-x-reverse));
2904
+ margin-left: calc(1rem * calc(1 - var(--tw-space-x-reverse)));
2905
+ }
2906
+
2907
+ .pelcro-root .plc-space-x-6 > :not([hidden]) ~ :not([hidden]){
2908
+ --tw-space-x-reverse: 0;
2909
+ margin-right: calc(1.5rem * var(--tw-space-x-reverse));
2910
+ margin-left: calc(1.5rem * calc(1 - var(--tw-space-x-reverse)));
2911
+ }
2912
+
2913
+ .pelcro-root .plc-space-y-1 > :not([hidden]) ~ :not([hidden]){
2914
+ --tw-space-y-reverse: 0;
2915
+ margin-top: calc(0.25rem * calc(1 - var(--tw-space-y-reverse)));
2916
+ margin-bottom: calc(0.25rem * var(--tw-space-y-reverse));
2917
+ }
2918
+
2919
+ .pelcro-root .plc-space-y-2 > :not([hidden]) ~ :not([hidden]){
2466
2920
  --tw-space-y-reverse: 0;
2467
2921
  margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));
2468
2922
  margin-bottom: calc(0.5rem * var(--tw-space-y-reverse));
2469
2923
  }
2470
2924
 
2471
- .pelcro-root .plc-space-y-4 > :not([hidden]) ~ :not([hidden]) {
2925
+ .pelcro-root .plc-space-y-3 > :not([hidden]) ~ :not([hidden]){
2926
+ --tw-space-y-reverse: 0;
2927
+ margin-top: calc(0.75rem * calc(1 - var(--tw-space-y-reverse)));
2928
+ margin-bottom: calc(0.75rem * var(--tw-space-y-reverse));
2929
+ }
2930
+
2931
+ .pelcro-root .plc-space-y-4 > :not([hidden]) ~ :not([hidden]){
2472
2932
  --tw-space-y-reverse: 0;
2473
2933
  margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));
2474
2934
  margin-bottom: calc(1rem * var(--tw-space-y-reverse));
2475
2935
  }
2476
2936
 
2477
- .pelcro-root .plc-overflow-auto {
2937
+ .pelcro-root .plc-space-y-6 > :not([hidden]) ~ :not([hidden]){
2938
+ --tw-space-y-reverse: 0;
2939
+ margin-top: calc(1.5rem * calc(1 - var(--tw-space-y-reverse)));
2940
+ margin-bottom: calc(1.5rem * var(--tw-space-y-reverse));
2941
+ }
2942
+
2943
+ .pelcro-root .plc-divide-y > :not([hidden]) ~ :not([hidden]){
2944
+ --tw-divide-y-reverse: 0;
2945
+ border-top-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
2946
+ border-bottom-width: calc(1px * var(--tw-divide-y-reverse));
2947
+ }
2948
+
2949
+ .pelcro-root .plc-divide-gray-200 > :not([hidden]) ~ :not([hidden]){
2950
+ --tw-divide-opacity: 1;
2951
+ border-color: rgba(229, 231, 235, var(--tw-divide-opacity));
2952
+ }
2953
+
2954
+ .pelcro-root .plc-overflow-auto{
2478
2955
  overflow: auto;
2479
2956
  }
2480
2957
 
2481
- .pelcro-root .plc-overflow-hidden {
2958
+ .pelcro-root .plc-overflow-hidden{
2482
2959
  overflow: hidden;
2483
2960
  }
2484
2961
 
2485
- .pelcro-root .plc-overflow-x-auto {
2486
- overflow-x: auto;
2962
+ .pelcro-root .plc-overflow-y-auto{
2963
+ overflow-y: auto;
2487
2964
  }
2488
2965
 
2489
- .pelcro-root .plc-overflow-y-auto {
2490
- overflow-y: auto;
2966
+ .pelcro-root .plc-overflow-x-hidden{
2967
+ overflow-x: hidden;
2491
2968
  }
2492
2969
 
2493
- .pelcro-root .plc-overflow-y-scroll {
2970
+ .pelcro-root .plc-overflow-y-scroll{
2494
2971
  overflow-y: scroll;
2495
2972
  }
2496
2973
 
2497
- .pelcro-root .plc-truncate {
2974
+ .pelcro-root .plc-truncate{
2498
2975
  overflow: hidden;
2499
2976
  text-overflow: ellipsis;
2500
2977
  white-space: nowrap;
2501
2978
  }
2502
2979
 
2503
- .pelcro-root .plc-whitespace-nowrap {
2504
- white-space: nowrap;
2980
+ .pelcro-root .plc-whitespace-normal{
2981
+ white-space: normal;
2505
2982
  }
2506
2983
 
2507
- .pelcro-root .plc-whitespace-pre-line {
2984
+ .pelcro-root .plc-whitespace-pre-line{
2508
2985
  white-space: pre-line;
2509
2986
  }
2510
2987
 
2511
- .pelcro-root .plc-break-words {
2988
+ .pelcro-root .plc-break-words{
2512
2989
  overflow-wrap: break-word;
2513
2990
  }
2514
2991
 
2515
- .pelcro-root .plc-rounded-none {
2992
+ .pelcro-root .plc-break-all{
2993
+ word-break: break-all;
2994
+ }
2995
+
2996
+ .pelcro-root .plc-rounded-none{
2516
2997
  border-radius: 0px;
2517
2998
  }
2518
2999
 
2519
- .pelcro-root .plc-rounded-sm {
3000
+ .pelcro-root .plc-rounded-sm{
2520
3001
  border-radius: 0.125rem;
2521
3002
  }
2522
3003
 
2523
- .pelcro-root .plc-rounded {
3004
+ .pelcro-root .plc-rounded{
2524
3005
  border-radius: 0.25rem;
2525
3006
  }
2526
3007
 
2527
- .pelcro-root .plc-rounded-md {
3008
+ .pelcro-root .plc-rounded-md{
2528
3009
  border-radius: 0.375rem;
2529
3010
  }
2530
3011
 
2531
- .pelcro-root .plc-rounded-lg {
3012
+ .pelcro-root .plc-rounded-lg{
2532
3013
  border-radius: 0.5rem;
2533
3014
  }
2534
3015
 
2535
- .pelcro-root .plc-rounded-2xl {
3016
+ .pelcro-root .plc-rounded-2xl{
2536
3017
  border-radius: 1rem;
2537
3018
  }
2538
3019
 
2539
- .pelcro-root .plc-rounded-full {
3020
+ .pelcro-root .plc-rounded-full{
2540
3021
  border-radius: 9999px;
2541
3022
  }
2542
3023
 
2543
- .pelcro-root .plc-border-0 {
3024
+ .pelcro-root .plc-rounded-t-lg{
3025
+ border-top-left-radius: 0.5rem;
3026
+ border-top-right-radius: 0.5rem;
3027
+ }
3028
+
3029
+ .pelcro-root .plc-rounded-b-sm{
3030
+ border-bottom-right-radius: 0.125rem;
3031
+ border-bottom-left-radius: 0.125rem;
3032
+ }
3033
+
3034
+ .pelcro-root .plc-border-0{
2544
3035
  border-width: 0px;
2545
3036
  }
2546
3037
 
2547
- .pelcro-root .plc-border-2 {
3038
+ .pelcro-root .plc-border-2{
2548
3039
  border-width: 2px;
2549
3040
  }
2550
3041
 
2551
- .pelcro-root .plc-border {
3042
+ .pelcro-root .plc-border{
2552
3043
  border-width: 1px;
2553
3044
  }
2554
3045
 
2555
- .pelcro-root .last\:plc-border-0:last-child {
3046
+ .pelcro-root .last\:plc-border-0:last-child{
2556
3047
  border-width: 0px;
2557
3048
  }
2558
3049
 
2559
- .pelcro-root .plc-border-t-2 {
3050
+ .pelcro-root .plc-border-t-2{
2560
3051
  border-top-width: 2px;
2561
3052
  }
2562
3053
 
2563
- .pelcro-root .plc-border-t-4 {
3054
+ .pelcro-root .plc-border-t-4{
2564
3055
  border-top-width: 4px;
2565
3056
  }
2566
3057
 
2567
- .pelcro-root .plc-border-t-8 {
3058
+ .pelcro-root .plc-border-t-8{
2568
3059
  border-top-width: 8px;
2569
3060
  }
2570
3061
 
2571
- .pelcro-root .plc-border-t {
3062
+ .pelcro-root .plc-border-t{
2572
3063
  border-top-width: 1px;
2573
3064
  }
2574
3065
 
2575
- .pelcro-root .plc-border-b-2 {
3066
+ .pelcro-root .plc-border-b-2{
2576
3067
  border-bottom-width: 2px;
2577
3068
  }
2578
3069
 
2579
- .pelcro-root .plc-border-b {
3070
+ .pelcro-root .plc-border-b-4{
3071
+ border-bottom-width: 4px;
3072
+ }
3073
+
3074
+ .pelcro-root .plc-border-b{
2580
3075
  border-bottom-width: 1px;
2581
3076
  }
2582
3077
 
2583
- .pelcro-root .plc-border-l-2 {
3078
+ .pelcro-root .plc-border-l-2{
2584
3079
  border-left-width: 2px;
2585
3080
  }
2586
3081
 
2587
- .pelcro-root .plc-border-l-4 {
3082
+ .pelcro-root .plc-border-l-4{
2588
3083
  border-left-width: 4px;
2589
3084
  }
2590
3085
 
2591
- .pelcro-root .plc-border-solid {
3086
+ .pelcro-root .plc-border-solid{
2592
3087
  border-style: solid;
2593
3088
  }
2594
3089
 
2595
- .pelcro-root .plc-border-transparent {
3090
+ .pelcro-root .plc-border-transparent{
2596
3091
  border-color: transparent;
2597
3092
  }
2598
3093
 
2599
- .pelcro-root .plc-border-primary-300 {
3094
+ .pelcro-root .plc-border-primary-300{
2600
3095
  border-color: hsl(var(--plc-primary-hue), var(--plc-primary-saturation), calc(var(--plc-primary-lightness) + 20%));
2601
3096
  }
2602
3097
 
2603
- .pelcro-root .plc-border-primary-400 {
3098
+ .pelcro-root .plc-border-primary-400{
2604
3099
  border-color: hsl(var(--plc-primary-hue), var(--plc-primary-saturation), calc(var(--plc-primary-lightness) + 10%));
2605
3100
  }
2606
3101
 
2607
- .pelcro-root .plc-border-primary-500 {
3102
+ .pelcro-root .plc-border-primary-500{
2608
3103
  border-color: hsl(var(--plc-primary-hue), var(--plc-primary-saturation), var(--plc-primary-lightness));
2609
3104
  }
2610
3105
 
2611
- .pelcro-root .plc-border-primary-800 {
2612
- border-color: hsl(var(--plc-primary-hue), var(--plc-primary-saturation), calc(var(--plc-primary-lightness) - 30%));
3106
+ .pelcro-root .plc-border-primary{
3107
+ border-color: hsl(var(--plc-primary-hue), var(--plc-primary-saturation), var(--plc-primary-lightness));
2613
3108
  }
2614
3109
 
2615
- .pelcro-root .plc-border-white {
3110
+ .pelcro-root .plc-border-white{
2616
3111
  --tw-border-opacity: 1;
2617
3112
  border-color: rgba(255, 255, 255, var(--tw-border-opacity));
2618
3113
  }
2619
3114
 
2620
- .pelcro-root .plc-border-gray-200 {
3115
+ .pelcro-root .plc-border-gray-200{
2621
3116
  --tw-border-opacity: 1;
2622
3117
  border-color: rgba(229, 231, 235, var(--tw-border-opacity));
2623
3118
  }
2624
3119
 
2625
- .pelcro-root .plc-border-gray-300 {
3120
+ .pelcro-root .plc-border-gray-300{
2626
3121
  --tw-border-opacity: 1;
2627
3122
  border-color: rgba(209, 213, 219, var(--tw-border-opacity));
2628
3123
  }
2629
3124
 
2630
- .pelcro-root .plc-border-gray-400 {
3125
+ .pelcro-root .plc-border-gray-400{
2631
3126
  --tw-border-opacity: 1;
2632
3127
  border-color: rgba(156, 163, 175, var(--tw-border-opacity));
2633
3128
  }
2634
3129
 
2635
- .pelcro-root .plc-border-green-400 {
3130
+ .pelcro-root .plc-border-green-400{
2636
3131
  --tw-border-opacity: 1;
2637
3132
  border-color: rgba(52, 211, 153, var(--tw-border-opacity));
2638
3133
  }
2639
3134
 
2640
- .pelcro-root .hover\:plc-border-primary-800:hover {
3135
+ .pelcro-root .hover\:plc-border-primary-600:hover{
3136
+ border-color: hsl(var(--plc-primary-hue), var(--plc-primary-saturation), calc(var(--plc-primary-lightness) - 10%));
3137
+ }
3138
+
3139
+ .pelcro-root .hover\:plc-border-primary-800:hover{
2641
3140
  border-color: hsl(var(--plc-primary-hue), var(--plc-primary-saturation), calc(var(--plc-primary-lightness) - 30%));
2642
3141
  }
2643
3142
 
2644
- .pelcro-root .plc-bg-transparent {
3143
+ .pelcro-root .hover\:plc-border-primary:hover{
3144
+ border-color: hsl(var(--plc-primary-hue), var(--plc-primary-saturation), var(--plc-primary-lightness));
3145
+ }
3146
+
3147
+ .pelcro-root .plc-bg-transparent{
2645
3148
  background-color: transparent;
2646
3149
  }
2647
3150
 
2648
- .pelcro-root .plc-bg-primary-200 {
3151
+ .pelcro-root .plc-bg-primary-200{
2649
3152
  background-color: hsl(var(--plc-primary-hue), var(--plc-primary-saturation), calc(var(--plc-primary-lightness) + 30%));
2650
3153
  }
2651
3154
 
2652
- .pelcro-root .plc-bg-primary-400 {
3155
+ .pelcro-root .plc-bg-primary-400{
2653
3156
  background-color: hsl(var(--plc-primary-hue), var(--plc-primary-saturation), calc(var(--plc-primary-lightness) + 10%));
2654
3157
  }
2655
3158
 
2656
- .pelcro-root .plc-bg-primary-700 {
2657
- background-color: hsl(var(--plc-primary-hue), var(--plc-primary-saturation), calc(var(--plc-primary-lightness) - 20%));
2658
- }
2659
-
2660
- .pelcro-root .plc-bg-primary-800 {
2661
- background-color: hsl(var(--plc-primary-hue), var(--plc-primary-saturation), calc(var(--plc-primary-lightness) - 30%));
3159
+ .pelcro-root .plc-bg-primary{
3160
+ background-color: hsl(var(--plc-primary-hue), var(--plc-primary-saturation), var(--plc-primary-lightness));
2662
3161
  }
2663
3162
 
2664
- .pelcro-root .plc-bg-white {
3163
+ .pelcro-root .plc-bg-white{
2665
3164
  --tw-bg-opacity: 1;
2666
3165
  background-color: rgba(255, 255, 255, var(--tw-bg-opacity));
2667
3166
  }
2668
3167
 
2669
- .pelcro-root .plc-bg-gray-50 {
2670
- --tw-bg-opacity: 1;
2671
- background-color: rgba(249, 250, 251, var(--tw-bg-opacity));
2672
- }
2673
-
2674
- .pelcro-root .plc-bg-gray-100 {
3168
+ .pelcro-root .plc-bg-gray-100{
2675
3169
  --tw-bg-opacity: 1;
2676
3170
  background-color: rgba(243, 244, 246, var(--tw-bg-opacity));
2677
3171
  }
2678
3172
 
2679
- .pelcro-root .plc-bg-gray-200 {
3173
+ .pelcro-root .plc-bg-gray-200{
2680
3174
  --tw-bg-opacity: 1;
2681
3175
  background-color: rgba(229, 231, 235, var(--tw-bg-opacity));
2682
3176
  }
2683
3177
 
2684
- .pelcro-root .plc-bg-gray-300 {
3178
+ .pelcro-root .plc-bg-gray-300{
2685
3179
  --tw-bg-opacity: 1;
2686
3180
  background-color: rgba(209, 213, 219, var(--tw-bg-opacity));
2687
3181
  }
2688
3182
 
2689
- .pelcro-root .plc-bg-gray-500 {
3183
+ .pelcro-root .plc-bg-gray-400{
3184
+ --tw-bg-opacity: 1;
3185
+ background-color: rgba(156, 163, 175, var(--tw-bg-opacity));
3186
+ }
3187
+
3188
+ .pelcro-root .plc-bg-gray-500{
2690
3189
  --tw-bg-opacity: 1;
2691
3190
  background-color: rgba(107, 114, 128, var(--tw-bg-opacity));
2692
3191
  }
2693
3192
 
2694
- .pelcro-root .plc-bg-gray-600 {
3193
+ .pelcro-root .plc-bg-gray-600{
2695
3194
  --tw-bg-opacity: 1;
2696
3195
  background-color: rgba(75, 85, 99, var(--tw-bg-opacity));
2697
3196
  }
2698
3197
 
2699
- .pelcro-root .plc-bg-gray-800 {
3198
+ .pelcro-root .plc-bg-gray-800{
2700
3199
  --tw-bg-opacity: 1;
2701
3200
  background-color: rgba(31, 41, 55, var(--tw-bg-opacity));
2702
3201
  }
2703
3202
 
2704
- .pelcro-root .plc-bg-red-100 {
3203
+ .pelcro-root .plc-bg-red-100{
2705
3204
  --tw-bg-opacity: 1;
2706
3205
  background-color: rgba(239, 190, 188, var(--tw-bg-opacity));
2707
3206
  }
2708
3207
 
2709
- .pelcro-root .plc-bg-red-500 {
3208
+ .pelcro-root .plc-bg-red-500{
2710
3209
  --tw-bg-opacity: 1;
2711
3210
  background-color: rgba(180, 48, 43, var(--tw-bg-opacity));
2712
3211
  }
2713
3212
 
2714
- .pelcro-root .plc-bg-yellow-100 {
3213
+ .pelcro-root .plc-bg-yellow-100{
2715
3214
  --tw-bg-opacity: 1;
2716
3215
  background-color: rgba(254, 243, 199, var(--tw-bg-opacity));
2717
3216
  }
2718
3217
 
2719
- .pelcro-root .plc-bg-green-50 {
3218
+ .pelcro-root .plc-bg-green-50{
2720
3219
  --tw-bg-opacity: 1;
2721
3220
  background-color: rgba(236, 253, 245, var(--tw-bg-opacity));
2722
3221
  }
2723
3222
 
2724
- .pelcro-root .plc-bg-green-100 {
3223
+ .pelcro-root .plc-bg-green-100{
2725
3224
  --tw-bg-opacity: 1;
2726
3225
  background-color: rgba(209, 250, 229, var(--tw-bg-opacity));
2727
3226
  }
2728
3227
 
2729
- .pelcro-root .plc-bg-blue-100 {
3228
+ .pelcro-root .plc-bg-blue-100{
2730
3229
  --tw-bg-opacity: 1;
2731
3230
  background-color: rgba(219, 234, 254, var(--tw-bg-opacity));
2732
3231
  }
2733
3232
 
2734
- .pelcro-root .plc-bg-orange-100 {
3233
+ .pelcro-root .plc-bg-orange-100{
2735
3234
  --tw-bg-opacity: 1;
2736
3235
  background-color: rgba(255, 237, 213, var(--tw-bg-opacity));
2737
3236
  }
2738
3237
 
2739
- .pelcro-root .hover\:plc-bg-transparent:hover {
3238
+ .pelcro-root .hover\:plc-bg-transparent:hover{
2740
3239
  background-color: transparent;
2741
3240
  }
2742
3241
 
2743
- .pelcro-root .hover\:plc-bg-primary-600:hover {
3242
+ .pelcro-root .hover\:plc-bg-primary-600:hover{
2744
3243
  background-color: hsl(var(--plc-primary-hue), var(--plc-primary-saturation), calc(var(--plc-primary-lightness) - 10%));
2745
3244
  }
2746
3245
 
2747
- .pelcro-root .hover\:plc-bg-white:hover {
3246
+ .pelcro-root .hover\:plc-bg-primary:hover{
3247
+ background-color: hsl(var(--plc-primary-hue), var(--plc-primary-saturation), var(--plc-primary-lightness));
3248
+ }
3249
+
3250
+ .pelcro-root .hover\:plc-bg-white:hover{
2748
3251
  --tw-bg-opacity: 1;
2749
3252
  background-color: rgba(255, 255, 255, var(--tw-bg-opacity));
2750
3253
  }
2751
3254
 
2752
- .pelcro-root .hover\:plc-bg-gray-50:hover {
3255
+ .pelcro-root .hover\:plc-bg-gray-50:hover{
2753
3256
  --tw-bg-opacity: 1;
2754
3257
  background-color: rgba(249, 250, 251, var(--tw-bg-opacity));
2755
3258
  }
2756
3259
 
2757
- .pelcro-root .hover\:plc-bg-gray-100:hover {
3260
+ .pelcro-root .hover\:plc-bg-gray-100:hover{
2758
3261
  --tw-bg-opacity: 1;
2759
3262
  background-color: rgba(243, 244, 246, var(--tw-bg-opacity));
2760
3263
  }
2761
3264
 
2762
- .pelcro-root .hover\:plc-bg-gray-600:hover {
3265
+ .pelcro-root .hover\:plc-bg-gray-600:hover{
2763
3266
  --tw-bg-opacity: 1;
2764
3267
  background-color: rgba(75, 85, 99, var(--tw-bg-opacity));
2765
3268
  }
2766
3269
 
2767
- .pelcro-root .hover\:plc-bg-gray-900:hover {
3270
+ .pelcro-root .hover\:plc-bg-gray-900:hover{
2768
3271
  --tw-bg-opacity: 1;
2769
3272
  background-color: rgba(17, 24, 39, var(--tw-bg-opacity));
2770
3273
  }
2771
3274
 
2772
- .pelcro-root .hover\:plc-bg-red-600:hover {
3275
+ .pelcro-root .hover\:plc-bg-red-600:hover{
2773
3276
  --tw-bg-opacity: 1;
2774
3277
  background-color: rgba(139, 37, 33, var(--tw-bg-opacity));
2775
3278
  }
2776
3279
 
2777
- .pelcro-root .focus\:plc-bg-transparent:focus {
3280
+ .pelcro-root .focus\:plc-bg-transparent:focus{
2778
3281
  background-color: transparent;
2779
3282
  }
2780
3283
 
2781
- .pelcro-root .focus\:plc-bg-primary-600:focus {
3284
+ .pelcro-root .focus\:plc-bg-primary-600:focus{
2782
3285
  background-color: hsl(var(--plc-primary-hue), var(--plc-primary-saturation), calc(var(--plc-primary-lightness) - 10%));
2783
3286
  }
2784
3287
 
2785
- .pelcro-root .disabled\:plc-bg-gray-400:disabled {
3288
+ .pelcro-root .disabled\:plc-bg-gray-400:disabled{
2786
3289
  --tw-bg-opacity: 1;
2787
3290
  background-color: rgba(156, 163, 175, var(--tw-bg-opacity));
2788
3291
  }
2789
3292
 
2790
- .pelcro-root .plc-fill-current {
3293
+ .pelcro-root .plc-fill-current{
2791
3294
  fill: currentColor;
2792
3295
  }
2793
3296
 
2794
- .pelcro-root .plc-object-contain {
3297
+ .pelcro-root .plc-object-contain{
2795
3298
  object-fit: contain;
2796
3299
  }
2797
3300
 
2798
- .pelcro-root .plc-object-left {
2799
- object-position: left;
3301
+ .pelcro-root .plc-object-cover{
3302
+ object-fit: cover;
2800
3303
  }
2801
3304
 
2802
- .pelcro-root .plc-p-1 {
2803
- padding: 0.25rem;
3305
+ .pelcro-root .plc-object-center{
3306
+ object-position: center;
2804
3307
  }
2805
3308
 
2806
- .pelcro-root .plc-p-2 {
2807
- padding: 0.5rem;
3309
+ .pelcro-root .plc-p-1{
3310
+ padding: 0.25rem;
2808
3311
  }
2809
3312
 
2810
- .pelcro-root .plc-p-3 {
2811
- padding: 0.75rem;
3313
+ .pelcro-root .plc-p-2{
3314
+ padding: 0.5rem;
2812
3315
  }
2813
3316
 
2814
- .pelcro-root .plc-p-4 {
3317
+ .pelcro-root .plc-p-4{
2815
3318
  padding: 1rem;
2816
3319
  }
2817
3320
 
2818
- .pelcro-root .plc-p-5 {
3321
+ .pelcro-root .plc-p-5{
2819
3322
  padding: 1.25rem;
2820
3323
  }
2821
3324
 
2822
- .pelcro-root .plc-p-6 {
3325
+ .pelcro-root .plc-p-6{
2823
3326
  padding: 1.5rem;
2824
3327
  }
2825
3328
 
2826
- .pelcro-root .plc-p-8 {
2827
- padding: 2rem;
3329
+ .pelcro-root .plc-px-0{
3330
+ padding-left: 0px;
3331
+ padding-right: 0px;
2828
3332
  }
2829
3333
 
2830
- .pelcro-root .plc-px-1 {
3334
+ .pelcro-root .plc-px-1{
2831
3335
  padding-left: 0.25rem;
2832
3336
  padding-right: 0.25rem;
2833
3337
  }
2834
3338
 
2835
- .pelcro-root .plc-px-2 {
3339
+ .pelcro-root .plc-px-2{
2836
3340
  padding-left: 0.5rem;
2837
3341
  padding-right: 0.5rem;
2838
3342
  }
2839
3343
 
2840
- .pelcro-root .plc-px-3 {
3344
+ .pelcro-root .plc-px-3{
2841
3345
  padding-left: 0.75rem;
2842
3346
  padding-right: 0.75rem;
2843
3347
  }
2844
3348
 
2845
- .pelcro-root .plc-px-4 {
3349
+ .pelcro-root .plc-px-4{
2846
3350
  padding-left: 1rem;
2847
3351
  padding-right: 1rem;
2848
3352
  }
2849
3353
 
2850
- .pelcro-root .plc-px-5 {
3354
+ .pelcro-root .plc-px-5{
2851
3355
  padding-left: 1.25rem;
2852
3356
  padding-right: 1.25rem;
2853
3357
  }
2854
3358
 
2855
- .pelcro-root .plc-px-6 {
3359
+ .pelcro-root .plc-px-6{
2856
3360
  padding-left: 1.5rem;
2857
3361
  padding-right: 1.5rem;
2858
3362
  }
2859
3363
 
2860
- .pelcro-root .plc-px-8 {
3364
+ .pelcro-root .plc-px-8{
2861
3365
  padding-left: 2rem;
2862
3366
  padding-right: 2rem;
2863
3367
  }
2864
3368
 
2865
- .pelcro-root .plc-py-1 {
3369
+ .pelcro-root .plc-py-1{
2866
3370
  padding-top: 0.25rem;
2867
3371
  padding-bottom: 0.25rem;
2868
3372
  }
2869
3373
 
2870
- .pelcro-root .plc-py-2 {
3374
+ .pelcro-root .plc-py-2{
2871
3375
  padding-top: 0.5rem;
2872
3376
  padding-bottom: 0.5rem;
2873
3377
  }
2874
3378
 
2875
- .pelcro-root .plc-py-3 {
3379
+ .pelcro-root .plc-py-3{
2876
3380
  padding-top: 0.75rem;
2877
3381
  padding-bottom: 0.75rem;
2878
3382
  }
2879
3383
 
2880
- .pelcro-root .plc-py-4 {
3384
+ .pelcro-root .plc-py-4{
2881
3385
  padding-top: 1rem;
2882
3386
  padding-bottom: 1rem;
2883
3387
  }
2884
3388
 
2885
- .pelcro-root .plc-py-5 {
3389
+ .pelcro-root .plc-py-5{
2886
3390
  padding-top: 1.25rem;
2887
3391
  padding-bottom: 1.25rem;
2888
3392
  }
2889
3393
 
2890
- .pelcro-root .plc-pt-1 {
3394
+ .pelcro-root .plc-py-6{
3395
+ padding-top: 1.5rem;
3396
+ padding-bottom: 1.5rem;
3397
+ }
3398
+
3399
+ .pelcro-root .plc-pt-1{
2891
3400
  padding-top: 0.25rem;
2892
3401
  }
2893
3402
 
2894
- .pelcro-root .plc-pt-2 {
3403
+ .pelcro-root .plc-pt-2{
2895
3404
  padding-top: 0.5rem;
2896
3405
  }
2897
3406
 
2898
- .pelcro-root .plc-pt-4 {
3407
+ .pelcro-root .plc-pt-4{
2899
3408
  padding-top: 1rem;
2900
3409
  }
2901
3410
 
2902
- .pelcro-root .plc-pr-1 {
3411
+ .pelcro-root .plc-pt-5{
3412
+ padding-top: 1.25rem;
3413
+ }
3414
+
3415
+ .pelcro-root .plc-pt-6{
3416
+ padding-top: 1.5rem;
3417
+ }
3418
+
3419
+ .pelcro-root .plc-pr-1{
2903
3420
  padding-right: 0.25rem;
2904
3421
  }
2905
3422
 
2906
- .pelcro-root .plc-pr-2 {
3423
+ .pelcro-root .plc-pr-2{
2907
3424
  padding-right: 0.5rem;
2908
3425
  }
2909
3426
 
2910
- .pelcro-root .plc-pr-4 {
3427
+ .pelcro-root .plc-pr-4{
2911
3428
  padding-right: 1rem;
2912
3429
  }
2913
3430
 
2914
- .pelcro-root .plc-pb-4 {
3431
+ .pelcro-root .plc-pr-8{
3432
+ padding-right: 2rem;
3433
+ }
3434
+
3435
+ .pelcro-root .plc-pb-2{
3436
+ padding-bottom: 0.5rem;
3437
+ }
3438
+
3439
+ .pelcro-root .plc-pb-4{
2915
3440
  padding-bottom: 1rem;
2916
3441
  }
2917
3442
 
2918
- .pelcro-root .plc-pl-2 {
3443
+ .pelcro-root .plc-pl-2{
2919
3444
  padding-left: 0.5rem;
2920
3445
  }
2921
3446
 
2922
- .pelcro-root .plc-pl-4 {
3447
+ .pelcro-root .plc-pl-4{
2923
3448
  padding-left: 1rem;
2924
3449
  }
2925
3450
 
2926
- .pelcro-root .plc-text-left {
3451
+ .pelcro-root .plc-pl-20{
3452
+ padding-left: 5rem;
3453
+ }
3454
+
3455
+ .pelcro-root .plc-text-left{
2927
3456
  text-align: left;
2928
3457
  }
2929
3458
 
2930
- .pelcro-root .plc-text-center {
3459
+ .pelcro-root .plc-text-center{
2931
3460
  text-align: center;
2932
3461
  }
2933
3462
 
2934
- .pelcro-root .plc-align-top {
3463
+ .pelcro-root .plc-text-justify{
3464
+ text-align: justify;
3465
+ }
3466
+
3467
+ .pelcro-root .plc-align-top{
2935
3468
  vertical-align: top;
2936
3469
  }
2937
3470
 
2938
- .pelcro-root .plc-align-middle {
3471
+ .pelcro-root .plc-align-middle{
2939
3472
  vertical-align: middle;
2940
3473
  }
2941
3474
 
2942
- .pelcro-root .plc-text-xs {
3475
+ .pelcro-root .plc-text-xs{
2943
3476
  font-size: 0.75rem;
2944
3477
  line-height: 1rem;
2945
3478
  }
2946
3479
 
2947
- .pelcro-root .plc-text-sm {
3480
+ .pelcro-root .plc-text-sm{
2948
3481
  font-size: 0.875rem;
2949
3482
  line-height: 1.25rem;
2950
3483
  }
2951
3484
 
2952
- .pelcro-root .plc-text-base {
3485
+ .pelcro-root .plc-text-base{
2953
3486
  font-size: 1rem;
2954
3487
  line-height: 1.5rem;
2955
3488
  }
2956
3489
 
2957
- .pelcro-root .plc-text-lg {
3490
+ .pelcro-root .plc-text-lg{
2958
3491
  font-size: 1.125rem;
2959
3492
  line-height: 1.75rem;
2960
3493
  }
2961
3494
 
2962
- .pelcro-root .plc-text-xl {
3495
+ .pelcro-root .plc-text-xl{
2963
3496
  font-size: 1.25rem;
2964
3497
  line-height: 1.75rem;
2965
3498
  }
2966
3499
 
2967
- .pelcro-root .plc-text-2xl {
3500
+ .pelcro-root .plc-text-2xl{
2968
3501
  font-size: 1.5rem;
2969
3502
  line-height: 2rem;
2970
3503
  }
2971
3504
 
2972
- .pelcro-root .plc-text-3xl {
3505
+ .pelcro-root .plc-text-3xl{
2973
3506
  font-size: 1.875rem;
2974
3507
  line-height: 2.25rem;
2975
3508
  }
2976
3509
 
2977
- .pelcro-root .plc-text-4xl {
2978
- font-size: 2.25rem;
2979
- line-height: 2.5rem;
2980
- }
2981
-
2982
- .pelcro-root .plc-font-thin {
3510
+ .pelcro-root .plc-font-thin{
2983
3511
  font-weight: 100;
2984
3512
  }
2985
3513
 
2986
- .pelcro-root .plc-font-normal {
3514
+ .pelcro-root .plc-font-normal{
2987
3515
  font-weight: 400;
2988
3516
  }
2989
3517
 
2990
- .pelcro-root .plc-font-medium {
3518
+ .pelcro-root .plc-font-medium{
2991
3519
  font-weight: 500;
2992
3520
  }
2993
3521
 
2994
- .pelcro-root .plc-font-semibold {
3522
+ .pelcro-root .plc-font-semibold{
2995
3523
  font-weight: 600;
2996
3524
  }
2997
3525
 
2998
- .pelcro-root .plc-font-bold {
3526
+ .pelcro-root .plc-font-bold{
2999
3527
  font-weight: 700;
3000
3528
  }
3001
3529
 
3002
- .pelcro-root .plc-uppercase {
3530
+ .pelcro-root .plc-font-extrabold{
3531
+ font-weight: 800;
3532
+ }
3533
+
3534
+ .pelcro-root .plc-uppercase{
3003
3535
  text-transform: uppercase;
3004
3536
  }
3005
3537
 
3006
- .pelcro-root .plc-capitalize {
3538
+ .pelcro-root .plc-capitalize{
3007
3539
  text-transform: capitalize;
3008
3540
  }
3009
3541
 
3010
- .pelcro-root .plc-tracking-wider {
3542
+ .pelcro-root .plc-tracking-wider{
3011
3543
  letter-spacing: 0.05em;
3012
3544
  }
3013
3545
 
3014
- .pelcro-root .plc-tracking-widest {
3546
+ .pelcro-root .plc-tracking-widest{
3015
3547
  letter-spacing: 0.1em;
3016
3548
  }
3017
3549
 
3018
- .pelcro-root .plc-text-primary-400 {
3550
+ .pelcro-root .plc-text-primary-400{
3019
3551
  color: hsl(var(--plc-primary-hue), var(--plc-primary-saturation), calc(var(--plc-primary-lightness) + 10%));
3020
3552
  }
3021
3553
 
3022
- .pelcro-root .plc-text-primary-500 {
3554
+ .pelcro-root .plc-text-primary-500{
3023
3555
  color: hsl(var(--plc-primary-hue), var(--plc-primary-saturation), var(--plc-primary-lightness));
3024
3556
  }
3025
3557
 
3026
- .pelcro-root .plc-text-primary-600 {
3558
+ .pelcro-root .plc-text-primary-600{
3027
3559
  color: hsl(var(--plc-primary-hue), var(--plc-primary-saturation), calc(var(--plc-primary-lightness) - 10%));
3028
3560
  }
3029
3561
 
3030
- .pelcro-root .plc-text-primary-800 {
3031
- color: hsl(var(--plc-primary-hue), var(--plc-primary-saturation), calc(var(--plc-primary-lightness) - 30%));
3562
+ .pelcro-root .plc-text-primary{
3563
+ color: hsl(var(--plc-primary-hue), var(--plc-primary-saturation), var(--plc-primary-lightness));
3032
3564
  }
3033
3565
 
3034
- .pelcro-root .plc-text-black {
3566
+ .pelcro-root .plc-text-black{
3035
3567
  --tw-text-opacity: 1;
3036
3568
  color: rgba(0, 0, 0, var(--tw-text-opacity));
3037
3569
  }
3038
3570
 
3039
- .pelcro-root .plc-text-white {
3571
+ .pelcro-root .plc-text-white{
3040
3572
  --tw-text-opacity: 1;
3041
3573
  color: rgba(255, 255, 255, var(--tw-text-opacity));
3042
3574
  }
3043
3575
 
3044
- .pelcro-root .plc-text-gray-400 {
3576
+ .pelcro-root .plc-text-gray-400{
3045
3577
  --tw-text-opacity: 1;
3046
3578
  color: rgba(156, 163, 175, var(--tw-text-opacity));
3047
3579
  }
3048
3580
 
3049
- .pelcro-root .plc-text-gray-500 {
3581
+ .pelcro-root .plc-text-gray-500{
3050
3582
  --tw-text-opacity: 1;
3051
3583
  color: rgba(107, 114, 128, var(--tw-text-opacity));
3052
3584
  }
3053
3585
 
3054
- .pelcro-root .plc-text-gray-600 {
3586
+ .pelcro-root .plc-text-gray-600{
3055
3587
  --tw-text-opacity: 1;
3056
3588
  color: rgba(75, 85, 99, var(--tw-text-opacity));
3057
3589
  }
3058
3590
 
3059
- .pelcro-root .plc-text-gray-700 {
3591
+ .pelcro-root .plc-text-gray-700{
3060
3592
  --tw-text-opacity: 1;
3061
3593
  color: rgba(55, 65, 81, var(--tw-text-opacity));
3062
3594
  }
3063
3595
 
3064
- .pelcro-root .plc-text-gray-900 {
3596
+ .pelcro-root .plc-text-gray-900{
3065
3597
  --tw-text-opacity: 1;
3066
3598
  color: rgba(17, 24, 39, var(--tw-text-opacity));
3067
3599
  }
3068
3600
 
3069
- .pelcro-root .plc-text-red-500 {
3601
+ .pelcro-root .plc-text-red-500{
3070
3602
  --tw-text-opacity: 1;
3071
3603
  color: rgba(180, 48, 43, var(--tw-text-opacity));
3072
3604
  }
3073
3605
 
3074
- .pelcro-root .plc-text-red-700 {
3606
+ .pelcro-root .plc-text-red-700{
3075
3607
  --tw-text-opacity: 1;
3076
3608
  color: rgba(98, 26, 23, var(--tw-text-opacity));
3077
3609
  }
3078
3610
 
3079
- .pelcro-root .plc-text-yellow-700 {
3611
+ .pelcro-root .plc-text-yellow-500{
3612
+ --tw-text-opacity: 1;
3613
+ color: rgba(245, 158, 11, var(--tw-text-opacity));
3614
+ }
3615
+
3616
+ .pelcro-root .plc-text-yellow-700{
3080
3617
  --tw-text-opacity: 1;
3081
3618
  color: rgba(180, 83, 9, var(--tw-text-opacity));
3082
3619
  }
3083
3620
 
3084
- .pelcro-root .plc-text-green-400 {
3621
+ .pelcro-root .plc-text-green-400{
3085
3622
  --tw-text-opacity: 1;
3086
3623
  color: rgba(52, 211, 153, var(--tw-text-opacity));
3087
3624
  }
3088
3625
 
3089
- .pelcro-root .plc-text-green-500 {
3626
+ .pelcro-root .plc-text-green-500{
3090
3627
  --tw-text-opacity: 1;
3091
3628
  color: rgba(16, 185, 129, var(--tw-text-opacity));
3092
3629
  }
3093
3630
 
3094
- .pelcro-root .plc-text-green-600 {
3631
+ .pelcro-root .plc-text-green-600{
3095
3632
  --tw-text-opacity: 1;
3096
3633
  color: rgba(5, 150, 105, var(--tw-text-opacity));
3097
3634
  }
3098
3635
 
3099
- .pelcro-root .plc-text-green-700 {
3636
+ .pelcro-root .plc-text-green-700{
3100
3637
  --tw-text-opacity: 1;
3101
3638
  color: rgba(4, 120, 87, var(--tw-text-opacity));
3102
3639
  }
3103
3640
 
3104
- .pelcro-root .plc-text-blue-400 {
3641
+ .pelcro-root .plc-text-blue-400{
3105
3642
  --tw-text-opacity: 1;
3106
3643
  color: rgba(96, 165, 250, var(--tw-text-opacity));
3107
3644
  }
3108
3645
 
3109
- .pelcro-root .plc-text-blue-500 {
3646
+ .pelcro-root .plc-text-blue-500{
3110
3647
  --tw-text-opacity: 1;
3111
3648
  color: rgba(59, 130, 246, var(--tw-text-opacity));
3112
3649
  }
3113
3650
 
3114
- .pelcro-root .plc-text-blue-700 {
3651
+ .pelcro-root .plc-text-blue-700{
3115
3652
  --tw-text-opacity: 1;
3116
3653
  color: rgba(29, 78, 216, var(--tw-text-opacity));
3117
3654
  }
3118
3655
 
3119
- .pelcro-root .plc-text-orange-700 {
3656
+ .pelcro-root .plc-text-orange-700{
3120
3657
  --tw-text-opacity: 1;
3121
3658
  color: rgba(194, 65, 12, var(--tw-text-opacity));
3122
3659
  }
3123
3660
 
3124
- .pelcro-root .plc-group:hover .group-hover\:plc-text-primary-400 {
3661
+ .pelcro-root .plc-group:hover .group-hover\:plc-text-primary-400{
3125
3662
  color: hsl(var(--plc-primary-hue), var(--plc-primary-saturation), calc(var(--plc-primary-lightness) + 10%));
3126
3663
  }
3127
3664
 
3128
- .pelcro-root .hover\:plc-text-primary-500:hover {
3665
+ .pelcro-root .hover\:plc-text-primary-500:hover{
3666
+ color: hsl(var(--plc-primary-hue), var(--plc-primary-saturation), var(--plc-primary-lightness));
3667
+ }
3668
+
3669
+ .pelcro-root .hover\:plc-text-primary-600:hover{
3670
+ color: hsl(var(--plc-primary-hue), var(--plc-primary-saturation), calc(var(--plc-primary-lightness) - 10%));
3671
+ }
3672
+
3673
+ .pelcro-root .hover\:plc-text-primary:hover{
3129
3674
  color: hsl(var(--plc-primary-hue), var(--plc-primary-saturation), var(--plc-primary-lightness));
3130
3675
  }
3131
3676
 
3132
- .pelcro-root .hover\:plc-text-black:hover {
3677
+ .pelcro-root .hover\:plc-text-black:hover{
3133
3678
  --tw-text-opacity: 1;
3134
3679
  color: rgba(0, 0, 0, var(--tw-text-opacity));
3135
3680
  }
3136
3681
 
3137
- .pelcro-root .hover\:plc-text-white:hover {
3682
+ .pelcro-root .hover\:plc-text-white:hover{
3138
3683
  --tw-text-opacity: 1;
3139
3684
  color: rgba(255, 255, 255, var(--tw-text-opacity));
3140
3685
  }
3141
3686
 
3142
- .pelcro-root .hover\:plc-text-gray-900:hover {
3687
+ .pelcro-root .hover\:plc-text-gray-900:hover{
3143
3688
  --tw-text-opacity: 1;
3144
3689
  color: rgba(17, 24, 39, var(--tw-text-opacity));
3145
3690
  }
3146
3691
 
3147
- .pelcro-root .focus\:plc-text-black:focus {
3692
+ .pelcro-root .hover\:plc-text-red-500:hover{
3693
+ --tw-text-opacity: 1;
3694
+ color: rgba(180, 48, 43, var(--tw-text-opacity));
3695
+ }
3696
+
3697
+ .pelcro-root .focus\:plc-text-black:focus{
3148
3698
  --tw-text-opacity: 1;
3149
3699
  color: rgba(0, 0, 0, var(--tw-text-opacity));
3150
3700
  }
3151
3701
 
3152
- .pelcro-root .focus\:plc-text-white:focus {
3702
+ .pelcro-root .focus\:plc-text-white:focus{
3153
3703
  --tw-text-opacity: 1;
3154
3704
  color: rgba(255, 255, 255, var(--tw-text-opacity));
3155
3705
  }
3156
3706
 
3157
- .pelcro-root .plc-underline {
3707
+ .pelcro-root .plc-underline{
3158
3708
  text-decoration: underline;
3159
3709
  }
3160
3710
 
3161
- .pelcro-root .plc-no-underline {
3711
+ .pelcro-root .plc-no-underline{
3712
+ text-decoration: none;
3713
+ }
3714
+
3715
+ .pelcro-root .hover\:plc-no-underline:hover{
3162
3716
  text-decoration: none;
3163
3717
  }
3164
3718
 
3165
- *, ::before, ::after {
3719
+ *, ::before, ::after{
3166
3720
  --tw-shadow: 0 0 #0000;
3167
3721
  }
3168
3722
 
3169
- .pelcro-root .plc-shadow-sm {
3723
+ .pelcro-root .plc-shadow-sm{
3170
3724
  --tw-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
3171
3725
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
3172
3726
  }
3173
3727
 
3174
- .pelcro-root .plc-shadow-md {
3728
+ .pelcro-root .plc-shadow-md{
3175
3729
  --tw-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
3176
3730
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
3177
3731
  }
3178
3732
 
3179
- .pelcro-root .plc-shadow-md_dark {
3733
+ .pelcro-root .plc-shadow-md_dark{
3180
3734
  --tw-shadow: 0 0px 6px -1px rgba(0, 0, 0, 0.1), 0 0px 4px -1px rgba(0, 0, 0, 0.4);
3181
3735
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
3182
3736
  }
3183
3737
 
3184
- .pelcro-root .plc-shadow-lg {
3738
+ .pelcro-root .plc-shadow-lg{
3185
3739
  --tw-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
3186
3740
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
3187
3741
  }
3188
3742
 
3189
- .pelcro-root .plc-shadow-xl {
3743
+ .pelcro-root .plc-shadow-xl{
3190
3744
  --tw-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
3191
3745
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
3192
3746
  }
3193
3747
 
3194
- .pelcro-root .hover\:plc-shadow-none:hover {
3748
+ .pelcro-root .hover\:plc-shadow-sm:hover{
3749
+ --tw-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
3750
+ box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
3751
+ }
3752
+
3753
+ .pelcro-root .hover\:plc-shadow-none:hover{
3195
3754
  --tw-shadow: 0 0 #0000;
3196
3755
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
3197
3756
  }
3198
3757
 
3199
- .pelcro-root .focus\:plc-shadow-none:focus {
3758
+ .pelcro-root .focus\:plc-shadow-none:focus{
3200
3759
  --tw-shadow: 0 0 #0000;
3201
3760
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
3202
3761
  }
3203
3762
 
3204
- .pelcro-root .plc-outline-none {
3763
+ .pelcro-root .plc-outline-none{
3205
3764
  outline: 2px solid transparent;
3206
3765
  outline-offset: 2px;
3207
3766
  }
3208
3767
 
3209
- .pelcro-root .focus-within\:plc-outline-none:focus-within {
3768
+ .pelcro-root .focus-within\:plc-outline-none:focus-within{
3210
3769
  outline: 2px solid transparent;
3211
3770
  outline-offset: 2px;
3212
3771
  }
3213
3772
 
3214
- .pelcro-root .focus\:plc-outline-none:focus {
3773
+ .pelcro-root .focus\:plc-outline-none:focus{
3215
3774
  outline: 2px solid transparent;
3216
3775
  outline-offset: 2px;
3217
3776
  }
3218
3777
 
3219
- *, ::before, ::after {
3778
+ *, ::before, ::after{
3220
3779
  --tw-ring-inset: var(--tw-empty,/*!*/ /*!*/);
3221
3780
  --tw-ring-offset-width: 0px;
3222
3781
  --tw-ring-offset-color: #fff;
@@ -3225,410 +3784,362 @@ in order to scope selectors under pelcro-root
3225
3784
  --tw-ring-shadow: 0 0 #0000;
3226
3785
  }
3227
3786
 
3228
- .pelcro-root .plc-ring-1 {
3787
+ .pelcro-root .plc-ring-1{
3229
3788
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
3230
3789
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
3231
3790
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
3232
3791
  }
3233
3792
 
3234
- .pelcro-root .plc-ring-2 {
3793
+ .pelcro-root .plc-ring-2{
3235
3794
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
3236
3795
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
3237
3796
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
3238
3797
  }
3239
3798
 
3240
- .pelcro-root .focus\:plc-ring-0:focus {
3799
+ .pelcro-root .focus\:plc-ring-0:focus{
3241
3800
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
3242
3801
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);
3243
3802
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
3244
3803
  }
3245
3804
 
3246
- .pelcro-root .focus\:plc-ring-2:focus {
3805
+ .pelcro-root .focus\:plc-ring-2:focus{
3247
3806
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
3248
3807
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
3249
3808
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
3250
3809
  }
3251
3810
 
3252
- .pelcro-root .plc-ring-primary-400 {
3811
+ .pelcro-root .plc-ring-primary-400{
3253
3812
  --tw-ring-color: hsl(var(--plc-primary-hue), var(--plc-primary-saturation), calc(var(--plc-primary-lightness) + 10%));
3254
3813
  }
3255
3814
 
3256
- .pelcro-root .plc-ring-gray-200 {
3815
+ .pelcro-root .plc-ring-gray-200{
3257
3816
  --tw-ring-opacity: 1;
3258
3817
  --tw-ring-color: rgba(229, 231, 235, var(--tw-ring-opacity));
3259
3818
  }
3260
3819
 
3261
- .pelcro-root .plc-ring-red-400 {
3262
- --tw-ring-opacity: 1;
3263
- --tw-ring-color: rgba(209, 70, 65, var(--tw-ring-opacity));
3264
- }
3265
-
3266
- .pelcro-root .focus\:plc-ring-primary-300:focus {
3820
+ .pelcro-root .focus\:plc-ring-primary-300:focus{
3267
3821
  --tw-ring-color: hsl(var(--plc-primary-hue), var(--plc-primary-saturation), calc(var(--plc-primary-lightness) + 20%));
3268
3822
  }
3269
3823
 
3270
- .pelcro-root .focus\:plc-ring-red-500:focus {
3824
+ .pelcro-root .focus\:plc-ring-red-500:focus{
3271
3825
  --tw-ring-opacity: 1;
3272
3826
  --tw-ring-color: rgba(180, 48, 43, var(--tw-ring-opacity));
3273
3827
  }
3274
3828
 
3275
- .pelcro-root .focus\:plc-ring-green-300:focus {
3829
+ .pelcro-root .focus\:plc-ring-green-300:focus{
3276
3830
  --tw-ring-opacity: 1;
3277
3831
  --tw-ring-color: rgba(110, 231, 183, var(--tw-ring-opacity));
3278
3832
  }
3279
3833
 
3280
- .pelcro-root .focus\:plc-ring-blue-400:focus {
3834
+ .pelcro-root .focus\:plc-ring-blue-400:focus{
3281
3835
  --tw-ring-opacity: 1;
3282
3836
  --tw-ring-color: rgba(96, 165, 250, var(--tw-ring-opacity));
3283
3837
  }
3284
3838
 
3285
- .pelcro-root .focus\:plc-ring-blue-500:focus {
3839
+ .pelcro-root .focus\:plc-ring-blue-500:focus{
3286
3840
  --tw-ring-opacity: 1;
3287
3841
  --tw-ring-color: rgba(59, 130, 246, var(--tw-ring-opacity));
3288
3842
  }
3289
3843
 
3290
- .pelcro-root .plc-transition {
3844
+ .pelcro-root .plc-transition-all{
3845
+ transition-property: all;
3846
+ transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
3847
+ transition-duration: 150ms;
3848
+ }
3849
+
3850
+ .pelcro-root .plc-transition{
3291
3851
  transition-property: background-color, border-color, color, fill, stroke, opacity, box-shadow, transform;
3292
3852
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
3293
3853
  transition-duration: 150ms;
3294
3854
  }
3295
3855
 
3296
- .pelcro-root .plc-transition-transform {
3856
+ .pelcro-root .plc-transition-transform{
3297
3857
  transition-property: transform;
3298
3858
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
3299
3859
  transition-duration: 150ms;
3300
3860
  }
3301
3861
 
3302
- .pelcro-root .plc-duration-500 {
3862
+ .pelcro-root .plc-duration-500{
3303
3863
  transition-duration: 500ms;
3304
3864
  }
3305
3865
 
3306
- .pelcro-root .plc-ease-out {
3866
+ .pelcro-root .plc-ease-out{
3307
3867
  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
3308
3868
  }
3309
3869
 
3310
- @media (min-width: 640px) {
3311
- .pelcro-root .sm\:plc-m-4 {
3312
- margin: 1rem;
3870
+ /* Hide scrollbar for Chrome, Safari and Opera */
3871
+
3872
+ /* Hide scrollbar for IE, Edge and Firefox */
3873
+
3874
+ @media (min-width: 425px){
3875
+ }
3876
+
3877
+ @media (min-width: 640px){
3878
+ .pelcro-root .sm\:plc-top-1\/2{
3879
+ top: 50%;
3313
3880
  }
3314
3881
 
3315
- .pelcro-root .sm\:plc-mb-0 {
3316
- margin-bottom: 0px;
3882
+ .pelcro-root .sm\:plc--right-14{
3883
+ right: -3.5rem;
3317
3884
  }
3318
3885
 
3319
- .pelcro-root .sm\:plc-ml-2 {
3886
+ .pelcro-root .sm\:plc--left-14{
3887
+ left: -3.5rem;
3888
+ }
3889
+
3890
+ .pelcro-root .sm\:plc-m-4{
3891
+ margin: 1rem;
3892
+ }
3893
+
3894
+ .pelcro-root .sm\:plc-ml-2{
3320
3895
  margin-left: 0.5rem;
3321
3896
  }
3322
3897
 
3323
- .pelcro-root .sm\:plc-ml-6 {
3898
+ .pelcro-root .sm\:plc-ml-6{
3324
3899
  margin-left: 1.5rem;
3325
3900
  }
3326
3901
 
3327
- .pelcro-root .sm\:plc-ml-8 {
3902
+ .pelcro-root .sm\:plc-ml-8{
3328
3903
  margin-left: 2rem;
3329
3904
  }
3330
3905
 
3331
- .pelcro-root .sm\:plc-flex {
3332
- display: flex;
3906
+ .pelcro-root .sm\:plc-block{
3907
+ display: block;
3333
3908
  }
3334
3909
 
3335
- .pelcro-root .sm\:plc-inline-grid {
3336
- display: inline-grid;
3910
+ .pelcro-root .sm\:plc-flex{
3911
+ display: flex;
3337
3912
  }
3338
3913
 
3339
- .pelcro-root .sm\:plc-h-8 {
3914
+ .pelcro-root .sm\:plc-h-8{
3340
3915
  height: 2rem;
3341
3916
  }
3342
3917
 
3343
- .pelcro-root .sm\:plc-h-96 {
3918
+ .pelcro-root .sm\:plc-h-96{
3344
3919
  height: 24rem;
3345
3920
  }
3346
3921
 
3347
- .pelcro-root .sm\:plc-w-auto {
3922
+ .pelcro-root .sm\:plc-w-auto{
3348
3923
  width: auto;
3349
3924
  }
3350
3925
 
3351
- .pelcro-root .sm\:plc-w-1\/2 {
3352
- width: 50%;
3926
+ .pelcro-root .sm\:plc-max-w-md{
3927
+ max-width: 28rem;
3353
3928
  }
3354
3929
 
3355
- .pelcro-root .sm\:plc-max-w-md {
3356
- max-width: 28rem;
3930
+ .pelcro-root .sm\:plc-max-w-90\%{
3931
+ max-width: 90%;
3932
+ }
3933
+
3934
+ .pelcro-root .sm\:plc--translate-y-1\/2{
3935
+ --tw-translate-y: -50%;
3357
3936
  }
3358
3937
 
3359
- .pelcro-root .sm\:plc-flex-row {
3938
+ .pelcro-root .sm\:plc-flex-row{
3360
3939
  flex-direction: row;
3361
3940
  }
3362
3941
 
3363
- .pelcro-root .sm\:plc-space-x-2 > :not([hidden]) ~ :not([hidden]) {
3942
+ .pelcro-root .sm\:plc-items-start{
3943
+ align-items: flex-start;
3944
+ }
3945
+
3946
+ .pelcro-root .sm\:plc-justify-between{
3947
+ justify-content: space-between;
3948
+ }
3949
+
3950
+ .pelcro-root .sm\:plc-space-x-2 > :not([hidden]) ~ :not([hidden]){
3364
3951
  --tw-space-x-reverse: 0;
3365
3952
  margin-right: calc(0.5rem * var(--tw-space-x-reverse));
3366
3953
  margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse)));
3367
3954
  }
3368
3955
 
3369
- .pelcro-root .sm\:plc-space-y-0 > :not([hidden]) ~ :not([hidden]) {
3956
+ .pelcro-root .sm\:plc-space-x-6 > :not([hidden]) ~ :not([hidden]){
3957
+ --tw-space-x-reverse: 0;
3958
+ margin-right: calc(1.5rem * var(--tw-space-x-reverse));
3959
+ margin-left: calc(1.5rem * calc(1 - var(--tw-space-x-reverse)));
3960
+ }
3961
+
3962
+ .pelcro-root .sm\:plc-space-y-0 > :not([hidden]) ~ :not([hidden]){
3370
3963
  --tw-space-y-reverse: 0;
3371
3964
  margin-top: calc(0px * calc(1 - var(--tw-space-y-reverse)));
3372
3965
  margin-bottom: calc(0px * var(--tw-space-y-reverse));
3373
3966
  }
3374
3967
 
3375
- .pelcro-root .sm\:plc-p-2 {
3968
+ .pelcro-root .sm\:plc-p-2{
3376
3969
  padding: 0.5rem;
3377
3970
  }
3378
3971
 
3379
- .pelcro-root .sm\:plc-px-8 {
3972
+ .pelcro-root .sm\:plc-px-8{
3380
3973
  padding-left: 2rem;
3381
3974
  padding-right: 2rem;
3382
3975
  }
3383
3976
 
3384
- .pelcro-root .sm\:plc-pl-8 {
3385
- padding-left: 2rem;
3977
+ .pelcro-root .sm\:plc-px-10{
3978
+ padding-left: 2.5rem;
3979
+ padding-right: 2.5rem;
3386
3980
  }
3387
- }
3388
-
3389
- @media (min-width: 768px) {
3390
- }
3391
3981
 
3392
- @media (min-width: 1024px) {
3393
- .pelcro-root .lg\:plc-w-3\/12 {
3394
- width: 25%;
3982
+ .pelcro-root .sm\:plc-px-14{
3983
+ padding-left: 3.5rem;
3984
+ padding-right: 3.5rem;
3395
3985
  }
3396
3986
 
3397
- .pelcro-root .lg\:plc-w-9\/12 {
3398
- width: 75%;
3987
+ .pelcro-root .sm\:plc-pl-8{
3988
+ padding-left: 2rem;
3399
3989
  }
3400
3990
  }
3401
3991
 
3402
- @media (min-width: 1280px) {
3403
- }
3404
-
3405
- @media (min-width: 1536px) {
3406
- }
3407
-
3408
- /* purgecss start ignore */
3992
+ @media (min-width: 768px){
3993
+ .pelcro-root .md\:plc-mx-auto{
3994
+ margin-left: auto;
3995
+ margin-right: auto;
3996
+ }
3409
3997
 
3410
- .alice-carousel .animated {
3411
- animation-fill-mode: both;
3412
- }
3998
+ .pelcro-root .md\:plc-mt-40{
3999
+ margin-top: 10rem;
4000
+ }
3413
4001
 
3414
- .alice-carousel .animated-out {
3415
- z-index: 1;
3416
- }
4002
+ .pelcro-root .md\:plc-mb-20{
4003
+ margin-bottom: 5rem;
4004
+ }
3417
4005
 
3418
- .alice-carousel .fadeOut {
3419
- animation-name: fadeOut;
3420
- }
4006
+ .pelcro-root .md\:plc-table-cell{
4007
+ display: table-cell;
4008
+ }
3421
4009
 
3422
- @keyframes fadeOut {
3423
- 0% {
3424
- opacity: 1;
4010
+ .pelcro-root .md\:plc-hidden{
4011
+ display: none;
3425
4012
  }
3426
4013
 
3427
- 100% {
3428
- opacity: 0;
3429
- visibility: hidden;
4014
+ .pelcro-root .md\:plc-w-1\/5{
4015
+ width: 20%;
3430
4016
  }
3431
- }
3432
4017
 
3433
- .alice-carousel {
3434
- position: relative;
3435
- width: 100%;
3436
- margin: auto;
3437
- direction: ltr;
3438
- }
4018
+ .pelcro-root .md\:plc-w-2\/5{
4019
+ width: 40%;
4020
+ }
3439
4021
 
3440
- .alice-carousel__wrapper {
3441
- position: relative;
3442
- overflow-x: hidden;
3443
- overflow-y: hidden;
3444
- box-sizing: border-box;
3445
- width: 100%;
3446
- height: auto;
3447
- }
4022
+ .pelcro-root .md\:plc-w-1\/12{
4023
+ width: 8.333333%;
4024
+ }
3448
4025
 
3449
- .alice-carousel__stage {
3450
- position: relative;
3451
- box-sizing: border-box;
3452
- width: 100%;
3453
- height: 100%;
3454
- margin: 0;
3455
- padding: 0;
3456
- white-space: nowrap;
3457
- transform-style: flat;
3458
- -webkit-transform-style: flat;
3459
- backface-visibility: hidden;
3460
- -webkit-backface-visibility: hidden;
3461
- }
4026
+ .pelcro-root .md\:plc-w-2\/12{
4027
+ width: 16.666667%;
4028
+ }
3462
4029
 
3463
- .alice-carousel__stage-item {
3464
- position: relative;
3465
- display: inline-block;
3466
- padding: 0;
3467
- margin: 0;
3468
- box-sizing: border-box;
3469
- width: 100%;
3470
- height: 100%;
3471
- vertical-align: top;
3472
- white-space: normal;
3473
- line-height: 0;
3474
- }
4030
+ .pelcro-root .md\:plc-w-3\/12{
4031
+ width: 25%;
4032
+ }
3475
4033
 
3476
- .alice-carousel__stage-item * {
3477
- line-height: initial;
3478
- }
4034
+ .pelcro-root .md\:plc-max-w-xl{
4035
+ max-width: 36rem;
4036
+ }
3479
4037
 
3480
- .alice-carousel__stage-item.__hidden {
3481
- opacity: 0;
3482
- overflow: hidden;
3483
- }
4038
+ .pelcro-root .md\:plc-max-w-60\%{
4039
+ max-width: 60%;
4040
+ }
3484
4041
 
3485
- .alice-carousel__prev-btn,
3486
- .alice-carousel__next-btn {
3487
- display: inline-block;
3488
- box-sizing: border-box;
3489
- width: 50%;
3490
- padding: 10px 5px;
3491
- }
4042
+ .pelcro-root .md\:plc-max-w-70\%{
4043
+ max-width: 70%;
4044
+ }
3492
4045
 
3493
- .alice-carousel__prev-btn [data-area]::after,
3494
- .alice-carousel__next-btn [data-area]::after {
3495
- position: relative;
3496
- content: attr(data-area);
3497
- text-transform: capitalize;
3498
- }
4046
+ .pelcro-root .md\:plc-max-w-80\%{
4047
+ max-width: 80%;
4048
+ }
3499
4049
 
3500
- .alice-carousel__prev-btn {
3501
- text-align: right;
3502
- }
4050
+ .pelcro-root .md\:plc-grid-cols-2{
4051
+ grid-template-columns: repeat(2, minmax(0, 1fr));
4052
+ }
3503
4053
 
3504
- .alice-carousel__prev-btn-item,
3505
- .alice-carousel__next-btn-item {
3506
- display: inline-block;
3507
- cursor: pointer;
3508
- padding: 5px;
3509
- margin: 0;
3510
- color: #465798;
3511
- }
4054
+ .pelcro-root .md\:plc-flex-row{
4055
+ flex-direction: row;
4056
+ }
3512
4057
 
3513
- .alice-carousel__prev-btn-item:hover,
3514
- .alice-carousel__next-btn-item:hover {
3515
- color: darkred;
3516
- }
4058
+ .pelcro-root .md\:plc-space-x-3 > :not([hidden]) ~ :not([hidden]){
4059
+ --tw-space-x-reverse: 0;
4060
+ margin-right: calc(0.75rem * var(--tw-space-x-reverse));
4061
+ margin-left: calc(0.75rem * calc(1 - var(--tw-space-x-reverse)));
4062
+ }
3517
4063
 
3518
- .alice-carousel__prev-btn-item.__inactive,
3519
- .alice-carousel__next-btn-item.__inactive {
3520
- opacity: 0.4;
3521
- pointer-events: none;
3522
- }
4064
+ .pelcro-root .md\:plc-space-y-0 > :not([hidden]) ~ :not([hidden]){
4065
+ --tw-space-y-reverse: 0;
4066
+ margin-top: calc(0px * calc(1 - var(--tw-space-y-reverse)));
4067
+ margin-bottom: calc(0px * var(--tw-space-y-reverse));
4068
+ }
3523
4069
 
3524
- .alice-carousel__play-btn {
3525
- position: absolute;
3526
- top: 30px;
3527
- left: 20px;
3528
- display: inline-block;
3529
- }
4070
+ .pelcro-root .md\:plc-whitespace-normal{
4071
+ white-space: normal;
4072
+ }
3530
4073
 
3531
- .alice-carousel__play-btn:hover {
3532
- cursor: pointer;
3533
- }
4074
+ .pelcro-root .md\:plc-whitespace-nowrap{
4075
+ white-space: nowrap;
4076
+ }
3534
4077
 
3535
- .alice-carousel__play-btn-wrapper {
3536
- position: relative;
3537
- width: 32px;
3538
- height: 32px;
3539
- padding: 10px;
3540
- border-radius: 50%;
3541
- background-color: #fff;
3542
- }
4078
+ .pelcro-root .md\:plc-p-8{
4079
+ padding: 2rem;
4080
+ }
3543
4081
 
3544
- .alice-carousel__play-btn-item {
3545
- position: absolute;
3546
- width: 32px;
3547
- height: 32px;
3548
- cursor: pointer;
3549
- border: 0;
3550
- outline: none;
3551
- background: transparent;
4082
+ .pelcro-root .md\:plc-px-0{
4083
+ padding-left: 0px;
4084
+ padding-right: 0px;
4085
+ }
3552
4086
  }
3553
4087
 
3554
- .alice-carousel__play-btn-item::before, .alice-carousel__play-btn-item::after {
3555
- position: absolute;
3556
- pointer-events: none;
3557
- display: block;
3558
- width: 0;
3559
- height: 0;
3560
- content: "";
3561
- transition: all 0.4s linear;
3562
- border-width: 8px 0 8px 15px;
3563
- border-style: solid;
3564
- border-color: transparent;
3565
- border-left-color: #465798;
3566
- }
4088
+ @media (min-width: 1024px){
4089
+ .pelcro-root .lg\:plc-w-3\/12{
4090
+ width: 25%;
4091
+ }
3567
4092
 
3568
- .alice-carousel__play-btn-item::before {
3569
- left: 5px;
3570
- height: 14px;
4093
+ .pelcro-root .lg\:plc-w-9\/12{
4094
+ width: 75%;
4095
+ }
3571
4096
  }
3572
4097
 
3573
- .alice-carousel__play-btn-item::after {
3574
- top: 7px;
3575
- left: 18px;
4098
+ @media (min-width: 1280px){
3576
4099
  }
3577
4100
 
3578
- .alice-carousel__play-btn-item.__pause::before, .alice-carousel__play-btn-item.__pause::after {
3579
- height: 30px;
3580
- border-width: 0 0 0 10px;
4101
+ @media (min-width: 1536px){
3581
4102
  }
3582
4103
 
3583
- .alice-carousel__play-btn-item.__pause::after {
3584
- top: 0;
3585
- left: 18px;
3586
- }
4104
+ /* purgecss start ignore */
3587
4105
 
3588
- .alice-carousel__dots {
3589
- margin: 30px 3px 5px;
3590
- padding: 0;
3591
- list-style: none;
3592
- text-align: center;
4106
+ .custom-single-value {
4107
+ display: flex;
4108
+ align-items: center;
3593
4109
  }
3594
4110
 
3595
- .alice-carousel__dots > li {
3596
- display: inline-block;
4111
+ .custom-option {
4112
+ display: flex;
4113
+ align-items: center;
4114
+ padding: 5px;
3597
4115
  }
3598
4116
 
3599
- .alice-carousel__dots-item:not(.__custom) {
3600
- width: 8px;
3601
- height: 8px;
3602
- cursor: pointer;
3603
- border-radius: 50%;
3604
- background-color: #e0e4fb;
4117
+ .custom-option img {
4118
+ margin-right: 10px;
3605
4119
  }
3606
4120
 
3607
- .alice-carousel__dots-item:not(.__custom):not(:last-child) {
3608
- margin-right: 20px;
4121
+ .css-hlgwow {
4122
+ display: flex !important;
3609
4123
  }
3610
4124
 
3611
- .alice-carousel__dots-item:not(.__custom):hover, .alice-carousel__dots-item:not(.__custom).__active {
3612
- background-color: #6e7ebc;
4125
+ .custom-option {
4126
+ display: flex;
4127
+ align-items: center;
4128
+ cursor: pointer; /* Show pointer cursor on hover */
4129
+ padding: 10px; /* Add padding for better hover area */
3613
4130
  }
3614
4131
 
3615
- .alice-carousel__slide-info {
3616
- position: absolute;
3617
- top: 20px;
3618
- right: 20px;
3619
- display: inline-block;
3620
- padding: 5px 10px;
3621
- color: #465798;
3622
- border-radius: 5px;
3623
- background-color: rgba(224, 228, 251, 0.6);
4132
+ .custom-option:hover {
4133
+ background-color: #f0f0f0; /* Highlight background on hover */
3624
4134
  }
3625
4135
 
3626
- .alice-carousel__slide-info-item {
3627
- vertical-align: middle;
3628
- line-height: 0;
4136
+ .custom-single-value {
4137
+ display: flex;
4138
+ align-items: center;
3629
4139
  }
3630
4140
 
3631
4141
  /* purgecss end ignore */
4142
+
3632
4143
  /* purgecss start ignore */
3633
4144
 
3634
4145
  .toggle-switch {