PluginProbe
Elementor Website Builder – more than just a page builder / 3.34.1
Elementor Website Builder – more than just a page builder v3.34.1
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
elementor / assets / css / app-rtl.css

app-rtl.css in Elementor Website Builder – more than just a page builder 3.34.1, at assets/css/app-rtl.css

4,838 lines 118.7 KB
No matching file
Up and down to move Enter to open Esc to close
Raw Download Zip
1 @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";
2 @import "//fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&display=swap";
3 @import "//fonts.googleapis.com/css2?family=Source%20Serif%20Pro:wght@700&display=swap";
4 :root {
5 --color-box-shadow-color: rgba(0, 0, 0, 0.05);
6 }
7
8 .eps-theme-dark {
9 --color-box-shadow-color: rgba(0, 0, 0, 0.1);
10 }
11
12 .sr-only {
13 position: absolute;
14 width: 1px;
15 height: 1px;
16 padding: 0;
17 margin: -1px;
18 overflow: hidden;
19 clip: rect(0, 0, 0, 0);
20 white-space: nowrap;
21 border: 0;
22 }
23
24 @media screen and (min-width: 480px) {
25 .text-start-sm {
26 text-align: start;
27 }
28 }
29 @media screen and (min-width: 480px) {
30 .text-center-sm {
31 text-align: center;
32 }
33 }
34 @media screen and (min-width: 480px) {
35 .text-end-sm {
36 text-align: end;
37 }
38 }
39 @media screen and (min-width: 768px) {
40 .text-start-md {
41 text-align: start;
42 }
43 }
44 @media screen and (min-width: 768px) {
45 .text-center-md {
46 text-align: center;
47 }
48 }
49 @media screen and (min-width: 768px) {
50 .text-end-md {
51 text-align: end;
52 }
53 }
54 @media screen and (min-width: 1025px) {
55 .text-start-lg {
56 text-align: start;
57 }
58 }
59 @media screen and (min-width: 1025px) {
60 .text-center-lg {
61 text-align: center;
62 }
63 }
64 @media screen and (min-width: 1025px) {
65 .text-end-lg {
66 text-align: end;
67 }
68 }
69 @media screen and (min-width: 1440px) {
70 .text-start-xl {
71 text-align: start;
72 }
73 }
74 @media screen and (min-width: 1440px) {
75 .text-center-xl {
76 text-align: center;
77 }
78 }
79 @media screen and (min-width: 1440px) {
80 .text-end-xl {
81 text-align: end;
82 }
83 }
84 @media screen and (min-width: 1600px) {
85 .text-start-xxl {
86 text-align: start;
87 }
88 }
89 @media screen and (min-width: 1600px) {
90 .text-center-xxl {
91 text-align: center;
92 }
93 }
94 @media screen and (min-width: 1600px) {
95 .text-end-xxl {
96 text-align: end;
97 }
98 }
99 @keyframes eps-animation-pop {
100 from {
101 transform: scale(0.75);
102 opacity: 0;
103 }
104 to {
105 transform: scale(1);
106 opacity: 1;
107 }
108 }
109 /**
110 TODO: The molecules, atoms and such generics should be at top level, so the styles will be not depended on the order.
111 EG: '../../../app/assets/styles/generic'.
112 Auto-import is designed for CSS that not dependent on the loading order.
113 */
114 .eps-button {
115 display: inline-flex;
116 --button-line-height: 16px;
117 --button-padding-y: 0.5em;
118 --button-padding-x: 1.5em;
119 --button-primary-background-color: #F3BAFD;
120 --button-primary-hover-background-color: #F5D0FE;
121 --button-primary-active-background-color: #F3BAFD;
122 --button-primary-color: #0C0D0E;
123 --button-secondary-background-color: #69727D;
124 --button-secondary-hover-background-color: rgb(81.7173913043, 88.7217391304, 97.2826086957);
125 --button-secondary-active-background-color: rgb(58.4347826087, 63.4434782609, 69.5652173913);
126 --button-secondary-color: #ffffff;
127 --button-danger-background-color: #DC2626;
128 --button-danger-hover-background-color: rgb(178.25, 28.75, 28.75);
129 --button-danger-active-background-color: rgb(134.3333333333, 21.6666666667, 21.6666666667);
130 --button-danger-color: #ffffff;
131 --button-cta-background-color: #93003f;
132 --button-cta-hover-background-color: rgb(96, 0, 41.1428571429);
133 --button-cta-active-background-color: rgb(45, 0, 19.2857142857);
134 --button-cta-color: #ffffff;
135 --button-brand-background-color: #93003f;
136 --button-brand-hover-background-color: rgb(96, 0, 41.1428571429);
137 --button-brand-active-background-color: rgb(45, 0, 19.2857142857);
138 --button-brand-color: #ffffff;
139 --button-link-background-color: #515962;
140 --button-link-hover-background-color: rgb(57.9217877095, 63.6424581006, 70.0782122905);
141 --button-link-active-background-color: rgb(34.843575419, 38.2849162011, 42.156424581);
142 --button-link-color: #ffffff;
143 --button-disabled-background-color: #D5D8DC;
144 --button-disabled-hover-background-color: rgb(185.1818181818, 190.1688311688, 196.8181818182);
145 --button-disabled-active-background-color: rgb(157.3636363636, 164.3376623377, 173.6363636364);
146 --button-disabled-color: #ffffff;
147 color: var(--button-background-color, currentColor);
148 font-size: var(--button-font-size, inherit);
149 font-weight: 500;
150 line-height: var(--button-line-height);
151 transition: var(--e-a-transition-hover);
152 cursor: pointer;
153 }
154 .eps-button:active {
155 --button-background-color: var(--button-active-background-color, transparent);
156 }
157 .eps-button:hover {
158 --button-background-color: var(--button-hover-background-color);
159 }
160 .eps-theme-dark .eps-button {
161 --button-primary-background-color: #F3BAFD;
162 --button-primary-color: #0C0D0E;
163 --button-primary-hover-background-color: #EB8EFB;
164 --button-primary-active-background-color: #F3BAFD;
165 --button-secondary-background-color: #BABFC5;
166 --button-secondary-color: #fff;
167 --button-secondary-hover-background-color: rgb(158.2913385827, 165.2992125984, 173.7086614173);
168 --button-secondary-active-background-color: rgb(130.5826771654, 139.5984251969, 150.4173228346);
169 --button-cta-background-color: #93003f;
170 --button-cta-hover-background-color: rgb(96, 0, 41.1428571429);
171 --button-cta-active-background-color: rgb(45, 0, 19.2857142857);
172 --button-cta-color: #fff;
173 --button-brand-hover-background-color: rgb(96, 0, 41.1428571429);
174 --button-brand-active-background-color: rgb(45, 0, 19.2857142857);
175 --button-brand-color: #fff;
176 --button-brand-background-color: #93003f;
177 --button-link-background-color: #515962;
178 --button-link-hover-background-color: rgb(57.9217877095, 63.6424581006, 70.0782122905);
179 --button-link-active-background-color: rgb(34.843575419, 38.2849162011, 42.156424581);
180 --button-link-color: #ffffff;
181 --button-disabled-background-color: #69727D;
182 --button-disabled-hover-background-color: rgb(81.7173913043, 88.7217391304, 97.2826086957);
183 --button-disabled-active-background-color: rgb(58.4347826087, 63.4434782609, 69.5652173913);
184 --button-disabled-color: #fff;
185 }
186 .eps-button--contained {
187 color: var(--button-color);
188 padding: var(--button-padding-y) var(--button-padding-x);
189 background-color: var(--button-background-color, transparent);
190 border: 1px solid var(--button-background-color);
191 }
192 .eps-button--contained:hover {
193 color: var(--button-color);
194 }
195 .eps-button--outlined {
196 display: block;
197 padding: var(--button-padding-y) var(--button-padding-x);
198 border: 1px solid var(--button-background-color);
199 }
200 .eps-button--contained, .eps-button--outlined {
201 border-radius: 0.1875rem;
202 }
203 .eps-button--underlined {
204 text-decoration: underline;
205 }
206 .eps-button--sm {
207 --button-font-size: 0.75rem;
208 --button-line-height: 14px;
209 }
210 .eps-button--lg {
211 --button-font-size: 0.9375rem;
212 --button-line-height: 18px;
213 }
214 .eps-button--primary {
215 --button-color: var(--button-primary-color);
216 --button-background-color: var(--button-primary-background-color);
217 --button-hover-background-color: var(--button-primary-hover-background-color);
218 --button-active-background-color: var(--button-primary-active-background-color);
219 }
220 .eps-button--secondary {
221 --button-color: var(--button-secondary-color);
222 --button-background-color: var(--button-secondary-background-color);
223 --button-hover-background-color: var(--button-secondary-hover-background-color);
224 --button-active-background-color: var(--button-secondary-active-background-color);
225 }
226 .eps-button--danger {
227 --button-color: var(--button-danger-color);
228 --button-background-color: var(--button-danger-background-color);
229 --button-hover-background-color: var(--button-danger-hover-background-color);
230 --button-active-background-color: var(--button-danger-active-background-color);
231 }
232 .eps-button--cta {
233 --button-color: var(--button-brand-color);
234 --button-background-color: var(--button-cta-background-color);
235 --button-hover-background-color: var(--button-cta-hover-background-color);
236 --button-active-background-color: var(--button-cta-active-background-color);
237 }
238 .eps-button--brand {
239 --button-color: var(--button-cta-color);
240 --button-background-color: var(--button-cta-background-color);
241 --button-hover-background-color: var(--button-cta-hover-background-color);
242 --button-active-background-color: var(--button-cta-active-background-color);
243 }
244 .eps-button--link {
245 --button-color: var(--button-link-color);
246 --button-background-color: var(--button-link-background-color);
247 --button-hover-background-color: var(--button-link-hover-background-color);
248 --button-active-background-color: var(--button-link-active-background-color);
249 }
250 .eps-button--disabled, .eps-button[disabled] {
251 --button-color: var(--button-disabled-color);
252 --button-background-color: var(--button-disabled-background-color);
253 --button-hover-background-color: var(--button-disabled-hover-background-color);
254 --button-active-background-color: var(--button-disabled-active-background-color);
255 cursor: default;
256 }
257
258 :root {
259 --app-background-color: #ffffff;
260 --app-box-shadow-color: rgba(var(--box-shadow-color, rgba(0, 0, 0, 0.15)), 0.2);
261 --app-header-color: #1f2124;
262 --app-logo-color: #ffffff;
263 --app-logo-background-color: #0C0D0E;
264 --app-title-color: #0C0D0E;
265 --app-header-buttons-separator-color: #9DA5AE;
266 --app-header-buttons-color: #515962;
267 --app-header-buttons-color-hover: #0C0D0E;
268 --app-lightbox-background-color: rgba(0, 0, 0, 0.8);
269 }
270
271 .eps-theme-dark {
272 --app-background-color: #1f2124;
273 --app-box-shadow-color: rgba(var(--box-shadow-color, rgba(0, 0, 0, 0.15)), 0.2);
274 --app-header-color: #D5D8DC;
275 --app-logo-color: #0C0D0E;
276 --app-logo-background-color: #ffffff;
277 --app-title-color: #fff;
278 --app-header-buttons-separator-color: #818A96;
279 --app-header-buttons-color: #BABFC5;
280 --app-header-buttons-color-hover: #9DA5AE;
281 --app-lightbox-background-color: rgba(0, 0, 0, 0.8);
282 }
283
284 :root {
285 --text-muted: #BABFC5;
286 --disabled: #D5D8DC;
287 --light: #ffffff;
288 --dark: #000000;
289 --cta: #93003f;
290 --brand: #93003f;
291 --accent: #F3BAFD;
292 --primary: #93003f;
293 --primary-bg: #FAE8FF;
294 --secondary: #515962;
295 --info: #2563EB;
296 --info-bg: #F0F7FF;
297 --danger: #DC2626;
298 --danger-bg: #FEF1F4;
299 --success: #0A875A;
300 --success-bg: #F2FDF5;
301 --warning: #F59E0B;
302 --warning-bg: #FFFBEB;
303 --body-color: #515962;
304 --body-bg: #ffffff;
305 --link-color: #515962;
306 --link-hover-color: rgb(46.3826815642, 50.9636871508, 56.1173184358);
307 --hr-color: #E6E8EA;
308 --box-shadow-color: theme-colors(dark);
309 --display-1-color: #515962;
310 --display-2-color: #515962;
311 --display-3-color: #515962;
312 --display-4-color: #515962;
313 --h1-color: #515962;
314 --h2-color: #515962;
315 --h3-color: #515962;
316 --h4-color: #515962;
317 --h5-color: #515962;
318 --h6-color: #515962;
319 --text-base-color: #515962;
320 --text-xl-color: #515962;
321 --text-lg-color: #515962;
322 --text-sm-color: #515962;
323 --text-xs-color: #515962;
324 --text-xxs-color: #515962;
325 --gray-900: #0C0D0E;
326 --gray-800: #1f2124;
327 --gray-750: #2b2c31;
328 --gray-725: #333438;
329 --gray-700: #3f444b;
330 --gray-600: #515962;
331 --gray-500: #69727D;
332 --gray-400: #818A96;
333 --gray-300: #9DA5AE;
334 --gray-200: #BABFC5;
335 --gray-100: #D5D8DC;
336 --gray-75: #E6E8EA;
337 --gray-50: #F1F2F3;
338 --gray-25: #F9FAFA;
339 }
340
341 .eps-theme-dark {
342 --text-muted: #818A96;
343 --disabled: #69727D;
344 --light: #fff;
345 --dark: #000;
346 --accent: #524CFF;
347 --cta: #93003f;
348 --brand: #93003f;
349 --success: #39b54a;
350 --success-bg: #032317;
351 --info: #0077CC;
352 --info-bg: #0A1A3D;
353 --warning: #fcb92c;
354 --warning-bg: #311808;
355 --danger: #F84343;
356 --danger-bg: #390A0A;
357 --body-color: #BABFC5;
358 --body-bg: #1f2124;
359 --link-color: #0077CC;
360 --link-hover-color: rgb(46.3826815642, 50.9636871508, 56.1173184358);
361 --hr-color: #333438;
362 --box-shadow-color: rgba(0, 0, 0, 0.15);
363 --display-1-color: #BABFC5;
364 --display-2-color: #BABFC5;
365 --display-3-color: #BABFC5;
366 --display-4-color: #BABFC5;
367 --h1-color: #BABFC5;
368 --h2-color: #BABFC5;
369 --h3-color: #BABFC5;
370 --h4-color: #BABFC5;
371 --h5-color: #BABFC5;
372 --h6-color: #BABFC5;
373 --text-base-color: #BABFC5;
374 --text-xl-color: #BABFC5;
375 --text-lg-color: #BABFC5;
376 --text-sm-color: #BABFC5;
377 --text-xs-color: #BABFC5;
378 --text-xxs-color: #BABFC5;
379 --gray-900: #0C0D0E;
380 --gray-800: #1f2124;
381 --gray-750: #2b2c31;
382 --gray-725: #333438;
383 --gray-700: #3f444b;
384 --gray-600: #515962;
385 --gray-500: #69727D;
386 --gray-400: #818A96;
387 --gray-300: #9DA5AE;
388 --gray-200: #BABFC5;
389 --gray-100: #D5D8DC;
390 --gray-75: #E6E8EA;
391 --gray-50: #F1F2F3;
392 --gray-25: #F9FAFA;
393 }
394
395 *,
396 *::before,
397 *::after {
398 box-sizing: border-box;
399 }
400
401 html {
402 font-family: sans-serif;
403 line-height: 1.15;
404 -webkit-text-size-adjust: 100%;
405 -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
406 }
407
408 article, aside, figcaption, figure, footer, header, hgroup, main, nav, section {
409 display: block;
410 }
411
412 body {
413 margin: 0;
414 font-family: Roboto, Arial, Helvetica, Verdana, sans-serif;
415 font-size: 0.875rem;
416 font-weight: 400;
417 line-height: 1.5;
418 color: var(--body-color);
419 background-color: var(--body-bg);
420 }
421
422 [tabindex="-1"]:focus:not(:focus-visible) {
423 outline: 0 !important;
424 }
425
426 h1, h2, h3, h4, h5, h6 {
427 font-size: 100%;
428 margin: 0;
429 padding: 0;
430 line-height: inherit;
431 font-weight: normal;
432 }
433
434 p {
435 margin-block-start: 0;
436 }
437
438 b,
439 strong {
440 font-weight: 700;
441 }
442
443 small {
444 font-size: 80%;
445 }
446
447 a {
448 --eps-link-color: $eps-link-color;
449 color: var(--eps-link-color);
450 background-color: transparent;
451 }
452 a, a:active, a:hover, a:focus {
453 text-decoration: none;
454 }
455 a:focus, a:hover {
456 --eps-link-color: $eps-link-hover-color;
457 text-decoration: none;
458 }
459
460 a:not([href]) {
461 color: inherit;
462 text-decoration: none;
463 }
464 a:not([href]):hover {
465 color: inherit;
466 text-decoration: none;
467 }
468
469 pre,
470 code,
471 kbd,
472 samp {
473 font-family: monospace;
474 font-size: 1em;
475 }
476
477 figure {
478 margin: 0 0 0;
479 }
480
481 img {
482 vertical-align: middle;
483 border-style: none;
484 }
485
486 svg {
487 overflow: hidden;
488 vertical-align: middle;
489 }
490
491 button {
492 border-radius: 0;
493 }
494
495 button:focus {
496 outline: 1px dotted;
497 outline: 5px auto -webkit-focus-ring-color;
498 }
499
500 input,
501 button,
502 select,
503 optgroup,
504 textarea {
505 margin: 0;
506 font-family: inherit;
507 font-size: inherit;
508 line-height: inherit;
509 }
510
511 button,
512 input {
513 overflow: visible;
514 }
515
516 button,
517 select {
518 text-transform: none;
519 }
520
521 [role=button] {
522 cursor: pointer;
523 }
524
525 select {
526 word-wrap: normal;
527 }
528
529 button,
530 [type=button],
531 [type=reset],
532 [type=submit] {
533 -webkit-appearance: button;
534 -moz-appearance: button;
535 appearance: button;
536 }
537
538 button:not(:disabled),
539 [type=button]:not(:disabled),
540 [type=reset]:not(:disabled),
541 [type=submit]:not(:disabled) {
542 cursor: pointer;
543 }
544
545 input[type=radio],
546 input[type=checkbox] {
547 box-sizing: border-box;
548 padding: 0;
549 }
550
551 textarea {
552 overflow: auto;
553 resize: vertical;
554 }
555
556 [hidden] {
557 display: none !important;
558 }
559
560 hr {
561 border: 0 none;
562 border-block-end: 1px solid var(--hr-color);
563 }
564
565 .eps-display-1 {
566 font-size: 1.85rem;
567 color: var(--display-1-color);
568 margin-block-start: 0.5rem;
569 margin-block-end: 0.5rem;
570 }
571
572 .eps-display-2 {
573 font-size: 1.85rem;
574 color: var(--display-2-color);
575 margin-block-start: 0.5rem;
576 margin-block-end: 0.5rem;
577 }
578
579 .eps-display-3 {
580 font-size: 1.85rem;
581 color: var(--display-3-color);
582 margin-block-start: 0;
583 margin-block-end: 1.25rem;
584 }
585
586 .eps-display-4 {
587 font-size: 1.85rem;
588 color: var(--display-4-color);
589 margin-block-start: 0.5rem;
590 margin-block-end: 0.5rem;
591 }
592
593 h1,
594 .eps-h1 {
595 font-size: 1.625rem;
596 line-height: 1;
597 color: var(--h1-color);
598 margin-block-end: 1.25rem;
599 font-weight: 500;
600 }
601
602 h2,
603 .eps-h2 {
604 font-size: 1.25rem;
605 line-height: 1.2;
606 color: var(--h2-color);
607 margin-block-start: 0;
608 margin-block-end: 1.25rem;
609 font-weight: 500;
610 }
611
612 h3,
613 .eps-h3 {
614 font-size: 1rem;
615 line-height: 1.2;
616 color: var(--h3-color);
617 margin-block-start: 0;
618 margin-block-end: 0.5rem;
619 font-weight: 500;
620 }
621
622 h4,
623 .eps-h4 {
624 font-size: 0.9375rem;
625 color: var(--h4-color);
626 margin-block-start: 0;
627 margin-block-end: 0.5rem;
628 }
629
630 h5,
631 .eps-h5 {
632 font-size: 0.875rem;
633 color: var(--h5-color);
634 margin-block-start: 0;
635 margin-block-end: 0.5rem;
636 }
637
638 h6,
639 .eps-h6 {
640 font-size: 0.875rem;
641 color: var(--h-6-color);
642 margin-block-start: 0;
643 margin-block-end: 0.5rem;
644 font-weight: 700;
645 }
646
647 .eps-text-xxs {
648 font-size: 0.75rem;
649 line-height: 1.2;
650 color: var(--text-xxs-color);
651 font-weight: 400;
652 }
653
654 .eps-text-xs {
655 font-size: 0.75rem;
656 line-height: 1.5;
657 color: var(--text-xs-color);
658 font-weight: 400;
659 }
660
661 .eps-text {
662 font-size: 0.875rem;
663 line-height: 1.5;
664 color: var(--text-base-color);
665 font-weight: 400;
666 }
667
668 .eps-text-sm {
669 font-size: 0.8125rem;
670 line-height: 1.5;
671 color: var(--text-sm-color);
672 font-weight: 400;
673 }
674
675 .eps-text-lg {
676 font-size: 0.9375rem;
677 line-height: 1.5;
678 color: var(--text-lg-color);
679 font-weight: 400;
680 }
681
682 .eps-text-xl {
683 font-size: 1rem;
684 line-height: 1.5;
685 color: var(--text-xl-color);
686 font-weight: 400;
687 }
688
689 .video-wrapper {
690 position: relative;
691 padding-block-end: 56.25%;
692 height: 0;
693 }
694 .video-wrapper iframe {
695 position: absolute;
696 inset-block-start: 0;
697 inset-inline-start: 0;
698 width: 100%;
699 height: 100%;
700 }
701
702 .eps-separator {
703 margin-block-end: 2.75rem;
704 }
705
706 .eps-theme-dark {
707 --e-app-back-button-color: #BABFC5;
708 }
709
710 .back-button, .e-app-back-button {
711 --button-background-color: var(--e-app-back-button-color, #69727D);
712 margin-block-end: 1.5rem;
713 }
714 .back-button .eps-icon, .e-app-back-button .eps-icon {
715 margin-inline-end: 0.3125rem;
716 }
717
718 .eps-theme-dark {
719 --input-border-color: --hr-color;
720 }
721
722 .eps-input {
723 border: 1px solid var(--hr-color);
724 border-radius: 0.1875rem;
725 background: transparent;
726 color: inherit;
727 height: 1.875rem;
728 padding: 0 0.3125rem;
729 }
730 .eps-input--block {
731 width: 100%;
732 }
733
734 .eps-app {
735 display: flex;
736 height: 100vh;
737 flex-direction: column;
738 color: var(--body-color);
739 background-color: var(--app-background-color);
740 position: absolute;
741 border-radius: 0;
742 box-shadow: 2px 8px 23px 3px var(--color-box-shadow-color);
743 overflow: hidden;
744 font-family: Roboto, Arial, Helvetica, Verdana, sans-serif;
745 width: 100%;
746 max-width: 100%;
747 }
748 .eps-app__lightbox {
749 display: flex;
750 align-items: center;
751 justify-content: center;
752 position: fixed;
753 height: 100%;
754 width: 100%;
755 inset-block-end: 0;
756 inset-inline-start: 0;
757 background-color: var(--app-lightbox-background-color);
758 z-index: 1040;
759 }
760 .eps-app__header {
761 flex-shrink: 0;
762 font-size: 0.9375rem;
763 border-block-end: var(--e-a-border);
764 position: relative;
765 z-index: 3;
766 height: 3.125rem;
767 padding-block: 0;
768 padding-inline: 1rem;
769 }
770 .eps-app__header-buttons {
771 display: flex;
772 align-items: center;
773 flex-direction: row-reverse;
774 font-size: 1.125rem;
775 }
776 .eps-app__header-btn {
777 padding-inline-start: 1rem;
778 font-size: 1.125rem;
779 line-height: 1.25rem;
780 }
781 .eps-app__header-btn:hover {
782 color: var(--app-header-buttons-color-hover);
783 }
784 .eps-app__header-btn:first-child {
785 border-inline-start: 1px solid var(--app-header-buttons-separator-color);
786 }
787 .eps-app__header-btn:not(:first-child) {
788 padding-inline-end: 1rem;
789 }
790 .eps-app__logo-title-wrapper {
791 display: flex;
792 align-items: center;
793 }
794 .eps-app__logo {
795 display: block;
796 width: 1.75rem;
797 height: 1.75rem;
798 line-height: 1.75rem;
799 text-align: center;
800 font-size: calc(0.4 * 1.75rem);
801 border-radius: 50%;
802 color: var(--app-logo-color);
803 background-color: var(--app-logo-background-color);
804 }
805 .eps-app__logo:not(:last-child) {
806 margin-inline-end: 0.625rem;
807 }
808 .eps-app__title {
809 color: var(--app-title-color);
810 font-size: 0.9375rem;
811 font-weight: 700;
812 text-transform: uppercase;
813 margin-block-end: 0;
814 }
815 .eps-app__main {
816 display: flex;
817 overflow: hidden;
818 flex-grow: 1;
819 }
820 .eps-app__sidebar {
821 background-color: var(--app-sidebar-background-color);
822 padding-block-start: 1.25rem;
823 width: 30%;
824 max-width: 17.1875rem;
825 border-inline-end: var(--e-a-border);
826 flex-grow: 0;
827 overflow-y: auto;
828 z-index: 4;
829 }
830 .eps-app__content {
831 flex-grow: 1;
832 position: relative;
833 padding: 2.75rem;
834 height: 100%;
835 overflow-y: auto;
836 }
837
838 .e-app-upload-file__input {
839 display: none;
840 }
841
842 .e-app-drop-zone {
843 --e-app-drop-zone-text-color: #69727D;
844 --e-app-drop-zone-secondary-text-color: #515962;
845 }
846 .e-app-drop-zone__icon {
847 margin-block-end: 2.75rem;
848 font-size: 60px;
849 }
850 .e-app-drop-zone__text {
851 color: var(--e-app-drop-zone-text-color);
852 }
853 .e-app-drop-zone__secondary-text {
854 color: var(--e-app-drop-zone-secondary-text-color);
855 }
856
857 .eps-theme-dark .e-app-drop-zone {
858 --e-app-drop-zone-text-color: #BABFC5;
859 --e-app-drop-zone-secondary-text-color: #D5D8DC;
860 }
861
862 :root {
863 --info-toggle-color: #9DA5AE;
864 --info-toggle-hover-color: #69727D;
865 }
866
867 .eps-theme-dark {
868 --placeholder-filter: invert(0.8) sepia(1) saturate(0.2) hue-rotate(180deg) contrast(1.25) brightness(1.2);
869 --info-toggle-color: #818A96;
870 --info-toggle-hover-color: #BABFC5;
871 }
872
873 .e-site-part .eps-card__image {
874 filter: var(--placeholder-filter, none);
875 }
876 .e-site-part__info-toggle {
877 color: var(--info-toggle-color);
878 }
879 .e-site-part__info-toggle:hover {
880 --info-toggle-color: var(--info-toggle-hover-color);
881 }
882
883 .e-site-editor__header {
884 margin-block-end: 2.75rem;
885 border-block-end: 1px solid var(--hr-color);
886 }
887
888 :root {
889 --e-elementor-loader-color: #ffffff;
890 --e-elementor-loader-wrapper-color: #F9FAFA;
891 --e-elementor-loader-box-color: #E6E8EA;
892 }
893
894 .eps-theme-dark {
895 --e-elementor-loader-color: #1f2124;
896 --e-elementor-loader-wrapper-color: #2b2c31;
897 --e-elementor-loader-box-color: #3f444b;
898 }
899
900 .elementor-loading {
901 background-color: var(--e-elementor-loader-color);
902 height: 100vh;
903 }
904
905 .elementor-loader-wrapper {
906 position: absolute;
907 inset-block-start: 50%;
908 inset-inline-start: 50%;
909 transform: translate(calc(-50% * var(--direction-multiplier)), -50%);
910 width: 300px;
911 display: flex;
912 flex-direction: column;
913 align-items: center;
914 gap: 30px;
915 }
916
917 .elementor-loader {
918 border-radius: 50%;
919 padding: 40px;
920 height: 150px;
921 width: 150px;
922 background-color: var(--e-elementor-loader-wrapper-color);
923 box-sizing: border-box;
924 box-shadow: 2px 2px 20px 4px rgba(0, 0, 0, 0.02);
925 }
926
927 .elementor-loader-boxes {
928 height: 100%;
929 width: 100%;
930 position: relative;
931 }
932
933 .elementor-loader-box {
934 position: absolute;
935 background-color: var(--e-elementor-loader-box-color);
936 animation: load 1.8s linear infinite;
937 }
938 .elementor-loader-box:nth-of-type(1) {
939 width: 20%;
940 height: 100%;
941 inset-block-start: 0;
942 inset-inline-start: 0;
943 }
944 .elementor-loader-box:not(:nth-of-type(1)) {
945 inset-inline-end: 0;
946 height: 20%;
947 width: 60%;
948 }
949 .elementor-loader-box:nth-of-type(2) {
950 top: 0;
951 animation-delay: calc(1.8s / 4 * -1);
952 }
953 .elementor-loader-box:nth-of-type(3) {
954 top: 40%;
955 animation-delay: calc(1.8s / 4 * -2);
956 }
957 .elementor-loader-box:nth-of-type(4) {
958 bottom: 0;
959 animation-delay: calc(1.8s / 4 * -3);
960 }
961
962 .elementor-loading-title {
963 color: #9DA5AE;
964 text-align: center;
965 text-transform: uppercase;
966 letter-spacing: 7px;
967 text-indent: 7px;
968 font-size: 10px;
969 width: 100%;
970 }
971
972 @keyframes load {
973 0% {
974 opacity: 0.3;
975 }
976 50% {
977 opacity: 1;
978 }
979 100% {
980 opacity: 0.3;
981 }
982 }
983 .eps-menu__title {
984 margin-block-start: 2.75rem;
985 margin-block-end: 1rem;
986 }
987
988 .e-app-import {
989 --e-app-import-back-to-library-color: #69727D;
990 padding-block-end: 1.25rem;
991 }
992 .e-app-import__drop-zone {
993 margin-block-start: 1.25rem;
994 }
995 .e-app-import__back-to-library {
996 color: var(--e-app-import-back-to-library-color);
997 margin-block-end: 1.5rem;
998 }
999 .e-app-import__back-to-library > i {
1000 margin-inline-end: 0.5rem;
1001 }
1002
1003 .eps-theme-dark .e-app-import {
1004 --e-app-import-back-to-library-color: #BABFC5;
1005 }
1006
1007 .e-site-editor__promotion-overlay__link {
1008 display: flex;
1009 width: 100%;
1010 height: 100%;
1011 align-items: center;
1012 justify-content: center;
1013 flex-direction: column;
1014 text-decoration: none;
1015 }
1016 .e-site-editor__promotion-overlay__icon {
1017 font-size: 1.25rem;
1018 color: #ffffff;
1019 margin-block-end: 1rem;
1020 }
1021
1022 .e-app-import-export-wizard-step {
1023 --e-app-import-export-wizard-step-icon-color: #818A96;
1024 --e-app-import-export-wizard-step-text-color: #69727D;
1025 --e-app-import-export-wizard-step-block-end-text-color: #69727D;
1026 height: 100%;
1027 position: relative;
1028 text-align: center;
1029 }
1030 .e-app-import-export-wizard-step__media-container {
1031 height: 140px;
1032 margin: 5.5rem 0 2.75rem;
1033 }
1034 .e-app-import-export-wizard-step__icon {
1035 color: var(--e-app-import-export-wizard-step-icon-color);
1036 font-size: 50px;
1037 }
1038 .e-app-import-export-wizard-step__icon.eicon-loading {
1039 font-size: 1.85rem;
1040 }
1041 .e-app-import-export-wizard-step__heading {
1042 margin-block-end: 1.5rem;
1043 }
1044 .e-app-import-export-wizard-step__description, .e-app-import-export-wizard-step__info {
1045 color: var(--e-app-import-export-wizard-step-text-color);
1046 }
1047 .e-app-import-export-wizard-step__info {
1048 margin-block-start: 1.5rem;
1049 }
1050 .e-app-import-export-wizard-step__content {
1051 text-align: initial;
1052 margin-block-end: 1.25rem;
1053 }
1054 .e-app-import-export-wizard-step__notice {
1055 display: block;
1056 position: sticky;
1057 inset-block-start: 100%; /* Will prevent text overlapping when window height is too short. */
1058 color: var(--e-app-import-export-wizard-step-block-end-text-color);
1059 font-style: italic;
1060 margin-block-end: 0;
1061 }
1062
1063 .eps-theme-dark .e-app-import-export-wizard-step {
1064 --e-app-import-export-wizard-step-icon-color: #818A96;
1065 --e-app-import-export-wizard-step-text-color: #BABFC5;
1066 --e-app-import-export-wizard-step-block-end-text-color: #BABFC5;
1067 }
1068
1069 .e-app-import-export-page-header {
1070 --e-app-import-export-page-header-heading-color: #515962;
1071 --e-app-import-export-page-header-description-color: #69727D;
1072 margin-block-end: 2.75rem;
1073 }
1074 .e-app-import-export-page-header__content-wrapper {
1075 max-width: 655px;
1076 }
1077 .e-app-import-export-page-header__heading {
1078 color: var(--e-app-import-export-page-header-heading-color);
1079 }
1080 .e-app-import-export-page-header__description {
1081 color: var(--e-app-import-export-page-header-description-color);
1082 margin-block-start: 1.25rem;
1083 }
1084
1085 .eps-theme-dark .e-app-import-export-page-header {
1086 --e-app-import-export-page-header-heading-color: #D5D8DC;
1087 --e-app-import-export-page-header-description-color: #D5D8DC;
1088 }
1089
1090 .e-app-export-kit-content {
1091 --e-app-export-kit-content-title-color: #3f444b;
1092 --e-app-export-kit-content-description-color: #515962;
1093 --e-app-export-kit-content-sm-notice-color: #BABFC5;
1094 }
1095 .e-app-export-kit-content__checkbox {
1096 flex-shrink: 0;
1097 margin-inline-end: 0.75rem;
1098 }
1099 .e-app-export-kit-content__title {
1100 color: var(--e-app-export-kit-content-title-color);
1101 }
1102 .e-app-export-kit-content__description {
1103 color: var(--e-app-export-kit-content-description-color);
1104 margin-inline-end: 1.25rem;
1105 }
1106 .e-app-export-kit-content__notice {
1107 margin-block-start: 1rem;
1108 }
1109 .e-app-export-kit-content__small-notice {
1110 font-style: italic;
1111 color: var(--e-app-export-kit-content-sm-notice-color);
1112 }
1113
1114 .eps-theme-dark .e-app-export-kit-content {
1115 --e-app-export-kit-content-title-color: #D5D8DC;
1116 --e-app-export-kit-content-description-color: #BABFC5;
1117 --e-app-export-kit-content-sm-notice-color: #818A96;
1118 }
1119
1120 .e-app-wizard-footer {
1121 --e-app-wizard-footer-border-color: #E6E8EA;
1122 padding: 0.5rem;
1123 }
1124 .e-app-wizard-footer__separator {
1125 border-block-start: 1px solid var(--e-app-wizard-footer-border-color);
1126 }
1127
1128 .eps-theme-dark .e-app-wizard-footer {
1129 --e-app-wizard-footer-border-color: #333438;
1130 }
1131
1132 .e-app-export-templates-features__locked {
1133 --e-app-export-templates-features-locked-color: #69727D;
1134 color: var(--e-app-export-templates-features-locked-color);
1135 }
1136
1137 .eps-theme-dark .e-app-export-templates-features__locked {
1138 --e-app-export-templates-features-locked-color: #9DA5AE;
1139 }
1140
1141 :root {
1142 --color-box-shadow-color: rgba(0, 0, 0, 0.05);
1143 }
1144
1145 .eps-theme-dark {
1146 --color-box-shadow-color: rgba(0, 0, 0, 0.1);
1147 }
1148
1149 :root {
1150 --card-background-color-hover: #ffffff;
1151 --card-border: 1px solid #D5D8DC;
1152 --card-header-footer-border: 1px solid var(--e-a-border-color);
1153 --card-header-footer-active-border: 2px solid #BABFC5;
1154 --card-headline-color: #515962;
1155 --card-figure-background-color: #BABFC5;
1156 --card-image-overlay-background-color: rgba(0, 0, 0, 0.2);
1157 }
1158
1159 .eps-theme-dark {
1160 --card-background-color-hover: #2b2c31;
1161 --card-border: 1px solid #333438;
1162 --card-header-footer-border: 1px solid #333438;
1163 --card-header-footer-active-border: 1px solid #1f2124;
1164 --card-headline-color: #D5D8DC;
1165 --card-figure-background-color: #3f444b;
1166 --card-image-overlay-background-color: rgba(63, 68, 75, 0.5);
1167 }
1168
1169 .eps-card {
1170 border: var(--card-border);
1171 border-radius: 0.1875rem;
1172 transition: 0.3s;
1173 font-size: 0.75rem;
1174 }
1175 .eps-card__header {
1176 padding: 0.625rem;
1177 border-block-end: var(--card-header-footer-border);
1178 min-height: 2.5rem;
1179 display: flex;
1180 align-items: center;
1181 }
1182 .eps-card__header--padding {
1183 padding: var(--eps-card-header-padding);
1184 }
1185 .eps-card {
1186 /*
1187 todo: TBD: Optionally remove headline styling in favor of a global atom depending on variation needs
1188 */
1189 }
1190 .eps-card__headline {
1191 color: var(--card-headline-color);
1192 margin-block-end: 0;
1193 font-weight: 500;
1194 flex-grow: 1;
1195 overflow: hidden;
1196 text-overflow: ellipsis;
1197 white-space: nowrap;
1198 }
1199 .eps-card__body {
1200 padding: 0.625rem 0.625rem;
1201 }
1202 .eps-card__body--padding {
1203 padding: var(--eps-card-body-padding);
1204 }
1205 .eps-card__figure {
1206 background-color: var(--card-figure-background-color);
1207 position: relative;
1208 padding-block-end: var(--card-image-aspect-ratio, 95.6%);
1209 overflow: hidden;
1210 height: 0;
1211 }
1212 .eps-card__image {
1213 width: 100%;
1214 -o-object-fit: contain;
1215 object-fit: contain;
1216 -o-object-position: top;
1217 object-position: top;
1218 position: absolute;
1219 inset-block-start: 0;
1220 inset-inline-start: 0;
1221 }
1222 .eps-card__image-overlay {
1223 position: absolute;
1224 inset-block-start: 0;
1225 background-color: var(--card-image-overlay-background-color);
1226 z-index: 1;
1227 width: 100%;
1228 height: 100%;
1229 opacity: 0;
1230 transition: 0.3s;
1231 }
1232 .eps-card__image-overlay:hover {
1233 opacity: 1;
1234 }
1235 .eps-card__footer {
1236 padding: 0.625rem;
1237 border-block-start: var(--card-header-footer-border);
1238 font-size: 0.6875rem;
1239 }
1240 .eps-card__footer--padding {
1241 padding: var(--eps-card-footer-padding);
1242 }
1243
1244 :root {
1245 --menu-item-color: #515962;
1246 --menu-item-color-hover: #3f444b;
1247 --menu-item-color-active: #0C0D0E;
1248 --menu-item-background-color-hover: #F9FAFA;
1249 --menu-item-background-color-active: #E6E8EA;
1250 --menu-item-action-button-color: #9DA5AE;
1251 }
1252
1253 .eps-theme-dark {
1254 --menu-item-color: #D5D8DC;
1255 --menu-item-color-hover: #BABFC5;
1256 --menu-item-color-active: #9DA5AE;
1257 --menu-item-background-color-hover: #2b2c31;
1258 --menu-item-background-color-active: #333438;
1259 --menu-item-action-button-color: #818A96;
1260 }
1261
1262 .eps-menu-item {
1263 display: flex;
1264 align-items: center;
1265 position: relative;
1266 transition: 0.3s;
1267 --action-button-opacity: 0;
1268 }
1269 .eps-menu-item::before {
1270 content: "";
1271 display: block;
1272 position: absolute;
1273 inset-block-start: 0;
1274 inset-inline-start: 0;
1275 height: 100%;
1276 width: var(--menu-item-pointer-width);
1277 background-color: #0C0D0E;
1278 }
1279 .eps-menu-item:hover:not(.eps-menu-item--active) {
1280 background-color: var(--menu-item-background-color-hover);
1281 --action-button-opacity: 1;
1282 --menu-item-color: var(--menu-item-color-hover);
1283 --eps-link-color: var(--menu-item-color-hover);
1284 }
1285 .eps-menu-item--active {
1286 background-color: var(--menu-item-background-color-active);
1287 --menu-item-color: var(--menu-item-color-active);
1288 --eps-link-color: var(--menu-item-color-active);
1289 }
1290 .eps-menu-item__link {
1291 padding: 0.5rem 1.875rem;
1292 min-height: 2.75rem;
1293 font-size: 0.75rem;
1294 line-height: 1.2;
1295 flex-grow: 1;
1296 display: flex;
1297 align-items: center;
1298 color: var(--menu-item-color);
1299 --eps-link-color: var(--menu-item-color);
1300 }
1301 .eps-menu-item__link:not(:last-child) {
1302 padding-inline-end: 0;
1303 }
1304 .eps-menu-item__link .eps-icon {
1305 font-size: 1.125rem;
1306 margin-inline-end: 0.75rem;
1307 }
1308 .eps-menu-item__action-button {
1309 opacity: var(--action-button-opacity);
1310 padding: 0.625rem;
1311 transition: 0.3s;
1312 margin-inline-end: 1.25rem;
1313 }
1314 .eps-menu-item--active {
1315 --menu-item-pointer-width: 0.3125rem;
1316 }
1317
1318 .eps-grid-container {
1319 display: flex;
1320 flex-wrap: wrap;
1321 width: 100%;
1322 }
1323 .eps-grid-container--no-wrap {
1324 flex-wrap: nowrap;
1325 }
1326 .eps-grid-container--wrap-reverse {
1327 flex-wrap: wrap-reverse;
1328 }
1329 .eps-grid-container--spacing {
1330 --grid-row-gutter: calc(-1 * calc(var(--grid-spacing-gutter) * 0.625rem / 10));
1331 width: var(--grid-spacing-width);
1332 margin: var(--grid-row-gutter);
1333 }
1334 .eps-grid-container--spacing > .eps-grid-item {
1335 padding: var(--grid-spacing-gutter);
1336 }
1337 .eps-grid--direction-row {
1338 flex-direction: row;
1339 }
1340 .eps-grid--direction-row-reverse {
1341 flex-direction: row-reverse;
1342 }
1343 .eps-grid--direction-column {
1344 flex-direction: column;
1345 }
1346 .eps-grid--direction-column-reverse {
1347 flex-direction: column-reverse;
1348 }
1349 .eps-grid--justify-stretch {
1350 justify-content: stretch;
1351 }
1352 .eps-grid--justify-start {
1353 justify-content: flex-start;
1354 }
1355 .eps-grid--justify-center {
1356 justify-content: center;
1357 }
1358 .eps-grid--justify-end {
1359 justify-content: flex-end;
1360 }
1361 .eps-grid--justify-space-between {
1362 justify-content: space-between;
1363 }
1364 .eps-grid--justify-space-around {
1365 justify-content: space-around;
1366 }
1367 .eps-grid--justify-space-evenly {
1368 justify-content: space-evenly;
1369 }
1370 .eps-grid--align-content-stretch {
1371 align-content: stretch;
1372 }
1373 .eps-grid--align-content-start {
1374 align-content: flex-start;
1375 }
1376 .eps-grid--align-content-center {
1377 align-content: center;
1378 }
1379 .eps-grid--align-content-end {
1380 align-content: flex-end;
1381 }
1382 .eps-grid--align-content-space-between {
1383 align-content: space-between;
1384 }
1385 .eps-grid--align-items-start {
1386 align-items: flex-start;
1387 }
1388 .eps-grid--align-items-center {
1389 align-items: center;
1390 }
1391 .eps-grid--align-items-end {
1392 align-items: flex-end;
1393 }
1394 .eps-grid--align-items-baseline {
1395 align-items: baseline;
1396 }
1397 .eps-grid--align-items-stretch {
1398 align-items: stretch;
1399 }
1400
1401 .eps-grid-item--zero-min-width {
1402 min-width: 0;
1403 }
1404
1405 @media screen and (min-width: 480px) {
1406 .eps-grid-item-sm {
1407 flex-grow: 1;
1408 max-width: 100%;
1409 flex-basis: 0;
1410 }
1411 }
1412 @media screen and (min-width: 768px) {
1413 .eps-grid-item-md {
1414 flex-grow: 1;
1415 max-width: 100%;
1416 flex-basis: 0;
1417 }
1418 }
1419 @media screen and (min-width: 1025px) {
1420 .eps-grid-item-lg {
1421 flex-grow: 1;
1422 max-width: 100%;
1423 flex-basis: 0;
1424 }
1425 }
1426 @media screen and (min-width: 1440px) {
1427 .eps-grid-item-xl {
1428 flex-grow: 1;
1429 max-width: 100%;
1430 flex-basis: 0;
1431 }
1432 }
1433 @media screen and (min-width: 1600px) {
1434 .eps-grid-item-xxl {
1435 flex-grow: 1;
1436 max-width: 100%;
1437 flex-basis: 0;
1438 }
1439 }
1440 .eps-grid-item-xs-1 {
1441 flex-grow: 0;
1442 max-width: calc(1 / 12 * 100%);
1443 flex-basis: calc(1 / 12 * 100%);
1444 }
1445
1446 .eps-grid-item-xs-2 {
1447 flex-grow: 0;
1448 max-width: calc(2 / 12 * 100%);
1449 flex-basis: calc(2 / 12 * 100%);
1450 }
1451
1452 .eps-grid-item-xs-3 {
1453 flex-grow: 0;
1454 max-width: calc(3 / 12 * 100%);
1455 flex-basis: calc(3 / 12 * 100%);
1456 }
1457
1458 .eps-grid-item-xs-4 {
1459 flex-grow: 0;
1460 max-width: calc(4 / 12 * 100%);
1461 flex-basis: calc(4 / 12 * 100%);
1462 }
1463
1464 .eps-grid-item-xs-5 {
1465 flex-grow: 0;
1466 max-width: calc(5 / 12 * 100%);
1467 flex-basis: calc(5 / 12 * 100%);
1468 }
1469
1470 .eps-grid-item-xs-6 {
1471 flex-grow: 0;
1472 max-width: calc(6 / 12 * 100%);
1473 flex-basis: calc(6 / 12 * 100%);
1474 }
1475
1476 .eps-grid-item-xs-7 {
1477 flex-grow: 0;
1478 max-width: calc(7 / 12 * 100%);
1479 flex-basis: calc(7 / 12 * 100%);
1480 }
1481
1482 .eps-grid-item-xs-8 {
1483 flex-grow: 0;
1484 max-width: calc(8 / 12 * 100%);
1485 flex-basis: calc(8 / 12 * 100%);
1486 }
1487
1488 .eps-grid-item-xs-9 {
1489 flex-grow: 0;
1490 max-width: calc(9 / 12 * 100%);
1491 flex-basis: calc(9 / 12 * 100%);
1492 }
1493
1494 .eps-grid-item-xs-10 {
1495 flex-grow: 0;
1496 max-width: calc(10 / 12 * 100%);
1497 flex-basis: calc(10 / 12 * 100%);
1498 }
1499
1500 .eps-grid-item-xs-11 {
1501 flex-grow: 0;
1502 max-width: calc(11 / 12 * 100%);
1503 flex-basis: calc(11 / 12 * 100%);
1504 }
1505
1506 .eps-grid-item-xs-12 {
1507 flex-grow: 0;
1508 max-width: calc(12 / 12 * 100%);
1509 flex-basis: calc(12 / 12 * 100%);
1510 }
1511
1512 @media screen and (min-width: 480px) {
1513 .eps-grid-item-sm-1 {
1514 flex-grow: 0;
1515 max-width: calc(1 / 12 * 100%);
1516 flex-basis: calc(1 / 12 * 100%);
1517 }
1518 .eps-grid-item-sm-2 {
1519 flex-grow: 0;
1520 max-width: calc(2 / 12 * 100%);
1521 flex-basis: calc(2 / 12 * 100%);
1522 }
1523 .eps-grid-item-sm-3 {
1524 flex-grow: 0;
1525 max-width: calc(3 / 12 * 100%);
1526 flex-basis: calc(3 / 12 * 100%);
1527 }
1528 .eps-grid-item-sm-4 {
1529 flex-grow: 0;
1530 max-width: calc(4 / 12 * 100%);
1531 flex-basis: calc(4 / 12 * 100%);
1532 }
1533 .eps-grid-item-sm-5 {
1534 flex-grow: 0;
1535 max-width: calc(5 / 12 * 100%);
1536 flex-basis: calc(5 / 12 * 100%);
1537 }
1538 .eps-grid-item-sm-6 {
1539 flex-grow: 0;
1540 max-width: calc(6 / 12 * 100%);
1541 flex-basis: calc(6 / 12 * 100%);
1542 }
1543 .eps-grid-item-sm-7 {
1544 flex-grow: 0;
1545 max-width: calc(7 / 12 * 100%);
1546 flex-basis: calc(7 / 12 * 100%);
1547 }
1548 .eps-grid-item-sm-8 {
1549 flex-grow: 0;
1550 max-width: calc(8 / 12 * 100%);
1551 flex-basis: calc(8 / 12 * 100%);
1552 }
1553 .eps-grid-item-sm-9 {
1554 flex-grow: 0;
1555 max-width: calc(9 / 12 * 100%);
1556 flex-basis: calc(9 / 12 * 100%);
1557 }
1558 .eps-grid-item-sm-10 {
1559 flex-grow: 0;
1560 max-width: calc(10 / 12 * 100%);
1561 flex-basis: calc(10 / 12 * 100%);
1562 }
1563 .eps-grid-item-sm-11 {
1564 flex-grow: 0;
1565 max-width: calc(11 / 12 * 100%);
1566 flex-basis: calc(11 / 12 * 100%);
1567 }
1568 .eps-grid-item-sm-12 {
1569 flex-grow: 0;
1570 max-width: calc(12 / 12 * 100%);
1571 flex-basis: calc(12 / 12 * 100%);
1572 }
1573 }
1574 @media screen and (min-width: 768px) {
1575 .eps-grid-item-md-1 {
1576 flex-grow: 0;
1577 max-width: calc(1 / 12 * 100%);
1578 flex-basis: calc(1 / 12 * 100%);
1579 }
1580 .eps-grid-item-md-2 {
1581 flex-grow: 0;
1582 max-width: calc(2 / 12 * 100%);
1583 flex-basis: calc(2 / 12 * 100%);
1584 }
1585 .eps-grid-item-md-3 {
1586 flex-grow: 0;
1587 max-width: calc(3 / 12 * 100%);
1588 flex-basis: calc(3 / 12 * 100%);
1589 }
1590 .eps-grid-item-md-4 {
1591 flex-grow: 0;
1592 max-width: calc(4 / 12 * 100%);
1593 flex-basis: calc(4 / 12 * 100%);
1594 }
1595 .eps-grid-item-md-5 {
1596 flex-grow: 0;
1597 max-width: calc(5 / 12 * 100%);
1598 flex-basis: calc(5 / 12 * 100%);
1599 }
1600 .eps-grid-item-md-6 {
1601 flex-grow: 0;
1602 max-width: calc(6 / 12 * 100%);
1603 flex-basis: calc(6 / 12 * 100%);
1604 }
1605 .eps-grid-item-md-7 {
1606 flex-grow: 0;
1607 max-width: calc(7 / 12 * 100%);
1608 flex-basis: calc(7 / 12 * 100%);
1609 }
1610 .eps-grid-item-md-8 {
1611 flex-grow: 0;
1612 max-width: calc(8 / 12 * 100%);
1613 flex-basis: calc(8 / 12 * 100%);
1614 }
1615 .eps-grid-item-md-9 {
1616 flex-grow: 0;
1617 max-width: calc(9 / 12 * 100%);
1618 flex-basis: calc(9 / 12 * 100%);
1619 }
1620 .eps-grid-item-md-10 {
1621 flex-grow: 0;
1622 max-width: calc(10 / 12 * 100%);
1623 flex-basis: calc(10 / 12 * 100%);
1624 }
1625 .eps-grid-item-md-11 {
1626 flex-grow: 0;
1627 max-width: calc(11 / 12 * 100%);
1628 flex-basis: calc(11 / 12 * 100%);
1629 }
1630 .eps-grid-item-md-12 {
1631 flex-grow: 0;
1632 max-width: calc(12 / 12 * 100%);
1633 flex-basis: calc(12 / 12 * 100%);
1634 }
1635 }
1636 @media screen and (min-width: 1025px) {
1637 .eps-grid-item-lg-1 {
1638 flex-grow: 0;
1639 max-width: calc(1 / 12 * 100%);
1640 flex-basis: calc(1 / 12 * 100%);
1641 }
1642 .eps-grid-item-lg-2 {
1643 flex-grow: 0;
1644 max-width: calc(2 / 12 * 100%);
1645 flex-basis: calc(2 / 12 * 100%);
1646 }
1647 .eps-grid-item-lg-3 {
1648 flex-grow: 0;
1649 max-width: calc(3 / 12 * 100%);
1650 flex-basis: calc(3 / 12 * 100%);
1651 }
1652 .eps-grid-item-lg-4 {
1653 flex-grow: 0;
1654 max-width: calc(4 / 12 * 100%);
1655 flex-basis: calc(4 / 12 * 100%);
1656 }
1657 .eps-grid-item-lg-5 {
1658 flex-grow: 0;
1659 max-width: calc(5 / 12 * 100%);
1660 flex-basis: calc(5 / 12 * 100%);
1661 }
1662 .eps-grid-item-lg-6 {
1663 flex-grow: 0;
1664 max-width: calc(6 / 12 * 100%);
1665 flex-basis: calc(6 / 12 * 100%);
1666 }
1667 .eps-grid-item-lg-7 {
1668 flex-grow: 0;
1669 max-width: calc(7 / 12 * 100%);
1670 flex-basis: calc(7 / 12 * 100%);
1671 }
1672 .eps-grid-item-lg-8 {
1673 flex-grow: 0;
1674 max-width: calc(8 / 12 * 100%);
1675 flex-basis: calc(8 / 12 * 100%);
1676 }
1677 .eps-grid-item-lg-9 {
1678 flex-grow: 0;
1679 max-width: calc(9 / 12 * 100%);
1680 flex-basis: calc(9 / 12 * 100%);
1681 }
1682 .eps-grid-item-lg-10 {
1683 flex-grow: 0;
1684 max-width: calc(10 / 12 * 100%);
1685 flex-basis: calc(10 / 12 * 100%);
1686 }
1687 .eps-grid-item-lg-11 {
1688 flex-grow: 0;
1689 max-width: calc(11 / 12 * 100%);
1690 flex-basis: calc(11 / 12 * 100%);
1691 }
1692 .eps-grid-item-lg-12 {
1693 flex-grow: 0;
1694 max-width: calc(12 / 12 * 100%);
1695 flex-basis: calc(12 / 12 * 100%);
1696 }
1697 }
1698 @media screen and (min-width: 1440px) {
1699 .eps-grid-item-xl-1 {
1700 flex-grow: 0;
1701 max-width: calc(1 / 12 * 100%);
1702 flex-basis: calc(1 / 12 * 100%);
1703 }
1704 .eps-grid-item-xl-2 {
1705 flex-grow: 0;
1706 max-width: calc(2 / 12 * 100%);
1707 flex-basis: calc(2 / 12 * 100%);
1708 }
1709 .eps-grid-item-xl-3 {
1710 flex-grow: 0;
1711 max-width: calc(3 / 12 * 100%);
1712 flex-basis: calc(3 / 12 * 100%);
1713 }
1714 .eps-grid-item-xl-4 {
1715 flex-grow: 0;
1716 max-width: calc(4 / 12 * 100%);
1717 flex-basis: calc(4 / 12 * 100%);
1718 }
1719 .eps-grid-item-xl-5 {
1720 flex-grow: 0;
1721 max-width: calc(5 / 12 * 100%);
1722 flex-basis: calc(5 / 12 * 100%);
1723 }
1724 .eps-grid-item-xl-6 {
1725 flex-grow: 0;
1726 max-width: calc(6 / 12 * 100%);
1727 flex-basis: calc(6 / 12 * 100%);
1728 }
1729 .eps-grid-item-xl-7 {
1730 flex-grow: 0;
1731 max-width: calc(7 / 12 * 100%);
1732 flex-basis: calc(7 / 12 * 100%);
1733 }
1734 .eps-grid-item-xl-8 {
1735 flex-grow: 0;
1736 max-width: calc(8 / 12 * 100%);
1737 flex-basis: calc(8 / 12 * 100%);
1738 }
1739 .eps-grid-item-xl-9 {
1740 flex-grow: 0;
1741 max-width: calc(9 / 12 * 100%);
1742 flex-basis: calc(9 / 12 * 100%);
1743 }
1744 .eps-grid-item-xl-10 {
1745 flex-grow: 0;
1746 max-width: calc(10 / 12 * 100%);
1747 flex-basis: calc(10 / 12 * 100%);
1748 }
1749 .eps-grid-item-xl-11 {
1750 flex-grow: 0;
1751 max-width: calc(11 / 12 * 100%);
1752 flex-basis: calc(11 / 12 * 100%);
1753 }
1754 .eps-grid-item-xl-12 {
1755 flex-grow: 0;
1756 max-width: calc(12 / 12 * 100%);
1757 flex-basis: calc(12 / 12 * 100%);
1758 }
1759 }
1760 @media screen and (min-width: 1600px) {
1761 .eps-grid-item-xxl-1 {
1762 flex-grow: 0;
1763 max-width: calc(1 / 12 * 100%);
1764 flex-basis: calc(1 / 12 * 100%);
1765 }
1766 .eps-grid-item-xxl-2 {
1767 flex-grow: 0;
1768 max-width: calc(2 / 12 * 100%);
1769 flex-basis: calc(2 / 12 * 100%);
1770 }
1771 .eps-grid-item-xxl-3 {
1772 flex-grow: 0;
1773 max-width: calc(3 / 12 * 100%);
1774 flex-basis: calc(3 / 12 * 100%);
1775 }
1776 .eps-grid-item-xxl-4 {
1777 flex-grow: 0;
1778 max-width: calc(4 / 12 * 100%);
1779 flex-basis: calc(4 / 12 * 100%);
1780 }
1781 .eps-grid-item-xxl-5 {
1782 flex-grow: 0;
1783 max-width: calc(5 / 12 * 100%);
1784 flex-basis: calc(5 / 12 * 100%);
1785 }
1786 .eps-grid-item-xxl-6 {
1787 flex-grow: 0;
1788 max-width: calc(6 / 12 * 100%);
1789 flex-basis: calc(6 / 12 * 100%);
1790 }
1791 .eps-grid-item-xxl-7 {
1792 flex-grow: 0;
1793 max-width: calc(7 / 12 * 100%);
1794 flex-basis: calc(7 / 12 * 100%);
1795 }
1796 .eps-grid-item-xxl-8 {
1797 flex-grow: 0;
1798 max-width: calc(8 / 12 * 100%);
1799 flex-basis: calc(8 / 12 * 100%);
1800 }
1801 .eps-grid-item-xxl-9 {
1802 flex-grow: 0;
1803 max-width: calc(9 / 12 * 100%);
1804 flex-basis: calc(9 / 12 * 100%);
1805 }
1806 .eps-grid-item-xxl-10 {
1807 flex-grow: 0;
1808 max-width: calc(10 / 12 * 100%);
1809 flex-basis: calc(10 / 12 * 100%);
1810 }
1811 .eps-grid-item-xxl-11 {
1812 flex-grow: 0;
1813 max-width: calc(11 / 12 * 100%);
1814 flex-basis: calc(11 / 12 * 100%);
1815 }
1816 .eps-grid-item-xxl-12 {
1817 flex-grow: 0;
1818 max-width: calc(12 / 12 * 100%);
1819 flex-basis: calc(12 / 12 * 100%);
1820 }
1821 }
1822 :root {
1823 --menu-title-color: #515962;
1824 }
1825
1826 .eps-theme-dark {
1827 --menu-title-color: #515962;
1828 }
1829
1830 .eps-menu ul {
1831 list-style: none;
1832 padding: 0;
1833 margin: 0;
1834 }
1835 .eps-menu ul li {
1836 display: flex;
1837 }
1838 .eps-menu__title {
1839 padding: 0.5rem 1.875rem;
1840 font-size: 0.6875rem;
1841 line-height: 1.2;
1842 text-transform: uppercase;
1843 font-weight: normal;
1844 color: var(--menu-title-color);
1845 }
1846
1847 :root {
1848 --eps-modal-background-color: #ffffff;
1849 --eps-modal-header-background-color: #2563EB;
1850 --eps-tip-background-color: #F0F7FF;
1851 }
1852
1853 .eps-theme-dark {
1854 --eps-modal-background-color: #0C0D0E;
1855 --eps-modal-header-background-color: #0077CC;
1856 --eps-tip-background-color: #0A1A3D;
1857 }
1858
1859 /** ----------------------------------------------------------------
1860 EPS Modal
1861 ---------------------------------------------------------------- */
1862 .eps-modal {
1863 max-width: 43.75rem;
1864 background: var(--eps-modal-background-color);
1865 border-radius: 0.1875rem;
1866 animation: eps-animation-pop 0.15s cubic-bezier(0.57, 0.53, 0.71, 1.47) forwards;
1867 }
1868 .eps-modal__overlay {
1869 background: rgba(0, 0, 0, 0.5);
1870 position: fixed;
1871 display: flex;
1872 inset: 0;
1873 align-items: center;
1874 justify-content: center;
1875 z-index: 1030;
1876 }
1877 .eps-modal__header {
1878 font-size: 0.875rem;
1879 background: var(--eps-modal-header-background-color);
1880 height: 2.75rem;
1881 padding: 0.625rem 1rem;
1882 border-radius: 0.1875rem;
1883 }
1884 .eps-modal__header, .eps-modal__header .title {
1885 color: #ffffff;
1886 }
1887 .eps-modal__icon {
1888 margin-inline-end: 0.625rem;
1889 }
1890 .eps-modal__body {
1891 padding: 1.875rem;
1892 }
1893 .eps-modal__tip, .eps-modal .eps-tip {
1894 padding: 0.5rem;
1895 padding-inline-start: 0.75rem;
1896 border-inline-start: 3px solid #2563EB;
1897 background-color: var(--eps-tip-background-color);
1898 }
1899 .eps-modal__tip:not(:last-child), .eps-modal .eps-tip:not(:last-child) {
1900 margin-block-end: 1.875rem;
1901 }
1902 .eps-modal__tip:not(:first-child), .eps-modal .eps-tip:not(:first-child) {
1903 margin-block-start: 1.875rem;
1904 }
1905 .eps-modal__section:not(:first-child) {
1906 margin-block-start: 1.875rem;
1907 }
1908 .eps-modal__close-wrapper {
1909 padding-inline-start: 1rem;
1910 border-inline-start: solid 1px #ffffff;
1911 }
1912
1913 .eps-add-new-button {
1914 display: inline-flex;
1915 --eps-add-new-button-size: 1.5rem;
1916 line-height: var(--eps-add-new-button-size);
1917 cursor: pointer;
1918 }
1919 .eps-add-new-button .eps-icon {
1920 background-color: #F3BAFD;
1921 color: #0C0D0E;
1922 width: var(--eps-add-new-button-size);
1923 height: var(--eps-add-new-button-size);
1924 border-radius: 100%;
1925 font-size: calc(var(--eps-add-new-button-size) * 0.75);
1926 text-align: center;
1927 line-height: var(--eps-add-new-button-size);
1928 }
1929 .eps-add-new-button span:not(.sr-only) {
1930 margin-inline-start: 0.625rem;
1931 font-weight: 500;
1932 }
1933 .eps-add-new-button--sm {
1934 --eps-add-new-button-size: 1rem;
1935 }
1936
1937 :root {
1938 --select2-selection-background-color: #ffffff;
1939 --select2-selection-color: #515962;
1940 --select2-selection-border-color: #9DA5AE;
1941 --select2-selection-opened-focused-border-color: #BABFC5;
1942 --select2-single-selection-rendered-color: #515962;
1943 --select2-default-single-selection-background-color: #ffffff;
1944 --select2-default-single-selection-border-color: #9DA5AE;
1945 --select2-default-multiple-selection-background-color: #ffffff;
1946 --select2-default-multiple-selection-choice-background-color: #BABFC5;
1947 --select2-default-multiple-selection-choice-color: #515962;
1948 --select2-default-multiple-selection-choice-border-color: #BABFC5;
1949 --select2-default-multiple-selection-choice-remove-color: #69727D;
1950 --select2-default-multiple-selection-choice-remove-hover-color: #515962;
1951 --select2-default-results-selected-option-background-color: #ffffff;
1952 --select2-default-results-selected-option-color: #515962;
1953 --select2-default-results-highlighted-option-background-color: #5897fb;
1954 --select2-default-results-highlighted-option-color: #ffffff;
1955 --select2-results-selected-option-background-color: #5897fb;
1956 --select2-results-selected-option-color: #ffffff;
1957 --select2-dropdown-background-color: #ffffff;
1958 --select2-dropdown-border-color: #9DA5AE;
1959 }
1960
1961 .eps-theme-dark {
1962 --select2-selection-background-color: #3f444b;
1963 --select2-selection-color: #D5D8DC;
1964 --select2-selection-border-color: #818A96;
1965 --select2-selection-opened-focused-border-color: #9DA5AE;
1966 --select2-single-selection-rendered-color: #D5D8DC;
1967 --select2-default-single-selection-background-color: #3f444b;
1968 --select2-default-single-selection-border-color: #69727D;
1969 --select2-default-multiple-selection-background-color: #3f444b;
1970 --select2-default-multiple-selection-choice-background-color: #69727D;
1971 --select2-default-multiple-selection-choice-color: #D5D8DC;
1972 --select2-default-multiple-selection-choice-border-color: #69727D;
1973 --select2-default-multiple-selection-choice-remove-color: #BABFC5;
1974 --select2-default-multiple-selection-choice-remove-hover-color: #D5D8DC;
1975 --select2-default-results-selected-option-background-color: #3f444b;
1976 --select2-default-results-selected-option-color: #D5D8DC;
1977 --select2-default-results-highlighted-option-background-color: #69727D;
1978 --select2-default-results-highlighted-option-color: #D5D8DC;
1979 --select2-results-selected-option-background-color: #69727D;
1980 --select2-results-selected-option-color: #D5D8DC;
1981 --select2-dropdown-background-color: #3f444b;
1982 --select2-dropdown-border-color: #818A96;
1983 }
1984
1985 .select2-container:not(.select2-container--open):not(.select2-container--focus) .select2-selection--single,
1986 .select2-container:not(.select2-container--open):not(.select2-container--focus) .select2-selection--multiple {
1987 background-color: var(--select2-selection-background-color);
1988 color: var(--select2-selection-color);
1989 border-color: var(--select2-selection-border-color);
1990 }
1991 .select2-container.select2-container--open .select2-selection--single,
1992 .select2-container.select2-container--open .select2-selection--multiple, .select2-container.select2-container--focus .select2-selection--single,
1993 .select2-container.select2-container--focus .select2-selection--multiple {
1994 border-color: var(--select2-selection-opened-focused-border-color);
1995 }
1996 .select2-container.select2-container--default .select2-selection--single .select2-selection__rendered {
1997 color: var(--select2-single-selection-rendered-color);
1998 }
1999 .select2-container--default .select2-selection--single {
2000 background-color: var(--select2-default-single-selection-background-color);
2001 border-color: var(--select2-default-single-selection-border-color);
2002 }
2003 .select2-container--default .select2-selection--multiple {
2004 background-color: var(--select2-default-multiple-selection-background-color);
2005 }
2006 .select2-container--default .select2-selection--multiple .select2-selection__choice {
2007 background-color: var(--select2-default-multiple-selection-choice-background-color);
2008 color: var(--select2-default-multiple-selection-choice-color);
2009 border-color: var(--select2-default-multiple-selection-choice-border-color);
2010 }
2011 .select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
2012 color: var(--select2-default-multiple-selection-choice-remove-color);
2013 }
2014 .select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover {
2015 color: var(--select2-default-multiple-selection-choice-remove-hover-color);
2016 }
2017 .select2-container--default .select2-results__option[aria-selected] {
2018 background-color: var(--select2-default-results-selected-option-background-color);
2019 color: var(--select2-default-results-selected-option-color);
2020 }
2021 .select2-container--default .select2-results__option--highlighted[aria-selected] {
2022 background-color: var(--select2-default-results-highlighted-option-background-color);
2023 color: var(--select2-default-results-highlighted-option-color);
2024 }
2025 .select2-container .select2-results__option[aria-selected=true] {
2026 background-color: var(--select2-results-selected-option-background-color);
2027 color: var(--select2-results-selected-option-color);
2028 }
2029 .select2-container .select2-dropdown {
2030 background-color: var(--select2-dropdown-background-color);
2031 border-color: var(--select2-dropdown-border-color);
2032 }
2033
2034 .eps-notice {
2035 --eps-box-notice-background-color: #F1F2F3;
2036 padding: 0.625rem 1rem;
2037 }
2038 .eps-notice-semantic {
2039 border-inline-start: 3px solid var(--eps-notice-semantic-color);
2040 background-color: var(--eps-notice-semantic-bg);
2041 }
2042 .eps-notice-semantic .eps-notice__icon {
2043 color: var(--eps-notice-semantic-color);
2044 font-size: 1rem;
2045 margin-inline-end: 0.75rem;
2046 }
2047 .eps-notice--warning {
2048 --eps-notice-semantic-color: #F59E0B;
2049 --eps-notice-semantic-bg: #FFFBEB;
2050 }
2051 .eps-notice--danger {
2052 --eps-notice-semantic-color: #DC2626;
2053 --eps-notice-semantic-bg: #FEF1F4;
2054 }
2055 .eps-notice--info {
2056 --eps-notice-semantic-color: #2563EB;
2057 --eps-notice-semantic-bg: #F0F7FF;
2058 }
2059 .eps-notice__text {
2060 margin: 0;
2061 padding: 0;
2062 }
2063 .eps-notice__button-container {
2064 flex-shrink: 0;
2065 margin-inline-start: 1.25rem;
2066 width: auto;
2067 }
2068
2069 .eps-theme-dark .eps-notice {
2070 --eps-box-notice-background-color: #515962;
2071 }
2072 .eps-theme-dark .eps-notice--warning {
2073 --eps-notice-semantic-bg: #311808;
2074 }
2075 .eps-theme-dark .eps-notice--danger {
2076 --eps-notice-semantic-bg: #390A0A;
2077 }
2078 .eps-theme-dark .eps-notice--info {
2079 --eps-notice-semantic-bg: #0A1A3D;
2080 }
2081
2082 .eps-list {
2083 --eps-list-item-separated-border-color: #BABFC5;
2084 padding: 0;
2085 margin: 0;
2086 border-radius: 0.1875rem;
2087 border: 1px solid var(--e-a-border-color);
2088 list-style-type: none;
2089 }
2090 .eps-list--padding {
2091 padding: var(--eps-list-padding);
2092 }
2093 .eps-list__item {
2094 padding: 0;
2095 }
2096 .eps-list__item--padding {
2097 padding: var(--eps-list-item-padding);
2098 }
2099 .eps-list--separated .eps-list__item:not(:last-child) {
2100 border-block-end: 1px solid var(--eps-list-item-separated-border-color);
2101 }
2102
2103 .eps-theme-dark .eps-list {
2104 --eps-list-item-separated-border-color: #3f444b;
2105 }
2106
2107 :root {
2108 --popover-background-color: #ffffff;
2109 --popover-item-color: #515962;
2110 --popover-item-hover-color: #3f444b;
2111 --popover-item-danger-hover-color: #DC2626;
2112 --popover-item-background-color: #ffffff;
2113 --popover-box-shadow-color: rgba(0, 0, 0, 0.15);
2114 --popover-box-shadow-size: 0px 1px 20px;
2115 --popover-arrow-color: #ffffff;
2116 }
2117
2118 .eps-theme-dark {
2119 --popover-background-color: #1f2124;
2120 --popover-item-color: #ffffff;
2121 --popover-item-hover-color: #D5D8DC;
2122 --popover-item-danger-hover-color: #F84343;
2123 --popover-item-background-color: #1f2124;
2124 --popover-box-shadow-color: rgba(0, 0, 0, 0.15);
2125 --popover-box-shadow-size: 0px 1px 20px;
2126 --popover-arrow-color: #1f2124;
2127 }
2128
2129 .eps-popover {
2130 padding: 10px 0;
2131 background-color: var(--popover-background-color);
2132 box-shadow: var(--popover-box-shadow-size) var(--popover-box-shadow-color);
2133 list-style: none;
2134 display: flex;
2135 flex-direction: column;
2136 min-width: 120px;
2137 border-radius: 0.1875rem;
2138 position: absolute;
2139 z-index: 1050;
2140 margin-block-start: 9px;
2141 transform: translateX(-50%);
2142 inset-inline-start: 0.25rem;
2143 }
2144 .eps-popover__background {
2145 position: fixed;
2146 inset: 0;
2147 z-index: 1030;
2148 }
2149 .eps-popover__container {
2150 position: relative;
2151 }
2152 .eps-popover::before {
2153 content: "";
2154 display: block;
2155 position: absolute;
2156 width: 16px;
2157 height: 9px;
2158 margin: 0 0.1875rem 9px;
2159 inset-block-start: -9px;
2160 inset-inline-start: 50%;
2161 transform: translateX(-50%);
2162 border-color: transparent;
2163 border-style: solid;
2164 border-width: 0 calc(16px / 2) 9px calc(16px / 2);
2165 border-block-end-color: var(--popover-arrow-color);
2166 }
2167 .eps-popover--arrow-start::before {
2168 inset-inline-start: 0.1875rem;
2169 transform: none;
2170 }
2171 .eps-popover--arrow-end::before {
2172 inset-inline-start: auto;
2173 inset-inline-end: 0.1875rem;
2174 transform: none;
2175 }
2176 .eps-popover--arrow-none::before {
2177 display: none;
2178 }
2179 .eps-popover__item {
2180 padding: 0.3125rem 1rem;
2181 background-color: var(--popover-item-background-color);
2182 color: var(--popover-item-color);
2183 font-size: 0.6875rem;
2184 font-weight: 500;
2185 line-height: 0.8125rem;
2186 width: 100%;
2187 align-items: center;
2188 cursor: pointer;
2189 }
2190 .eps-popover__item:hover {
2191 color: var(--popover-item-hover-color);
2192 }
2193 .eps-popover__item--danger:hover {
2194 color: var(--popover-item-danger-hover-color);
2195 }
2196 .eps-popover__item .eps-icon {
2197 font-size: inherit;
2198 margin-inline-end: 0.3125rem;
2199 }
2200
2201 .eps-css-grid {
2202 display: grid;
2203 grid-template-columns: repeat(var(--eps-grid-columns, auto-fill), minmax(var(--eps-grid-col-min-width, 1fr), var(--eps-grid-col-max-width, 1fr)));
2204 grid-gap: var(--eps-grid-spacing);
2205 }
2206
2207 .eps-box {
2208 --eps-box-color: #1f2124;
2209 --eps-box-input-color: #1f2124;
2210 padding: 0;
2211 border-radius: 0.1875rem;
2212 color: var(--eps-box-color);
2213 }
2214 .eps-box--padding {
2215 padding: var(--eps-box-padding);
2216 }
2217 .eps-box > input {
2218 width: 100%;
2219 outline: 0;
2220 border: 0;
2221 background-color: transparent;
2222 color: var(--eps-box-input-color);
2223 }
2224
2225 .eps-theme-dark .eps-box {
2226 --eps-box-color: #D5D8DC;
2227 --eps-box-input-color: #D5D8DC;
2228 }
2229
2230 :root {
2231 --checkbox-border-color: #9DA5AE;
2232 --checkbox-hover-border-color: rgb(143.0391061453, 152.1787709497, 162.4608938547);
2233 --checkbox-active-border-color: rgb(170.9608938547, 177.8212290503, 185.5391061453);
2234 --checkbox-background-color: #ffffff;
2235 --checkbox-checked-background-color: #515962;
2236 --checkbox-checked-hover-background-color: rgb(69.4608938547, 76.3212290503, 84.0391061453);
2237 --checkbox-checked-active-background-color: rgb(92.5391061453, 101.6787709497, 111.9608938547);
2238 --checkbox-checked-disabled-background-color: #D5D8DC;
2239 --checkbox-indicator-color: #ffffff;
2240 --checkbox-error-background-color: #DC2626;
2241 }
2242
2243 .eps-theme-dark {
2244 --checkbox-background-color: transparent;
2245 }
2246
2247 .eps-checkbox {
2248 -webkit-appearance: none;
2249 -moz-appearance: none;
2250 appearance: none;
2251 border-radius: 0.1875rem;
2252 width: 15px;
2253 height: 15px;
2254 outline: 0;
2255 background-color: var(--checkbox-background-color);
2256 display: inline-flex;
2257 justify-content: center;
2258 align-items: center;
2259 border: 1px solid var(--checkbox-border-color);
2260 }
2261 .eps-checkbox::after {
2262 display: inline-block;
2263 margin-block-end: calc(0.25 / 2 * 100%);
2264 content: " ";
2265 width: 3px;
2266 height: 6px;
2267 transform: rotate(45deg);
2268 }
2269 .eps-checkbox:hover {
2270 --checkbox-border-color: var(--checkbox-hover-border-color);
2271 }
2272 .eps-checkbox:active {
2273 --checkbox-border-color: var(--checkbox-active-border-color);
2274 }
2275 .eps-checkbox:checked {
2276 --checkbox-background-color: var(--checkbox-checked-background-color);
2277 --checkbox-border-color: var(--checkbox-checked-background-color);
2278 }
2279 .eps-checkbox:checked::after {
2280 border: solid #ffffff;
2281 border-width: 0 1px 1px 0;
2282 }
2283 .eps-checkbox:checked:hover {
2284 --checkbox-background-color: var(--checkbox-checked-hover-background-color);
2285 --checkbox-border-color: var(--checkbox-checked-hover-background-color);
2286 }
2287 .eps-checkbox:checked:active {
2288 --checkbox-background-color: var(--checkbox-checked-active-background-color);
2289 --checkbox-border-color: var(--checkbox-checked-active-background-color);
2290 }
2291 .eps-checkbox:checked:disabled {
2292 --checkbox-background-color: var(--checkbox-checked-disabled-background-color);
2293 --checkbox-border-color: var(--checkbox-checked-disabled-background-color);
2294 }
2295 .eps-checkbox--rounded {
2296 border-radius: 50%;
2297 }
2298 .eps-checkbox--indeterminate::after {
2299 display: inline-block;
2300 margin-block-end: 0;
2301 content: " ";
2302 width: 7px;
2303 height: 0;
2304 transform: rotate(0deg);
2305 border-block-start: 1px solid #ffffff;
2306 }
2307 .eps-checkbox--indeterminate {
2308 --checkbox-background-color: var(--checkbox-checked-background-color);
2309 --checkbox-border-color: var(--checkbox-checked-background-color);
2310 }
2311 .eps-checkbox--error::before, .eps-checkbox--error::after, .eps-checkbox--error:checked::before, .eps-checkbox--error:checked::after {
2312 display: inline-block;
2313 margin-block-end: 0;
2314 content: " ";
2315 width: 7px;
2316 height: 0;
2317 border: solid #ffffff;
2318 border-width: 1px 0 0 0;
2319 position: absolute;
2320 }
2321 .eps-checkbox--error::before, .eps-checkbox--error:checked::before {
2322 transform: rotate(45deg);
2323 }
2324 .eps-checkbox--error::after, .eps-checkbox--error:checked::after {
2325 transform: rotate(-45deg);
2326 }
2327 .eps-checkbox--error, .eps-checkbox--error:hover, .eps-checkbox--error:checked, .eps-checkbox--error:checked:hover {
2328 --checkbox-background-color: var(--checkbox-error-background-color);
2329 --checkbox-border-color: var(--checkbox-error-background-color);
2330 }
2331
2332 :root {
2333 --e-app-drag-drop-background-color: #ffffff;
2334 --e-app-drag-drop-outline-color: #E6E8EA;
2335 }
2336
2337 .eps-theme-dark {
2338 --e-app-drag-drop-background-color: #2b2c31;
2339 --e-app-drag-drop-outline-color: #333438;
2340 }
2341
2342 .e-app-drag-drop {
2343 background-color: var(--e-app-drag-drop-background-color);
2344 outline: 2px dashed var(--e-app-drag-drop-outline-color);
2345 outline-offset: -0.75rem;
2346 margin-block-end: 1.5rem;
2347 padding: 4.125rem;
2348 text-align: center;
2349 }
2350 .e-app-drag-drop--drag-over {
2351 outline-color: #2563EB;
2352 }
2353
2354 .eps-dialog {
2355 border-radius: 3px;
2356 width: 375px;
2357 }
2358 .eps-dialog__close-button {
2359 position: absolute;
2360 inset-block-start: -2.75rem;
2361 inset-inline-end: -2.75rem;
2362 margin-block-start: 0.625rem;
2363 margin-inline-end: 0.625rem;
2364 z-index: 1040;
2365 font-size: 1.25rem;
2366 color: #ffffff;
2367 }
2368 .eps-dialog__content {
2369 padding: 1.5rem 1.875rem 1rem;
2370 font-size: 0.75rem;
2371 }
2372 .eps-dialog__title, .eps-dialog__text {
2373 text-align: center;
2374 }
2375 .eps-dialog__buttons {
2376 display: flex;
2377 }
2378 .eps-dialog__button {
2379 flex: 1;
2380 border-block-start: 1px solid var(--hr-color);
2381 line-height: 2.75rem;
2382 text-align: center;
2383 justify-content: center;
2384 }
2385 .eps-dialog__button:last-child:not(:first-child) {
2386 border-inline-start: 1px solid var(--hr-color);
2387 }
2388
2389 .e-app__popover {
2390 display: none;
2391 position: absolute;
2392 box-shadow: 0 2px 15px rgba(0, 0, 0, 0.3);
2393 border-radius: 6px;
2394 padding: 20px;
2395 width: -moz-fit-content;
2396 width: fit-content;
2397 z-index: 999;
2398 background-color: var(--e-a-bg-default);
2399 }
2400 .e-app__popover:before {
2401 content: "";
2402 position: absolute;
2403 inset-block-start: -16px;
2404 inset-inline-end: var(--popover-arrow-offset-end, 22px);
2405 border: 8px solid transparent;
2406 border-block-end-color: #fff;
2407 }
2408
2409 .eps-inline-link {
2410 color: var(--eps-inline-link-color);
2411 background-color: initial;
2412 border: 0;
2413 padding: 0;
2414 }
2415 .eps-inline-link--color-primary {
2416 --eps-inline-link-color: #0A875A;
2417 }
2418 .eps-inline-link--color-secondary {
2419 --eps-inline-link-color: #818A96;
2420 }
2421 .eps-inline-link--color-danger {
2422 --eps-inline-link-color: #DC2626;
2423 }
2424 .eps-inline-link--color-cta {
2425 --eps-inline-link-color: #93003f;
2426 }
2427 .eps-inline-link--color-link {
2428 --eps-inline-link-color: #515962;
2429 }
2430 .eps-inline-link--color-disabled {
2431 --eps-inline-link-color: #D5D8DC;
2432 }
2433 .eps-inline-link--underline-hover:hover, .eps-inline-link--underline-always, .eps-inline-link--underline-always:hover {
2434 text-decoration: underline;
2435 }
2436 .eps-inline-link--italic {
2437 font-style: italic;
2438 }
2439 .eps-inline-link, .eps-inline-link:focus {
2440 outline: none;
2441 }
2442
2443 .eps-text-field {
2444 --eps-text-field-color: #515962;
2445 --eps-text-field-background-color: transparent;
2446 --eps-text-field-placeholder-color: #69727D;
2447 --eps-text-field-outlined-border-color: #9DA5AE;
2448 --eps-text-field-outlined-focus-border-color: #515962;
2449 --eps-text-field-standard-border-color: #9DA5AE;
2450 --eps-text-field-standard-focus-border-color: #515962;
2451 --border: 1px solid var(--eps-text-field-outlined-border-color);
2452 width: 100%;
2453 color: var(--eps-text-field-color);
2454 background-color: var(--eps-text-field-background-color);
2455 border: 0;
2456 margin-block-end: 5px;
2457 outline: none;
2458 font-family: Roboto, Arial, Helvetica, Verdana, sans-serif;
2459 font-size: 0.875rem;
2460 font-weight: 400;
2461 line-height: 1.5;
2462 }
2463 .eps-text-field--outlined {
2464 border-radius: 0.1875rem;
2465 border: var(--border);
2466 padding: 0.625rem;
2467 }
2468 .eps-text-field--outlined:focus {
2469 border-color: var(--eps-text-field-outlined-focus-border-color);
2470 }
2471 .eps-text-field--standard {
2472 padding-top: 0.625rem;
2473 padding-bottom: 0.625rem;
2474 border-bottom: var(--border);
2475 }
2476 .eps-text-field--standard:focus {
2477 border-color: var(--eps-text-field-standard-focus-border-color);
2478 }
2479 .eps-text-field::-moz-placeholder {
2480 color: var(--eps-text-field-placeholder-color);
2481 font-family: Roboto, Arial, Helvetica, Verdana, sans-serif;
2482 font-size: 0.875rem;
2483 font-weight: 400;
2484 line-height: 1.5;
2485 }
2486 .eps-text-field::placeholder {
2487 color: var(--eps-text-field-placeholder-color);
2488 font-family: Roboto, Arial, Helvetica, Verdana, sans-serif;
2489 font-size: 0.875rem;
2490 font-weight: 400;
2491 line-height: 1.5;
2492 }
2493
2494 .eps-theme-dark .eps-text-field {
2495 --eps-text-field-color: #BABFC5;
2496 --eps-text-field-background-color: transparent;
2497 --eps-text-field-placeholder-color: #9DA5AE;
2498 --eps-text-field-outlined-border-color: #3f444b;
2499 --eps-text-field-outlined-focus-border-color: #9DA5AE;
2500 }
2501 .eps-theme-dark--outlined {
2502 border-color: var(--eps-text-field-outlined-border-color);
2503 }
2504 .eps-theme-dark--outlined:focus {
2505 border-color: var(--eps-text-field-outlined-focus-border-color);
2506 }
2507 .eps-theme-dark--standard {
2508 border-color: var(--eps-text-field-standard-border-color);
2509 }
2510 .eps-theme-dark--standard:focus {
2511 border-color: var(--eps-text-field-standard-focus-border-color);
2512 }
2513
2514 .e-app-import-export-content-layout {
2515 display: flex;
2516 justify-content: center;
2517 height: 100%;
2518 }
2519 .e-app-import-export-content-layout__container {
2520 flex-basis: 1075px;
2521 }
2522
2523 .e-app-export-complete__kit-content-title {
2524 margin: 2.75rem 0 0.625rem;
2525 }
2526
2527 .e-app-export-kit-content {
2528 --e-app-export-kit-content-title-color: #3f444b;
2529 --e-app-export-kit-content-description-color: #515962;
2530 --e-app-export-kit-content-sm-notice-color: #BABFC5;
2531 }
2532 .e-app-export-kit-content__checkbox {
2533 flex-shrink: 0;
2534 margin-inline-end: 0.75rem;
2535 }
2536 .e-app-export-kit-content__title {
2537 color: var(--e-app-export-kit-content-title-color);
2538 }
2539 .e-app-export-kit-content__description {
2540 color: var(--e-app-export-kit-content-description-color);
2541 margin-inline-end: 1.25rem;
2542 }
2543 .e-app-export-kit-content__notice {
2544 margin-block-start: 1rem;
2545 }
2546 .e-app-export-kit-content__small-notice {
2547 font-style: italic;
2548 color: var(--e-app-export-kit-content-sm-notice-color);
2549 }
2550
2551 .eps-theme-dark .e-app-export-kit-content {
2552 --e-app-export-kit-content-title-color: #D5D8DC;
2553 --e-app-export-kit-content-description-color: #BABFC5;
2554 --e-app-export-kit-content-sm-notice-color: #818A96;
2555 }
2556
2557 .e-app-import-export-kit-data {
2558 --e-app-import-export-kit-data-site-area-color: #3f444b;
2559 --e-app-import-export-kit-data-included-color: #69727D;
2560 }
2561 .e-app-import-export-kit-data__site-area, .e-app-import-export-kit-data__included {
2562 margin-block-end: 0;
2563 }
2564 .e-app-import-export-kit-data__site-area {
2565 color: var(--e-app-import-export-kit-data-site-area-color);
2566 font-weight: bold;
2567 }
2568 .e-app-import-export-kit-data__included {
2569 color: var(--e-app-import-export-kit-data-included-color);
2570 }
2571
2572 .eps-theme-dark .e-app-import-export-kit-data {
2573 --e-app-import-export-kit-data-site-area-color: #BABFC5;
2574 --e-app-import-export-kit-data-included-color: #9DA5AE;
2575 }
2576
2577 .e-app-import-resolver {
2578 --e-app-import-resolver-panel-header-background-color: #ffffff;
2579 --e-app-import-resolver-panel-body-background-color: rgba(255, 255, 255, 0.5);
2580 --e-app-import-resolver-conflicts-asset-border-color: #818A96;
2581 --e-app-import-resolver-conflicts-asset-inactive-color: #69727D;
2582 padding-block-end: 1.25rem;
2583 }
2584 .e-app-import-resolver__notice {
2585 margin-block-end: 1.25rem;
2586 }
2587 .e-app-import-resolver__panel, .e-app-import-resolver__panel:hover {
2588 background-color: initial;
2589 }
2590 .e-app-import-resolver__panel-header {
2591 background-color: var(--e-app-import-resolver-panel-header-background-color);
2592 }
2593 .e-app-import-resolver__panel-body {
2594 background-color: var(--e-app-import-resolver-panel-body-background-color);
2595 }
2596 .e-app-import-resolver-conflicts__container {
2597 box-shadow: 0 2px 3px 1px var(--color-box-shadow-color);
2598 }
2599 .e-app-import-resolver-conflicts__checkbox {
2600 flex-shrink: 0;
2601 margin-inline-end: 0.75rem;
2602 }
2603 .e-app-import-resolver-conflicts__title {
2604 line-height: 1;
2605 }
2606 .e-app-import-resolver-conflicts__asset:not(:first-child) {
2607 border-inline-start: 2px solid var(--e-app-import-resolver-conflicts-asset-border-color);
2608 padding-inline-start: 1rem;
2609 margin-inline-start: 1rem;
2610 }
2611 .e-app-import-resolver-conflicts__asset:not(.active) {
2612 color: var(--e-app-import-resolver-conflicts-asset-inactive-color);
2613 }
2614 .e-app-import-resolver-conflicts__edit-template {
2615 margin-inline-start: 0.3125rem;
2616 }
2617
2618 .eps-theme-dark .e-app-import-resolver {
2619 --e-app-import-resolver-panel-header-background-color: #69727D;
2620 --e-app-import-resolver-panel-body-background-color: rgba(0, 0, 0, 0.05);
2621 --e-app-import-resolver-conflicts-asset-border-color: #818A96;
2622 --e-app-import-resolver-conflicts-asset-inactive-color: #9DA5AE;
2623 }
2624
2625 .eps-panel {
2626 --eps-panel-header-background-color: transparent;
2627 --eps-panel-body-background-color: transparent;
2628 }
2629 .eps-panel, .eps-panel:hover {
2630 background-color: initial;
2631 }
2632 .eps-panel__header {
2633 background-color: var(--eps-panel-header-background-color);
2634 border-radius: 0.1875rem;
2635 }
2636 .eps-panel__body {
2637 background-color: var(--eps-panel-body-background-color);
2638 border-radius: 0 0 0.1875rem 0.1875rem;
2639 }
2640
2641 .eps-theme-dark .eps-panel {
2642 --eps-panel-header-background-color: transparent;
2643 --eps-panel-body-background-color: transparent;
2644 }
2645
2646 .e-app-export-kit {
2647 padding-block-end: 1.25rem;
2648 }
2649 .e-app-export-kit-information__field-header {
2650 margin-block-end: 0.625rem;
2651 }
2652 .e-app-export-kit-information__label {
2653 margin: 0;
2654 }
2655 .e-app-export-kit-information__info-icon {
2656 margin-inline-start: 0.625rem;
2657 }
2658 .e-app-export-kit-information__content {
2659 gap: 16px;
2660 }
2661 .e-app-export-kit-information__field--error {
2662 border-color: var(--e-a-color-danger);
2663 }
2664 .e-app-export-kit-information__error-container {
2665 height: 20px;
2666 display: flex;
2667 align-items: flex-start;
2668 margin-block-start: 4px;
2669 }
2670 .e-app-export-kit-information__validation-error {
2671 color: var(--e-a-color-danger);
2672 }
2673 .e-app-export-kit__content {
2674 gap: 20px;
2675 }
2676
2677 .e-app-import-export-info-modal__section:not(:first-child) {
2678 margin-block-start: 1.875rem;
2679 }
2680 .e-app-import-export-info-modal__heading {
2681 margin-block-end: 1.25rem;
2682 }
2683
2684 :root {
2685 --eps-badge-background-color: #ffffff;
2686 }
2687
2688 .eps-theme-dark {
2689 --eps-badge-background-color: #515962;
2690 }
2691
2692 .eps-badge {
2693 display: inline-block;
2694 background: var(--eps-badge-background-color);
2695 padding: 0 0.5rem;
2696 line-height: 1.8;
2697 box-shadow: 0 3px 6px var(--color-box-shadow-color);
2698 border-radius: 4px;
2699 font-size: 0.75rem;
2700 }
2701 .eps-badge--sm {
2702 font-size: 0.625rem;
2703 border-radius: 3px;
2704 padding: 0 0.3125rem;
2705 line-height: 1.5;
2706 }
2707
2708 .eps-collapse__title {
2709 cursor: pointer;
2710 padding: 0.3125rem 0;
2711 display: flex;
2712 align-items: center;
2713 justify-content: space-between;
2714 width: 100%;
2715 background: transparent;
2716 border: none;
2717 color: inherit;
2718 }
2719 .eps-collapse__title:focus {
2720 outline: none;
2721 }
2722 .eps-collapse__icon {
2723 transition: all 150ms;
2724 scale: calc(1 * var(--direction-multiplier)) 1;
2725 }
2726 .eps-collapse__content {
2727 margin-block-start: 0.625rem;
2728 display: none;
2729 }
2730 .eps-collapse[data-open] .eps-collapse__content {
2731 display: block;
2732 }
2733 .eps-collapse[data-open] .eps-collapse__icon {
2734 transform: rotate(90deg);
2735 }
2736
2737 .e-kit-library-promotion {
2738 --e-kit-library-promotion-color: tints(600);
2739 }
2740
2741 .eps-theme-dark .e-kit-library-promotion {
2742 --e-kit-library-promotion-color: dark-tints(400);
2743 }
2744
2745 .e-kit-library-promotion {
2746 width: 100%;
2747 text-align: center;
2748 margin-block-start: 1.875rem;
2749 color: var(--e-kit-library-promotion-color);
2750 }
2751
2752 .e-kit-library__error-screen {
2753 margin-block-start: 2.75rem;
2754 }
2755 .e-kit-library__error-screen-title {
2756 margin-block-start: 2.75rem;
2757 margin-block-end: 0;
2758 }
2759 .e-kit-library__error-screen-description {
2760 margin-block-start: 1.5rem;
2761 color: #69727D;
2762 text-align: center;
2763 max-width: 520px;
2764 }
2765
2766 .e-kit-library__kit-favorite-actions {
2767 padding: 0.3125rem;
2768 transition: 0.3s all;
2769 border-radius: 4px;
2770 }
2771 .e-kit-library__kit-favorite-actions--active {
2772 color: #DC2626;
2773 }
2774 .e-kit-library__kit-favorite-actions--loading {
2775 opacity: 50%;
2776 cursor: default;
2777 }
2778 .e-kit-library__kit-favorite-actions:hover {
2779 background-color: rgba(220, 38, 38, 0.1);
2780 }
2781
2782 .e-kit-library__filter-indication {
2783 margin-block-start: 1.5rem;
2784 display: flex;
2785 align-items: center;
2786 }
2787 .e-kit-library__filter-indication-text {
2788 margin-block-end: 0;
2789 display: flex;
2790 align-items: center;
2791 }
2792 .e-kit-library__filter-indication-badge {
2793 margin-inline-start: 0.3125rem;
2794 display: flex;
2795 align-items: center;
2796 }
2797 .e-kit-library__filter-indication-badge-remove {
2798 margin-inline-start: 0.3125rem;
2799 font-size: 0.875rem;
2800 }
2801 .e-kit-library__filter-indication-button {
2802 margin-inline-start: 1.5rem;
2803 }
2804
2805 #eps-app-header-btn-promotion,
2806 #eps-app-header-btn-connect {
2807 margin-inline-start: 0.625rem;
2808 margin-inline-end: 0.625rem;
2809 }
2810
2811 #eps-app-header-btn-apply {
2812 margin-inline-start: 0.625rem;
2813 }
2814
2815 #eps-app-header-btn-download {
2816 margin-inline-end: 1rem;
2817 margin-inline-start: 1rem;
2818 }
2819
2820 .e-kit-library__apply-button {
2821 display: flex;
2822 align-items: center;
2823 justify-content: center;
2824 gap: 0.3125rem;
2825 }
2826
2827 .e-kit-library__kit-item {
2828 --e-kit-library-kit-item-overlay-promotion-button-background-color: #D5D8DC;
2829 }
2830
2831 .eps-theme-dark .e-kit-library__kit-item {
2832 --e-kit-library-kit-item-overlay-promotion-button-background-color: #515962;
2833 }
2834
2835 .e-kit-library__kit-item-overlay {
2836 height: 100%;
2837 }
2838 .e-kit-library__kit-item-overlay-overview-button {
2839 display: flex;
2840 flex-direction: column;
2841 align-items: center;
2842 justify-content: center;
2843 color: white;
2844 height: 100%;
2845 width: 100%;
2846 }
2847 .e-kit-library__kit-item-overlay-overview-button > i {
2848 font-size: 2rem;
2849 margin-block-end: 5px;
2850 }
2851 .e-kit-library__kit-item-overlay-overview-button > span {
2852 font-size: 0.9rem;
2853 }
2854 .e-kit-library__kit-item-overlay-promotion-button {
2855 display: flex;
2856 width: 100%;
2857 background: white;
2858 align-items: center;
2859 justify-content: center;
2860 padding: 10px;
2861 font-size: 13px;
2862 color: #93003f;
2863 background: var(--e-kit-library-kit-item-overlay-promotion-button-background-color);
2864 }
2865 .e-kit-library__kit-item-overlay-promotion-button > * {
2866 margin: 0 3px;
2867 }
2868 .e-kit-library__kit-item-subscription-plan-badge {
2869 --e-a-color-brand: #467FF7;
2870 }
2871 .e-kit-library__kit-item-subscription-plan-badge.promoted {
2872 --e-a-color-brand: #92003B;
2873 }
2874 .e-kit-library__kit-item-subscription-plan-badge {
2875 position: absolute;
2876 inset-block-start: 0;
2877 inset-inline-end: 0;
2878 margin: 0.3125rem;
2879 background-color: var(--e-a-color-brand);
2880 color: #ffffff;
2881 text-transform: uppercase;
2882 }
2883 .e-kit-library__kit-item-header {
2884 position: relative;
2885 }
2886 .e-kit-library__kit-item-lock-icon {
2887 font-size: 14px;
2888 margin-inline-end: 8px;
2889 color: var(--card-headline-color);
2890 cursor: pointer;
2891 }
2892 .e-kit-library__kit-item-actions-menu i {
2893 font-size: 16px;
2894 }
2895 .e-kit-library__kit-item-actions-popover {
2896 display: flex;
2897 flex-direction: column;
2898 align-items: start;
2899 min-width: 0;
2900 padding: 12px 0;
2901 position: absolute;
2902 inset-block-start: 25px;
2903 inset-inline-start: 100%;
2904 transform: translateX(calc(-100% * var(--direction-multiplier)));
2905 }
2906 .e-kit-library__kit-item-actions-popover-item {
2907 display: flex;
2908 height: 30px;
2909 width: 100%;
2910 align-items: center;
2911 gap: 8px;
2912 padding: 0 12px;
2913 cursor: pointer;
2914 }
2915 .e-kit-library__kit-item-actions-popover-item i {
2916 font-size: 16px;
2917 }
2918 .e-kit-library__kit-item-actions-popover-item:hover {
2919 background-color: var(--e-a-bg-hover);
2920 }
2921 .e-kit-library__kit-item-actions-popover-item--danger {
2922 color: var(--e-a-color-danger);
2923 }
2924 .e-kit-library__kit-item-actions-popover-item--danger:hover {
2925 background-color: var(--e-a-bg-danger);
2926 }
2927 .e-kit-library__kit-item-actions-popover-item--danger i {
2928 color: var(--e-a-color-danger);
2929 }
2930 .e-kit-library__kit-item-cloud-overlay {
2931 height: 100%;
2932 display: flex;
2933 flex-direction: column;
2934 align-items: center;
2935 justify-content: center;
2936 }
2937 .e-kit-library__kit-item-cloud-overlay-import-button {
2938 display: flex;
2939 align-items: center;
2940 justify-content: center;
2941 padding: 8px 22px;
2942 gap: 8px;
2943 }
2944 .e-kit-library__kit-item-cloud-overlay-import-button > i {
2945 font-size: 20px;
2946 font-weight: 600;
2947 }
2948 .e-kit-library__kit-item-cloud-overlay-import-button > span {
2949 font-size: 15px;
2950 }
2951 .e-kit-library__kit-item-cloud-overlay i.eicon-lock {
2952 font-size: 48px;
2953 color: rgba(255, 255, 255, 0.8);
2954 cursor: pointer;
2955 }
2956 .e-kit-library__kit-item--locked {
2957 opacity: 0.6;
2958 }
2959 .e-kit-library__kit-item--locked .eps-card__image {
2960 opacity: 0.7;
2961 }
2962 .e-kit-library__kit-item--locked .eps-card__overlay {
2963 background-color: rgba(0, 0, 0, 0.5);
2964 }
2965
2966 :root {
2967 --e-kit-library-header-back-border: 1px solid var(--e-a-border-color);
2968 --e-kit-library-header-back-color: #69727D;
2969 }
2970
2971 .eps-theme-dark {
2972 --e-kit-library-header-back-border: 1px solid #818A96;
2973 --e-kit-library-header-back-color: #BABFC5;
2974 }
2975
2976 .e-kit-library__header-back {
2977 color: var(--e-kit-library-header-back-color);
2978 padding-inline-end: 1.25rem;
2979 padding-inline-start: 0.3125rem;
2980 display: inline-flex;
2981 justify-content: center;
2982 align-items: center;
2983 height: 100%;
2984 border-inline-end: var(--e-kit-library-header-back-border);
2985 }
2986 .e-kit-library__header-back-container {
2987 flex: 1;
2988 height: 100%;
2989 }
2990 .e-kit-library__header-back .eps-icon {
2991 scale: calc(1 * var(--direction-multiplier)) 1;
2992 }
2993
2994 .e-kit-library__page-loader {
2995 width: 100%;
2996 height: 100%;
2997 display: grid;
2998 place-items: center;
2999 font-size: 1.85rem;
3000 color: #69727D;
3001 }
3002
3003 .eps-search-input {
3004 --eps-search-input-background-color: #D5D8DC;
3005 --eps-search-input-background-color-focus: #ffffff;
3006 --eps-search-input-color: #3f444b;
3007 --eps-search-input-placeholder-color: #69727D;
3008 }
3009
3010 .eps-theme-dark .eps-search-input {
3011 --eps-search-input-background-color: #515962;
3012 --eps-search-input-background-color-focus: #69727D;
3013 --eps-search-input-color: #BABFC5;
3014 --eps-search-input-placeholder-color: #BABFC5;
3015 }
3016
3017 .eps-search-input {
3018 width: 100%;
3019 font-size: 0.9375rem;
3020 padding: 0.625rem 2.75rem;
3021 border: none;
3022 background: var(--eps-search-input-background-color);
3023 outline: none;
3024 color: var(--eps-search-input-color);
3025 line-height: 1;
3026 height: 2.75rem;
3027 }
3028 .eps-search-input--sm {
3029 font-size: 0.8125rem;
3030 padding: 0.5rem 1.875rem;
3031 }
3032 .eps-search-input:focus {
3033 background: var(--eps-search-input-background-color-focus);
3034 }
3035 .eps-search-input::-moz-placeholder {
3036 color: var(--eps-search-input-placeholder-color);
3037 font-style: italic;
3038 }
3039 .eps-search-input::placeholder {
3040 color: var(--eps-search-input-placeholder-color);
3041 font-style: italic;
3042 }
3043 .eps-search-input__container {
3044 position: relative;
3045 }
3046 .eps-search-input__icon {
3047 font-size: 1.25rem;
3048 padding: 0.625rem;
3049 color: #69727D;
3050 position: absolute;
3051 inset-block-start: 0;
3052 inset-inline-start: 0;
3053 height: 100%;
3054 display: flex;
3055 align-items: center;
3056 justify-content: center;
3057 }
3058 .eps-search-input__icon--sm {
3059 font-size: 0.75rem;
3060 }
3061 .eps-search-input__clear-icon {
3062 font-size: 0.875rem;
3063 padding: 0.625rem;
3064 color: #69727D;
3065 position: absolute;
3066 inset-block-start: 0;
3067 inset-inline-end: 0;
3068 height: 100%;
3069 display: flex;
3070 align-items: center;
3071 justify-content: center;
3072 }
3073 .eps-search-input__clear-icon--sm {
3074 font-size: 0.6875rem;
3075 }
3076
3077 :root {
3078 --eps-sort-select-select-background-color: #D5D8DC;
3079 --eps-sort-select-select-color: #3f444b;
3080 --eps-sort-select-button-background-color: #D5D8DC;
3081 --eps-sort-select-button-border: 1px solid var(--e-a-border-color);
3082 }
3083
3084 .eps-theme-dark {
3085 --eps-sort-select-select-background-color: #515962;
3086 --eps-sort-select-select-color: #BABFC5;
3087 --eps-sort-select-button-background-color: #515962;
3088 --eps-sort-select-button-border: 1px solid #1f2124;
3089 }
3090
3091 .eps-sort-select {
3092 width: 100%;
3093 font-size: 0.9375rem;
3094 display: flex;
3095 }
3096 .eps-sort-select__select-wrapper {
3097 flex: 1;
3098 position: relative;
3099 }
3100 .eps-sort-select__select-wrapper::after {
3101 content: "\e8ad";
3102 font-family: eicons;
3103 position: absolute;
3104 inset-inline-end: 0.625rem;
3105 inset-block: 0;
3106 color: #69727D;
3107 display: flex;
3108 align-items: center;
3109 justify-content: center;
3110 pointer-events: none;
3111 }
3112 .eps-sort-select__select {
3113 width: 100%;
3114 padding: 0.625rem 0.625rem;
3115 border: none;
3116 background: var(--eps-sort-select-select-background-color);
3117 outline: none;
3118 color: var(--eps-sort-select-select-color);
3119 line-height: 1;
3120 cursor: pointer;
3121 height: 2.75rem;
3122 -moz-appearance: none;
3123 appearance: none;
3124 -webkit-appearance: none;
3125 border-radius: 0;
3126 }
3127 .eps-sort-select__button {
3128 padding: 0.75rem 0.75rem;
3129 background: var(--eps-sort-select-button-background-color);
3130 border-inline-start: var(--eps-sort-select-button-border);
3131 line-height: 1;
3132 color: #69727D;
3133 }
3134
3135 .e-kit-library__tags-filter {
3136 --e-kit-library-tags-filter-list-search-background-color: #ffffff;
3137 }
3138
3139 .eps-theme-dark .e-kit-library__tags-filter {
3140 --e-kit-library-tags-filter-list-search-background-color: #515962;
3141 }
3142
3143 .e-kit-library__tags-filter {
3144 margin-block-start: 2.75rem;
3145 }
3146 .e-kit-library__tags-filter-list {
3147 margin-block-end: 2.75rem;
3148 }
3149 .e-kit-library__tags-filter-list .eps-collapse__title {
3150 padding-inline-end: 1.875rem;
3151 padding-inline-start: 1.875rem;
3152 text-transform: uppercase;
3153 }
3154 .e-kit-library__tags-filter-list .eps-collapse__content {
3155 margin: 0.3125rem 1.875rem;
3156 }
3157 .e-kit-library__tags-filter-list-container {
3158 max-height: 250px;
3159 overflow: auto;
3160 }
3161 .e-kit-library__tags-filter-list-search {
3162 margin-block-end: 0.625rem;
3163 }
3164 .e-kit-library__tags-filter-list-search .eps-search-input {
3165 background: var(--e-kit-library-tags-filter-list-search-background-color);
3166 }
3167 .e-kit-library__tags-filter-list-item {
3168 padding: 0.625rem 0;
3169 display: flex;
3170 align-items: center;
3171 font-weight: 500;
3172 }
3173 .e-kit-library__tags-filter-list-item input {
3174 margin-inline-end: 0.3125rem;
3175 }
3176
3177 .e-kit-library #eps-app-header-btn-refetch {
3178 padding: 0;
3179 }
3180
3181 .e-kit-library-header-info-modal-container {
3182 margin-block-end: 2.75rem;
3183 }
3184
3185 .e-kit-library__tooltip {
3186 padding: 5px 12px;
3187 color: #ffffff;
3188 background-color: #26292C;
3189 font-size: 10px;
3190 }
3191 .e-kit-library__tooltip:before {
3192 border-block-end-color: #26292C;
3193 }
3194
3195 .e-kit-library__index-layout-container {
3196 flex-grow: 1;
3197 overflow-y: auto;
3198 display: flex;
3199 flex-direction: column;
3200 }
3201 .e-kit-library__index-layout-heading {
3202 padding: 1.875rem 2.75rem;
3203 position: sticky;
3204 inset-block-start: -1px;
3205 width: 100%;
3206 z-index: 2;
3207 background-color: var(--app-background-color);
3208 gap: 1.5rem;
3209 align-items: center;
3210 }
3211 .e-kit-library__index-layout-heading-search, .e-kit-library__index-layout-heading-sort {
3212 min-width: 265px;
3213 }
3214 .e-kit-library__index-layout-heading-search {
3215 flex: 1;
3216 }
3217 .e-kit-library__index-layout-heading-quota {
3218 display: flex;
3219 align-items: center;
3220 justify-content: flex-end;
3221 }
3222 .e-kit-library__index-layout-main {
3223 padding-block-start: 0;
3224 padding-block-end: 1.5rem;
3225 overflow-y: hidden;
3226 height: auto;
3227 flex: 1 0 auto;
3228 display: flex;
3229 flex-direction: column;
3230 justify-content: space-between;
3231 }
3232 .e-kit-library__index-layout-main.e-kit-library__connect-container {
3233 justify-content: center;
3234 align-items: center;
3235 }
3236 .e-kit-library__connect-button {
3237 background-color: var(--e-a-btn-bg-primary);
3238 color: var(--e-a-btn-color);
3239 border-radius: 4px;
3240 padding: 8px;
3241 }
3242 .e-kit-library__connect-button:hover {
3243 opacity: 0.8;
3244 }
3245 .e-kit-library__upgrade-button {
3246 background-color: var(--e-a-color-accent);
3247 color: var(--e-a-color-txt-invert);
3248 border-radius: 4px;
3249 padding: 8px;
3250 }
3251 .e-kit-library__upgrade-button:hover {
3252 opacity: 0.8;
3253 }
3254 .e-kit-library .eicon-library-cloud-connect,
3255 .e-kit-library .eicon-library-subscription-upgrade {
3256 font-size: 65px;
3257 }
3258 .e-kit-library .connect-badge {
3259 color: #C00BB9;
3260 margin-inline-start: 10px;
3261 }
3262 .e-kit-library .upgrade-badge {
3263 color: #93003f;
3264 border: 1px solid #93003f;
3265 border-radius: 10px;
3266 padding: 2px 6px;
3267 margin-inline-start: 10px;
3268 }
3269
3270 .e-kit-library__tags-filter {
3271 --e-kit-library-item-sidebar-header-title-color: #515962;
3272 --e-kit-library-item-sidebar-description-color: #515962;
3273 --e-kit-library-item-information-text-color: #515962;
3274 }
3275
3276 .eps-theme-dark .e-kit-library__tags-filter {
3277 --e-kit-library-item-sidebar-header-title-color: #BABFC5;
3278 --e-kit-library-item-sidebar-description-color: #BABFC5;
3279 --e-kit-library-item-information-text-color: #BABFC5;
3280 }
3281
3282 .e-kit-library__item-sidebar {
3283 padding: 1.5rem 1.875rem;
3284 }
3285 .e-kit-library__item-sidebar-header {
3286 display: flex;
3287 align-items: center;
3288 justify-content: space-between;
3289 }
3290 .e-kit-library__item-sidebar-header-title {
3291 color: var(--e-kit-library-item-sidebar-header-title-color);
3292 margin-block-end: 0;
3293 }
3294 .e-kit-library__item-sidebar-thumbnail {
3295 margin-block-start: 1.5rem;
3296 box-shadow: 0 4px 10px var(--color-box-shadow-color);
3297 }
3298 .e-kit-library__item-sidebar-description {
3299 margin-block-start: 1.5rem;
3300 color: var(--e-kit-library-item-sidebar-description-color);
3301 }
3302 .e-kit-library__item-sidebar-collapse-tags {
3303 margin-block-start: 2.75rem;
3304 }
3305 .e-kit-library__item-sidebar-collapse-info {
3306 margin-block-start: 1.875rem;
3307 }
3308 .e-kit-library__item-sidebar-tags-container {
3309 gap: 0.625rem;
3310 }
3311 .e-kit-library__item-information-text {
3312 font-size: 0.8125rem;
3313 color: var(--e-kit-library-item-information-text-color);
3314 margin-block-end: 0.3125rem;
3315 }
3316
3317 .e-kit-library {
3318 --e-kit-library-content-overview-group-title-color: #515962;
3319 }
3320
3321 .eps-theme-dark .e-kit-library {
3322 --e-kit-library-content-overview-group-title-color: #BABFC5;
3323 }
3324
3325 .e-kit-library__content-overview-group-item {
3326 margin-block-end: 2.75rem;
3327 }
3328 .e-kit-library__content-overview-group-title {
3329 margin-block-end: 1.875rem;
3330 color: var(--e-kit-library-content-overview-group-title-color);
3331 }
3332
3333 .e-kit-library__preview-responsive-controls {
3334 width: auto;
3335 }
3336 .e-kit-library__preview-responsive-controls-item {
3337 margin: 0 0.3125rem;
3338 color: #69727D;
3339 padding: 0.3125rem;
3340 }
3341 .e-kit-library__preview-responsive-controls-item:hover {
3342 background: rgba(37, 99, 235, 0.1);
3343 border-radius: 3px;
3344 transition: all 0.3s;
3345 }
3346 .e-kit-library__preview-responsive-controls-item--active {
3347 color: #2563EB;
3348 }
3349
3350 .e-kit-library__preview-loader {
3351 position: absolute;
3352 inset-block-start: 0;
3353 inset-inline-start: 0;
3354 z-index: 0;
3355 }
3356 .e-kit-library__preview-iframe {
3357 border: none;
3358 transition: all 0.3s;
3359 box-shadow: 0 4px 10px var(--color-box-shadow-color);
3360 }
3361 .e-kit-library__preview-iframe-container {
3362 overflow-y: auto;
3363 position: relative;
3364 z-index: 1;
3365 }
3366
3367 .e-app-collapse {
3368 --e-app-collapse-icon-color: #515962;
3369 }
3370 .e-app-collapse-toggle {
3371 position: relative;
3372 }
3373 .e-app-collapse-toggle--active {
3374 cursor: pointer;
3375 }
3376 .e-app-collapse-toggle__icon {
3377 color: var(--e-app-collapse-icon-color);
3378 display: flex;
3379 align-items: center;
3380 justify-content: center;
3381 font-size: 0.875rem;
3382 position: absolute;
3383 inset-block-start: 50%;
3384 inset-inline-end: var(--e-app-collapse-toggle-icon-spacing);
3385 transform: translateY(-50%);
3386 }
3387 .e-app-collapse-toggle__icon:before {
3388 transition: all 0.2s linear;
3389 }
3390 .e-app-collapse-content {
3391 display: none;
3392 }
3393 .e-app-collapse--opened .e-app-collapse-toggle__icon:before {
3394 transform: rotate(-180deg);
3395 }
3396 .e-app-collapse--opened .e-app-collapse-content {
3397 display: block;
3398 }
3399
3400 [dir=rtl] .e-app-collapse-toggle__icon {
3401 inset-inline-start: var(--e-app-collapse-toggle-icon-spacing);
3402 inset-inline-end: initial;
3403 }
3404
3405 .eps-theme-dark .e-app-collapse {
3406 --e-app-collapse-icon-color: #BABFC5;
3407 }
3408
3409 .e-app-import-plugins {
3410 --e-app-import-plugins-selection-section-heading-color: #515962;
3411 padding-block-end: 1.5rem;
3412 }
3413 .e-app-import-plugins__section {
3414 margin-block-start: 1.875rem;
3415 }
3416 .e-app-import-plugins__section-heading {
3417 color: var(--e-app-import-plugins-selection-section-heading-color);
3418 margin-block-end: 1rem;
3419 }
3420 .e-app-import-plugins__versions-notice {
3421 margin-block-end: 0.75rem;
3422 }
3423
3424 .eps-theme-dark .e-app-import-plugins {
3425 --e-app-import-plugins-selection-section-heading-color: #BABFC5;
3426 }
3427
3428 .eps-table {
3429 --eps-table-body-color: #3f444b;
3430 border-spacing: 0 2px;
3431 table-layout: fixed;
3432 width: 100%;
3433 border: 1px solid var(--e-a-border-color);
3434 border-radius: 0.1875rem;
3435 }
3436 .eps-table__checkboxes-column {
3437 width: 1.875rem;
3438 }
3439 .eps-table__checkbox {
3440 display: flex;
3441 flex-shrink: 0;
3442 }
3443 .eps-table__cell {
3444 padding: 1rem;
3445 }
3446 .eps-table__head .eps-table__cell {
3447 text-align: start;
3448 }
3449 .eps-table__row {
3450 border-block-end: 1px solid var(--e-a-border-color);
3451 }
3452 .eps-table__row:last-child {
3453 border-block-end: none;
3454 }
3455 .eps-table__body .eps-table__cell:first-child {
3456 border-radius: 0.1875rem 0 0 0.1875rem;
3457 }
3458 .eps-table__body .eps-table__cell:last-child {
3459 border-radius: 0 0.1875rem 0.1875rem 0;
3460 }
3461 .eps-table--selection .eps-table__cell:first-child {
3462 padding-inline-end: 0;
3463 }
3464
3465 .eps-theme-dark .eps-table {
3466 --eps-table-body-color: #BABFC5;
3467 }
3468
3469 [dir=rtl] .eps-table__body [dir=rtl] .eps-table__cell:first-child {
3470 border-radius: 0 0.1875rem 0.1875rem 0;
3471 }
3472 [dir=rtl] .eps-table__body [dir=rtl] .eps-table__cell:last-child {
3473 border-radius: 0.1875rem 0 0 0.1875rem;
3474 }
3475
3476 .e-app-import-plugins-pro-banner {
3477 --e-app-import-plugins-pro-banner-heading-color: #3f444b;
3478 --e-app-import-plugins-pro-banner-description-color: #515962;
3479 margin-block-end: 1.875rem;
3480 }
3481 .e-app-import-plugins-pro-banner__heading {
3482 color: var(--e-app-import-plugins-pro-banner-heading-color);
3483 margin-block-end: 0.625rem;
3484 }
3485 .e-app-import-plugins-pro-banner__description {
3486 color: var(--e-app-import-plugins-pro-banner-description-color);
3487 margin-block-end: 0;
3488 }
3489
3490 .eps-theme-dark .e-app-import-plugins-pro-banner {
3491 --e-app-import-plugins-pro-banner-heading-color: #9DA5AE;
3492 --e-app-import-plugins-pro-banner-description-color: #BABFC5;
3493 }
3494
3495 .e-app-export-plugins {
3496 padding-block-end: 1.25rem;
3497 }
3498
3499 .e-app-import-content {
3500 padding-block-end: 1.25rem;
3501 }
3502 .e-app-import-content__plugins-notice {
3503 margin-block-end: 1.25rem;
3504 }
3505
3506 .e-app-import-plugins-activation__installing-plugins {
3507 padding: 0.625rem 0;
3508 }
3509 .e-app-import-plugins-activation__plugin-name {
3510 margin-inline-start: 0.5rem;
3511 }
3512 .e-app-import-plugins-activation__plugin-status-item {
3513 margin-block-end: 0.75rem;
3514 }
3515
3516 .e-app-import-export-plugins-table__cell-content {
3517 margin-block-end: 0;
3518 text-transform: capitalize;
3519 }
3520
3521 .e-app-import-export-loader {
3522 --e-app-import-export-loader-color: #818A96;
3523 color: var(--e-app-import-export-loader-color);
3524 font-size: 50px;
3525 }
3526 .e-app-import-export-loader.eicon-loading {
3527 font-size: 1.85rem;
3528 }
3529 .e-app-import-export-loader--absolute-center {
3530 position: absolute;
3531 inset-block-start: 50%;
3532 inset-inline-start: 50%;
3533 transform: translateX(-50%) translateY(-50%);
3534 }
3535
3536 .eps-theme-dark .e-app-import-export-loader {
3537 --e-app-import-export-loader-color: #818A96;
3538 }
3539
3540 .e-app-import-export-message-banner {
3541 --e-app-import-export-message-banner-heading-color: #3f444b;
3542 --e-app-import-export-message-banner-description-color: #515962;
3543 margin-block-end: 1.875rem;
3544 }
3545 .e-app-import-export-message-banner__heading {
3546 color: var(--e-app-import-export-message-banner-heading-color);
3547 margin-block-end: 0.625rem;
3548 }
3549 .e-app-import-export-message-banner__description {
3550 color: var(--e-app-import-export-message-banner-description-color);
3551 margin-block-end: 0;
3552 }
3553
3554 .eps-theme-dark .e-app-import-export-message-banner {
3555 --e-app-import-export-message-banner-heading-color: #9DA5AE;
3556 --e-app-import-export-message-banner-description-color: #BABFC5;
3557 }
3558
3559 .e-app-import-connect-pro-notice {
3560 margin-block-end: 1.25rem;
3561 }
3562
3563 .e-app-import-failed-plugins-notice {
3564 margin-block-end: 1.25rem;
3565 }
3566
3567 .e-app-export-actions-container {
3568 display: flex;
3569 gap: 15px;
3570 width: 100%;
3571 justify-content: flex-end;
3572 }
3573
3574 .e-onboarding {
3575 font-family: "DM Sans", "Roboto", sans-serif;
3576 color-scheme: light;
3577 }
3578 .e-onboarding .eps-app__main {
3579 justify-content: center;
3580 overflow-y: auto;
3581 }
3582 .e-onboarding__content {
3583 max-width: 1135px;
3584 padding: 2.75rem;
3585 margin: initial;
3586 overflow-y: initial;
3587 }
3588 .e-onboarding__checkbox-label {
3589 display: flex;
3590 line-height: 18px;
3591 margin-block-end: 27px;
3592 }
3593 .e-onboarding__checkbox-input {
3594 margin-inline-end: 14px;
3595 width: 16px;
3596 height: 16px;
3597 border-color: #69727D;
3598 border-radius: 2px;
3599 }
3600 .e-onboarding__checkbox-input:checked {
3601 background-color: #525861;
3602 }
3603 .e-onboarding__checkbox-input:checked::after {
3604 margin-block-end: 15%;
3605 width: 6px;
3606 height: 9px;
3607 border-width: 0 2px 2px 0;
3608 }
3609 .e-onboarding__feature-list {
3610 margin-block-end: 40px;
3611 }
3612 .e-onboarding__text-input {
3613 font-size: 14px;
3614 width: 325px;
3615 padding: 12px 16px;
3616 color: #69727D;
3617 border: 1px solid #9EA5AD;
3618 }
3619 .e-onboarding__text-input:focus-visible {
3620 outline: initial;
3621 border: 1px solid #3A3F45;
3622 }
3623 .e-onboarding__text-input::-moz-placeholder {
3624 color: #C2C7CC;
3625 }
3626 .e-onboarding__text-input::placeholder {
3627 color: #C2C7CC;
3628 }
3629 .e-onboarding__footnote {
3630 margin-block-start: 24px;
3631 width: 325px;
3632 text-align: center;
3633 }
3634 .e-onboarding__footnote:not(:has(p))::before {
3635 content: "*";
3636 margin-right: 5px;
3637 }
3638 .e-onboarding__footnote a {
3639 text-decoration: underline;
3640 color: #3A3F45;
3641 }
3642
3643 #e-app ~ #__wp-uploader-id-2 .media-modal {
3644 max-width: 1024px;
3645 max-height: 768px;
3646 margin: auto;
3647 }
3648
3649 .e-onboarding__page-content {
3650 margin-block-end: 70px;
3651 }
3652 .e-onboarding__page-content-start {
3653 max-width: 675px;
3654 text-align: start;
3655 flex-basis: 555px;
3656 align-self: start;
3657 }
3658 .e-onboarding__page-content-end {
3659 min-width: 440px;
3660 max-width: 540px;
3661 }
3662 .e-onboarding__page-content-end img {
3663 width: 100%;
3664 }
3665 .e-onboarding__page-content-section-title {
3666 font-family: "DM Serif Display", serif;
3667 font-size: 36px;
3668 font-weight: 700;
3669 color: #0C0D0E;
3670 }
3671 .e-onboarding__page-content-section-text {
3672 font-size: 18px;
3673 color: #3A3F45;
3674 }
3675
3676 @media screen and (max-width: 1100px) {
3677 .e-onboarding__page-content-end img {
3678 display: none;
3679 }
3680 }
3681 @media screen and (max-width: 768px) {
3682 .e-onboarding__page-content-section-title {
3683 font-size: 28px;
3684 }
3685 .e-onboarding__page-content-section-text {
3686 font-size: 14px;
3687 }
3688 }
3689 .e-onboarding__header-logo .eps-app__logo {
3690 background-color: #0C0D0E;
3691 color: #ffffff;
3692 width: 1.3rem;
3693 height: 1.3rem;
3694 line-height: 1.3rem;
3695 font-size: 0.48rem;
3696 }
3697 .e-onboarding__header-logo .eps-app__logo:not(:last-child) {
3698 margin-inline-end: 7px;
3699 }
3700 .e-onboarding__header-logo img {
3701 width: 104px;
3702 }
3703 .e-onboarding__header .eps-app__header-btn {
3704 display: flex;
3705 align-items: center;
3706 font-size: 13px;
3707 }
3708 .e-onboarding__header .eps-app__header-btn .eps-icon:not(:last-child) {
3709 margin-inline-end: 7px;
3710 }
3711 .e-onboarding__header .eps-button {
3712 color: #0C0D0E;
3713 }
3714 .e-onboarding__header .eps-button__go-pro-btn {
3715 background-color: #93003f;
3716 color: #ffffff;
3717 padding: 4px 8px;
3718 border-radius: 4px;
3719 font-weight: 700;
3720 font-size: 12px;
3721 transition: 0.5s;
3722 }
3723 .e-onboarding__header .eps-button__go-pro-btn:hover {
3724 background: rgb(198, 0, 84.8571428571);
3725 }
3726
3727 .e-onboarding__go-pro {
3728 width: 288px;
3729 font-size: 12px;
3730 background-color: #ffffff;
3731 }
3732 .e-onboarding__go-pro-title {
3733 font-size: 18px;
3734 font-weight: 700;
3735 color: #93003f;
3736 }
3737 .e-onboarding__go-pro-cta {
3738 display: inline-block;
3739 color: #93003f;
3740 padding: 9px;
3741 border: 1px solid #93003f;
3742 }
3743 .e-onboarding__go-pro-cta.e-onboarding__button {
3744 font-size: 14px;
3745 }
3746 .e-onboarding__go-pro-paragraph:not(:last-child) {
3747 margin-block-end: 20px;
3748 }
3749 .e-onboarding__go-pro-already-have {
3750 text-decoration: underline;
3751 }
3752
3753 @media screen and (max-width: 410px) {
3754 .e-onboarding__header-logo img {
3755 display: none;
3756 }
3757 }
3758 .e-onboarding__progress-bar {
3759 display: flex;
3760 justify-content: center;
3761 margin-block-end: 125px;
3762 flex-wrap: wrap;
3763 gap: 15px 22px;
3764 }
3765 .e-onboarding__progress-bar-item {
3766 display: flex;
3767 align-items: center;
3768 color: #69727D;
3769 font-size: 0.75rem;
3770 }
3771 .e-onboarding__progress-bar-item-icon {
3772 display: inline-block;
3773 font-family: "DM Serif Display", serif;
3774 text-align: center;
3775 width: 1.1rem;
3776 height: 1.1rem;
3777 line-height: 1rem;
3778 font-size: 0.75rem;
3779 font-weight: bold;
3780 border-radius: 50%;
3781 border: 1px solid #69727D;
3782 margin-inline-end: 8px;
3783 flex-shrink: 0;
3784 }
3785 .e-onboarding__progress-bar-item-icon::after {
3786 content: attr(data-item-count);
3787 }
3788 .e-onboarding__progress-bar-item:not(:last-child):after {
3789 font-family: "eicons";
3790 margin-inline-start: 22px;
3791 content: "\e89e";
3792 }
3793 .e-onboarding__progress-bar-item--active {
3794 color: #D004D4;
3795 }
3796 .e-onboarding__progress-bar-item--active .e-onboarding__progress-bar-item-icon, .e-onboarding__progress-bar-item--completed .e-onboarding__progress-bar-item-icon {
3797 color: #ffffff;
3798 border-color: #D004D4;
3799 background-color: #D004D4;
3800 }
3801 .e-onboarding__progress-bar-item--skipped, .e-onboarding__progress-bar-item--completed {
3802 cursor: pointer;
3803 }
3804 .e-onboarding__progress-bar-item--skipped .e-onboarding__progress-bar-item-icon {
3805 color: #ffffff;
3806 background-color: #69727D;
3807 }
3808
3809 .e-onboarding__button {
3810 font-size: 18px;
3811 cursor: pointer;
3812 transition: var(--e-a-transition-hover);
3813 }
3814 .e-onboarding__button-action {
3815 color: var(--e-a-btn-color);
3816 background-color: var(--e-a-btn-bg-primary);
3817 min-width: 325px;
3818 padding: 15px 30px;
3819 text-align: center;
3820 }
3821 .e-onboarding__button-action:hover {
3822 background-color: var(--e-a-btn-bg-primary-hover);
3823 }
3824 .e-onboarding__button-skip {
3825 padding: 8px 16px;
3826 color: #515962;
3827 }
3828 .e-onboarding__button-skip:hover {
3829 background-color: #F9FAFA;
3830 }
3831 .e-onboarding__button-skip--disabled {
3832 pointer-events: none;
3833 cursor: none;
3834 color: #D5D8DC;
3835 }
3836 .e-onboarding__button--disabled {
3837 pointer-events: none;
3838 background-color: #D5D8DC;
3839 color: #9EA5AD;
3840 }
3841 .e-onboarding__button--disabled:hover {
3842 cursor: progress;
3843 }
3844 .e-onboarding__button--processing {
3845 pointer-events: none;
3846 filter: brightness(90%);
3847 }
3848
3849 .e-onboarding__card {
3850 border: 1px solid #3A3F45;
3851 border-radius: 8px;
3852 padding: 40px 40px;
3853 cursor: pointer;
3854 flex-grow: 1;
3855 display: flex;
3856 flex-direction: column;
3857 align-items: center;
3858 }
3859 .e-onboarding__card-image, .e-onboarding__card-text {
3860 width: 345px;
3861 }
3862 .e-onboarding__card-image {
3863 margin-block-end: 44px;
3864 }
3865 .e-onboarding__card-text {
3866 font-size: 20px;
3867 font-weight: 700;
3868 text-align: center;
3869 color: #0C0D0E;
3870 }
3871 .e-onboarding__card-text-small {
3872 color: #0C0D0E;
3873 text-align: center;
3874 font-size: 18px;
3875 font-weight: 400;
3876 line-height: 150%;
3877 letter-spacing: -0.18px;
3878 margin-block-start: 6px;
3879 }
3880 .e-onboarding__card:hover {
3881 box-shadow: 4px 4px 0 0 #000000;
3882 }
3883 .e-onboarding__card:active {
3884 box-shadow: initial;
3885 }
3886
3887 .e-onboarding__checklist {
3888 padding-inline-start: 0;
3889 }
3890 .e-onboarding__checklist-item {
3891 display: flex;
3892 align-items: center;
3893 font-size: 12px;
3894 margin-block-end: 12px;
3895 }
3896 .e-onboarding__checklist-item .eicon-check-circle {
3897 margin-inline-end: 9px;
3898 font-size: 16px;
3899 font-weight: 600;
3900 }
3901
3902 .e-onboarding__notice {
3903 display: inline-block;
3904 padding: 12px 14px;
3905 margin-block-end: 16px;
3906 color: #3A3F45;
3907 }
3908 .e-onboarding__notice--error {
3909 background-color: #FDE8EC;
3910 }
3911 .e-onboarding__notice--error i {
3912 font-size: 16px;
3913 color: #B92136;
3914 }
3915 .e-onboarding__notice--success {
3916 background-color: #ECF9F2;
3917 }
3918 .e-onboarding__notice--success i {
3919 color: #117740;
3920 }
3921 .e-onboarding__notice i {
3922 margin-inline-end: 14px;
3923 }
3924 .e-onboarding__notice-empty-spacer {
3925 height: 61px;
3926 }
3927
3928 .e-onboarding__page-account .e-onboarding__checkbox-label {
3929 margin-block-start: 50px;
3930 }
3931
3932 .e-onboarding {
3933 --theme-card-primary-color: #D004D4;
3934 --theme-card-primary-shadow: 0 6px 16px rgba(208, 4, 212, 0.25);
3935 --theme-card-hover-transform: translateY(-2px);
3936 }
3937 .e-onboarding__action-button-text {
3938 margin-inline-start: 10px;
3939 }
3940 .e-onboarding__page-content-theme-variant-b .e-onboarding__page-content-section-title {
3941 line-height: 40px;
3942 }
3943 .e-onboarding__page-content-theme-variant-b .e-onboarding__theme-selection-description,
3944 .e-onboarding__page-content-theme-variant-b .e-onboarding__theme-selection-subtitle {
3945 font-size: 18px;
3946 font-weight: 400;
3947 margin-block-end: 8px;
3948 text-align: center;
3949 color: #3A3F45;
3950 }
3951 .e-onboarding__page-content-theme-variant-b .e-onboarding__theme-selection-subtitle {
3952 font-weight: 600;
3953 }
3954 .e-onboarding__page-content-theme-variant-b .e-onboarding__theme-cards {
3955 display: flex;
3956 gap: 24px;
3957 justify-content: center;
3958 flex-wrap: wrap;
3959 margin-block-start: 48px;
3960 }
3961 .e-onboarding__page-content-theme-variant-b .e-onboarding__theme-card {
3962 background: #ffffff;
3963 border: 1px solid #A9A9A9;
3964 border-radius: 8px;
3965 padding: 16px 25px 165px;
3966 max-width: 325px;
3967 min-width: 280px;
3968 cursor: pointer;
3969 transition: none;
3970 display: flex;
3971 flex-direction: column;
3972 position: relative;
3973 overflow: hidden;
3974 margin-block: 1px;
3975 }
3976 .e-onboarding__page-content-theme-variant-b .e-onboarding__theme-card::after {
3977 content: "";
3978 position: absolute;
3979 inset-block-start: 14px;
3980 inset-inline-start: 16px;
3981 width: 20px;
3982 height: 20px;
3983 border-radius: 50%;
3984 display: flex;
3985 align-items: center;
3986 justify-content: center;
3987 border: 2px solid black;
3988 }
3989 .e-onboarding__page-content-theme-variant-b .e-onboarding__theme-card:hover, .e-onboarding__page-content-theme-variant-b .e-onboarding__theme-card--loading, .e-onboarding__page-content-theme-variant-b .e-onboarding__theme-card--selected {
3990 border: 2px solid #0C0D0E;
3991 margin-block: 0px;
3992 }
3993 .e-onboarding__page-content-theme-variant-b .e-onboarding__theme-card:hover::before, .e-onboarding__page-content-theme-variant-b .e-onboarding__theme-card--loading::before, .e-onboarding__page-content-theme-variant-b .e-onboarding__theme-card--selected::before {
3994 content: "";
3995 background: black;
3996 position: absolute;
3997 top: 14px;
3998 left: 16px;
3999 width: 20px;
4000 height: 20px;
4001 border-radius: 50%;
4002 border: 4px solid white;
4003 }
4004 .e-onboarding__page-content-theme-variant-b .e-onboarding__theme-card-illustration {
4005 display: flex;
4006 justify-content: center;
4007 align-items: center;
4008 position: absolute;
4009 inset-block-end: 0px;
4010 width: calc(100% - 50px);
4011 }
4012 .e-onboarding__page-content-theme-variant-b .e-onboarding__theme-card-illustration img {
4013 width: calc(100% - 80px);
4014 }
4015 .e-onboarding__page-content-theme-variant-b .e-onboarding__theme-card-content {
4016 text-align: center;
4017 }
4018 .e-onboarding__page-content-theme-variant-b .e-onboarding__theme-card-label {
4019 display: flex;
4020 justify-content: center;
4021 color: #69727D;
4022 font-family: "DM Sans";
4023 font-size: 12px;
4024 font-weight: 400;
4025 line-height: 150%;
4026 letter-spacing: -0.12px;
4027 margin-block-end: 16px;
4028 }
4029 .e-onboarding__page-content-theme-variant-b .e-onboarding__theme-card-label span {
4030 font-weight: 600;
4031 padding-inline-end: 4px;
4032 }
4033 .e-onboarding__page-content-theme-variant-b .e-onboarding__theme-card-title {
4034 color: #0C0D0E;
4035 text-align: center;
4036 font-family: "DM Sans";
4037 font-size: 18px;
4038 font-weight: 700;
4039 line-height: 130%;
4040 letter-spacing: 0.36px;
4041 margin-block-end: 4px;
4042 }
4043 .e-onboarding__page-content-theme-variant-b .e-onboarding__theme-card-description {
4044 color: #3A3F45;
4045 text-align: center;
4046 font-family: "DM Sans";
4047 font-size: 14px;
4048 font-weight: 400;
4049 line-height: 150%;
4050 letter-spacing: -0.14px;
4051 margin: 0;
4052 }
4053 .e-onboarding__page-content:has(.e-onboarding__page-content-theme-variant-b) {
4054 flex-direction: column;
4055 }
4056 .e-onboarding__page-content-start:has(.e-onboarding__page-content-theme-variant-b) {
4057 align-self: center;
4058 text-align: center;
4059 flex-basis: initial;
4060 }
4061 .e-onboarding:has(.e-onboarding__page-content-theme-variant-b) .e-onboarding__page-content-section-title {
4062 line-height: 1.3;
4063 margin-block-end: 10px;
4064 }
4065 .e-onboarding:has(.e-onboarding__page-content-theme-variant-b) .e-onboarding__progress-bar {
4066 margin-block-end: 85px;
4067 }
4068 .e-onboarding:has(.e-onboarding__page-content-theme-variant-b) .e-onboarding__footnote {
4069 opacity: 0;
4070 }
4071 .e-onboarding:has(.e-onboarding__page-content-theme-variant-b) .e-onboarding__notice {
4072 display: flex;
4073 justify-content: center;
4074 }
4075 .e-onboarding:has(.e-onboarding__page-content-theme-variant-b) .e-onboarding__footer {
4076 justify-content: center;
4077 padding-block-end: 40px;
4078 }
4079
4080 @media screen and (min-width: 769px) {
4081 .e-onboarding:has(.e-onboarding__page-content-theme-variant-b) .e-onboarding__button-skip {
4082 position: absolute;
4083 inset-inline-end: 30px;
4084 }
4085 }
4086 @media screen and (max-width: 768px) {
4087 .e-onboarding__footer {
4088 flex-direction: column;
4089 gap: 10px;
4090 }
4091 }
4092 .e-onboarding__site-name-input {
4093 margin-block-start: 80px;
4094 }
4095
4096 .e-onboarding__page-siteLogo .e-app-upload-file__button {
4097 color: var(--e-a-color-primary-bold);
4098 border-color: var(--e-a-color-primary-bold);
4099 }
4100 .e-onboarding__page-siteLogo .e-app-upload-file__button:hover {
4101 background-color: #FAE8FF;
4102 }
4103 .e-onboarding__drop-zone {
4104 margin-block-start: 3rem;
4105 }
4106 .e-onboarding .eps-display-3 {
4107 font-size: 16px;
4108 margin-block-end: 0.5rem;
4109 }
4110 .e-onboarding .e-app-upload-file__button {
4111 max-width: 198px;
4112 margin: 0 auto;
4113 }
4114 .e-onboarding .e-app-drop-zone__secondary-text {
4115 font-size: 14px;
4116 }
4117 .e-onboarding__logo-container {
4118 position: relative;
4119 margin-block-start: 3rem;
4120 min-height: 120px;
4121 width: -moz-fit-content;
4122 width: fit-content;
4123 display: flex;
4124 align-items: center;
4125 justify-content: center;
4126 min-width: 220px;
4127 border: 1px solid #BABFC5;
4128 }
4129 .e-onboarding__logo-container img {
4130 height: auto;
4131 max-height: 100%;
4132 width: auto;
4133 }
4134 .e-onboarding__logo-remove {
4135 position: absolute;
4136 inset-block-start: 5px;
4137 inset-inline-end: 0;
4138 }
4139 .e-onboarding__logo-remove i {
4140 font-size: 16px;
4141 width: 15px;
4142 }
4143 .e-onboarding__logo-remove:hover {
4144 cursor: pointer;
4145 }
4146 .e-onboarding__is-uploading {
4147 visibility: hidden;
4148 }
4149
4150 .e-onboarding__cards-grid.e-onboarding__page-content {
4151 margin-block-start: 48px;
4152 margin-block-end: 48px;
4153 }
4154 .e-onboarding__cards-grid .e-onboarding__card {
4155 max-width: 555px;
4156 }
4157 .e-onboarding__page-goodToGo .e-onboarding__content {
4158 display: flex;
4159 flex-direction: column;
4160 align-items: center;
4161 }
4162 .e-onboarding__page-goodToGo .e-onboarding__page-content-section-title,
4163 .e-onboarding__page-goodToGo .e-onboarding__page-content-section-text {
4164 text-align: center;
4165 }
4166 .e-onboarding__page-goodToGo .e-onboarding__cards-grid {
4167 gap: 24px;
4168 justify-content: center;
4169 flex-wrap: nowrap;
4170 }
4171 .e-onboarding__page-goodToGo .e-onboarding__card {
4172 max-width: 388px;
4173 }
4174 .e-onboarding__page-goodToGo .e-onboarding__card-text {
4175 max-width: calc(100vw - 100px);
4176 }
4177 .e-onboarding__page-goodToGo .e-onboarding__card-image {
4178 max-width: calc(100vw - 100px);
4179 }
4180 .e-onboarding__content:has(.e-onboarding__cards-grid--good-to-go-variant-b) .e-onboarding__page-content-section-title {
4181 max-width: 440px;
4182 justify-self: center;
4183 }
4184 .e-onboarding__good-to-go-footer {
4185 justify-content: end;
4186 }
4187
4188 .experiment401-variant-b .e-onboarding__cards-grid {
4189 flex-wrap: nowrap;
4190 row-gap: 24px;
4191 }
4192 .experiment401-variant-b .e-onboarding__card-image {
4193 height: 112px;
4194 width: auto;
4195 }
4196 .experiment401-variant-b .e-onboarding__switch-method-text {
4197 color: #3A3F45;
4198 text-align: center;
4199 font-family: "DM Sans";
4200 font-size: 18px;
4201 font-weight: 700;
4202 line-height: 150%;
4203 letter-spacing: -0.18px;
4204 }
4205 .experiment401-variant-b .e-onboarding__progress-bar {
4206 margin-block-end: 85px;
4207 }
4208 .experiment401-variant-b .e-onboarding__good-to-go-footer {
4209 justify-content: center;
4210 }
4211
4212 .experiment402-variant-b .e-onboarding__page-content {
4213 margin-block-end: 60px;
4214 }
4215 .experiment402-variant-b .e-onboarding__page-content-section-title {
4216 margin-block-end: 0px;
4217 }
4218 .experiment402-variant-b .e-onboarding__page-content-section-title, .experiment402-variant-b .e-onboarding__card-text {
4219 line-height: 1.3;
4220 }
4221 .experiment402-variant-b .e-onboarding__progress-bar {
4222 margin-block-end: 85px;
4223 }
4224
4225 .experiment401-variant-b .e-onboarding__page-content-section-title {
4226 margin-block-end: 0px;
4227 }
4228 .experiment401-variant-b .e-onboarding__page-content-section-title, .experiment401-variant-b .e-onboarding__card-text {
4229 line-height: 1.3;
4230 }
4231 .experiment401-variant-b .e-onboarding__card-image {
4232 margin-block-end: 32px;
4233 }
4234 .experiment401-variant-b .e-onboarding__card-text-small {
4235 margin-block-start: 4px;
4236 }
4237
4238 @media screen and (min-width: 1024px) {
4239 .experiment401-variant-b .e-onboarding__button-skip {
4240 position: absolute;
4241 inset-inline-end: 0px;
4242 }
4243 }
4244 @media screen and (max-width: 1300px) {
4245 .e-onboarding__page-goodToGo .e-onboarding__cards-grid {
4246 flex-wrap: wrap;
4247 }
4248 }
4249 @media screen and (max-width: 1024px) {
4250 .experiment401-variant-b .e-onboarding__good-to-go-footer {
4251 flex-direction: column;
4252 gap: 60px;
4253 }
4254 }
4255 @media screen and (max-width: 768px) {
4256 .e-onboarding__page-goodToGo .e-onboarding__card {
4257 padding-inline: 24px;
4258 }
4259 .experiment401-variant-b .e-onboarding__good-to-go-footer {
4260 gap: 60px;
4261 }
4262 }
4263 @media screen and (max-width: 500px) {
4264 .e-onboarding__page-goodToGo .e-onboarding__card {
4265 max-width: calc(100vw - 50px);
4266 }
4267 }
4268 .e-onboarding__upload-pro {
4269 flex-direction: row;
4270 justify-content: center;
4271 font-family: "DM Sans", "Roboto", sans-serif;
4272 text-align: center;
4273 }
4274 .e-onboarding__upload-pro .eps-app__content {
4275 overflow-y: hidden;
4276 max-width: 1113px;
4277 padding: 30px;
4278 }
4279 .e-onboarding__upload-pro-drop-zone {
4280 margin-block-end: 24px;
4281 }
4282 .e-onboarding__upload-pro-drop-zone h1 {
4283 font-family: "Source Serif Pro", "Roboto", sans-serif;
4284 }
4285 .e-onboarding__upload-pro-drop-zone .e-app-drag-drop {
4286 padding: 48px;
4287 }
4288 .e-onboarding__upload-pro-drop-zone .eps-display-3,
4289 .e-onboarding__upload-pro-drop-zone .e-app-drop-zone__text,
4290 .e-onboarding__upload-pro-drop-zone .e-app-drop-zone__secondary-text {
4291 margin-block-end: 12px;
4292 }
4293 .e-onboarding__upload-pro-drop-zone .e-app-upload-file__button {
4294 background-color: #040080;
4295 color: #46F2B6;
4296 padding: 14px 40px;
4297 border-color: #040080;
4298 }
4299 .e-onboarding__upload-pro-get-file {
4300 font-size: 12px;
4301 margin-block-start: 24px;
4302 }
4303 .e-onboarding__upload-pro-get-file a {
4304 text-decoration: underline;
4305 }
4306 .e-onboarding__upload-pro .e-onboarding__notice {
4307 margin-block-end: 0;
4308 }
4309
4310 .e-onboarding__choose-features-section {
4311 width: 100%;
4312 display: flex;
4313 flex-wrap: wrap;
4314 gap: 10px 20px;
4315 margin-block: 20px;
4316 }
4317 .e-onboarding__choose-features-section__label {
4318 display: flex;
4319 align-items: center;
4320 font-size: 14px;
4321 font-weight: 400;
4322 line-height: 24px;
4323 letter-spacing: -0.01em;
4324 -webkit-user-select: none;
4325 -moz-user-select: none;
4326 user-select: none;
4327 border: 1px solid #D5D8DC;
4328 padding: 12px 16px;
4329 width: 267px;
4330 }
4331 .e-onboarding__choose-features-section__checkbox {
4332 justify-self: end;
4333 margin-inline-end: 8px;
4334 width: 16px;
4335 height: 16px;
4336 }
4337 .e-onboarding__choose-features-section__message {
4338 font-size: 18px;
4339 font-weight: 400;
4340 line-height: 27px;
4341 letter-spacing: -0.01em;
4342 padding-inline-end: 120px;
4343 min-height: 55px;
4344 margin-block-end: 20px;
4345 }
4346 .e-onboarding__page-chooseFeatures .e-onboarding__page-content {
4347 margin-block-end: 0;
4348 }
4349
4350 .e-kit-library__quota-bar {
4351 display: flex;
4352 align-items: center;
4353 }
4354 .e-kit-library__quota-bar__container {
4355 display: flex;
4356 flex-direction: column;
4357 gap: 8px;
4358 min-width: 230px;
4359 }
4360 .e-kit-library__quota-bar__header {
4361 display: flex;
4362 justify-content: space-between;
4363 align-items: center;
4364 }
4365 .e-kit-library__quota-bar__label {
4366 color: var(--body-color);
4367 font-weight: 400;
4368 white-space: nowrap;
4369 font-size: 12px;
4370 }
4371 .e-kit-library__quota-bar__progress-container {
4372 width: 100%;
4373 height: 4px;
4374 overflow: hidden;
4375 position: relative;
4376 }
4377 .e-kit-library__quota-bar__progress-container--empty {
4378 background-color: #F0ABFC;
4379 }
4380 .e-kit-library__quota-bar__progress-container--normal {
4381 background-color: #F0ABFC;
4382 }
4383 .e-kit-library__quota-bar__progress-container--warning {
4384 background-color: rgb(251.0236220472, 216.4291338583, 157.9763779528);
4385 }
4386 .e-kit-library__quota-bar__progress-container--alert {
4387 background: #93003f;
4388 }
4389 .e-kit-library__quota-bar__progress-bar {
4390 height: 100%;
4391 transition: width 0.3s ease;
4392 }
4393 .e-kit-library__quota-bar__progress-bar--empty {
4394 background: transparent;
4395 }
4396 .e-kit-library__quota-bar__progress-bar--normal {
4397 background: #D004D4;
4398 }
4399 .e-kit-library__quota-bar__progress-bar--warning {
4400 background: #F59E0B;
4401 }
4402 .e-kit-library__quota-bar__progress-bar--alert {
4403 background: #93003f;
4404 }
4405 .e-kit-library__quota-bar__upgrade-message {
4406 display: flex;
4407 align-items: center;
4408 gap: 4px;
4409 }
4410 .e-kit-library__quota-bar__upgrade-link {
4411 color: #93003f;
4412 text-decoration: underline;
4413 cursor: pointer;
4414 font-size: 12px;
4415 font-weight: 400;
4416 }
4417 .e-kit-library__quota-bar__upgrade-link:hover {
4418 opacity: 0.8;
4419 }
4420 .e-kit-library__quota-bar__count {
4421 color: var(--body-color);
4422 white-space: nowrap;
4423 font-size: 12px;
4424 }
4425
4426 :root {
4427 --text-secondary: #3F444B;
4428 }
4429
4430 .e-kit-library__quota-notification {
4431 display: flex;
4432 align-items: flex-start;
4433 justify-content: space-between;
4434 padding: 16px 20px;
4435 margin: 0 44px 30px;
4436 border-radius: 4px;
4437 }
4438 .e-kit-library__quota-notification--warning {
4439 background-color: #FBF1E6;
4440 color: #3f444b;
4441 }
4442 .e-kit-library__quota-notification--alert {
4443 background-color: #FDECEC;
4444 color: #3f444b;
4445 }
4446 .e-kit-library__quota-notification__content {
4447 display: flex;
4448 align-items: flex-start;
4449 gap: 12px;
4450 flex: 1;
4451 }
4452 .e-kit-library__quota-notification__icon {
4453 font-size: 18px;
4454 margin-top: 1px;
4455 flex-shrink: 0;
4456 }
4457 .e-kit-library__quota-notification__icon.eicon-warning-full {
4458 color: #F59E0B;
4459 }
4460 .e-kit-library__quota-notification__icon.eicon-alert {
4461 color: #DC2626;
4462 }
4463 .e-kit-library__quota-notification__message {
4464 flex: 1;
4465 line-height: 1.5;
4466 font-size: 13px;
4467 }
4468 .e-kit-library__quota-notification__message span {
4469 color: var(--text-secondary);
4470 font-size: 13px;
4471 }
4472 .e-kit-library__quota-notification__action-link {
4473 color: inherit;
4474 text-decoration: underline;
4475 font-size: 13px;
4476 font-weight: 400;
4477 }
4478 .e-kit-library__quota-notification__action-link:hover {
4479 opacity: 0.8;
4480 }
4481 .e-kit-library__quota-notification__dismiss {
4482 background: none;
4483 border: none;
4484 cursor: pointer;
4485 padding: 0;
4486 margin-inline-start: 12px;
4487 color: inherit;
4488 opacity: 0.7;
4489 flex-shrink: 0;
4490 }
4491 .e-kit-library__quota-notification__dismiss:hover {
4492 opacity: 1;
4493 }
4494 .e-kit-library__quota-notification__dismiss i {
4495 font-size: 14px;
4496 }
4497
4498 .e-onboarding101-variant-b .e-app__footer,
4499 .e-onboarding101-variant-b .e-onboarding__steps,
4500 .e-onboarding101-variant-b .e-onboarding__skip-button,
4501 .e-onboarding101-variant-b .e-onboarding__progress-bar {
4502 display: none !important;
4503 }
4504 .e-onboarding101-variant-b .e-app__header {
4505 position: fixed;
4506 top: 0;
4507 left: 0;
4508 right: 0;
4509 z-index: 1000;
4510 background: white;
4511 box-shadow: 0px 4px 6px 0px rgba(0, 0, 0, 0.04);
4512 }
4513 .e-onboarding101-variant-b .e-app__content {
4514 height: 100vh;
4515 display: flex;
4516 align-items: center;
4517 justify-content: center;
4518 padding: 0;
4519 }
4520 .e-onboarding101-variant-b .e-onboarding__content {
4521 display: flex;
4522 padding-block-start: 150px;
4523 }
4524 .e-onboarding101-variant-b .e-onboarding__page-content {
4525 max-width: 700px;
4526 width: 700px;
4527 text-align: center;
4528 padding: 0;
4529 margin: 0 auto;
4530 }
4531 .e-onboarding101-variant-b .e-onboarding101-variant-b-content-layout .e-onboarding__image,
4532 .e-onboarding101-variant-b .e-onboarding101-variant-b-content-layout .e-onboarding__action-button,
4533 .e-onboarding101-variant-b .e-onboarding101-variant-b-content-layout .e-onboarding__skip-button {
4534 display: none;
4535 }
4536 .e-onboarding101-variant-b .e-onboarding__footer {
4537 justify-content: center;
4538 padding-block-end: 40px;
4539 }
4540
4541 .e-onboarding101-variant-b-content {
4542 display: flex;
4543 flex-direction: column;
4544 align-items: center;
4545 gap: 0px;
4546 font-family: "DM Sans", sans-serif;
4547 width: 700px;
4548 margin: 0 auto;
4549 }
4550 .e-onboarding101-variant-b-content .e-onboarding101-variant-b-icon {
4551 margin-bottom: 28px;
4552 }
4553 .e-onboarding101-variant-b-content .e-onboarding101-variant-b-icon svg {
4554 width: 104px;
4555 height: 104px;
4556 }
4557 .e-onboarding101-variant-b-content .e-onboarding101-variant-b-title {
4558 font-family: "Source Serif Pro", serif;
4559 font-weight: 700;
4560 font-size: 48px;
4561 line-height: 1.3;
4562 color: #0c0d0e;
4563 margin: 0 0 10px 0;
4564 width: 100%;
4565 text-align: center;
4566 }
4567 .e-onboarding101-variant-b-content .e-onboarding101-variant-b-description {
4568 font-family: "DM Sans", sans-serif;
4569 font-size: 18px;
4570 font-weight: 400;
4571 line-height: 1.5;
4572 color: #3a3f45;
4573 letter-spacing: -0.18px;
4574 margin: 0 0 40px 0;
4575 width: 100%;
4576 max-width: 600px;
4577 text-align: center;
4578 }
4579 .e-onboarding101-variant-b-content .e-onboarding101-variant-b-welcome {
4580 margin-block-end: 5px;
4581 }
4582 .e-onboarding101-variant-b-content .e-onboarding101-variant-b-buttons {
4583 display: flex;
4584 flex-direction: column;
4585 gap: 8px;
4586 width: 264px;
4587 align-items: center;
4588 margin-top: 20px;
4589 }
4590 .e-onboarding101-variant-b-content .e-onboarding101-variant-b-button {
4591 display: flex;
4592 align-items: center;
4593 justify-content: center;
4594 height: 48px;
4595 padding: 14px 16px;
4596 border-radius: 0;
4597 border: none;
4598 font-family: "DM Sans", sans-serif;
4599 font-weight: 500;
4600 font-size: 18px;
4601 line-height: 1;
4602 letter-spacing: 0.18px;
4603 cursor: pointer;
4604 transition: all 0.2s ease;
4605 white-space: nowrap;
4606 width: 100%;
4607 text-decoration: none;
4608 box-sizing: border-box;
4609 }
4610 .e-onboarding101-variant-b-content .e-onboarding101-variant-b-button--primary {
4611 background: #f3bafd;
4612 color: #0c0d0e;
4613 }
4614 .e-onboarding101-variant-b-content .e-onboarding101-variant-b-button--primary:hover {
4615 background: #e8a5f8;
4616 }
4617 .e-onboarding101-variant-b-content .e-onboarding101-variant-b-button--primary:active {
4618 background: #dd90f3;
4619 }
4620 .e-onboarding101-variant-b-content .e-onboarding101-variant-b-button--secondary {
4621 background: transparent;
4622 color: #6a727c;
4623 text-decoration: underline;
4624 text-underline-position: from-font;
4625 }
4626 .e-onboarding101-variant-b-content .e-onboarding101-variant-b-button--secondary:hover {
4627 color: #232629;
4628 }
4629 .e-onboarding101-variant-b-content .e-onboarding101-variant-b-button--secondary:active {
4630 color: #0c0d0e;
4631 }
4632
4633 @media screen and (min-width: 1024px) {
4634 .e-onboarding101-variant-b .e-onboarding__content {
4635 min-height: 600px;
4636 }
4637 }
4638 @media screen and (max-width: 768px) {
4639 .e-onboarding101-variant-b .e-onboarding__page-content {
4640 padding: 20px;
4641 width: calc(100% - 40px);
4642 max-width: 700px;
4643 }
4644 .e-onboarding101-variant-b .e-onboarding101-variant-b-content {
4645 width: 100%;
4646 }
4647 .e-onboarding101-variant-b .e-onboarding101-variant-b-title {
4648 font-size: 36px;
4649 }
4650 .e-onboarding101-variant-b .e-onboarding101-variant-b-buttons {
4651 width: 100%;
4652 max-width: 300px;
4653 }
4654 }
4655 @media screen and (max-width: 480px) {
4656 .e-onboarding101-variant-b .e-onboarding__page-content {
4657 padding: 15px;
4658 width: calc(100% - 30px);
4659 }
4660 .e-onboarding101-variant-b .e-onboarding__content {
4661 padding-block-start: 5rem;
4662 }
4663 .e-onboarding101-variant-b .e-onboarding101-variant-b-content {
4664 width: 100%;
4665 }
4666 .e-onboarding101-variant-b .e-onboarding101-variant-b-title {
4667 font-size: 28px;
4668 }
4669 .e-onboarding101-variant-b .e-onboarding101-variant-b-description {
4670 font-size: 16px;
4671 }
4672 .e-onboarding101-variant-b .e-onboarding101-variant-b-buttons {
4673 width: 100%;
4674 }
4675 }
4676 .experiment202-variant-b .e-onboarding__progress-bar {
4677 margin-block-end: 85px;
4678 }
4679 .experiment202-variant-b .e-onboarding__page-content--experiment-202 {
4680 display: flex;
4681 flex-direction: column;
4682 align-items: center;
4683 text-align: center;
4684 max-width: 1000px;
4685 margin: 0 auto;
4686 padding: 0 20px;
4687 }
4688 .experiment202-variant-b .e-onboarding__page-content-header {
4689 margin-block-end: 48px;
4690 }
4691 .experiment202-variant-b .e-onboarding__page-content-title {
4692 font-family: "Source Serif Pro", serif;
4693 font-weight: 700;
4694 font-size: 36px;
4695 line-height: 1.3;
4696 color: #0C0D0E;
4697 margin: 0 0 10px 0;
4698 }
4699 .experiment202-variant-b .e-onboarding__page-content-subtitle {
4700 font-family: "DM Sans", sans-serif;
4701 font-weight: 400;
4702 font-size: 18px;
4703 line-height: 1.5;
4704 color: #3A3F45;
4705 letter-spacing: -0.18px;
4706 margin: 0;
4707 }
4708 .experiment202-variant-b .e-onboarding__features-grid {
4709 display: flex;
4710 justify-content: center;
4711 flex-wrap: wrap;
4712 gap: 60px;
4713 width: 100%;
4714 padding-block-end: 150px;
4715 min-height: 280px;
4716 }
4717 .experiment202-variant-b .e-onboarding__feature-item {
4718 display: flex;
4719 flex-direction: column;
4720 align-items: center;
4721 text-align: center;
4722 gap: 8px;
4723 max-width: 280px;
4724 }
4725 .experiment202-variant-b .e-onboarding__feature-item:last-of-type .e-onboarding__feature-description {
4726 max-width: 210px;
4727 }
4728 .experiment202-variant-b .e-onboarding__feature-icon {
4729 display: flex;
4730 align-items: center;
4731 justify-content: center;
4732 width: 35px;
4733 height: 35px;
4734 margin-block-end: 8px;
4735 }
4736 .experiment202-variant-b .e-onboarding__feature-icon svg {
4737 width: 35px;
4738 height: 35px;
4739 flex-shrink: 0;
4740 }
4741 .experiment202-variant-b .e-onboarding__feature-content {
4742 display: flex;
4743 flex-direction: column;
4744 align-items: center;
4745 gap: 8px;
4746 }
4747 .experiment202-variant-b .e-onboarding__feature-title {
4748 font-family: "DM Sans", sans-serif;
4749 font-weight: 600;
4750 font-size: 20px;
4751 line-height: 1.5;
4752 color: #3A3F45;
4753 letter-spacing: -0.2px;
4754 margin: 0;
4755 }
4756 .experiment202-variant-b .e-onboarding__feature-description {
4757 font-family: "DM Sans", sans-serif;
4758 font-weight: 400;
4759 font-size: 14px;
4760 line-height: 1.5;
4761 color: #3A3F45;
4762 letter-spacing: -0.14px;
4763 margin: 0;
4764 max-width: 260px;
4765 }
4766 .experiment202-variant-b .e-onboarding__theme-switch-note {
4767 font-family: "DM Sans", sans-serif;
4768 font-weight: 600;
4769 font-size: 14px;
4770 line-height: 1.5;
4771 color: #3A3F45;
4772 letter-spacing: -0.14px;
4773 margin: 24px 0 0 0;
4774 }
4775 .experiment202-variant-b .e-onboarding__footer {
4776 display: flex;
4777 justify-content: center;
4778 }
4779 .experiment202-variant-b .e-onboarding__footnote {
4780 display: flex;
4781 justify-content: center;
4782 width: 100%;
4783 color: #3A3F45;
4784 text-align: center;
4785 font-family: "DM Sans";
4786 font-size: 14px;
4787 font-weight: 600;
4788 line-height: 150%;
4789 letter-spacing: -0.14px;
4790 margin-block: 24px 60px;
4791 }
4792 .experiment202-variant-b .e-onboarding__footnote::before {
4793 content: initial;
4794 }
4795 .experiment202-variant-b .e-onboarding__notice {
4796 display: flex;
4797 justify-content: center;
4798 }
4799
4800 @media screen and (min-width: 769px) {
4801 .experiment202-variant-b .e-onboarding__button-skip {
4802 position: absolute;
4803 inset-inline-end: 30px;
4804 }
4805 }
4806 @media screen and (max-width: 768px) {
4807 .experiment202-variant-b .e-onboarding__page-content--experiment-202 {
4808 padding: 0 16px;
4809 }
4810 .experiment202-variant-b .e-onboarding__page-content-title {
4811 font-size: 28px;
4812 }
4813 .experiment202-variant-b .e-onboarding__features-grid {
4814 grid-template-columns: 1fr;
4815 gap: 40px;
4816 padding-block-end: 60px;
4817 }
4818 .experiment202-variant-b .e-onboarding__feature-title {
4819 font-size: 18px;
4820 white-space: normal;
4821 }
4822 .experiment202-variant-b .e-onboarding__feature-description {
4823 max-width: 100%;
4824 }
4825 }
4826 @media (max-width: 1024px) and (min-width: 769px) {
4827 .experiment202-variant-b .e-onboarding__features-grid {
4828 display: flex;
4829 flex-wrap: wrap;
4830 justify-content: center;
4831 gap: 40px 60px;
4832 padding-block-end: 60px;
4833 }
4834 .experiment202-variant-b .e-onboarding__feature-description {
4835 max-width: 220px;
4836 }
4837 }
4838 /*# sourceMappingURL=app-rtl.css.map */