PluginProbe
Elementor Website Builder – more than just a page builder / 4.1.4
Elementor Website Builder – more than just a page builder v4.1.4
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 4.1.4, at assets/css/app-rtl.css

3,718 lines 91.2 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 :root {
3 --color-box-shadow-color: rgba(0, 0, 0, 0.05);
4 }
5
6 .eps-theme-dark {
7 --color-box-shadow-color: rgba(0, 0, 0, 0.1);
8 }
9
10 .sr-only {
11 position: absolute;
12 width: 1px;
13 height: 1px;
14 padding: 0;
15 margin: -1px;
16 overflow: hidden;
17 clip: rect(0, 0, 0, 0);
18 white-space: nowrap;
19 border: 0;
20 }
21
22 @media screen and (min-width: 480px) {
23 .text-start-sm {
24 text-align: start;
25 }
26 }
27 @media screen and (min-width: 480px) {
28 .text-center-sm {
29 text-align: center;
30 }
31 }
32 @media screen and (min-width: 480px) {
33 .text-end-sm {
34 text-align: end;
35 }
36 }
37 @media screen and (min-width: 768px) {
38 .text-start-md {
39 text-align: start;
40 }
41 }
42 @media screen and (min-width: 768px) {
43 .text-center-md {
44 text-align: center;
45 }
46 }
47 @media screen and (min-width: 768px) {
48 .text-end-md {
49 text-align: end;
50 }
51 }
52 @media screen and (min-width: 1025px) {
53 .text-start-lg {
54 text-align: start;
55 }
56 }
57 @media screen and (min-width: 1025px) {
58 .text-center-lg {
59 text-align: center;
60 }
61 }
62 @media screen and (min-width: 1025px) {
63 .text-end-lg {
64 text-align: end;
65 }
66 }
67 @media screen and (min-width: 1440px) {
68 .text-start-xl {
69 text-align: start;
70 }
71 }
72 @media screen and (min-width: 1440px) {
73 .text-center-xl {
74 text-align: center;
75 }
76 }
77 @media screen and (min-width: 1440px) {
78 .text-end-xl {
79 text-align: end;
80 }
81 }
82 @media screen and (min-width: 1600px) {
83 .text-start-xxl {
84 text-align: start;
85 }
86 }
87 @media screen and (min-width: 1600px) {
88 .text-center-xxl {
89 text-align: center;
90 }
91 }
92 @media screen and (min-width: 1600px) {
93 .text-end-xxl {
94 text-align: end;
95 }
96 }
97 @keyframes eps-animation-pop {
98 from {
99 transform: scale(0.75);
100 opacity: 0;
101 }
102 to {
103 transform: scale(1);
104 opacity: 1;
105 }
106 }
107 /**
108 TODO: The molecules, atoms and such generics should be at top level, so the styles will be not depended on the order.
109 EG: '../../../app/assets/styles/generic'.
110 Auto-import is designed for CSS that not dependent on the loading order.
111 */
112 .eps-button {
113 display: inline-flex;
114 --button-line-height: 16px;
115 --button-padding-y: 0.5em;
116 --button-padding-x: 1.5em;
117 --button-primary-background-color: #F3BAFD;
118 --button-primary-hover-background-color: #F5D0FE;
119 --button-primary-active-background-color: #F3BAFD;
120 --button-primary-color: #0C0D0E;
121 --button-secondary-background-color: #69727D;
122 --button-secondary-hover-background-color: rgb(81.7173913043, 88.7217391304, 97.2826086957);
123 --button-secondary-active-background-color: rgb(58.4347826087, 63.4434782609, 69.5652173913);
124 --button-secondary-color: #ffffff;
125 --button-danger-background-color: #DC2626;
126 --button-danger-hover-background-color: rgb(178.25, 28.75, 28.75);
127 --button-danger-active-background-color: rgb(134.3333333333, 21.6666666667, 21.6666666667);
128 --button-danger-color: #ffffff;
129 --button-cta-background-color: #93003f;
130 --button-cta-hover-background-color: rgb(96, 0, 41.1428571429);
131 --button-cta-active-background-color: rgb(45, 0, 19.2857142857);
132 --button-cta-color: #ffffff;
133 --button-brand-background-color: #93003f;
134 --button-brand-hover-background-color: rgb(96, 0, 41.1428571429);
135 --button-brand-active-background-color: rgb(45, 0, 19.2857142857);
136 --button-brand-color: #ffffff;
137 --button-link-background-color: #515962;
138 --button-link-hover-background-color: rgb(57.9217877095, 63.6424581006, 70.0782122905);
139 --button-link-active-background-color: rgb(34.843575419, 38.2849162011, 42.156424581);
140 --button-link-color: #ffffff;
141 --button-disabled-background-color: #D5D8DC;
142 --button-disabled-hover-background-color: rgb(185.1818181818, 190.1688311688, 196.8181818182);
143 --button-disabled-active-background-color: rgb(157.3636363636, 164.3376623377, 173.6363636364);
144 --button-disabled-color: #ffffff;
145 color: var(--button-background-color, currentColor);
146 font-size: var(--button-font-size, inherit);
147 font-weight: 500;
148 line-height: var(--button-line-height);
149 transition: var(--e-a-transition-hover);
150 cursor: pointer;
151 }
152 .eps-button:active {
153 --button-background-color: var(--button-active-background-color, transparent);
154 }
155 .eps-button:hover {
156 --button-background-color: var(--button-hover-background-color);
157 }
158 .eps-theme-dark .eps-button {
159 --button-primary-background-color: #F3BAFD;
160 --button-primary-color: #0C0D0E;
161 --button-primary-hover-background-color: #EB8EFB;
162 --button-primary-active-background-color: #F3BAFD;
163 --button-secondary-background-color: #BABFC5;
164 --button-secondary-color: #fff;
165 --button-secondary-hover-background-color: rgb(158.2913385827, 165.2992125984, 173.7086614173);
166 --button-secondary-active-background-color: rgb(130.5826771654, 139.5984251969, 150.4173228346);
167 --button-cta-background-color: #93003f;
168 --button-cta-hover-background-color: rgb(96, 0, 41.1428571429);
169 --button-cta-active-background-color: rgb(45, 0, 19.2857142857);
170 --button-cta-color: #fff;
171 --button-brand-hover-background-color: rgb(96, 0, 41.1428571429);
172 --button-brand-active-background-color: rgb(45, 0, 19.2857142857);
173 --button-brand-color: #fff;
174 --button-brand-background-color: #93003f;
175 --button-link-background-color: #515962;
176 --button-link-hover-background-color: rgb(57.9217877095, 63.6424581006, 70.0782122905);
177 --button-link-active-background-color: rgb(34.843575419, 38.2849162011, 42.156424581);
178 --button-link-color: #ffffff;
179 --button-disabled-background-color: #69727D;
180 --button-disabled-hover-background-color: rgb(81.7173913043, 88.7217391304, 97.2826086957);
181 --button-disabled-active-background-color: rgb(58.4347826087, 63.4434782609, 69.5652173913);
182 --button-disabled-color: #fff;
183 }
184 .eps-button--contained {
185 color: var(--button-color);
186 padding: var(--button-padding-y) var(--button-padding-x);
187 background-color: var(--button-background-color, transparent);
188 border: 1px solid var(--button-background-color);
189 }
190 .eps-button--contained:hover {
191 color: var(--button-color);
192 }
193 .eps-button--outlined {
194 display: block;
195 padding: var(--button-padding-y) var(--button-padding-x);
196 border: 1px solid var(--button-background-color);
197 }
198 .eps-button--contained, .eps-button--outlined {
199 border-radius: 0.1875rem;
200 }
201 .eps-button--underlined {
202 text-decoration: underline;
203 }
204 .eps-button--sm {
205 --button-font-size: 0.75rem;
206 --button-line-height: 14px;
207 }
208 .eps-button--lg {
209 --button-font-size: 0.9375rem;
210 --button-line-height: 18px;
211 }
212 .eps-button--primary {
213 --button-color: var(--button-primary-color);
214 --button-background-color: var(--button-primary-background-color);
215 --button-hover-background-color: var(--button-primary-hover-background-color);
216 --button-active-background-color: var(--button-primary-active-background-color);
217 }
218 .eps-button--secondary {
219 --button-color: var(--button-secondary-color);
220 --button-background-color: var(--button-secondary-background-color);
221 --button-hover-background-color: var(--button-secondary-hover-background-color);
222 --button-active-background-color: var(--button-secondary-active-background-color);
223 }
224 .eps-button--danger {
225 --button-color: var(--button-danger-color);
226 --button-background-color: var(--button-danger-background-color);
227 --button-hover-background-color: var(--button-danger-hover-background-color);
228 --button-active-background-color: var(--button-danger-active-background-color);
229 }
230 .eps-button--cta {
231 --button-color: var(--button-brand-color);
232 --button-background-color: var(--button-cta-background-color);
233 --button-hover-background-color: var(--button-cta-hover-background-color);
234 --button-active-background-color: var(--button-cta-active-background-color);
235 }
236 .eps-button--brand {
237 --button-color: var(--button-cta-color);
238 --button-background-color: var(--button-cta-background-color);
239 --button-hover-background-color: var(--button-cta-hover-background-color);
240 --button-active-background-color: var(--button-cta-active-background-color);
241 }
242 .eps-button--link {
243 --button-color: var(--button-link-color);
244 --button-background-color: var(--button-link-background-color);
245 --button-hover-background-color: var(--button-link-hover-background-color);
246 --button-active-background-color: var(--button-link-active-background-color);
247 }
248 .eps-button--disabled, .eps-button[disabled] {
249 --button-color: var(--button-disabled-color);
250 --button-background-color: var(--button-disabled-background-color);
251 --button-hover-background-color: var(--button-disabled-hover-background-color);
252 --button-active-background-color: var(--button-disabled-active-background-color);
253 cursor: default;
254 }
255
256 :root {
257 --app-background-color: #ffffff;
258 --app-box-shadow-color: rgba(var(--box-shadow-color, rgba(0, 0, 0, 0.15)), 0.2);
259 --app-header-color: #1f2124;
260 --app-logo-color: #ffffff;
261 --app-logo-background-color: #0C0D0E;
262 --app-title-color: #0C0D0E;
263 --app-header-buttons-separator-color: #9DA5AE;
264 --app-header-buttons-color: #515962;
265 --app-header-buttons-color-hover: #0C0D0E;
266 --app-lightbox-background-color: rgba(0, 0, 0, 0.8);
267 }
268
269 .eps-theme-dark {
270 --app-background-color: #1f2124;
271 --app-box-shadow-color: rgba(var(--box-shadow-color, rgba(0, 0, 0, 0.15)), 0.2);
272 --app-header-color: #D5D8DC;
273 --app-logo-color: #0C0D0E;
274 --app-logo-background-color: #ffffff;
275 --app-title-color: #fff;
276 --app-header-buttons-separator-color: #818A96;
277 --app-header-buttons-color: #BABFC5;
278 --app-header-buttons-color-hover: #9DA5AE;
279 --app-lightbox-background-color: rgba(0, 0, 0, 0.8);
280 }
281
282 :root {
283 --text-muted: #BABFC5;
284 --disabled: #D5D8DC;
285 --light: #ffffff;
286 --dark: #000000;
287 --cta: #93003f;
288 --brand: #93003f;
289 --accent: #F3BAFD;
290 --primary: #93003f;
291 --primary-bg: #FAE8FF;
292 --secondary: #515962;
293 --info: #2563EB;
294 --info-bg: #F0F7FF;
295 --danger: #DC2626;
296 --danger-bg: #FEF1F4;
297 --success: #0A875A;
298 --success-bg: #F2FDF5;
299 --warning: #F59E0B;
300 --warning-bg: #FFFBEB;
301 --body-color: #515962;
302 --body-bg: #ffffff;
303 --link-color: #515962;
304 --link-hover-color: rgb(46.3826815642, 50.9636871508, 56.1173184358);
305 --hr-color: #E6E8EA;
306 --box-shadow-color: theme-colors(dark);
307 --display-1-color: #515962;
308 --display-2-color: #515962;
309 --display-3-color: #515962;
310 --display-4-color: #515962;
311 --h1-color: #515962;
312 --h2-color: #515962;
313 --h3-color: #515962;
314 --h4-color: #515962;
315 --h5-color: #515962;
316 --h6-color: #515962;
317 --text-base-color: #515962;
318 --text-xl-color: #515962;
319 --text-lg-color: #515962;
320 --text-sm-color: #515962;
321 --text-xs-color: #515962;
322 --text-xxs-color: #515962;
323 --gray-900: #0C0D0E;
324 --gray-800: #1f2124;
325 --gray-750: #2b2c31;
326 --gray-725: #333438;
327 --gray-700: #3f444b;
328 --gray-600: #515962;
329 --gray-500: #69727D;
330 --gray-400: #818A96;
331 --gray-300: #9DA5AE;
332 --gray-200: #BABFC5;
333 --gray-100: #D5D8DC;
334 --gray-75: #E6E8EA;
335 --gray-50: #F1F2F3;
336 --gray-25: #F9FAFA;
337 }
338
339 .eps-theme-dark {
340 --text-muted: #818A96;
341 --disabled: #69727D;
342 --light: #fff;
343 --dark: #000;
344 --accent: #524CFF;
345 --cta: #93003f;
346 --brand: #93003f;
347 --success: #39b54a;
348 --success-bg: #032317;
349 --info: #0077CC;
350 --info-bg: #0A1A3D;
351 --warning: #fcb92c;
352 --warning-bg: #311808;
353 --danger: #F84343;
354 --danger-bg: #390A0A;
355 --body-color: #BABFC5;
356 --body-bg: #1f2124;
357 --link-color: #0077CC;
358 --link-hover-color: rgb(46.3826815642, 50.9636871508, 56.1173184358);
359 --hr-color: #333438;
360 --box-shadow-color: rgba(0, 0, 0, 0.15);
361 --display-1-color: #BABFC5;
362 --display-2-color: #BABFC5;
363 --display-3-color: #BABFC5;
364 --display-4-color: #BABFC5;
365 --h1-color: #BABFC5;
366 --h2-color: #BABFC5;
367 --h3-color: #BABFC5;
368 --h4-color: #BABFC5;
369 --h5-color: #BABFC5;
370 --h6-color: #BABFC5;
371 --text-base-color: #BABFC5;
372 --text-xl-color: #BABFC5;
373 --text-lg-color: #BABFC5;
374 --text-sm-color: #BABFC5;
375 --text-xs-color: #BABFC5;
376 --text-xxs-color: #BABFC5;
377 --gray-900: #0C0D0E;
378 --gray-800: #1f2124;
379 --gray-750: #2b2c31;
380 --gray-725: #333438;
381 --gray-700: #3f444b;
382 --gray-600: #515962;
383 --gray-500: #69727D;
384 --gray-400: #818A96;
385 --gray-300: #9DA5AE;
386 --gray-200: #BABFC5;
387 --gray-100: #D5D8DC;
388 --gray-75: #E6E8EA;
389 --gray-50: #F1F2F3;
390 --gray-25: #F9FAFA;
391 }
392
393 *,
394 *::before,
395 *::after {
396 box-sizing: border-box;
397 }
398
399 html {
400 font-family: sans-serif;
401 line-height: 1.15;
402 -webkit-text-size-adjust: 100%;
403 -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
404 }
405
406 article, aside, figcaption, figure, footer, header, hgroup, main, nav, section {
407 display: block;
408 }
409
410 body {
411 margin: 0;
412 font-family: Roboto, Arial, Helvetica, Verdana, sans-serif;
413 font-size: 0.875rem;
414 font-weight: 400;
415 line-height: 1.5;
416 color: var(--body-color);
417 background-color: var(--body-bg);
418 }
419
420 [tabindex="-1"]:focus:not(:focus-visible) {
421 outline: 0 !important;
422 }
423
424 h1, h2, h3, h4, h5, h6 {
425 font-size: 100%;
426 margin: 0;
427 padding: 0;
428 line-height: inherit;
429 font-weight: normal;
430 }
431
432 p {
433 margin-block-start: 0;
434 }
435
436 b,
437 strong {
438 font-weight: 700;
439 }
440
441 small {
442 font-size: 80%;
443 }
444
445 a {
446 --eps-link-color: $eps-link-color;
447 color: var(--eps-link-color);
448 background-color: transparent;
449 }
450 a, a:active, a:hover, a:focus {
451 text-decoration: none;
452 }
453 a:focus, a:hover {
454 --eps-link-color: $eps-link-hover-color;
455 text-decoration: none;
456 }
457
458 a:not([href]) {
459 color: inherit;
460 text-decoration: none;
461 }
462 a:not([href]):hover {
463 color: inherit;
464 text-decoration: none;
465 }
466
467 pre,
468 code,
469 kbd,
470 samp {
471 font-family: monospace;
472 font-size: 1em;
473 }
474
475 figure {
476 margin: 0 0 0;
477 }
478
479 img {
480 vertical-align: middle;
481 border-style: none;
482 }
483
484 svg {
485 overflow: hidden;
486 vertical-align: middle;
487 }
488
489 button {
490 border-radius: 0;
491 }
492
493 button:focus:not(:where([data-module=onboarding] *)) {
494 outline: 1px dotted;
495 outline: 5px auto -webkit-focus-ring-color;
496 }
497
498 input,
499 button,
500 select,
501 optgroup,
502 textarea {
503 margin: 0;
504 font-family: inherit;
505 font-size: inherit;
506 line-height: inherit;
507 }
508
509 button,
510 input {
511 overflow: visible;
512 }
513
514 button,
515 select {
516 text-transform: none;
517 }
518
519 [role=button] {
520 cursor: pointer;
521 }
522
523 select {
524 word-wrap: normal;
525 }
526
527 button,
528 [type=button],
529 [type=reset],
530 [type=submit] {
531 -webkit-appearance: button;
532 -moz-appearance: button;
533 appearance: button;
534 }
535
536 button:not(:disabled),
537 [type=button]:not(:disabled),
538 [type=reset]:not(:disabled),
539 [type=submit]:not(:disabled) {
540 cursor: pointer;
541 }
542
543 input[type=radio],
544 input[type=checkbox] {
545 box-sizing: border-box;
546 padding: 0;
547 }
548
549 textarea {
550 overflow: auto;
551 resize: vertical;
552 }
553
554 [hidden] {
555 display: none !important;
556 }
557
558 hr {
559 border: 0 none;
560 border-block-end: 1px solid var(--hr-color);
561 }
562
563 .eps-display-1 {
564 font-size: 1.85rem;
565 color: var(--display-1-color);
566 margin-block-start: 0.5rem;
567 margin-block-end: 0.5rem;
568 }
569
570 .eps-display-2 {
571 font-size: 1.85rem;
572 color: var(--display-2-color);
573 margin-block-start: 0.5rem;
574 margin-block-end: 0.5rem;
575 }
576
577 .eps-display-3 {
578 font-size: 1.85rem;
579 color: var(--display-3-color);
580 margin-block-start: 0;
581 margin-block-end: 1.25rem;
582 }
583
584 .eps-display-4 {
585 font-size: 1.85rem;
586 color: var(--display-4-color);
587 margin-block-start: 0.5rem;
588 margin-block-end: 0.5rem;
589 }
590
591 h1,
592 .eps-h1 {
593 font-size: 1.625rem;
594 line-height: 1;
595 color: var(--h1-color);
596 margin-block-end: 1.25rem;
597 font-weight: 500;
598 }
599
600 h2,
601 .eps-h2 {
602 font-size: 1.25rem;
603 line-height: 1.2;
604 color: var(--h2-color);
605 margin-block-start: 0;
606 margin-block-end: 1.25rem;
607 font-weight: 500;
608 }
609
610 h3,
611 .eps-h3 {
612 font-size: 1rem;
613 line-height: 1.2;
614 color: var(--h3-color);
615 margin-block-start: 0;
616 margin-block-end: 0.5rem;
617 font-weight: 500;
618 }
619
620 h4,
621 .eps-h4 {
622 font-size: 0.9375rem;
623 color: var(--h4-color);
624 margin-block-start: 0;
625 margin-block-end: 0.5rem;
626 }
627
628 h5,
629 .eps-h5 {
630 font-size: 0.875rem;
631 color: var(--h5-color);
632 margin-block-start: 0;
633 margin-block-end: 0.5rem;
634 }
635
636 h6,
637 .eps-h6 {
638 font-size: 0.875rem;
639 color: var(--h-6-color);
640 margin-block-start: 0;
641 margin-block-end: 0.5rem;
642 font-weight: 700;
643 }
644
645 .eps-text-xxs {
646 font-size: 0.75rem;
647 line-height: 1.2;
648 color: var(--text-xxs-color);
649 font-weight: 400;
650 }
651
652 .eps-text-xs {
653 font-size: 0.75rem;
654 line-height: 1.5;
655 color: var(--text-xs-color);
656 font-weight: 400;
657 }
658
659 .eps-text {
660 font-size: 0.875rem;
661 line-height: 1.5;
662 color: var(--text-base-color);
663 font-weight: 400;
664 }
665
666 .eps-text-sm {
667 font-size: 0.8125rem;
668 line-height: 1.5;
669 color: var(--text-sm-color);
670 font-weight: 400;
671 }
672
673 .eps-text-lg {
674 font-size: 0.9375rem;
675 line-height: 1.5;
676 color: var(--text-lg-color);
677 font-weight: 400;
678 }
679
680 .eps-text-xl {
681 font-size: 1rem;
682 line-height: 1.5;
683 color: var(--text-xl-color);
684 font-weight: 400;
685 }
686
687 .video-wrapper {
688 position: relative;
689 padding-block-end: 56.25%;
690 height: 0;
691 }
692 .video-wrapper iframe {
693 position: absolute;
694 inset-block-start: 0;
695 inset-inline-start: 0;
696 width: 100%;
697 height: 100%;
698 }
699
700 .eps-separator {
701 margin-block-end: 2.75rem;
702 }
703
704 .eps-theme-dark {
705 --e-app-back-button-color: #BABFC5;
706 }
707
708 .back-button, .e-app-back-button {
709 --button-background-color: var(--e-app-back-button-color, #69727D);
710 margin-block-end: 1.5rem;
711 }
712 .back-button .eps-icon, .e-app-back-button .eps-icon {
713 margin-inline-end: 0.3125rem;
714 }
715
716 .eps-theme-dark {
717 --input-border-color: --hr-color;
718 }
719
720 .eps-input {
721 border: 1px solid var(--hr-color);
722 border-radius: 0.1875rem;
723 background: transparent;
724 color: inherit;
725 height: 1.875rem;
726 padding: 0 0.3125rem;
727 }
728 .eps-input--block {
729 width: 100%;
730 }
731
732 .eps-app {
733 display: flex;
734 height: 100vh;
735 flex-direction: column;
736 color: var(--body-color);
737 background-color: var(--app-background-color);
738 position: absolute;
739 border-radius: 0;
740 box-shadow: 2px 8px 23px 3px var(--color-box-shadow-color);
741 overflow: hidden;
742 font-family: Roboto, Arial, Helvetica, Verdana, sans-serif;
743 width: 100%;
744 max-width: 100%;
745 }
746 .eps-app__lightbox {
747 display: flex;
748 align-items: center;
749 justify-content: center;
750 position: fixed;
751 height: 100%;
752 width: 100%;
753 inset-block-end: 0;
754 inset-inline-start: 0;
755 background-color: var(--app-lightbox-background-color);
756 z-index: 1040;
757 }
758 .eps-app__header {
759 flex-shrink: 0;
760 font-size: 0.9375rem;
761 border-block-end: var(--e-a-border);
762 position: relative;
763 z-index: 3;
764 height: 3.125rem;
765 padding-block: 0;
766 padding-inline: 1rem;
767 }
768 .eps-app__header-buttons {
769 display: flex;
770 align-items: center;
771 flex-direction: row-reverse;
772 font-size: 1.125rem;
773 }
774 .eps-app__header-btn {
775 padding-inline-start: 1rem;
776 font-size: 1.125rem;
777 line-height: 1.25rem;
778 }
779 .eps-app__header-btn:hover {
780 color: var(--app-header-buttons-color-hover);
781 }
782 .eps-app__header-btn:first-child {
783 border-inline-start: 1px solid var(--app-header-buttons-separator-color);
784 }
785 .eps-app__header-btn:not(:first-child) {
786 padding-inline-end: 1rem;
787 }
788 .eps-app__logo-title-wrapper {
789 display: flex;
790 align-items: center;
791 }
792 .eps-app__logo {
793 display: block;
794 width: 1.75rem;
795 height: 1.75rem;
796 line-height: 1.75rem;
797 text-align: center;
798 font-size: 1.75rem;
799 border-radius: 50%;
800 color: var(--app-logo-background-color);
801 }
802 .eps-app__logo:not(:last-child) {
803 margin-inline-end: 0.625rem;
804 }
805 .eps-app__title {
806 color: var(--app-title-color);
807 font-size: 0.9375rem;
808 font-weight: 700;
809 text-transform: uppercase;
810 margin-block-end: 0;
811 }
812 .eps-app__main {
813 display: flex;
814 overflow: hidden;
815 flex-grow: 1;
816 }
817 .eps-app__sidebar {
818 background-color: var(--app-sidebar-background-color);
819 padding-block-start: 1.25rem;
820 width: 30%;
821 max-width: 17.1875rem;
822 border-inline-end: var(--e-a-border);
823 flex-grow: 0;
824 overflow-y: auto;
825 z-index: 4;
826 }
827 .eps-app__content {
828 flex-grow: 1;
829 position: relative;
830 padding: 2.75rem;
831 height: 100%;
832 overflow-y: auto;
833 }
834
835 .e-app-upload-file__input {
836 display: none;
837 }
838
839 .e-app-drop-zone {
840 --e-app-drop-zone-text-color: #69727D;
841 --e-app-drop-zone-secondary-text-color: #515962;
842 }
843 .e-app-drop-zone__icon {
844 margin-block-end: 2.75rem;
845 font-size: 60px;
846 }
847 .e-app-drop-zone__text {
848 color: var(--e-app-drop-zone-text-color);
849 }
850 .e-app-drop-zone__secondary-text {
851 color: var(--e-app-drop-zone-secondary-text-color);
852 }
853
854 .eps-theme-dark .e-app-drop-zone {
855 --e-app-drop-zone-text-color: #BABFC5;
856 --e-app-drop-zone-secondary-text-color: #D5D8DC;
857 }
858
859 :root {
860 --info-toggle-color: #9DA5AE;
861 --info-toggle-hover-color: #69727D;
862 }
863
864 .eps-theme-dark {
865 --placeholder-filter: invert(0.8) sepia(1) saturate(0.2) hue-rotate(180deg) contrast(1.25) brightness(1.2);
866 --info-toggle-color: #818A96;
867 --info-toggle-hover-color: #BABFC5;
868 }
869
870 .e-site-part .eps-card__image {
871 filter: var(--placeholder-filter, none);
872 }
873 .e-site-part__info-toggle {
874 color: var(--info-toggle-color);
875 }
876 .e-site-part__info-toggle:hover {
877 --info-toggle-color: var(--info-toggle-hover-color);
878 }
879
880 .e-site-editor__header {
881 margin-block-end: 2.75rem;
882 border-block-end: 1px solid var(--hr-color);
883 }
884
885 :root {
886 --e-elementor-loader-color: #ffffff;
887 --e-elementor-loader-wrapper-color: #F9FAFA;
888 --e-elementor-loader-box-color: #E6E8EA;
889 }
890
891 .eps-theme-dark {
892 --e-elementor-loader-color: #1f2124;
893 --e-elementor-loader-wrapper-color: #2b2c31;
894 --e-elementor-loader-box-color: #3f444b;
895 }
896
897 .elementor-loading {
898 background-color: var(--e-elementor-loader-color);
899 height: 100vh;
900 }
901
902 .elementor-loader-wrapper {
903 position: absolute;
904 inset-block-start: 50%;
905 inset-inline-start: 50%;
906 transform: translate(calc(-50% * var(--direction-multiplier)), -50%);
907 width: 300px;
908 display: flex;
909 flex-direction: column;
910 align-items: center;
911 gap: 30px;
912 }
913
914 .elementor-loader {
915 border-radius: 50%;
916 padding: 40px;
917 height: 150px;
918 width: 150px;
919 background-color: var(--e-elementor-loader-wrapper-color);
920 box-sizing: border-box;
921 box-shadow: 2px 2px 20px 4px rgba(0, 0, 0, 0.02);
922 }
923
924 .elementor-loader-boxes {
925 height: 100%;
926 width: 100%;
927 position: relative;
928 }
929
930 .elementor-loader-box {
931 position: absolute;
932 background-color: var(--e-elementor-loader-box-color);
933 animation: load 1.8s linear infinite;
934 }
935 .elementor-loader-box:nth-of-type(1) {
936 width: 20%;
937 height: 100%;
938 inset-block-start: 0;
939 inset-inline-start: 0;
940 }
941 .elementor-loader-box:not(:nth-of-type(1)) {
942 inset-inline-end: 0;
943 height: 20%;
944 width: 60%;
945 }
946 .elementor-loader-box:nth-of-type(2) {
947 top: 0;
948 animation-delay: calc(1.8s / 4 * -1);
949 }
950 .elementor-loader-box:nth-of-type(3) {
951 top: 40%;
952 animation-delay: calc(1.8s / 4 * -2);
953 }
954 .elementor-loader-box:nth-of-type(4) {
955 bottom: 0;
956 animation-delay: calc(1.8s / 4 * -3);
957 }
958
959 .elementor-loading-title {
960 color: #9DA5AE;
961 text-align: center;
962 text-transform: uppercase;
963 letter-spacing: 7px;
964 text-indent: 7px;
965 font-size: 10px;
966 width: 100%;
967 }
968
969 @keyframes load {
970 0% {
971 opacity: 0.3;
972 }
973 50% {
974 opacity: 1;
975 }
976 100% {
977 opacity: 0.3;
978 }
979 }
980 .eps-menu__title {
981 margin-block-start: 2.75rem;
982 margin-block-end: 1rem;
983 }
984
985 .e-app-import {
986 --e-app-import-back-to-library-color: #69727D;
987 padding-block-end: 1.25rem;
988 }
989 .e-app-import__drop-zone {
990 margin-block-start: 1.25rem;
991 }
992 .e-app-import__back-to-library {
993 color: var(--e-app-import-back-to-library-color);
994 margin-block-end: 1.5rem;
995 }
996 .e-app-import__back-to-library > i {
997 margin-inline-end: 0.5rem;
998 }
999
1000 .eps-theme-dark .e-app-import {
1001 --e-app-import-back-to-library-color: #BABFC5;
1002 }
1003
1004 .e-site-editor__promotion-overlay__link {
1005 display: flex;
1006 width: 100%;
1007 height: 100%;
1008 align-items: center;
1009 justify-content: center;
1010 flex-direction: column;
1011 text-decoration: none;
1012 }
1013 .e-site-editor__promotion-overlay__icon {
1014 font-size: 1.25rem;
1015 color: #ffffff;
1016 margin-block-end: 1rem;
1017 }
1018
1019 .e-app-import-export-wizard-step {
1020 --e-app-import-export-wizard-step-icon-color: #818A96;
1021 --e-app-import-export-wizard-step-text-color: #69727D;
1022 --e-app-import-export-wizard-step-block-end-text-color: #69727D;
1023 height: 100%;
1024 position: relative;
1025 text-align: center;
1026 }
1027 .e-app-import-export-wizard-step__media-container {
1028 height: 140px;
1029 margin: 5.5rem 0 2.75rem;
1030 }
1031 .e-app-import-export-wizard-step__icon {
1032 color: var(--e-app-import-export-wizard-step-icon-color);
1033 font-size: 50px;
1034 }
1035 .e-app-import-export-wizard-step__icon.eicon-loading {
1036 font-size: 1.85rem;
1037 }
1038 .e-app-import-export-wizard-step__heading {
1039 margin-block-end: 1.5rem;
1040 }
1041 .e-app-import-export-wizard-step__description, .e-app-import-export-wizard-step__info {
1042 color: var(--e-app-import-export-wizard-step-text-color);
1043 }
1044 .e-app-import-export-wizard-step__info {
1045 margin-block-start: 1.5rem;
1046 }
1047 .e-app-import-export-wizard-step__content {
1048 text-align: initial;
1049 margin-block-end: 1.25rem;
1050 }
1051 .e-app-import-export-wizard-step__notice {
1052 display: block;
1053 position: sticky;
1054 inset-block-start: 100%; /* Will prevent text overlapping when window height is too short. */
1055 color: var(--e-app-import-export-wizard-step-block-end-text-color);
1056 font-style: italic;
1057 margin-block-end: 0;
1058 }
1059
1060 .eps-theme-dark .e-app-import-export-wizard-step {
1061 --e-app-import-export-wizard-step-icon-color: #818A96;
1062 --e-app-import-export-wizard-step-text-color: #BABFC5;
1063 --e-app-import-export-wizard-step-block-end-text-color: #BABFC5;
1064 }
1065
1066 .e-app-import-export-page-header {
1067 --e-app-import-export-page-header-heading-color: #515962;
1068 --e-app-import-export-page-header-description-color: #69727D;
1069 margin-block-end: 2.75rem;
1070 }
1071 .e-app-import-export-page-header__content-wrapper {
1072 max-width: 655px;
1073 }
1074 .e-app-import-export-page-header__heading {
1075 color: var(--e-app-import-export-page-header-heading-color);
1076 }
1077 .e-app-import-export-page-header__description {
1078 color: var(--e-app-import-export-page-header-description-color);
1079 margin-block-start: 1.25rem;
1080 }
1081
1082 .eps-theme-dark .e-app-import-export-page-header {
1083 --e-app-import-export-page-header-heading-color: #D5D8DC;
1084 --e-app-import-export-page-header-description-color: #D5D8DC;
1085 }
1086
1087 .e-app-export-kit-content {
1088 --e-app-export-kit-content-title-color: #3f444b;
1089 --e-app-export-kit-content-description-color: #515962;
1090 --e-app-export-kit-content-sm-notice-color: #BABFC5;
1091 }
1092 .e-app-export-kit-content__checkbox {
1093 flex-shrink: 0;
1094 margin-inline-end: 0.75rem;
1095 }
1096 .e-app-export-kit-content__title {
1097 color: var(--e-app-export-kit-content-title-color);
1098 }
1099 .e-app-export-kit-content__description {
1100 color: var(--e-app-export-kit-content-description-color);
1101 margin-inline-end: 1.25rem;
1102 }
1103 .e-app-export-kit-content__notice {
1104 margin-block-start: 1rem;
1105 }
1106 .e-app-export-kit-content__small-notice {
1107 font-style: italic;
1108 color: var(--e-app-export-kit-content-sm-notice-color);
1109 }
1110
1111 .eps-theme-dark .e-app-export-kit-content {
1112 --e-app-export-kit-content-title-color: #D5D8DC;
1113 --e-app-export-kit-content-description-color: #BABFC5;
1114 --e-app-export-kit-content-sm-notice-color: #818A96;
1115 }
1116
1117 .e-app-wizard-footer {
1118 --e-app-wizard-footer-border-color: #E6E8EA;
1119 padding: 0.5rem;
1120 }
1121 .e-app-wizard-footer__separator {
1122 border-block-start: 1px solid var(--e-app-wizard-footer-border-color);
1123 }
1124
1125 .eps-theme-dark .e-app-wizard-footer {
1126 --e-app-wizard-footer-border-color: #333438;
1127 }
1128
1129 .e-app-export-templates-features__locked {
1130 --e-app-export-templates-features-locked-color: #69727D;
1131 color: var(--e-app-export-templates-features-locked-color);
1132 }
1133
1134 .eps-theme-dark .e-app-export-templates-features__locked {
1135 --e-app-export-templates-features-locked-color: #9DA5AE;
1136 }
1137
1138 :root {
1139 --color-box-shadow-color: rgba(0, 0, 0, 0.05);
1140 }
1141
1142 .eps-theme-dark {
1143 --color-box-shadow-color: rgba(0, 0, 0, 0.1);
1144 }
1145
1146 :root {
1147 --card-background-color-hover: #ffffff;
1148 --card-border: 1px solid #D5D8DC;
1149 --card-header-footer-border: 1px solid var(--e-a-border-color);
1150 --card-header-footer-active-border: 2px solid #BABFC5;
1151 --card-headline-color: #515962;
1152 --card-figure-background-color: #BABFC5;
1153 --card-image-overlay-background-color: rgba(0, 0, 0, 0.2);
1154 }
1155
1156 .eps-theme-dark {
1157 --card-background-color-hover: #2b2c31;
1158 --card-border: 1px solid #333438;
1159 --card-header-footer-border: 1px solid #333438;
1160 --card-header-footer-active-border: 1px solid #1f2124;
1161 --card-headline-color: #D5D8DC;
1162 --card-figure-background-color: #3f444b;
1163 --card-image-overlay-background-color: rgba(63, 68, 75, 0.5);
1164 }
1165
1166 .eps-card {
1167 border: var(--card-border);
1168 border-radius: 0.1875rem;
1169 transition: 0.3s;
1170 font-size: 0.75rem;
1171 }
1172 .eps-card__header {
1173 padding: 0.625rem;
1174 border-block-end: var(--card-header-footer-border);
1175 min-height: 2.5rem;
1176 display: flex;
1177 align-items: center;
1178 }
1179 .eps-card__header--padding {
1180 padding: var(--eps-card-header-padding);
1181 }
1182 .eps-card {
1183 /*
1184 todo: TBD: Optionally remove headline styling in favor of a global atom depending on variation needs
1185 */
1186 }
1187 .eps-card__headline {
1188 color: var(--card-headline-color);
1189 margin-block-end: 0;
1190 font-weight: 500;
1191 flex-grow: 1;
1192 overflow: hidden;
1193 text-overflow: ellipsis;
1194 white-space: nowrap;
1195 }
1196 .eps-card__body {
1197 padding: 0.625rem 0.625rem;
1198 }
1199 .eps-card__body--padding {
1200 padding: var(--eps-card-body-padding);
1201 }
1202 .eps-card__figure {
1203 background-color: var(--card-figure-background-color);
1204 position: relative;
1205 padding-block-end: var(--card-image-aspect-ratio, 95.6%);
1206 overflow: hidden;
1207 height: 0;
1208 }
1209 .eps-card__image {
1210 width: 100%;
1211 -o-object-fit: contain;
1212 object-fit: contain;
1213 -o-object-position: top;
1214 object-position: top;
1215 position: absolute;
1216 inset-block-start: 0;
1217 inset-inline-start: 0;
1218 }
1219 .eps-card__image-overlay {
1220 position: absolute;
1221 inset-block-start: 0;
1222 background-color: var(--card-image-overlay-background-color);
1223 z-index: 1;
1224 width: 100%;
1225 height: 100%;
1226 opacity: 0;
1227 transition: 0.3s;
1228 }
1229 .eps-card__image-overlay:hover {
1230 opacity: 1;
1231 }
1232 .eps-card__footer {
1233 padding: 0.625rem;
1234 border-block-start: var(--card-header-footer-border);
1235 font-size: 0.6875rem;
1236 }
1237 .eps-card__footer--padding {
1238 padding: var(--eps-card-footer-padding);
1239 }
1240
1241 :root {
1242 --menu-item-color: #515962;
1243 --menu-item-color-hover: #3f444b;
1244 --menu-item-color-active: #0C0D0E;
1245 --menu-item-background-color-hover: #F9FAFA;
1246 --menu-item-background-color-active: #E6E8EA;
1247 --menu-item-action-button-color: #9DA5AE;
1248 }
1249
1250 .eps-theme-dark {
1251 --menu-item-color: #D5D8DC;
1252 --menu-item-color-hover: #BABFC5;
1253 --menu-item-color-active: #9DA5AE;
1254 --menu-item-background-color-hover: #2b2c31;
1255 --menu-item-background-color-active: #333438;
1256 --menu-item-action-button-color: #818A96;
1257 }
1258
1259 .eps-menu-item {
1260 display: flex;
1261 align-items: center;
1262 position: relative;
1263 transition: 0.3s;
1264 --action-button-opacity: 0;
1265 }
1266 .eps-menu-item::before {
1267 content: "";
1268 display: block;
1269 position: absolute;
1270 inset-block-start: 0;
1271 inset-inline-start: 0;
1272 height: 100%;
1273 width: var(--menu-item-pointer-width);
1274 background-color: #0C0D0E;
1275 }
1276 .eps-menu-item:hover:not(.eps-menu-item--active) {
1277 background-color: var(--menu-item-background-color-hover);
1278 --action-button-opacity: 1;
1279 --menu-item-color: var(--menu-item-color-hover);
1280 --eps-link-color: var(--menu-item-color-hover);
1281 }
1282 .eps-menu-item--active {
1283 background-color: var(--menu-item-background-color-active);
1284 --menu-item-color: var(--menu-item-color-active);
1285 --eps-link-color: var(--menu-item-color-active);
1286 }
1287 .eps-menu-item__link {
1288 padding: 0.5rem 1.875rem;
1289 min-height: 2.75rem;
1290 font-size: 0.75rem;
1291 line-height: 1.2;
1292 flex-grow: 1;
1293 display: flex;
1294 align-items: center;
1295 color: var(--menu-item-color);
1296 --eps-link-color: var(--menu-item-color);
1297 }
1298 .eps-menu-item__link:not(:last-child) {
1299 padding-inline-end: 0;
1300 }
1301 .eps-menu-item__link .eps-icon {
1302 font-size: 1.125rem;
1303 margin-inline-end: 0.75rem;
1304 }
1305 .eps-menu-item__action-button {
1306 opacity: var(--action-button-opacity);
1307 padding: 0.625rem;
1308 transition: 0.3s;
1309 margin-inline-end: 1.25rem;
1310 }
1311 .eps-menu-item--active {
1312 --menu-item-pointer-width: 0.3125rem;
1313 }
1314
1315 .eps-grid-container {
1316 display: flex;
1317 flex-wrap: wrap;
1318 width: 100%;
1319 }
1320 .eps-grid-container--no-wrap {
1321 flex-wrap: nowrap;
1322 }
1323 .eps-grid-container--wrap-reverse {
1324 flex-wrap: wrap-reverse;
1325 }
1326 .eps-grid-container--spacing {
1327 --grid-row-gutter: calc(-1 * calc(var(--grid-spacing-gutter) * 0.625rem / 10));
1328 width: var(--grid-spacing-width);
1329 margin: var(--grid-row-gutter);
1330 }
1331 .eps-grid-container--spacing > .eps-grid-item {
1332 padding: var(--grid-spacing-gutter);
1333 }
1334 .eps-grid--direction-row {
1335 flex-direction: row;
1336 }
1337 .eps-grid--direction-row-reverse {
1338 flex-direction: row-reverse;
1339 }
1340 .eps-grid--direction-column {
1341 flex-direction: column;
1342 }
1343 .eps-grid--direction-column-reverse {
1344 flex-direction: column-reverse;
1345 }
1346 .eps-grid--justify-stretch {
1347 justify-content: stretch;
1348 }
1349 .eps-grid--justify-start {
1350 justify-content: flex-start;
1351 }
1352 .eps-grid--justify-center {
1353 justify-content: center;
1354 }
1355 .eps-grid--justify-end {
1356 justify-content: flex-end;
1357 }
1358 .eps-grid--justify-space-between {
1359 justify-content: space-between;
1360 }
1361 .eps-grid--justify-space-around {
1362 justify-content: space-around;
1363 }
1364 .eps-grid--justify-space-evenly {
1365 justify-content: space-evenly;
1366 }
1367 .eps-grid--align-content-stretch {
1368 align-content: stretch;
1369 }
1370 .eps-grid--align-content-start {
1371 align-content: flex-start;
1372 }
1373 .eps-grid--align-content-center {
1374 align-content: center;
1375 }
1376 .eps-grid--align-content-end {
1377 align-content: flex-end;
1378 }
1379 .eps-grid--align-content-space-between {
1380 align-content: space-between;
1381 }
1382 .eps-grid--align-items-start {
1383 align-items: flex-start;
1384 }
1385 .eps-grid--align-items-center {
1386 align-items: center;
1387 }
1388 .eps-grid--align-items-end {
1389 align-items: flex-end;
1390 }
1391 .eps-grid--align-items-baseline {
1392 align-items: baseline;
1393 }
1394 .eps-grid--align-items-stretch {
1395 align-items: stretch;
1396 }
1397
1398 .eps-grid-item--zero-min-width {
1399 min-width: 0;
1400 }
1401
1402 @media screen and (min-width: 480px) {
1403 .eps-grid-item-sm {
1404 flex-grow: 1;
1405 max-width: 100%;
1406 flex-basis: 0;
1407 }
1408 }
1409 @media screen and (min-width: 768px) {
1410 .eps-grid-item-md {
1411 flex-grow: 1;
1412 max-width: 100%;
1413 flex-basis: 0;
1414 }
1415 }
1416 @media screen and (min-width: 1025px) {
1417 .eps-grid-item-lg {
1418 flex-grow: 1;
1419 max-width: 100%;
1420 flex-basis: 0;
1421 }
1422 }
1423 @media screen and (min-width: 1440px) {
1424 .eps-grid-item-xl {
1425 flex-grow: 1;
1426 max-width: 100%;
1427 flex-basis: 0;
1428 }
1429 }
1430 @media screen and (min-width: 1600px) {
1431 .eps-grid-item-xxl {
1432 flex-grow: 1;
1433 max-width: 100%;
1434 flex-basis: 0;
1435 }
1436 }
1437 .eps-grid-item-xs-1 {
1438 flex-grow: 0;
1439 max-width: calc(1 / 12 * 100%);
1440 flex-basis: calc(1 / 12 * 100%);
1441 }
1442
1443 .eps-grid-item-xs-2 {
1444 flex-grow: 0;
1445 max-width: calc(2 / 12 * 100%);
1446 flex-basis: calc(2 / 12 * 100%);
1447 }
1448
1449 .eps-grid-item-xs-3 {
1450 flex-grow: 0;
1451 max-width: calc(3 / 12 * 100%);
1452 flex-basis: calc(3 / 12 * 100%);
1453 }
1454
1455 .eps-grid-item-xs-4 {
1456 flex-grow: 0;
1457 max-width: calc(4 / 12 * 100%);
1458 flex-basis: calc(4 / 12 * 100%);
1459 }
1460
1461 .eps-grid-item-xs-5 {
1462 flex-grow: 0;
1463 max-width: calc(5 / 12 * 100%);
1464 flex-basis: calc(5 / 12 * 100%);
1465 }
1466
1467 .eps-grid-item-xs-6 {
1468 flex-grow: 0;
1469 max-width: calc(6 / 12 * 100%);
1470 flex-basis: calc(6 / 12 * 100%);
1471 }
1472
1473 .eps-grid-item-xs-7 {
1474 flex-grow: 0;
1475 max-width: calc(7 / 12 * 100%);
1476 flex-basis: calc(7 / 12 * 100%);
1477 }
1478
1479 .eps-grid-item-xs-8 {
1480 flex-grow: 0;
1481 max-width: calc(8 / 12 * 100%);
1482 flex-basis: calc(8 / 12 * 100%);
1483 }
1484
1485 .eps-grid-item-xs-9 {
1486 flex-grow: 0;
1487 max-width: calc(9 / 12 * 100%);
1488 flex-basis: calc(9 / 12 * 100%);
1489 }
1490
1491 .eps-grid-item-xs-10 {
1492 flex-grow: 0;
1493 max-width: calc(10 / 12 * 100%);
1494 flex-basis: calc(10 / 12 * 100%);
1495 }
1496
1497 .eps-grid-item-xs-11 {
1498 flex-grow: 0;
1499 max-width: calc(11 / 12 * 100%);
1500 flex-basis: calc(11 / 12 * 100%);
1501 }
1502
1503 .eps-grid-item-xs-12 {
1504 flex-grow: 0;
1505 max-width: calc(12 / 12 * 100%);
1506 flex-basis: calc(12 / 12 * 100%);
1507 }
1508
1509 @media screen and (min-width: 480px) {
1510 .eps-grid-item-sm-1 {
1511 flex-grow: 0;
1512 max-width: calc(1 / 12 * 100%);
1513 flex-basis: calc(1 / 12 * 100%);
1514 }
1515 .eps-grid-item-sm-2 {
1516 flex-grow: 0;
1517 max-width: calc(2 / 12 * 100%);
1518 flex-basis: calc(2 / 12 * 100%);
1519 }
1520 .eps-grid-item-sm-3 {
1521 flex-grow: 0;
1522 max-width: calc(3 / 12 * 100%);
1523 flex-basis: calc(3 / 12 * 100%);
1524 }
1525 .eps-grid-item-sm-4 {
1526 flex-grow: 0;
1527 max-width: calc(4 / 12 * 100%);
1528 flex-basis: calc(4 / 12 * 100%);
1529 }
1530 .eps-grid-item-sm-5 {
1531 flex-grow: 0;
1532 max-width: calc(5 / 12 * 100%);
1533 flex-basis: calc(5 / 12 * 100%);
1534 }
1535 .eps-grid-item-sm-6 {
1536 flex-grow: 0;
1537 max-width: calc(6 / 12 * 100%);
1538 flex-basis: calc(6 / 12 * 100%);
1539 }
1540 .eps-grid-item-sm-7 {
1541 flex-grow: 0;
1542 max-width: calc(7 / 12 * 100%);
1543 flex-basis: calc(7 / 12 * 100%);
1544 }
1545 .eps-grid-item-sm-8 {
1546 flex-grow: 0;
1547 max-width: calc(8 / 12 * 100%);
1548 flex-basis: calc(8 / 12 * 100%);
1549 }
1550 .eps-grid-item-sm-9 {
1551 flex-grow: 0;
1552 max-width: calc(9 / 12 * 100%);
1553 flex-basis: calc(9 / 12 * 100%);
1554 }
1555 .eps-grid-item-sm-10 {
1556 flex-grow: 0;
1557 max-width: calc(10 / 12 * 100%);
1558 flex-basis: calc(10 / 12 * 100%);
1559 }
1560 .eps-grid-item-sm-11 {
1561 flex-grow: 0;
1562 max-width: calc(11 / 12 * 100%);
1563 flex-basis: calc(11 / 12 * 100%);
1564 }
1565 .eps-grid-item-sm-12 {
1566 flex-grow: 0;
1567 max-width: calc(12 / 12 * 100%);
1568 flex-basis: calc(12 / 12 * 100%);
1569 }
1570 }
1571 @media screen and (min-width: 768px) {
1572 .eps-grid-item-md-1 {
1573 flex-grow: 0;
1574 max-width: calc(1 / 12 * 100%);
1575 flex-basis: calc(1 / 12 * 100%);
1576 }
1577 .eps-grid-item-md-2 {
1578 flex-grow: 0;
1579 max-width: calc(2 / 12 * 100%);
1580 flex-basis: calc(2 / 12 * 100%);
1581 }
1582 .eps-grid-item-md-3 {
1583 flex-grow: 0;
1584 max-width: calc(3 / 12 * 100%);
1585 flex-basis: calc(3 / 12 * 100%);
1586 }
1587 .eps-grid-item-md-4 {
1588 flex-grow: 0;
1589 max-width: calc(4 / 12 * 100%);
1590 flex-basis: calc(4 / 12 * 100%);
1591 }
1592 .eps-grid-item-md-5 {
1593 flex-grow: 0;
1594 max-width: calc(5 / 12 * 100%);
1595 flex-basis: calc(5 / 12 * 100%);
1596 }
1597 .eps-grid-item-md-6 {
1598 flex-grow: 0;
1599 max-width: calc(6 / 12 * 100%);
1600 flex-basis: calc(6 / 12 * 100%);
1601 }
1602 .eps-grid-item-md-7 {
1603 flex-grow: 0;
1604 max-width: calc(7 / 12 * 100%);
1605 flex-basis: calc(7 / 12 * 100%);
1606 }
1607 .eps-grid-item-md-8 {
1608 flex-grow: 0;
1609 max-width: calc(8 / 12 * 100%);
1610 flex-basis: calc(8 / 12 * 100%);
1611 }
1612 .eps-grid-item-md-9 {
1613 flex-grow: 0;
1614 max-width: calc(9 / 12 * 100%);
1615 flex-basis: calc(9 / 12 * 100%);
1616 }
1617 .eps-grid-item-md-10 {
1618 flex-grow: 0;
1619 max-width: calc(10 / 12 * 100%);
1620 flex-basis: calc(10 / 12 * 100%);
1621 }
1622 .eps-grid-item-md-11 {
1623 flex-grow: 0;
1624 max-width: calc(11 / 12 * 100%);
1625 flex-basis: calc(11 / 12 * 100%);
1626 }
1627 .eps-grid-item-md-12 {
1628 flex-grow: 0;
1629 max-width: calc(12 / 12 * 100%);
1630 flex-basis: calc(12 / 12 * 100%);
1631 }
1632 }
1633 @media screen and (min-width: 1025px) {
1634 .eps-grid-item-lg-1 {
1635 flex-grow: 0;
1636 max-width: calc(1 / 12 * 100%);
1637 flex-basis: calc(1 / 12 * 100%);
1638 }
1639 .eps-grid-item-lg-2 {
1640 flex-grow: 0;
1641 max-width: calc(2 / 12 * 100%);
1642 flex-basis: calc(2 / 12 * 100%);
1643 }
1644 .eps-grid-item-lg-3 {
1645 flex-grow: 0;
1646 max-width: calc(3 / 12 * 100%);
1647 flex-basis: calc(3 / 12 * 100%);
1648 }
1649 .eps-grid-item-lg-4 {
1650 flex-grow: 0;
1651 max-width: calc(4 / 12 * 100%);
1652 flex-basis: calc(4 / 12 * 100%);
1653 }
1654 .eps-grid-item-lg-5 {
1655 flex-grow: 0;
1656 max-width: calc(5 / 12 * 100%);
1657 flex-basis: calc(5 / 12 * 100%);
1658 }
1659 .eps-grid-item-lg-6 {
1660 flex-grow: 0;
1661 max-width: calc(6 / 12 * 100%);
1662 flex-basis: calc(6 / 12 * 100%);
1663 }
1664 .eps-grid-item-lg-7 {
1665 flex-grow: 0;
1666 max-width: calc(7 / 12 * 100%);
1667 flex-basis: calc(7 / 12 * 100%);
1668 }
1669 .eps-grid-item-lg-8 {
1670 flex-grow: 0;
1671 max-width: calc(8 / 12 * 100%);
1672 flex-basis: calc(8 / 12 * 100%);
1673 }
1674 .eps-grid-item-lg-9 {
1675 flex-grow: 0;
1676 max-width: calc(9 / 12 * 100%);
1677 flex-basis: calc(9 / 12 * 100%);
1678 }
1679 .eps-grid-item-lg-10 {
1680 flex-grow: 0;
1681 max-width: calc(10 / 12 * 100%);
1682 flex-basis: calc(10 / 12 * 100%);
1683 }
1684 .eps-grid-item-lg-11 {
1685 flex-grow: 0;
1686 max-width: calc(11 / 12 * 100%);
1687 flex-basis: calc(11 / 12 * 100%);
1688 }
1689 .eps-grid-item-lg-12 {
1690 flex-grow: 0;
1691 max-width: calc(12 / 12 * 100%);
1692 flex-basis: calc(12 / 12 * 100%);
1693 }
1694 }
1695 @media screen and (min-width: 1440px) {
1696 .eps-grid-item-xl-1 {
1697 flex-grow: 0;
1698 max-width: calc(1 / 12 * 100%);
1699 flex-basis: calc(1 / 12 * 100%);
1700 }
1701 .eps-grid-item-xl-2 {
1702 flex-grow: 0;
1703 max-width: calc(2 / 12 * 100%);
1704 flex-basis: calc(2 / 12 * 100%);
1705 }
1706 .eps-grid-item-xl-3 {
1707 flex-grow: 0;
1708 max-width: calc(3 / 12 * 100%);
1709 flex-basis: calc(3 / 12 * 100%);
1710 }
1711 .eps-grid-item-xl-4 {
1712 flex-grow: 0;
1713 max-width: calc(4 / 12 * 100%);
1714 flex-basis: calc(4 / 12 * 100%);
1715 }
1716 .eps-grid-item-xl-5 {
1717 flex-grow: 0;
1718 max-width: calc(5 / 12 * 100%);
1719 flex-basis: calc(5 / 12 * 100%);
1720 }
1721 .eps-grid-item-xl-6 {
1722 flex-grow: 0;
1723 max-width: calc(6 / 12 * 100%);
1724 flex-basis: calc(6 / 12 * 100%);
1725 }
1726 .eps-grid-item-xl-7 {
1727 flex-grow: 0;
1728 max-width: calc(7 / 12 * 100%);
1729 flex-basis: calc(7 / 12 * 100%);
1730 }
1731 .eps-grid-item-xl-8 {
1732 flex-grow: 0;
1733 max-width: calc(8 / 12 * 100%);
1734 flex-basis: calc(8 / 12 * 100%);
1735 }
1736 .eps-grid-item-xl-9 {
1737 flex-grow: 0;
1738 max-width: calc(9 / 12 * 100%);
1739 flex-basis: calc(9 / 12 * 100%);
1740 }
1741 .eps-grid-item-xl-10 {
1742 flex-grow: 0;
1743 max-width: calc(10 / 12 * 100%);
1744 flex-basis: calc(10 / 12 * 100%);
1745 }
1746 .eps-grid-item-xl-11 {
1747 flex-grow: 0;
1748 max-width: calc(11 / 12 * 100%);
1749 flex-basis: calc(11 / 12 * 100%);
1750 }
1751 .eps-grid-item-xl-12 {
1752 flex-grow: 0;
1753 max-width: calc(12 / 12 * 100%);
1754 flex-basis: calc(12 / 12 * 100%);
1755 }
1756 }
1757 @media screen and (min-width: 1600px) {
1758 .eps-grid-item-xxl-1 {
1759 flex-grow: 0;
1760 max-width: calc(1 / 12 * 100%);
1761 flex-basis: calc(1 / 12 * 100%);
1762 }
1763 .eps-grid-item-xxl-2 {
1764 flex-grow: 0;
1765 max-width: calc(2 / 12 * 100%);
1766 flex-basis: calc(2 / 12 * 100%);
1767 }
1768 .eps-grid-item-xxl-3 {
1769 flex-grow: 0;
1770 max-width: calc(3 / 12 * 100%);
1771 flex-basis: calc(3 / 12 * 100%);
1772 }
1773 .eps-grid-item-xxl-4 {
1774 flex-grow: 0;
1775 max-width: calc(4 / 12 * 100%);
1776 flex-basis: calc(4 / 12 * 100%);
1777 }
1778 .eps-grid-item-xxl-5 {
1779 flex-grow: 0;
1780 max-width: calc(5 / 12 * 100%);
1781 flex-basis: calc(5 / 12 * 100%);
1782 }
1783 .eps-grid-item-xxl-6 {
1784 flex-grow: 0;
1785 max-width: calc(6 / 12 * 100%);
1786 flex-basis: calc(6 / 12 * 100%);
1787 }
1788 .eps-grid-item-xxl-7 {
1789 flex-grow: 0;
1790 max-width: calc(7 / 12 * 100%);
1791 flex-basis: calc(7 / 12 * 100%);
1792 }
1793 .eps-grid-item-xxl-8 {
1794 flex-grow: 0;
1795 max-width: calc(8 / 12 * 100%);
1796 flex-basis: calc(8 / 12 * 100%);
1797 }
1798 .eps-grid-item-xxl-9 {
1799 flex-grow: 0;
1800 max-width: calc(9 / 12 * 100%);
1801 flex-basis: calc(9 / 12 * 100%);
1802 }
1803 .eps-grid-item-xxl-10 {
1804 flex-grow: 0;
1805 max-width: calc(10 / 12 * 100%);
1806 flex-basis: calc(10 / 12 * 100%);
1807 }
1808 .eps-grid-item-xxl-11 {
1809 flex-grow: 0;
1810 max-width: calc(11 / 12 * 100%);
1811 flex-basis: calc(11 / 12 * 100%);
1812 }
1813 .eps-grid-item-xxl-12 {
1814 flex-grow: 0;
1815 max-width: calc(12 / 12 * 100%);
1816 flex-basis: calc(12 / 12 * 100%);
1817 }
1818 }
1819 :root {
1820 --menu-title-color: #515962;
1821 }
1822
1823 .eps-theme-dark {
1824 --menu-title-color: #515962;
1825 }
1826
1827 .eps-menu ul {
1828 list-style: none;
1829 padding: 0;
1830 margin: 0;
1831 }
1832 .eps-menu ul li {
1833 display: flex;
1834 }
1835 .eps-menu__title {
1836 padding: 0.5rem 1.875rem;
1837 font-size: 0.6875rem;
1838 line-height: 1.2;
1839 text-transform: uppercase;
1840 font-weight: normal;
1841 color: var(--menu-title-color);
1842 }
1843
1844 :root {
1845 --eps-modal-background-color: #ffffff;
1846 --eps-modal-header-background-color: #2563EB;
1847 --eps-tip-background-color: #F0F7FF;
1848 }
1849
1850 .eps-theme-dark {
1851 --eps-modal-background-color: #0C0D0E;
1852 --eps-modal-header-background-color: #0077CC;
1853 --eps-tip-background-color: #0A1A3D;
1854 }
1855
1856 /** ----------------------------------------------------------------
1857 EPS Modal
1858 ---------------------------------------------------------------- */
1859 .eps-modal {
1860 max-width: 43.75rem;
1861 background: var(--eps-modal-background-color);
1862 border-radius: 0.1875rem;
1863 animation: eps-animation-pop 0.15s cubic-bezier(0.57, 0.53, 0.71, 1.47) forwards;
1864 }
1865 .eps-modal__overlay {
1866 background: rgba(0, 0, 0, 0.5);
1867 position: fixed;
1868 display: flex;
1869 inset: 0;
1870 align-items: center;
1871 justify-content: center;
1872 z-index: 1030;
1873 }
1874 .eps-modal__header {
1875 font-size: 0.875rem;
1876 background: var(--eps-modal-header-background-color);
1877 height: 2.75rem;
1878 padding: 0.625rem 1rem;
1879 border-radius: 0.1875rem;
1880 }
1881 .eps-modal__header, .eps-modal__header .title {
1882 color: #ffffff;
1883 }
1884 .eps-modal__icon {
1885 margin-inline-end: 0.625rem;
1886 }
1887 .eps-modal__body {
1888 padding: 1.875rem;
1889 }
1890 .eps-modal__tip, .eps-modal .eps-tip {
1891 padding: 0.5rem;
1892 padding-inline-start: 0.75rem;
1893 border-inline-start: 3px solid #2563EB;
1894 background-color: var(--eps-tip-background-color);
1895 }
1896 .eps-modal__tip:not(:last-child), .eps-modal .eps-tip:not(:last-child) {
1897 margin-block-end: 1.875rem;
1898 }
1899 .eps-modal__tip:not(:first-child), .eps-modal .eps-tip:not(:first-child) {
1900 margin-block-start: 1.875rem;
1901 }
1902 .eps-modal__section:not(:first-child) {
1903 margin-block-start: 1.875rem;
1904 }
1905 .eps-modal__close-wrapper {
1906 padding-inline-start: 1rem;
1907 border-inline-start: solid 1px #ffffff;
1908 }
1909
1910 .eps-add-new-button {
1911 display: inline-flex;
1912 --eps-add-new-button-size: 1.5rem;
1913 line-height: var(--eps-add-new-button-size);
1914 cursor: pointer;
1915 }
1916 .eps-add-new-button .eps-icon {
1917 background-color: #F3BAFD;
1918 color: #0C0D0E;
1919 width: var(--eps-add-new-button-size);
1920 height: var(--eps-add-new-button-size);
1921 border-radius: 100%;
1922 font-size: calc(var(--eps-add-new-button-size) * 0.75);
1923 text-align: center;
1924 line-height: var(--eps-add-new-button-size);
1925 }
1926 .eps-add-new-button span:not(.sr-only) {
1927 margin-inline-start: 0.625rem;
1928 font-weight: 500;
1929 }
1930 .eps-add-new-button--sm {
1931 --eps-add-new-button-size: 1rem;
1932 }
1933
1934 :root {
1935 --select2-selection-background-color: #ffffff;
1936 --select2-selection-color: #515962;
1937 --select2-selection-border-color: #9DA5AE;
1938 --select2-selection-opened-focused-border-color: #BABFC5;
1939 --select2-single-selection-rendered-color: #515962;
1940 --select2-default-single-selection-background-color: #ffffff;
1941 --select2-default-single-selection-border-color: #9DA5AE;
1942 --select2-default-multiple-selection-background-color: #ffffff;
1943 --select2-default-multiple-selection-choice-background-color: #BABFC5;
1944 --select2-default-multiple-selection-choice-color: #515962;
1945 --select2-default-multiple-selection-choice-border-color: #BABFC5;
1946 --select2-default-multiple-selection-choice-remove-color: #69727D;
1947 --select2-default-multiple-selection-choice-remove-hover-color: #515962;
1948 --select2-default-results-selected-option-background-color: #ffffff;
1949 --select2-default-results-selected-option-color: #515962;
1950 --select2-default-results-highlighted-option-background-color: #5897fb;
1951 --select2-default-results-highlighted-option-color: #ffffff;
1952 --select2-results-selected-option-background-color: #5897fb;
1953 --select2-results-selected-option-color: #ffffff;
1954 --select2-dropdown-background-color: #ffffff;
1955 --select2-dropdown-border-color: #9DA5AE;
1956 }
1957
1958 .eps-theme-dark {
1959 --select2-selection-background-color: #3f444b;
1960 --select2-selection-color: #D5D8DC;
1961 --select2-selection-border-color: #818A96;
1962 --select2-selection-opened-focused-border-color: #9DA5AE;
1963 --select2-single-selection-rendered-color: #D5D8DC;
1964 --select2-default-single-selection-background-color: #3f444b;
1965 --select2-default-single-selection-border-color: #69727D;
1966 --select2-default-multiple-selection-background-color: #3f444b;
1967 --select2-default-multiple-selection-choice-background-color: #69727D;
1968 --select2-default-multiple-selection-choice-color: #D5D8DC;
1969 --select2-default-multiple-selection-choice-border-color: #69727D;
1970 --select2-default-multiple-selection-choice-remove-color: #BABFC5;
1971 --select2-default-multiple-selection-choice-remove-hover-color: #D5D8DC;
1972 --select2-default-results-selected-option-background-color: #3f444b;
1973 --select2-default-results-selected-option-color: #D5D8DC;
1974 --select2-default-results-highlighted-option-background-color: #69727D;
1975 --select2-default-results-highlighted-option-color: #D5D8DC;
1976 --select2-results-selected-option-background-color: #69727D;
1977 --select2-results-selected-option-color: #D5D8DC;
1978 --select2-dropdown-background-color: #3f444b;
1979 --select2-dropdown-border-color: #818A96;
1980 }
1981
1982 .select2-container:not(.select2-container--open):not(.select2-container--focus) .select2-selection--single,
1983 .select2-container:not(.select2-container--open):not(.select2-container--focus) .select2-selection--multiple {
1984 background-color: var(--select2-selection-background-color);
1985 color: var(--select2-selection-color);
1986 border-color: var(--select2-selection-border-color);
1987 }
1988 .select2-container.select2-container--open .select2-selection--single,
1989 .select2-container.select2-container--open .select2-selection--multiple, .select2-container.select2-container--focus .select2-selection--single,
1990 .select2-container.select2-container--focus .select2-selection--multiple {
1991 border-color: var(--select2-selection-opened-focused-border-color);
1992 }
1993 .select2-container.select2-container--default .select2-selection--single .select2-selection__rendered {
1994 color: var(--select2-single-selection-rendered-color);
1995 }
1996 .select2-container--default .select2-selection--single {
1997 background-color: var(--select2-default-single-selection-background-color);
1998 border-color: var(--select2-default-single-selection-border-color);
1999 }
2000 .select2-container--default .select2-selection--multiple {
2001 background-color: var(--select2-default-multiple-selection-background-color);
2002 }
2003 .select2-container--default .select2-selection--multiple .select2-selection__choice {
2004 background-color: var(--select2-default-multiple-selection-choice-background-color);
2005 color: var(--select2-default-multiple-selection-choice-color);
2006 border-color: var(--select2-default-multiple-selection-choice-border-color);
2007 }
2008 .select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
2009 color: var(--select2-default-multiple-selection-choice-remove-color);
2010 }
2011 .select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover {
2012 color: var(--select2-default-multiple-selection-choice-remove-hover-color);
2013 }
2014 .select2-container--default .select2-results__option[aria-selected] {
2015 background-color: var(--select2-default-results-selected-option-background-color);
2016 color: var(--select2-default-results-selected-option-color);
2017 }
2018 .select2-container--default .select2-results__option--highlighted[aria-selected] {
2019 background-color: var(--select2-default-results-highlighted-option-background-color);
2020 color: var(--select2-default-results-highlighted-option-color);
2021 }
2022 .select2-container .select2-results__option[aria-selected=true] {
2023 background-color: var(--select2-results-selected-option-background-color);
2024 color: var(--select2-results-selected-option-color);
2025 }
2026 .select2-container .select2-dropdown {
2027 background-color: var(--select2-dropdown-background-color);
2028 border-color: var(--select2-dropdown-border-color);
2029 }
2030
2031 .eps-notice {
2032 --eps-box-notice-background-color: #F1F2F3;
2033 padding: 0.625rem 1rem;
2034 }
2035 .eps-notice-semantic {
2036 border-inline-start: 3px solid var(--eps-notice-semantic-color);
2037 background-color: var(--eps-notice-semantic-bg);
2038 }
2039 .eps-notice-semantic .eps-notice__icon {
2040 color: var(--eps-notice-semantic-color);
2041 font-size: 1rem;
2042 margin-inline-end: 0.75rem;
2043 }
2044 .eps-notice--warning {
2045 --eps-notice-semantic-color: #F59E0B;
2046 --eps-notice-semantic-bg: #FFFBEB;
2047 }
2048 .eps-notice--danger {
2049 --eps-notice-semantic-color: #DC2626;
2050 --eps-notice-semantic-bg: #FEF1F4;
2051 }
2052 .eps-notice--info {
2053 --eps-notice-semantic-color: #2563EB;
2054 --eps-notice-semantic-bg: #F0F7FF;
2055 }
2056 .eps-notice__text {
2057 margin: 0;
2058 padding: 0;
2059 }
2060 .eps-notice__button-container {
2061 flex-shrink: 0;
2062 margin-inline-start: 1.25rem;
2063 width: auto;
2064 }
2065
2066 .eps-theme-dark .eps-notice {
2067 --eps-box-notice-background-color: #515962;
2068 }
2069 .eps-theme-dark .eps-notice--warning {
2070 --eps-notice-semantic-bg: #311808;
2071 }
2072 .eps-theme-dark .eps-notice--danger {
2073 --eps-notice-semantic-bg: #390A0A;
2074 }
2075 .eps-theme-dark .eps-notice--info {
2076 --eps-notice-semantic-bg: #0A1A3D;
2077 }
2078
2079 .eps-list {
2080 --eps-list-item-separated-border-color: #BABFC5;
2081 padding: 0;
2082 margin: 0;
2083 border-radius: 0.1875rem;
2084 border: 1px solid var(--e-a-border-color);
2085 list-style-type: none;
2086 }
2087 .eps-list--padding {
2088 padding: var(--eps-list-padding);
2089 }
2090 .eps-list__item {
2091 padding: 0;
2092 }
2093 .eps-list__item--padding {
2094 padding: var(--eps-list-item-padding);
2095 }
2096 .eps-list--separated .eps-list__item:not(:last-child) {
2097 border-block-end: 1px solid var(--eps-list-item-separated-border-color);
2098 }
2099
2100 .eps-theme-dark .eps-list {
2101 --eps-list-item-separated-border-color: #3f444b;
2102 }
2103
2104 :root {
2105 --popover-background-color: #ffffff;
2106 --popover-item-color: #515962;
2107 --popover-item-hover-color: #3f444b;
2108 --popover-item-danger-hover-color: #DC2626;
2109 --popover-item-background-color: #ffffff;
2110 --popover-box-shadow-color: rgba(0, 0, 0, 0.15);
2111 --popover-box-shadow-size: 0px 1px 20px;
2112 --popover-arrow-color: #ffffff;
2113 }
2114
2115 .eps-theme-dark {
2116 --popover-background-color: #1f2124;
2117 --popover-item-color: #ffffff;
2118 --popover-item-hover-color: #D5D8DC;
2119 --popover-item-danger-hover-color: #F84343;
2120 --popover-item-background-color: #1f2124;
2121 --popover-box-shadow-color: rgba(0, 0, 0, 0.15);
2122 --popover-box-shadow-size: 0px 1px 20px;
2123 --popover-arrow-color: #1f2124;
2124 }
2125
2126 .eps-popover {
2127 padding: 10px 0;
2128 background-color: var(--popover-background-color);
2129 box-shadow: var(--popover-box-shadow-size) var(--popover-box-shadow-color);
2130 list-style: none;
2131 display: flex;
2132 flex-direction: column;
2133 min-width: 120px;
2134 border-radius: 0.1875rem;
2135 position: absolute;
2136 z-index: 1050;
2137 margin-block-start: 9px;
2138 transform: translateX(-50%);
2139 inset-inline-start: 0.25rem;
2140 }
2141 .eps-popover__background {
2142 position: fixed;
2143 inset: 0;
2144 z-index: 1030;
2145 }
2146 .eps-popover__container {
2147 position: relative;
2148 }
2149 .eps-popover::before {
2150 content: "";
2151 display: block;
2152 position: absolute;
2153 width: 16px;
2154 height: 9px;
2155 margin: 0 0.1875rem 9px;
2156 inset-block-start: -9px;
2157 inset-inline-start: 50%;
2158 transform: translateX(-50%);
2159 border-color: transparent;
2160 border-style: solid;
2161 border-width: 0 calc(16px / 2) 9px calc(16px / 2);
2162 border-block-end-color: var(--popover-arrow-color);
2163 }
2164 .eps-popover--arrow-start::before {
2165 inset-inline-start: 0.1875rem;
2166 transform: none;
2167 }
2168 .eps-popover--arrow-end::before {
2169 inset-inline-start: auto;
2170 inset-inline-end: 0.1875rem;
2171 transform: none;
2172 }
2173 .eps-popover--arrow-none::before {
2174 display: none;
2175 }
2176 .eps-popover__item {
2177 padding: 0.3125rem 1rem;
2178 background-color: var(--popover-item-background-color);
2179 color: var(--popover-item-color);
2180 font-size: 0.6875rem;
2181 font-weight: 500;
2182 line-height: 0.8125rem;
2183 width: 100%;
2184 align-items: center;
2185 cursor: pointer;
2186 }
2187 .eps-popover__item:hover {
2188 color: var(--popover-item-hover-color);
2189 }
2190 .eps-popover__item--danger:hover {
2191 color: var(--popover-item-danger-hover-color);
2192 }
2193 .eps-popover__item .eps-icon {
2194 font-size: inherit;
2195 margin-inline-end: 0.3125rem;
2196 }
2197
2198 .eps-css-grid {
2199 display: grid;
2200 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)));
2201 grid-gap: var(--eps-grid-spacing);
2202 }
2203
2204 .eps-box {
2205 --eps-box-color: #1f2124;
2206 --eps-box-input-color: #1f2124;
2207 padding: 0;
2208 border-radius: 0.1875rem;
2209 color: var(--eps-box-color);
2210 }
2211 .eps-box--padding {
2212 padding: var(--eps-box-padding);
2213 }
2214 .eps-box > input {
2215 width: 100%;
2216 outline: 0;
2217 border: 0;
2218 background-color: transparent;
2219 color: var(--eps-box-input-color);
2220 }
2221
2222 .eps-theme-dark .eps-box {
2223 --eps-box-color: #D5D8DC;
2224 --eps-box-input-color: #D5D8DC;
2225 }
2226
2227 :root {
2228 --checkbox-border-color: #9DA5AE;
2229 --checkbox-hover-border-color: rgb(143.0391061453, 152.1787709497, 162.4608938547);
2230 --checkbox-active-border-color: rgb(170.9608938547, 177.8212290503, 185.5391061453);
2231 --checkbox-background-color: #ffffff;
2232 --checkbox-checked-background-color: #515962;
2233 --checkbox-checked-hover-background-color: rgb(69.4608938547, 76.3212290503, 84.0391061453);
2234 --checkbox-checked-active-background-color: rgb(92.5391061453, 101.6787709497, 111.9608938547);
2235 --checkbox-checked-disabled-background-color: #D5D8DC;
2236 --checkbox-indicator-color: #ffffff;
2237 --checkbox-error-background-color: #DC2626;
2238 }
2239
2240 .eps-theme-dark {
2241 --checkbox-background-color: transparent;
2242 }
2243
2244 .eps-checkbox {
2245 -webkit-appearance: none;
2246 -moz-appearance: none;
2247 appearance: none;
2248 border-radius: 0.1875rem;
2249 width: 15px;
2250 height: 15px;
2251 outline: 0;
2252 background-color: var(--checkbox-background-color);
2253 display: inline-flex;
2254 justify-content: center;
2255 align-items: center;
2256 border: 1px solid var(--checkbox-border-color);
2257 }
2258 .eps-checkbox::after {
2259 display: inline-block;
2260 margin-block-end: calc(0.25 / 2 * 100%);
2261 content: " ";
2262 width: 3px;
2263 height: 6px;
2264 transform: rotate(45deg);
2265 }
2266 .eps-checkbox:hover {
2267 --checkbox-border-color: var(--checkbox-hover-border-color);
2268 }
2269 .eps-checkbox:active {
2270 --checkbox-border-color: var(--checkbox-active-border-color);
2271 }
2272 .eps-checkbox:checked {
2273 --checkbox-background-color: var(--checkbox-checked-background-color);
2274 --checkbox-border-color: var(--checkbox-checked-background-color);
2275 }
2276 .eps-checkbox:checked::after {
2277 border: solid #ffffff;
2278 border-width: 0 1px 1px 0;
2279 }
2280 .eps-checkbox:checked:hover {
2281 --checkbox-background-color: var(--checkbox-checked-hover-background-color);
2282 --checkbox-border-color: var(--checkbox-checked-hover-background-color);
2283 }
2284 .eps-checkbox:checked:active {
2285 --checkbox-background-color: var(--checkbox-checked-active-background-color);
2286 --checkbox-border-color: var(--checkbox-checked-active-background-color);
2287 }
2288 .eps-checkbox:checked:disabled {
2289 --checkbox-background-color: var(--checkbox-checked-disabled-background-color);
2290 --checkbox-border-color: var(--checkbox-checked-disabled-background-color);
2291 }
2292 .eps-checkbox--rounded {
2293 border-radius: 50%;
2294 }
2295 .eps-checkbox--indeterminate::after {
2296 display: inline-block;
2297 margin-block-end: 0;
2298 content: " ";
2299 width: 7px;
2300 height: 0;
2301 transform: rotate(0deg);
2302 border-block-start: 1px solid #ffffff;
2303 }
2304 .eps-checkbox--indeterminate {
2305 --checkbox-background-color: var(--checkbox-checked-background-color);
2306 --checkbox-border-color: var(--checkbox-checked-background-color);
2307 }
2308 .eps-checkbox--error::before, .eps-checkbox--error::after, .eps-checkbox--error:checked::before, .eps-checkbox--error:checked::after {
2309 display: inline-block;
2310 margin-block-end: 0;
2311 content: " ";
2312 width: 7px;
2313 height: 0;
2314 border: solid #ffffff;
2315 border-width: 1px 0 0 0;
2316 position: absolute;
2317 }
2318 .eps-checkbox--error::before, .eps-checkbox--error:checked::before {
2319 transform: rotate(45deg);
2320 }
2321 .eps-checkbox--error::after, .eps-checkbox--error:checked::after {
2322 transform: rotate(-45deg);
2323 }
2324 .eps-checkbox--error, .eps-checkbox--error:hover, .eps-checkbox--error:checked, .eps-checkbox--error:checked:hover {
2325 --checkbox-background-color: var(--checkbox-error-background-color);
2326 --checkbox-border-color: var(--checkbox-error-background-color);
2327 }
2328
2329 :root {
2330 --e-app-drag-drop-background-color: #ffffff;
2331 --e-app-drag-drop-outline-color: #E6E8EA;
2332 }
2333
2334 .eps-theme-dark {
2335 --e-app-drag-drop-background-color: #2b2c31;
2336 --e-app-drag-drop-outline-color: #333438;
2337 }
2338
2339 .e-app-drag-drop {
2340 background-color: var(--e-app-drag-drop-background-color);
2341 outline: 2px dashed var(--e-app-drag-drop-outline-color);
2342 outline-offset: -0.75rem;
2343 margin-block-end: 1.5rem;
2344 padding: 4.125rem;
2345 text-align: center;
2346 }
2347 .e-app-drag-drop--drag-over {
2348 outline-color: #2563EB;
2349 }
2350
2351 .eps-dialog {
2352 border-radius: 3px;
2353 width: 375px;
2354 }
2355 .eps-dialog__close-button {
2356 position: absolute;
2357 inset-block-start: -2.75rem;
2358 inset-inline-end: -2.75rem;
2359 margin-block-start: 0.625rem;
2360 margin-inline-end: 0.625rem;
2361 z-index: 1040;
2362 font-size: 1.25rem;
2363 color: #ffffff;
2364 }
2365 .eps-dialog__content {
2366 padding: 1.5rem 1.875rem 1rem;
2367 font-size: 0.75rem;
2368 }
2369 .eps-dialog__title, .eps-dialog__text {
2370 text-align: center;
2371 }
2372 .eps-dialog__buttons {
2373 display: flex;
2374 }
2375 .eps-dialog__button {
2376 flex: 1;
2377 border-block-start: 1px solid var(--hr-color);
2378 line-height: 2.75rem;
2379 text-align: center;
2380 justify-content: center;
2381 }
2382 .eps-dialog__button:last-child:not(:first-child) {
2383 border-inline-start: 1px solid var(--hr-color);
2384 }
2385
2386 .e-app__popover {
2387 display: none;
2388 position: absolute;
2389 box-shadow: 0 2px 15px rgba(0, 0, 0, 0.3);
2390 border-radius: 6px;
2391 padding: 20px;
2392 width: -moz-fit-content;
2393 width: fit-content;
2394 z-index: 999;
2395 background-color: var(--e-a-bg-default);
2396 }
2397 .e-app__popover:before {
2398 content: "";
2399 position: absolute;
2400 inset-block-start: -16px;
2401 inset-inline-end: var(--popover-arrow-offset-end, 22px);
2402 border: 8px solid transparent;
2403 border-block-end-color: #fff;
2404 }
2405
2406 .eps-inline-link {
2407 color: var(--eps-inline-link-color);
2408 background-color: initial;
2409 border: 0;
2410 padding: 0;
2411 }
2412 .eps-inline-link--color-primary {
2413 --eps-inline-link-color: #0A875A;
2414 }
2415 .eps-inline-link--color-secondary {
2416 --eps-inline-link-color: #818A96;
2417 }
2418 .eps-inline-link--color-danger {
2419 --eps-inline-link-color: #DC2626;
2420 }
2421 .eps-inline-link--color-cta {
2422 --eps-inline-link-color: #93003f;
2423 }
2424 .eps-inline-link--color-link {
2425 --eps-inline-link-color: #515962;
2426 }
2427 .eps-inline-link--color-disabled {
2428 --eps-inline-link-color: #D5D8DC;
2429 }
2430 .eps-inline-link--underline-hover:hover, .eps-inline-link--underline-always, .eps-inline-link--underline-always:hover {
2431 text-decoration: underline;
2432 }
2433 .eps-inline-link--italic {
2434 font-style: italic;
2435 }
2436 .eps-inline-link, .eps-inline-link:focus {
2437 outline: none;
2438 }
2439
2440 .eps-text-field {
2441 --eps-text-field-color: #515962;
2442 --eps-text-field-background-color: transparent;
2443 --eps-text-field-placeholder-color: #69727D;
2444 --eps-text-field-outlined-border-color: #9DA5AE;
2445 --eps-text-field-outlined-focus-border-color: #515962;
2446 --eps-text-field-standard-border-color: #9DA5AE;
2447 --eps-text-field-standard-focus-border-color: #515962;
2448 --border: 1px solid var(--eps-text-field-outlined-border-color);
2449 width: 100%;
2450 color: var(--eps-text-field-color);
2451 background-color: var(--eps-text-field-background-color);
2452 border: 0;
2453 margin-block-end: 5px;
2454 outline: none;
2455 font-family: Roboto, Arial, Helvetica, Verdana, sans-serif;
2456 font-size: 0.875rem;
2457 font-weight: 400;
2458 line-height: 1.5;
2459 }
2460 .eps-text-field--outlined {
2461 border-radius: 0.1875rem;
2462 border: var(--border);
2463 padding: 0.625rem;
2464 }
2465 .eps-text-field--outlined:focus {
2466 border-color: var(--eps-text-field-outlined-focus-border-color);
2467 }
2468 .eps-text-field--standard {
2469 padding-top: 0.625rem;
2470 padding-bottom: 0.625rem;
2471 border-bottom: var(--border);
2472 }
2473 .eps-text-field--standard:focus {
2474 border-color: var(--eps-text-field-standard-focus-border-color);
2475 }
2476 .eps-text-field::-moz-placeholder {
2477 color: var(--eps-text-field-placeholder-color);
2478 font-family: Roboto, Arial, Helvetica, Verdana, sans-serif;
2479 font-size: 0.875rem;
2480 font-weight: 400;
2481 line-height: 1.5;
2482 }
2483 .eps-text-field::placeholder {
2484 color: var(--eps-text-field-placeholder-color);
2485 font-family: Roboto, Arial, Helvetica, Verdana, sans-serif;
2486 font-size: 0.875rem;
2487 font-weight: 400;
2488 line-height: 1.5;
2489 }
2490
2491 .eps-theme-dark .eps-text-field {
2492 --eps-text-field-color: #BABFC5;
2493 --eps-text-field-background-color: transparent;
2494 --eps-text-field-placeholder-color: #9DA5AE;
2495 --eps-text-field-outlined-border-color: #3f444b;
2496 --eps-text-field-outlined-focus-border-color: #9DA5AE;
2497 }
2498 .eps-theme-dark--outlined {
2499 border-color: var(--eps-text-field-outlined-border-color);
2500 }
2501 .eps-theme-dark--outlined:focus {
2502 border-color: var(--eps-text-field-outlined-focus-border-color);
2503 }
2504 .eps-theme-dark--standard {
2505 border-color: var(--eps-text-field-standard-border-color);
2506 }
2507 .eps-theme-dark--standard:focus {
2508 border-color: var(--eps-text-field-standard-focus-border-color);
2509 }
2510
2511 .e-app-import-export-content-layout {
2512 display: flex;
2513 justify-content: center;
2514 height: 100%;
2515 }
2516 .e-app-import-export-content-layout__container {
2517 flex-basis: 1075px;
2518 }
2519
2520 .e-app-export-complete__kit-content-title {
2521 margin: 2.75rem 0 0.625rem;
2522 }
2523
2524 .e-app-export-kit-content {
2525 --e-app-export-kit-content-title-color: #3f444b;
2526 --e-app-export-kit-content-description-color: #515962;
2527 --e-app-export-kit-content-sm-notice-color: #BABFC5;
2528 }
2529 .e-app-export-kit-content__checkbox {
2530 flex-shrink: 0;
2531 margin-inline-end: 0.75rem;
2532 }
2533 .e-app-export-kit-content__title {
2534 color: var(--e-app-export-kit-content-title-color);
2535 }
2536 .e-app-export-kit-content__description {
2537 color: var(--e-app-export-kit-content-description-color);
2538 margin-inline-end: 1.25rem;
2539 }
2540 .e-app-export-kit-content__notice {
2541 margin-block-start: 1rem;
2542 }
2543 .e-app-export-kit-content__small-notice {
2544 font-style: italic;
2545 color: var(--e-app-export-kit-content-sm-notice-color);
2546 }
2547
2548 .eps-theme-dark .e-app-export-kit-content {
2549 --e-app-export-kit-content-title-color: #D5D8DC;
2550 --e-app-export-kit-content-description-color: #BABFC5;
2551 --e-app-export-kit-content-sm-notice-color: #818A96;
2552 }
2553
2554 .e-app-import-export-kit-data {
2555 --e-app-import-export-kit-data-site-area-color: #3f444b;
2556 --e-app-import-export-kit-data-included-color: #69727D;
2557 }
2558 .e-app-import-export-kit-data__site-area, .e-app-import-export-kit-data__included {
2559 margin-block-end: 0;
2560 }
2561 .e-app-import-export-kit-data__site-area {
2562 color: var(--e-app-import-export-kit-data-site-area-color);
2563 font-weight: bold;
2564 }
2565 .e-app-import-export-kit-data__included {
2566 color: var(--e-app-import-export-kit-data-included-color);
2567 }
2568
2569 .eps-theme-dark .e-app-import-export-kit-data {
2570 --e-app-import-export-kit-data-site-area-color: #BABFC5;
2571 --e-app-import-export-kit-data-included-color: #9DA5AE;
2572 }
2573
2574 .e-app-import-resolver {
2575 --e-app-import-resolver-panel-header-background-color: #ffffff;
2576 --e-app-import-resolver-panel-body-background-color: rgba(255, 255, 255, 0.5);
2577 --e-app-import-resolver-conflicts-asset-border-color: #818A96;
2578 --e-app-import-resolver-conflicts-asset-inactive-color: #69727D;
2579 padding-block-end: 1.25rem;
2580 }
2581 .e-app-import-resolver__notice {
2582 margin-block-end: 1.25rem;
2583 }
2584 .e-app-import-resolver__panel, .e-app-import-resolver__panel:hover {
2585 background-color: initial;
2586 }
2587 .e-app-import-resolver__panel-header {
2588 background-color: var(--e-app-import-resolver-panel-header-background-color);
2589 }
2590 .e-app-import-resolver__panel-body {
2591 background-color: var(--e-app-import-resolver-panel-body-background-color);
2592 }
2593 .e-app-import-resolver-conflicts__container {
2594 box-shadow: 0 2px 3px 1px var(--color-box-shadow-color);
2595 }
2596 .e-app-import-resolver-conflicts__checkbox {
2597 flex-shrink: 0;
2598 margin-inline-end: 0.75rem;
2599 }
2600 .e-app-import-resolver-conflicts__title {
2601 line-height: 1;
2602 }
2603 .e-app-import-resolver-conflicts__asset:not(:first-child) {
2604 border-inline-start: 2px solid var(--e-app-import-resolver-conflicts-asset-border-color);
2605 padding-inline-start: 1rem;
2606 margin-inline-start: 1rem;
2607 }
2608 .e-app-import-resolver-conflicts__asset:not(.active) {
2609 color: var(--e-app-import-resolver-conflicts-asset-inactive-color);
2610 }
2611 .e-app-import-resolver-conflicts__edit-template {
2612 margin-inline-start: 0.3125rem;
2613 }
2614
2615 .eps-theme-dark .e-app-import-resolver {
2616 --e-app-import-resolver-panel-header-background-color: #69727D;
2617 --e-app-import-resolver-panel-body-background-color: rgba(0, 0, 0, 0.05);
2618 --e-app-import-resolver-conflicts-asset-border-color: #818A96;
2619 --e-app-import-resolver-conflicts-asset-inactive-color: #9DA5AE;
2620 }
2621
2622 .eps-panel {
2623 --eps-panel-header-background-color: transparent;
2624 --eps-panel-body-background-color: transparent;
2625 }
2626 .eps-panel, .eps-panel:hover {
2627 background-color: initial;
2628 }
2629 .eps-panel__header {
2630 background-color: var(--eps-panel-header-background-color);
2631 border-radius: 0.1875rem;
2632 }
2633 .eps-panel__body {
2634 background-color: var(--eps-panel-body-background-color);
2635 border-radius: 0 0 0.1875rem 0.1875rem;
2636 }
2637
2638 .eps-theme-dark .eps-panel {
2639 --eps-panel-header-background-color: transparent;
2640 --eps-panel-body-background-color: transparent;
2641 }
2642
2643 .e-app-export-kit {
2644 padding-block-end: 1.25rem;
2645 }
2646 .e-app-export-kit-information__field-header {
2647 margin-block-end: 0.625rem;
2648 }
2649 .e-app-export-kit-information__label {
2650 margin: 0;
2651 }
2652 .e-app-export-kit-information__info-icon {
2653 margin-inline-start: 0.625rem;
2654 }
2655 .e-app-export-kit-information__content {
2656 gap: 16px;
2657 }
2658 .e-app-export-kit-information__field--error {
2659 border-color: var(--e-a-color-danger);
2660 }
2661 .e-app-export-kit-information__error-container {
2662 height: 20px;
2663 display: flex;
2664 align-items: flex-start;
2665 margin-block-start: 4px;
2666 }
2667 .e-app-export-kit-information__validation-error {
2668 color: var(--e-a-color-danger);
2669 }
2670 .e-app-export-kit__content {
2671 gap: 20px;
2672 }
2673
2674 .e-app-import-export-info-modal__section:not(:first-child) {
2675 margin-block-start: 1.875rem;
2676 }
2677 .e-app-import-export-info-modal__heading {
2678 margin-block-end: 1.25rem;
2679 }
2680
2681 :root {
2682 --eps-badge-background-color: #ffffff;
2683 }
2684
2685 .eps-theme-dark {
2686 --eps-badge-background-color: #515962;
2687 }
2688
2689 .eps-badge {
2690 display: inline-block;
2691 background: var(--eps-badge-background-color);
2692 padding: 0 0.5rem;
2693 line-height: 1.8;
2694 box-shadow: 0 3px 6px var(--color-box-shadow-color);
2695 border-radius: 4px;
2696 font-size: 0.75rem;
2697 }
2698 .eps-badge--sm {
2699 font-size: 0.625rem;
2700 border-radius: 3px;
2701 padding: 0 0.3125rem;
2702 line-height: 1.5;
2703 }
2704
2705 .eps-collapse__title {
2706 cursor: pointer;
2707 padding: 0.3125rem 0;
2708 display: flex;
2709 align-items: center;
2710 justify-content: space-between;
2711 width: 100%;
2712 background: transparent;
2713 border: none;
2714 color: inherit;
2715 }
2716 .eps-collapse__title:focus {
2717 outline: none;
2718 }
2719 .eps-collapse__icon {
2720 transition: all 150ms;
2721 scale: calc(1 * var(--direction-multiplier)) 1;
2722 }
2723 .eps-collapse__content {
2724 margin-block-start: 0.625rem;
2725 display: none;
2726 }
2727 .eps-collapse[data-open] .eps-collapse__content {
2728 display: block;
2729 }
2730 .eps-collapse[data-open] .eps-collapse__icon {
2731 transform: rotate(90deg);
2732 }
2733
2734 .e-kit-library-promotion {
2735 --e-kit-library-promotion-color: tints(600);
2736 }
2737
2738 .eps-theme-dark .e-kit-library-promotion {
2739 --e-kit-library-promotion-color: dark-tints(400);
2740 }
2741
2742 .e-kit-library-promotion {
2743 width: 100%;
2744 text-align: center;
2745 margin-block-start: 1.875rem;
2746 color: var(--e-kit-library-promotion-color);
2747 }
2748
2749 .e-kit-library__error-screen {
2750 margin-block-start: 2.75rem;
2751 }
2752 .e-kit-library__error-screen-title {
2753 margin-block-start: 2.75rem;
2754 margin-block-end: 0;
2755 }
2756 .e-kit-library__error-screen-description {
2757 margin-block-start: 1.5rem;
2758 color: #69727D;
2759 text-align: center;
2760 max-width: 520px;
2761 }
2762
2763 .e-kit-library__kit-favorite-actions {
2764 padding: 0.3125rem;
2765 transition: 0.3s all;
2766 border-radius: 4px;
2767 }
2768 .e-kit-library__kit-favorite-actions--active {
2769 color: #DC2626;
2770 }
2771 .e-kit-library__kit-favorite-actions--loading {
2772 opacity: 50%;
2773 cursor: default;
2774 }
2775 .e-kit-library__kit-favorite-actions:hover {
2776 background-color: rgba(220, 38, 38, 0.1);
2777 }
2778
2779 .e-kit-library__filter-indication {
2780 margin-block-start: 1.5rem;
2781 display: flex;
2782 align-items: center;
2783 }
2784 .e-kit-library__filter-indication-text {
2785 margin-block-end: 0;
2786 display: flex;
2787 align-items: center;
2788 }
2789 .e-kit-library__filter-indication-badge {
2790 margin-inline-start: 0.3125rem;
2791 display: flex;
2792 align-items: center;
2793 }
2794 .e-kit-library__filter-indication-badge-remove {
2795 margin-inline-start: 0.3125rem;
2796 font-size: 0.875rem;
2797 }
2798 .e-kit-library__filter-indication-button {
2799 margin-inline-start: 1.5rem;
2800 }
2801
2802 #eps-app-header-btn-promotion,
2803 #eps-app-header-btn-connect {
2804 margin-inline-start: 0.625rem;
2805 margin-inline-end: 0.625rem;
2806 }
2807
2808 #eps-app-header-btn-apply {
2809 margin-inline-start: 0.625rem;
2810 }
2811
2812 #eps-app-header-btn-download {
2813 margin-inline-end: 1rem;
2814 margin-inline-start: 1rem;
2815 }
2816
2817 .e-kit-library__apply-button {
2818 display: flex;
2819 align-items: center;
2820 justify-content: center;
2821 gap: 0.3125rem;
2822 }
2823
2824 .e-kit-library__kit-item {
2825 --e-kit-library-kit-item-overlay-promotion-button-background-color: #D5D8DC;
2826 }
2827
2828 .eps-theme-dark .e-kit-library__kit-item {
2829 --e-kit-library-kit-item-overlay-promotion-button-background-color: #515962;
2830 }
2831
2832 .e-kit-library__kit-item-overlay {
2833 height: 100%;
2834 }
2835 .e-kit-library__kit-item-overlay-overview-button {
2836 display: flex;
2837 flex-direction: column;
2838 align-items: center;
2839 justify-content: center;
2840 color: white;
2841 height: 100%;
2842 width: 100%;
2843 }
2844 .e-kit-library__kit-item-overlay-overview-button > i {
2845 font-size: 2rem;
2846 margin-block-end: 5px;
2847 }
2848 .e-kit-library__kit-item-overlay-overview-button > span {
2849 font-size: 0.9rem;
2850 }
2851 .e-kit-library__kit-item-overlay-promotion-button {
2852 display: flex;
2853 width: 100%;
2854 background: white;
2855 align-items: center;
2856 justify-content: center;
2857 padding: 10px;
2858 font-size: 13px;
2859 color: #93003f;
2860 background: var(--e-kit-library-kit-item-overlay-promotion-button-background-color);
2861 }
2862 .e-kit-library__kit-item-overlay-promotion-button > * {
2863 margin: 0 3px;
2864 }
2865 .e-kit-library__kit-item-subscription-plan-badge {
2866 --e-a-color-brand: #467FF7;
2867 }
2868 .e-kit-library__kit-item-subscription-plan-badge.promoted {
2869 --e-a-color-brand: #92003B;
2870 }
2871 .e-kit-library__kit-item-subscription-plan-badge {
2872 position: absolute;
2873 inset-block-start: 0;
2874 inset-inline-end: 0;
2875 margin: 0.3125rem;
2876 background-color: var(--e-a-color-brand);
2877 color: #ffffff;
2878 text-transform: uppercase;
2879 }
2880 .e-kit-library__kit-item-header {
2881 position: relative;
2882 }
2883 .e-kit-library__kit-item-lock-icon {
2884 font-size: 14px;
2885 margin-inline-end: 8px;
2886 color: var(--card-headline-color);
2887 cursor: pointer;
2888 }
2889 .e-kit-library__kit-item-actions-menu i {
2890 font-size: 16px;
2891 }
2892 .e-kit-library__kit-item-actions-popover {
2893 display: flex;
2894 flex-direction: column;
2895 align-items: start;
2896 min-width: 0;
2897 padding: 12px 0;
2898 position: absolute;
2899 inset-block-start: 25px;
2900 inset-inline-start: 100%;
2901 transform: translateX(calc(-100% * var(--direction-multiplier)));
2902 }
2903 .e-kit-library__kit-item-actions-popover-item {
2904 display: flex;
2905 height: 30px;
2906 width: 100%;
2907 align-items: center;
2908 gap: 8px;
2909 padding: 0 12px;
2910 cursor: pointer;
2911 }
2912 .e-kit-library__kit-item-actions-popover-item i {
2913 font-size: 16px;
2914 }
2915 .e-kit-library__kit-item-actions-popover-item:hover {
2916 background-color: var(--e-a-bg-hover);
2917 }
2918 .e-kit-library__kit-item-actions-popover-item--danger {
2919 color: var(--e-a-color-danger);
2920 }
2921 .e-kit-library__kit-item-actions-popover-item--danger:hover {
2922 background-color: var(--e-a-bg-danger);
2923 }
2924 .e-kit-library__kit-item-actions-popover-item--danger i {
2925 color: var(--e-a-color-danger);
2926 }
2927 .e-kit-library__kit-item-cloud-overlay {
2928 height: 100%;
2929 display: flex;
2930 flex-direction: column;
2931 align-items: center;
2932 justify-content: center;
2933 }
2934 .e-kit-library__kit-item-cloud-overlay-import-button {
2935 display: flex;
2936 align-items: center;
2937 justify-content: center;
2938 padding: 8px 22px;
2939 gap: 8px;
2940 }
2941 .e-kit-library__kit-item-cloud-overlay-import-button > i {
2942 font-size: 20px;
2943 font-weight: 600;
2944 }
2945 .e-kit-library__kit-item-cloud-overlay-import-button > span {
2946 font-size: 15px;
2947 }
2948 .e-kit-library__kit-item-cloud-overlay i.eicon-lock {
2949 font-size: 48px;
2950 color: rgba(255, 255, 255, 0.8);
2951 cursor: pointer;
2952 }
2953 .e-kit-library__kit-item--locked {
2954 opacity: 0.6;
2955 }
2956 .e-kit-library__kit-item--locked .eps-card__image {
2957 opacity: 0.7;
2958 }
2959 .e-kit-library__kit-item--locked .eps-card__overlay {
2960 background-color: rgba(0, 0, 0, 0.5);
2961 }
2962
2963 :root {
2964 --e-kit-library-header-back-border: 1px solid var(--e-a-border-color);
2965 --e-kit-library-header-back-color: #69727D;
2966 }
2967
2968 .eps-theme-dark {
2969 --e-kit-library-header-back-border: 1px solid #818A96;
2970 --e-kit-library-header-back-color: #BABFC5;
2971 }
2972
2973 .e-kit-library__header-back {
2974 color: var(--e-kit-library-header-back-color);
2975 padding-inline-end: 1.25rem;
2976 padding-inline-start: 0.3125rem;
2977 display: inline-flex;
2978 justify-content: center;
2979 align-items: center;
2980 height: 100%;
2981 border-inline-end: var(--e-kit-library-header-back-border);
2982 }
2983 .e-kit-library__header-back-container {
2984 flex: 1;
2985 height: 100%;
2986 }
2987 .e-kit-library__header-back .eps-icon {
2988 scale: calc(1 * var(--direction-multiplier)) 1;
2989 }
2990
2991 .e-kit-library__page-loader {
2992 width: 100%;
2993 height: 100%;
2994 display: grid;
2995 place-items: center;
2996 font-size: 1.85rem;
2997 color: #69727D;
2998 }
2999
3000 .eps-search-input {
3001 --eps-search-input-background-color: #D5D8DC;
3002 --eps-search-input-background-color-focus: #ffffff;
3003 --eps-search-input-color: #3f444b;
3004 --eps-search-input-placeholder-color: #69727D;
3005 }
3006
3007 .eps-theme-dark .eps-search-input {
3008 --eps-search-input-background-color: #515962;
3009 --eps-search-input-background-color-focus: #69727D;
3010 --eps-search-input-color: #BABFC5;
3011 --eps-search-input-placeholder-color: #BABFC5;
3012 }
3013
3014 .eps-search-input {
3015 width: 100%;
3016 font-size: 0.9375rem;
3017 padding: 0.625rem 2.75rem;
3018 border: none;
3019 background: var(--eps-search-input-background-color);
3020 outline: none;
3021 color: var(--eps-search-input-color);
3022 line-height: 1;
3023 height: 2.75rem;
3024 }
3025 .eps-search-input--sm {
3026 font-size: 0.8125rem;
3027 padding: 0.5rem 1.875rem;
3028 }
3029 .eps-search-input:focus {
3030 background: var(--eps-search-input-background-color-focus);
3031 }
3032 .eps-search-input::-moz-placeholder {
3033 color: var(--eps-search-input-placeholder-color);
3034 font-style: italic;
3035 }
3036 .eps-search-input::placeholder {
3037 color: var(--eps-search-input-placeholder-color);
3038 font-style: italic;
3039 }
3040 .eps-search-input__container {
3041 position: relative;
3042 }
3043 .eps-search-input__icon {
3044 font-size: 1.25rem;
3045 padding: 0.625rem;
3046 color: #69727D;
3047 position: absolute;
3048 inset-block-start: 0;
3049 inset-inline-start: 0;
3050 height: 100%;
3051 display: flex;
3052 align-items: center;
3053 justify-content: center;
3054 }
3055 .eps-search-input__icon--sm {
3056 font-size: 0.75rem;
3057 }
3058 .eps-search-input__clear-icon {
3059 font-size: 0.875rem;
3060 padding: 0.625rem;
3061 color: #69727D;
3062 position: absolute;
3063 inset-block-start: 0;
3064 inset-inline-end: 0;
3065 height: 100%;
3066 display: flex;
3067 align-items: center;
3068 justify-content: center;
3069 }
3070 .eps-search-input__clear-icon--sm {
3071 font-size: 0.6875rem;
3072 }
3073
3074 :root {
3075 --eps-sort-select-select-background-color: #D5D8DC;
3076 --eps-sort-select-select-color: #3f444b;
3077 --eps-sort-select-button-background-color: #D5D8DC;
3078 --eps-sort-select-button-border: 1px solid var(--e-a-border-color);
3079 }
3080
3081 .eps-theme-dark {
3082 --eps-sort-select-select-background-color: #515962;
3083 --eps-sort-select-select-color: #BABFC5;
3084 --eps-sort-select-button-background-color: #515962;
3085 --eps-sort-select-button-border: 1px solid #1f2124;
3086 }
3087
3088 .eps-sort-select {
3089 width: 100%;
3090 font-size: 0.9375rem;
3091 display: flex;
3092 }
3093 .eps-sort-select__select-wrapper {
3094 flex: 1;
3095 position: relative;
3096 }
3097 .eps-sort-select__select-wrapper::after {
3098 content: "\e8ad";
3099 font-family: eicons;
3100 position: absolute;
3101 inset-inline-end: 0.625rem;
3102 inset-block: 0;
3103 color: #69727D;
3104 display: flex;
3105 align-items: center;
3106 justify-content: center;
3107 pointer-events: none;
3108 }
3109 .eps-sort-select__select {
3110 width: 100%;
3111 padding: 0.625rem 0.625rem;
3112 border: none;
3113 background: var(--eps-sort-select-select-background-color);
3114 outline: none;
3115 color: var(--eps-sort-select-select-color);
3116 line-height: 1;
3117 cursor: pointer;
3118 height: 2.75rem;
3119 -moz-appearance: none;
3120 appearance: none;
3121 -webkit-appearance: none;
3122 border-radius: 0;
3123 }
3124 .eps-sort-select__button {
3125 padding: 0.75rem 0.75rem;
3126 background: var(--eps-sort-select-button-background-color);
3127 border-inline-start: var(--eps-sort-select-button-border);
3128 line-height: 1;
3129 color: #69727D;
3130 }
3131
3132 .e-kit-library__tags-filter {
3133 --e-kit-library-tags-filter-list-search-background-color: #ffffff;
3134 }
3135
3136 .eps-theme-dark .e-kit-library__tags-filter {
3137 --e-kit-library-tags-filter-list-search-background-color: #515962;
3138 }
3139
3140 .e-kit-library__tags-filter {
3141 margin-block-start: 2.75rem;
3142 }
3143 .e-kit-library__tags-filter-list {
3144 margin-block-end: 2.75rem;
3145 }
3146 .e-kit-library__tags-filter-list .eps-collapse__title {
3147 padding-inline-end: 1.875rem;
3148 padding-inline-start: 1.875rem;
3149 text-transform: uppercase;
3150 }
3151 .e-kit-library__tags-filter-list .eps-collapse__content {
3152 margin: 0.3125rem 1.875rem;
3153 }
3154 .e-kit-library__tags-filter-list-container {
3155 max-height: 250px;
3156 overflow: auto;
3157 }
3158 .e-kit-library__tags-filter-list-search {
3159 margin-block-end: 0.625rem;
3160 }
3161 .e-kit-library__tags-filter-list-search .eps-search-input {
3162 background: var(--e-kit-library-tags-filter-list-search-background-color);
3163 }
3164 .e-kit-library__tags-filter-list-item {
3165 padding: 0.625rem 0;
3166 display: flex;
3167 align-items: center;
3168 font-weight: 500;
3169 }
3170 .e-kit-library__tags-filter-list-item input {
3171 margin-inline-end: 0.3125rem;
3172 }
3173
3174 .e-kit-library #eps-app-header-btn-refetch {
3175 padding: 0;
3176 }
3177
3178 .e-kit-library-header-info-modal-container {
3179 margin-block-end: 2.75rem;
3180 }
3181
3182 .e-kit-library__tooltip {
3183 padding: 5px 12px;
3184 color: #ffffff;
3185 background-color: #26292C;
3186 font-size: 10px;
3187 }
3188 .e-kit-library__tooltip:before {
3189 border-block-end-color: #26292C;
3190 }
3191
3192 .e-kit-library__index-layout-container {
3193 flex-grow: 1;
3194 overflow-y: auto;
3195 display: flex;
3196 flex-direction: column;
3197 }
3198 .e-kit-library__index-layout-heading {
3199 padding: 1.875rem 2.75rem;
3200 position: sticky;
3201 inset-block-start: -1px;
3202 width: 100%;
3203 z-index: 2;
3204 background-color: var(--app-background-color);
3205 gap: 1.5rem;
3206 align-items: center;
3207 }
3208 .e-kit-library__index-layout-heading-search, .e-kit-library__index-layout-heading-sort {
3209 min-width: 265px;
3210 }
3211 .e-kit-library__index-layout-heading-search {
3212 flex: 1;
3213 }
3214 .e-kit-library__index-layout-heading-quota {
3215 display: flex;
3216 align-items: center;
3217 justify-content: flex-end;
3218 }
3219 .e-kit-library__index-layout-main {
3220 padding-block-start: 0;
3221 padding-block-end: 1.5rem;
3222 overflow-y: hidden;
3223 height: auto;
3224 flex: 1 0 auto;
3225 display: flex;
3226 flex-direction: column;
3227 justify-content: space-between;
3228 }
3229 .e-kit-library__index-layout-main.e-kit-library__connect-container {
3230 justify-content: center;
3231 align-items: center;
3232 }
3233 .e-kit-library__connect-button {
3234 background-color: var(--e-a-btn-bg-primary);
3235 color: var(--e-a-btn-color);
3236 border-radius: 4px;
3237 padding: 8px;
3238 }
3239 .e-kit-library__connect-button:hover {
3240 opacity: 0.8;
3241 }
3242 .e-kit-library__upgrade-button {
3243 background-color: var(--e-a-color-accent);
3244 color: var(--e-a-color-txt-invert);
3245 border-radius: 4px;
3246 padding: 8px;
3247 }
3248 .e-kit-library__upgrade-button:hover {
3249 opacity: 0.8;
3250 }
3251 .e-kit-library .eicon-library-cloud-connect,
3252 .e-kit-library .eicon-library-subscription-upgrade {
3253 font-size: 65px;
3254 }
3255 .e-kit-library .connect-badge {
3256 color: #C00BB9;
3257 margin-inline-start: 10px;
3258 }
3259 .e-kit-library .upgrade-badge {
3260 color: #93003f;
3261 border: 1px solid #93003f;
3262 border-radius: 10px;
3263 padding: 2px 6px;
3264 margin-inline-start: 10px;
3265 }
3266
3267 .e-kit-library__tags-filter {
3268 --e-kit-library-item-sidebar-header-title-color: #515962;
3269 --e-kit-library-item-sidebar-description-color: #515962;
3270 --e-kit-library-item-information-text-color: #515962;
3271 }
3272
3273 .eps-theme-dark .e-kit-library__tags-filter {
3274 --e-kit-library-item-sidebar-header-title-color: #BABFC5;
3275 --e-kit-library-item-sidebar-description-color: #BABFC5;
3276 --e-kit-library-item-information-text-color: #BABFC5;
3277 }
3278
3279 .e-kit-library__item-sidebar {
3280 padding: 1.5rem 1.875rem;
3281 }
3282 .e-kit-library__item-sidebar-header {
3283 display: flex;
3284 align-items: center;
3285 justify-content: space-between;
3286 }
3287 .e-kit-library__item-sidebar-header-title {
3288 color: var(--e-kit-library-item-sidebar-header-title-color);
3289 margin-block-end: 0;
3290 }
3291 .e-kit-library__item-sidebar-thumbnail {
3292 margin-block-start: 1.5rem;
3293 box-shadow: 0 4px 10px var(--color-box-shadow-color);
3294 }
3295 .e-kit-library__item-sidebar-description {
3296 margin-block-start: 1.5rem;
3297 color: var(--e-kit-library-item-sidebar-description-color);
3298 }
3299 .e-kit-library__item-sidebar-collapse-tags {
3300 margin-block-start: 2.75rem;
3301 }
3302 .e-kit-library__item-sidebar-collapse-info {
3303 margin-block-start: 1.875rem;
3304 }
3305 .e-kit-library__item-sidebar-tags-container {
3306 gap: 0.625rem;
3307 }
3308 .e-kit-library__item-information-text {
3309 font-size: 0.8125rem;
3310 color: var(--e-kit-library-item-information-text-color);
3311 margin-block-end: 0.3125rem;
3312 }
3313
3314 .e-kit-library {
3315 --e-kit-library-content-overview-group-title-color: #515962;
3316 }
3317
3318 .eps-theme-dark .e-kit-library {
3319 --e-kit-library-content-overview-group-title-color: #BABFC5;
3320 }
3321
3322 .e-kit-library__content-overview-group-item {
3323 margin-block-end: 2.75rem;
3324 }
3325 .e-kit-library__content-overview-group-title {
3326 margin-block-end: 1.875rem;
3327 color: var(--e-kit-library-content-overview-group-title-color);
3328 }
3329
3330 .e-kit-library__preview-responsive-controls {
3331 width: auto;
3332 }
3333 .e-kit-library__preview-responsive-controls-item {
3334 margin: 0 0.3125rem;
3335 color: #69727D;
3336 padding: 0.3125rem;
3337 }
3338 .e-kit-library__preview-responsive-controls-item:hover {
3339 background: rgba(37, 99, 235, 0.1);
3340 border-radius: 3px;
3341 transition: all 0.3s;
3342 }
3343 .e-kit-library__preview-responsive-controls-item--active {
3344 color: #2563EB;
3345 }
3346
3347 .e-kit-library__preview-loader {
3348 position: absolute;
3349 inset-block-start: 0;
3350 inset-inline-start: 0;
3351 z-index: 0;
3352 }
3353 .e-kit-library__preview-iframe {
3354 border: none;
3355 transition: all 0.3s;
3356 box-shadow: 0 4px 10px var(--color-box-shadow-color);
3357 }
3358 .e-kit-library__preview-iframe-container {
3359 overflow-y: auto;
3360 position: relative;
3361 z-index: 1;
3362 }
3363
3364 .e-app-collapse {
3365 --e-app-collapse-icon-color: #515962;
3366 }
3367 .e-app-collapse-toggle {
3368 position: relative;
3369 }
3370 .e-app-collapse-toggle--active {
3371 cursor: pointer;
3372 }
3373 .e-app-collapse-toggle__icon {
3374 color: var(--e-app-collapse-icon-color);
3375 display: flex;
3376 align-items: center;
3377 justify-content: center;
3378 font-size: 0.875rem;
3379 position: absolute;
3380 inset-block-start: 50%;
3381 inset-inline-end: var(--e-app-collapse-toggle-icon-spacing);
3382 transform: translateY(-50%);
3383 }
3384 .e-app-collapse-toggle__icon:before {
3385 transition: all 0.2s linear;
3386 }
3387 .e-app-collapse-content {
3388 display: none;
3389 }
3390 .e-app-collapse--opened .e-app-collapse-toggle__icon:before {
3391 transform: rotate(-180deg);
3392 }
3393 .e-app-collapse--opened .e-app-collapse-content {
3394 display: block;
3395 }
3396
3397 [dir=rtl] .e-app-collapse-toggle__icon {
3398 inset-inline-start: var(--e-app-collapse-toggle-icon-spacing);
3399 inset-inline-end: initial;
3400 }
3401
3402 .eps-theme-dark .e-app-collapse {
3403 --e-app-collapse-icon-color: #BABFC5;
3404 }
3405
3406 .e-app-import-plugins {
3407 --e-app-import-plugins-selection-section-heading-color: #515962;
3408 padding-block-end: 1.5rem;
3409 }
3410 .e-app-import-plugins__section {
3411 margin-block-start: 1.875rem;
3412 }
3413 .e-app-import-plugins__section-heading {
3414 color: var(--e-app-import-plugins-selection-section-heading-color);
3415 margin-block-end: 1rem;
3416 }
3417 .e-app-import-plugins__versions-notice {
3418 margin-block-end: 0.75rem;
3419 }
3420
3421 .eps-theme-dark .e-app-import-plugins {
3422 --e-app-import-plugins-selection-section-heading-color: #BABFC5;
3423 }
3424
3425 .eps-table {
3426 --eps-table-body-color: #3f444b;
3427 border-spacing: 0 2px;
3428 table-layout: fixed;
3429 width: 100%;
3430 border: 1px solid var(--e-a-border-color);
3431 border-radius: 0.1875rem;
3432 }
3433 .eps-table__checkboxes-column {
3434 width: 1.875rem;
3435 }
3436 .eps-table__checkbox {
3437 display: flex;
3438 flex-shrink: 0;
3439 }
3440 .eps-table__cell {
3441 padding: 1rem;
3442 }
3443 .eps-table__head .eps-table__cell {
3444 text-align: start;
3445 }
3446 .eps-table__row {
3447 border-block-end: 1px solid var(--e-a-border-color);
3448 }
3449 .eps-table__row:last-child {
3450 border-block-end: none;
3451 }
3452 .eps-table__body .eps-table__cell:first-child {
3453 border-radius: 0.1875rem 0 0 0.1875rem;
3454 }
3455 .eps-table__body .eps-table__cell:last-child {
3456 border-radius: 0 0.1875rem 0.1875rem 0;
3457 }
3458 .eps-table--selection .eps-table__cell:first-child {
3459 padding-inline-end: 0;
3460 }
3461
3462 .eps-theme-dark .eps-table {
3463 --eps-table-body-color: #BABFC5;
3464 }
3465
3466 [dir=rtl] .eps-table__body [dir=rtl] .eps-table__cell:first-child {
3467 border-radius: 0 0.1875rem 0.1875rem 0;
3468 }
3469 [dir=rtl] .eps-table__body [dir=rtl] .eps-table__cell:last-child {
3470 border-radius: 0.1875rem 0 0 0.1875rem;
3471 }
3472
3473 .e-app-import-plugins-pro-banner {
3474 --e-app-import-plugins-pro-banner-heading-color: #3f444b;
3475 --e-app-import-plugins-pro-banner-description-color: #515962;
3476 margin-block-end: 1.875rem;
3477 }
3478 .e-app-import-plugins-pro-banner__heading {
3479 color: var(--e-app-import-plugins-pro-banner-heading-color);
3480 margin-block-end: 0.625rem;
3481 }
3482 .e-app-import-plugins-pro-banner__description {
3483 color: var(--e-app-import-plugins-pro-banner-description-color);
3484 margin-block-end: 0;
3485 }
3486
3487 .eps-theme-dark .e-app-import-plugins-pro-banner {
3488 --e-app-import-plugins-pro-banner-heading-color: #9DA5AE;
3489 --e-app-import-plugins-pro-banner-description-color: #BABFC5;
3490 }
3491
3492 .e-app-export-plugins {
3493 padding-block-end: 1.25rem;
3494 }
3495
3496 .e-app-import-content {
3497 padding-block-end: 1.25rem;
3498 }
3499 .e-app-import-content__plugins-notice {
3500 margin-block-end: 1.25rem;
3501 }
3502
3503 .e-app-import-plugins-activation__installing-plugins {
3504 padding: 0.625rem 0;
3505 }
3506 .e-app-import-plugins-activation__plugin-name {
3507 margin-inline-start: 0.5rem;
3508 }
3509 .e-app-import-plugins-activation__plugin-status-item {
3510 margin-block-end: 0.75rem;
3511 }
3512
3513 .e-app-import-export-plugins-table__cell-content {
3514 margin-block-end: 0;
3515 text-transform: capitalize;
3516 }
3517
3518 .e-app-import-export-loader {
3519 --e-app-import-export-loader-color: #818A96;
3520 color: var(--e-app-import-export-loader-color);
3521 font-size: 50px;
3522 }
3523 .e-app-import-export-loader.eicon-loading {
3524 font-size: 1.85rem;
3525 }
3526 .e-app-import-export-loader--absolute-center {
3527 position: absolute;
3528 inset-block-start: 50%;
3529 inset-inline-start: 50%;
3530 transform: translateX(-50%) translateY(-50%);
3531 }
3532
3533 .eps-theme-dark .e-app-import-export-loader {
3534 --e-app-import-export-loader-color: #818A96;
3535 }
3536
3537 .e-app-import-export-message-banner {
3538 --e-app-import-export-message-banner-heading-color: #3f444b;
3539 --e-app-import-export-message-banner-description-color: #515962;
3540 margin-block-end: 1.875rem;
3541 }
3542 .e-app-import-export-message-banner__heading {
3543 color: var(--e-app-import-export-message-banner-heading-color);
3544 margin-block-end: 0.625rem;
3545 }
3546 .e-app-import-export-message-banner__description {
3547 color: var(--e-app-import-export-message-banner-description-color);
3548 margin-block-end: 0;
3549 }
3550
3551 .eps-theme-dark .e-app-import-export-message-banner {
3552 --e-app-import-export-message-banner-heading-color: #9DA5AE;
3553 --e-app-import-export-message-banner-description-color: #BABFC5;
3554 }
3555
3556 .e-app-import-connect-pro-notice {
3557 margin-block-end: 1.25rem;
3558 }
3559
3560 .e-app-import-failed-plugins-notice {
3561 margin-block-end: 1.25rem;
3562 }
3563
3564 .e-app-export-actions-container {
3565 display: flex;
3566 gap: 15px;
3567 width: 100%;
3568 justify-content: flex-end;
3569 }
3570
3571 .e-kit-library__quota-bar {
3572 display: flex;
3573 align-items: center;
3574 }
3575 .e-kit-library__quota-bar__container {
3576 display: flex;
3577 flex-direction: column;
3578 gap: 8px;
3579 min-width: 230px;
3580 }
3581 .e-kit-library__quota-bar__header {
3582 display: flex;
3583 justify-content: space-between;
3584 align-items: center;
3585 }
3586 .e-kit-library__quota-bar__label {
3587 color: var(--body-color);
3588 font-weight: 400;
3589 white-space: nowrap;
3590 font-size: 12px;
3591 }
3592 .e-kit-library__quota-bar__progress-container {
3593 width: 100%;
3594 height: 4px;
3595 overflow: hidden;
3596 position: relative;
3597 }
3598 .e-kit-library__quota-bar__progress-container--empty {
3599 background-color: #F0ABFC;
3600 }
3601 .e-kit-library__quota-bar__progress-container--normal {
3602 background-color: #F0ABFC;
3603 }
3604 .e-kit-library__quota-bar__progress-container--warning {
3605 background-color: rgb(251.0236220472, 216.4291338583, 157.9763779528);
3606 }
3607 .e-kit-library__quota-bar__progress-container--alert {
3608 background: #93003f;
3609 }
3610 .e-kit-library__quota-bar__progress-bar {
3611 height: 100%;
3612 transition: width 0.3s ease;
3613 }
3614 .e-kit-library__quota-bar__progress-bar--empty {
3615 background: transparent;
3616 }
3617 .e-kit-library__quota-bar__progress-bar--normal {
3618 background: #D004D4;
3619 }
3620 .e-kit-library__quota-bar__progress-bar--warning {
3621 background: #F59E0B;
3622 }
3623 .e-kit-library__quota-bar__progress-bar--alert {
3624 background: #93003f;
3625 }
3626 .e-kit-library__quota-bar__upgrade-message {
3627 display: flex;
3628 align-items: center;
3629 gap: 4px;
3630 }
3631 .e-kit-library__quota-bar__upgrade-link {
3632 color: #93003f;
3633 text-decoration: underline;
3634 cursor: pointer;
3635 font-size: 12px;
3636 font-weight: 400;
3637 }
3638 .e-kit-library__quota-bar__upgrade-link:hover {
3639 opacity: 0.8;
3640 }
3641 .e-kit-library__quota-bar__count {
3642 color: var(--body-color);
3643 white-space: nowrap;
3644 font-size: 12px;
3645 }
3646
3647 :root {
3648 --text-secondary: #3F444B;
3649 }
3650
3651 .e-kit-library__quota-notification {
3652 display: flex;
3653 align-items: flex-start;
3654 justify-content: space-between;
3655 padding: 16px 20px;
3656 margin: 0 44px 30px;
3657 border-radius: 4px;
3658 }
3659 .e-kit-library__quota-notification--warning {
3660 background-color: #FBF1E6;
3661 color: #3f444b;
3662 }
3663 .e-kit-library__quota-notification--alert {
3664 background-color: #FDECEC;
3665 color: #3f444b;
3666 }
3667 .e-kit-library__quota-notification__content {
3668 display: flex;
3669 align-items: flex-start;
3670 gap: 12px;
3671 flex: 1;
3672 }
3673 .e-kit-library__quota-notification__icon {
3674 font-size: 18px;
3675 margin-top: 1px;
3676 flex-shrink: 0;
3677 }
3678 .e-kit-library__quota-notification__icon.eicon-warning-full {
3679 color: #F59E0B;
3680 }
3681 .e-kit-library__quota-notification__icon.eicon-alert {
3682 color: #DC2626;
3683 }
3684 .e-kit-library__quota-notification__message {
3685 flex: 1;
3686 line-height: 1.5;
3687 font-size: 13px;
3688 }
3689 .e-kit-library__quota-notification__message span {
3690 color: var(--text-secondary);
3691 font-size: 13px;
3692 }
3693 .e-kit-library__quota-notification__action-link {
3694 color: inherit;
3695 text-decoration: underline;
3696 font-size: 13px;
3697 font-weight: 400;
3698 }
3699 .e-kit-library__quota-notification__action-link:hover {
3700 opacity: 0.8;
3701 }
3702 .e-kit-library__quota-notification__dismiss {
3703 background: none;
3704 border: none;
3705 cursor: pointer;
3706 padding: 0;
3707 margin-inline-start: 12px;
3708 color: inherit;
3709 opacity: 0.7;
3710 flex-shrink: 0;
3711 }
3712 .e-kit-library__quota-notification__dismiss:hover {
3713 opacity: 1;
3714 }
3715 .e-kit-library__quota-notification__dismiss i {
3716 font-size: 14px;
3717 }
3718 /*# sourceMappingURL=app-rtl.css.map */