@pelcro/react-pelcro-js 4.0.0-alpha.8 → 4.0.0-alpha.81

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