PluginProbe
Elementor Website Builder – more than just a page builder / 3.13.3
Elementor Website Builder – more than just a page builder v3.13.3
4.3.0-beta2 4.3.0-beta1 4.2.4 4.2.3 4.2.2 4.2.1 4.2.0 4.1.5 4.2.0-beta2 4.2.0-dev2 4.2.0-beta1 4.1.4 4.1.3 4.1.2 4.1.1 4.1.0 4.1.0-beta3 4.1.0-dev3 4.0.9 4.1.0-beta2 4.1.0-dev2 4.0.8 4.1.0-beta1 4.1.0-dev1 4.0.7 All 451 releases
← All changes | assets/css/app.css +876 -711 4.2.0 → 3.13.3 View file →
@@ -1,5 +1,8 @@
1 +/*! elementor - v3.13.3 - 22-05-2023 */
1 2 @import "//fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap";
3 +@import "//fonts.googleapis.com/css2?family=DM%20Sans&display=swap";
4 +@import "//fonts.googleapis.com/css2?family=Source%20Serif%20Pro&display=swap";
2 5 :root {
3 6 --color-box-shadow-color: rgba(0, 0, 0, 0.05);
4 7 }
5 8
@@ -118,30 +121,30 @@
118 121 --button-primary-hover-background-color: #F5D0FE;
119 122 --button-primary-active-background-color: #F3BAFD;
120 123 --button-primary-color: #0C0D0E;
121 124 --button-secondary-background-color: #69727D;
122 - --button-secondary-hover-background-color: rgb(81.7173913043, 88.7217391304, 97.2826086957);
123 - --button-secondary-active-background-color: rgb(58.4347826087, 63.4434782609, 69.5652173913);
125 + --button-secondary-hover-background-color: #525961;
126 + --button-secondary-active-background-color: #3a3f46;
124 127 --button-secondary-color: #ffffff;
125 128 --button-danger-background-color: #DC2626;
126 - --button-danger-hover-background-color: rgb(178.25, 28.75, 28.75);
127 - --button-danger-active-background-color: rgb(134.3333333333, 21.6666666667, 21.6666666667);
129 + --button-danger-hover-background-color: #b21d1d;
130 + --button-danger-active-background-color: #861616;
128 131 --button-danger-color: #ffffff;
129 - --button-cta-background-color: #93003f;
130 - --button-cta-hover-background-color: rgb(96, 0, 41.1428571429);
131 - --button-cta-active-background-color: rgb(45, 0, 19.2857142857);
132 + --button-cta-background-color: #524CFF;
133 + --button-cta-hover-background-color: #2119ff;
134 + --button-cta-active-background-color: #0800e5;
132 135 --button-cta-color: #ffffff;
133 - --button-brand-background-color: #93003f;
134 - --button-brand-hover-background-color: rgb(96, 0, 41.1428571429);
135 - --button-brand-active-background-color: rgb(45, 0, 19.2857142857);
136 + --button-brand-background-color: #524CFF;
137 + --button-brand-hover-background-color: #2119ff;
138 + --button-brand-active-background-color: #0800e5;
136 139 --button-brand-color: #ffffff;
137 140 --button-link-background-color: #515962;
138 - --button-link-hover-background-color: rgb(57.9217877095, 63.6424581006, 70.0782122905);
139 - --button-link-active-background-color: rgb(34.843575419, 38.2849162011, 42.156424581);
141 + --button-link-hover-background-color: #3a4046;
142 + --button-link-active-background-color: #23262a;
140 143 --button-link-color: #ffffff;
141 144 --button-disabled-background-color: #D5D8DC;
142 - --button-disabled-hover-background-color: rgb(185.1818181818, 190.1688311688, 196.8181818182);
143 - --button-disabled-active-background-color: rgb(157.3636363636, 164.3376623377, 173.6363636364);
145 + --button-disabled-hover-background-color: #b9bec5;
146 + --button-disabled-active-background-color: #9da4ae;
144 147 --button-disabled-color: #ffffff;
145 148 color: var(--button-background-color, currentColor);
146 149 font-size: var(--button-font-size, inherit);
147 150 font-weight: 500;
@@ -161,25 +164,25 @@
161 164 --button-primary-hover-background-color: #EB8EFB;
162 165 --button-primary-active-background-color: #F3BAFD;
163 166 --button-secondary-background-color: #BABFC5;
164 167 --button-secondary-color: #fff;
165 - --button-secondary-hover-background-color: rgb(158.2913385827, 165.2992125984, 173.7086614173);
166 - --button-secondary-active-background-color: rgb(130.5826771654, 139.5984251969, 150.4173228346);
167 - --button-cta-background-color: #93003f;
168 - --button-cta-hover-background-color: rgb(96, 0, 41.1428571429);
169 - --button-cta-active-background-color: rgb(45, 0, 19.2857142857);
168 + --button-secondary-hover-background-color: #9ea5ae;
169 + --button-secondary-active-background-color: #838c96;
170 + --button-cta-background-color: #524CFF;
171 + --button-cta-hover-background-color: #2119ff;
172 + --button-cta-active-background-color: #0800e5;
170 173 --button-cta-color: #fff;
171 - --button-brand-hover-background-color: rgb(96, 0, 41.1428571429);
172 - --button-brand-active-background-color: rgb(45, 0, 19.2857142857);
174 + --button-brand-hover-background-color: #2119ff;
175 + --button-brand-active-background-color: #0800e5;
173 176 --button-brand-color: #fff;
174 - --button-brand-background-color: #93003f;
177 + --button-brand-background-color: #524CFF;
175 178 --button-link-background-color: #515962;
176 - --button-link-hover-background-color: rgb(57.9217877095, 63.6424581006, 70.0782122905);
177 - --button-link-active-background-color: rgb(34.843575419, 38.2849162011, 42.156424581);
179 + --button-link-hover-background-color: #3a4046;
180 + --button-link-active-background-color: #23262a;
178 181 --button-link-color: #ffffff;
179 182 --button-disabled-background-color: #69727D;
180 - --button-disabled-hover-background-color: rgb(81.7173913043, 88.7217391304, 97.2826086957);
181 - --button-disabled-active-background-color: rgb(58.4347826087, 63.4434782609, 69.5652173913);
183 + --button-disabled-hover-background-color: #525961;
184 + --button-disabled-active-background-color: #3a3f46;
182 185 --button-disabled-color: #fff;
183 186 }
184 187 .eps-button--contained {
185 188 color: var(--button-color);
@@ -283,12 +286,12 @@
283 286 --text-muted: #BABFC5;
284 287 --disabled: #D5D8DC;
285 288 --light: #ffffff;
286 289 --dark: #000000;
287 - --cta: #93003f;
288 - --brand: #93003f;
290 + --cta: #524CFF;
291 + --brand: #524CFF;
289 292 --accent: #F3BAFD;
290 - --primary: #93003f;
293 + --primary: #524CFF;
291 294 --primary-bg: #FAE8FF;
292 295 --secondary: #515962;
293 296 --info: #2563EB;
294 297 --info-bg: #F0F7FF;
@@ -300,9 +303,9 @@
300 303 --warning-bg: #FFFBEB;
301 304 --body-color: #515962;
302 305 --body-bg: #ffffff;
303 306 --link-color: #515962;
304 - --link-hover-color: rgb(46.3826815642, 50.9636871508, 56.1173184358);
307 + --link-hover-color: #2e3338;
305 308 --hr-color: #E6E8EA;
306 309 --box-shadow-color: theme-colors(dark);
307 310 --display-1-color: #515962;
308 311 --display-2-color: #515962;
@@ -341,10 +344,10 @@
341 344 --disabled: #69727D;
342 345 --light: #fff;
343 346 --dark: #000;
344 347 --accent: #524CFF;
345 - --cta: #93003f;
346 - --brand: #93003f;
348 + --cta: #524CFF;
349 + --brand: #524CFF;
347 350 --success: #39b54a;
348 351 --success-bg: #032317;
349 352 --info: #0077CC;
350 353 --info-bg: #0A1A3D;
@@ -354,9 +357,9 @@
354 357 --danger-bg: #390A0A;
355 358 --body-color: #BABFC5;
356 359 --body-bg: #1f2124;
357 360 --link-color: #0077CC;
358 - --link-hover-color: rgb(46.3826815642, 50.9636871508, 56.1173184358);
361 + --link-hover-color: #2e3338;
359 362 --hr-color: #333438;
360 363 --box-shadow-color: rgba(0, 0, 0, 0.15);
361 364 --display-1-color: #BABFC5;
362 365 --display-2-color: #BABFC5;
@@ -429,9 +432,9 @@
429 432 font-weight: normal;
430 433 }
431 434
432 435 p {
433 - margin-block-start: 0;
436 + margin-top: 0;
434 437 }
435 438
436 439 b,
437 440 strong {
@@ -489,9 +492,9 @@
489 492 button {
490 493 border-radius: 0;
491 494 }
492 495
493 -button:focus:not(:where([data-module=onboarding] *)) {
496 +button:focus {
494 497 outline: 1px dotted;
495 498 outline: 5px auto -webkit-focus-ring-color;
496 499 }
497 500
@@ -556,37 +559,37 @@
556 559 }
557 560
558 561 hr {
559 562 border: 0 none;
560 - border-block-end: 1px solid var(--hr-color);
563 + border-bottom: 1px solid var(--hr-color);
561 564 }
562 565
563 566 .eps-display-1 {
564 567 font-size: 1.85rem;
565 568 color: var(--display-1-color);
566 - margin-block-start: 0.5rem;
567 - margin-block-end: 0.5rem;
569 + margin-top: 0.5rem;
570 + margin-bottom: 0.5rem;
568 571 }
569 572
570 573 .eps-display-2 {
571 574 font-size: 1.85rem;
572 575 color: var(--display-2-color);
573 - margin-block-start: 0.5rem;
574 - margin-block-end: 0.5rem;
576 + margin-top: 0.5rem;
577 + margin-bottom: 0.5rem;
575 578 }
576 579
577 580 .eps-display-3 {
578 581 font-size: 1.85rem;
579 582 color: var(--display-3-color);
580 - margin-block-start: 0;
581 - margin-block-end: 1.25rem;
583 + margin-top: 0;
584 + margin-bottom: 1.25rem;
582 585 }
583 586
584 587 .eps-display-4 {
585 588 font-size: 1.85rem;
586 589 color: var(--display-4-color);
587 - margin-block-start: 0.5rem;
588 - margin-block-end: 0.5rem;
590 + margin-top: 0.5rem;
591 + margin-bottom: 0.5rem;
589 592 }
590 593
591 594 h1,
592 595 .eps-h1 {
@@ -592,9 +595,9 @@
592 595 .eps-h1 {
593 596 font-size: 1.625rem;
594 597 line-height: 1;
595 598 color: var(--h1-color);
596 - margin-block-end: 1.25rem;
599 + margin-bottom: 1.25rem;
597 600 font-weight: 500;
598 601 }
599 602
600 603 h2,
@@ -601,10 +604,10 @@
601 604 .eps-h2 {
602 605 font-size: 1.25rem;
603 606 line-height: 1.2;
604 607 color: var(--h2-color);
605 - margin-block-start: 0;
606 - margin-block-end: 1.25rem;
608 + margin-top: 0;
609 + margin-bottom: 1.25rem;
607 610 font-weight: 500;
608 611 }
609 612
610 613 h3,
@@ -611,10 +614,10 @@
611 614 .eps-h3 {
612 615 font-size: 1rem;
613 616 line-height: 1.2;
614 617 color: var(--h3-color);
615 - margin-block-start: 0;
616 - margin-block-end: 0.5rem;
618 + margin-top: 0;
619 + margin-bottom: 0.5rem;
617 620 font-weight: 500;
618 621 }
619 622
620 623 h4,
@@ -620,10 +623,10 @@
620 623 h4,
621 624 .eps-h4 {
622 625 font-size: 0.9375rem;
623 626 color: var(--h4-color);
624 - margin-block-start: 0;
625 - margin-block-end: 0.5rem;
627 + margin-top: 0;
628 + margin-bottom: 0.5rem;
626 629 }
627 630
628 631 h5,
629 632 .eps-h5 {
@@ -628,10 +631,10 @@
628 631 h5,
629 632 .eps-h5 {
630 633 font-size: 0.875rem;
631 634 color: var(--h5-color);
632 - margin-block-start: 0;
633 - margin-block-end: 0.5rem;
635 + margin-top: 0;
636 + margin-bottom: 0.5rem;
634 637 }
635 638
636 639 h6,
637 640 .eps-h6 {
@@ -636,10 +639,10 @@
636 639 h6,
637 640 .eps-h6 {
638 641 font-size: 0.875rem;
639 642 color: var(--h-6-color);
640 - margin-block-start: 0;
641 - margin-block-end: 0.5rem;
643 + margin-top: 0;
644 + margin-bottom: 0.5rem;
642 645 font-weight: 700;
643 646 }
644 647
645 648 .eps-text-xxs {
@@ -685,21 +688,21 @@
685 688 }
686 689
687 690 .video-wrapper {
688 691 position: relative;
689 - padding-block-end: 56.25%;
692 + padding-bottom: 56.25%;
690 693 height: 0;
691 694 }
692 695 .video-wrapper iframe {
693 696 position: absolute;
694 - inset-block-start: 0;
695 - inset-inline-start: 0;
697 + top: 0;
698 + left: 0;
696 699 width: 100%;
697 700 height: 100%;
698 701 }
699 702
700 703 .eps-separator {
701 - margin-block-end: 2.75rem;
704 + margin-bottom: 2.75rem;
702 705 }
703 706
704 707 .eps-theme-dark {
705 708 --e-app-back-button-color: #BABFC5;
@@ -706,12 +709,13 @@
706 709 }
707 710
708 711 .back-button, .e-app-back-button {
709 712 --button-background-color: var(--e-app-back-button-color, #69727D);
710 - margin-block-end: 1.5rem;
713 + margin-bottom: 1.5rem;
711 714 }
712 715 .back-button .eps-icon, .e-app-back-button .eps-icon {
713 - margin-inline-end: 0.3125rem;
716 + -webkit-margin-end: 0.3125rem;
717 + margin-inline-end: 0.3125rem;
714 718 }
715 719
716 720 .eps-theme-dark {
717 721 --input-border-color: --hr-color;
@@ -749,22 +753,21 @@
749 753 justify-content: center;
750 754 position: fixed;
751 755 height: 100%;
752 756 width: 100%;
753 - inset-block-end: 0;
754 - inset-inline-start: 0;
755 757 background-color: var(--app-lightbox-background-color);
756 758 z-index: 1040;
759 + bottom: 0;
760 + left: 0;
757 761 }
758 762 .eps-app__header {
759 763 flex-shrink: 0;
760 764 font-size: 0.9375rem;
761 - border-block-end: var(--e-a-border);
765 + border-bottom: var(--e-a-border);
762 766 position: relative;
763 767 z-index: 3;
764 768 height: 3.125rem;
765 - padding-block: 0;
766 - padding-inline: 1rem;
769 + padding: 0 1rem;
767 770 }
768 771 .eps-app__header-buttons {
769 772 display: flex;
770 773 align-items: center;
@@ -771,9 +774,10 @@
771 774 flex-direction: row-reverse;
772 775 font-size: 1.125rem;
773 776 }
774 777 .eps-app__header-btn {
775 - padding-inline-start: 1rem;
778 + -webkit-padding-start: 1rem;
779 + padding-inline-start: 1rem;
776 780 font-size: 1.125rem;
777 781 line-height: 1.25rem;
778 782 }
779 783 .eps-app__header-btn:hover {
@@ -779,12 +783,14 @@
779 783 .eps-app__header-btn:hover {
780 784 color: var(--app-header-buttons-color-hover);
781 785 }
782 786 .eps-app__header-btn:first-child {
783 - border-inline-start: 1px solid var(--app-header-buttons-separator-color);
787 + -webkit-border-start: 1px solid var(--app-header-buttons-separator-color);
788 + border-inline-start: 1px solid var(--app-header-buttons-separator-color);
784 789 }
785 790 .eps-app__header-btn:not(:first-child) {
786 - padding-inline-end: 1rem;
791 + -webkit-padding-end: 1rem;
792 + padding-inline-end: 1rem;
787 793 }
788 794 .eps-app__logo-title-wrapper {
789 795 display: flex;
790 796 align-items: center;
@@ -794,14 +800,16 @@
794 800 width: 1.75rem;
795 801 height: 1.75rem;
796 802 line-height: 1.75rem;
797 803 text-align: center;
798 - font-size: 1.75rem;
804 + font-size: calc(0.4 * 1.75rem);
799 805 border-radius: 50%;
800 - color: var(--app-logo-background-color);
806 + color: var(--app-logo-color);
807 + background-color: var(--app-logo-background-color);
801 808 }
802 809 .eps-app__logo:not(:last-child) {
803 - margin-inline-end: 0.625rem;
810 + -webkit-margin-end: 0.625rem;
811 + margin-inline-end: 0.625rem;
804 812 }
805 813 .eps-app__title {
806 814 color: var(--app-title-color);
807 815 font-size: 0.9375rem;
@@ -806,9 +814,9 @@
806 814 color: var(--app-title-color);
807 815 font-size: 0.9375rem;
808 816 font-weight: 700;
809 817 text-transform: uppercase;
810 - margin-block-end: 0;
818 + margin-bottom: 0;
811 819 }
812 820 .eps-app__main {
813 821 display: flex;
814 822 overflow: hidden;
@@ -815,12 +823,13 @@
815 823 flex-grow: 1;
816 824 }
817 825 .eps-app__sidebar {
818 826 background-color: var(--app-sidebar-background-color);
819 - padding-block-start: 1.25rem;
827 + padding-top: 1.25rem;
820 828 width: 30%;
821 829 max-width: 17.1875rem;
822 - border-inline-end: var(--e-a-border);
830 + -webkit-border-end: var(--e-a-border);
831 + border-inline-end: var(--e-a-border);
823 832 flex-grow: 0;
824 833 overflow-y: auto;
825 834 z-index: 4;
826 835 }
@@ -840,9 +849,9 @@
840 849 --e-app-drop-zone-text-color: #69727D;
841 850 --e-app-drop-zone-secondary-text-color: #515962;
842 851 }
843 852 .e-app-drop-zone__icon {
844 - margin-block-end: 2.75rem;
853 + margin-bottom: 2.75rem;
845 854 font-size: 60px;
846 855 }
847 856 .e-app-drop-zone__text {
848 857 color: var(--e-app-drop-zone-text-color);
@@ -877,10 +886,10 @@
877 886 --info-toggle-color: var(--info-toggle-hover-color);
878 887 }
879 888
880 889 .e-site-editor__header {
881 - margin-block-end: 2.75rem;
882 - border-block-end: 1px solid var(--hr-color);
890 + margin-bottom: 2.75rem;
891 + border-bottom: 1px solid var(--hr-color);
883 892 }
884 893
885 894 :root {
886 895 --e-elementor-loader-color: #ffffff;
@@ -900,16 +909,15 @@
900 909 }
901 910
902 911 .elementor-loader-wrapper {
903 912 position: absolute;
904 - inset-block-start: 50%;
905 - inset-inline-start: 50%;
906 - transform: translate(calc(-50% * var(--direction-multiplier)), -50%);
913 + top: 50%;
914 + left: 50%;
915 + transform: translate(-50%, -50%);
907 916 width: 300px;
908 917 display: flex;
909 - flex-direction: column;
910 - align-items: center;
911 - gap: 30px;
918 + flex-wrap: wrap;
919 + justify-content: center;
912 920 }
913 921
914 922 .elementor-loader {
915 923 border-radius: 50%;
@@ -934,27 +942,27 @@
934 942 }
935 943 .elementor-loader-box:nth-of-type(1) {
936 944 width: 20%;
937 945 height: 100%;
938 - inset-block-start: 0;
939 - inset-inline-start: 0;
946 + left: 0;
947 + top: 0;
940 948 }
941 949 .elementor-loader-box:not(:nth-of-type(1)) {
942 - inset-inline-end: 0;
950 + right: 0;
943 951 height: 20%;
944 952 width: 60%;
945 953 }
946 954 .elementor-loader-box:nth-of-type(2) {
947 955 top: 0;
948 - animation-delay: calc(1.8s / 4 * -1);
956 + animation-delay: calc( 1.8s / 4 * -1 );
949 957 }
950 958 .elementor-loader-box:nth-of-type(3) {
951 959 top: 40%;
952 - animation-delay: calc(1.8s / 4 * -2);
960 + animation-delay: calc( 1.8s / 4 * -2 );
953 961 }
954 962 .elementor-loader-box:nth-of-type(4) {
955 963 bottom: 0;
956 - animation-delay: calc(1.8s / 4 * -3);
964 + animation-delay: calc( 1.8s / 4 * -3 );
957 965 }
958 966
959 967 .elementor-loading-title {
960 968 color: #9DA5AE;
@@ -959,8 +967,9 @@
959 967 .elementor-loading-title {
960 968 color: #9DA5AE;
961 969 text-align: center;
962 970 text-transform: uppercase;
971 + margin-top: 30px;
963 972 letter-spacing: 7px;
964 973 text-indent: 7px;
965 974 font-size: 10px;
966 975 width: 100%;
@@ -977,25 +986,26 @@
977 986 opacity: 0.3;
978 987 }
979 988 }
980 989 .eps-menu__title {
981 - margin-block-start: 2.75rem;
982 - margin-block-end: 1rem;
990 + margin-top: 2.75rem;
991 + margin-bottom: 1rem;
983 992 }
984 993
985 994 .e-app-import {
986 995 --e-app-import-back-to-library-color: #69727D;
987 - padding-block-end: 1.25rem;
996 + padding-bottom: 1.25rem;
988 997 }
989 998 .e-app-import__drop-zone {
990 - margin-block-start: 1.25rem;
999 + margin-top: 1.25rem;
991 1000 }
992 1001 .e-app-import__back-to-library {
993 1002 color: var(--e-app-import-back-to-library-color);
994 - margin-block-end: 1.5rem;
1003 + margin-bottom: 1.5rem;
995 1004 }
996 1005 .e-app-import__back-to-library > i {
997 - margin-inline-end: 0.5rem;
1006 + -webkit-margin-end: 0.5rem;
1007 + margin-inline-end: 0.5rem;
998 1008 }
999 1009
1000 1010 .eps-theme-dark .e-app-import {
1001 1011 --e-app-import-back-to-library-color: #BABFC5;
@@ -1012,15 +1022,15 @@
1012 1022 }
1013 1023 .e-site-editor__promotion-overlay__icon {
1014 1024 font-size: 1.25rem;
1015 1025 color: #ffffff;
1016 - margin-block-end: 1rem;
1026 + margin-bottom: 1rem;
1017 1027 }
1018 1028
1019 1029 .e-app-import-export-wizard-step {
1020 1030 --e-app-import-export-wizard-step-icon-color: #818A96;
1021 1031 --e-app-import-export-wizard-step-text-color: #69727D;
1022 - --e-app-import-export-wizard-step-block-end-text-color: #69727D;
1032 + --e-app-import-export-wizard-step-bottom-text-color: #69727D;
1023 1033 height: 100%;
1024 1034 position: relative;
1025 1035 text-align: center;
1026 1036 }
@@ -1035,42 +1045,42 @@
1035 1045 .e-app-import-export-wizard-step__icon.eicon-loading {
1036 1046 font-size: 1.85rem;
1037 1047 }
1038 1048 .e-app-import-export-wizard-step__heading {
1039 - margin-block-end: 1.5rem;
1049 + margin-bottom: 1.5rem;
1040 1050 }
1041 1051 .e-app-import-export-wizard-step__description, .e-app-import-export-wizard-step__info {
1042 1052 color: var(--e-app-import-export-wizard-step-text-color);
1043 1053 }
1044 1054 .e-app-import-export-wizard-step__info {
1045 - margin-block-start: 1.5rem;
1055 + margin-top: 1.5rem;
1046 1056 }
1047 1057 .e-app-import-export-wizard-step__content {
1048 1058 text-align: initial;
1049 - margin-block-end: 1.25rem;
1059 + margin-bottom: 1.25rem;
1050 1060 }
1051 1061 .e-app-import-export-wizard-step__notice {
1052 1062 display: block;
1053 1063 position: sticky;
1054 - inset-block-start: 100%; /* Will prevent text overlapping when window height is too short. */
1055 - color: var(--e-app-import-export-wizard-step-block-end-text-color);
1064 + top: 100%; /* Will prevent text overlapping when window height is too short. */
1065 + color: var(--e-app-import-export-wizard-step-bottom-text-color);
1056 1066 font-style: italic;
1057 - margin-block-end: 0;
1067 + margin-bottom: 0;
1058 1068 }
1059 1069
1060 1070 .eps-theme-dark .e-app-import-export-wizard-step {
1061 1071 --e-app-import-export-wizard-step-icon-color: #818A96;
1062 1072 --e-app-import-export-wizard-step-text-color: #BABFC5;
1063 - --e-app-import-export-wizard-step-block-end-text-color: #BABFC5;
1073 + --e-app-import-export-wizard-step-bottom-text-color: #BABFC5;
1064 1074 }
1065 1075
1066 1076 .e-app-import-export-page-header {
1067 1077 --e-app-import-export-page-header-heading-color: #515962;
1068 1078 --e-app-import-export-page-header-description-color: #69727D;
1069 - margin-block-end: 2.75rem;
1079 + margin-bottom: 2.75rem;
1070 1080 }
1071 1081 .e-app-import-export-page-header__content-wrapper {
1072 - max-width: 655px;
1082 + max-width: 645px;
1073 1083 }
1074 1084 .e-app-import-export-page-header__heading {
1075 1085 color: var(--e-app-import-export-page-header-heading-color);
1076 1086 }
@@ -1075,9 +1085,9 @@
1075 1085 color: var(--e-app-import-export-page-header-heading-color);
1076 1086 }
1077 1087 .e-app-import-export-page-header__description {
1078 1088 color: var(--e-app-import-export-page-header-description-color);
1079 - margin-block-start: 1.25rem;
1089 + margin-top: 1.25rem;
1080 1090 }
1081 1091
1082 1092 .eps-theme-dark .e-app-import-export-page-header {
1083 1093 --e-app-import-export-page-header-heading-color: #D5D8DC;
@@ -1090,9 +1100,10 @@
1090 1100 --e-app-export-kit-content-sm-notice-color: #BABFC5;
1091 1101 }
1092 1102 .e-app-export-kit-content__checkbox {
1093 1103 flex-shrink: 0;
1094 - margin-inline-end: 0.75rem;
1104 + -webkit-margin-end: 0.75rem;
1105 + margin-inline-end: 0.75rem;
1095 1106 }
1096 1107 .e-app-export-kit-content__title {
1097 1108 color: var(--e-app-export-kit-content-title-color);
1098 1109 }
@@ -1097,12 +1108,13 @@
1097 1108 color: var(--e-app-export-kit-content-title-color);
1098 1109 }
1099 1110 .e-app-export-kit-content__description {
1100 1111 color: var(--e-app-export-kit-content-description-color);
1101 - margin-inline-end: 1.25rem;
1112 + -webkit-margin-end: 1.25rem;
1113 + margin-inline-end: 1.25rem;
1102 1114 }
1103 1115 .e-app-export-kit-content__notice {
1104 - margin-block-start: 1rem;
1116 + margin-top: 1rem;
1105 1117 }
1106 1118 .e-app-export-kit-content__small-notice {
1107 1119 font-style: italic;
1108 1120 color: var(--e-app-export-kit-content-sm-notice-color);
@@ -1118,9 +1130,9 @@
1118 1130 --e-app-wizard-footer-border-color: #E6E8EA;
1119 1131 padding: 0.5rem;
1120 1132 }
1121 1133 .e-app-wizard-footer__separator {
1122 - border-block-start: 1px solid var(--e-app-wizard-footer-border-color);
1134 + border-top: 1px solid var(--e-app-wizard-footer-border-color);
1123 1135 }
1124 1136
1125 1137 .eps-theme-dark .e-app-wizard-footer {
1126 1138 --e-app-wizard-footer-border-color: #333438;
@@ -1167,12 +1179,15 @@
1167 1179 border: var(--card-border);
1168 1180 border-radius: 0.1875rem;
1169 1181 transition: 0.3s;
1170 1182 font-size: 0.75rem;
1183 + /*
1184 + todo: TBD: Optionally remove headline styling in favor of a global atom depending on variation needs
1185 + */
1171 1186 }
1172 1187 .eps-card__header {
1173 1188 padding: 0.625rem;
1174 - border-block-end: var(--card-header-footer-border);
1189 + border-bottom: var(--card-header-footer-border);
1175 1190 min-height: 2.5rem;
1176 1191 display: flex;
1177 1192 align-items: center;
1178 1193 }
@@ -1178,16 +1193,11 @@
1178 1193 }
1179 1194 .eps-card__header--padding {
1180 1195 padding: var(--eps-card-header-padding);
1181 1196 }
1182 -.eps-card {
1183 - /*
1184 - todo: TBD: Optionally remove headline styling in favor of a global atom depending on variation needs
1185 - */
1186 -}
1187 1197 .eps-card__headline {
1188 1198 color: var(--card-headline-color);
1189 - margin-block-end: 0;
1199 + margin-bottom: 0;
1190 1200 font-weight: 500;
1191 1201 flex-grow: 1;
1192 1202 overflow: hidden;
1193 1203 text-overflow: ellipsis;
@@ -1201,9 +1211,9 @@
1201 1211 }
1202 1212 .eps-card__figure {
1203 1213 background-color: var(--card-figure-background-color);
1204 1214 position: relative;
1205 - padding-block-end: var(--card-image-aspect-ratio, 95.6%);
1215 + padding-bottom: var(--card-image-aspect-ratio, 95.6%);
1206 1216 overflow: hidden;
1207 1217 height: 0;
1208 1218 }
1209 1219 .eps-card__image {
@@ -1212,14 +1222,14 @@
1212 1222 object-fit: contain;
1213 1223 -o-object-position: top;
1214 1224 object-position: top;
1215 1225 position: absolute;
1216 - inset-block-start: 0;
1217 - inset-inline-start: 0;
1226 + top: 0;
1227 + left: 0;
1218 1228 }
1219 1229 .eps-card__image-overlay {
1220 1230 position: absolute;
1221 - inset-block-start: 0;
1231 + top: 0;
1222 1232 background-color: var(--card-image-overlay-background-color);
1223 1233 z-index: 1;
1224 1234 width: 100%;
1225 1235 height: 100%;
@@ -1230,9 +1240,9 @@
1230 1240 opacity: 1;
1231 1241 }
1232 1242 .eps-card__footer {
1233 1243 padding: 0.625rem;
1234 - border-block-start: var(--card-header-footer-border);
1244 + border-top: var(--card-header-footer-border);
1235 1245 font-size: 0.6875rem;
1236 1246 }
1237 1247 .eps-card__footer--padding {
1238 1248 padding: var(--eps-card-footer-padding);
@@ -1266,9 +1276,9 @@
1266 1276 .eps-menu-item::before {
1267 1277 content: "";
1268 1278 display: block;
1269 1279 position: absolute;
1270 - inset-block-start: 0;
1280 + top: 0;
1271 1281 inset-inline-start: 0;
1272 1282 height: 100%;
1273 1283 width: var(--menu-item-pointer-width);
1274 1284 background-color: #0C0D0E;
@@ -1295,19 +1305,22 @@
1295 1305 color: var(--menu-item-color);
1296 1306 --eps-link-color: var(--menu-item-color);
1297 1307 }
1298 1308 .eps-menu-item__link:not(:last-child) {
1299 - padding-inline-end: 0;
1309 + -webkit-padding-end: 0;
1310 + padding-inline-end: 0;
1300 1311 }
1301 1312 .eps-menu-item__link .eps-icon {
1302 1313 font-size: 1.125rem;
1303 - margin-inline-end: 0.75rem;
1314 + -webkit-margin-end: 0.75rem;
1315 + margin-inline-end: 0.75rem;
1304 1316 }
1305 1317 .eps-menu-item__action-button {
1306 1318 opacity: var(--action-button-opacity);
1307 1319 padding: 0.625rem;
1308 1320 transition: 0.3s;
1309 - margin-inline-end: 1.25rem;
1321 + -webkit-margin-end: 1.25rem;
1322 + margin-inline-end: 1.25rem;
1310 1323 }
1311 1324 .eps-menu-item--active {
1312 1325 --menu-item-pointer-width: 0.3125rem;
1313 1326 }
@@ -1323,9 +1336,9 @@
1323 1336 .eps-grid-container--wrap-reverse {
1324 1337 flex-wrap: wrap-reverse;
1325 1338 }
1326 1339 .eps-grid-container--spacing {
1327 - --grid-row-gutter: calc(-1 * calc(var(--grid-spacing-gutter) * 0.625rem / 10));
1340 + --grid-row-gutter: calc(-1 * calc(var(--grid-spacing-gutter) * (0.625rem / 10)));
1328 1341 width: var(--grid-spacing-width);
1329 1342 margin: var(--grid-row-gutter);
1330 1343 }
1331 1344 .eps-grid-container--spacing > .eps-grid-item {
@@ -1435,386 +1448,386 @@
1435 1448 }
1436 1449 }
1437 1450 .eps-grid-item-xs-1 {
1438 1451 flex-grow: 0;
1439 - max-width: calc(1 / 12 * 100%);
1440 - flex-basis: calc(1 / 12 * 100%);
1452 + max-width: calc( 1 / 12 * 100% );
1453 + flex-basis: calc( 1 / 12 * 100% );
1441 1454 }
1442 1455
1443 1456 .eps-grid-item-xs-2 {
1444 1457 flex-grow: 0;
1445 - max-width: calc(2 / 12 * 100%);
1446 - flex-basis: calc(2 / 12 * 100%);
1458 + max-width: calc( 2 / 12 * 100% );
1459 + flex-basis: calc( 2 / 12 * 100% );
1447 1460 }
1448 1461
1449 1462 .eps-grid-item-xs-3 {
1450 1463 flex-grow: 0;
1451 - max-width: calc(3 / 12 * 100%);
1452 - flex-basis: calc(3 / 12 * 100%);
1464 + max-width: calc( 3 / 12 * 100% );
1465 + flex-basis: calc( 3 / 12 * 100% );
1453 1466 }
1454 1467
1455 1468 .eps-grid-item-xs-4 {
1456 1469 flex-grow: 0;
1457 - max-width: calc(4 / 12 * 100%);
1458 - flex-basis: calc(4 / 12 * 100%);
1470 + max-width: calc( 4 / 12 * 100% );
1471 + flex-basis: calc( 4 / 12 * 100% );
1459 1472 }
1460 1473
1461 1474 .eps-grid-item-xs-5 {
1462 1475 flex-grow: 0;
1463 - max-width: calc(5 / 12 * 100%);
1464 - flex-basis: calc(5 / 12 * 100%);
1476 + max-width: calc( 5 / 12 * 100% );
1477 + flex-basis: calc( 5 / 12 * 100% );
1465 1478 }
1466 1479
1467 1480 .eps-grid-item-xs-6 {
1468 1481 flex-grow: 0;
1469 - max-width: calc(6 / 12 * 100%);
1470 - flex-basis: calc(6 / 12 * 100%);
1482 + max-width: calc( 6 / 12 * 100% );
1483 + flex-basis: calc( 6 / 12 * 100% );
1471 1484 }
1472 1485
1473 1486 .eps-grid-item-xs-7 {
1474 1487 flex-grow: 0;
1475 - max-width: calc(7 / 12 * 100%);
1476 - flex-basis: calc(7 / 12 * 100%);
1488 + max-width: calc( 7 / 12 * 100% );
1489 + flex-basis: calc( 7 / 12 * 100% );
1477 1490 }
1478 1491
1479 1492 .eps-grid-item-xs-8 {
1480 1493 flex-grow: 0;
1481 - max-width: calc(8 / 12 * 100%);
1482 - flex-basis: calc(8 / 12 * 100%);
1494 + max-width: calc( 8 / 12 * 100% );
1495 + flex-basis: calc( 8 / 12 * 100% );
1483 1496 }
1484 1497
1485 1498 .eps-grid-item-xs-9 {
1486 1499 flex-grow: 0;
1487 - max-width: calc(9 / 12 * 100%);
1488 - flex-basis: calc(9 / 12 * 100%);
1500 + max-width: calc( 9 / 12 * 100% );
1501 + flex-basis: calc( 9 / 12 * 100% );
1489 1502 }
1490 1503
1491 1504 .eps-grid-item-xs-10 {
1492 1505 flex-grow: 0;
1493 - max-width: calc(10 / 12 * 100%);
1494 - flex-basis: calc(10 / 12 * 100%);
1506 + max-width: calc( 10 / 12 * 100% );
1507 + flex-basis: calc( 10 / 12 * 100% );
1495 1508 }
1496 1509
1497 1510 .eps-grid-item-xs-11 {
1498 1511 flex-grow: 0;
1499 - max-width: calc(11 / 12 * 100%);
1500 - flex-basis: calc(11 / 12 * 100%);
1512 + max-width: calc( 11 / 12 * 100% );
1513 + flex-basis: calc( 11 / 12 * 100% );
1501 1514 }
1502 1515
1503 1516 .eps-grid-item-xs-12 {
1504 1517 flex-grow: 0;
1505 - max-width: calc(12 / 12 * 100%);
1506 - flex-basis: calc(12 / 12 * 100%);
1518 + max-width: calc( 12 / 12 * 100% );
1519 + flex-basis: calc( 12 / 12 * 100% );
1507 1520 }
1508 1521
1509 1522 @media screen and (min-width: 480px) {
1510 1523 .eps-grid-item-sm-1 {
1511 1524 flex-grow: 0;
1512 - max-width: calc(1 / 12 * 100%);
1513 - flex-basis: calc(1 / 12 * 100%);
1525 + max-width: calc( 1 / 12 * 100% );
1526 + flex-basis: calc( 1 / 12 * 100% );
1514 1527 }
1515 1528 .eps-grid-item-sm-2 {
1516 1529 flex-grow: 0;
1517 - max-width: calc(2 / 12 * 100%);
1518 - flex-basis: calc(2 / 12 * 100%);
1530 + max-width: calc( 2 / 12 * 100% );
1531 + flex-basis: calc( 2 / 12 * 100% );
1519 1532 }
1520 1533 .eps-grid-item-sm-3 {
1521 1534 flex-grow: 0;
1522 - max-width: calc(3 / 12 * 100%);
1523 - flex-basis: calc(3 / 12 * 100%);
1535 + max-width: calc( 3 / 12 * 100% );
1536 + flex-basis: calc( 3 / 12 * 100% );
1524 1537 }
1525 1538 .eps-grid-item-sm-4 {
1526 1539 flex-grow: 0;
1527 - max-width: calc(4 / 12 * 100%);
1528 - flex-basis: calc(4 / 12 * 100%);
1540 + max-width: calc( 4 / 12 * 100% );
1541 + flex-basis: calc( 4 / 12 * 100% );
1529 1542 }
1530 1543 .eps-grid-item-sm-5 {
1531 1544 flex-grow: 0;
1532 - max-width: calc(5 / 12 * 100%);
1533 - flex-basis: calc(5 / 12 * 100%);
1545 + max-width: calc( 5 / 12 * 100% );
1546 + flex-basis: calc( 5 / 12 * 100% );
1534 1547 }
1535 1548 .eps-grid-item-sm-6 {
1536 1549 flex-grow: 0;
1537 - max-width: calc(6 / 12 * 100%);
1538 - flex-basis: calc(6 / 12 * 100%);
1550 + max-width: calc( 6 / 12 * 100% );
1551 + flex-basis: calc( 6 / 12 * 100% );
1539 1552 }
1540 1553 .eps-grid-item-sm-7 {
1541 1554 flex-grow: 0;
1542 - max-width: calc(7 / 12 * 100%);
1543 - flex-basis: calc(7 / 12 * 100%);
1555 + max-width: calc( 7 / 12 * 100% );
1556 + flex-basis: calc( 7 / 12 * 100% );
1544 1557 }
1545 1558 .eps-grid-item-sm-8 {
1546 1559 flex-grow: 0;
1547 - max-width: calc(8 / 12 * 100%);
1548 - flex-basis: calc(8 / 12 * 100%);
1560 + max-width: calc( 8 / 12 * 100% );
1561 + flex-basis: calc( 8 / 12 * 100% );
1549 1562 }
1550 1563 .eps-grid-item-sm-9 {
1551 1564 flex-grow: 0;
1552 - max-width: calc(9 / 12 * 100%);
1553 - flex-basis: calc(9 / 12 * 100%);
1565 + max-width: calc( 9 / 12 * 100% );
1566 + flex-basis: calc( 9 / 12 * 100% );
1554 1567 }
1555 1568 .eps-grid-item-sm-10 {
1556 1569 flex-grow: 0;
1557 - max-width: calc(10 / 12 * 100%);
1558 - flex-basis: calc(10 / 12 * 100%);
1570 + max-width: calc( 10 / 12 * 100% );
1571 + flex-basis: calc( 10 / 12 * 100% );
1559 1572 }
1560 1573 .eps-grid-item-sm-11 {
1561 1574 flex-grow: 0;
1562 - max-width: calc(11 / 12 * 100%);
1563 - flex-basis: calc(11 / 12 * 100%);
1575 + max-width: calc( 11 / 12 * 100% );
1576 + flex-basis: calc( 11 / 12 * 100% );
1564 1577 }
1565 1578 .eps-grid-item-sm-12 {
1566 1579 flex-grow: 0;
1567 - max-width: calc(12 / 12 * 100%);
1568 - flex-basis: calc(12 / 12 * 100%);
1580 + max-width: calc( 12 / 12 * 100% );
1581 + flex-basis: calc( 12 / 12 * 100% );
1569 1582 }
1570 1583 }
1571 1584 @media screen and (min-width: 768px) {
1572 1585 .eps-grid-item-md-1 {
1573 1586 flex-grow: 0;
1574 - max-width: calc(1 / 12 * 100%);
1575 - flex-basis: calc(1 / 12 * 100%);
1587 + max-width: calc( 1 / 12 * 100% );
1588 + flex-basis: calc( 1 / 12 * 100% );
1576 1589 }
1577 1590 .eps-grid-item-md-2 {
1578 1591 flex-grow: 0;
1579 - max-width: calc(2 / 12 * 100%);
1580 - flex-basis: calc(2 / 12 * 100%);
1592 + max-width: calc( 2 / 12 * 100% );
1593 + flex-basis: calc( 2 / 12 * 100% );
1581 1594 }
1582 1595 .eps-grid-item-md-3 {
1583 1596 flex-grow: 0;
1584 - max-width: calc(3 / 12 * 100%);
1585 - flex-basis: calc(3 / 12 * 100%);
1597 + max-width: calc( 3 / 12 * 100% );
1598 + flex-basis: calc( 3 / 12 * 100% );
1586 1599 }
1587 1600 .eps-grid-item-md-4 {
1588 1601 flex-grow: 0;
1589 - max-width: calc(4 / 12 * 100%);
1590 - flex-basis: calc(4 / 12 * 100%);
1602 + max-width: calc( 4 / 12 * 100% );
1603 + flex-basis: calc( 4 / 12 * 100% );
1591 1604 }
1592 1605 .eps-grid-item-md-5 {
1593 1606 flex-grow: 0;
1594 - max-width: calc(5 / 12 * 100%);
1595 - flex-basis: calc(5 / 12 * 100%);
1607 + max-width: calc( 5 / 12 * 100% );
1608 + flex-basis: calc( 5 / 12 * 100% );
1596 1609 }
1597 1610 .eps-grid-item-md-6 {
1598 1611 flex-grow: 0;
1599 - max-width: calc(6 / 12 * 100%);
1600 - flex-basis: calc(6 / 12 * 100%);
1612 + max-width: calc( 6 / 12 * 100% );
1613 + flex-basis: calc( 6 / 12 * 100% );
1601 1614 }
1602 1615 .eps-grid-item-md-7 {
1603 1616 flex-grow: 0;
1604 - max-width: calc(7 / 12 * 100%);
1605 - flex-basis: calc(7 / 12 * 100%);
1617 + max-width: calc( 7 / 12 * 100% );
1618 + flex-basis: calc( 7 / 12 * 100% );
1606 1619 }
1607 1620 .eps-grid-item-md-8 {
1608 1621 flex-grow: 0;
1609 - max-width: calc(8 / 12 * 100%);
1610 - flex-basis: calc(8 / 12 * 100%);
1622 + max-width: calc( 8 / 12 * 100% );
1623 + flex-basis: calc( 8 / 12 * 100% );
1611 1624 }
1612 1625 .eps-grid-item-md-9 {
1613 1626 flex-grow: 0;
1614 - max-width: calc(9 / 12 * 100%);
1615 - flex-basis: calc(9 / 12 * 100%);
1627 + max-width: calc( 9 / 12 * 100% );
1628 + flex-basis: calc( 9 / 12 * 100% );
1616 1629 }
1617 1630 .eps-grid-item-md-10 {
1618 1631 flex-grow: 0;
1619 - max-width: calc(10 / 12 * 100%);
1620 - flex-basis: calc(10 / 12 * 100%);
1632 + max-width: calc( 10 / 12 * 100% );
1633 + flex-basis: calc( 10 / 12 * 100% );
1621 1634 }
1622 1635 .eps-grid-item-md-11 {
1623 1636 flex-grow: 0;
1624 - max-width: calc(11 / 12 * 100%);
1625 - flex-basis: calc(11 / 12 * 100%);
1637 + max-width: calc( 11 / 12 * 100% );
1638 + flex-basis: calc( 11 / 12 * 100% );
1626 1639 }
1627 1640 .eps-grid-item-md-12 {
1628 1641 flex-grow: 0;
1629 - max-width: calc(12 / 12 * 100%);
1630 - flex-basis: calc(12 / 12 * 100%);
1642 + max-width: calc( 12 / 12 * 100% );
1643 + flex-basis: calc( 12 / 12 * 100% );
1631 1644 }
1632 1645 }
1633 1646 @media screen and (min-width: 1025px) {
1634 1647 .eps-grid-item-lg-1 {
1635 1648 flex-grow: 0;
1636 - max-width: calc(1 / 12 * 100%);
1637 - flex-basis: calc(1 / 12 * 100%);
1649 + max-width: calc( 1 / 12 * 100% );
1650 + flex-basis: calc( 1 / 12 * 100% );
1638 1651 }
1639 1652 .eps-grid-item-lg-2 {
1640 1653 flex-grow: 0;
1641 - max-width: calc(2 / 12 * 100%);
1642 - flex-basis: calc(2 / 12 * 100%);
1654 + max-width: calc( 2 / 12 * 100% );
1655 + flex-basis: calc( 2 / 12 * 100% );
1643 1656 }
1644 1657 .eps-grid-item-lg-3 {
1645 1658 flex-grow: 0;
1646 - max-width: calc(3 / 12 * 100%);
1647 - flex-basis: calc(3 / 12 * 100%);
1659 + max-width: calc( 3 / 12 * 100% );
1660 + flex-basis: calc( 3 / 12 * 100% );
1648 1661 }
1649 1662 .eps-grid-item-lg-4 {
1650 1663 flex-grow: 0;
1651 - max-width: calc(4 / 12 * 100%);
1652 - flex-basis: calc(4 / 12 * 100%);
1664 + max-width: calc( 4 / 12 * 100% );
1665 + flex-basis: calc( 4 / 12 * 100% );
1653 1666 }
1654 1667 .eps-grid-item-lg-5 {
1655 1668 flex-grow: 0;
1656 - max-width: calc(5 / 12 * 100%);
1657 - flex-basis: calc(5 / 12 * 100%);
1669 + max-width: calc( 5 / 12 * 100% );
1670 + flex-basis: calc( 5 / 12 * 100% );
1658 1671 }
1659 1672 .eps-grid-item-lg-6 {
1660 1673 flex-grow: 0;
1661 - max-width: calc(6 / 12 * 100%);
1662 - flex-basis: calc(6 / 12 * 100%);
1674 + max-width: calc( 6 / 12 * 100% );
1675 + flex-basis: calc( 6 / 12 * 100% );
1663 1676 }
1664 1677 .eps-grid-item-lg-7 {
1665 1678 flex-grow: 0;
1666 - max-width: calc(7 / 12 * 100%);
1667 - flex-basis: calc(7 / 12 * 100%);
1679 + max-width: calc( 7 / 12 * 100% );
1680 + flex-basis: calc( 7 / 12 * 100% );
1668 1681 }
1669 1682 .eps-grid-item-lg-8 {
1670 1683 flex-grow: 0;
1671 - max-width: calc(8 / 12 * 100%);
1672 - flex-basis: calc(8 / 12 * 100%);
1684 + max-width: calc( 8 / 12 * 100% );
1685 + flex-basis: calc( 8 / 12 * 100% );
1673 1686 }
1674 1687 .eps-grid-item-lg-9 {
1675 1688 flex-grow: 0;
1676 - max-width: calc(9 / 12 * 100%);
1677 - flex-basis: calc(9 / 12 * 100%);
1689 + max-width: calc( 9 / 12 * 100% );
1690 + flex-basis: calc( 9 / 12 * 100% );
1678 1691 }
1679 1692 .eps-grid-item-lg-10 {
1680 1693 flex-grow: 0;
1681 - max-width: calc(10 / 12 * 100%);
1682 - flex-basis: calc(10 / 12 * 100%);
1694 + max-width: calc( 10 / 12 * 100% );
1695 + flex-basis: calc( 10 / 12 * 100% );
1683 1696 }
1684 1697 .eps-grid-item-lg-11 {
1685 1698 flex-grow: 0;
1686 - max-width: calc(11 / 12 * 100%);
1687 - flex-basis: calc(11 / 12 * 100%);
1699 + max-width: calc( 11 / 12 * 100% );
1700 + flex-basis: calc( 11 / 12 * 100% );
1688 1701 }
1689 1702 .eps-grid-item-lg-12 {
1690 1703 flex-grow: 0;
1691 - max-width: calc(12 / 12 * 100%);
1692 - flex-basis: calc(12 / 12 * 100%);
1704 + max-width: calc( 12 / 12 * 100% );
1705 + flex-basis: calc( 12 / 12 * 100% );
1693 1706 }
1694 1707 }
1695 1708 @media screen and (min-width: 1440px) {
1696 1709 .eps-grid-item-xl-1 {
1697 1710 flex-grow: 0;
1698 - max-width: calc(1 / 12 * 100%);
1699 - flex-basis: calc(1 / 12 * 100%);
1711 + max-width: calc( 1 / 12 * 100% );
1712 + flex-basis: calc( 1 / 12 * 100% );
1700 1713 }
1701 1714 .eps-grid-item-xl-2 {
1702 1715 flex-grow: 0;
1703 - max-width: calc(2 / 12 * 100%);
1704 - flex-basis: calc(2 / 12 * 100%);
1716 + max-width: calc( 2 / 12 * 100% );
1717 + flex-basis: calc( 2 / 12 * 100% );
1705 1718 }
1706 1719 .eps-grid-item-xl-3 {
1707 1720 flex-grow: 0;
1708 - max-width: calc(3 / 12 * 100%);
1709 - flex-basis: calc(3 / 12 * 100%);
1721 + max-width: calc( 3 / 12 * 100% );
1722 + flex-basis: calc( 3 / 12 * 100% );
1710 1723 }
1711 1724 .eps-grid-item-xl-4 {
1712 1725 flex-grow: 0;
1713 - max-width: calc(4 / 12 * 100%);
1714 - flex-basis: calc(4 / 12 * 100%);
1726 + max-width: calc( 4 / 12 * 100% );
1727 + flex-basis: calc( 4 / 12 * 100% );
1715 1728 }
1716 1729 .eps-grid-item-xl-5 {
1717 1730 flex-grow: 0;
1718 - max-width: calc(5 / 12 * 100%);
1719 - flex-basis: calc(5 / 12 * 100%);
1731 + max-width: calc( 5 / 12 * 100% );
1732 + flex-basis: calc( 5 / 12 * 100% );
1720 1733 }
1721 1734 .eps-grid-item-xl-6 {
1722 1735 flex-grow: 0;
1723 - max-width: calc(6 / 12 * 100%);
1724 - flex-basis: calc(6 / 12 * 100%);
1736 + max-width: calc( 6 / 12 * 100% );
1737 + flex-basis: calc( 6 / 12 * 100% );
1725 1738 }
1726 1739 .eps-grid-item-xl-7 {
1727 1740 flex-grow: 0;
1728 - max-width: calc(7 / 12 * 100%);
1729 - flex-basis: calc(7 / 12 * 100%);
1741 + max-width: calc( 7 / 12 * 100% );
1742 + flex-basis: calc( 7 / 12 * 100% );
1730 1743 }
1731 1744 .eps-grid-item-xl-8 {
1732 1745 flex-grow: 0;
1733 - max-width: calc(8 / 12 * 100%);
1734 - flex-basis: calc(8 / 12 * 100%);
1746 + max-width: calc( 8 / 12 * 100% );
1747 + flex-basis: calc( 8 / 12 * 100% );
1735 1748 }
1736 1749 .eps-grid-item-xl-9 {
1737 1750 flex-grow: 0;
1738 - max-width: calc(9 / 12 * 100%);
1739 - flex-basis: calc(9 / 12 * 100%);
1751 + max-width: calc( 9 / 12 * 100% );
1752 + flex-basis: calc( 9 / 12 * 100% );
1740 1753 }
1741 1754 .eps-grid-item-xl-10 {
1742 1755 flex-grow: 0;
1743 - max-width: calc(10 / 12 * 100%);
1744 - flex-basis: calc(10 / 12 * 100%);
1756 + max-width: calc( 10 / 12 * 100% );
1757 + flex-basis: calc( 10 / 12 * 100% );
1745 1758 }
1746 1759 .eps-grid-item-xl-11 {
1747 1760 flex-grow: 0;
1748 - max-width: calc(11 / 12 * 100%);
1749 - flex-basis: calc(11 / 12 * 100%);
1761 + max-width: calc( 11 / 12 * 100% );
1762 + flex-basis: calc( 11 / 12 * 100% );
1750 1763 }
1751 1764 .eps-grid-item-xl-12 {
1752 1765 flex-grow: 0;
1753 - max-width: calc(12 / 12 * 100%);
1754 - flex-basis: calc(12 / 12 * 100%);
1766 + max-width: calc( 12 / 12 * 100% );
1767 + flex-basis: calc( 12 / 12 * 100% );
1755 1768 }
1756 1769 }
1757 1770 @media screen and (min-width: 1600px) {
1758 1771 .eps-grid-item-xxl-1 {
1759 1772 flex-grow: 0;
1760 - max-width: calc(1 / 12 * 100%);
1761 - flex-basis: calc(1 / 12 * 100%);
1773 + max-width: calc( 1 / 12 * 100% );
1774 + flex-basis: calc( 1 / 12 * 100% );
1762 1775 }
1763 1776 .eps-grid-item-xxl-2 {
1764 1777 flex-grow: 0;
1765 - max-width: calc(2 / 12 * 100%);
1766 - flex-basis: calc(2 / 12 * 100%);
1778 + max-width: calc( 2 / 12 * 100% );
1779 + flex-basis: calc( 2 / 12 * 100% );
1767 1780 }
1768 1781 .eps-grid-item-xxl-3 {
1769 1782 flex-grow: 0;
1770 - max-width: calc(3 / 12 * 100%);
1771 - flex-basis: calc(3 / 12 * 100%);
1783 + max-width: calc( 3 / 12 * 100% );
1784 + flex-basis: calc( 3 / 12 * 100% );
1772 1785 }
1773 1786 .eps-grid-item-xxl-4 {
1774 1787 flex-grow: 0;
1775 - max-width: calc(4 / 12 * 100%);
1776 - flex-basis: calc(4 / 12 * 100%);
1788 + max-width: calc( 4 / 12 * 100% );
1789 + flex-basis: calc( 4 / 12 * 100% );
1777 1790 }
1778 1791 .eps-grid-item-xxl-5 {
1779 1792 flex-grow: 0;
1780 - max-width: calc(5 / 12 * 100%);
1781 - flex-basis: calc(5 / 12 * 100%);
1793 + max-width: calc( 5 / 12 * 100% );
1794 + flex-basis: calc( 5 / 12 * 100% );
1782 1795 }
1783 1796 .eps-grid-item-xxl-6 {
1784 1797 flex-grow: 0;
1785 - max-width: calc(6 / 12 * 100%);
1786 - flex-basis: calc(6 / 12 * 100%);
1798 + max-width: calc( 6 / 12 * 100% );
1799 + flex-basis: calc( 6 / 12 * 100% );
1787 1800 }
1788 1801 .eps-grid-item-xxl-7 {
1789 1802 flex-grow: 0;
1790 - max-width: calc(7 / 12 * 100%);
1791 - flex-basis: calc(7 / 12 * 100%);
1803 + max-width: calc( 7 / 12 * 100% );
1804 + flex-basis: calc( 7 / 12 * 100% );
1792 1805 }
1793 1806 .eps-grid-item-xxl-8 {
1794 1807 flex-grow: 0;
1795 - max-width: calc(8 / 12 * 100%);
1796 - flex-basis: calc(8 / 12 * 100%);
1808 + max-width: calc( 8 / 12 * 100% );
1809 + flex-basis: calc( 8 / 12 * 100% );
1797 1810 }
1798 1811 .eps-grid-item-xxl-9 {
1799 1812 flex-grow: 0;
1800 - max-width: calc(9 / 12 * 100%);
1801 - flex-basis: calc(9 / 12 * 100%);
1813 + max-width: calc( 9 / 12 * 100% );
1814 + flex-basis: calc( 9 / 12 * 100% );
1802 1815 }
1803 1816 .eps-grid-item-xxl-10 {
1804 1817 flex-grow: 0;
1805 - max-width: calc(10 / 12 * 100%);
1806 - flex-basis: calc(10 / 12 * 100%);
1818 + max-width: calc( 10 / 12 * 100% );
1819 + flex-basis: calc( 10 / 12 * 100% );
1807 1820 }
1808 1821 .eps-grid-item-xxl-11 {
1809 1822 flex-grow: 0;
1810 - max-width: calc(11 / 12 * 100%);
1811 - flex-basis: calc(11 / 12 * 100%);
1823 + max-width: calc( 11 / 12 * 100% );
1824 + flex-basis: calc( 11 / 12 * 100% );
1812 1825 }
1813 1826 .eps-grid-item-xxl-12 {
1814 1827 flex-grow: 0;
1815 - max-width: calc(12 / 12 * 100%);
1816 - flex-basis: calc(12 / 12 * 100%);
1828 + max-width: calc( 12 / 12 * 100% );
1829 + flex-basis: calc( 12 / 12 * 100% );
1817 1830 }
1818 1831 }
1819 1832 :root {
1820 1833 --menu-title-color: #515962;
@@ -1865,9 +1878,12 @@
1865 1878 .eps-modal__overlay {
1866 1879 background: rgba(0, 0, 0, 0.5);
1867 1880 position: fixed;
1868 1881 display: flex;
1869 - inset: 0;
1882 + top: 0;
1883 + left: 0;
1884 + width: 100%;
1885 + height: 100%;
1870 1886 align-items: center;
1871 1887 justify-content: center;
1872 1888 z-index: 1030;
1873 1889 }
@@ -1881,9 +1897,10 @@
1881 1897 .eps-modal__header, .eps-modal__header .title {
1882 1898 color: #ffffff;
1883 1899 }
1884 1900 .eps-modal__icon {
1885 - margin-inline-end: 0.625rem;
1901 + -webkit-margin-end: 0.625rem;
1902 + margin-inline-end: 0.625rem;
1886 1903 }
1887 1904 .eps-modal__body {
1888 1905 padding: 1.875rem;
1889 1906 }
@@ -1888,24 +1905,28 @@
1888 1905 padding: 1.875rem;
1889 1906 }
1890 1907 .eps-modal__tip, .eps-modal .eps-tip {
1891 1908 padding: 0.5rem;
1892 - padding-inline-start: 0.75rem;
1893 - border-inline-start: 3px solid #2563EB;
1909 + -webkit-padding-start: 0.75rem;
1910 + padding-inline-start: 0.75rem;
1911 + -webkit-border-start: 3px solid #2563EB;
1912 + border-inline-start: 3px solid #2563EB;
1894 1913 background-color: var(--eps-tip-background-color);
1895 1914 }
1896 1915 .eps-modal__tip:not(:last-child), .eps-modal .eps-tip:not(:last-child) {
1897 - margin-block-end: 1.875rem;
1916 + margin-bottom: 1.875rem;
1898 1917 }
1899 1918 .eps-modal__tip:not(:first-child), .eps-modal .eps-tip:not(:first-child) {
1900 - margin-block-start: 1.875rem;
1919 + margin-top: 1.875rem;
1901 1920 }
1902 1921 .eps-modal__section:not(:first-child) {
1903 - margin-block-start: 1.875rem;
1922 + margin-top: 1.875rem;
1904 1923 }
1905 1924 .eps-modal__close-wrapper {
1906 - padding-inline-start: 1rem;
1907 - border-inline-start: solid 1px #ffffff;
1925 + -webkit-padding-start: 1rem;
1926 + padding-inline-start: 1rem;
1927 + -webkit-border-start: solid 1px #ffffff;
1928 + border-inline-start: solid 1px #ffffff;
1908 1929 }
1909 1930
1910 1931 .eps-add-new-button {
1911 1932 display: inline-flex;
@@ -1923,9 +1944,10 @@
1923 1944 text-align: center;
1924 1945 line-height: var(--eps-add-new-button-size);
1925 1946 }
1926 1947 .eps-add-new-button span:not(.sr-only) {
1927 - margin-inline-start: 0.625rem;
1948 + -webkit-margin-start: 0.625rem;
1949 + margin-inline-start: 0.625rem;
1928 1950 font-weight: 500;
1929 1951 }
1930 1952 .eps-add-new-button--sm {
1931 1953 --eps-add-new-button-size: 1rem;
@@ -2032,15 +2054,17 @@
2032 2054 --eps-box-notice-background-color: #F1F2F3;
2033 2055 padding: 0.625rem 1rem;
2034 2056 }
2035 2057 .eps-notice-semantic {
2036 - border-inline-start: 3px solid var(--eps-notice-semantic-color);
2058 + -webkit-border-start: 3px solid var(--eps-notice-semantic-color);
2059 + border-inline-start: 3px solid var(--eps-notice-semantic-color);
2037 2060 background-color: var(--eps-notice-semantic-bg);
2038 2061 }
2039 2062 .eps-notice-semantic .eps-notice__icon {
2040 2063 color: var(--eps-notice-semantic-color);
2041 2064 font-size: 1rem;
2042 - margin-inline-end: 0.75rem;
2065 + -webkit-margin-end: 0.75rem;
2066 + margin-inline-end: 0.75rem;
2043 2067 }
2044 2068 .eps-notice--warning {
2045 2069 --eps-notice-semantic-color: #F59E0B;
2046 2070 --eps-notice-semantic-bg: #FFFBEB;
@@ -2058,9 +2082,9 @@
2058 2082 padding: 0;
2059 2083 }
2060 2084 .eps-notice__button-container {
2061 2085 flex-shrink: 0;
2062 - margin-inline-start: 1.25rem;
2086 + margin-left: 1.25rem;
2063 2087 width: auto;
2064 2088 }
2065 2089
2066 2090 .eps-theme-dark .eps-notice {
@@ -2093,9 +2117,9 @@
2093 2117 .eps-list__item--padding {
2094 2118 padding: var(--eps-list-item-padding);
2095 2119 }
2096 2120 .eps-list--separated .eps-list__item:not(:last-child) {
2097 - border-block-end: 1px solid var(--eps-list-item-separated-border-color);
2121 + border-bottom: 1px solid var(--eps-list-item-separated-border-color);
2098 2122 }
2099 2123
2100 2124 .eps-theme-dark .eps-list {
2101 2125 --eps-list-item-separated-border-color: #3f444b;
@@ -2133,15 +2157,18 @@
2133 2157 min-width: 120px;
2134 2158 border-radius: 0.1875rem;
2135 2159 position: absolute;
2136 2160 z-index: 1050;
2137 - margin-block-start: 9px;
2161 + margin-top: 9px;
2138 2162 transform: translateX(-50%);
2139 - inset-inline-start: 0.25rem;
2163 + left: 0.25rem;
2140 2164 }
2141 2165 .eps-popover__background {
2142 2166 position: fixed;
2143 - inset: 0;
2167 + top: 0;
2168 + bottom: 0;
2169 + left: 0;
2170 + right: 0;
2144 2171 z-index: 1030;
2145 2172 }
2146 2173 .eps-popover__container {
2147 2174 position: relative;
@@ -2152,28 +2179,16 @@
2152 2179 position: absolute;
2153 2180 width: 16px;
2154 2181 height: 9px;
2155 2182 margin: 0 0.1875rem 9px;
2156 - inset-block-start: -9px;
2157 - inset-inline-start: 50%;
2183 + top: -9px;
2184 + left: 50%;
2158 2185 transform: translateX(-50%);
2159 2186 border-color: transparent;
2160 2187 border-style: solid;
2161 2188 border-width: 0 calc(16px / 2) 9px calc(16px / 2);
2162 - border-block-end-color: var(--popover-arrow-color);
2189 + border-bottom-color: var(--popover-arrow-color);
2163 2190 }
2164 -.eps-popover--arrow-start::before {
2165 - inset-inline-start: 0.1875rem;
2166 - transform: none;
2167 -}
2168 -.eps-popover--arrow-end::before {
2169 - inset-inline-start: auto;
2170 - inset-inline-end: 0.1875rem;
2171 - transform: none;
2172 -}
2173 -.eps-popover--arrow-none::before {
2174 - display: none;
2175 -}
2176 2191 .eps-popover__item {
2177 2192 padding: 0.3125rem 1rem;
2178 2193 background-color: var(--popover-item-background-color);
2179 2194 color: var(--popover-item-color);
@@ -2191,9 +2206,10 @@
2191 2206 color: var(--popover-item-danger-hover-color);
2192 2207 }
2193 2208 .eps-popover__item .eps-icon {
2194 2209 font-size: inherit;
2195 - margin-inline-end: 0.3125rem;
2210 + -webkit-margin-end: 0.3125rem;
2211 + margin-inline-end: 0.3125rem;
2196 2212 }
2197 2213
2198 2214 .eps-css-grid {
2199 2215 display: grid;
@@ -2225,14 +2241,14 @@
2225 2241 }
2226 2242
2227 2243 :root {
2228 2244 --checkbox-border-color: #9DA5AE;
2229 - --checkbox-hover-border-color: rgb(143.0391061453, 152.1787709497, 162.4608938547);
2230 - --checkbox-active-border-color: rgb(170.9608938547, 177.8212290503, 185.5391061453);
2245 + --checkbox-hover-border-color: #8f98a2;
2246 + --checkbox-active-border-color: #abb2ba;
2231 2247 --checkbox-background-color: #ffffff;
2232 2248 --checkbox-checked-background-color: #515962;
2233 - --checkbox-checked-hover-background-color: rgb(69.4608938547, 76.3212290503, 84.0391061453);
2234 - --checkbox-checked-active-background-color: rgb(92.5391061453, 101.6787709497, 111.9608938547);
2249 + --checkbox-checked-hover-background-color: #454c54;
2250 + --checkbox-checked-active-background-color: #5d6670;
2235 2251 --checkbox-checked-disabled-background-color: #D5D8DC;
2236 2252 --checkbox-indicator-color: #ffffff;
2237 2253 --checkbox-error-background-color: #DC2626;
2238 2254 }
@@ -2256,9 +2272,9 @@
2256 2272 border: 1px solid var(--checkbox-border-color);
2257 2273 }
2258 2274 .eps-checkbox::after {
2259 2275 display: inline-block;
2260 - margin-block-end: calc(0.25 / 2 * 100%);
2276 + margin-bottom: calc(0.25 / 2 * 100%);
2261 2277 content: " ";
2262 2278 width: 3px;
2263 2279 height: 6px;
2264 2280 transform: rotate(45deg);
@@ -2291,24 +2307,24 @@
2291 2307 }
2292 2308 .eps-checkbox--rounded {
2293 2309 border-radius: 50%;
2294 2310 }
2311 +.eps-checkbox--indeterminate {
2312 + --checkbox-background-color: var(--checkbox-checked-background-color);
2313 + --checkbox-border-color: var(--checkbox-checked-background-color);
2314 +}
2295 2315 .eps-checkbox--indeterminate::after {
2296 2316 display: inline-block;
2297 - margin-block-end: 0;
2317 + margin-bottom: 0;
2298 2318 content: " ";
2299 2319 width: 7px;
2300 2320 height: 0;
2301 2321 transform: rotate(0deg);
2302 - border-block-start: 1px solid #ffffff;
2322 + border-top: 1px solid #ffffff;
2303 2323 }
2304 -.eps-checkbox--indeterminate {
2305 - --checkbox-background-color: var(--checkbox-checked-background-color);
2306 - --checkbox-border-color: var(--checkbox-checked-background-color);
2307 -}
2308 2324 .eps-checkbox--error::before, .eps-checkbox--error::after, .eps-checkbox--error:checked::before, .eps-checkbox--error:checked::after {
2309 2325 display: inline-block;
2310 - margin-block-end: 0;
2326 + margin-bottom: 0;
2311 2327 content: " ";
2312 2328 width: 7px;
2313 2329 height: 0;
2314 2330 border: solid #ffffff;
@@ -2339,9 +2355,9 @@
2339 2355 .e-app-drag-drop {
2340 2356 background-color: var(--e-app-drag-drop-background-color);
2341 2357 outline: 2px dashed var(--e-app-drag-drop-outline-color);
2342 2358 outline-offset: -0.75rem;
2343 - margin-block-end: 1.5rem;
2359 + margin-bottom: 1.5rem;
2344 2360 padding: 4.125rem;
2345 2361 text-align: center;
2346 2362 }
2347 2363 .e-app-drag-drop--drag-over {
@@ -2353,12 +2369,12 @@
2353 2369 width: 375px;
2354 2370 }
2355 2371 .eps-dialog__close-button {
2356 2372 position: absolute;
2357 - inset-block-start: -2.75rem;
2358 - inset-inline-end: -2.75rem;
2359 - margin-block-start: 0.625rem;
2360 - margin-inline-end: 0.625rem;
2373 + top: -2.75rem;
2374 + right: -2.75rem;
2375 + margin-top: 0.625rem;
2376 + margin-right: 0.625rem;
2361 2377 z-index: 1040;
2362 2378 font-size: 1.25rem;
2363 2379 color: #ffffff;
2364 2380 }
@@ -2373,15 +2389,16 @@
2373 2389 display: flex;
2374 2390 }
2375 2391 .eps-dialog__button {
2376 2392 flex: 1;
2377 - border-block-start: 1px solid var(--hr-color);
2393 + border-top: 1px solid var(--hr-color);
2378 2394 line-height: 2.75rem;
2379 2395 text-align: center;
2380 2396 justify-content: center;
2381 2397 }
2382 2398 .eps-dialog__button:last-child:not(:first-child) {
2383 - border-inline-start: 1px solid var(--hr-color);
2399 + -webkit-border-start: 1px solid var(--hr-color);
2400 + border-inline-start: 1px solid var(--hr-color);
2384 2401 }
2385 2402
2386 2403 .e-app__popover {
2387 2404 display: none;
@@ -2396,12 +2413,12 @@
2396 2413 }
2397 2414 .e-app__popover:before {
2398 2415 content: "";
2399 2416 position: absolute;
2400 - inset-block-start: -16px;
2401 - inset-inline-end: var(--popover-arrow-offset-end, 22px);
2417 + top: -16px;
2418 + right: var(--popover-arrow-offset-end, 22px);
2402 2419 border: 8px solid transparent;
2403 - border-block-end-color: #fff;
2420 + border-bottom-color: #fff;
2404 2421 }
2405 2422
2406 2423 .eps-inline-link {
2407 2424 color: var(--eps-inline-link-color);
@@ -2418,9 +2435,9 @@
2418 2435 .eps-inline-link--color-danger {
2419 2436 --eps-inline-link-color: #DC2626;
2420 2437 }
2421 2438 .eps-inline-link--color-cta {
2422 - --eps-inline-link-color: #93003f;
2439 + --eps-inline-link-color: #524CFF;
2423 2440 }
2424 2441 .eps-inline-link--color-link {
2425 2442 --eps-inline-link-color: #515962;
2426 2443 }
@@ -2442,16 +2459,13 @@
2442 2459 --eps-text-field-background-color: transparent;
2443 2460 --eps-text-field-placeholder-color: #69727D;
2444 2461 --eps-text-field-outlined-border-color: #9DA5AE;
2445 2462 --eps-text-field-outlined-focus-border-color: #515962;
2446 - --eps-text-field-standard-border-color: #9DA5AE;
2447 - --eps-text-field-standard-focus-border-color: #515962;
2448 - --border: 1px solid var(--eps-text-field-outlined-border-color);
2449 2463 width: 100%;
2450 2464 color: var(--eps-text-field-color);
2451 2465 background-color: var(--eps-text-field-background-color);
2452 2466 border: 0;
2453 - margin-block-end: 5px;
2467 + margin-bottom: 5px;
2454 2468 outline: none;
2455 2469 font-family: Roboto, Arial, Helvetica, Verdana, sans-serif;
2456 2470 font-size: 0.875rem;
2457 2471 font-weight: 400;
@@ -2458,22 +2472,14 @@
2458 2472 line-height: 1.5;
2459 2473 }
2460 2474 .eps-text-field--outlined {
2461 2475 border-radius: 0.1875rem;
2462 - border: var(--border);
2476 + border: 1px solid var(--eps-text-field-outlined-border-color);
2463 2477 padding: 0.625rem;
2464 2478 }
2465 2479 .eps-text-field--outlined:focus {
2466 2480 border-color: var(--eps-text-field-outlined-focus-border-color);
2467 2481 }
2468 -.eps-text-field--standard {
2469 - padding-top: 0.625rem;
2470 - padding-bottom: 0.625rem;
2471 - border-bottom: var(--border);
2472 -}
2473 -.eps-text-field--standard:focus {
2474 - border-color: var(--eps-text-field-standard-focus-border-color);
2475 -}
2476 2482 .eps-text-field::-moz-placeholder {
2477 2483 color: var(--eps-text-field-placeholder-color);
2478 2484 font-family: Roboto, Arial, Helvetica, Verdana, sans-serif;
2479 2485 font-size: 0.875rem;
@@ -2500,14 +2506,8 @@
2500 2506 }
2501 2507 .eps-theme-dark--outlined:focus {
2502 2508 border-color: var(--eps-text-field-outlined-focus-border-color);
2503 2509 }
2504 -.eps-theme-dark--standard {
2505 - border-color: var(--eps-text-field-standard-border-color);
2506 -}
2507 -.eps-theme-dark--standard:focus {
2508 - border-color: var(--eps-text-field-standard-focus-border-color);
2509 -}
2510 2510
2511 2511 .e-app-import-export-content-layout {
2512 2512 display: flex;
2513 2513 justify-content: center;
@@ -2527,9 +2527,10 @@
2527 2527 --e-app-export-kit-content-sm-notice-color: #BABFC5;
2528 2528 }
2529 2529 .e-app-export-kit-content__checkbox {
2530 2530 flex-shrink: 0;
2531 - margin-inline-end: 0.75rem;
2531 + -webkit-margin-end: 0.75rem;
2532 + margin-inline-end: 0.75rem;
2532 2533 }
2533 2534 .e-app-export-kit-content__title {
2534 2535 color: var(--e-app-export-kit-content-title-color);
2535 2536 }
@@ -2534,12 +2535,13 @@
2534 2535 color: var(--e-app-export-kit-content-title-color);
2535 2536 }
2536 2537 .e-app-export-kit-content__description {
2537 2538 color: var(--e-app-export-kit-content-description-color);
2538 - margin-inline-end: 1.25rem;
2539 + -webkit-margin-end: 1.25rem;
2540 + margin-inline-end: 1.25rem;
2539 2541 }
2540 2542 .e-app-export-kit-content__notice {
2541 - margin-block-start: 1rem;
2543 + margin-top: 1rem;
2542 2544 }
2543 2545 .e-app-export-kit-content__small-notice {
2544 2546 font-style: italic;
2545 2547 color: var(--e-app-export-kit-content-sm-notice-color);
@@ -2555,9 +2557,9 @@
2555 2557 --e-app-import-export-kit-data-site-area-color: #3f444b;
2556 2558 --e-app-import-export-kit-data-included-color: #69727D;
2557 2559 }
2558 2560 .e-app-import-export-kit-data__site-area, .e-app-import-export-kit-data__included {
2559 - margin-block-end: 0;
2561 + margin-bottom: 0;
2560 2562 }
2561 2563 .e-app-import-export-kit-data__site-area {
2562 2564 color: var(--e-app-import-export-kit-data-site-area-color);
2563 2565 font-weight: bold;
@@ -2575,12 +2577,12 @@
2575 2577 --e-app-import-resolver-panel-header-background-color: #ffffff;
2576 2578 --e-app-import-resolver-panel-body-background-color: rgba(255, 255, 255, 0.5);
2577 2579 --e-app-import-resolver-conflicts-asset-border-color: #818A96;
2578 2580 --e-app-import-resolver-conflicts-asset-inactive-color: #69727D;
2579 - padding-block-end: 1.25rem;
2581 + padding-bottom: 1.25rem;
2580 2582 }
2581 2583 .e-app-import-resolver__notice {
2582 - margin-block-end: 1.25rem;
2584 + margin-bottom: 1.25rem;
2583 2585 }
2584 2586 .e-app-import-resolver__panel, .e-app-import-resolver__panel:hover {
2585 2587 background-color: initial;
2586 2588 }
@@ -2594,23 +2596,28 @@
2594 2596 box-shadow: 0 2px 3px 1px var(--color-box-shadow-color);
2595 2597 }
2596 2598 .e-app-import-resolver-conflicts__checkbox {
2597 2599 flex-shrink: 0;
2598 - margin-inline-end: 0.75rem;
2600 + -webkit-margin-end: 0.75rem;
2601 + margin-inline-end: 0.75rem;
2599 2602 }
2600 2603 .e-app-import-resolver-conflicts__title {
2601 2604 line-height: 1;
2602 2605 }
2603 2606 .e-app-import-resolver-conflicts__asset:not(:first-child) {
2604 - border-inline-start: 2px solid var(--e-app-import-resolver-conflicts-asset-border-color);
2605 - padding-inline-start: 1rem;
2606 - margin-inline-start: 1rem;
2607 + -webkit-border-start: 2px solid var(--e-app-import-resolver-conflicts-asset-border-color);
2608 + border-inline-start: 2px solid var(--e-app-import-resolver-conflicts-asset-border-color);
2609 + -webkit-padding-start: 1rem;
2610 + padding-inline-start: 1rem;
2611 + -webkit-margin-start: 1rem;
2612 + margin-inline-start: 1rem;
2607 2613 }
2608 2614 .e-app-import-resolver-conflicts__asset:not(.active) {
2609 2615 color: var(--e-app-import-resolver-conflicts-asset-inactive-color);
2610 2616 }
2611 2617 .e-app-import-resolver-conflicts__edit-template {
2612 - margin-inline-start: 0.3125rem;
2618 + -webkit-margin-start: 0.3125rem;
2619 + margin-inline-start: 0.3125rem;
2613 2620 }
2614 2621
2615 2622 .eps-theme-dark .e-app-import-resolver {
2616 2623 --e-app-import-resolver-panel-header-background-color: #69727D;
@@ -2640,43 +2647,36 @@
2640 2647 --eps-panel-body-background-color: transparent;
2641 2648 }
2642 2649
2643 2650 .e-app-export-kit {
2644 - padding-block-end: 1.25rem;
2651 + padding-bottom: 1.25rem;
2645 2652 }
2653 +.e-app-export-kit-information {
2654 + margin-top: 1.25rem;
2655 +}
2646 2656 .e-app-export-kit-information__field-header {
2647 - margin-block-end: 0.625rem;
2657 + margin-bottom: 0.625rem;
2648 2658 }
2649 2659 .e-app-export-kit-information__label {
2650 2660 margin: 0;
2651 2661 }
2652 2662 .e-app-export-kit-information__info-icon {
2653 - margin-inline-start: 0.625rem;
2663 + -webkit-margin-start: 0.625rem;
2664 + margin-inline-start: 0.625rem;
2654 2665 }
2655 -.e-app-export-kit-information__content {
2656 - gap: 16px;
2666 +.e-app-export-kit-info-modal__icon {
2667 + -webkit-padding-start: 0.625rem;
2668 + padding-inline-start: 0.625rem;
2657 2669 }
2658 -.e-app-export-kit-information__field--error {
2659 - border-color: var(--e-a-color-danger);
2670 +.e-app-export-kit-info-modal__heading {
2671 + margin-bottom: 1.25rem;
2660 2672 }
2661 -.e-app-export-kit-information__error-container {
2662 - height: 20px;
2663 - display: flex;
2664 - align-items: flex-start;
2665 - margin-block-start: 4px;
2666 -}
2667 -.e-app-export-kit-information__validation-error {
2668 - color: var(--e-a-color-danger);
2669 -}
2670 -.e-app-export-kit__content {
2671 - gap: 20px;
2672 -}
2673 2673
2674 2674 .e-app-import-export-info-modal__section:not(:first-child) {
2675 - margin-block-start: 1.875rem;
2675 + margin-top: 1.875rem;
2676 2676 }
2677 2677 .e-app-import-export-info-modal__heading {
2678 - margin-block-end: 1.25rem;
2678 + margin-bottom: 1.25rem;
2679 2679 }
2680 2680
2681 2681 :root {
2682 2682 --eps-badge-background-color: #ffffff;
@@ -2717,12 +2717,12 @@
2717 2717 outline: none;
2718 2718 }
2719 2719 .eps-collapse__icon {
2720 2720 transition: all 150ms;
2721 - scale: calc(1 * var(--direction-multiplier)) 1;
2721 + transform: rotate(0deg);
2722 2722 }
2723 2723 .eps-collapse__content {
2724 - margin-block-start: 0.625rem;
2724 + margin-top: 0.625rem;
2725 2725 display: none;
2726 2726 }
2727 2727 .eps-collapse[data-open] .eps-collapse__content {
2728 2728 display: block;
@@ -2730,32 +2730,32 @@
2730 2730 .eps-collapse[data-open] .eps-collapse__icon {
2731 2731 transform: rotate(90deg);
2732 2732 }
2733 2733
2734 -.e-kit-library-promotion {
2735 - --e-kit-library-promotion-color: tints(600);
2734 +.e-kit-library-bottom-promotion {
2735 + --e-kit-library-bottom-promotion-color: tints(600);
2736 2736 }
2737 2737
2738 -.eps-theme-dark .e-kit-library-promotion {
2739 - --e-kit-library-promotion-color: dark-tints(400);
2738 +.eps-theme-dark .e-kit-library-bottom-promotion {
2739 + --e-kit-library-bottom-promotion-color: dark-tints(400);
2740 2740 }
2741 2741
2742 -.e-kit-library-promotion {
2742 +.e-kit-library-bottom-promotion {
2743 2743 width: 100%;
2744 2744 text-align: center;
2745 - margin-block-start: 1.875rem;
2746 - color: var(--e-kit-library-promotion-color);
2745 + margin-top: 1.875rem;
2746 + color: var(--e-kit-library-bottom-promotion-color);
2747 2747 }
2748 2748
2749 2749 .e-kit-library__error-screen {
2750 - margin-block-start: 2.75rem;
2750 + margin-top: 2.75rem;
2751 2751 }
2752 2752 .e-kit-library__error-screen-title {
2753 - margin-block-start: 2.75rem;
2754 - margin-block-end: 0;
2753 + margin-top: 2.75rem;
2754 + margin-bottom: 0;
2755 2755 }
2756 2756 .e-kit-library__error-screen-description {
2757 - margin-block-start: 1.5rem;
2757 + margin-top: 1.5rem;
2758 2758 color: #69727D;
2759 2759 text-align: center;
2760 2760 max-width: 520px;
2761 2761 }
@@ -2776,45 +2776,37 @@
2776 2776 background-color: rgba(220, 38, 38, 0.1);
2777 2777 }
2778 2778
2779 2779 .e-kit-library__filter-indication {
2780 - margin-block-start: 1.5rem;
2780 + margin-top: 1.5rem;
2781 2781 display: flex;
2782 2782 align-items: center;
2783 2783 }
2784 2784 .e-kit-library__filter-indication-text {
2785 - margin-block-end: 0;
2785 + margin-bottom: 0;
2786 2786 display: flex;
2787 2787 align-items: center;
2788 2788 }
2789 2789 .e-kit-library__filter-indication-badge {
2790 - margin-inline-start: 0.3125rem;
2790 + margin-left: 0.3125rem;
2791 2791 display: flex;
2792 2792 align-items: center;
2793 2793 }
2794 2794 .e-kit-library__filter-indication-badge-remove {
2795 - margin-inline-start: 0.3125rem;
2795 + margin-left: 0.3125rem;
2796 2796 font-size: 0.875rem;
2797 2797 }
2798 2798 .e-kit-library__filter-indication-button {
2799 - margin-inline-start: 1.5rem;
2799 + margin-left: 1.5rem;
2800 2800 }
2801 2801
2802 +#eps-app-header-btn-apply,
2802 2803 #eps-app-header-btn-promotion,
2803 2804 #eps-app-header-btn-connect {
2804 - margin-inline-start: 0.625rem;
2805 - margin-inline-end: 0.625rem;
2805 + margin-left: 0.625rem;
2806 + margin-right: 0.625rem;
2806 2807 }
2807 2808
2808 -#eps-app-header-btn-apply {
2809 - margin-inline-start: 0.625rem;
2810 -}
2811 -
2812 -#eps-app-header-btn-download {
2813 - margin-inline-end: 1rem;
2814 - margin-inline-start: 1rem;
2815 -}
2816 -
2817 2809 .e-kit-library__apply-button {
2818 2810 display: flex;
2819 2811 align-items: center;
2820 2812 justify-content: center;
@@ -2831,8 +2823,11 @@
2831 2823
2832 2824 .e-kit-library__kit-item-overlay {
2833 2825 height: 100%;
2834 2826 }
2827 +.e-kit-library__kit-item-overlay > *:first-child {
2828 + flex: 1;
2829 +}
2835 2830 .e-kit-library__kit-item-overlay-overview-button {
2836 2831 display: flex;
2837 2832 flex-direction: column;
2838 2833 align-items: center;
@@ -2842,9 +2837,9 @@
2842 2837 width: 100%;
2843 2838 }
2844 2839 .e-kit-library__kit-item-overlay-overview-button > i {
2845 2840 font-size: 2rem;
2846 - margin-block-end: 5px;
2841 + margin-bottom: 5px;
2847 2842 }
2848 2843 .e-kit-library__kit-item-overlay-overview-button > span {
2849 2844 font-size: 0.9rem;
2850 2845 }
@@ -2855,9 +2850,9 @@
2855 2850 align-items: center;
2856 2851 justify-content: center;
2857 2852 padding: 10px;
2858 2853 font-size: 13px;
2859 - color: #93003f;
2854 + color: #524CFF;
2860 2855 background: var(--e-kit-library-kit-item-overlay-promotion-button-background-color);
2861 2856 }
2862 2857 .e-kit-library__kit-item-overlay-promotion-button > * {
2863 2858 margin: 0 3px;
@@ -2862,104 +2857,16 @@
2862 2857 .e-kit-library__kit-item-overlay-promotion-button > * {
2863 2858 margin: 0 3px;
2864 2859 }
2865 2860 .e-kit-library__kit-item-subscription-plan-badge {
2866 - --e-a-color-brand: #467FF7;
2867 -}
2868 -.e-kit-library__kit-item-subscription-plan-badge.promoted {
2869 - --e-a-color-brand: #92003B;
2870 -}
2871 -.e-kit-library__kit-item-subscription-plan-badge {
2872 2861 position: absolute;
2873 - inset-block-start: 0;
2874 - inset-inline-end: 0;
2862 + top: 0;
2863 + right: 0;
2875 2864 margin: 0.3125rem;
2876 2865 background-color: var(--e-a-color-brand);
2877 2866 color: #ffffff;
2878 2867 text-transform: uppercase;
2879 2868 }
2880 -.e-kit-library__kit-item-header {
2881 - position: relative;
2882 -}
2883 -.e-kit-library__kit-item-lock-icon {
2884 - font-size: 14px;
2885 - margin-inline-end: 8px;
2886 - color: var(--card-headline-color);
2887 - cursor: pointer;
2888 -}
2889 -.e-kit-library__kit-item-actions-menu i {
2890 - font-size: 16px;
2891 -}
2892 -.e-kit-library__kit-item-actions-popover {
2893 - display: flex;
2894 - flex-direction: column;
2895 - align-items: start;
2896 - min-width: 0;
2897 - padding: 12px 0;
2898 - position: absolute;
2899 - inset-block-start: 25px;
2900 - inset-inline-start: 100%;
2901 - transform: translateX(calc(-100% * var(--direction-multiplier)));
2902 -}
2903 -.e-kit-library__kit-item-actions-popover-item {
2904 - display: flex;
2905 - height: 30px;
2906 - width: 100%;
2907 - align-items: center;
2908 - gap: 8px;
2909 - padding: 0 12px;
2910 - cursor: pointer;
2911 -}
2912 -.e-kit-library__kit-item-actions-popover-item i {
2913 - font-size: 16px;
2914 -}
2915 -.e-kit-library__kit-item-actions-popover-item:hover {
2916 - background-color: var(--e-a-bg-hover);
2917 -}
2918 -.e-kit-library__kit-item-actions-popover-item--danger {
2919 - color: var(--e-a-color-danger);
2920 -}
2921 -.e-kit-library__kit-item-actions-popover-item--danger:hover {
2922 - background-color: var(--e-a-bg-danger);
2923 -}
2924 -.e-kit-library__kit-item-actions-popover-item--danger i {
2925 - color: var(--e-a-color-danger);
2926 -}
2927 -.e-kit-library__kit-item-cloud-overlay {
2928 - height: 100%;
2929 - display: flex;
2930 - flex-direction: column;
2931 - align-items: center;
2932 - justify-content: center;
2933 -}
2934 -.e-kit-library__kit-item-cloud-overlay-import-button {
2935 - display: flex;
2936 - align-items: center;
2937 - justify-content: center;
2938 - padding: 8px 22px;
2939 - gap: 8px;
2940 -}
2941 -.e-kit-library__kit-item-cloud-overlay-import-button > i {
2942 - font-size: 20px;
2943 - font-weight: 600;
2944 -}
2945 -.e-kit-library__kit-item-cloud-overlay-import-button > span {
2946 - font-size: 15px;
2947 -}
2948 -.e-kit-library__kit-item-cloud-overlay i.eicon-lock {
2949 - font-size: 48px;
2950 - color: rgba(255, 255, 255, 0.8);
2951 - cursor: pointer;
2952 -}
2953 -.e-kit-library__kit-item--locked {
2954 - opacity: 0.6;
2955 -}
2956 -.e-kit-library__kit-item--locked .eps-card__image {
2957 - opacity: 0.7;
2958 -}
2959 -.e-kit-library__kit-item--locked .eps-card__overlay {
2960 - background-color: rgba(0, 0, 0, 0.5);
2961 -}
2962 2869
2963 2870 :root {
2964 2871 --e-kit-library-header-back-border: 1px solid var(--e-a-border-color);
2965 2872 --e-kit-library-header-back-color: #69727D;
@@ -2971,15 +2878,15 @@
2971 2878 }
2972 2879
2973 2880 .e-kit-library__header-back {
2974 2881 color: var(--e-kit-library-header-back-color);
2975 - padding-inline-end: 1.25rem;
2976 - padding-inline-start: 0.3125rem;
2882 + padding-right: 1.25rem;
2883 + padding-left: 0.3125rem;
2977 2884 display: inline-flex;
2978 2885 justify-content: center;
2979 2886 align-items: center;
2980 2887 height: 100%;
2981 - border-inline-end: var(--e-kit-library-header-back-border);
2888 + border-right: var(--e-kit-library-header-back-border);
2982 2889 }
2983 2890 .e-kit-library__header-back-container {
2984 2891 flex: 1;
2985 2892 height: 100%;
@@ -2984,9 +2891,9 @@
2984 2891 flex: 1;
2985 2892 height: 100%;
2986 2893 }
2987 2894 .e-kit-library__header-back .eps-icon {
2988 - scale: calc(1 * var(--direction-multiplier)) 1;
2895 + transform: rotate(0deg);
2989 2896 }
2990 2897
2991 2898 .e-kit-library__page-loader {
2992 2899 width: 100%;
@@ -3044,9 +2951,9 @@
3044 2951 font-size: 1.25rem;
3045 2952 padding: 0.625rem;
3046 2953 color: #69727D;
3047 2954 position: absolute;
3048 - inset-block-start: 0;
2955 + top: 0;
3049 2956 inset-inline-start: 0;
3050 2957 height: 100%;
3051 2958 display: flex;
3052 2959 align-items: center;
@@ -3059,10 +2966,10 @@
3059 2966 font-size: 0.875rem;
3060 2967 padding: 0.625rem;
3061 2968 color: #69727D;
3062 2969 position: absolute;
3063 - inset-block-start: 0;
3064 - inset-inline-end: 0;
2970 + top: 0;
2971 + right: 0;
3065 2972 height: 100%;
3066 2973 display: flex;
3067 2974 align-items: center;
3068 2975 justify-content: center;
@@ -3097,10 +3004,11 @@
3097 3004 .eps-sort-select__select-wrapper::after {
3098 3005 content: "\e8ad";
3099 3006 font-family: eicons;
3100 3007 position: absolute;
3101 - inset-inline-end: 0.625rem;
3102 - inset-block: 0;
3008 + right: 0.625rem;
3009 + top: 0;
3010 + bottom: 0;
3103 3011 color: #69727D;
3104 3012 display: flex;
3105 3013 align-items: center;
3106 3014 justify-content: center;
@@ -3123,9 +3031,9 @@
3123 3031 }
3124 3032 .eps-sort-select__button {
3125 3033 padding: 0.75rem 0.75rem;
3126 3034 background: var(--eps-sort-select-button-background-color);
3127 - border-inline-start: var(--eps-sort-select-button-border);
3035 + border-left: var(--eps-sort-select-button-border);
3128 3036 line-height: 1;
3129 3037 color: #69727D;
3130 3038 }
3131 3039
@@ -3137,16 +3045,16 @@
3137 3045 --e-kit-library-tags-filter-list-search-background-color: #515962;
3138 3046 }
3139 3047
3140 3048 .e-kit-library__tags-filter {
3141 - margin-block-start: 2.75rem;
3049 + margin-top: 2.75rem;
3142 3050 }
3143 3051 .e-kit-library__tags-filter-list {
3144 - margin-block-end: 2.75rem;
3052 + margin-bottom: 2.75rem;
3145 3053 }
3146 3054 .e-kit-library__tags-filter-list .eps-collapse__title {
3147 - padding-inline-end: 1.875rem;
3148 - padding-inline-start: 1.875rem;
3055 + padding-right: 1.875rem;
3056 + padding-left: 1.875rem;
3149 3057 text-transform: uppercase;
3150 3058 }
3151 3059 .e-kit-library__tags-filter-list .eps-collapse__content {
3152 3060 margin: 0.3125rem 1.875rem;
@@ -3155,9 +3063,9 @@
3155 3063 max-height: 250px;
3156 3064 overflow: auto;
3157 3065 }
3158 3066 .e-kit-library__tags-filter-list-search {
3159 - margin-block-end: 0.625rem;
3067 + margin-bottom: 0.625rem;
3160 3068 }
3161 3069 .e-kit-library__tags-filter-list-search .eps-search-input {
3162 3070 background: var(--e-kit-library-tags-filter-list-search-background-color);
3163 3071 }
@@ -3167,9 +3075,9 @@
3167 3075 align-items: center;
3168 3076 font-weight: 500;
3169 3077 }
3170 3078 .e-kit-library__tags-filter-list-item input {
3171 - margin-inline-end: 0.3125rem;
3079 + margin-right: 0.3125rem;
3172 3080 }
3173 3081
3174 3082 .e-kit-library #eps-app-header-btn-refetch {
3175 3083 padding: 0;
@@ -3175,9 +3083,9 @@
3175 3083 padding: 0;
3176 3084 }
3177 3085
3178 3086 .e-kit-library-header-info-modal-container {
3179 - margin-block-end: 2.75rem;
3087 + margin-bottom: 2.75rem;
3180 3088 }
3181 3089
3182 3090 .e-kit-library__tooltip {
3183 3091 padding: 5px 12px;
@@ -3185,9 +3093,9 @@
3185 3093 background-color: #26292C;
3186 3094 font-size: 10px;
3187 3095 }
3188 3096 .e-kit-library__tooltip:before {
3189 - border-block-end-color: #26292C;
3097 + border-bottom-color: #26292C;
3190 3098 }
3191 3099
3192 3100 .e-kit-library__index-layout-container {
3193 3101 flex-grow: 1;
@@ -3194,32 +3102,26 @@
3194 3102 overflow-y: auto;
3195 3103 display: flex;
3196 3104 flex-direction: column;
3197 3105 }
3198 -.e-kit-library__index-layout-heading {
3106 +.e-kit-library__index-layout-top-area {
3199 3107 padding: 1.875rem 2.75rem;
3200 3108 position: sticky;
3201 - inset-block-start: -1px;
3109 + top: -1px;
3202 3110 width: 100%;
3203 3111 z-index: 2;
3204 3112 background-color: var(--app-background-color);
3205 3113 gap: 1.5rem;
3206 - align-items: center;
3207 3114 }
3208 -.e-kit-library__index-layout-heading-search, .e-kit-library__index-layout-heading-sort {
3115 +.e-kit-library__index-layout-top-area-search, .e-kit-library__index-layout-top-area-sort {
3209 3116 min-width: 265px;
3210 3117 }
3211 -.e-kit-library__index-layout-heading-search {
3118 +.e-kit-library__index-layout-top-area-search {
3212 3119 flex: 1;
3213 3120 }
3214 -.e-kit-library__index-layout-heading-quota {
3215 - display: flex;
3216 - align-items: center;
3217 - justify-content: flex-end;
3218 -}
3219 3121 .e-kit-library__index-layout-main {
3220 - padding-block-start: 0;
3221 - padding-block-end: 1.5rem;
3122 + padding-top: 0;
3123 + padding-bottom: 1.5rem;
3222 3124 overflow-y: hidden;
3223 3125 height: auto;
3224 3126 flex: 1 0 auto;
3225 3127 display: flex;
@@ -3225,45 +3127,8 @@
3225 3127 display: flex;
3226 3128 flex-direction: column;
3227 3129 justify-content: space-between;
3228 3130 }
3229 -.e-kit-library__index-layout-main.e-kit-library__connect-container {
3230 - justify-content: center;
3231 - align-items: center;
3232 -}
3233 -.e-kit-library__connect-button {
3234 - background-color: var(--e-a-btn-bg-primary);
3235 - color: var(--e-a-btn-color);
3236 - border-radius: 4px;
3237 - padding: 8px;
3238 -}
3239 -.e-kit-library__connect-button:hover {
3240 - opacity: 0.8;
3241 -}
3242 -.e-kit-library__upgrade-button {
3243 - background-color: var(--e-a-color-accent);
3244 - color: var(--e-a-color-txt-invert);
3245 - border-radius: 4px;
3246 - padding: 8px;
3247 -}
3248 -.e-kit-library__upgrade-button:hover {
3249 - opacity: 0.8;
3250 -}
3251 -.e-kit-library .eicon-library-cloud-connect,
3252 -.e-kit-library .eicon-library-subscription-upgrade {
3253 - font-size: 65px;
3254 -}
3255 -.e-kit-library .connect-badge {
3256 - color: #C00BB9;
3257 - margin-inline-start: 10px;
3258 -}
3259 -.e-kit-library .upgrade-badge {
3260 - color: #93003f;
3261 - border: 1px solid #93003f;
3262 - border-radius: 10px;
3263 - padding: 2px 6px;
3264 - margin-inline-start: 10px;
3265 -}
3266 3131
3267 3132 .e-kit-library__tags-filter {
3268 3133 --e-kit-library-item-sidebar-header-title-color: #515962;
3269 3134 --e-kit-library-item-sidebar-description-color: #515962;
@@ -3285,23 +3150,23 @@
3285 3150 justify-content: space-between;
3286 3151 }
3287 3152 .e-kit-library__item-sidebar-header-title {
3288 3153 color: var(--e-kit-library-item-sidebar-header-title-color);
3289 - margin-block-end: 0;
3154 + margin-bottom: 0;
3290 3155 }
3291 3156 .e-kit-library__item-sidebar-thumbnail {
3292 - margin-block-start: 1.5rem;
3157 + margin-top: 1.5rem;
3293 3158 box-shadow: 0 4px 10px var(--color-box-shadow-color);
3294 3159 }
3295 3160 .e-kit-library__item-sidebar-description {
3296 - margin-block-start: 1.5rem;
3161 + margin-top: 1.5rem;
3297 3162 color: var(--e-kit-library-item-sidebar-description-color);
3298 3163 }
3299 3164 .e-kit-library__item-sidebar-collapse-tags {
3300 - margin-block-start: 2.75rem;
3165 + margin-top: 2.75rem;
3301 3166 }
3302 3167 .e-kit-library__item-sidebar-collapse-info {
3303 - margin-block-start: 1.875rem;
3168 + margin-top: 1.875rem;
3304 3169 }
3305 3170 .e-kit-library__item-sidebar-tags-container {
3306 3171 gap: 0.625rem;
3307 3172 }
@@ -3307,9 +3172,9 @@
3307 3172 }
3308 3173 .e-kit-library__item-information-text {
3309 3174 font-size: 0.8125rem;
3310 3175 color: var(--e-kit-library-item-information-text-color);
3311 - margin-block-end: 0.3125rem;
3176 + margin-bottom: 0.3125rem;
3312 3177 }
3313 3178
3314 3179 .e-kit-library {
3315 3180 --e-kit-library-content-overview-group-title-color: #515962;
@@ -3319,12 +3184,12 @@
3319 3184 --e-kit-library-content-overview-group-title-color: #BABFC5;
3320 3185 }
3321 3186
3322 3187 .e-kit-library__content-overview-group-item {
3323 - margin-block-end: 2.75rem;
3188 + margin-bottom: 2.75rem;
3324 3189 }
3325 3190 .e-kit-library__content-overview-group-title {
3326 - margin-block-end: 1.875rem;
3191 + margin-bottom: 1.875rem;
3327 3192 color: var(--e-kit-library-content-overview-group-title-color);
3328 3193 }
3329 3194
3330 3195 .e-kit-library__preview-responsive-controls {
@@ -3345,10 +3210,10 @@
3345 3210 }
3346 3211
3347 3212 .e-kit-library__preview-loader {
3348 3213 position: absolute;
3349 - inset-block-start: 0;
3350 - inset-inline-start: 0;
3214 + top: 0;
3215 + left: 0;
3351 3216 z-index: 0;
3352 3217 }
3353 3218 .e-kit-library__preview-iframe {
3354 3219 border: none;
@@ -3376,10 +3241,10 @@
3376 3241 align-items: center;
3377 3242 justify-content: center;
3378 3243 font-size: 0.875rem;
3379 3244 position: absolute;
3380 - inset-block-start: 50%;
3381 - inset-inline-end: var(--e-app-collapse-toggle-icon-spacing);
3245 + top: 50%;
3246 + right: var(--e-app-collapse-toggle-icon-spacing);
3382 3247 transform: translateY(-50%);
3383 3248 }
3384 3249 .e-app-collapse-toggle__icon:before {
3385 3250 transition: all 0.2s linear;
@@ -3394,10 +3259,10 @@
3394 3259 display: block;
3395 3260 }
3396 3261
3397 3262 [dir=rtl] .e-app-collapse-toggle__icon {
3398 - inset-inline-start: var(--e-app-collapse-toggle-icon-spacing);
3399 - inset-inline-end: initial;
3263 + right: initial;
3264 + left: var(--e-app-collapse-toggle-icon-spacing);
3400 3265 }
3401 3266
3402 3267 .eps-theme-dark .e-app-collapse {
3403 3268 --e-app-collapse-icon-color: #BABFC5;
@@ -3404,19 +3269,19 @@
3404 3269 }
3405 3270
3406 3271 .e-app-import-plugins {
3407 3272 --e-app-import-plugins-selection-section-heading-color: #515962;
3408 - padding-block-end: 1.5rem;
3273 + padding-bottom: 1.5rem;
3409 3274 }
3410 3275 .e-app-import-plugins__section {
3411 - margin-block-start: 1.875rem;
3276 + margin-top: 1.875rem;
3412 3277 }
3413 3278 .e-app-import-plugins__section-heading {
3414 3279 color: var(--e-app-import-plugins-selection-section-heading-color);
3415 - margin-block-end: 1rem;
3280 + margin-bottom: 1rem;
3416 3281 }
3417 3282 .e-app-import-plugins__versions-notice {
3418 - margin-block-end: 0.75rem;
3283 + margin-bottom: 0.75rem;
3419 3284 }
3420 3285
3421 3286 .eps-theme-dark .e-app-import-plugins {
3422 3287 --e-app-import-plugins-selection-section-heading-color: #BABFC5;
@@ -3443,12 +3308,12 @@
3443 3308 .eps-table__head .eps-table__cell {
3444 3309 text-align: start;
3445 3310 }
3446 3311 .eps-table__row {
3447 - border-block-end: 1px solid var(--e-a-border-color);
3312 + border-bottom: 1px solid var(--e-a-border-color);
3448 3313 }
3449 3314 .eps-table__row:last-child {
3450 - border-block-end: none;
3315 + border-bottom: none;
3451 3316 }
3452 3317 .eps-table__body .eps-table__cell:first-child {
3453 3318 border-radius: 0.1875rem 0 0 0.1875rem;
3454 3319 }
@@ -3455,9 +3320,10 @@
3455 3320 .eps-table__body .eps-table__cell:last-child {
3456 3321 border-radius: 0 0.1875rem 0.1875rem 0;
3457 3322 }
3458 3323 .eps-table--selection .eps-table__cell:first-child {
3459 - padding-inline-end: 0;
3324 + -webkit-padding-end: 0;
3325 + padding-inline-end: 0;
3460 3326 }
3461 3327
3462 3328 .eps-theme-dark .eps-table {
3463 3329 --eps-table-body-color: #BABFC5;
@@ -3472,17 +3338,17 @@
3472 3338
3473 3339 .e-app-import-plugins-pro-banner {
3474 3340 --e-app-import-plugins-pro-banner-heading-color: #3f444b;
3475 3341 --e-app-import-plugins-pro-banner-description-color: #515962;
3476 - margin-block-end: 1.875rem;
3342 + margin-bottom: 1.875rem;
3477 3343 }
3478 3344 .e-app-import-plugins-pro-banner__heading {
3479 3345 color: var(--e-app-import-plugins-pro-banner-heading-color);
3480 - margin-block-end: 0.625rem;
3346 + margin-bottom: 0.625rem;
3481 3347 }
3482 3348 .e-app-import-plugins-pro-banner__description {
3483 3349 color: var(--e-app-import-plugins-pro-banner-description-color);
3484 - margin-block-end: 0;
3350 + margin-bottom: 0;
3485 3351 }
3486 3352
3487 3353 .eps-theme-dark .e-app-import-plugins-pro-banner {
3488 3354 --e-app-import-plugins-pro-banner-heading-color: #9DA5AE;
@@ -3489,16 +3355,16 @@
3489 3355 --e-app-import-plugins-pro-banner-description-color: #BABFC5;
3490 3356 }
3491 3357
3492 3358 .e-app-export-plugins {
3493 - padding-block-end: 1.25rem;
3359 + padding-bottom: 1.25rem;
3494 3360 }
3495 3361
3496 3362 .e-app-import-content {
3497 - padding-block-end: 1.25rem;
3363 + padding-bottom: 1.25rem;
3498 3364 }
3499 3365 .e-app-import-content__plugins-notice {
3500 - margin-block-end: 1.25rem;
3366 + margin-bottom: 1.25rem;
3501 3367 }
3502 3368
3503 3369 .e-app-import-plugins-activation__installing-plugins {
3504 3370 padding: 0.625rem 0;
@@ -3503,16 +3369,17 @@
3503 3369 .e-app-import-plugins-activation__installing-plugins {
3504 3370 padding: 0.625rem 0;
3505 3371 }
3506 3372 .e-app-import-plugins-activation__plugin-name {
3507 - margin-inline-start: 0.5rem;
3373 + -webkit-margin-start: 0.5rem;
3374 + margin-inline-start: 0.5rem;
3508 3375 }
3509 3376 .e-app-import-plugins-activation__plugin-status-item {
3510 - margin-block-end: 0.75rem;
3377 + margin-bottom: 0.75rem;
3511 3378 }
3512 3379
3513 3380 .e-app-import-export-plugins-table__cell-content {
3514 - margin-block-end: 0;
3381 + margin-bottom: 0;
3515 3382 text-transform: capitalize;
3516 3383 }
3517 3384
3518 3385 .e-app-import-export-loader {
@@ -3524,10 +3391,10 @@
3524 3391 font-size: 1.85rem;
3525 3392 }
3526 3393 .e-app-import-export-loader--absolute-center {
3527 3394 position: absolute;
3528 - inset-block-start: 50%;
3529 - inset-inline-start: 50%;
3395 + top: 50%;
3396 + left: 50%;
3530 3397 transform: translateX(-50%) translateY(-50%);
3531 3398 }
3532 3399
3533 3400 .eps-theme-dark .e-app-import-export-loader {
@@ -3536,17 +3403,17 @@
3536 3403
3537 3404 .e-app-import-export-message-banner {
3538 3405 --e-app-import-export-message-banner-heading-color: #3f444b;
3539 3406 --e-app-import-export-message-banner-description-color: #515962;
3540 - margin-block-end: 1.875rem;
3407 + margin-bottom: 1.875rem;
3541 3408 }
3542 3409 .e-app-import-export-message-banner__heading {
3543 3410 color: var(--e-app-import-export-message-banner-heading-color);
3544 - margin-block-end: 0.625rem;
3411 + margin-bottom: 0.625rem;
3545 3412 }
3546 3413 .e-app-import-export-message-banner__description {
3547 3414 color: var(--e-app-import-export-message-banner-description-color);
3548 - margin-block-end: 0;
3415 + margin-bottom: 0;
3549 3416 }
3550 3417
3551 3418 .eps-theme-dark .e-app-import-export-message-banner {
3552 3419 --e-app-import-export-message-banner-heading-color: #9DA5AE;
@@ -3553,166 +3420,464 @@
3553 3420 --e-app-import-export-message-banner-description-color: #BABFC5;
3554 3421 }
3555 3422
3556 3423 .e-app-import-connect-pro-notice {
3557 - margin-block-end: 1.25rem;
3424 + margin-bottom: 1.25rem;
3558 3425 }
3559 3426
3560 3427 .e-app-import-failed-plugins-notice {
3561 - margin-block-end: 1.25rem;
3428 + margin-bottom: 1.25rem;
3562 3429 }
3563 3430
3564 -.e-app-export-actions-container {
3431 +.e-onboarding {
3432 + font-family: "DM Sans", "Roboto", sans-serif;
3433 + color-scheme: light;
3434 +}
3435 +.e-onboarding .eps-app__main {
3436 + justify-content: center;
3437 + overflow-y: auto;
3438 +}
3439 +.e-onboarding__content {
3440 + max-width: 1135px;
3441 + padding: 2.75rem;
3442 + margin: initial;
3443 + overflow-y: initial;
3444 +}
3445 +.e-onboarding__checkbox-label {
3565 3446 display: flex;
3566 - gap: 15px;
3447 + line-height: 18px;
3448 + margin-bottom: 27px;
3449 +}
3450 +.e-onboarding__checkbox-input {
3451 + -webkit-margin-end: 14px;
3452 + margin-inline-end: 14px;
3453 + width: 16px;
3454 + height: 16px;
3455 + border-color: #69727D;
3456 + border-radius: 2px;
3457 +}
3458 +.e-onboarding__checkbox-input:checked {
3459 + background-color: #525861;
3460 +}
3461 +.e-onboarding__checkbox-input:checked::after {
3462 + margin-bottom: 15%;
3463 + width: 6px;
3464 + height: 9px;
3465 + border-width: 0 2px 2px 0;
3466 +}
3467 +.e-onboarding__feature-list {
3468 + margin-bottom: 40px;
3469 +}
3470 +.e-onboarding__text-input {
3471 + font-size: 14px;
3472 + width: 325px;
3473 + padding: 12px 16px;
3474 + color: #69727D;
3475 + border: 1px solid #9EA5AD;
3476 +}
3477 +.e-onboarding__text-input:focus-visible {
3478 + outline: initial;
3479 + border: 1px solid #3A3F45;
3480 +}
3481 +.e-onboarding__text-input::-moz-placeholder {
3482 + color: #C2C7CC;
3483 +}
3484 +.e-onboarding__text-input::placeholder {
3485 + color: #C2C7CC;
3486 +}
3487 +.e-onboarding__footnote {
3488 + margin-top: 24px;
3489 + width: 325px;
3490 + text-align: center;
3491 +}
3492 +.e-onboarding__footnote a {
3493 + text-decoration: underline;
3494 + color: #3A3F45;
3495 +}
3496 +
3497 +#e-app ~ #__wp-uploader-id-2 .media-modal {
3498 + max-width: 1024px;
3499 + max-height: 768px;
3500 + margin: auto;
3501 +}
3502 +
3503 +.e-onboarding__page-content {
3504 + margin-bottom: 70px;
3505 +}
3506 +.e-onboarding__page-content-start {
3507 + max-width: 675px;
3508 + text-align: start;
3509 + flex-basis: 555px;
3510 + align-self: start;
3511 +}
3512 +.e-onboarding__page-content-end {
3513 + min-width: 440px;
3514 + max-width: 540px;
3515 +}
3516 +.e-onboarding__page-content-end img {
3567 3517 width: 100%;
3568 - justify-content: flex-end;
3569 3518 }
3519 +.e-onboarding__page-content-section-title {
3520 + font-family: "DM Serif Display", serif;
3521 + font-size: 36px;
3522 + font-weight: 700;
3523 + color: #0C0D0E;
3524 +}
3525 +.e-onboarding__page-content-section-text {
3526 + font-size: 18px;
3527 + color: #3A3F45;
3528 +}
3570 3529
3571 -.e-kit-library__quota-bar {
3530 +.e-onboarding__header-logo .eps-app__logo {
3531 + background-color: #0C0D0E;
3532 + color: #ffffff;
3533 + width: 1.3rem;
3534 + height: 1.3rem;
3535 + line-height: 1.3rem;
3536 + font-size: 0.48rem;
3537 +}
3538 +.e-onboarding__header-logo .eps-app__logo:not(:last-child) {
3539 + -webkit-margin-end: 7px;
3540 + margin-inline-end: 7px;
3541 +}
3542 +.e-onboarding__header-logo img {
3543 + width: 104px;
3544 +}
3545 +.e-onboarding__header .eps-app__header-btn {
3572 3546 display: flex;
3573 3547 align-items: center;
3548 + font-size: 13px;
3574 3549 }
3575 -.e-kit-library__quota-bar__container {
3550 +.e-onboarding__header .eps-app__header-btn .eps-icon:not(:last-child) {
3551 + -webkit-margin-end: 7px;
3552 + margin-inline-end: 7px;
3553 +}
3554 +.e-onboarding__header .eps-button {
3555 + color: #0C0D0E;
3556 +}
3557 +.e-onboarding__header .eps-button__go-pro-btn {
3558 + background-color: #871A40;
3559 + color: #ffffff;
3560 + padding: 4px 8px;
3561 + border-radius: 4px;
3562 + font-weight: 700;
3563 + font-size: 12px;
3564 + transition: 0.5s;
3565 +}
3566 +.e-onboarding__header .eps-button__go-pro-btn:hover {
3567 + background: #b22254;
3568 +}
3569 +
3570 +.e-onboarding__go-pro {
3571 + width: 288px;
3572 + font-size: 12px;
3573 + background-color: #ffffff;
3574 +}
3575 +.e-onboarding__go-pro-title {
3576 + font-size: 18px;
3577 + font-weight: 700;
3578 + color: #871A40;
3579 +}
3580 +.e-onboarding__go-pro-cta {
3581 + display: inline-block;
3582 + color: #871A40;
3583 + padding: 9px;
3584 + border: 1px solid #871A40;
3585 +}
3586 +.e-onboarding__go-pro-cta.e-onboarding__button {
3587 + font-size: 14px;
3588 +}
3589 +.e-onboarding__go-pro-paragraph:not(:last-child) {
3590 + margin-bottom: 20px;
3591 +}
3592 +.e-onboarding__go-pro-already-have {
3593 + text-decoration: underline;
3594 +}
3595 +
3596 +.e-onboarding__progress-bar {
3576 3597 display: flex;
3577 - flex-direction: column;
3578 - gap: 8px;
3579 - min-width: 230px;
3598 + justify-content: center;
3599 + margin-bottom: 125px;
3580 3600 }
3581 -.e-kit-library__quota-bar__header {
3601 +.e-onboarding__progress-bar-item {
3582 3602 display: flex;
3583 - justify-content: space-between;
3584 3603 align-items: center;
3604 + color: #69727D;
3605 + font-size: 0.75rem;
3585 3606 }
3586 -.e-kit-library__quota-bar__label {
3587 - color: var(--body-color);
3588 - font-weight: 400;
3589 - white-space: nowrap;
3590 - font-size: 12px;
3607 +.e-onboarding__progress-bar-item-icon {
3608 + display: inline-block;
3609 + font-family: "DM Serif Display", serif;
3610 + text-align: center;
3611 + width: 1.1rem;
3612 + height: 1.1rem;
3613 + line-height: 1rem;
3614 + font-size: 0.75rem;
3615 + font-weight: bold;
3616 + border-radius: 50%;
3617 + border: 1px solid #69727D;
3618 + -webkit-margin-end: 8px;
3619 + margin-inline-end: 8px;
3620 + flex-shrink: 0;
3591 3621 }
3592 -.e-kit-library__quota-bar__progress-container {
3593 - width: 100%;
3594 - height: 4px;
3595 - overflow: hidden;
3596 - position: relative;
3622 +.e-onboarding__progress-bar-item:not(:last-child) {
3623 + -webkit-margin-end: 22px;
3624 + margin-inline-end: 22px;
3597 3625 }
3598 -.e-kit-library__quota-bar__progress-container--empty {
3599 - background-color: #F0ABFC;
3626 +.e-onboarding__progress-bar-item:not(:last-child):after {
3627 + font-family: "eicons";
3628 + -webkit-margin-start: 22px;
3629 + margin-inline-start: 22px;
3630 + content: "\e89e";
3600 3631 }
3601 -.e-kit-library__quota-bar__progress-container--normal {
3602 - background-color: #F0ABFC;
3632 +.e-onboarding__progress-bar-item--active {
3633 + color: #D004D4;
3603 3634 }
3604 -.e-kit-library__quota-bar__progress-container--warning {
3605 - background-color: rgb(251.0236220472, 216.4291338583, 157.9763779528);
3635 +.e-onboarding__progress-bar-item--active .e-onboarding__progress-bar-item-icon, .e-onboarding__progress-bar-item--completed .e-onboarding__progress-bar-item-icon {
3636 + color: #ffffff;
3637 + border-color: #D004D4;
3638 + background-color: #D004D4;
3606 3639 }
3607 -.e-kit-library__quota-bar__progress-container--alert {
3608 - background: #93003f;
3640 +.e-onboarding__progress-bar-item--skipped, .e-onboarding__progress-bar-item--completed {
3641 + cursor: pointer;
3609 3642 }
3610 -.e-kit-library__quota-bar__progress-bar {
3611 - height: 100%;
3612 - transition: width 0.3s ease;
3643 +.e-onboarding__progress-bar-item--skipped .e-onboarding__progress-bar-item-icon {
3644 + color: #ffffff;
3645 + background-color: #69727D;
3613 3646 }
3614 -.e-kit-library__quota-bar__progress-bar--empty {
3615 - background: transparent;
3647 +
3648 +.e-onboarding__button {
3649 + font-size: 18px;
3650 + cursor: pointer;
3651 + transition: var(--e-a-transition-hover);
3616 3652 }
3617 -.e-kit-library__quota-bar__progress-bar--normal {
3618 - background: #D004D4;
3653 +.e-onboarding__button-action {
3654 + color: var(--e-a-btn-color);
3655 + background-color: var(--e-a-btn-bg-primary);
3656 + min-width: 325px;
3657 + padding: 15px 30px;
3658 + text-align: center;
3619 3659 }
3620 -.e-kit-library__quota-bar__progress-bar--warning {
3621 - background: #F59E0B;
3660 +.e-onboarding__button-action:hover {
3661 + background-color: var(--e-a-btn-bg-primary-hover);
3622 3662 }
3623 -.e-kit-library__quota-bar__progress-bar--alert {
3624 - background: #93003f;
3663 +.e-onboarding__button-skip {
3664 + padding: 8px 16px;
3665 + color: #515962;
3625 3666 }
3626 -.e-kit-library__quota-bar__upgrade-message {
3667 +.e-onboarding__button-skip:hover {
3668 + background-color: #F9FAFA;
3669 +}
3670 +.e-onboarding__button--disabled {
3671 + pointer-events: none;
3672 + background-color: #D5D8DC;
3673 + color: #9EA5AD;
3674 +}
3675 +.e-onboarding__button--disabled:hover {
3676 + cursor: progress;
3677 +}
3678 +.e-onboarding__button--processing {
3679 + pointer-events: none;
3680 + filter: brightness(90%);
3681 +}
3682 +
3683 +.e-onboarding__card {
3684 + border: 1px solid #3A3F45;
3685 + border-radius: 8px;
3686 + padding: 40px 40px;
3687 + cursor: pointer;
3688 + flex-grow: 1;
3627 3689 display: flex;
3690 + flex-direction: column;
3628 3691 align-items: center;
3629 - gap: 4px;
3630 3692 }
3631 -.e-kit-library__quota-bar__upgrade-link {
3632 - color: #93003f;
3633 - text-decoration: underline;
3634 - cursor: pointer;
3693 +.e-onboarding__card-image, .e-onboarding__card-text {
3694 + width: 345px;
3695 +}
3696 +.e-onboarding__card-image {
3697 + margin-bottom: 44px;
3698 +}
3699 +.e-onboarding__card-text {
3700 + font-size: 20px;
3701 + font-weight: 700;
3702 + text-align: center;
3703 + color: #0C0D0E;
3704 +}
3705 +.e-onboarding__card:hover {
3706 + box-shadow: 4px 4px 0 0 #000000;
3707 +}
3708 +.e-onboarding__card:active {
3709 + box-shadow: initial;
3710 +}
3711 +
3712 +.e-onboarding__checklist {
3713 + -webkit-padding-start: 0;
3714 + padding-inline-start: 0;
3715 +}
3716 +.e-onboarding__checklist-item {
3717 + display: flex;
3718 + align-items: center;
3635 3719 font-size: 12px;
3636 - font-weight: 400;
3720 + margin-bottom: 12px;
3637 3721 }
3638 -.e-kit-library__quota-bar__upgrade-link:hover {
3639 - opacity: 0.8;
3722 +.e-onboarding__checklist-item .eicon-check-circle {
3723 + -webkit-margin-end: 9px;
3724 + margin-inline-end: 9px;
3725 + font-size: 16px;
3726 + font-weight: 600;
3640 3727 }
3641 -.e-kit-library__quota-bar__count {
3642 - color: var(--body-color);
3643 - white-space: nowrap;
3644 - font-size: 12px;
3728 +
3729 +.e-onboarding__notice {
3730 + display: inline-block;
3731 + padding: 12px 14px;
3732 + margin-bottom: 16px;
3733 + color: #3A3F45;
3645 3734 }
3735 +.e-onboarding__notice--error {
3736 + background-color: #FDE8EC;
3737 +}
3738 +.e-onboarding__notice--error i {
3739 + font-size: 16px;
3740 + color: #B92136;
3741 +}
3742 +.e-onboarding__notice--success {
3743 + background-color: #ECF9F2;
3744 +}
3745 +.e-onboarding__notice--success i {
3746 + color: #117740;
3747 +}
3748 +.e-onboarding__notice i {
3749 + -webkit-margin-end: 14px;
3750 + margin-inline-end: 14px;
3751 +}
3752 +.e-onboarding__notice-empty-spacer {
3753 + height: 61px;
3754 +}
3646 3755
3647 -:root {
3648 - --text-secondary: #3F444B;
3756 +.e-onboarding__page-account .e-onboarding__checkbox-label {
3757 + margin-top: 50px;
3649 3758 }
3650 3759
3651 -.e-kit-library__quota-notification {
3760 +.e-onboarding__action-button-text {
3761 + -webkit-margin-start: 10px;
3762 + margin-inline-start: 10px;
3763 +}
3764 +
3765 +.e-onboarding__site-name-input {
3766 + margin-top: 80px;
3767 +}
3768 +
3769 +.e-onboarding__page-siteLogo .e-app-upload-file__button {
3770 + color: var(--e-a-color-primary-bold);
3771 + border-color: var(--e-a-color-primary-bold);
3772 +}
3773 +.e-onboarding__page-siteLogo .e-app-upload-file__button:hover {
3774 + background-color: #FAE8FF;
3775 +}
3776 +.e-onboarding__drop-zone {
3777 + margin-top: 3rem;
3778 +}
3779 +.e-onboarding .eps-display-3 {
3780 + font-size: 16px;
3781 + margin-bottom: 0.5rem;
3782 +}
3783 +.e-onboarding .e-app-upload-file__button {
3784 + max-width: 198px;
3785 + margin: 0 auto;
3786 +}
3787 +.e-onboarding .e-app-drop-zone__secondary-text {
3788 + font-size: 14px;
3789 +}
3790 +.e-onboarding__logo-container {
3791 + position: relative;
3792 + margin-top: 3rem;
3793 + min-height: 120px;
3794 + width: -moz-fit-content;
3795 + width: fit-content;
3652 3796 display: flex;
3653 - align-items: flex-start;
3654 - justify-content: space-between;
3655 - padding: 16px 20px;
3656 - margin: 0 44px 30px;
3657 - border-radius: 4px;
3797 + align-items: center;
3798 + justify-content: center;
3799 + min-width: 220px;
3800 + border: 1px solid #BABFC5;
3658 3801 }
3659 -.e-kit-library__quota-notification--warning {
3660 - background-color: #FBF1E6;
3661 - color: #3f444b;
3802 +.e-onboarding__logo-container img {
3803 + height: auto;
3804 + max-height: 100%;
3805 + width: auto;
3662 3806 }
3663 -.e-kit-library__quota-notification--alert {
3664 - background-color: #FDECEC;
3665 - color: #3f444b;
3807 +.e-onboarding__logo-remove {
3808 + position: absolute;
3809 + right: 8px;
3810 + top: 5px;
3666 3811 }
3667 -.e-kit-library__quota-notification__content {
3668 - display: flex;
3669 - align-items: flex-start;
3670 - gap: 12px;
3671 - flex: 1;
3812 +.e-onboarding__logo-remove i {
3813 + font-size: 16px;
3814 + width: 15px;
3672 3815 }
3673 -.e-kit-library__quota-notification__icon {
3674 - font-size: 18px;
3675 - margin-top: 1px;
3676 - flex-shrink: 0;
3816 +.e-onboarding__logo-remove:hover {
3817 + cursor: pointer;
3677 3818 }
3678 -.e-kit-library__quota-notification__icon.eicon-warning-full {
3679 - color: #F59E0B;
3819 +.e-onboarding__is-uploading {
3820 + visibility: hidden;
3680 3821 }
3681 -.e-kit-library__quota-notification__icon.eicon-alert {
3682 - color: #DC2626;
3822 +
3823 +.e-onboarding__page-goodToGo .e-onboarding__page-content-section-title,
3824 +.e-onboarding__page-goodToGo .e-onboarding__page-content-section-text {
3825 + text-align: center;
3683 3826 }
3684 -.e-kit-library__quota-notification__message {
3685 - flex: 1;
3686 - line-height: 1.5;
3687 - font-size: 13px;
3827 +.e-onboarding__cards-grid.e-onboarding__page-content {
3828 + margin-top: 48px;
3829 + margin-bottom: 48px;
3688 3830 }
3689 -.e-kit-library__quota-notification__message span {
3690 - color: var(--text-secondary);
3691 - font-size: 13px;
3831 +.e-onboarding__cards-grid .e-onboarding__card {
3832 + max-width: 555px;
3692 3833 }
3693 -.e-kit-library__quota-notification__action-link {
3694 - color: inherit;
3695 - text-decoration: underline;
3696 - font-size: 13px;
3697 - font-weight: 400;
3834 +.e-onboarding__cards-grid .e-onboarding__card:not(:last-child) {
3835 + -webkit-margin-end: 20px;
3836 + margin-inline-end: 20px;
3698 3837 }
3699 -.e-kit-library__quota-notification__action-link:hover {
3700 - opacity: 0.8;
3838 +.e-onboarding__good-to-go-footer {
3839 + justify-content: end;
3701 3840 }
3702 -.e-kit-library__quota-notification__dismiss {
3703 - background: none;
3704 - border: none;
3705 - cursor: pointer;
3706 - padding: 0;
3707 - margin-inline-start: 12px;
3708 - color: inherit;
3709 - opacity: 0.7;
3710 - flex-shrink: 0;
3841 +
3842 +.e-onboarding__upload-pro {
3843 + flex-direction: row;
3844 + justify-content: center;
3845 + font-family: "DM Sans", "Roboto", sans-serif;
3846 + text-align: center;
3711 3847 }
3712 -.e-kit-library__quota-notification__dismiss:hover {
3713 - opacity: 1;
3848 +.e-onboarding__upload-pro .eps-app__content {
3849 + overflow-y: hidden;
3850 + max-width: 1113px;
3851 + padding: 30px;
3714 3852 }
3715 -.e-kit-library__quota-notification__dismiss i {
3716 - font-size: 14px;
3853 +.e-onboarding__upload-pro-drop-zone {
3854 + margin-bottom: 24px;
3855 +}
3856 +.e-onboarding__upload-pro-drop-zone h1 {
3857 + font-family: "Source Serif Pro", "Roboto", sans-serif;
3858 +}
3859 +.e-onboarding__upload-pro-drop-zone .e-app-drag-drop {
3860 + padding: 48px;
3861 +}
3862 +.e-onboarding__upload-pro-drop-zone .eps-display-3,
3863 +.e-onboarding__upload-pro-drop-zone .e-app-drop-zone__text,
3864 +.e-onboarding__upload-pro-drop-zone .e-app-drop-zone__secondary-text {
3865 + margin-bottom: 12px;
3866 +}
3867 +.e-onboarding__upload-pro-drop-zone .e-app-upload-file__button {
3868 + background-color: #040080;
3869 + color: #46F2B6;
3870 + padding: 14px 40px;
3871 + border-color: #040080;
3872 +}
3873 +.e-onboarding__upload-pro-get-file {
3874 + font-size: 12px;
3875 + margin-top: 24px;
3876 +}
3877 +.e-onboarding__upload-pro-get-file a {
3878 + text-decoration: underline;
3879 +}
3880 +.e-onboarding__upload-pro .e-onboarding__notice {
3881 + margin-bottom: 0;
3717 3882 }
3718 3883 /*# sourceMappingURL=app.css.map */