@pelcro/react-pelcro-js 4.0.0-alpha.7 → 4.0.0-alpha.71

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