@pelcro/react-pelcro-js 4.0.0-alpha.9 → 4.0.0-alpha.90

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