@sc-360-v2/storefront-cms-library 0.3.85 → 0.3.87

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.
@@ -666,825 +666,523 @@
666
666
  var(--_ctm-tab-dn-pe-pr-ut-ue, var(--_ctm-dn-pe-pr-ut-ue))
667
667
  );
668
668
  }
669
- .horizontal {
670
- display: flex;
671
- flex-direction: row;
672
- flex-wrap: wrap;
669
+ }
670
+ }
673
671
 
674
- gap: var(--_ctm-mob-lt-im-sg, var(--_ctm-tab-lt-im-sg, var(--_ctm-lt-im-sg)));
675
- }
672
+ .table__common_parent {
673
+ // width: var(--_sf-nw-wh, var(--_tst-lt-wh));
674
+ width: 100%;
676
675
 
677
- .vertical {
678
- display: flex;
679
- flex-direction: column;
680
- gap: var(--_ctm-lt-im-sg);
681
- .item {
682
- flex-direction: row;
683
- justify-content: space-between;
684
- align-items: center;
685
- .right__side__content {
686
- display: flex;
687
- gap: 20px;
688
- div {
689
- display: flex;
690
- gap: 1px;
691
-
692
- flex-direction: column;
693
- justify-content: right;
694
- align-items: center;
695
- }
696
- }
697
- }
676
+ // aspect-ratio: 1 / var(--_sf-aspect-ratio);
677
+ // --_aspect-ratio: calc(
678
+ // 1 * (var(--_ctm-lt-ht, var(--_tst-lt-ht)) / var(--_ctm-lt-wh, var(--_tst-lt-wh)))
679
+ // );
680
+
681
+ .pagination:hover {
682
+ --_sf-bd-cr: var(--_ctm-dn-pn-hr-se-bd-cr, var(--_tst-dn-pn-hr-se-bd-cr));
683
+ }
684
+
685
+ .pagination .active:hover {
686
+ cursor: pointer;
687
+ --_sf-hr-fc: var(--_ctm-dn-pn-hr-se-cr, var(--_tst-dn-pn-hr-se-cr));
688
+ --_sf-hr-ff: var(--_ctm-dn-pn-hr-se-ft-fy, var(--_tst-dn-pn-hr-se-ft-fy));
689
+ --_sf-hr-fs: var(--_ctm-dn-pn-hr-se-ft-se, var(--_tst-dn-pn-hr-se-ft-se));
690
+ --_sf-hr-td: var(--_ctm-dn-pn-hr-se-tt-ue, var(--_tst-dn-hr-tt-ue));
691
+ --_sf-hr-fw: var(--_ctm-dn-pn-hr-se-ft-wt, var(--_tst-dn-pn-hr-se-ft-wt));
692
+ --_sf-hr-ft: var(--_ctm-dn-pn-hr-se-ft-se-ic, var(--_tst-dn-pn-hr-se-ft-se-ic));
693
+ --_sf-hr-ta: var(--_ctm-dn-pn-hr-se-tt-an, var(--_tst-dn-pn-hr-se-tt-an));
694
+ --_sf-hr-ls: var(--_ctm-dn-pn-hr-se-lr-sg, var(--_tst-dn-pn-hr-se-lr-sg));
695
+ --_sf-hr-lh: var(--_ctm-dn-pn-hr-se-le-ht, var(--_tst-dn-pn-hr-se-le-ht));
696
+ }
697
+ &[data-widget-shadow="false"] {
698
+ .table__wrapper {
699
+ --_show-shadow: none;
698
700
  }
699
- .grid {
700
- display: grid;
701
- grid-template-columns: repeat(var(--_ctm-lt-is-pr-rw), minmax(auto, 1fr));
702
- gap: var(--_ctm-lt-im-sg);
703
- padding: var(--_ctm-lt-im-pg);
704
- &[data-overflow-items="Scroll"] {
705
- height: 200px;
706
- overflow-y: auto;
707
- }
708
- .item {
709
- display: flex;
710
- align-items: center;
711
- justify-content: center;
712
- flex-direction: column;
713
- gap: 4px;
714
- padding: var(--_ctm-dn-im-se-dt-se-vl-pg) var(--_ctm-dn-im-se-dt-se-hl-pg);
715
- cursor: pointer;
716
- background-color: var(--_ctm-dn-im-se-dt-se-bd-cr);
717
- border-color: var(
718
- --_show-border-im-se,
719
- var(--_ctm-dn-im-se-dt-se-br-cr, var(--_tst-dn-br-cr))
701
+ }
702
+ &[data-widget-border="true"] {
703
+ .table__wrapper {
704
+ border-color: var(
705
+ --_ctm-mob-dn-te-wt-br-cr,
706
+ var(--_ctm-tab-dn-te-wt-br-cr, var(--_ctm-dn-te-wt-br-cr))
707
+ );
708
+ border-style: var(
709
+ --_ctm-mob-dn-te-wt-br-se,
710
+ var(--_ctm-tab-dn-te-wt-br-se, var(--_ctm-dn-te-wt-br-se))
711
+ );
712
+ border-width: var(
713
+ --_ctm-mob-dn-te-wt-br-wh,
714
+ var(--_ctm-tab-dn-te-wt-br-wh, var(--_ctm-dn-te-wt-br-wh))
715
+ );
716
+ }
717
+ }
718
+ &[data-table-shadow="false"] {
719
+ .table__container {
720
+ --_show-table-shadow: none;
721
+ }
722
+ }
723
+ &[data-table-border="true"] {
724
+ .table__container {
725
+ border-color: var(
726
+ --_ctm-mob-dn-te-br-cr,
727
+ var(--_ctm-tab-dn-te-br-cr, var(--_ctm-dn-te-br-cr))
728
+ );
729
+ border-style: var(
730
+ --_ctm-mob-dn-te-br-se,
731
+ var(--_ctm-tab-dn-te-br-se, var(--_ctm-dn-te-br-se))
732
+ );
733
+ border-width: var(
734
+ --_ctm-mob-dn-te-br-wh,
735
+ var(--_ctm-tab-dn-te-br-wh, var(--_ctm-dn-te-br-wh))
736
+ );
737
+ }
738
+ }
739
+
740
+ &[data-header-divider="true"] {
741
+ thead tr th {
742
+ border-bottom: 1px solid
743
+ var(
744
+ --_ctm-mob-dn-rw-ad-hr-ds-hr-dr,
745
+ var(--_ctm-tab-dn-rw-ad-hr-ds-hr-dr, var(--_ctm-dn-rw-ad-hr-ds-hr-dr))
720
746
  );
721
- border-style: var(
722
- --_show-border-im-se,
723
- var(--_ctm-dn-im-se-dt-se-br-se, var(--_tst-dn-br-se))
747
+ }
748
+ }
749
+ &[data-row-divider="true"] {
750
+ tbody tr {
751
+ border-bottom: 1px solid
752
+ var(
753
+ --_ctm-mob-dn-rw-ad-hr-ds-rw-dr,
754
+ var(--_ctm-tab-dn-rw-ad-hr-ds-rw-dr, var(--_ctm-dn-rw-ad-hr-ds-rw-dr))
724
755
  );
725
- border-width: var(
726
- --_show-border-im-se,
727
- var(--_ctm-dn-im-se-dt-se-br-wh, var(--_tst-dn-br-wh))
756
+ }
757
+ }
758
+ &[data-column-divider="true"] {
759
+ tbody tr td,
760
+ thead tr th {
761
+ border-right: 1px solid
762
+ var(
763
+ --_ctm-mob-dn-rw-ad-hr-ds-cn-dr,
764
+ var(--_ctm-tab-dn-rw-ad-hr-ds-cn-dr, var(--_ctm-dn-rw-ad-hr-ds-cn-dr))
728
765
  );
729
- border-radius: var(--_ctm-dn-im-se-dt-se-br-rs, var(--_tst-dn-br-rs));
730
- box-shadow: var(
731
- --_show-shadow-im-se,
732
- var(--_ctm-dn-im-se-dt-se-sw-ae, var(--_tst-dn-sw-ae))
733
- var(--_ctm-dn-im-se-dt-se-sw-br, var(--_tst-dn-sw-br))
734
- var(--_ctm-dn-im-se-dt-se-sw-sd, var(--_tst-dn-sw-sd))
735
- var(--_ctm-dn-im-se-dt-se-sw-cr, var(--_tst-dn-sw-cr))
766
+ }
767
+
768
+ tbody tr td:last-child,
769
+ thead tr th:last-child {
770
+ border-right: none;
771
+ }
772
+ }
773
+ &[data-show-more-rows="onScroll"] {
774
+ .table__container {
775
+ overflow-y: scroll;
776
+ height: var(
777
+ --_ctm-mob-lt-te-ht,
778
+ var(--_ctm-tab-lt-te-ht, var(--_ctm-lt-te-ht))
779
+ ) !important;
780
+
781
+ &::-webkit-scrollbar {
782
+ width: var(
783
+ --_ctm-mob-dn-sl-br-sl-br-wh,
784
+ var(--_ctm-tab-dn-sl-br-sl-br-wh, var(--_ctm-dn-sl-br-sl-br-wh))
736
785
  );
737
- cursor: pointer;
738
- .each {
739
- color: var(
740
- --_ctm-mob-dn-um-se-cr,
741
- var(--_ctm-tab-dn-um-se-cr, var(--_ctm-dn-um-se-cr))
742
- );
743
- font-family: var(
744
- --_ctm-mob-dn-um-se-ft-fy,
745
- var(--_ctm-tab-dn-um-se-ft-fy, var(--_ctm-dn-um-se-ft-fy))
746
- ),
747
- sans-serif;
748
- font-size: var(
749
- --_ctm-mob-dn-um-se-ft-se,
750
- var(--_ctm-tab-dn-um-se-ft-se, var(--_ctm-dn-um-se-ft-se))
751
- );
752
- font-weight: var(
753
- --_ctm-mob-dn-um-se-ft-wt,
754
- var(--_ctm-tab-dn-um-se-ft-wt, var(--_ctm-dn-um-se-ft-wt))
755
- );
756
- font-style: var(
757
- --_ctm-mob-dn-um-se-ft-se-ic,
758
- var(--_ctm-tab-dn-um-se-ft-se-ic, var(--_ctm-dn-um-se-ft-se-ic))
759
- );
760
- text-align: var(
761
- --_ctm-mob-dn-um-se-tt-an,
762
- var(--_ctm-tab-dn-um-se-tt-an, var(--_ctm-dn-um-se-tt-an))
763
- );
764
- letter-spacing: var(
765
- --_ctm-mob-dn-um-se-lr-sg,
766
- var(--_ctm-tab-dn-um-se-lr-sg, var(--_ctm-dn-um-se-lr-sg))
767
- );
768
- line-height: var(
769
- --_ctm-mob-dn-um-se-le-ht,
770
- var(--_ctm-tab-dn-um-se-le-ht, var(--_ctm-dn-um-se-le-ht))
771
- );
772
- text-decoration: var(
773
- --_ctm-mob-dn-um-se-ue,
774
- var(--_ctm-tab-dn-um-se-ue, var(--_ctm-dn-um-se-ue))
775
- );
776
- }
777
- .price {
778
- color: var(
779
- --_ctm-mob-dn-pt-pe-cr,
780
- var(--_ctm-tab-dn-pt-pe-cr, var(--_ctm-dn-pt-pe-cr))
781
- );
782
- font-family: var(
783
- --_ctm-mob-dn-pt-pe-ft-fy,
784
- var(--_ctm-tab-dn-pt-pe-ft-fy, var(--_ctm-dn-pt-pe-ft-fy))
785
- ),
786
- sans-serif;
787
- font-size: var(
788
- --_ctm-mob-dn-pt-pe-ft-se,
789
- var(--_ctm-tab-dn-pt-pe-ft-se, var(--_ctm-dn-pt-pe-ft-se))
790
- );
791
- font-weight: var(
792
- --_ctm-mob-dn-pt-pe-ft-wt,
793
- var(--_ctm-tab-dn-pt-pe-ft-wt, var(--_ctm-dn-pt-pe-ft-wt))
794
- );
795
- font-style: var(
796
- --_ctm-mob-dn-pt-pe-ft-se-ic,
797
- var(--_ctm-tab-dn-pt-pe-ft-se-ic, var(--_ctm-dn-pt-pe-ft-se-ic))
798
- );
799
- text-align: var(
800
- --_ctm-mob-dn-pt-pe-tt-an,
801
- var(--_ctm-tab-dn-pt-pe-tt-an, var(--_ctm-dn-pt-pe-tt-an))
802
- );
803
- letter-spacing: var(
804
- --_ctm-mob-dn-pt-pe-lr-sg,
805
- var(--_ctm-tab-dn-pt-pe-lr-sg, var(--_ctm-dn-pt-pe-lr-sg))
806
- );
807
- line-height: var(
808
- --_ctm-mob-dn-pt-pe-le-ht,
809
- var(--_ctm-tab-dn-pt-pe-le-ht, var(--_ctm-dn-pt-pe-le-ht))
810
- );
811
- text-decoration: var(
812
- --_ctm-mob-dn-pt-pe-ue,
813
- var(--_ctm-tab-dn-pt-pe-ue, var(--_ctm-dn-pt-pe-ue))
814
- );
815
- }
816
- .off__price {
817
- font-size: 12px;
818
- display: flex;
819
- justify-content: space-around;
820
- gap: 10px;
821
- align-items: center;
822
- .saving__amount {
823
- color: var(--_ctm-mob-dn-ss-cr, var(--_ctm-tab-dn-ss-cr, var(--_ctm-dn-ss-cr)));
824
- font-family: var(
825
- --_ctm-mob-dn-ss-ft-fy,
826
- var(--_ctm-tab-dn-ss-ft-fy, var(--_ctm-dn-ss-ft-fy))
827
- ),
828
- sans-serif;
829
- font-size: var(
830
- --_ctm-mob-dn-ss-ft-se,
831
- var(--_ctm-tab-dn-ss-ft-se, var(--_ctm-dn-ss-ft-se))
832
- );
833
- font-weight: var(
834
- --_ctm-mob-dn-ss-ft-wt,
835
- var(--_ctm-tab-dn-ss-ft-wt, var(--_ctm-dn-ss-ft-wt))
836
- );
837
- font-style: var(
838
- --_ctm-mob-dn-ss-ft-se-ic,
839
- var(--_ctm-tab-dn-ss-ft-se-ic, var(--_ctm-dn-ss-ft-se-ic))
840
- );
841
- text-align: var(
842
- --_ctm-mob-dn-ss-tt-an,
843
- var(--_ctm-tab-dn-ss-tt-an, var(--_ctm-dn-ss-tt-an))
844
- );
845
- letter-spacing: var(
846
- --_ctm-mob-dn-ss-lr-sg,
847
- var(--_ctm-tab-dn-ss-lr-sg, var(--_ctm-dn-ss-lr-sg))
848
- );
849
- line-height: var(
850
- --_ctm-mob-dn-ss-le-ht,
851
- var(--_ctm-tab-dn-ss-le-ht, var(--_ctm-dn-ss-le-ht))
852
- );
853
- text-decoration: var(
854
- --_ctm-mob-dn-ss-ue,
855
- var(--_ctm-tab-dn-ss-ue, var(--_ctm-dn-ss-ue))
856
- );
857
- }
858
- .actual__price {
859
- color: var(
860
- --_ctm-mob-dn-al-pe-cr,
861
- var(--_ctm-tab-dn-al-pe-cr, var(--_ctm-dn-al-pe-cr))
862
- );
863
- font-family: var(
864
- --_ctm-mob-dn-al-pe-ft-fy,
865
- var(--_ctm-tab-dn-al-pe-ft-fy, var(--_ctm-dn-al-pe-ft-fy))
866
- ),
867
- sans-serif;
868
- font-size: var(
869
- --_ctm-mob-dn-al-pe-ft-se,
870
- var(--_ctm-tab-dn-al-pe-ft-se, var(--_ctm-dn-al-pe-ft-se))
871
- );
872
- font-weight: var(
873
- --_ctm-mob-dn-al-pe-ft-wt,
874
- var(--_ctm-tab-dn-al-pe-ft-wt, var(--_ctm-dn-al-pe-ft-wt))
875
- );
876
- font-style: var(
877
- --_ctm-mob-dn-al-pe-ft-se-ic,
878
- var(--_ctm-tab-dn-al-pe-ft-se-ic, var(--_ctm-dn-al-pe-ft-se-ic))
879
- );
880
- text-align: var(
881
- --_ctm-mob-dn-al-pe-tt-an,
882
- var(--_ctm-tab-dn-al-pe-tt-an, var(--_ctm-dn-al-pe-tt-an))
883
- );
884
- letter-spacing: var(
885
- --_ctm-mob-dn-al-pe-lr-sg,
886
- var(--_ctm-tab-dn-al-pe-lr-sg, var(--_ctm-dn-al-pe-lr-sg))
887
- );
888
- line-height: var(
889
- --_ctm-mob-dn-al-pe-le-ht,
890
- var(--_ctm-tab-dn-al-pe-le-ht, var(--_ctm-dn-al-pe-le-ht))
891
- );
892
- text-decoration: var(
893
- --_ctm-mob-dn-al-pe-ue,
894
- var(--_ctm-tab-dn-al-pe-ue, var(--_ctm-dn-al-pe-ue))
895
- );
896
- }
897
- }
898
- .units {
899
- color: var(
900
- --_ctm-mob-dn-pe-pr-ut-cr,
901
- var(--_ctm-tab-dn-pe-pr-ut-cr, var(--_ctm-dn-pe-pr-ut-cr))
902
- );
903
- font-family: var(
904
- --_ctm-mob-dn-pe-pr-ut-ft-fy,
905
- var(--_ctm-tab-dn-pe-pr-ut-ft-fy, var(--_ctm-dn-pe-pr-ut-ft-fy))
906
- ),
907
- sans-serif;
908
- font-size: var(
909
- --_ctm-mob-dn-pe-pr-ut-ft-se,
910
- var(--_ctm-tab-dn-pe-pr-ut-ft-se, var(--_ctm-dn-pe-pr-ut-ft-se))
911
- );
912
- font-weight: var(
913
- --_ctm-mob-dn-pe-pr-ut-ft-wt,
914
- var(--_ctm-tab-dn-pe-pr-ut-ft-wt, var(--_ctm-dn-pe-pr-ut-ft-wt))
915
- );
916
- font-style: var(
917
- --_ctm-mob-dn-pe-pr-ut-ft-se-ic,
918
- var(--_ctm-tab-dn-pe-pr-ut-ft-se-ic, var(--_ctm-dn-pe-pr-ut-ft-se-ic))
919
- );
920
- text-align: var(
921
- --_ctm-mob-dn-pe-pr-ut-tt-an,
922
- var(--_ctm-tab-dn-pe-pr-ut-tt-an, var(--_ctm-dn-pe-pr-ut-tt-an))
923
- );
924
- letter-spacing: var(
925
- --_ctm-mob-dn-pe-pr-ut-lr-sg,
926
- var(--_ctm-tab-dn-pe-pr-ut-lr-sg, var(--_ctm-dn-pe-pr-ut-lr-sg))
927
- );
928
- line-height: var(
929
- --_ctm-mob-dn-pe-pr-ut-le-ht,
930
- var(--_ctm-tab-dn-pe-pr-ut-le-ht, var(--_ctm-dn-pe-pr-ut-le-ht))
931
- );
932
- text-decoration: var(
933
- --_ctm-mob-dn-pe-pr-ut-ue,
934
- var(--_ctm-tab-dn-pe-pr-ut-ue, var(--_ctm-dn-pe-pr-ut-ue))
935
- );
936
- }
937
786
  }
938
- .active {
939
- display: flex;
940
787
 
941
- align-items: var(
942
- --_ctm-mob-dn-im-se-sd-se-ct-at,
943
- var(--_ctm-tab-dn-im-se-sd-se-ct-at, var(--_ctm-dn-im-se-sd-se-ct-at))
788
+ &::-webkit-scrollbar-track {
789
+ background-color: var(--_base-white);
790
+ }
791
+
792
+ &::-webkit-scrollbar-thumb {
793
+ background-color: var(
794
+ --_ctm-mob-dn-sl-br-sl-br-cr,
795
+ var(--_ctm-tab-dn-sl-br-sl-br-cr, var(--_ctm-dn-sl-br-sl-br-cr))
944
796
  );
797
+ }
945
798
 
946
- justify-content: center;
947
- flex-direction: column;
948
- gap: 4px;
799
+ // // Scrollbar thumb when hovered
800
+ // &::-webkit-scrollbar-thumb:hover {
801
+ // background-color: #555; // Darker color when hovering over the thumb
802
+ // }
949
803
 
950
- padding: var(
951
- --_ctm-mob-dn-im-se-sd-se-vl-pg,
952
- var(--_ctm-tab-dn-im-se-sd-se-vl-pg, var(--_ctm-dn-im-se-sd-se-vl-pg))
953
- )
954
- var(
955
- --_ctm-mob-dn-im-se-sd-se-hl-pg,
956
- var(--_ctm-tab-dn-im-se-sd-se-hl-pg, var(--_ctm-dn-im-se-sd-se-hl-pg))
957
- );
804
+ // // For Firefox, using scrollbar-width and scrollbar-color
805
+ // scrollbar-width: thin; // Thin scrollbar
806
+ // scrollbar-color: #888 #f1f1f1; // Thumb and track colors
807
+ }
808
+ }
958
809
 
959
- cursor: pointer;
810
+ &[data-alternative-row-colors="true"] {
811
+ tbody .tbody__row__divider:nth-child(odd) {
812
+ background-color: #f76b6b;
813
+ }
814
+ }
960
815
 
961
- background-color: var(
962
- --_ctm-mob-dn-im-se-sd-se-bd-cr,
963
- var(--_ctm-tab-dn-im-se-sd-se-bd-cr, var(--_ctm-dn-im-se-sd-se-bd-cr))
964
- );
816
+ .table__wrapper {
817
+ padding: var(
818
+ --_ctm-mob-lt-pg,
819
+ var(--_ctm-tab-lt-pg, var(--_ctm-lt-pg, var(--_tst-lt-pg)))
820
+ );
965
821
 
966
- border-color: var(
967
- --_show-border-im-se,
968
- var(
969
- --_ctm-mob-dn-im-se-sd-se-br-cr,
970
- var(--_ctm-tab-dn-im-se-sd-se-br-cr, var(--_ctm-dn-im-se-sd-se-br-cr))
971
- )
972
- );
822
+ background-color: var(
823
+ --_ctm-mob-dn-te-wt-bd-cr,
824
+ var(--_ctm-tab-dn-te-wt-bd-cr, var(--_ctm-dn-te-wt-bd-cr, var(--_tst-dn-te-wt-bd-cr)))
825
+ );
973
826
 
974
- border-style: var(
975
- --_show-border-im-se,
976
- var(
977
- --_ctm-mob-dn-im-se-sd-se-br-se,
978
- var(--_ctm-tab-dn-im-se-sd-se-br-se, var(--_ctm-dn-im-se-sd-se-br-se))
979
- )
980
- );
827
+ border-radius: var(
828
+ --_ctm-mob-dn-te-wt-br-rs,
829
+ var(--_ctm-tab-dn-te-wt-br-rs, var(--_ctm-dn-te-wt-br-rs, var(--_tst-dn-te-wt-br-rs)))
830
+ );
981
831
 
982
- border-width: var(
983
- --_show-border-im-se,
984
- var(
985
- --_ctm-mob-dn-im-se-sd-se-br-wh,
986
- var(--_ctm-tab-dn-im-se-sd-se-br-wh, var(--_ctm-dn-im-se-sd-se-br-wh))
987
- )
988
- );
832
+ box-shadow: var(
833
+ --_show-shadow,
834
+ var(
835
+ --_ctm-mob-dn-te-wt-sw-ae,
836
+ var(--_ctm-tab-dn-te-wt-sw-ae, var(--_ctm-dn-te-wt-sw-ae))
837
+ )
838
+ var(
839
+ --_ctm-mob-dn-te-wt-sw-br,
840
+ var(--_ctm-tab-dn-te-wt-sw-br, var(--_ctm-dn-te-wt-sw-br))
841
+ )
842
+ var(
843
+ --_ctm-mob-dn-te-wt-sw-sd,
844
+ var(--_ctm-tab-dn-te-wt-sw-sd, var(--_ctm-dn-te-wt-sw-sd))
845
+ )
846
+ var(
847
+ --_ctm-mob-dn-te-wt-sw-cr,
848
+ var(--_ctm-tab-dn-te-wt-sw-cr, var(--_ctm-dn-te-wt-sw-cr))
849
+ )
850
+ );
989
851
 
990
- border-radius: var(
991
- --_ctm-mob-dn-im-se-sd-se-br-rs,
992
- var(--_ctm-tab-dn-im-se-sd-se-br-rs, var(--_ctm-dn-im-se-sd-se-br-rs))
993
- );
852
+ width: 100%;
994
853
 
995
- box-shadow: var(
996
- --_show-shadow-im-se,
997
- var(
998
- --_ctm-mob-dn-im-se-sd-se-sw-ae,
999
- var(--_ctm-tab-dn-im-se-sd-se-sw-ae, var(--_ctm-dn-im-se-sd-se-sw-ae))
1000
- )
1001
- var(
1002
- --_ctm-mob-dn-im-se-sd-se-sw-br,
1003
- var(--_ctm-tab-dn-im-se-sd-se-sw-br, var(--_ctm-dn-im-se-sd-se-sw-br))
1004
- )
1005
- var(
1006
- --_ctm-mob-dn-im-se-sd-se-sw-sd,
1007
- var(--_ctm-tab-dn-im-se-sd-se-sw-sd, var(--_ctm-dn-im-se-sd-se-sw-sd))
1008
- )
1009
- var(
1010
- --_ctm-mob-dn-im-se-sd-se-sw-cr,
1011
- var(--_ctm-tab-dn-im-se-sd-se-sw-cr, var(--_ctm-dn-im-se-sd-se-sw-cr))
1012
- )
854
+ .table__container {
855
+ background-color: var(
856
+ --_ctm-mob-dn-te-bd-cr,
857
+ var(--_ctm-tab-dn-te-bd-cr, var(--_ctm-dn-te-bd-cr))
858
+ );
859
+
860
+ border-radius: var(
861
+ --_ctm-mob-dn-te-br-rs,
862
+ var(--_ctm-tab-dn-te-br-rs, var(--_ctm-dn-te-br-rs))
863
+ );
864
+
865
+ box-shadow: var(
866
+ --_show-table-shadow,
867
+ var(--_ctm-mob-dn-te-sw-ae, var(--_ctm-tab-dn-te-sw-ae, var(--_ctm-dn-te-sw-ae)))
868
+ var(--_ctm-mob-dn-te-sw-br, var(--_ctm-tab-dn-te-sw-br, var(--_ctm-dn-te-sw-br)))
869
+ var(--_ctm-mob-dn-te-sw-sd, var(--_ctm-tab-dn-te-sw-sd, var(--_ctm-dn-te-sw-sd)))
870
+ var(--_ctm-mob-dn-te-sw-cr, var(--_ctm-tab-dn-te-sw-cr, var(--_ctm-dn-te-sw-cr)))
871
+ );
872
+ }
873
+
874
+ h3 {
875
+ text-align: center;
876
+ width: 100%;
877
+ margin-bottom: 10px;
878
+ }
879
+ table {
880
+ border-collapse: collapse;
881
+ // border: none;
882
+ width: 100%;
883
+ // height: 100%;
884
+ text-align: var(--_ctm-mob-lt-ct-at, var(--_ctm-tab-lt-ct-at, var(--_ctm-lt-ct-at)));
885
+
886
+ th,
887
+ td {
888
+ border: none;
889
+ }
890
+ thead {
891
+ background-color: var(
892
+ --_ctm-mob-dn-te-hr-bd-cr,
893
+ var(--_ctm-tab-dn-te-hr-bd-cr, var(--_ctm-dn-te-hr-bd-cr))
1013
894
  );
1014
895
 
1015
- .each {
1016
- color: var(
1017
- --_ctm-mob-dn-um-se-cr,
1018
- var(--_ctm-tab-dn-um-se-cr, var(--_ctm-dn-um-se-cr))
1019
- );
1020
- font-family: var(
1021
- --_ctm-mob-dn-um-se-ft-fy,
1022
- var(--_ctm-tab-dn-um-se-ft-fy, var(--_ctm-dn-um-se-ft-fy))
1023
- ),
1024
- sans-serif;
1025
- font-size: var(
1026
- --_ctm-mob-dn-um-se-ft-se,
1027
- var(--_ctm-tab-dn-um-se-ft-se, var(--_ctm-dn-um-se-ft-se))
1028
- );
1029
- font-weight: var(
1030
- --_ctm-mob-dn-um-se-ft-wt,
1031
- var(--_ctm-tab-dn-um-se-ft-wt, var(--_ctm-dn-um-se-ft-wt))
1032
- );
1033
- font-style: var(
1034
- --_ctm-mob-dn-um-se-ft-se-ic,
1035
- var(--_ctm-tab-dn-um-se-ft-se-ic, var(--_ctm-dn-um-se-ft-se-ic))
1036
- );
1037
- text-align: var(
1038
- --_ctm-mob-dn-um-se-tt-an,
1039
- var(--_ctm-tab-dn-um-se-tt-an, var(--_ctm-dn-um-se-tt-an))
1040
- );
1041
- letter-spacing: var(
1042
- --_ctm-mob-dn-um-se-lr-sg,
1043
- var(--_ctm-tab-dn-um-se-lr-sg, var(--_ctm-dn-um-se-lr-sg))
1044
- );
1045
- line-height: var(
1046
- --_ctm-mob-dn-um-se-le-ht,
1047
- var(--_ctm-tab-dn-um-se-le-ht, var(--_ctm-dn-um-se-le-ht))
1048
- );
1049
- text-decoration: var(
1050
- --_ctm-mob-dn-um-se-ue,
1051
- var(--_ctm-tab-dn-um-se-ue, var(--_ctm-dn-um-se-ue))
1052
- );
1053
- }
1054
- .price {
1055
- color: var(
1056
- --_ctm-mob-dn-pt-pe-cr,
1057
- var(--_ctm-tab-dn-pt-pe-cr, var(--_ctm-dn-pt-pe-cr))
1058
- );
1059
- font-family: var(
1060
- --_ctm-mob-dn-pt-pe-ft-fy,
1061
- var(--_ctm-tab-dn-pt-pe-ft-fy, var(--_ctm-dn-pt-pe-ft-fy))
1062
- ),
1063
- sans-serif;
1064
- font-size: var(
1065
- --_ctm-mob-dn-pt-pe-ft-se,
1066
- var(--_ctm-tab-dn-pt-pe-ft-se, var(--_ctm-dn-pt-pe-ft-se))
1067
- );
1068
- font-weight: var(
1069
- --_ctm-mob-dn-pt-pe-ft-wt,
1070
- var(--_ctm-tab-dn-pt-pe-ft-wt, var(--_ctm-dn-pt-pe-ft-wt))
1071
- );
1072
- font-style: var(
1073
- --_ctm-mob-dn-pt-pe-ft-se-ic,
1074
- var(--_ctm-tab-dn-pt-pe-ft-se-ic, var(--_ctm-dn-pt-pe-ft-se-ic))
1075
- );
1076
- text-align: var(
1077
- --_ctm-mob-dn-pt-pe-tt-an,
1078
- var(--_ctm-tab-dn-pt-pe-tt-an, var(--_ctm-dn-pt-pe-tt-an))
1079
- );
1080
- letter-spacing: var(
1081
- --_ctm-mob-dn-pt-pe-lr-sg,
1082
- var(--_ctm-tab-dn-pt-pe-lr-sg, var(--_ctm-dn-pt-pe-lr-sg))
1083
- );
1084
- line-height: var(
1085
- --_ctm-mob-dn-pt-pe-le-ht,
1086
- var(--_ctm-tab-dn-pt-pe-le-ht, var(--_ctm-dn-pt-pe-le-ht))
1087
- );
1088
- text-decoration: var(
1089
- --_ctm-mob-dn-pt-pe-ue,
1090
- var(--_ctm-tab-dn-pt-pe-ue, var(--_ctm-dn-pt-pe-ue))
1091
- );
1092
- }
1093
- .off__price {
1094
- font-size: 12px;
1095
- display: flex;
1096
- justify-content: space-around;
1097
- gap: 10px;
1098
- align-items: center;
1099
- .saving__amount {
1100
- color: var(--_ctm-mob-dn-ss-cr, var(--_ctm-tab-dn-ss-cr, var(--_ctm-dn-ss-cr)));
896
+ .thead__row__divider {
897
+ height: var(--_ctm-mob-lt-hr-ht, var(--_ctm-tab-lt-hr-ht, var(--_ctm-lt-hr-ht)));
898
+
899
+ .th__col__divider {
900
+ padding: var(
901
+ --_ctm-mob-lt-hr-cl-pg,
902
+ var(--_ctm-tab-lt-hr-cl-pg, var(--_ctm-lt-hr-cl-pg))
903
+ );
904
+
905
+ color: var(
906
+ --_ctm-mob-dn-hr-tt-cr,
907
+ var(--_ctm-tab-dn-hr-tt-cr, var(--_ctm-dn-hr-tt-cr))
908
+ );
909
+
1101
910
  font-family: var(
1102
- --_ctm-mob-dn-ss-ft-fy,
1103
- var(--_ctm-tab-dn-ss-ft-fy, var(--_ctm-dn-ss-ft-fy))
911
+ --_ctm-mob-dn-hr-tt-ft-fy,
912
+ var(--_ctm-tab-dn-hr-tt-ft-fy, var(--_ctm-dn-hr-tt-ft-fy))
1104
913
  ),
1105
914
  sans-serif;
915
+
1106
916
  font-size: var(
1107
- --_ctm-mob-dn-ss-ft-se,
1108
- var(--_ctm-tab-dn-ss-ft-se, var(--_ctm-dn-ss-ft-se))
917
+ --_ctm-mob-dn-hr-tt-ft-se,
918
+ var(--_ctm-tab-dn-hr-tt-ft-se, var(--_ctm-dn-hr-tt-ft-se))
1109
919
  );
920
+
1110
921
  font-weight: var(
1111
- --_ctm-mob-dn-ss-ft-wt,
1112
- var(--_ctm-tab-dn-ss-ft-wt, var(--_ctm-dn-ss-ft-wt))
922
+ --_ctm-mob-dn-hr-tt-ft-wt,
923
+ var(--_ctm-tab-dn-hr-tt-ft-wt, var(--_ctm-dn-hr-tt-ft-wt))
924
+ );
925
+
926
+ text-decoration: var(
927
+ --_ctm-mob-dn-hr-tt-ue,
928
+ var(--_ctm-tab-dn-hr-tt-ue, var(--_ctm-dn-hr-tt-ue))
1113
929
  );
930
+
1114
931
  font-style: var(
1115
- --_ctm-mob-dn-ss-ft-se-ic,
1116
- var(--_ctm-tab-dn-ss-ft-se-ic, var(--_ctm-dn-ss-ft-se-ic))
932
+ --_ctm-mob-dn-hr-tt-ft-se-ic,
933
+ var(--_ctm-tab-dn-hr-tt-ft-se-ic, var(--_ctm-dn-hr-tt-ft-se-ic))
1117
934
  );
935
+
1118
936
  text-align: var(
1119
- --_ctm-mob-dn-ss-tt-an,
1120
- var(--_ctm-tab-dn-ss-tt-an, var(--_ctm-dn-ss-tt-an))
937
+ --_ctm-mob-dn-hr-tt-tt-an,
938
+ var(--_ctm-tab-dn-hr-tt-tt-an, var(--_ctm-dn-hr-tt-tt-an))
1121
939
  );
940
+
1122
941
  letter-spacing: var(
1123
- --_ctm-mob-dn-ss-lr-sg,
1124
- var(--_ctm-tab-dn-ss-lr-sg, var(--_ctm-dn-ss-lr-sg))
942
+ --_ctm-mob-dn-hr-tt-lr-sg,
943
+ var(--_ctm-tab-dn-hr-tt-lr-sg, var(--_ctm-dn-hr-tt-lr-sg))
1125
944
  );
945
+
1126
946
  line-height: var(
1127
- --_ctm-mob-dn-ss-le-ht,
1128
- var(--_ctm-tab-dn-ss-le-ht, var(--_ctm-dn-ss-le-ht))
1129
- );
1130
- text-decoration: var(
1131
- --_ctm-mob-dn-ss-ue,
1132
- var(--_ctm-tab-dn-ss-ue, var(--_ctm-dn-ss-ue))
947
+ --_ctm-mob-dn-hr-tt-le-ht,
948
+ var(--_ctm-tab-dn-hr-tt-le-ht, var(--_ctm-dn-hr-tt-le-ht))
1133
949
  );
1134
950
  }
1135
- .actual__price {
951
+ }
952
+ }
953
+ tbody {
954
+ .tbody__row__divider {
955
+ background-color: var(
956
+ --_ctm-mob-dn-te-rw-bd-cr,
957
+ var(--_ctm-tab-dn-te-rw-bd-cr, var(--_ctm-dn-te-rw-bd-cr))
958
+ );
959
+
960
+ height: var(--_ctm-mob-lt-rw-ht, var(--_ctm-tab-lt-rw-ht, var(--_ctm-lt-rw-ht)));
961
+
962
+ .td__col__divider {
963
+ padding: var(
964
+ --_ctm-mob-lt-rw-cl-pg,
965
+ var(--_ctm-tab-lt-rw-cl-pg, var(--_ctm-lt-rw-cl-pg))
966
+ );
967
+
1136
968
  color: var(
1137
- --_ctm-mob-dn-al-pe-cr,
1138
- var(--_ctm-tab-dn-al-pe-cr, var(--_ctm-dn-al-pe-cr))
969
+ --_sf-hr-fc,
970
+ var(
971
+ --_ctm-mob-dn-rw-tt-cr,
972
+ var(--_ctm-tab-dn-rw-tt-cr, var(--_ctm-dn-rw-tt-cr))
973
+ )
1139
974
  );
975
+
1140
976
  font-family: var(
1141
- --_ctm-mob-dn-al-pe-ft-fy,
1142
- var(--_ctm-tab-dn-al-pe-ft-fy, var(--_ctm-dn-al-pe-ft-fy))
977
+ --_sf-hr-ff,
978
+ var(
979
+ --_ctm-mob-dn-rw-tt-ft-fy,
980
+ var(--_ctm-tab-dn-rw-tt-ft-fy, var(--_ctm-dn-rw-tt-ft-fy))
981
+ )
1143
982
  ),
1144
983
  sans-serif;
984
+
1145
985
  font-size: var(
1146
- --_ctm-mob-dn-al-pe-ft-se,
1147
- var(--_ctm-tab-dn-al-pe-ft-se, var(--_ctm-dn-al-pe-ft-se))
986
+ --_sf-hr-fs,
987
+ var(
988
+ --_ctm-mob-dn-rw-tt-ft-se,
989
+ var(--_ctm-tab-dn-rw-tt-ft-se, var(--_ctm-dn-rw-tt-ft-se))
990
+ )
1148
991
  );
992
+
993
+ text-decoration: var(
994
+ --_ctm-mob-dn-rw-tt-ue,
995
+ var(--_ctm-tab-dn-rw-tt-ue, var(--_ctm-dn-rw-tt-ue))
996
+ );
997
+
1149
998
  font-weight: var(
1150
- --_ctm-mob-dn-al-pe-ft-wt,
1151
- var(--_ctm-tab-dn-al-pe-ft-wt, var(--_ctm-dn-al-pe-ft-wt))
999
+ --_sf-hr-fw,
1000
+ var(
1001
+ --_ctm-mob-dn-rw-tt-ft-wt,
1002
+ var(--_ctm-tab-dn-rw-tt-ft-wt, var(--_ctm-dn-rw-tt-ft-wt))
1003
+ )
1152
1004
  );
1005
+
1153
1006
  font-style: var(
1154
- --_ctm-mob-dn-al-pe-ft-se-ic,
1155
- var(--_ctm-tab-dn-al-pe-ft-se-ic, var(--_ctm-dn-al-pe-ft-se-ic))
1007
+ --_sf-hr-ft,
1008
+ var(
1009
+ --_ctm-mob-dn-rw-tt-ft-se-ic,
1010
+ var(--_ctm-tab-dn-rw-tt-ft-se-ic, var(--_ctm-dn-rw-tt-ft-se-ic))
1011
+ )
1156
1012
  );
1013
+
1157
1014
  text-align: var(
1158
- --_ctm-mob-dn-al-pe-tt-an,
1159
- var(--_ctm-tab-dn-al-pe-tt-an, var(--_ctm-dn-al-pe-tt-an))
1015
+ --_sf-hr-ta,
1016
+ var(
1017
+ --_ctm-mob-dn-rw-tt-tt-an,
1018
+ var(--_ctm-tab-dn-rw-tt-tt-an, var(--_ctm-dn-rw-tt-tt-an))
1019
+ )
1160
1020
  );
1021
+
1161
1022
  letter-spacing: var(
1162
- --_ctm-mob-dn-al-pe-lr-sg,
1163
- var(--_ctm-tab-dn-al-pe-lr-sg, var(--_ctm-dn-al-pe-lr-sg))
1023
+ --_sf-hr-ls,
1024
+ var(
1025
+ --_ctm-mob-dn-rw-tt-lr-sg,
1026
+ var(--_ctm-tab-dn-rw-tt-lr-sg, var(--_ctm-dn-rw-tt-lr-sg))
1027
+ )
1164
1028
  );
1029
+
1165
1030
  line-height: var(
1166
- --_ctm-mob-dn-al-pe-le-ht,
1167
- var(--_ctm-tab-dn-al-pe-le-ht, var(--_ctm-dn-al-pe-le-ht))
1168
- );
1169
- text-decoration: var(
1170
- --_ctm-mob-dn-al-pe-ue,
1171
- var(--_ctm-tab-dn-al-pe-ue, var(--_ctm-dn-al-pe-ue))
1031
+ --_sf-hr-lh,
1032
+ var(
1033
+ --_ctm-mob-dn-rw-tt-le-ht,
1034
+ var(--_ctm-tab-dn-rw-tt-le-ht, var(--_ctm-dn-rw-tt-le-ht))
1035
+ )
1172
1036
  );
1173
1037
  }
1174
1038
  }
1175
- .units {
1039
+ }
1040
+ }
1041
+
1042
+ .pagination {
1043
+ display: var(--_d-flex);
1044
+ align-items: var(--_align-center);
1045
+ justify-content: var(
1046
+ --_ctm-mob-lt-pn-at,
1047
+ var(--_ctm-tab-lt-pn-at, var(--_ctm-lt-pn-at))
1048
+ );
1049
+ margin-top: 10px;
1050
+ background-color: var(
1051
+ --_sf-bd-cr,
1052
+ var(
1053
+ --_ctm-mob-dn-pn-dt-se-bd-cr,
1054
+ var(--_ctm-tab-dn-pn-dt-se-bd-cr, var(--_ctm-dn-pn-dt-se-bd-cr))
1055
+ )
1056
+ );
1057
+ &.pagination__center {
1058
+ justify-content: var(justify-center);
1059
+ }
1060
+
1061
+ button {
1062
+ svg {
1063
+ width: var(--_width-18);
1064
+ height: var(--_height-18);
1065
+ path {
1066
+ stroke: var(--_gray-500);
1067
+ // stroke: var(--_ctm-dn-pn-in-c1, var(--_tst-dn-pn-in-c1));
1068
+ }
1069
+ }
1070
+ }
1071
+ span {
1072
+ float: left;
1073
+ padding: var(--_pd-8) var(--_pd-16);
1074
+ text-decoration: none;
1075
+ span {
1076
+ // color: var(--_sf-hr-fc, var(--_ctm-dn-pn-bn-cr, var(--_tst-dn-pn-bn-cr)));
1077
+ // font-size: var(--_sf-hr-fs, var(--_ctm-dn-pn-ft-se, var(--_tst-dn-pn-ft-se)));
1078
+ // font-family: var(--_sf-hr-ff, var(--_ctm-dn-pn-ft-fy, var(--_tst-dn-pn-ft-fy))),
1079
+ // sans-serif;
1080
+ // font-weight: var(--_sf-hr-fw, var(--_ctm-dn-pn-ft-wt, var(--_tst-dn-pn-ft-wt)));
1081
+ // font-style: var(--_sf-hr-ft, var(--_ctm-dn-pn-ft-se-ic, var(--_tst-dn-pn-ft-se-ic)));
1082
+ // text-align: var(--_sf-hr-ta, var(--_ctm-dn-pn-tt-an, var(--_tst-dn-pn-tt-an)));
1083
+ // letter-spacing: var(--_sf-hr-ls, var(--_ctm-dn-pn-lr-sg, var(--_tst-dn-pn-lr-sg)));
1084
+ // line-height: var(--_sf-hr-lh, var(--_ctm-dn-pn-le-ht, var(--_tst-dn-pn-le-ht)));
1085
+ }
1086
+ &.active:hover {
1087
+ &hover {
1088
+ --_sf-hr-fc: var(--_ctm-dn-pn-hr-se-cr, var(--_tst-dn-pn-hr-se-cr));
1089
+ --_sf-hr-ff: var(--_ctm-dn-pn-hr-se-ft-fy, var(--_tst-dn-pn-hr-se-ft-fy));
1090
+ --_sf-hr-fs: var(--_ctm-dn-pn-hr-se-ft-se, var(--_tst-dn-pn-hr-se-ft-se));
1091
+ --_sf-hr-fw: var(--_ctm-dn-pn-hr-se-ft-wt, var(--_tst-dn-pn-hr-se-ft-wt));
1092
+ --_sf-hr-ft: var(--_ctm-dn-pn-hr-se-ft-se-ic, var(--_tst-dn-pn-hr-se-ft-se-ic));
1093
+ --_sf-hr-ta: var(--_ctm-dn-pn-hr-se-tt-an, var(--_tst-dn-pn-hr-se-tt-an));
1094
+ --_sf-hr-ls: var(--_ctm-dn-pn-hr-se-lr-sg, var(--_tst-dn-pn-hr-se-lr-sg));
1095
+ --_sf-hr-lh: var(--_ctm-dn-pn-hr-se-le-ht, var(--_tst-dn-pn-hr-se-le-ht));
1096
+ }
1097
+ }
1098
+ &.active {
1176
1099
  color: var(
1177
- --_ctm-mob-dn-pe-pr-ut-cr,
1178
- var(--_ctm-tab-dn-pe-pr-ut-cr, var(--_ctm-dn-pe-pr-ut-cr))
1100
+ --_sf-hr-fc,
1101
+ var(
1102
+ --_ctm-mob-dn-pn-dt-se-cr,
1103
+ var(--_ctm-tab-dn-pn-dt-se-cr, var(--_ctm-dn-pn-dt-se-cr))
1104
+ )
1179
1105
  );
1106
+
1180
1107
  font-family: var(
1181
- --_ctm-mob-dn-pe-pr-ut-ft-fy,
1182
- var(--_ctm-tab-dn-pe-pr-ut-ft-fy, var(--_ctm-dn-pe-pr-ut-ft-fy))
1108
+ --_sf-hr-ff,
1109
+ var(
1110
+ --_ctm-mob-dn-pn-dt-se-ft-fy,
1111
+ var(--_ctm-tab-dn-pn-dt-se-ft-fy, var(--_ctm-dn-pn-dt-se-ft-fy))
1112
+ )
1183
1113
  ),
1184
1114
  sans-serif;
1115
+
1185
1116
  font-size: var(
1186
- --_ctm-mob-dn-pe-pr-ut-ft-se,
1187
- var(--_ctm-tab-dn-pe-pr-ut-ft-se, var(--_ctm-dn-pe-pr-ut-ft-se))
1117
+ --_sf-hr-fs,
1118
+ var(
1119
+ --_ctm-mob-dn-pn-dt-se-ft-se,
1120
+ var(--_ctm-tab-dn-pn-dt-se-ft-se, var(--_ctm-dn-pn-dt-se-ft-se))
1121
+ )
1188
1122
  );
1123
+
1124
+ text-decoration: var(
1125
+ --_sf-hr-td,
1126
+ var(
1127
+ --_ctm-mob-dn-pn-dt-se-ue,
1128
+ var(--_ctm-tab-dn-pn-dt-se-ue, var(--_ctm-dn-pn-dt-se-ue))
1129
+ )
1130
+ );
1131
+
1189
1132
  font-weight: var(
1190
- --_ctm-mob-dn-pe-pr-ut-ft-wt,
1191
- var(--_ctm-tab-dn-pe-pr-ut-ft-wt, var(--_ctm-dn-pe-pr-ut-ft-wt))
1133
+ --_sf-hr-fw,
1134
+ var(
1135
+ --_ctm-mob-dn-pn-dt-se-ft-wt,
1136
+ var(--_ctm-tab-dn-pn-dt-se-ft-wt, var(--_ctm-dn-pn-dt-se-ft-wt))
1137
+ )
1192
1138
  );
1139
+
1193
1140
  font-style: var(
1194
- --_ctm-mob-dn-pe-pr-ut-ft-se-ic,
1195
- var(--_ctm-tab-dn-pe-pr-ut-ft-se-ic, var(--_ctm-dn-pe-pr-ut-ft-se-ic))
1141
+ --_sf-hr-ft,
1142
+ var(
1143
+ --_ctm-mob-dn-pn-dt-se-ft-se-ic,
1144
+ var(--_ctm-tab-dn-pn-dt-se-ft-se-ic, var(--_ctm-dn-pn-dt-se-ft-se-ic))
1145
+ )
1196
1146
  );
1147
+
1197
1148
  text-align: var(
1198
- --_ctm-mob-dn-pe-pr-ut-tt-an,
1199
- var(--_ctm-tab-dn-pe-pr-ut-tt-an, var(--_ctm-dn-pe-pr-ut-tt-an))
1149
+ --_sf-hr-ta,
1150
+ var(
1151
+ --_ctm-mob-dn-pn-dt-se-tt-an,
1152
+ var(--_ctm-tab-dn-pn-dt-se-tt-an, var(--_ctm-dn-pn-dt-se-tt-an))
1153
+ )
1200
1154
  );
1155
+
1201
1156
  letter-spacing: var(
1202
- --_ctm-mob-dn-pe-pr-ut-lr-sg,
1203
- var(--_ctm-tab-dn-pe-pr-ut-lr-sg, var(--_ctm-dn-pe-pr-ut-lr-sg))
1157
+ --_sf-hr-ls,
1158
+ var(
1159
+ --_ctm-mob-dn-pn-dt-se-lr-sg,
1160
+ var(--_ctm-tab-dn-pn-dt-se-lr-sg, var(--_ctm-dn-pn-dt-se-lr-sg))
1161
+ )
1204
1162
  );
1163
+
1205
1164
  line-height: var(
1206
- --_ctm-mob-dn-pe-pr-ut-le-ht,
1207
- var(--_ctm-tab-dn-pe-pr-ut-le-ht, var(--_ctm-dn-pe-pr-ut-le-ht))
1208
- );
1209
- text-decoration: var(
1210
- --_ctm-mob-dn-pe-pr-ut-ue,
1211
- var(--_ctm-tab-dn-pe-pr-ut-ue, var(--_ctm-dn-pe-pr-ut-ue))
1165
+ --_sf-hr-lh,
1166
+ var(
1167
+ --_ctm-mob-dn-pn-dt-se-le-ht,
1168
+ var(--_ctm-tab-dn-pn-dt-se-le-ht, var(--_ctm-dn-pn-dt-se-le-ht))
1169
+ )
1212
1170
  );
1213
1171
  }
1214
1172
  }
1215
- }
1216
- }
1217
- .table-content {
1218
- border-collapse: collapse;
1219
- background-color: var(
1220
- --_ctm-mob-dn-te-bd-cr,
1221
- var(--_ctm-tab-dn-te-bd-cr, var(--_ctm-dn-te-bd-cr))
1222
- );
1223
- border-color: var(
1224
- --_show-border-im-se,
1225
- var(--_ctm-mob-dn-te-br-cr, var(--_ctm-tab-dn-te-br-cr, var(--_ctm-dn-te-br-cr))),
1226
- var(--_tst-dn-br-cr)
1227
- );
1228
- border-style: var(
1229
- --_show-border-im-se,
1230
- var(--_ctm-mob-dn-te-br-se, var(--_ctm-tab-dn-te-br-se, var(--_ctm-dn-te-br-se))),
1231
- var(--_tst-dn-br-se)
1232
- );
1233
- border-width: var(
1234
- --_show-border-im-se,
1235
- var(--_ctm-mob-dn-te-br-wh, var(--_ctm-tab-dn-te-br-wh, var(--_ctm-dn-te-br-wh))),
1236
- var(--_tst-dn-br-wh)
1237
- );
1238
- border-radius: var(
1239
- --_ctm-mob-dn-te-br-rs,
1240
- var(--_ctm-tab-dn-te-br-rs, var(--_ctm-dn-te-br-rs)),
1241
- var(--_tst-dn-br-rs)
1242
- );
1243
- box-shadow: var(
1244
- --_show-shadow-im-se,
1245
- var(
1246
- --_ctm-mob-dn-te-sw-ae,
1247
- var(--_ctm-tab-dn-te-sw-ae, var(--_ctm-dn-te-sw-ae, var(--_tst-dn-sw-ae)))
1248
- )
1249
- var(
1250
- --_ctm-mob-dn-te-sw-br,
1251
- var(--_ctm-tab-dn-te-sw-br, var(--_ctm-dn-te-sw-br, var(--_tst-dn-sw-br)))
1252
- )
1253
- var(
1254
- --_ctm-mob-dn-te-sw-sd,
1255
- var(--_ctm-tab-dn-te-sw-sd, var(--_ctm-dn-te-sw-sd, var(--_tst-dn-sw-sd)))
1256
- )
1257
- var(
1258
- --_ctm-mob-dn-te-sw-cr,
1259
- var(--_ctm-tab-dn-te-sw-cr, var(--_ctm-dn-te-sw-cr, var(--_tst-dn-sw-cr)))
1260
- )
1261
- );
1262
- &[data-header-divider="true"] {
1263
- thead tr th {
1264
- border-bottom: 1px solid var(--_ctm-dn-rw-ds-hr-dr);
1265
- }
1266
- }
1267
- &[data-row-divider="true"] {
1268
- tbody tr td {
1269
- border-bottom: 1px solid var(--_ctm-dn-rw-ds-rw-dr);
1270
- }
1271
- }
1272
- &[data-column-divider="true"] {
1273
- tbody tr td,
1274
- thead tr th {
1275
- border-right: 1px solid var(--_ctm-dn-rw-ds-cn-dr);
1276
- }
1173
+ .pagination__arrows {
1174
+ color: var(
1175
+ --_sf-hr-fc,
1176
+ var(--_ctm-mob-dn-pn-in-c1, var(--_ctm-tab-dn-pn-in-c1, var(--_ctm-dn-pn-in-c1)))
1177
+ );
1277
1178
 
1278
- tbody tr td:last-child,
1279
- thead tr th:last-child {
1280
- border-right: none;
1281
- }
1282
- }
1283
- &[data-alternative-row-colors="true"] {
1284
- tbody tr:nth-child(odd) {
1285
- background-color: var(--_gray-300);
1286
- width: 100%;
1287
- }
1288
- }
1289
- thead {
1290
- height: var(--_ctm-lt-hr-ht);
1291
- tr {
1292
- th {
1293
- padding: var(--_ctm-lt-hr-cl-pg);
1294
- text-align: var(--_ctm-lt-ct-at, var(--_ctm-dn-hr-tt-tt-an));
1295
- border: 0;
1296
- background-color: var(--_ctm-dn-te-hr-bd-cr);
1297
- color: var(--_ctm-dn-hr-tt-cr);
1298
- font-family: var(--_ctm-dn-hr-tt-ft-fy), sans-serif;
1299
- font-size: var(--_ctm-dn-hr-tt-ft-se);
1300
- font-weight: var(--_ctm-dn-hr-tt-ft-wt);
1301
- font-style: var(--_ctm-dn-hr-tt-ft-se-ic);
1302
- letter-spacing: var(--_ctm-dn-hr-tt-lr-sg);
1303
- line-height: var(--_ctm-dn-hr-tt-le-ht);
1304
- text-decoration: var(--_ctm-dn-hr-tt-ue);
1305
- }
1306
- }
1307
- }
1308
- tbody {
1309
- tr {
1310
- padding: var(--_ctm-lt-rw-cl-pg);
1311
- height: var(--_ctm-lt-rw-ht);
1312
- background-color: var(--_ctm-dn-te-rw-bd-cr);
1313
- text-align: var(--_ctm-lt-ct-at);
1314
- th,
1315
- td {
1316
- border: 0;
1317
- padding: inherit;
1318
- color: var(--_ctm-dn-te-rw-cr);
1319
- font-family: var(--_ctm-dn-te-rw-ft-fy), sans-serif;
1320
- font-size: var(--_ctm-dn-te-rw-ft-se);
1321
- font-weight: var(--_ctm-dn-te-rw-ft-wt);
1322
- font-style: var(--_ctm-dn-te-rw-ft-se-ic);
1323
- text-align: var(--_ctm-dn-te-rw-tt-an);
1324
- letter-spacing: var(--_ctm-dn-te-rw-lr-sg);
1325
- line-height: var(--_ctm-dn-te-rw-le-ht);
1326
- text-decoration: var(--_ctm-dn-te-rw-ue);
1327
- }
1328
- }
1329
- }
1330
- }
1331
- .pagination_container {
1332
- display: flex;
1333
- justify-content: center;
1334
- align-items: center;
1335
- gap: 10px;
1336
- button {
1337
- font-size: 16px;
1338
- // padding: 10px 20px;
1339
- // background-color: #000;
1340
- color: #fff;
1341
- border: none;
1342
- cursor: pointer;
1343
- // border-radius: 10px;
1344
- }
1345
- span {
1346
- cursor: pointer;
1347
- color: var(
1348
- --_ctm-mob-dn-pn-dt-se-cr,
1349
- var(--_ctm-tab-dn-pn-dt-se-cr, var(--_ctm-dn-pn-dt-se-cr))
1350
- );
1351
- font-family: var(
1352
- --_ctm-mob-dn-pn-dt-se-ft-fy,
1353
- var(--_ctm-tab-dn-pn-dt-se-ft-fy, var(--_ctm-dn-pn-dt-se-ft-fy))
1354
- ),
1355
- sans-serif;
1356
- font-size: var(
1357
- --_ctm-mob-dn-pn-dt-se-ft-se,
1358
- var(--_ctm-tab-dn-pn-dt-se-ft-se, var(--_ctm-dn-pn-dt-se-ft-se))
1359
- );
1360
- font-weight: var(
1361
- --_ctm-mob-dn-pn-dt-se-ft-wt,
1362
- var(--_ctm-tab-dn-pn-dt-se-ft-wt, var(--_ctm-dn-pn-dt-se-ft-wt))
1363
- );
1364
- font-style: var(
1365
- --_ctm-mob-dn-pn-dt-se-ft-se-ic,
1366
- var(--_ctm-tab-dn-pn-dt-se-ft-se-ic, var(--_ctm-dn-pn-dt-se-ft-se-ic))
1367
- );
1368
- text-align: var(
1369
- --_ctm-mob-dn-pn-dt-se-tt-an,
1370
- var(--_ctm-tab-dn-pn-dt-se-tt-an, var(--_ctm-dn-pn-dt-se-tt-an))
1371
- );
1372
- letter-spacing: var(
1373
- --_ctm-mob-dn-pn-dt-se-lr-sg,
1374
- var(--_ctm-tab-dn-pn-dt-se-lr-sg, var(--_ctm-dn-pn-dt-se-lr-sg))
1375
- );
1376
- line-height: var(
1377
- --_ctm-mob-dn-pn-dt-se-le-ht,
1378
- var(--_ctm-tab-dn-pn-dt-se-le-ht, var(--_ctm-dn-pn-dt-se-le-ht))
1379
- );
1380
- text-decoration: var(
1381
- --_ctm-mob-dn-pn-dt-se-ue,
1382
- var(--_ctm-tab-dn-pn-dt-se-ue, var(--_ctm-dn-pn-dt-se-ue))
1383
- );
1384
- }
1385
- .active {
1386
- span {
1387
- background-color: var(--_ctm-dn-pn-dt-se-bd-cr);
1388
- padding: 2px;
1179
+ font-size: var(
1180
+ --_sf-hr-fs,
1181
+ var(--_ctm-mob-dn-pn-in-se, var(--_ctm-tab-dn-pn-in-se, var(--_ctm-dn-pn-in-se)))
1182
+ );
1389
1183
  }
1390
1184
  }
1391
1185
  }
1392
- .loadmore_conatiner {
1393
- display: flex;
1394
- justify-content: center;
1395
- align-items: center;
1396
- gap: 10px;
1397
- margin-top: 10px;
1398
- button {
1399
- padding: 10px;
1400
- cursor: pointer;
1401
- color: var(
1402
- --_ctm-mob-dn-sw-me-is-bn-cr,
1403
- var(--_ctm-tab-dn-sw-me-is-bn-cr, var(--_ctm-dn-sw-me-is-bn-cr))
1404
- );
1405
- font-family: var(
1406
- --_ctm-mob-dn-sw-me-is-bn-ft-fy,
1407
- var(--_ctm-tab-dn-sw-me-is-bn-ft-fy, var(--_ctm-dn-sw-me-is-bn-ft-fy))
1408
- ),
1409
- sans-serif;
1410
- font-size: var(
1411
- --_ctm-mob-dn-sw-me-is-bn-ft-se,
1412
- var(--_ctm-tab-dn-sw-me-is-bn-ft-se, var(--_ctm-dn-sw-me-is-bn-ft-se))
1413
- );
1414
- font-weight: var(
1415
- --_ctm-mob-dn-sw-me-is-bn-ft-wt,
1416
- var(--_ctm-tab-dn-sw-me-is-bn-ft-wt, var(--_ctm-dn-sw-me-is-bn-ft-wt))
1417
- );
1418
- font-style: var(
1419
- --_ctm-mob-dn-sw-me-is-bn-ft-se-ic,
1420
- var(--_ctm-tab-dn-sw-me-is-bn-ft-se-ic, var(--_ctm-dn-sw-me-is-bn-ft-se-ic))
1421
- );
1422
- text-align: var(
1423
- --_ctm-mob-dn-sw-me-is-bn-tt-an,
1424
- var(--_ctm-tab-dn-sw-me-is-bn-tt-an, var(--_ctm-dn-sw-me-is-bn-tt-an))
1425
- );
1426
- letter-spacing: var(
1427
- --_ctm-mob-dn-sw-me-is-bn-lr-sg,
1428
- var(--_ctm-tab-dn-sw-me-is-bn-lr-sg, var(--_ctm-dn-sw-me-is-bn-lr-sg))
1429
- );
1430
- line-height: var(
1431
- --_ctm-mob-dn-sw-me-is-bn-le-ht,
1432
- var(--_ctm-tab-dn-sw-me-is-bn-le-ht, var(--_ctm-dn-sw-me-is-bn-le-ht))
1433
- );
1434
- text-decoration: var(
1435
- --_ctm-mob-dn-sw-me-is-bn-ue,
1436
- var(--_ctm-tab-dn-sw-me-is-bn-ue, var(--_ctm-dn-sw-me-is-bn-ue))
1437
- );
1438
- background-color: var(
1439
- --_ctm-mob-dn-sw-me-is-bn-bd-cr,
1440
- var(--_ctm-tab-dn-sw-me-is-bn-bd-cr, var(--_ctm-dn-sw-me-is-bn-bd-cr))
1441
- );
1442
- border-color: var(
1443
- --_show-border-im-se,
1444
- var(
1445
- --_ctm-mob-dn-sw-me-is-bn-br-cr,
1446
- var(--_ctm-tab-dn-sw-me-is-bn-br-cr, var(--_ctm-dn-sw-me-is-bn-br-cr))
1447
- )
1448
- );
1449
- border-style: var(
1450
- --_show-border-im-se,
1451
- var(
1452
- --_ctm-mob-dn-sw-me-is-bn-br-se,
1453
- var(--_ctm-tab-dn-sw-me-is-bn-br-se, var(--_ctm-dn-sw-me-is-bn-br-se))
1454
- )
1455
- );
1456
- border-width: var(
1457
- --_show-border-im-se,
1458
- var(
1459
- --_ctm-mob-dn-sw-me-is-bn-br-wh,
1460
- var(--_ctm-tab-dn-sw-me-is-bn-br-wh, var(--_ctm-dn-sw-me-is-bn-br-wh))
1461
- )
1462
- );
1463
- border-radius: var(
1464
- --_ctm-mob-dn-sw-me-is-bn-br-rs,
1465
- var(--_ctm-tab-dn-sw-me-is-bn-br-rs, var(--_ctm-dn-sw-me-is-bn-br-rs))
1466
- );
1467
- box-shadow: var(
1468
- --_show-shadow-im-se,
1469
- var(
1470
- --_ctm-mob-dn-sw-me-is-bn-sw-ae,
1471
- var(--_ctm-tab-dn-sw-me-is-bn-sw-ae, var(--_ctm-dn-sw-me-is-bn-sw-ae))
1472
- )
1473
- var(
1474
- --_ctm-mob-dn-sw-me-is-bn-sw-br,
1475
- var(--_ctm-tab-dn-sw-me-is-bn-sw-br, var(--_ctm-dn-sw-me-is-bn-sw-br))
1476
- )
1477
- var(
1478
- --_ctm-mob-dn-sw-me-is-bn-sw-sd,
1479
- var(--_ctm-tab-dn-sw-me-is-bn-sw-sd, var(--_ctm-dn-sw-me-is-bn-sw-sd))
1480
- )
1481
- var(
1482
- --_ctm-mob-dn-sw-me-is-bn-sw-cr,
1483
- var(--_ctm-tab-dn-sw-me-is-bn-sw-cr, var(--_ctm-dn-sw-me-is-bn-sw-cr))
1484
- )
1485
- );
1486
- }
1487
- }
1488
1186
  }
1489
1187
  }
1490
1188
  }