PluginProbe
Elementor Website Builder – more than just a page builder / 3.33.0-beta1
Elementor Website Builder – more than just a page builder v3.33.0-beta1
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.33.0-beta1, at assets/css/app-rtl.css

4,346 lines 106.1 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&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 todo: TBD: Optionally remove headline styling in favor of a global atom depending on variation needs
1176 */
1177 }
1178 .eps-card__header {
1179 padding: 0.625rem;
1180 border-block-end: var(--card-header-footer-border);
1181 min-height: 2.5rem;
1182 display: flex;
1183 align-items: center;
1184 }
1185 .eps-card__header--padding {
1186 padding: var(--eps-card-header-padding);
1187 }
1188 .eps-card__headline {
1189 color: var(--card-headline-color);
1190 margin-block-end: 0;
1191 font-weight: 500;
1192 flex-grow: 1;
1193 overflow: hidden;
1194 text-overflow: ellipsis;
1195 white-space: nowrap;
1196 }
1197 .eps-card__body {
1198 padding: 0.625rem 0.625rem;
1199 }
1200 .eps-card__body--padding {
1201 padding: var(--eps-card-body-padding);
1202 }
1203 .eps-card__figure {
1204 background-color: var(--card-figure-background-color);
1205 position: relative;
1206 padding-block-end: var(--card-image-aspect-ratio, 95.6%);
1207 overflow: hidden;
1208 height: 0;
1209 }
1210 .eps-card__image {
1211 width: 100%;
1212 -o-object-fit: contain;
1213 object-fit: contain;
1214 -o-object-position: top;
1215 object-position: top;
1216 position: absolute;
1217 inset-block-start: 0;
1218 inset-inline-start: 0;
1219 }
1220 .eps-card__image-overlay {
1221 position: absolute;
1222 inset-block-start: 0;
1223 background-color: var(--card-image-overlay-background-color);
1224 z-index: 1;
1225 width: 100%;
1226 height: 100%;
1227 opacity: 0;
1228 transition: 0.3s;
1229 }
1230 .eps-card__image-overlay:hover {
1231 opacity: 1;
1232 }
1233 .eps-card__footer {
1234 padding: 0.625rem;
1235 border-block-start: var(--card-header-footer-border);
1236 font-size: 0.6875rem;
1237 }
1238 .eps-card__footer--padding {
1239 padding: var(--eps-card-footer-padding);
1240 }
1241
1242 :root {
1243 --menu-item-color: #515962;
1244 --menu-item-color-hover: #3f444b;
1245 --menu-item-color-active: #0C0D0E;
1246 --menu-item-background-color-hover: #F9FAFA;
1247 --menu-item-background-color-active: #E6E8EA;
1248 --menu-item-action-button-color: #9DA5AE;
1249 }
1250
1251 .eps-theme-dark {
1252 --menu-item-color: #D5D8DC;
1253 --menu-item-color-hover: #BABFC5;
1254 --menu-item-color-active: #9DA5AE;
1255 --menu-item-background-color-hover: #2b2c31;
1256 --menu-item-background-color-active: #333438;
1257 --menu-item-action-button-color: #818A96;
1258 }
1259
1260 .eps-menu-item {
1261 display: flex;
1262 align-items: center;
1263 position: relative;
1264 transition: 0.3s;
1265 --action-button-opacity: 0;
1266 }
1267 .eps-menu-item::before {
1268 content: "";
1269 display: block;
1270 position: absolute;
1271 inset-block-start: 0;
1272 inset-inline-start: 0;
1273 height: 100%;
1274 width: var(--menu-item-pointer-width);
1275 background-color: #0C0D0E;
1276 }
1277 .eps-menu-item:hover:not(.eps-menu-item--active) {
1278 background-color: var(--menu-item-background-color-hover);
1279 --action-button-opacity: 1;
1280 --menu-item-color: var(--menu-item-color-hover);
1281 --eps-link-color: var(--menu-item-color-hover);
1282 }
1283 .eps-menu-item--active {
1284 background-color: var(--menu-item-background-color-active);
1285 --menu-item-color: var(--menu-item-color-active);
1286 --eps-link-color: var(--menu-item-color-active);
1287 }
1288 .eps-menu-item__link {
1289 padding: 0.5rem 1.875rem;
1290 min-height: 2.75rem;
1291 font-size: 0.75rem;
1292 line-height: 1.2;
1293 flex-grow: 1;
1294 display: flex;
1295 align-items: center;
1296 color: var(--menu-item-color);
1297 --eps-link-color: var(--menu-item-color);
1298 }
1299 .eps-menu-item__link:not(:last-child) {
1300 padding-inline-end: 0;
1301 }
1302 .eps-menu-item__link .eps-icon {
1303 font-size: 1.125rem;
1304 margin-inline-end: 0.75rem;
1305 }
1306 .eps-menu-item__action-button {
1307 opacity: var(--action-button-opacity);
1308 padding: 0.625rem;
1309 transition: 0.3s;
1310 margin-inline-end: 1.25rem;
1311 }
1312 .eps-menu-item--active {
1313 --menu-item-pointer-width: 0.3125rem;
1314 }
1315
1316 .eps-grid-container {
1317 display: flex;
1318 flex-wrap: wrap;
1319 width: 100%;
1320 }
1321 .eps-grid-container--no-wrap {
1322 flex-wrap: nowrap;
1323 }
1324 .eps-grid-container--wrap-reverse {
1325 flex-wrap: wrap-reverse;
1326 }
1327 .eps-grid-container--spacing {
1328 --grid-row-gutter: calc(-1 * calc(var(--grid-spacing-gutter) * 0.625rem / 10));
1329 width: var(--grid-spacing-width);
1330 margin: var(--grid-row-gutter);
1331 }
1332 .eps-grid-container--spacing > .eps-grid-item {
1333 padding: var(--grid-spacing-gutter);
1334 }
1335 .eps-grid--direction-row {
1336 flex-direction: row;
1337 }
1338 .eps-grid--direction-row-reverse {
1339 flex-direction: row-reverse;
1340 }
1341 .eps-grid--direction-column {
1342 flex-direction: column;
1343 }
1344 .eps-grid--direction-column-reverse {
1345 flex-direction: column-reverse;
1346 }
1347 .eps-grid--justify-stretch {
1348 justify-content: stretch;
1349 }
1350 .eps-grid--justify-start {
1351 justify-content: flex-start;
1352 }
1353 .eps-grid--justify-center {
1354 justify-content: center;
1355 }
1356 .eps-grid--justify-end {
1357 justify-content: flex-end;
1358 }
1359 .eps-grid--justify-space-between {
1360 justify-content: space-between;
1361 }
1362 .eps-grid--justify-space-around {
1363 justify-content: space-around;
1364 }
1365 .eps-grid--justify-space-evenly {
1366 justify-content: space-evenly;
1367 }
1368 .eps-grid--align-content-stretch {
1369 align-content: stretch;
1370 }
1371 .eps-grid--align-content-start {
1372 align-content: flex-start;
1373 }
1374 .eps-grid--align-content-center {
1375 align-content: center;
1376 }
1377 .eps-grid--align-content-end {
1378 align-content: flex-end;
1379 }
1380 .eps-grid--align-content-space-between {
1381 align-content: space-between;
1382 }
1383 .eps-grid--align-items-start {
1384 align-items: flex-start;
1385 }
1386 .eps-grid--align-items-center {
1387 align-items: center;
1388 }
1389 .eps-grid--align-items-end {
1390 align-items: flex-end;
1391 }
1392 .eps-grid--align-items-baseline {
1393 align-items: baseline;
1394 }
1395 .eps-grid--align-items-stretch {
1396 align-items: stretch;
1397 }
1398
1399 .eps-grid-item--zero-min-width {
1400 min-width: 0;
1401 }
1402
1403 @media screen and (min-width: 480px) {
1404 .eps-grid-item-sm {
1405 flex-grow: 1;
1406 max-width: 100%;
1407 flex-basis: 0;
1408 }
1409 }
1410 @media screen and (min-width: 768px) {
1411 .eps-grid-item-md {
1412 flex-grow: 1;
1413 max-width: 100%;
1414 flex-basis: 0;
1415 }
1416 }
1417 @media screen and (min-width: 1025px) {
1418 .eps-grid-item-lg {
1419 flex-grow: 1;
1420 max-width: 100%;
1421 flex-basis: 0;
1422 }
1423 }
1424 @media screen and (min-width: 1440px) {
1425 .eps-grid-item-xl {
1426 flex-grow: 1;
1427 max-width: 100%;
1428 flex-basis: 0;
1429 }
1430 }
1431 @media screen and (min-width: 1600px) {
1432 .eps-grid-item-xxl {
1433 flex-grow: 1;
1434 max-width: 100%;
1435 flex-basis: 0;
1436 }
1437 }
1438 .eps-grid-item-xs-1 {
1439 flex-grow: 0;
1440 max-width: calc(1 / 12 * 100%);
1441 flex-basis: calc(1 / 12 * 100%);
1442 }
1443
1444 .eps-grid-item-xs-2 {
1445 flex-grow: 0;
1446 max-width: calc(2 / 12 * 100%);
1447 flex-basis: calc(2 / 12 * 100%);
1448 }
1449
1450 .eps-grid-item-xs-3 {
1451 flex-grow: 0;
1452 max-width: calc(3 / 12 * 100%);
1453 flex-basis: calc(3 / 12 * 100%);
1454 }
1455
1456 .eps-grid-item-xs-4 {
1457 flex-grow: 0;
1458 max-width: calc(4 / 12 * 100%);
1459 flex-basis: calc(4 / 12 * 100%);
1460 }
1461
1462 .eps-grid-item-xs-5 {
1463 flex-grow: 0;
1464 max-width: calc(5 / 12 * 100%);
1465 flex-basis: calc(5 / 12 * 100%);
1466 }
1467
1468 .eps-grid-item-xs-6 {
1469 flex-grow: 0;
1470 max-width: calc(6 / 12 * 100%);
1471 flex-basis: calc(6 / 12 * 100%);
1472 }
1473
1474 .eps-grid-item-xs-7 {
1475 flex-grow: 0;
1476 max-width: calc(7 / 12 * 100%);
1477 flex-basis: calc(7 / 12 * 100%);
1478 }
1479
1480 .eps-grid-item-xs-8 {
1481 flex-grow: 0;
1482 max-width: calc(8 / 12 * 100%);
1483 flex-basis: calc(8 / 12 * 100%);
1484 }
1485
1486 .eps-grid-item-xs-9 {
1487 flex-grow: 0;
1488 max-width: calc(9 / 12 * 100%);
1489 flex-basis: calc(9 / 12 * 100%);
1490 }
1491
1492 .eps-grid-item-xs-10 {
1493 flex-grow: 0;
1494 max-width: calc(10 / 12 * 100%);
1495 flex-basis: calc(10 / 12 * 100%);
1496 }
1497
1498 .eps-grid-item-xs-11 {
1499 flex-grow: 0;
1500 max-width: calc(11 / 12 * 100%);
1501 flex-basis: calc(11 / 12 * 100%);
1502 }
1503
1504 .eps-grid-item-xs-12 {
1505 flex-grow: 0;
1506 max-width: calc(12 / 12 * 100%);
1507 flex-basis: calc(12 / 12 * 100%);
1508 }
1509
1510 @media screen and (min-width: 480px) {
1511 .eps-grid-item-sm-1 {
1512 flex-grow: 0;
1513 max-width: calc(1 / 12 * 100%);
1514 flex-basis: calc(1 / 12 * 100%);
1515 }
1516 .eps-grid-item-sm-2 {
1517 flex-grow: 0;
1518 max-width: calc(2 / 12 * 100%);
1519 flex-basis: calc(2 / 12 * 100%);
1520 }
1521 .eps-grid-item-sm-3 {
1522 flex-grow: 0;
1523 max-width: calc(3 / 12 * 100%);
1524 flex-basis: calc(3 / 12 * 100%);
1525 }
1526 .eps-grid-item-sm-4 {
1527 flex-grow: 0;
1528 max-width: calc(4 / 12 * 100%);
1529 flex-basis: calc(4 / 12 * 100%);
1530 }
1531 .eps-grid-item-sm-5 {
1532 flex-grow: 0;
1533 max-width: calc(5 / 12 * 100%);
1534 flex-basis: calc(5 / 12 * 100%);
1535 }
1536 .eps-grid-item-sm-6 {
1537 flex-grow: 0;
1538 max-width: calc(6 / 12 * 100%);
1539 flex-basis: calc(6 / 12 * 100%);
1540 }
1541 .eps-grid-item-sm-7 {
1542 flex-grow: 0;
1543 max-width: calc(7 / 12 * 100%);
1544 flex-basis: calc(7 / 12 * 100%);
1545 }
1546 .eps-grid-item-sm-8 {
1547 flex-grow: 0;
1548 max-width: calc(8 / 12 * 100%);
1549 flex-basis: calc(8 / 12 * 100%);
1550 }
1551 .eps-grid-item-sm-9 {
1552 flex-grow: 0;
1553 max-width: calc(9 / 12 * 100%);
1554 flex-basis: calc(9 / 12 * 100%);
1555 }
1556 .eps-grid-item-sm-10 {
1557 flex-grow: 0;
1558 max-width: calc(10 / 12 * 100%);
1559 flex-basis: calc(10 / 12 * 100%);
1560 }
1561 .eps-grid-item-sm-11 {
1562 flex-grow: 0;
1563 max-width: calc(11 / 12 * 100%);
1564 flex-basis: calc(11 / 12 * 100%);
1565 }
1566 .eps-grid-item-sm-12 {
1567 flex-grow: 0;
1568 max-width: calc(12 / 12 * 100%);
1569 flex-basis: calc(12 / 12 * 100%);
1570 }
1571 }
1572 @media screen and (min-width: 768px) {
1573 .eps-grid-item-md-1 {
1574 flex-grow: 0;
1575 max-width: calc(1 / 12 * 100%);
1576 flex-basis: calc(1 / 12 * 100%);
1577 }
1578 .eps-grid-item-md-2 {
1579 flex-grow: 0;
1580 max-width: calc(2 / 12 * 100%);
1581 flex-basis: calc(2 / 12 * 100%);
1582 }
1583 .eps-grid-item-md-3 {
1584 flex-grow: 0;
1585 max-width: calc(3 / 12 * 100%);
1586 flex-basis: calc(3 / 12 * 100%);
1587 }
1588 .eps-grid-item-md-4 {
1589 flex-grow: 0;
1590 max-width: calc(4 / 12 * 100%);
1591 flex-basis: calc(4 / 12 * 100%);
1592 }
1593 .eps-grid-item-md-5 {
1594 flex-grow: 0;
1595 max-width: calc(5 / 12 * 100%);
1596 flex-basis: calc(5 / 12 * 100%);
1597 }
1598 .eps-grid-item-md-6 {
1599 flex-grow: 0;
1600 max-width: calc(6 / 12 * 100%);
1601 flex-basis: calc(6 / 12 * 100%);
1602 }
1603 .eps-grid-item-md-7 {
1604 flex-grow: 0;
1605 max-width: calc(7 / 12 * 100%);
1606 flex-basis: calc(7 / 12 * 100%);
1607 }
1608 .eps-grid-item-md-8 {
1609 flex-grow: 0;
1610 max-width: calc(8 / 12 * 100%);
1611 flex-basis: calc(8 / 12 * 100%);
1612 }
1613 .eps-grid-item-md-9 {
1614 flex-grow: 0;
1615 max-width: calc(9 / 12 * 100%);
1616 flex-basis: calc(9 / 12 * 100%);
1617 }
1618 .eps-grid-item-md-10 {
1619 flex-grow: 0;
1620 max-width: calc(10 / 12 * 100%);
1621 flex-basis: calc(10 / 12 * 100%);
1622 }
1623 .eps-grid-item-md-11 {
1624 flex-grow: 0;
1625 max-width: calc(11 / 12 * 100%);
1626 flex-basis: calc(11 / 12 * 100%);
1627 }
1628 .eps-grid-item-md-12 {
1629 flex-grow: 0;
1630 max-width: calc(12 / 12 * 100%);
1631 flex-basis: calc(12 / 12 * 100%);
1632 }
1633 }
1634 @media screen and (min-width: 1025px) {
1635 .eps-grid-item-lg-1 {
1636 flex-grow: 0;
1637 max-width: calc(1 / 12 * 100%);
1638 flex-basis: calc(1 / 12 * 100%);
1639 }
1640 .eps-grid-item-lg-2 {
1641 flex-grow: 0;
1642 max-width: calc(2 / 12 * 100%);
1643 flex-basis: calc(2 / 12 * 100%);
1644 }
1645 .eps-grid-item-lg-3 {
1646 flex-grow: 0;
1647 max-width: calc(3 / 12 * 100%);
1648 flex-basis: calc(3 / 12 * 100%);
1649 }
1650 .eps-grid-item-lg-4 {
1651 flex-grow: 0;
1652 max-width: calc(4 / 12 * 100%);
1653 flex-basis: calc(4 / 12 * 100%);
1654 }
1655 .eps-grid-item-lg-5 {
1656 flex-grow: 0;
1657 max-width: calc(5 / 12 * 100%);
1658 flex-basis: calc(5 / 12 * 100%);
1659 }
1660 .eps-grid-item-lg-6 {
1661 flex-grow: 0;
1662 max-width: calc(6 / 12 * 100%);
1663 flex-basis: calc(6 / 12 * 100%);
1664 }
1665 .eps-grid-item-lg-7 {
1666 flex-grow: 0;
1667 max-width: calc(7 / 12 * 100%);
1668 flex-basis: calc(7 / 12 * 100%);
1669 }
1670 .eps-grid-item-lg-8 {
1671 flex-grow: 0;
1672 max-width: calc(8 / 12 * 100%);
1673 flex-basis: calc(8 / 12 * 100%);
1674 }
1675 .eps-grid-item-lg-9 {
1676 flex-grow: 0;
1677 max-width: calc(9 / 12 * 100%);
1678 flex-basis: calc(9 / 12 * 100%);
1679 }
1680 .eps-grid-item-lg-10 {
1681 flex-grow: 0;
1682 max-width: calc(10 / 12 * 100%);
1683 flex-basis: calc(10 / 12 * 100%);
1684 }
1685 .eps-grid-item-lg-11 {
1686 flex-grow: 0;
1687 max-width: calc(11 / 12 * 100%);
1688 flex-basis: calc(11 / 12 * 100%);
1689 }
1690 .eps-grid-item-lg-12 {
1691 flex-grow: 0;
1692 max-width: calc(12 / 12 * 100%);
1693 flex-basis: calc(12 / 12 * 100%);
1694 }
1695 }
1696 @media screen and (min-width: 1440px) {
1697 .eps-grid-item-xl-1 {
1698 flex-grow: 0;
1699 max-width: calc(1 / 12 * 100%);
1700 flex-basis: calc(1 / 12 * 100%);
1701 }
1702 .eps-grid-item-xl-2 {
1703 flex-grow: 0;
1704 max-width: calc(2 / 12 * 100%);
1705 flex-basis: calc(2 / 12 * 100%);
1706 }
1707 .eps-grid-item-xl-3 {
1708 flex-grow: 0;
1709 max-width: calc(3 / 12 * 100%);
1710 flex-basis: calc(3 / 12 * 100%);
1711 }
1712 .eps-grid-item-xl-4 {
1713 flex-grow: 0;
1714 max-width: calc(4 / 12 * 100%);
1715 flex-basis: calc(4 / 12 * 100%);
1716 }
1717 .eps-grid-item-xl-5 {
1718 flex-grow: 0;
1719 max-width: calc(5 / 12 * 100%);
1720 flex-basis: calc(5 / 12 * 100%);
1721 }
1722 .eps-grid-item-xl-6 {
1723 flex-grow: 0;
1724 max-width: calc(6 / 12 * 100%);
1725 flex-basis: calc(6 / 12 * 100%);
1726 }
1727 .eps-grid-item-xl-7 {
1728 flex-grow: 0;
1729 max-width: calc(7 / 12 * 100%);
1730 flex-basis: calc(7 / 12 * 100%);
1731 }
1732 .eps-grid-item-xl-8 {
1733 flex-grow: 0;
1734 max-width: calc(8 / 12 * 100%);
1735 flex-basis: calc(8 / 12 * 100%);
1736 }
1737 .eps-grid-item-xl-9 {
1738 flex-grow: 0;
1739 max-width: calc(9 / 12 * 100%);
1740 flex-basis: calc(9 / 12 * 100%);
1741 }
1742 .eps-grid-item-xl-10 {
1743 flex-grow: 0;
1744 max-width: calc(10 / 12 * 100%);
1745 flex-basis: calc(10 / 12 * 100%);
1746 }
1747 .eps-grid-item-xl-11 {
1748 flex-grow: 0;
1749 max-width: calc(11 / 12 * 100%);
1750 flex-basis: calc(11 / 12 * 100%);
1751 }
1752 .eps-grid-item-xl-12 {
1753 flex-grow: 0;
1754 max-width: calc(12 / 12 * 100%);
1755 flex-basis: calc(12 / 12 * 100%);
1756 }
1757 }
1758 @media screen and (min-width: 1600px) {
1759 .eps-grid-item-xxl-1 {
1760 flex-grow: 0;
1761 max-width: calc(1 / 12 * 100%);
1762 flex-basis: calc(1 / 12 * 100%);
1763 }
1764 .eps-grid-item-xxl-2 {
1765 flex-grow: 0;
1766 max-width: calc(2 / 12 * 100%);
1767 flex-basis: calc(2 / 12 * 100%);
1768 }
1769 .eps-grid-item-xxl-3 {
1770 flex-grow: 0;
1771 max-width: calc(3 / 12 * 100%);
1772 flex-basis: calc(3 / 12 * 100%);
1773 }
1774 .eps-grid-item-xxl-4 {
1775 flex-grow: 0;
1776 max-width: calc(4 / 12 * 100%);
1777 flex-basis: calc(4 / 12 * 100%);
1778 }
1779 .eps-grid-item-xxl-5 {
1780 flex-grow: 0;
1781 max-width: calc(5 / 12 * 100%);
1782 flex-basis: calc(5 / 12 * 100%);
1783 }
1784 .eps-grid-item-xxl-6 {
1785 flex-grow: 0;
1786 max-width: calc(6 / 12 * 100%);
1787 flex-basis: calc(6 / 12 * 100%);
1788 }
1789 .eps-grid-item-xxl-7 {
1790 flex-grow: 0;
1791 max-width: calc(7 / 12 * 100%);
1792 flex-basis: calc(7 / 12 * 100%);
1793 }
1794 .eps-grid-item-xxl-8 {
1795 flex-grow: 0;
1796 max-width: calc(8 / 12 * 100%);
1797 flex-basis: calc(8 / 12 * 100%);
1798 }
1799 .eps-grid-item-xxl-9 {
1800 flex-grow: 0;
1801 max-width: calc(9 / 12 * 100%);
1802 flex-basis: calc(9 / 12 * 100%);
1803 }
1804 .eps-grid-item-xxl-10 {
1805 flex-grow: 0;
1806 max-width: calc(10 / 12 * 100%);
1807 flex-basis: calc(10 / 12 * 100%);
1808 }
1809 .eps-grid-item-xxl-11 {
1810 flex-grow: 0;
1811 max-width: calc(11 / 12 * 100%);
1812 flex-basis: calc(11 / 12 * 100%);
1813 }
1814 .eps-grid-item-xxl-12 {
1815 flex-grow: 0;
1816 max-width: calc(12 / 12 * 100%);
1817 flex-basis: calc(12 / 12 * 100%);
1818 }
1819 }
1820 :root {
1821 --menu-title-color: #515962;
1822 }
1823
1824 .eps-theme-dark {
1825 --menu-title-color: #515962;
1826 }
1827
1828 .eps-menu ul {
1829 list-style: none;
1830 padding: 0;
1831 margin: 0;
1832 }
1833 .eps-menu ul li {
1834 display: flex;
1835 }
1836 .eps-menu__title {
1837 padding: 0.5rem 1.875rem;
1838 font-size: 0.6875rem;
1839 line-height: 1.2;
1840 text-transform: uppercase;
1841 font-weight: normal;
1842 color: var(--menu-title-color);
1843 }
1844
1845 :root {
1846 --eps-modal-background-color: #ffffff;
1847 --eps-modal-header-background-color: #2563EB;
1848 --eps-tip-background-color: #F0F7FF;
1849 }
1850
1851 .eps-theme-dark {
1852 --eps-modal-background-color: #0C0D0E;
1853 --eps-modal-header-background-color: #0077CC;
1854 --eps-tip-background-color: #0A1A3D;
1855 }
1856
1857 /** ----------------------------------------------------------------
1858 EPS Modal
1859 ---------------------------------------------------------------- */
1860 .eps-modal {
1861 max-width: 43.75rem;
1862 background: var(--eps-modal-background-color);
1863 border-radius: 0.1875rem;
1864 animation: eps-animation-pop 0.15s cubic-bezier(0.57, 0.53, 0.71, 1.47) forwards;
1865 }
1866 .eps-modal__overlay {
1867 background: rgba(0, 0, 0, 0.5);
1868 position: fixed;
1869 display: flex;
1870 inset: 0;
1871 align-items: center;
1872 justify-content: center;
1873 z-index: 1030;
1874 }
1875 .eps-modal__header {
1876 font-size: 0.875rem;
1877 background: var(--eps-modal-header-background-color);
1878 height: 2.75rem;
1879 padding: 0.625rem 1rem;
1880 border-radius: 0.1875rem;
1881 }
1882 .eps-modal__header, .eps-modal__header .title {
1883 color: #ffffff;
1884 }
1885 .eps-modal__icon {
1886 margin-inline-end: 0.625rem;
1887 }
1888 .eps-modal__body {
1889 padding: 1.875rem;
1890 }
1891 .eps-modal__tip, .eps-modal .eps-tip {
1892 padding: 0.5rem;
1893 padding-inline-start: 0.75rem;
1894 border-inline-start: 3px solid #2563EB;
1895 background-color: var(--eps-tip-background-color);
1896 }
1897 .eps-modal__tip:not(:last-child), .eps-modal .eps-tip:not(:last-child) {
1898 margin-block-end: 1.875rem;
1899 }
1900 .eps-modal__tip:not(:first-child), .eps-modal .eps-tip:not(:first-child) {
1901 margin-block-start: 1.875rem;
1902 }
1903 .eps-modal__section:not(:first-child) {
1904 margin-block-start: 1.875rem;
1905 }
1906 .eps-modal__close-wrapper {
1907 padding-inline-start: 1rem;
1908 border-inline-start: solid 1px #ffffff;
1909 }
1910
1911 .eps-add-new-button {
1912 display: inline-flex;
1913 --eps-add-new-button-size: 1.5rem;
1914 line-height: var(--eps-add-new-button-size);
1915 cursor: pointer;
1916 }
1917 .eps-add-new-button .eps-icon {
1918 background-color: #F3BAFD;
1919 color: #0C0D0E;
1920 width: var(--eps-add-new-button-size);
1921 height: var(--eps-add-new-button-size);
1922 border-radius: 100%;
1923 font-size: calc(var(--eps-add-new-button-size) * 0.75);
1924 text-align: center;
1925 line-height: var(--eps-add-new-button-size);
1926 }
1927 .eps-add-new-button span:not(.sr-only) {
1928 margin-inline-start: 0.625rem;
1929 font-weight: 500;
1930 }
1931 .eps-add-new-button--sm {
1932 --eps-add-new-button-size: 1rem;
1933 }
1934
1935 :root {
1936 --select2-selection-background-color: #ffffff;
1937 --select2-selection-color: #515962;
1938 --select2-selection-border-color: #9DA5AE;
1939 --select2-selection-opened-focused-border-color: #BABFC5;
1940 --select2-single-selection-rendered-color: #515962;
1941 --select2-default-single-selection-background-color: #ffffff;
1942 --select2-default-single-selection-border-color: #9DA5AE;
1943 --select2-default-multiple-selection-background-color: #ffffff;
1944 --select2-default-multiple-selection-choice-background-color: #BABFC5;
1945 --select2-default-multiple-selection-choice-color: #515962;
1946 --select2-default-multiple-selection-choice-border-color: #BABFC5;
1947 --select2-default-multiple-selection-choice-remove-color: #69727D;
1948 --select2-default-multiple-selection-choice-remove-hover-color: #515962;
1949 --select2-default-results-selected-option-background-color: #ffffff;
1950 --select2-default-results-selected-option-color: #515962;
1951 --select2-default-results-highlighted-option-background-color: #5897fb;
1952 --select2-default-results-highlighted-option-color: #ffffff;
1953 --select2-results-selected-option-background-color: #5897fb;
1954 --select2-results-selected-option-color: #ffffff;
1955 --select2-dropdown-background-color: #ffffff;
1956 --select2-dropdown-border-color: #9DA5AE;
1957 }
1958
1959 .eps-theme-dark {
1960 --select2-selection-background-color: #3f444b;
1961 --select2-selection-color: #D5D8DC;
1962 --select2-selection-border-color: #818A96;
1963 --select2-selection-opened-focused-border-color: #9DA5AE;
1964 --select2-single-selection-rendered-color: #D5D8DC;
1965 --select2-default-single-selection-background-color: #3f444b;
1966 --select2-default-single-selection-border-color: #69727D;
1967 --select2-default-multiple-selection-background-color: #3f444b;
1968 --select2-default-multiple-selection-choice-background-color: #69727D;
1969 --select2-default-multiple-selection-choice-color: #D5D8DC;
1970 --select2-default-multiple-selection-choice-border-color: #69727D;
1971 --select2-default-multiple-selection-choice-remove-color: #BABFC5;
1972 --select2-default-multiple-selection-choice-remove-hover-color: #D5D8DC;
1973 --select2-default-results-selected-option-background-color: #3f444b;
1974 --select2-default-results-selected-option-color: #D5D8DC;
1975 --select2-default-results-highlighted-option-background-color: #69727D;
1976 --select2-default-results-highlighted-option-color: #D5D8DC;
1977 --select2-results-selected-option-background-color: #69727D;
1978 --select2-results-selected-option-color: #D5D8DC;
1979 --select2-dropdown-background-color: #3f444b;
1980 --select2-dropdown-border-color: #818A96;
1981 }
1982
1983 .select2-container:not(.select2-container--open):not(.select2-container--focus) .select2-selection--single,
1984 .select2-container:not(.select2-container--open):not(.select2-container--focus) .select2-selection--multiple {
1985 background-color: var(--select2-selection-background-color);
1986 color: var(--select2-selection-color);
1987 border-color: var(--select2-selection-border-color);
1988 }
1989 .select2-container.select2-container--open .select2-selection--single,
1990 .select2-container.select2-container--open .select2-selection--multiple, .select2-container.select2-container--focus .select2-selection--single,
1991 .select2-container.select2-container--focus .select2-selection--multiple {
1992 border-color: var(--select2-selection-opened-focused-border-color);
1993 }
1994 .select2-container.select2-container--default .select2-selection--single .select2-selection__rendered {
1995 color: var(--select2-single-selection-rendered-color);
1996 }
1997 .select2-container--default .select2-selection--single {
1998 background-color: var(--select2-default-single-selection-background-color);
1999 border-color: var(--select2-default-single-selection-border-color);
2000 }
2001 .select2-container--default .select2-selection--multiple {
2002 background-color: var(--select2-default-multiple-selection-background-color);
2003 }
2004 .select2-container--default .select2-selection--multiple .select2-selection__choice {
2005 background-color: var(--select2-default-multiple-selection-choice-background-color);
2006 color: var(--select2-default-multiple-selection-choice-color);
2007 border-color: var(--select2-default-multiple-selection-choice-border-color);
2008 }
2009 .select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
2010 color: var(--select2-default-multiple-selection-choice-remove-color);
2011 }
2012 .select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover {
2013 color: var(--select2-default-multiple-selection-choice-remove-hover-color);
2014 }
2015 .select2-container--default .select2-results__option[aria-selected] {
2016 background-color: var(--select2-default-results-selected-option-background-color);
2017 color: var(--select2-default-results-selected-option-color);
2018 }
2019 .select2-container--default .select2-results__option--highlighted[aria-selected] {
2020 background-color: var(--select2-default-results-highlighted-option-background-color);
2021 color: var(--select2-default-results-highlighted-option-color);
2022 }
2023 .select2-container .select2-results__option[aria-selected=true] {
2024 background-color: var(--select2-results-selected-option-background-color);
2025 color: var(--select2-results-selected-option-color);
2026 }
2027 .select2-container .select2-dropdown {
2028 background-color: var(--select2-dropdown-background-color);
2029 border-color: var(--select2-dropdown-border-color);
2030 }
2031
2032 .eps-notice {
2033 --eps-box-notice-background-color: #F1F2F3;
2034 padding: 0.625rem 1rem;
2035 }
2036 .eps-notice-semantic {
2037 border-inline-start: 3px solid var(--eps-notice-semantic-color);
2038 background-color: var(--eps-notice-semantic-bg);
2039 }
2040 .eps-notice-semantic .eps-notice__icon {
2041 color: var(--eps-notice-semantic-color);
2042 font-size: 1rem;
2043 margin-inline-end: 0.75rem;
2044 }
2045 .eps-notice--warning {
2046 --eps-notice-semantic-color: #F59E0B;
2047 --eps-notice-semantic-bg: #FFFBEB;
2048 }
2049 .eps-notice--danger {
2050 --eps-notice-semantic-color: #DC2626;
2051 --eps-notice-semantic-bg: #FEF1F4;
2052 }
2053 .eps-notice--info {
2054 --eps-notice-semantic-color: #2563EB;
2055 --eps-notice-semantic-bg: #F0F7FF;
2056 }
2057 .eps-notice__text {
2058 margin: 0;
2059 padding: 0;
2060 }
2061 .eps-notice__button-container {
2062 flex-shrink: 0;
2063 margin-inline-start: 1.25rem;
2064 width: auto;
2065 }
2066
2067 .eps-theme-dark .eps-notice {
2068 --eps-box-notice-background-color: #515962;
2069 }
2070 .eps-theme-dark .eps-notice--warning {
2071 --eps-notice-semantic-bg: #311808;
2072 }
2073 .eps-theme-dark .eps-notice--danger {
2074 --eps-notice-semantic-bg: #390A0A;
2075 }
2076 .eps-theme-dark .eps-notice--info {
2077 --eps-notice-semantic-bg: #0A1A3D;
2078 }
2079
2080 .eps-list {
2081 --eps-list-item-separated-border-color: #BABFC5;
2082 padding: 0;
2083 margin: 0;
2084 border-radius: 0.1875rem;
2085 border: 1px solid var(--e-a-border-color);
2086 list-style-type: none;
2087 }
2088 .eps-list--padding {
2089 padding: var(--eps-list-padding);
2090 }
2091 .eps-list__item {
2092 padding: 0;
2093 }
2094 .eps-list__item--padding {
2095 padding: var(--eps-list-item-padding);
2096 }
2097 .eps-list--separated .eps-list__item:not(:last-child) {
2098 border-block-end: 1px solid var(--eps-list-item-separated-border-color);
2099 }
2100
2101 .eps-theme-dark .eps-list {
2102 --eps-list-item-separated-border-color: #3f444b;
2103 }
2104
2105 :root {
2106 --popover-background-color: #ffffff;
2107 --popover-item-color: #515962;
2108 --popover-item-hover-color: #3f444b;
2109 --popover-item-danger-hover-color: #DC2626;
2110 --popover-item-background-color: #ffffff;
2111 --popover-box-shadow-color: rgba(0, 0, 0, 0.15);
2112 --popover-box-shadow-size: 0px 1px 20px;
2113 --popover-arrow-color: #ffffff;
2114 }
2115
2116 .eps-theme-dark {
2117 --popover-background-color: #1f2124;
2118 --popover-item-color: #ffffff;
2119 --popover-item-hover-color: #D5D8DC;
2120 --popover-item-danger-hover-color: #F84343;
2121 --popover-item-background-color: #1f2124;
2122 --popover-box-shadow-color: rgba(0, 0, 0, 0.15);
2123 --popover-box-shadow-size: 0px 1px 20px;
2124 --popover-arrow-color: #1f2124;
2125 }
2126
2127 .eps-popover {
2128 padding: 10px 0;
2129 background-color: var(--popover-background-color);
2130 box-shadow: var(--popover-box-shadow-size) var(--popover-box-shadow-color);
2131 list-style: none;
2132 display: flex;
2133 flex-direction: column;
2134 min-width: 120px;
2135 border-radius: 0.1875rem;
2136 position: absolute;
2137 z-index: 1050;
2138 margin-block-start: 9px;
2139 transform: translateX(-50%);
2140 inset-inline-start: 0.25rem;
2141 }
2142 .eps-popover__background {
2143 position: fixed;
2144 inset: 0;
2145 z-index: 1030;
2146 }
2147 .eps-popover__container {
2148 position: relative;
2149 }
2150 .eps-popover::before {
2151 content: "";
2152 display: block;
2153 position: absolute;
2154 width: 16px;
2155 height: 9px;
2156 margin: 0 0.1875rem 9px;
2157 inset-block-start: -9px;
2158 inset-inline-start: 50%;
2159 transform: translateX(-50%);
2160 border-color: transparent;
2161 border-style: solid;
2162 border-width: 0 calc(16px / 2) 9px calc(16px / 2);
2163 border-block-end-color: var(--popover-arrow-color);
2164 }
2165 .eps-popover--arrow-start::before {
2166 inset-inline-start: 0.1875rem;
2167 transform: none;
2168 }
2169 .eps-popover--arrow-end::before {
2170 inset-inline-start: auto;
2171 inset-inline-end: 0.1875rem;
2172 transform: none;
2173 }
2174 .eps-popover--arrow-none::before {
2175 display: none;
2176 }
2177 .eps-popover__item {
2178 padding: 0.3125rem 1rem;
2179 background-color: var(--popover-item-background-color);
2180 color: var(--popover-item-color);
2181 font-size: 0.6875rem;
2182 font-weight: 500;
2183 line-height: 0.8125rem;
2184 width: 100%;
2185 align-items: center;
2186 cursor: pointer;
2187 }
2188 .eps-popover__item:hover {
2189 color: var(--popover-item-hover-color);
2190 }
2191 .eps-popover__item--danger:hover {
2192 color: var(--popover-item-danger-hover-color);
2193 }
2194 .eps-popover__item .eps-icon {
2195 font-size: inherit;
2196 margin-inline-end: 0.3125rem;
2197 }
2198
2199 .eps-css-grid {
2200 display: grid;
2201 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)));
2202 grid-gap: var(--eps-grid-spacing);
2203 }
2204
2205 .eps-box {
2206 --eps-box-color: #1f2124;
2207 --eps-box-input-color: #1f2124;
2208 padding: 0;
2209 border-radius: 0.1875rem;
2210 color: var(--eps-box-color);
2211 }
2212 .eps-box--padding {
2213 padding: var(--eps-box-padding);
2214 }
2215 .eps-box > input {
2216 width: 100%;
2217 outline: 0;
2218 border: 0;
2219 background-color: transparent;
2220 color: var(--eps-box-input-color);
2221 }
2222
2223 .eps-theme-dark .eps-box {
2224 --eps-box-color: #D5D8DC;
2225 --eps-box-input-color: #D5D8DC;
2226 }
2227
2228 :root {
2229 --checkbox-border-color: #9DA5AE;
2230 --checkbox-hover-border-color: rgb(143.0391061453, 152.1787709497, 162.4608938547);
2231 --checkbox-active-border-color: rgb(170.9608938547, 177.8212290503, 185.5391061453);
2232 --checkbox-background-color: #ffffff;
2233 --checkbox-checked-background-color: #515962;
2234 --checkbox-checked-hover-background-color: rgb(69.4608938547, 76.3212290503, 84.0391061453);
2235 --checkbox-checked-active-background-color: rgb(92.5391061453, 101.6787709497, 111.9608938547);
2236 --checkbox-checked-disabled-background-color: #D5D8DC;
2237 --checkbox-indicator-color: #ffffff;
2238 --checkbox-error-background-color: #DC2626;
2239 }
2240
2241 .eps-theme-dark {
2242 --checkbox-background-color: transparent;
2243 }
2244
2245 .eps-checkbox {
2246 -webkit-appearance: none;
2247 -moz-appearance: none;
2248 appearance: none;
2249 border-radius: 0.1875rem;
2250 width: 15px;
2251 height: 15px;
2252 outline: 0;
2253 background-color: var(--checkbox-background-color);
2254 display: inline-flex;
2255 justify-content: center;
2256 align-items: center;
2257 border: 1px solid var(--checkbox-border-color);
2258 }
2259 .eps-checkbox::after {
2260 display: inline-block;
2261 margin-block-end: calc(0.25 / 2 * 100%);
2262 content: " ";
2263 width: 3px;
2264 height: 6px;
2265 transform: rotate(45deg);
2266 }
2267 .eps-checkbox:hover {
2268 --checkbox-border-color: var(--checkbox-hover-border-color);
2269 }
2270 .eps-checkbox:active {
2271 --checkbox-border-color: var(--checkbox-active-border-color);
2272 }
2273 .eps-checkbox:checked {
2274 --checkbox-background-color: var(--checkbox-checked-background-color);
2275 --checkbox-border-color: var(--checkbox-checked-background-color);
2276 }
2277 .eps-checkbox:checked::after {
2278 border: solid #ffffff;
2279 border-width: 0 1px 1px 0;
2280 }
2281 .eps-checkbox:checked:hover {
2282 --checkbox-background-color: var(--checkbox-checked-hover-background-color);
2283 --checkbox-border-color: var(--checkbox-checked-hover-background-color);
2284 }
2285 .eps-checkbox:checked:active {
2286 --checkbox-background-color: var(--checkbox-checked-active-background-color);
2287 --checkbox-border-color: var(--checkbox-checked-active-background-color);
2288 }
2289 .eps-checkbox:checked:disabled {
2290 --checkbox-background-color: var(--checkbox-checked-disabled-background-color);
2291 --checkbox-border-color: var(--checkbox-checked-disabled-background-color);
2292 }
2293 .eps-checkbox--rounded {
2294 border-radius: 50%;
2295 }
2296 .eps-checkbox--indeterminate {
2297 --checkbox-background-color: var(--checkbox-checked-background-color);
2298 --checkbox-border-color: var(--checkbox-checked-background-color);
2299 }
2300 .eps-checkbox--indeterminate::after {
2301 display: inline-block;
2302 margin-block-end: 0;
2303 content: " ";
2304 width: 7px;
2305 height: 0;
2306 transform: rotate(0deg);
2307 border-block-start: 1px solid #ffffff;
2308 }
2309 .eps-checkbox--error::before, .eps-checkbox--error::after, .eps-checkbox--error:checked::before, .eps-checkbox--error:checked::after {
2310 display: inline-block;
2311 margin-block-end: 0;
2312 content: " ";
2313 width: 7px;
2314 height: 0;
2315 border: solid #ffffff;
2316 border-width: 1px 0 0 0;
2317 position: absolute;
2318 }
2319 .eps-checkbox--error::before, .eps-checkbox--error:checked::before {
2320 transform: rotate(45deg);
2321 }
2322 .eps-checkbox--error::after, .eps-checkbox--error:checked::after {
2323 transform: rotate(-45deg);
2324 }
2325 .eps-checkbox--error, .eps-checkbox--error:hover, .eps-checkbox--error:checked, .eps-checkbox--error:checked:hover {
2326 --checkbox-background-color: var(--checkbox-error-background-color);
2327 --checkbox-border-color: var(--checkbox-error-background-color);
2328 }
2329
2330 :root {
2331 --e-app-drag-drop-background-color: #ffffff;
2332 --e-app-drag-drop-outline-color: #E6E8EA;
2333 }
2334
2335 .eps-theme-dark {
2336 --e-app-drag-drop-background-color: #2b2c31;
2337 --e-app-drag-drop-outline-color: #333438;
2338 }
2339
2340 .e-app-drag-drop {
2341 background-color: var(--e-app-drag-drop-background-color);
2342 outline: 2px dashed var(--e-app-drag-drop-outline-color);
2343 outline-offset: -0.75rem;
2344 margin-block-end: 1.5rem;
2345 padding: 4.125rem;
2346 text-align: center;
2347 }
2348 .e-app-drag-drop--drag-over {
2349 outline-color: #2563EB;
2350 }
2351
2352 .eps-dialog {
2353 border-radius: 3px;
2354 width: 375px;
2355 }
2356 .eps-dialog__close-button {
2357 position: absolute;
2358 inset-block-start: -2.75rem;
2359 inset-inline-end: -2.75rem;
2360 margin-block-start: 0.625rem;
2361 margin-inline-end: 0.625rem;
2362 z-index: 1040;
2363 font-size: 1.25rem;
2364 color: #ffffff;
2365 }
2366 .eps-dialog__content {
2367 padding: 1.5rem 1.875rem 1rem;
2368 font-size: 0.75rem;
2369 }
2370 .eps-dialog__title, .eps-dialog__text {
2371 text-align: center;
2372 }
2373 .eps-dialog__buttons {
2374 display: flex;
2375 }
2376 .eps-dialog__button {
2377 flex: 1;
2378 border-block-start: 1px solid var(--hr-color);
2379 line-height: 2.75rem;
2380 text-align: center;
2381 justify-content: center;
2382 }
2383 .eps-dialog__button:last-child:not(:first-child) {
2384 border-inline-start: 1px solid var(--hr-color);
2385 }
2386
2387 .e-app__popover {
2388 display: none;
2389 position: absolute;
2390 box-shadow: 0 2px 15px rgba(0, 0, 0, 0.3);
2391 border-radius: 6px;
2392 padding: 20px;
2393 width: -moz-fit-content;
2394 width: fit-content;
2395 z-index: 999;
2396 background-color: var(--e-a-bg-default);
2397 }
2398 .e-app__popover:before {
2399 content: "";
2400 position: absolute;
2401 inset-block-start: -16px;
2402 inset-inline-end: var(--popover-arrow-offset-end, 22px);
2403 border: 8px solid transparent;
2404 border-block-end-color: #fff;
2405 }
2406
2407 .eps-inline-link {
2408 color: var(--eps-inline-link-color);
2409 background-color: initial;
2410 border: 0;
2411 padding: 0;
2412 }
2413 .eps-inline-link--color-primary {
2414 --eps-inline-link-color: #0A875A;
2415 }
2416 .eps-inline-link--color-secondary {
2417 --eps-inline-link-color: #818A96;
2418 }
2419 .eps-inline-link--color-danger {
2420 --eps-inline-link-color: #DC2626;
2421 }
2422 .eps-inline-link--color-cta {
2423 --eps-inline-link-color: #93003f;
2424 }
2425 .eps-inline-link--color-link {
2426 --eps-inline-link-color: #515962;
2427 }
2428 .eps-inline-link--color-disabled {
2429 --eps-inline-link-color: #D5D8DC;
2430 }
2431 .eps-inline-link--underline-hover:hover, .eps-inline-link--underline-always, .eps-inline-link--underline-always:hover {
2432 text-decoration: underline;
2433 }
2434 .eps-inline-link--italic {
2435 font-style: italic;
2436 }
2437 .eps-inline-link, .eps-inline-link:focus {
2438 outline: none;
2439 }
2440
2441 .eps-text-field {
2442 --eps-text-field-color: #515962;
2443 --eps-text-field-background-color: transparent;
2444 --eps-text-field-placeholder-color: #69727D;
2445 --eps-text-field-outlined-border-color: #9DA5AE;
2446 --eps-text-field-outlined-focus-border-color: #515962;
2447 --eps-text-field-standard-border-color: #9DA5AE;
2448 --eps-text-field-standard-focus-border-color: #515962;
2449 --border: 1px solid var(--eps-text-field-outlined-border-color);
2450 width: 100%;
2451 color: var(--eps-text-field-color);
2452 background-color: var(--eps-text-field-background-color);
2453 border: 0;
2454 margin-block-end: 5px;
2455 outline: none;
2456 font-family: Roboto, Arial, Helvetica, Verdana, sans-serif;
2457 font-size: 0.875rem;
2458 font-weight: 400;
2459 line-height: 1.5;
2460 }
2461 .eps-text-field--outlined {
2462 border-radius: 0.1875rem;
2463 border: var(--border);
2464 padding: 0.625rem;
2465 }
2466 .eps-text-field--outlined:focus {
2467 border-color: var(--eps-text-field-outlined-focus-border-color);
2468 }
2469 .eps-text-field--standard {
2470 padding-top: 0.625rem;
2471 padding-bottom: 0.625rem;
2472 border-bottom: var(--border);
2473 }
2474 .eps-text-field--standard:focus {
2475 border-color: var(--eps-text-field-standard-focus-border-color);
2476 }
2477 .eps-text-field::-moz-placeholder {
2478 color: var(--eps-text-field-placeholder-color);
2479 font-family: Roboto, Arial, Helvetica, Verdana, sans-serif;
2480 font-size: 0.875rem;
2481 font-weight: 400;
2482 line-height: 1.5;
2483 }
2484 .eps-text-field::placeholder {
2485 color: var(--eps-text-field-placeholder-color);
2486 font-family: Roboto, Arial, Helvetica, Verdana, sans-serif;
2487 font-size: 0.875rem;
2488 font-weight: 400;
2489 line-height: 1.5;
2490 }
2491
2492 .eps-theme-dark .eps-text-field {
2493 --eps-text-field-color: #BABFC5;
2494 --eps-text-field-background-color: transparent;
2495 --eps-text-field-placeholder-color: #9DA5AE;
2496 --eps-text-field-outlined-border-color: #3f444b;
2497 --eps-text-field-outlined-focus-border-color: #9DA5AE;
2498 }
2499 .eps-theme-dark--outlined {
2500 border-color: var(--eps-text-field-outlined-border-color);
2501 }
2502 .eps-theme-dark--outlined:focus {
2503 border-color: var(--eps-text-field-outlined-focus-border-color);
2504 }
2505 .eps-theme-dark--standard {
2506 border-color: var(--eps-text-field-standard-border-color);
2507 }
2508 .eps-theme-dark--standard:focus {
2509 border-color: var(--eps-text-field-standard-focus-border-color);
2510 }
2511
2512 .e-app-import-export-content-layout {
2513 display: flex;
2514 justify-content: center;
2515 height: 100%;
2516 }
2517 .e-app-import-export-content-layout__container {
2518 flex-basis: 1075px;
2519 }
2520
2521 .e-app-export-complete__kit-content-title {
2522 margin: 2.75rem 0 0.625rem;
2523 }
2524
2525 .e-app-export-kit-content {
2526 --e-app-export-kit-content-title-color: #3f444b;
2527 --e-app-export-kit-content-description-color: #515962;
2528 --e-app-export-kit-content-sm-notice-color: #BABFC5;
2529 }
2530 .e-app-export-kit-content__checkbox {
2531 flex-shrink: 0;
2532 margin-inline-end: 0.75rem;
2533 }
2534 .e-app-export-kit-content__title {
2535 color: var(--e-app-export-kit-content-title-color);
2536 }
2537 .e-app-export-kit-content__description {
2538 color: var(--e-app-export-kit-content-description-color);
2539 margin-inline-end: 1.25rem;
2540 }
2541 .e-app-export-kit-content__notice {
2542 margin-block-start: 1rem;
2543 }
2544 .e-app-export-kit-content__small-notice {
2545 font-style: italic;
2546 color: var(--e-app-export-kit-content-sm-notice-color);
2547 }
2548
2549 .eps-theme-dark .e-app-export-kit-content {
2550 --e-app-export-kit-content-title-color: #D5D8DC;
2551 --e-app-export-kit-content-description-color: #BABFC5;
2552 --e-app-export-kit-content-sm-notice-color: #818A96;
2553 }
2554
2555 .e-app-import-export-kit-data {
2556 --e-app-import-export-kit-data-site-area-color: #3f444b;
2557 --e-app-import-export-kit-data-included-color: #69727D;
2558 }
2559 .e-app-import-export-kit-data__site-area, .e-app-import-export-kit-data__included {
2560 margin-block-end: 0;
2561 }
2562 .e-app-import-export-kit-data__site-area {
2563 color: var(--e-app-import-export-kit-data-site-area-color);
2564 font-weight: bold;
2565 }
2566 .e-app-import-export-kit-data__included {
2567 color: var(--e-app-import-export-kit-data-included-color);
2568 }
2569
2570 .eps-theme-dark .e-app-import-export-kit-data {
2571 --e-app-import-export-kit-data-site-area-color: #BABFC5;
2572 --e-app-import-export-kit-data-included-color: #9DA5AE;
2573 }
2574
2575 .e-app-import-resolver {
2576 --e-app-import-resolver-panel-header-background-color: #ffffff;
2577 --e-app-import-resolver-panel-body-background-color: rgba(255, 255, 255, 0.5);
2578 --e-app-import-resolver-conflicts-asset-border-color: #818A96;
2579 --e-app-import-resolver-conflicts-asset-inactive-color: #69727D;
2580 padding-block-end: 1.25rem;
2581 }
2582 .e-app-import-resolver__notice {
2583 margin-block-end: 1.25rem;
2584 }
2585 .e-app-import-resolver__panel, .e-app-import-resolver__panel:hover {
2586 background-color: initial;
2587 }
2588 .e-app-import-resolver__panel-header {
2589 background-color: var(--e-app-import-resolver-panel-header-background-color);
2590 }
2591 .e-app-import-resolver__panel-body {
2592 background-color: var(--e-app-import-resolver-panel-body-background-color);
2593 }
2594 .e-app-import-resolver-conflicts__container {
2595 box-shadow: 0 2px 3px 1px var(--color-box-shadow-color);
2596 }
2597 .e-app-import-resolver-conflicts__checkbox {
2598 flex-shrink: 0;
2599 margin-inline-end: 0.75rem;
2600 }
2601 .e-app-import-resolver-conflicts__title {
2602 line-height: 1;
2603 }
2604 .e-app-import-resolver-conflicts__asset:not(:first-child) {
2605 border-inline-start: 2px solid var(--e-app-import-resolver-conflicts-asset-border-color);
2606 padding-inline-start: 1rem;
2607 margin-inline-start: 1rem;
2608 }
2609 .e-app-import-resolver-conflicts__asset:not(.active) {
2610 color: var(--e-app-import-resolver-conflicts-asset-inactive-color);
2611 }
2612 .e-app-import-resolver-conflicts__edit-template {
2613 margin-inline-start: 0.3125rem;
2614 }
2615
2616 .eps-theme-dark .e-app-import-resolver {
2617 --e-app-import-resolver-panel-header-background-color: #69727D;
2618 --e-app-import-resolver-panel-body-background-color: rgba(0, 0, 0, 0.05);
2619 --e-app-import-resolver-conflicts-asset-border-color: #818A96;
2620 --e-app-import-resolver-conflicts-asset-inactive-color: #9DA5AE;
2621 }
2622
2623 .eps-panel {
2624 --eps-panel-header-background-color: transparent;
2625 --eps-panel-body-background-color: transparent;
2626 }
2627 .eps-panel, .eps-panel:hover {
2628 background-color: initial;
2629 }
2630 .eps-panel__header {
2631 background-color: var(--eps-panel-header-background-color);
2632 border-radius: 0.1875rem;
2633 }
2634 .eps-panel__body {
2635 background-color: var(--eps-panel-body-background-color);
2636 border-radius: 0 0 0.1875rem 0.1875rem;
2637 }
2638
2639 .eps-theme-dark .eps-panel {
2640 --eps-panel-header-background-color: transparent;
2641 --eps-panel-body-background-color: transparent;
2642 }
2643
2644 .e-app-export-kit {
2645 padding-block-end: 1.25rem;
2646 }
2647 .e-app-export-kit-information__field-header {
2648 margin-block-end: 0.625rem;
2649 }
2650 .e-app-export-kit-information__label {
2651 margin: 0;
2652 }
2653 .e-app-export-kit-information__info-icon {
2654 margin-inline-start: 0.625rem;
2655 }
2656 .e-app-export-kit-information__content {
2657 gap: 16px;
2658 }
2659 .e-app-export-kit-information__field--error {
2660 border-color: var(--e-a-color-danger);
2661 }
2662 .e-app-export-kit-information__error-container {
2663 height: 20px;
2664 display: flex;
2665 align-items: flex-start;
2666 margin-block-start: 4px;
2667 }
2668 .e-app-export-kit-information__validation-error {
2669 color: var(--e-a-color-danger);
2670 }
2671 .e-app-export-kit__content {
2672 gap: 20px;
2673 }
2674
2675 .e-app-import-export-info-modal__section:not(:first-child) {
2676 margin-block-start: 1.875rem;
2677 }
2678 .e-app-import-export-info-modal__heading {
2679 margin-block-end: 1.25rem;
2680 }
2681
2682 :root {
2683 --eps-badge-background-color: #ffffff;
2684 }
2685
2686 .eps-theme-dark {
2687 --eps-badge-background-color: #515962;
2688 }
2689
2690 .eps-badge {
2691 display: inline-block;
2692 background: var(--eps-badge-background-color);
2693 padding: 0 0.5rem;
2694 line-height: 1.8;
2695 box-shadow: 0 3px 6px var(--color-box-shadow-color);
2696 border-radius: 4px;
2697 font-size: 0.75rem;
2698 }
2699 .eps-badge--sm {
2700 font-size: 0.625rem;
2701 border-radius: 3px;
2702 padding: 0 0.3125rem;
2703 line-height: 1.5;
2704 }
2705
2706 .eps-collapse__title {
2707 cursor: pointer;
2708 padding: 0.3125rem 0;
2709 display: flex;
2710 align-items: center;
2711 justify-content: space-between;
2712 width: 100%;
2713 background: transparent;
2714 border: none;
2715 color: inherit;
2716 }
2717 .eps-collapse__title:focus {
2718 outline: none;
2719 }
2720 .eps-collapse__icon {
2721 transition: all 150ms;
2722 scale: calc(1 * var(--direction-multiplier)) 1;
2723 }
2724 .eps-collapse__content {
2725 margin-block-start: 0.625rem;
2726 display: none;
2727 }
2728 .eps-collapse[data-open] .eps-collapse__content {
2729 display: block;
2730 }
2731 .eps-collapse[data-open] .eps-collapse__icon {
2732 transform: rotate(90deg);
2733 }
2734
2735 .e-kit-library-promotion {
2736 --e-kit-library-promotion-color: tints(600);
2737 }
2738
2739 .eps-theme-dark .e-kit-library-promotion {
2740 --e-kit-library-promotion-color: dark-tints(400);
2741 }
2742
2743 .e-kit-library-promotion {
2744 width: 100%;
2745 text-align: center;
2746 margin-block-start: 1.875rem;
2747 color: var(--e-kit-library-promotion-color);
2748 }
2749
2750 .e-kit-library__error-screen {
2751 margin-block-start: 2.75rem;
2752 }
2753 .e-kit-library__error-screen-title {
2754 margin-block-start: 2.75rem;
2755 margin-block-end: 0;
2756 }
2757 .e-kit-library__error-screen-description {
2758 margin-block-start: 1.5rem;
2759 color: #69727D;
2760 text-align: center;
2761 max-width: 520px;
2762 }
2763
2764 .e-kit-library__kit-favorite-actions {
2765 padding: 0.3125rem;
2766 transition: 0.3s all;
2767 border-radius: 4px;
2768 }
2769 .e-kit-library__kit-favorite-actions--active {
2770 color: #DC2626;
2771 }
2772 .e-kit-library__kit-favorite-actions--loading {
2773 opacity: 50%;
2774 cursor: default;
2775 }
2776 .e-kit-library__kit-favorite-actions:hover {
2777 background-color: rgba(220, 38, 38, 0.1);
2778 }
2779
2780 .e-kit-library__filter-indication {
2781 margin-block-start: 1.5rem;
2782 display: flex;
2783 align-items: center;
2784 }
2785 .e-kit-library__filter-indication-text {
2786 margin-block-end: 0;
2787 display: flex;
2788 align-items: center;
2789 }
2790 .e-kit-library__filter-indication-badge {
2791 margin-inline-start: 0.3125rem;
2792 display: flex;
2793 align-items: center;
2794 }
2795 .e-kit-library__filter-indication-badge-remove {
2796 margin-inline-start: 0.3125rem;
2797 font-size: 0.875rem;
2798 }
2799 .e-kit-library__filter-indication-button {
2800 margin-inline-start: 1.5rem;
2801 }
2802
2803 #eps-app-header-btn-promotion,
2804 #eps-app-header-btn-connect {
2805 margin-inline-start: 0.625rem;
2806 margin-inline-end: 0.625rem;
2807 }
2808
2809 #eps-app-header-btn-apply {
2810 margin-inline-start: 0.625rem;
2811 }
2812
2813 #eps-app-header-btn-download {
2814 margin-inline-end: 1rem;
2815 margin-inline-start: 1rem;
2816 }
2817
2818 .e-kit-library__apply-button {
2819 display: flex;
2820 align-items: center;
2821 justify-content: center;
2822 gap: 0.3125rem;
2823 }
2824
2825 .e-kit-library__kit-item {
2826 --e-kit-library-kit-item-overlay-promotion-button-background-color: #D5D8DC;
2827 }
2828
2829 .eps-theme-dark .e-kit-library__kit-item {
2830 --e-kit-library-kit-item-overlay-promotion-button-background-color: #515962;
2831 }
2832
2833 .e-kit-library__kit-item-overlay {
2834 height: 100%;
2835 }
2836 .e-kit-library__kit-item-overlay-overview-button {
2837 display: flex;
2838 flex-direction: column;
2839 align-items: center;
2840 justify-content: center;
2841 color: white;
2842 height: 100%;
2843 width: 100%;
2844 }
2845 .e-kit-library__kit-item-overlay-overview-button > i {
2846 font-size: 2rem;
2847 margin-block-end: 5px;
2848 }
2849 .e-kit-library__kit-item-overlay-overview-button > span {
2850 font-size: 0.9rem;
2851 }
2852 .e-kit-library__kit-item-overlay-promotion-button {
2853 display: flex;
2854 width: 100%;
2855 background: white;
2856 align-items: center;
2857 justify-content: center;
2858 padding: 10px;
2859 font-size: 13px;
2860 color: #93003f;
2861 background: var(--e-kit-library-kit-item-overlay-promotion-button-background-color);
2862 }
2863 .e-kit-library__kit-item-overlay-promotion-button > * {
2864 margin: 0 3px;
2865 }
2866 .e-kit-library__kit-item-subscription-plan-badge {
2867 --e-a-color-brand: #467FF7;
2868 position: absolute;
2869 inset-block-start: 0;
2870 inset-inline-end: 0;
2871 margin: 0.3125rem;
2872 background-color: var(--e-a-color-brand);
2873 color: #ffffff;
2874 text-transform: uppercase;
2875 }
2876 .e-kit-library__kit-item-subscription-plan-badge.promoted {
2877 --e-a-color-brand: #92003B;
2878 }
2879 .e-kit-library__kit-item-header {
2880 position: relative;
2881 }
2882 .e-kit-library__kit-item-lock-icon {
2883 font-size: 14px;
2884 margin-inline-end: 8px;
2885 color: var(--e-a-color-txt-accent);
2886 opacity: 0.7;
2887 }
2888 .e-kit-library__kit-item-actions-menu i {
2889 font-size: 16px;
2890 }
2891 .e-kit-library__kit-item-actions-popover {
2892 display: flex;
2893 flex-direction: column;
2894 align-items: start;
2895 min-width: 0;
2896 padding: 12px 0;
2897 position: absolute;
2898 inset-block-start: 25px;
2899 inset-inline-start: 100%;
2900 transform: translateX(calc(-100% * var(--direction-multiplier)));
2901 }
2902 .e-kit-library__kit-item-actions-popover-item {
2903 display: flex;
2904 height: 30px;
2905 width: 100%;
2906 align-items: center;
2907 gap: 8px;
2908 padding: 0 12px;
2909 cursor: pointer;
2910 }
2911 .e-kit-library__kit-item-actions-popover-item i {
2912 font-size: 16px;
2913 }
2914 .e-kit-library__kit-item-actions-popover-item:hover {
2915 background-color: var(--e-a-bg-hover);
2916 }
2917 .e-kit-library__kit-item-actions-popover-item--danger {
2918 color: var(--e-a-color-danger);
2919 }
2920 .e-kit-library__kit-item-actions-popover-item--danger:hover {
2921 background-color: var(--e-a-bg-danger);
2922 }
2923 .e-kit-library__kit-item-actions-popover-item--danger i {
2924 color: var(--e-a-color-danger);
2925 }
2926 .e-kit-library__kit-item-cloud-overlay {
2927 height: 100%;
2928 display: flex;
2929 flex-direction: column;
2930 align-items: center;
2931 justify-content: center;
2932 }
2933 .e-kit-library__kit-item-cloud-overlay-import-button {
2934 display: flex;
2935 align-items: center;
2936 justify-content: center;
2937 padding: 8px 22px;
2938 gap: 8px;
2939 }
2940 .e-kit-library__kit-item-cloud-overlay-import-button > i {
2941 font-size: 20px;
2942 font-weight: 600;
2943 }
2944 .e-kit-library__kit-item-cloud-overlay-import-button > span {
2945 font-size: 15px;
2946 }
2947 .e-kit-library__kit-item-cloud-overlay i.eicon-lock {
2948 font-size: 48px;
2949 color: rgba(255, 255, 255, 0.8);
2950 }
2951 .e-kit-library__kit-item--locked {
2952 opacity: 0.6;
2953 }
2954 .e-kit-library__kit-item--locked .eps-card__image {
2955 opacity: 0.7;
2956 }
2957 .e-kit-library__kit-item--locked .eps-card__overlay {
2958 background-color: rgba(0, 0, 0, 0.5);
2959 }
2960
2961 :root {
2962 --e-kit-library-header-back-border: 1px solid var(--e-a-border-color);
2963 --e-kit-library-header-back-color: #69727D;
2964 }
2965
2966 .eps-theme-dark {
2967 --e-kit-library-header-back-border: 1px solid #818A96;
2968 --e-kit-library-header-back-color: #BABFC5;
2969 }
2970
2971 .e-kit-library__header-back {
2972 color: var(--e-kit-library-header-back-color);
2973 padding-inline-end: 1.25rem;
2974 padding-inline-start: 0.3125rem;
2975 display: inline-flex;
2976 justify-content: center;
2977 align-items: center;
2978 height: 100%;
2979 border-inline-end: var(--e-kit-library-header-back-border);
2980 }
2981 .e-kit-library__header-back-container {
2982 flex: 1;
2983 height: 100%;
2984 }
2985 .e-kit-library__header-back .eps-icon {
2986 scale: calc(1 * var(--direction-multiplier)) 1;
2987 }
2988
2989 .e-kit-library__page-loader {
2990 width: 100%;
2991 height: 100%;
2992 display: grid;
2993 place-items: center;
2994 font-size: 1.85rem;
2995 color: #69727D;
2996 }
2997
2998 .eps-search-input {
2999 --eps-search-input-background-color: #D5D8DC;
3000 --eps-search-input-background-color-focus: #ffffff;
3001 --eps-search-input-color: #3f444b;
3002 --eps-search-input-placeholder-color: #69727D;
3003 }
3004
3005 .eps-theme-dark .eps-search-input {
3006 --eps-search-input-background-color: #515962;
3007 --eps-search-input-background-color-focus: #69727D;
3008 --eps-search-input-color: #BABFC5;
3009 --eps-search-input-placeholder-color: #BABFC5;
3010 }
3011
3012 .eps-search-input {
3013 width: 100%;
3014 font-size: 0.9375rem;
3015 padding: 0.625rem 2.75rem;
3016 border: none;
3017 background: var(--eps-search-input-background-color);
3018 outline: none;
3019 color: var(--eps-search-input-color);
3020 line-height: 1;
3021 height: 2.75rem;
3022 }
3023 .eps-search-input--sm {
3024 font-size: 0.8125rem;
3025 padding: 0.5rem 1.875rem;
3026 }
3027 .eps-search-input:focus {
3028 background: var(--eps-search-input-background-color-focus);
3029 }
3030 .eps-search-input::-moz-placeholder {
3031 color: var(--eps-search-input-placeholder-color);
3032 font-style: italic;
3033 }
3034 .eps-search-input::placeholder {
3035 color: var(--eps-search-input-placeholder-color);
3036 font-style: italic;
3037 }
3038 .eps-search-input__container {
3039 position: relative;
3040 }
3041 .eps-search-input__icon {
3042 font-size: 1.25rem;
3043 padding: 0.625rem;
3044 color: #69727D;
3045 position: absolute;
3046 inset-block-start: 0;
3047 inset-inline-start: 0;
3048 height: 100%;
3049 display: flex;
3050 align-items: center;
3051 justify-content: center;
3052 }
3053 .eps-search-input__icon--sm {
3054 font-size: 0.75rem;
3055 }
3056 .eps-search-input__clear-icon {
3057 font-size: 0.875rem;
3058 padding: 0.625rem;
3059 color: #69727D;
3060 position: absolute;
3061 inset-block-start: 0;
3062 inset-inline-end: 0;
3063 height: 100%;
3064 display: flex;
3065 align-items: center;
3066 justify-content: center;
3067 }
3068 .eps-search-input__clear-icon--sm {
3069 font-size: 0.6875rem;
3070 }
3071
3072 :root {
3073 --eps-sort-select-select-background-color: #D5D8DC;
3074 --eps-sort-select-select-color: #3f444b;
3075 --eps-sort-select-button-background-color: #D5D8DC;
3076 --eps-sort-select-button-border: 1px solid var(--e-a-border-color);
3077 }
3078
3079 .eps-theme-dark {
3080 --eps-sort-select-select-background-color: #515962;
3081 --eps-sort-select-select-color: #BABFC5;
3082 --eps-sort-select-button-background-color: #515962;
3083 --eps-sort-select-button-border: 1px solid #1f2124;
3084 }
3085
3086 .eps-sort-select {
3087 width: 100%;
3088 font-size: 0.9375rem;
3089 display: flex;
3090 }
3091 .eps-sort-select__select-wrapper {
3092 flex: 1;
3093 position: relative;
3094 }
3095 .eps-sort-select__select-wrapper::after {
3096 content: "\e8ad";
3097 font-family: eicons;
3098 position: absolute;
3099 inset-inline-end: 0.625rem;
3100 inset-block: 0;
3101 color: #69727D;
3102 display: flex;
3103 align-items: center;
3104 justify-content: center;
3105 pointer-events: none;
3106 }
3107 .eps-sort-select__select {
3108 width: 100%;
3109 padding: 0.625rem 0.625rem;
3110 border: none;
3111 background: var(--eps-sort-select-select-background-color);
3112 outline: none;
3113 color: var(--eps-sort-select-select-color);
3114 line-height: 1;
3115 cursor: pointer;
3116 height: 2.75rem;
3117 -moz-appearance: none;
3118 appearance: none;
3119 -webkit-appearance: none;
3120 border-radius: 0;
3121 }
3122 .eps-sort-select__button {
3123 padding: 0.75rem 0.75rem;
3124 background: var(--eps-sort-select-button-background-color);
3125 border-inline-start: var(--eps-sort-select-button-border);
3126 line-height: 1;
3127 color: #69727D;
3128 }
3129
3130 .e-kit-library__tags-filter {
3131 --e-kit-library-tags-filter-list-search-background-color: #ffffff;
3132 }
3133
3134 .eps-theme-dark .e-kit-library__tags-filter {
3135 --e-kit-library-tags-filter-list-search-background-color: #515962;
3136 }
3137
3138 .e-kit-library__tags-filter {
3139 margin-block-start: 2.75rem;
3140 }
3141 .e-kit-library__tags-filter-list {
3142 margin-block-end: 2.75rem;
3143 }
3144 .e-kit-library__tags-filter-list .eps-collapse__title {
3145 padding-inline-end: 1.875rem;
3146 padding-inline-start: 1.875rem;
3147 text-transform: uppercase;
3148 }
3149 .e-kit-library__tags-filter-list .eps-collapse__content {
3150 margin: 0.3125rem 1.875rem;
3151 }
3152 .e-kit-library__tags-filter-list-container {
3153 max-height: 250px;
3154 overflow: auto;
3155 }
3156 .e-kit-library__tags-filter-list-search {
3157 margin-block-end: 0.625rem;
3158 }
3159 .e-kit-library__tags-filter-list-search .eps-search-input {
3160 background: var(--e-kit-library-tags-filter-list-search-background-color);
3161 }
3162 .e-kit-library__tags-filter-list-item {
3163 padding: 0.625rem 0;
3164 display: flex;
3165 align-items: center;
3166 font-weight: 500;
3167 }
3168 .e-kit-library__tags-filter-list-item input {
3169 margin-inline-end: 0.3125rem;
3170 }
3171
3172 .e-kit-library #eps-app-header-btn-refetch {
3173 padding: 0;
3174 }
3175
3176 .e-kit-library-header-info-modal-container {
3177 margin-block-end: 2.75rem;
3178 }
3179
3180 .e-kit-library__tooltip {
3181 padding: 5px 12px;
3182 color: #ffffff;
3183 background-color: #26292C;
3184 font-size: 10px;
3185 }
3186 .e-kit-library__tooltip:before {
3187 border-block-end-color: #26292C;
3188 }
3189
3190 .e-kit-library__index-layout-container {
3191 flex-grow: 1;
3192 overflow-y: auto;
3193 display: flex;
3194 flex-direction: column;
3195 }
3196 .e-kit-library__index-layout-heading {
3197 padding: 1.875rem 2.75rem;
3198 position: sticky;
3199 inset-block-start: -1px;
3200 width: 100%;
3201 z-index: 2;
3202 background-color: var(--app-background-color);
3203 gap: 1.5rem;
3204 align-items: center;
3205 }
3206 .e-kit-library__index-layout-heading-search, .e-kit-library__index-layout-heading-sort {
3207 min-width: 265px;
3208 }
3209 .e-kit-library__index-layout-heading-search {
3210 flex: 1;
3211 }
3212 .e-kit-library__index-layout-heading-quota {
3213 display: flex;
3214 align-items: center;
3215 justify-content: flex-end;
3216 }
3217 .e-kit-library__index-layout-main {
3218 padding-block-start: 0;
3219 padding-block-end: 1.5rem;
3220 overflow-y: hidden;
3221 height: auto;
3222 flex: 1 0 auto;
3223 display: flex;
3224 flex-direction: column;
3225 justify-content: space-between;
3226 }
3227 .e-kit-library__index-layout-main.e-kit-library__connect-container {
3228 justify-content: center;
3229 align-items: center;
3230 }
3231 .e-kit-library__connect-button {
3232 background-color: var(--e-a-btn-bg-primary);
3233 color: var(--e-a-btn-color);
3234 border-radius: 4px;
3235 padding: 8px;
3236 }
3237 .e-kit-library__connect-button:hover {
3238 opacity: 0.8;
3239 }
3240 .e-kit-library__upgrade-button {
3241 background-color: var(--e-a-color-accent);
3242 color: var(--e-a-color-txt-invert);
3243 border-radius: 4px;
3244 padding: 8px;
3245 }
3246 .e-kit-library__upgrade-button:hover {
3247 opacity: 0.8;
3248 }
3249 .e-kit-library .eicon-library-cloud-connect,
3250 .e-kit-library .eicon-library-subscription-upgrade {
3251 font-size: 65px;
3252 }
3253 .e-kit-library .connect-badge {
3254 color: #C00BB9;
3255 margin-inline-start: 10px;
3256 }
3257 .e-kit-library .upgrade-badge {
3258 color: #93003f;
3259 border: 1px solid #93003f;
3260 border-radius: 10px;
3261 padding: 2px 6px;
3262 margin-inline-start: 10px;
3263 }
3264
3265 .e-kit-library__tags-filter {
3266 --e-kit-library-item-sidebar-header-title-color: #515962;
3267 --e-kit-library-item-sidebar-description-color: #515962;
3268 --e-kit-library-item-information-text-color: #515962;
3269 }
3270
3271 .eps-theme-dark .e-kit-library__tags-filter {
3272 --e-kit-library-item-sidebar-header-title-color: #BABFC5;
3273 --e-kit-library-item-sidebar-description-color: #BABFC5;
3274 --e-kit-library-item-information-text-color: #BABFC5;
3275 }
3276
3277 .e-kit-library__item-sidebar {
3278 padding: 1.5rem 1.875rem;
3279 }
3280 .e-kit-library__item-sidebar-header {
3281 display: flex;
3282 align-items: center;
3283 justify-content: space-between;
3284 }
3285 .e-kit-library__item-sidebar-header-title {
3286 color: var(--e-kit-library-item-sidebar-header-title-color);
3287 margin-block-end: 0;
3288 }
3289 .e-kit-library__item-sidebar-thumbnail {
3290 margin-block-start: 1.5rem;
3291 box-shadow: 0 4px 10px var(--color-box-shadow-color);
3292 }
3293 .e-kit-library__item-sidebar-description {
3294 margin-block-start: 1.5rem;
3295 color: var(--e-kit-library-item-sidebar-description-color);
3296 }
3297 .e-kit-library__item-sidebar-collapse-tags {
3298 margin-block-start: 2.75rem;
3299 }
3300 .e-kit-library__item-sidebar-collapse-info {
3301 margin-block-start: 1.875rem;
3302 }
3303 .e-kit-library__item-sidebar-tags-container {
3304 gap: 0.625rem;
3305 }
3306 .e-kit-library__item-information-text {
3307 font-size: 0.8125rem;
3308 color: var(--e-kit-library-item-information-text-color);
3309 margin-block-end: 0.3125rem;
3310 }
3311
3312 .e-kit-library {
3313 --e-kit-library-content-overview-group-title-color: #515962;
3314 }
3315
3316 .eps-theme-dark .e-kit-library {
3317 --e-kit-library-content-overview-group-title-color: #BABFC5;
3318 }
3319
3320 .e-kit-library__content-overview-group-item {
3321 margin-block-end: 2.75rem;
3322 }
3323 .e-kit-library__content-overview-group-title {
3324 margin-block-end: 1.875rem;
3325 color: var(--e-kit-library-content-overview-group-title-color);
3326 }
3327
3328 .e-kit-library__preview-responsive-controls {
3329 width: auto;
3330 }
3331 .e-kit-library__preview-responsive-controls-item {
3332 margin: 0 0.3125rem;
3333 color: #69727D;
3334 padding: 0.3125rem;
3335 }
3336 .e-kit-library__preview-responsive-controls-item:hover {
3337 background: rgba(37, 99, 235, 0.1);
3338 border-radius: 3px;
3339 transition: all 0.3s;
3340 }
3341 .e-kit-library__preview-responsive-controls-item--active {
3342 color: #2563EB;
3343 }
3344
3345 .e-kit-library__preview-loader {
3346 position: absolute;
3347 inset-block-start: 0;
3348 inset-inline-start: 0;
3349 z-index: 0;
3350 }
3351 .e-kit-library__preview-iframe {
3352 border: none;
3353 transition: all 0.3s;
3354 box-shadow: 0 4px 10px var(--color-box-shadow-color);
3355 }
3356 .e-kit-library__preview-iframe-container {
3357 overflow-y: auto;
3358 position: relative;
3359 z-index: 1;
3360 }
3361
3362 .e-app-collapse {
3363 --e-app-collapse-icon-color: #515962;
3364 }
3365 .e-app-collapse-toggle {
3366 position: relative;
3367 }
3368 .e-app-collapse-toggle--active {
3369 cursor: pointer;
3370 }
3371 .e-app-collapse-toggle__icon {
3372 color: var(--e-app-collapse-icon-color);
3373 display: flex;
3374 align-items: center;
3375 justify-content: center;
3376 font-size: 0.875rem;
3377 position: absolute;
3378 inset-block-start: 50%;
3379 inset-inline-end: var(--e-app-collapse-toggle-icon-spacing);
3380 transform: translateY(-50%);
3381 }
3382 .e-app-collapse-toggle__icon:before {
3383 transition: all 0.2s linear;
3384 }
3385 .e-app-collapse-content {
3386 display: none;
3387 }
3388 .e-app-collapse--opened .e-app-collapse-toggle__icon:before {
3389 transform: rotate(-180deg);
3390 }
3391 .e-app-collapse--opened .e-app-collapse-content {
3392 display: block;
3393 }
3394
3395 [dir=rtl] .e-app-collapse-toggle__icon {
3396 inset-inline-start: var(--e-app-collapse-toggle-icon-spacing);
3397 inset-inline-end: initial;
3398 }
3399
3400 .eps-theme-dark .e-app-collapse {
3401 --e-app-collapse-icon-color: #BABFC5;
3402 }
3403
3404 .e-app-import-plugins {
3405 --e-app-import-plugins-selection-section-heading-color: #515962;
3406 padding-block-end: 1.5rem;
3407 }
3408 .e-app-import-plugins__section {
3409 margin-block-start: 1.875rem;
3410 }
3411 .e-app-import-plugins__section-heading {
3412 color: var(--e-app-import-plugins-selection-section-heading-color);
3413 margin-block-end: 1rem;
3414 }
3415 .e-app-import-plugins__versions-notice {
3416 margin-block-end: 0.75rem;
3417 }
3418
3419 .eps-theme-dark .e-app-import-plugins {
3420 --e-app-import-plugins-selection-section-heading-color: #BABFC5;
3421 }
3422
3423 .eps-table {
3424 --eps-table-body-color: #3f444b;
3425 border-spacing: 0 2px;
3426 table-layout: fixed;
3427 width: 100%;
3428 border: 1px solid var(--e-a-border-color);
3429 border-radius: 0.1875rem;
3430 }
3431 .eps-table__checkboxes-column {
3432 width: 1.875rem;
3433 }
3434 .eps-table__checkbox {
3435 display: flex;
3436 flex-shrink: 0;
3437 }
3438 .eps-table__cell {
3439 padding: 1rem;
3440 }
3441 .eps-table__head .eps-table__cell {
3442 text-align: start;
3443 }
3444 .eps-table__row {
3445 border-block-end: 1px solid var(--e-a-border-color);
3446 }
3447 .eps-table__row:last-child {
3448 border-block-end: none;
3449 }
3450 .eps-table__body .eps-table__cell:first-child {
3451 border-radius: 0.1875rem 0 0 0.1875rem;
3452 }
3453 .eps-table__body .eps-table__cell:last-child {
3454 border-radius: 0 0.1875rem 0.1875rem 0;
3455 }
3456 .eps-table--selection .eps-table__cell:first-child {
3457 padding-inline-end: 0;
3458 }
3459
3460 .eps-theme-dark .eps-table {
3461 --eps-table-body-color: #BABFC5;
3462 }
3463
3464 [dir=rtl] .eps-table__body [dir=rtl] .eps-table__cell:first-child {
3465 border-radius: 0 0.1875rem 0.1875rem 0;
3466 }
3467 [dir=rtl] .eps-table__body [dir=rtl] .eps-table__cell:last-child {
3468 border-radius: 0.1875rem 0 0 0.1875rem;
3469 }
3470
3471 .e-app-import-plugins-pro-banner {
3472 --e-app-import-plugins-pro-banner-heading-color: #3f444b;
3473 --e-app-import-plugins-pro-banner-description-color: #515962;
3474 margin-block-end: 1.875rem;
3475 }
3476 .e-app-import-plugins-pro-banner__heading {
3477 color: var(--e-app-import-plugins-pro-banner-heading-color);
3478 margin-block-end: 0.625rem;
3479 }
3480 .e-app-import-plugins-pro-banner__description {
3481 color: var(--e-app-import-plugins-pro-banner-description-color);
3482 margin-block-end: 0;
3483 }
3484
3485 .eps-theme-dark .e-app-import-plugins-pro-banner {
3486 --e-app-import-plugins-pro-banner-heading-color: #9DA5AE;
3487 --e-app-import-plugins-pro-banner-description-color: #BABFC5;
3488 }
3489
3490 .e-app-export-plugins {
3491 padding-block-end: 1.25rem;
3492 }
3493
3494 .e-app-import-content {
3495 padding-block-end: 1.25rem;
3496 }
3497 .e-app-import-content__plugins-notice {
3498 margin-block-end: 1.25rem;
3499 }
3500
3501 .e-app-import-plugins-activation__installing-plugins {
3502 padding: 0.625rem 0;
3503 }
3504 .e-app-import-plugins-activation__plugin-name {
3505 margin-inline-start: 0.5rem;
3506 }
3507 .e-app-import-plugins-activation__plugin-status-item {
3508 margin-block-end: 0.75rem;
3509 }
3510
3511 .e-app-import-export-plugins-table__cell-content {
3512 margin-block-end: 0;
3513 text-transform: capitalize;
3514 }
3515
3516 .e-app-import-export-loader {
3517 --e-app-import-export-loader-color: #818A96;
3518 color: var(--e-app-import-export-loader-color);
3519 font-size: 50px;
3520 }
3521 .e-app-import-export-loader.eicon-loading {
3522 font-size: 1.85rem;
3523 }
3524 .e-app-import-export-loader--absolute-center {
3525 position: absolute;
3526 inset-block-start: 50%;
3527 inset-inline-start: 50%;
3528 transform: translateX(-50%) translateY(-50%);
3529 }
3530
3531 .eps-theme-dark .e-app-import-export-loader {
3532 --e-app-import-export-loader-color: #818A96;
3533 }
3534
3535 .e-app-import-export-message-banner {
3536 --e-app-import-export-message-banner-heading-color: #3f444b;
3537 --e-app-import-export-message-banner-description-color: #515962;
3538 margin-block-end: 1.875rem;
3539 }
3540 .e-app-import-export-message-banner__heading {
3541 color: var(--e-app-import-export-message-banner-heading-color);
3542 margin-block-end: 0.625rem;
3543 }
3544 .e-app-import-export-message-banner__description {
3545 color: var(--e-app-import-export-message-banner-description-color);
3546 margin-block-end: 0;
3547 }
3548
3549 .eps-theme-dark .e-app-import-export-message-banner {
3550 --e-app-import-export-message-banner-heading-color: #9DA5AE;
3551 --e-app-import-export-message-banner-description-color: #BABFC5;
3552 }
3553
3554 .e-app-import-connect-pro-notice {
3555 margin-block-end: 1.25rem;
3556 }
3557
3558 .e-app-import-failed-plugins-notice {
3559 margin-block-end: 1.25rem;
3560 }
3561
3562 .e-app-export-actions-container {
3563 display: flex;
3564 gap: 15px;
3565 width: 100%;
3566 justify-content: flex-end;
3567 }
3568
3569 .e-onboarding {
3570 font-family: "DM Sans", "Roboto", sans-serif;
3571 color-scheme: light;
3572 }
3573 .e-onboarding .eps-app__main {
3574 justify-content: center;
3575 overflow-y: auto;
3576 }
3577 .e-onboarding__content {
3578 max-width: 1135px;
3579 padding: 2.75rem;
3580 margin: initial;
3581 overflow-y: initial;
3582 }
3583 .e-onboarding__checkbox-label {
3584 display: flex;
3585 line-height: 18px;
3586 margin-block-end: 27px;
3587 }
3588 .e-onboarding__checkbox-input {
3589 margin-inline-end: 14px;
3590 width: 16px;
3591 height: 16px;
3592 border-color: #69727D;
3593 border-radius: 2px;
3594 }
3595 .e-onboarding__checkbox-input:checked {
3596 background-color: #525861;
3597 }
3598 .e-onboarding__checkbox-input:checked::after {
3599 margin-block-end: 15%;
3600 width: 6px;
3601 height: 9px;
3602 border-width: 0 2px 2px 0;
3603 }
3604 .e-onboarding__feature-list {
3605 margin-block-end: 40px;
3606 }
3607 .e-onboarding__text-input {
3608 font-size: 14px;
3609 width: 325px;
3610 padding: 12px 16px;
3611 color: #69727D;
3612 border: 1px solid #9EA5AD;
3613 }
3614 .e-onboarding__text-input:focus-visible {
3615 outline: initial;
3616 border: 1px solid #3A3F45;
3617 }
3618 .e-onboarding__text-input::-moz-placeholder {
3619 color: #C2C7CC;
3620 }
3621 .e-onboarding__text-input::placeholder {
3622 color: #C2C7CC;
3623 }
3624 .e-onboarding__footnote {
3625 margin-block-start: 24px;
3626 width: 325px;
3627 text-align: center;
3628 }
3629 .e-onboarding__footnote a {
3630 text-decoration: underline;
3631 color: #3A3F45;
3632 }
3633
3634 #e-app ~ #__wp-uploader-id-2 .media-modal {
3635 max-width: 1024px;
3636 max-height: 768px;
3637 margin: auto;
3638 }
3639
3640 .e-onboarding__page-content {
3641 margin-block-end: 70px;
3642 }
3643 .e-onboarding__page-content-start {
3644 max-width: 675px;
3645 text-align: start;
3646 flex-basis: 555px;
3647 align-self: start;
3648 }
3649 .e-onboarding__page-content-end {
3650 min-width: 440px;
3651 max-width: 540px;
3652 }
3653 .e-onboarding__page-content-end img {
3654 width: 100%;
3655 }
3656 .e-onboarding__page-content-section-title {
3657 font-family: "DM Serif Display", serif;
3658 font-size: 36px;
3659 font-weight: 700;
3660 color: #0C0D0E;
3661 }
3662 .e-onboarding__page-content-section-text {
3663 font-size: 18px;
3664 color: #3A3F45;
3665 }
3666
3667 .e-onboarding__header-logo .eps-app__logo {
3668 background-color: #0C0D0E;
3669 color: #ffffff;
3670 width: 1.3rem;
3671 height: 1.3rem;
3672 line-height: 1.3rem;
3673 font-size: 0.48rem;
3674 }
3675 .e-onboarding__header-logo .eps-app__logo:not(:last-child) {
3676 margin-inline-end: 7px;
3677 }
3678 .e-onboarding__header-logo img {
3679 width: 104px;
3680 }
3681 .e-onboarding__header .eps-app__header-btn {
3682 display: flex;
3683 align-items: center;
3684 font-size: 13px;
3685 }
3686 .e-onboarding__header .eps-app__header-btn .eps-icon:not(:last-child) {
3687 margin-inline-end: 7px;
3688 }
3689 .e-onboarding__header .eps-button {
3690 color: #0C0D0E;
3691 }
3692 .e-onboarding__header .eps-button__go-pro-btn {
3693 background-color: #93003f;
3694 color: #ffffff;
3695 padding: 4px 8px;
3696 border-radius: 4px;
3697 font-weight: 700;
3698 font-size: 12px;
3699 transition: 0.5s;
3700 }
3701 .e-onboarding__header .eps-button__go-pro-btn:hover {
3702 background: rgb(198, 0, 84.8571428571);
3703 }
3704
3705 .e-onboarding__go-pro {
3706 width: 288px;
3707 font-size: 12px;
3708 background-color: #ffffff;
3709 }
3710 .e-onboarding__go-pro-title {
3711 font-size: 18px;
3712 font-weight: 700;
3713 color: #93003f;
3714 }
3715 .e-onboarding__go-pro-cta {
3716 display: inline-block;
3717 color: #93003f;
3718 padding: 9px;
3719 border: 1px solid #93003f;
3720 }
3721 .e-onboarding__go-pro-cta.e-onboarding__button {
3722 font-size: 14px;
3723 }
3724 .e-onboarding__go-pro-paragraph:not(:last-child) {
3725 margin-block-end: 20px;
3726 }
3727 .e-onboarding__go-pro-already-have {
3728 text-decoration: underline;
3729 }
3730
3731 .e-onboarding__progress-bar {
3732 display: flex;
3733 justify-content: center;
3734 margin-block-end: 125px;
3735 }
3736 .e-onboarding__progress-bar-item {
3737 display: flex;
3738 align-items: center;
3739 color: #69727D;
3740 font-size: 0.75rem;
3741 }
3742 .e-onboarding__progress-bar-item-icon {
3743 display: inline-block;
3744 font-family: "DM Serif Display", serif;
3745 text-align: center;
3746 width: 1.1rem;
3747 height: 1.1rem;
3748 line-height: 1rem;
3749 font-size: 0.75rem;
3750 font-weight: bold;
3751 border-radius: 50%;
3752 border: 1px solid #69727D;
3753 margin-inline-end: 8px;
3754 flex-shrink: 0;
3755 }
3756 .e-onboarding__progress-bar-item:not(:last-child) {
3757 margin-inline-end: 22px;
3758 }
3759 .e-onboarding__progress-bar-item:not(:last-child):after {
3760 font-family: "eicons";
3761 margin-inline-start: 22px;
3762 content: "\e89e";
3763 }
3764 .e-onboarding__progress-bar-item--active {
3765 color: #D004D4;
3766 }
3767 .e-onboarding__progress-bar-item--active .e-onboarding__progress-bar-item-icon, .e-onboarding__progress-bar-item--completed .e-onboarding__progress-bar-item-icon {
3768 color: #ffffff;
3769 border-color: #D004D4;
3770 background-color: #D004D4;
3771 }
3772 .e-onboarding__progress-bar-item--skipped, .e-onboarding__progress-bar-item--completed {
3773 cursor: pointer;
3774 }
3775 .e-onboarding__progress-bar-item--skipped .e-onboarding__progress-bar-item-icon {
3776 color: #ffffff;
3777 background-color: #69727D;
3778 }
3779
3780 .e-onboarding__button {
3781 font-size: 18px;
3782 cursor: pointer;
3783 transition: var(--e-a-transition-hover);
3784 }
3785 .e-onboarding__button-action {
3786 color: var(--e-a-btn-color);
3787 background-color: var(--e-a-btn-bg-primary);
3788 min-width: 325px;
3789 padding: 15px 30px;
3790 text-align: center;
3791 }
3792 .e-onboarding__button-action:hover {
3793 background-color: var(--e-a-btn-bg-primary-hover);
3794 }
3795 .e-onboarding__button-skip {
3796 padding: 8px 16px;
3797 color: #515962;
3798 }
3799 .e-onboarding__button-skip:hover {
3800 background-color: #F9FAFA;
3801 }
3802 .e-onboarding__button-skip--disabled {
3803 pointer-events: none;
3804 cursor: none;
3805 color: #D5D8DC;
3806 }
3807 .e-onboarding__button--disabled {
3808 pointer-events: none;
3809 background-color: #D5D8DC;
3810 color: #9EA5AD;
3811 }
3812 .e-onboarding__button--disabled:hover {
3813 cursor: progress;
3814 }
3815 .e-onboarding__button--processing {
3816 pointer-events: none;
3817 filter: brightness(90%);
3818 }
3819
3820 .e-onboarding__card {
3821 border: 1px solid #3A3F45;
3822 border-radius: 8px;
3823 padding: 40px 40px;
3824 cursor: pointer;
3825 flex-grow: 1;
3826 display: flex;
3827 flex-direction: column;
3828 align-items: center;
3829 }
3830 .e-onboarding__card-image, .e-onboarding__card-text {
3831 width: 345px;
3832 }
3833 .e-onboarding__card-image {
3834 margin-block-end: 44px;
3835 }
3836 .e-onboarding__card-text {
3837 font-size: 20px;
3838 font-weight: 700;
3839 text-align: center;
3840 color: #0C0D0E;
3841 }
3842 .e-onboarding__card:hover {
3843 box-shadow: 4px 4px 0 0 #000000;
3844 }
3845 .e-onboarding__card:active {
3846 box-shadow: initial;
3847 }
3848
3849 .e-onboarding__checklist {
3850 padding-inline-start: 0;
3851 }
3852 .e-onboarding__checklist-item {
3853 display: flex;
3854 align-items: center;
3855 font-size: 12px;
3856 margin-block-end: 12px;
3857 }
3858 .e-onboarding__checklist-item .eicon-check-circle {
3859 margin-inline-end: 9px;
3860 font-size: 16px;
3861 font-weight: 600;
3862 }
3863
3864 .e-onboarding__notice {
3865 display: inline-block;
3866 padding: 12px 14px;
3867 margin-block-end: 16px;
3868 color: #3A3F45;
3869 }
3870 .e-onboarding__notice--error {
3871 background-color: #FDE8EC;
3872 }
3873 .e-onboarding__notice--error i {
3874 font-size: 16px;
3875 color: #B92136;
3876 }
3877 .e-onboarding__notice--success {
3878 background-color: #ECF9F2;
3879 }
3880 .e-onboarding__notice--success i {
3881 color: #117740;
3882 }
3883 .e-onboarding__notice i {
3884 margin-inline-end: 14px;
3885 }
3886 .e-onboarding__notice-empty-spacer {
3887 height: 61px;
3888 }
3889
3890 .e-onboarding__page-account .e-onboarding__checkbox-label {
3891 margin-block-start: 50px;
3892 }
3893
3894 .e-onboarding {
3895 --theme-card-primary-color: #D004D4;
3896 --theme-card-primary-shadow: 0 6px 16px rgba(208, 4, 212, 0.25);
3897 --theme-card-hover-transform: translateY(-2px);
3898 }
3899 .e-onboarding__action-button-text {
3900 margin-inline-start: 10px;
3901 }
3902 .e-onboarding__page-content-theme-variant-b .e-onboarding__page-content-section-title {
3903 line-height: 40px;
3904 }
3905 .e-onboarding__page-content-theme-variant-b .e-onboarding__theme-selection-description,
3906 .e-onboarding__page-content-theme-variant-b .e-onboarding__theme-selection-subtitle {
3907 font-size: 18px;
3908 font-weight: 400;
3909 margin-block-end: 8px;
3910 text-align: center;
3911 color: #3A3F45;
3912 }
3913 .e-onboarding__page-content-theme-variant-b .e-onboarding__theme-selection-subtitle {
3914 font-weight: 600;
3915 }
3916 .e-onboarding__page-content-theme-variant-b .e-onboarding__theme-cards {
3917 display: flex;
3918 gap: 16px;
3919 justify-content: center;
3920 flex-wrap: wrap;
3921 margin-block-start: 40px;
3922 }
3923 .e-onboarding__page-content-theme-variant-b .e-onboarding__theme-card {
3924 background: #ffffff;
3925 border: 1px solid #A9A9A9;
3926 border-radius: 8px;
3927 padding: 34px 24px 180px;
3928 max-width: 325px;
3929 min-width: 280px;
3930 cursor: pointer;
3931 transition: all 0.3s ease;
3932 display: flex;
3933 flex-direction: column;
3934 position: relative;
3935 overflow: hidden;
3936 }
3937 .e-onboarding__page-content-theme-variant-b .e-onboarding__theme-card:hover {
3938 transform: var(--theme-card-hover-transform);
3939 border-color: var(--theme-card-primary-color);
3940 box-shadow: var(--theme-card-primary-shadow);
3941 }
3942 .e-onboarding__page-content-theme-variant-b .e-onboarding__theme-card--loading {
3943 border-color: var(--theme-card-primary-color);
3944 box-shadow: var(--theme-card-primary-shadow);
3945 transform: var(--theme-card-hover-transform);
3946 pointer-events: none;
3947 }
3948 .e-onboarding__page-content-theme-variant-b .e-onboarding__theme-card--loading::after {
3949 content: "";
3950 position: absolute;
3951 inset-block-start: 16px;
3952 inset-inline-end: 16px;
3953 width: 24px;
3954 height: 24px;
3955 background: var(--theme-card-primary-color);
3956 border-radius: 50%;
3957 display: flex;
3958 align-items: center;
3959 justify-content: center;
3960 }
3961 .e-onboarding__page-content-theme-variant-b .e-onboarding__theme-card--loading::before {
3962 content: "";
3963 position: absolute;
3964 inset-block-start: 20px;
3965 inset-inline-end: 20px;
3966 width: 16px;
3967 height: 16px;
3968 border: 2px solid white;
3969 border-top: 2px solid transparent;
3970 border-radius: 50%;
3971 z-index: 1;
3972 animation: e-onboarding-spinner 1s linear infinite;
3973 }
3974 .e-onboarding__page-content-theme-variant-b .e-onboarding__theme-card-illustration {
3975 display: flex;
3976 justify-content: center;
3977 align-items: center;
3978 margin-block-end: 20px;
3979 min-height: 153px;
3980 border-radius: 4px;
3981 position: absolute;
3982 inset-block-end: -40px;
3983 inset-inline-start: 35px;
3984 width: 100%;
3985 }
3986 .e-onboarding__page-content-theme-variant-b .e-onboarding__theme-card-illustration--hello-biz {
3987 inset-inline-start: 0px;
3988 }
3989 .e-onboarding__page-content-theme-variant-b .e-onboarding__theme-card-illustration svg {
3990 max-width: 100%;
3991 height: auto;
3992 }
3993 .e-onboarding__page-content-theme-variant-b .e-onboarding__theme-card-content {
3994 text-align: center;
3995 }
3996 .e-onboarding__page-content-theme-variant-b .e-onboarding__theme-card-title {
3997 font-size: 20px;
3998 font-weight: 700;
3999 margin-block-end: 8px;
4000 color: #495157;
4001 }
4002 .e-onboarding__page-content-theme-variant-b .e-onboarding__theme-card-description {
4003 font-size: 16px;
4004 font-weight: 400;
4005 color: #6C7781;
4006 line-height: 1.5;
4007 margin: 0;
4008 }
4009 .e-onboarding__page-content:has(.e-onboarding__page-content-theme-variant-b) {
4010 flex-direction: column;
4011 margin-block-end: 30px;
4012 }
4013 .e-onboarding__page-content-start:has(.e-onboarding__page-content-theme-variant-b) {
4014 align-self: center;
4015 text-align: center;
4016 flex-basis: initial;
4017 }
4018 .e-onboarding__content:has(.e-onboarding__page-content-theme-variant-b) .e-onboarding__button.e-onboarding__button-action,
4019 .e-onboarding__content:has(.e-onboarding__page-content-theme-variant-b) .e-onboarding__footnote {
4020 display: none;
4021 }
4022 .e-onboarding__content:has(.e-onboarding__page-content-theme-variant-b) .e-onboarding__footer {
4023 justify-content: flex-end;
4024 padding-block-end: 40px;
4025 }
4026
4027 @keyframes e-onboarding-spinner {
4028 0% {
4029 transform: rotate(0deg);
4030 }
4031 100% {
4032 transform: rotate(360deg);
4033 }
4034 }
4035 .e-onboarding__site-name-input {
4036 margin-block-start: 80px;
4037 }
4038
4039 .e-onboarding__page-siteLogo .e-app-upload-file__button {
4040 color: var(--e-a-color-primary-bold);
4041 border-color: var(--e-a-color-primary-bold);
4042 }
4043 .e-onboarding__page-siteLogo .e-app-upload-file__button:hover {
4044 background-color: #FAE8FF;
4045 }
4046 .e-onboarding__drop-zone {
4047 margin-block-start: 3rem;
4048 }
4049 .e-onboarding .eps-display-3 {
4050 font-size: 16px;
4051 margin-block-end: 0.5rem;
4052 }
4053 .e-onboarding .e-app-upload-file__button {
4054 max-width: 198px;
4055 margin: 0 auto;
4056 }
4057 .e-onboarding .e-app-drop-zone__secondary-text {
4058 font-size: 14px;
4059 }
4060 .e-onboarding__logo-container {
4061 position: relative;
4062 margin-block-start: 3rem;
4063 min-height: 120px;
4064 width: -moz-fit-content;
4065 width: fit-content;
4066 display: flex;
4067 align-items: center;
4068 justify-content: center;
4069 min-width: 220px;
4070 border: 1px solid #BABFC5;
4071 }
4072 .e-onboarding__logo-container img {
4073 height: auto;
4074 max-height: 100%;
4075 width: auto;
4076 }
4077 .e-onboarding__logo-remove {
4078 position: absolute;
4079 inset-block-start: 5px;
4080 inset-inline-end: 0;
4081 }
4082 .e-onboarding__logo-remove i {
4083 font-size: 16px;
4084 width: 15px;
4085 }
4086 .e-onboarding__logo-remove:hover {
4087 cursor: pointer;
4088 }
4089 .e-onboarding__is-uploading {
4090 visibility: hidden;
4091 }
4092
4093 .e-onboarding__cards-grid.e-onboarding__page-content {
4094 margin-block-start: 48px;
4095 margin-block-end: 48px;
4096 }
4097 .e-onboarding__cards-grid .e-onboarding__card {
4098 max-width: 555px;
4099 }
4100 .e-onboarding__cards-grid .e-onboarding__card:not(:last-child) {
4101 margin-inline-end: 20px;
4102 }
4103 .e-onboarding__page-goodToGo .e-onboarding__page-content-section-title,
4104 .e-onboarding__page-goodToGo .e-onboarding__page-content-section-text {
4105 text-align: center;
4106 }
4107 .e-onboarding__page-goodToGo .e-onboarding__cards-grid {
4108 justify-content: center;
4109 flex-wrap: nowrap;
4110 }
4111 .e-onboarding__page-goodToGo .e-onboarding__card {
4112 max-width: 388px;
4113 }
4114 .e-onboarding__content:has(.e-onboarding__cards-grid--good-to-go-variant-b) .e-onboarding__page-content-section-title {
4115 max-width: 440px;
4116 justify-self: center;
4117 }
4118 .e-onboarding__good-to-go-footer {
4119 justify-content: end;
4120 }
4121
4122 .e-onboarding__upload-pro {
4123 flex-direction: row;
4124 justify-content: center;
4125 font-family: "DM Sans", "Roboto", sans-serif;
4126 text-align: center;
4127 }
4128 .e-onboarding__upload-pro .eps-app__content {
4129 overflow-y: hidden;
4130 max-width: 1113px;
4131 padding: 30px;
4132 }
4133 .e-onboarding__upload-pro-drop-zone {
4134 margin-block-end: 24px;
4135 }
4136 .e-onboarding__upload-pro-drop-zone h1 {
4137 font-family: "Source Serif Pro", "Roboto", sans-serif;
4138 }
4139 .e-onboarding__upload-pro-drop-zone .e-app-drag-drop {
4140 padding: 48px;
4141 }
4142 .e-onboarding__upload-pro-drop-zone .eps-display-3,
4143 .e-onboarding__upload-pro-drop-zone .e-app-drop-zone__text,
4144 .e-onboarding__upload-pro-drop-zone .e-app-drop-zone__secondary-text {
4145 margin-block-end: 12px;
4146 }
4147 .e-onboarding__upload-pro-drop-zone .e-app-upload-file__button {
4148 background-color: #040080;
4149 color: #46F2B6;
4150 padding: 14px 40px;
4151 border-color: #040080;
4152 }
4153 .e-onboarding__upload-pro-get-file {
4154 font-size: 12px;
4155 margin-block-start: 24px;
4156 }
4157 .e-onboarding__upload-pro-get-file a {
4158 text-decoration: underline;
4159 }
4160 .e-onboarding__upload-pro .e-onboarding__notice {
4161 margin-block-end: 0;
4162 }
4163
4164 .e-onboarding__choose-features-section {
4165 width: 100%;
4166 display: flex;
4167 flex-wrap: wrap;
4168 gap: 10px 20px;
4169 margin-block: 20px;
4170 }
4171 .e-onboarding__choose-features-section__label {
4172 display: flex;
4173 align-items: center;
4174 font-size: 14px;
4175 font-weight: 400;
4176 line-height: 24px;
4177 letter-spacing: -0.01em;
4178 -webkit-user-select: none;
4179 -moz-user-select: none;
4180 user-select: none;
4181 border: 1px solid #D5D8DC;
4182 padding: 12px 16px;
4183 width: 267px;
4184 }
4185 .e-onboarding__choose-features-section__checkbox {
4186 justify-self: end;
4187 margin-inline-end: 8px;
4188 width: 16px;
4189 height: 16px;
4190 }
4191 .e-onboarding__choose-features-section__message {
4192 font-size: 18px;
4193 font-weight: 400;
4194 line-height: 27px;
4195 letter-spacing: -0.01em;
4196 padding-inline-end: 120px;
4197 min-height: 55px;
4198 margin-block-end: 20px;
4199 }
4200 .e-onboarding__page-chooseFeatures .e-onboarding__page-content {
4201 margin-block-end: 0;
4202 }
4203
4204 .e-kit-library__quota-bar {
4205 display: flex;
4206 align-items: center;
4207 }
4208 .e-kit-library__quota-bar__container {
4209 display: flex;
4210 flex-direction: column;
4211 gap: 8px;
4212 min-width: 230px;
4213 }
4214 .e-kit-library__quota-bar__header {
4215 display: flex;
4216 justify-content: space-between;
4217 align-items: center;
4218 }
4219 .e-kit-library__quota-bar__label {
4220 color: #0C0D0E;
4221 font-weight: 400;
4222 white-space: nowrap;
4223 font-size: 12px;
4224 }
4225 .e-kit-library__quota-bar__progress-container {
4226 width: 100%;
4227 height: 4px;
4228 overflow: hidden;
4229 position: relative;
4230 }
4231 .e-kit-library__quota-bar__progress-container--empty {
4232 background-color: #F0ABFC;
4233 }
4234 .e-kit-library__quota-bar__progress-container--normal {
4235 background-color: #F0ABFC;
4236 }
4237 .e-kit-library__quota-bar__progress-container--warning {
4238 background-color: rgb(251.0236220472, 216.4291338583, 157.9763779528);
4239 }
4240 .e-kit-library__quota-bar__progress-container--alert {
4241 background: #93003f;
4242 }
4243 .e-kit-library__quota-bar__progress-bar {
4244 height: 100%;
4245 transition: width 0.3s ease;
4246 }
4247 .e-kit-library__quota-bar__progress-bar--empty {
4248 background: transparent;
4249 }
4250 .e-kit-library__quota-bar__progress-bar--normal {
4251 background: #D004D4;
4252 }
4253 .e-kit-library__quota-bar__progress-bar--warning {
4254 background: #F59E0B;
4255 }
4256 .e-kit-library__quota-bar__progress-bar--alert {
4257 background: #93003f;
4258 }
4259 .e-kit-library__quota-bar__upgrade-message {
4260 display: flex;
4261 align-items: center;
4262 gap: 4px;
4263 }
4264 .e-kit-library__quota-bar__upgrade-link {
4265 color: #93003f;
4266 text-decoration: underline;
4267 cursor: pointer;
4268 font-size: 12px;
4269 font-weight: 400;
4270 }
4271 .e-kit-library__quota-bar__upgrade-link:hover {
4272 opacity: 0.8;
4273 }
4274 .e-kit-library__quota-bar__count {
4275 color: #69727D;
4276 white-space: nowrap;
4277 font-size: 12px;
4278 }
4279
4280 .e-kit-library__quota-notification {
4281 display: flex;
4282 align-items: flex-start;
4283 justify-content: space-between;
4284 padding: 16px 20px;
4285 margin: 0 44px 30px;
4286 border-radius: 4px;
4287 }
4288 .e-kit-library__quota-notification--warning {
4289 background-color: #FBF1E6;
4290 color: #3f444b;
4291 }
4292 .e-kit-library__quota-notification--alert {
4293 background-color: #FDECEC;
4294 color: #3f444b;
4295 }
4296 .e-kit-library__quota-notification__content {
4297 display: flex;
4298 align-items: flex-start;
4299 gap: 12px;
4300 flex: 1;
4301 }
4302 .e-kit-library__quota-notification__icon {
4303 font-size: 18px;
4304 margin-top: 1px;
4305 flex-shrink: 0;
4306 }
4307 .e-kit-library__quota-notification__icon.eicon-warning-full {
4308 color: #F59E0B;
4309 }
4310 .e-kit-library__quota-notification__icon.eicon-alert {
4311 color: #DC2626;
4312 }
4313 .e-kit-library__quota-notification__message {
4314 flex: 1;
4315 line-height: 1.5;
4316 font-size: 13px;
4317 }
4318 .e-kit-library__quota-notification__message span {
4319 font-size: 13px;
4320 }
4321 .e-kit-library__quota-notification__action-link {
4322 color: inherit;
4323 text-decoration: underline;
4324 font-size: 13px;
4325 font-weight: 500;
4326 }
4327 .e-kit-library__quota-notification__action-link:hover {
4328 opacity: 0.8;
4329 }
4330 .e-kit-library__quota-notification__dismiss {
4331 background: none;
4332 border: none;
4333 cursor: pointer;
4334 padding: 0;
4335 margin-inline-start: 12px;
4336 color: inherit;
4337 opacity: 0.7;
4338 flex-shrink: 0;
4339 }
4340 .e-kit-library__quota-notification__dismiss:hover {
4341 opacity: 1;
4342 }
4343 .e-kit-library__quota-notification__dismiss i {
4344 font-size: 14px;
4345 }
4346 /*# sourceMappingURL=app-rtl.css.map */