@pelcro/react-pelcro-js 4.0.0-alpha.5 → 4.0.0-alpha.51

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