PluginProbe ʕ •ᴥ•ʔ
Spider Elements – Premium Elementor Widgets & Addons Library / 1.6.0
Spider Elements – Premium Elementor Widgets & Addons Library v1.6.0
trunk 1.0.0 1.1.0 1.5.0 1.6.0 1.6.1 1.6.2 1.6.3 1.6.4 1.6.5 1.6.6 1.6.7 1.7.0 1.8.0 1.9.0
spider-elements / assets / css / admin.css
spider-elements / assets / css Last commit date
admin.css 1 year ago admin.css.map 1 year ago elementor-editor.css 1 year ago extension.css 1 year ago extension.css.map 1 year ago main.css 1 year ago main.css.map 1 year ago rtl.css 1 year ago rtl.css.map 1 year ago
admin.css
1402 lines
1 /*=====================================================================
2 @Template Name: Spider Elements
3
4 @Default Styles
5 Table of Content:
6 01/ Notice
7
8 =====================================================================*/
9 .spider-elements-elementor-notice {
10 padding: 15px !important;
11 }
12 .spider-elements-elementor-notice .spider-elements-elementor-notice-inner {
13 display: flex;
14 justify-content: space-between;
15 align-items: center;
16 }
17 .spider-elements-elementor-notice .spider-elements-elementor-notice-inner .spider-elements-elementor-notice-content h3 {
18 margin: 0;
19 }
20 .spider-elements-elementor-notice .spider-elements-elementor-notice-inner .spider-elements-elementor-install-now .button {
21 padding: 6px 16px;
22 line-height: 1;
23 }
24
25 .ezd-grid {
26 display: grid;
27 grid-column-gap: 20px;
28 }
29
30 .ezd-grid-cols-12 {
31 grid-template-columns: repeat(12, minmax(0, 1fr));
32 }
33
34 .ezd-grid-column-full {
35 grid-column: 1/-1;
36 }
37
38 @media (max-width: 991px) {
39 [class^=ezd-lg-col] {
40 grid-column: 1/-1;
41 }
42 }
43 @media (min-width: 576px) {
44 .ezd-sm-col-4 {
45 grid-column: span 4/span 4;
46 }
47 .ezd-sm-col-3 {
48 grid-column: span 3/span 3;
49 }
50 .ezd-sm-col-5 {
51 grid-column: span 5/span 5;
52 }
53 .ezd-sm-col-6 {
54 grid-column: span 6/span 6;
55 }
56 .ezd-sm-col-7 {
57 grid-column: span 7/span 7;
58 }
59 .ezd-sm-col-8 {
60 grid-column: span 8/span 8;
61 }
62 .ezd-sm-col-9 {
63 grid-column: span 9/span 9;
64 }
65 .ezd-sm-col-10 {
66 grid-column: span 10/span 10;
67 }
68 .ezd-sm-col-2 {
69 grid-column: span 2/span 2;
70 }
71 .ezd-sm-col-11 {
72 grid-column: span 11/span 11;
73 }
74 .ezd-sm-col-12 {
75 grid-column: span 12/span 12;
76 }
77 }
78 @media (min-width: 768px) {
79 .ezd-md-col-4 {
80 grid-column: span 4/span 4;
81 }
82 .ezd-md-col-3 {
83 grid-column: span 3/span 3;
84 }
85 .ezd-md-col-5 {
86 grid-column: span 5/span 5;
87 }
88 .ezd-md-col-6 {
89 grid-column: span 6/span 6;
90 }
91 .ezd-md-col-7 {
92 grid-column: span 7/span 7;
93 }
94 .ezd-md-col-8 {
95 grid-column: span 8/span 8;
96 }
97 .ezd-md-col-9 {
98 grid-column: span 9/span 9;
99 }
100 .ezd-md-col-10 {
101 grid-column: span 10/span 10;
102 }
103 .ezd-md-col-11 {
104 grid-column: span 11/span 11;
105 }
106 .ezd-md-col-12 {
107 grid-column: span 12/span 12;
108 }
109 .ezd-md-col-2 {
110 grid-column: span 2/span 2;
111 }
112 }
113 @media (min-width: 992px) {
114 .ezd-lg-col-4 {
115 grid-column: span 4/span 4;
116 }
117 .ezd-lg-col-3 {
118 grid-column: span 3/span 3;
119 }
120 .ezd-lg-col-5 {
121 grid-column: span 5/span 5;
122 }
123 .ezd-lg-col-6 {
124 grid-column: span 6/span 6;
125 }
126 .ezd-lg-col-8 {
127 grid-column: span 8/span 8;
128 }
129 .ezd-lg-col-7 {
130 grid-column: span 7/span 7;
131 }
132 .ezd-lg-col-9 {
133 grid-column: span 9/span 9;
134 }
135 .ezd-lg-col-10 {
136 grid-column: span 10/span 10;
137 }
138 .ezd-lg-col-11 {
139 grid-column: span 11/span 11;
140 }
141 .ezd-lg-col-12 {
142 grid-column: span 12/span 12;
143 }
144 .ezd-lg-col-2 {
145 grid-column: span 2/span 2;
146 }
147 }
148 @media (min-width: 1200px) {
149 .ezd-xl-col-4 {
150 grid-column: span 4/span 4;
151 }
152 .ezd-xl-col-3 {
153 grid-column: span 3/span 3;
154 }
155 .ezd-xl-col-5 {
156 grid-column: span 5/span 5;
157 }
158 .ezd-xl-col-6 {
159 grid-column: span 6/span 6;
160 }
161 .ezd-xl-col-8 {
162 grid-column: span 8/span 8;
163 }
164 .ezd-xl-col-7 {
165 grid-column: span 7/span 7;
166 }
167 .ezd-xl-col-9 {
168 grid-column: span 9/span 9;
169 }
170 .ezd-xl-col-10 {
171 grid-column: span 10/span 10;
172 }
173 .ezd-xl-col-11 {
174 grid-column: span 11/span 11;
175 }
176 .ezd-xl-col-12 {
177 grid-column: span 12/span 12;
178 }
179 .ezd-xl-col-2 {
180 grid-column: span 2/span 2;
181 }
182 }
183 .ezd-list-unstyled {
184 list-style: none;
185 margin: 0;
186 padding-left: 0;
187 }
188
189 .ezd-text-center {
190 text-align: center;
191 }
192
193 .ezd-d-flex {
194 display: flex;
195 flex-wrap: wrap;
196 margin-left: -10px;
197 margin-right: -10px;
198 }
199 .ezd-d-flex [class*=ezd-colum-space-] {
200 padding-left: 10px;
201 padding-right: 10px;
202 }
203
204 .ezd-colum-space-6 {
205 width: 50%;
206 }
207
208 .ezd-colum-space-4 {
209 flex: 1;
210 width: 33.3333333333%;
211 box-sizing: border-box;
212 }
213
214 .spel_dashboard {
215 display: flex;
216 flex-wrap: wrap;
217 padding: 60px 20px;
218 margin-right: 20px;
219 }
220 @media (max-width: 1400px) {
221 .spel_dashboard {
222 padding: 40px 0;
223 }
224 }
225 .spel_dashboard .sidebar_navigation {
226 width: 18%;
227 margin-right: 30px;
228 }
229 .spel_dashboard .sidebar_navigation .sticky_sidebar {
230 background: #fff;
231 align-items: flex-start;
232 border-radius: 8px;
233 position: sticky;
234 top: 70px;
235 }
236 .spel_dashboard .sidebar_navigation .tab_left_content {
237 padding: 0;
238 margin: 0;
239 border-radius: 8px;
240 overflow: hidden;
241 }
242 .spel_dashboard .sidebar_navigation .tab_left_content li {
243 margin: 0;
244 }
245 .spel_dashboard .sidebar_navigation .tab_left_content li .icon {
246 background: #f0e9fc;
247 border-radius: 50%;
248 width: 35px;
249 height: 35px;
250 display: flex;
251 justify-content: center;
252 align-items: center;
253 margin-right: 12px;
254 color: #571fb7;
255 }
256 @media (max-width: 1400px) {
257 .spel_dashboard .sidebar_navigation .tab_left_content li .icon {
258 margin-right: 5px;
259 }
260 }
261 .spel_dashboard .sidebar_navigation .tab_left_content li .icon i {
262 font-size: 18px;
263 }
264 .spel_dashboard .sidebar_navigation .tab_left_content li:nth-child(2) .icon {
265 color: #ff70ee;
266 background: #fff0fe;
267 }
268 .spel_dashboard .sidebar_navigation .tab_left_content li:nth-child(3) .icon {
269 color: #1fb75c;
270 background: #e4fbd2;
271 }
272 .spel_dashboard .sidebar_navigation .tab_left_content li:nth-child(4) .icon {
273 color: #ff70ee;
274 background: #fff0fe;
275 }
276 .spel_dashboard .sidebar_navigation .tab_left_content li:nth-child(5) .icon {
277 color: #ffa30d;
278 background: #fbebd2;
279 }
280 .spel_dashboard .sidebar_navigation .tab_left_content li:nth-child(6) .icon {
281 color: #fb7f49;
282 background: #ffe9e2;
283 }
284 .spel_dashboard .sidebar_navigation .tab_left_content .tab-menu-link {
285 text-decoration: none;
286 }
287 .spel_dashboard .sidebar_navigation .tab_left_content .tab-menu-link .tab_menu_contents {
288 display: flex;
289 align-items: center;
290 padding: 18px 25px;
291 transition: all 0.3s linear;
292 }
293 @media (max-width: 1400px) {
294 .spel_dashboard .sidebar_navigation .tab_left_content .tab-menu-link .tab_menu_contents {
295 padding: 16px 10px;
296 }
297 }
298 .spel_dashboard .sidebar_navigation .tab_left_content .tab-menu-link .tab_menu_contents .content h3 {
299 margin-top: 0;
300 font-size: 18px;
301 font-weight: 500;
302 line-height: 24px;
303 color: #0c0d0e;
304 font-family: "Roboto", sans-serif;
305 margin-bottom: 2px;
306 }
307 .spel_dashboard .sidebar_navigation .tab_left_content .tab-menu-link .tab_menu_contents .content p {
308 margin-bottom: 0;
309 font-family: "Inter", sans-serif;
310 font-size: 14px;
311 font-weight: 400;
312 color: #6a737c;
313 line-height: 22px;
314 margin-top: 0;
315 }
316 @media (max-width: 1400px) {
317 .spel_dashboard .sidebar_navigation .tab_left_content .tab-menu-link .tab_menu_contents .content p {
318 font-size: 13px;
319 }
320 }
321 .spel_dashboard .sidebar_navigation .tab_left_content .tab-menu-link.active .tab_menu_contents {
322 background: linear-gradient(90deg, #7460ff 0%, #9d70ff 100%);
323 }
324 .spel_dashboard .sidebar_navigation .tab_left_content .tab-menu-link.active .tab_menu_contents .icon {
325 background: #fff;
326 color: #571fb7;
327 }
328 .spel_dashboard .sidebar_navigation .tab_left_content .tab-menu-link.active .tab_menu_contents .content h3, .spel_dashboard .sidebar_navigation .tab_left_content .tab-menu-link.active .tab_menu_contents .content p {
329 color: #fff;
330 }
331 .spel_dashboard .tab_contents {
332 flex: 1;
333 max-width: 1200px;
334 }
335 .spel_dashboard .tab_contents .tab-box {
336 display: none;
337 }
338 .spel_dashboard .tab_contents .tab-box.active {
339 display: block;
340 opacity: 1;
341 }
342 .spel_dashboard .tab_contents .tab-box .support_item {
343 background: #fff;
344 border-radius: 8px;
345 padding: 40px;
346 margin-top: 20px;
347 }
348 .spel_dashboard .tab_contents .tab-box .support_item .icon {
349 width: 56px;
350 height: 56px;
351 background: #e2d4fa;
352 border-radius: 50%;
353 font-size: 24px;
354 color: #411789;
355 display: flex;
356 align-items: center;
357 justify-content: center;
358 margin-bottom: 20px;
359 }
360 .spel_dashboard .tab_contents .tab-box .support_item .dashboard_title {
361 margin-bottom: 15px;
362 }
363 .spel_dashboard .tab_contents .tab-box .support_item p {
364 font-size: 16px;
365 font-family: "Inter", sans-serif;
366 color: #535a60;
367 line-height: 32px;
368 margin-top: 0;
369 margin-bottom: 25px;
370 }
371 .spel_dashboard .tab_contents .tab-box .support_item.dashboard_img {
372 background: transparent;
373 padding-top: 10px;
374 padding-bottom: 10px;
375 }
376 .spel_dashboard .tab_contents .tab-box .support_item .note {
377 background: #f0e9fc;
378 padding: 12px 30px;
379 margin-top: 10px;
380 }
381 .spel_dashboard .tab_contents .tab-box .support_item .note p {
382 margin-bottom: 0;
383 font-size: 12px;
384 color: #2f3337;
385 font-family: "Inter", sans-serif;
386 line-height: 26px;
387 }
388 .spel_dashboard .tab_contents .tab-box .filter_content .element_right .link a img {
389 width: 12px;
390 height: 12px;
391 }
392 .spel_dashboard .tab_contents .dashboard_btn {
393 text-decoration: none;
394 padding: 15px 26px;
395 font-size: 16px;
396 font-weight: 500;
397 color: #524cff;
398 font-family: "Roboto", sans-serif;
399 border-radius: 4px;
400 border: 1px solid #524cff;
401 display: inline-block;
402 transition: all 0.3s;
403 cursor: pointer;
404 }
405 .spel_dashboard .tab_contents .dashboard_btn.save_btn {
406 color: #fff;
407 background: #6d27e5;
408 padding: 12px 24px;
409 }
410 .spel_dashboard .tab_contents .dashboard_btn.save_btn:hover {
411 background: #524cff;
412 }
413 .spel_dashboard .tab_contents .dashboard_btn:hover {
414 background: #524cff;
415 color: #fff;
416 }
417 .spel_dashboard .tab_contents .dashboard_banner {
418 background: url(../images/dashboard/dashboard_banner.png) no-repeat scroll center 0/cover;
419 padding: 60px 50px;
420 border-radius: 12px;
421 overflow: hidden;
422 }
423 .spel_dashboard .tab_contents .dashboard_banner.text-center {
424 text-align: center;
425 }
426 .spel_dashboard .tab_contents .dashboard_banner h2 {
427 color: #fff;
428 font-size: 36px;
429 font-weight: 700;
430 line-height: 1.1;
431 font-family: "Roboto", sans-serif;
432 margin-top: 0;
433 margin-bottom: 16px;
434 }
435 .spel_dashboard .tab_contents .dashboard_banner p {
436 font-family: "Inter", sans-serif;
437 color: #fff;
438 font-size: 16px;
439 line-height: 1.8;
440 margin-bottom: 0;
441 }
442 .spel_dashboard .tab_contents .widget_progress_item {
443 border-radius: 8px;
444 padding: 30px 40px;
445 background: #fff;
446 margin-top: 25px;
447 }
448 .spel_dashboard .tab_contents .widget_progress_item h3 {
449 margin: 0 0 10px;
450 font-size: 20px;
451 line-height: 28px;
452 font-weight: 600;
453 font-family: "Roboto", sans-serif;
454 color: #0c0d0e;
455 }
456 .spel_dashboard .tab_contents .widget_progress_item .progress_info_list {
457 display: flex;
458 justify-content: center;
459 margin-top: 6px;
460 }
461 .spel_dashboard .tab_contents .widget_progress_item .progress_info_list li {
462 font-size: 10px;
463 color: #6a737c;
464 font-family: "Roboto", sans-serif;
465 font-weight: 400;
466 margin-bottom: 0;
467 }
468 .spel_dashboard .tab_contents .widget_progress_item .progress_info_list li + li {
469 margin-left: 20px;
470 }
471 .spel_dashboard .tab_contents .widget_progress_item svg.radial-progress {
472 height: auto;
473 max-width: 130px;
474 padding: 0.5em;
475 transform: rotate(90deg);
476 }
477 .spel_dashboard .tab_contents .widget_progress_item svg.radial-progress circle {
478 fill: transparent;
479 stroke: #fff;
480 stroke-dashoffset: 219.9114857513;
481 stroke-width: 10px;
482 }
483 .spel_dashboard .tab_contents .widget_progress_item svg.radial-progress circle.incomplete {
484 opacity: 0.25;
485 }
486 .spel_dashboard .tab_contents .widget_progress_item svg.radial-progress circle.complete {
487 stroke-dasharray: 219.9114857513;
488 }
489 .spel_dashboard .tab_contents .widget_progress_item .circle_progress {
490 position: relative;
491 }
492 .spel_dashboard .tab_contents .widget_progress_item .circle_progress text {
493 color: #02a4ff;
494 font-size: 30px;
495 font-weight: 600;
496 text-anchor: middle;
497 font-family: "Roboto", sans-serif;
498 left: 50%;
499 top: 50%;
500 transform: translate(-50%, -50%);
501 position: absolute;
502 }
503 .spel_dashboard .tab_contents .widget_progress_item svg.radial-progress circle.complete {
504 stroke: #6bccfe;
505 stroke-linecap: round;
506 }
507 .spel_dashboard .tab_contents .widget_progress_item svg.radial-progress circle.incomplete {
508 stroke: #4fbaf0;
509 }
510 .spel_dashboard .tab_contents .dashboard_title {
511 font-size: 22px;
512 color: #031933;
513 font-weight: 700;
514 font-family: "Roboto", sans-serif;
515 line-height: 1.1;
516 margin-top: 0;
517 margin-bottom: 20px;
518 }
519 .spel_dashboard .tab_contents .premium_banner {
520 background: url(../images/dashboard/premium_banner.jpg) no-repeat scroll center 0/cover;
521 position: relative;
522 padding: 66px;
523 }
524 .spel_dashboard .tab_contents .premium_banner h2 {
525 font-size: 24px;
526 font-weight: 600;
527 margin-bottom: 12px;
528 }
529 .spel_dashboard .tab_contents .premium_banner p {
530 font-size: 14px;
531 font-weight: 500;
532 line-height: 24px;
533 margin-top: 0;
534 max-width: 405px;
535 margin-left: auto;
536 margin-right: auto;
537 }
538 .spel_dashboard .tab_contents .premium_banner .banner_btn {
539 color: #fff;
540 font-size: 14px;
541 font-weight: 500;
542 font-family: "Inter", sans-serif;
543 text-decoration: underline;
544 display: inline-block;
545 margin-top: 15px;
546 }
547 .spel_dashboard .tab_contents .premium_banner .rocket_img {
548 position: absolute;
549 top: 50%;
550 right: 100px;
551 transform: translateY(-50%);
552 }
553 .spel_dashboard .tab_contents .requirement_list li {
554 font-size: 14px;
555 font-family: "Roboto", sans-serif;
556 color: #535a60;
557 display: flex;
558 align-items: center;
559 margin-bottom: 0;
560 padding: 16px 24px;
561 background: #f5f5f5;
562 }
563 .spel_dashboard .tab_contents .requirement_list li strong {
564 font-size: 16px;
565 font-weight: 500;
566 color: #2f3337;
567 flex: 40%;
568 }
569 .spel_dashboard .tab_contents .requirement_list li span {
570 flex: 60%;
571 }
572 .spel_dashboard .tab_contents .requirement_list li span.invalid i {
573 background: #e9336b;
574 }
575 .spel_dashboard .tab_contents .requirement_list li i {
576 font-size: 8px;
577 width: 24px;
578 height: 24px;
579 display: inline-flex;
580 align-items: center;
581 justify-content: center;
582 background: #4caf50;
583 border-radius: 3px;
584 color: #fff;
585 margin-right: 12px;
586 }
587 .spel_dashboard .tab_contents .requirement_list li:nth-child(even) {
588 background: #fafafa;
589 }
590 .spel_dashboard .tab_contents .elements_pro_popup {
591 display: none;
592 position: fixed;
593 z-index: 9;
594 left: 0;
595 top: 0;
596 height: 100%;
597 width: 100%;
598 overflow: auto;
599 background-color: rgba(0, 0, 0, 0.6);
600 opacity: 1;
601 -webkit-transition: opacity 0.3s ease-in-out;
602 transition: opacity 0.3s ease-in-out;
603 }
604 .spel_dashboard .tab_contents .elements_pro_popup .message_content {
605 position: fixed;
606 top: 50%;
607 left: 50%;
608 z-index: 10001;
609 min-width: 300px;
610 padding: 50px 36px;
611 background: #fff;
612 border-radius: 10px;
613 text-align: center;
614 -webkit-animation: hide-popup 0.3s forwards;
615 animation: hide-popup 0.3s forwards;
616 text-align: center;
617 }
618 .spel_dashboard .tab_contents .elements_pro_popup .message_content .pro-close {
619 position: absolute;
620 right: 20px;
621 top: 20px;
622 cursor: pointer;
623 }
624 .spel_dashboard .tab_contents .elements_pro_popup .message_content h3 {
625 font-size: 28px;
626 font-family: "Roboto", sans-serif;
627 color: #242729;
628 font-weight: 700;
629 margin-bottom: 12px;
630 }
631 .spel_dashboard .tab_contents .elements_pro_popup .message_content p {
632 font-size: 16px;
633 font-weight: 500;
634 font-family: "Inter", sans-serif;
635 margin-top: 0;
636 }
637 .spel_dashboard .tab_contents .elements_pro_popup .message_content .dashboard_btn {
638 padding: 15px 27px;
639 margin-top: 8px;
640 }
641 .spel_dashboard .tab_contents .elements_pro_popup.popup-visible {
642 opacity: 1;
643 display: block;
644 }
645 .spel_dashboard .tab_contents .elements_pro_popup.popup-visible .message_content {
646 animation: show-popup 0.3s forwards;
647 }
648
649 @-webkit-keyframes show-popup {
650 0% {
651 -webkit-transform: translate(-50%, -50%) scale(0.7);
652 transform: translate(-50%, -50%) scale(0.7);
653 opacity: 0;
654 }
655 45% {
656 -webkit-transform: translate(-50%, -50%) scale(1.05);
657 transform: translate(-50%, -50%) scale(1.05);
658 opacity: 1;
659 }
660 80% {
661 -webkit-transform: translate(-50%, -50%) scale(0.95);
662 transform: translate(-50%, -50%) scale(0.95);
663 }
664 100% {
665 -webkit-transform: translate(-50%, -50%) scale(1);
666 transform: translate(-50%, -50%) scale(1);
667 }
668 }
669 @keyframes show-popup {
670 0% {
671 -webkit-transform: translate(-50%, -50%) scale(0.7);
672 transform: translate(-50%, -50%) scale(0.7);
673 opacity: 0;
674 }
675 45% {
676 -webkit-transform: translate(-50%, -50%) scale(1.05);
677 transform: translate(-50%, -50%) scale(1.05);
678 opacity: 1;
679 }
680 80% {
681 -webkit-transform: translate(-50%, -50%) scale(0.95);
682 transform: translate(-50%, -50%) scale(0.95);
683 }
684 100% {
685 -webkit-transform: translate(-50%, -50%) scale(1);
686 transform: translate(-50%, -50%) scale(1);
687 }
688 }
689 @-webkit-keyframes hide-popup {
690 0% {
691 -webkit-transform: translate(-50%, -50%) scale(1);
692 transform: translate(-50%, -50%) scale(1);
693 opacity: 1;
694 }
695 100% {
696 -webkit-transform: translate(-50%, -50%) scale(0.5);
697 transform: translate(-50%, -50%) scale(0.5);
698 opacity: 0;
699 }
700 }
701 @keyframes hide-popup {
702 0% {
703 -webkit-transform: translate(-50%, -50%) scale(1);
704 transform: translate(-50%, -50%) scale(1);
705 opacity: 1;
706 }
707 100% {
708 -webkit-transform: translate(-50%, -50%) scale(0.5);
709 transform: translate(-50%, -50%) scale(0.5);
710 opacity: 0;
711 }
712 }
713 .spel_dashboard {
714 /*============ qa_inner css ===============*/
715 }
716 .spel_dashboard .tab_contents .elements_tab_menu {
717 display: flex;
718 justify-content: space-between;
719 background: #fff;
720 padding: 24px;
721 border-radius: 5px;
722 }
723 .spel_dashboard .tab_contents .elements_tab_menu .tab_contents {
724 display: flex;
725 align-items: center;
726 transition: all 0.3s linear;
727 }
728 .spel_dashboard .tab_contents .elements_tab_menu .tab_contents .icon {
729 color: #fff;
730 border-radius: 50%;
731 width: 35px;
732 height: 35px;
733 display: flex;
734 justify-content: center;
735 align-items: center;
736 margin-right: 12px;
737 font-size: 18px;
738 background: linear-gradient(90deg, #7460ff 0%, #9d70ff 100%);
739 }
740 .spel_dashboard .tab_contents .elements_tab_menu .tab_contents .content h3 {
741 margin-top: 0;
742 font-size: 18px;
743 font-weight: 600;
744 line-height: 27px;
745 color: #0c0d0e;
746 font-family: "Roboto", sans-serif;
747 margin-bottom: 2px;
748 }
749 .spel_dashboard .tab_contents .elements_tab_menu .tab_contents.api_title_color .icon {
750 background: #fff0fe;
751 color: #ff70ee;
752 }
753 .spel_dashboard .tab_contents .elements_tab_menu .tab_contents.integration_title_color .icon {
754 background: #fbebd2;
755 color: #ffa30d;
756 }
757 .spel_dashboard .tab_contents .elements_tab_menu .menu_right_content {
758 display: flex;
759 align-items: center;
760 }
761 .spel_dashboard .tab_contents .elements_tab_menu .menu_right_content .plugin_active_switcher {
762 display: flex;
763 font-size: 12px;
764 font-family: "Roboto", sans-serif;
765 font-weight: 400;
766 color: #242729;
767 }
768 .spel_dashboard .tab_contents .elements_tab_menu .menu_right_content .plugin_active_switcher .toggler {
769 cursor: pointer;
770 }
771 .spel_dashboard .tab_contents .elements_tab_menu .menu_right_content .plugin_active_switcher input {
772 display: none;
773 }
774 .spel_dashboard .tab_contents .elements_tab_menu .menu_right_content .plugin_active_switcher input:checked + .switch {
775 background: #7fb71f;
776 }
777 .spel_dashboard .tab_contents .elements_tab_menu .menu_right_content .plugin_active_switcher input:checked + .switch::before {
778 transform: translateX(12px);
779 }
780 .spel_dashboard .tab_contents .elements_tab_menu .menu_right_content .plugin_active_switcher .switch {
781 width: 32px;
782 height: 18px;
783 background: #848d95;
784 border-radius: 45px;
785 position: relative;
786 display: block;
787 margin: 0 20px;
788 }
789 .spel_dashboard .tab_contents .elements_tab_menu .menu_right_content .plugin_active_switcher .switch::before {
790 width: 12px;
791 height: 12px;
792 border-radius: 50%;
793 content: "";
794 position: absolute;
795 background: #fff;
796 top: 3px;
797 left: 4px;
798 transition: all 0.2s;
799 }
800 .spel_dashboard .tab_contents .elements_tab_menu .dashboard_btn {
801 border: 0;
802 padding: 8px 21px;
803 font-size: 16px;
804 margin-left: 40px;
805 cursor: pointer;
806 }
807 .spel_dashboard .tab_contents .elements_tab {
808 background: #f0e9fc;
809 padding: 15px 24px;
810 display: flex;
811 margin: 32px 0;
812 gap: 5px;
813 border-radius: 5px;
814 }
815 .spel_dashboard .tab_contents .elements_tab .filter_data {
816 font-size: 14px;
817 font-family: "Roboto", sans-serif;
818 color: #535a60;
819 padding: 10px 23px;
820 border-radius: 4px;
821 transition: all 0.3s;
822 cursor: pointer;
823 }
824 .spel_dashboard .tab_contents .elements_tab .filter_data:hover {
825 background: rgba(109, 39, 229, 0.3);
826 }
827 .spel_dashboard .tab_contents .elements_tab .filter_data i {
828 margin-right: 5px;
829 }
830 .spel_dashboard .tab_contents .elements_tab .filter_data.active {
831 background: #6d27e5;
832 color: #fff;
833 }
834 .spel_dashboard .tab_contents .element_box {
835 padding: 30px 25px;
836 border-radius: 8px;
837 background: #fff;
838 transition: all 0.2s linear;
839 }
840 .spel_dashboard .tab_contents .element_box:hover {
841 box-shadow: 0 5px 15px 0 rgba(51, 77, 114, 0.1);
842 }
843 .spel_dashboard .tab_contents .element_box:hover .element_right .link {
844 opacity: 1;
845 visibility: visible;
846 }
847 .spel_dashboard .tab_contents .element_box .element_right {
848 display: flex;
849 align-items: center;
850 }
851 .spel_dashboard .tab_contents .element_box .element_right a {
852 margin-right: 8px;
853 display: inline-block;
854 line-height: 1;
855 }
856 .spel_dashboard .tab_contents .element_box .element_right .link {
857 margin-right: 5px;
858 opacity: 0;
859 visibility: hidden;
860 transition: all 0.3s linear;
861 }
862 .spel_dashboard .tab_contents .element_box .element_right .link .tooltip-top {
863 position: relative;
864 display: inline-block;
865 text-decoration: none;
866 }
867 .spel_dashboard .tab_contents .element_box .element_right .link .tooltip-top::before {
868 content: attr(data-tooltip);
869 top: -40px;
870 left: -20px;
871 transform: translateX(-50%);
872 background-color: #333;
873 color: #fff;
874 text-align: center;
875 border-radius: 6px;
876 padding: 8px 8px;
877 opacity: 0;
878 visibility: hidden;
879 transition: opacity 0.2s;
880 position: absolute;
881 width: 190px;
882 }
883 .spel_dashboard .tab_contents .element_box .element_right .link .tooltip-top:hover::before {
884 opacity: 1;
885 visibility: visible;
886 }
887 .spel_dashboard .tab_contents .filter_content {
888 margin-left: -12px;
889 margin-right: -12px;
890 }
891 .spel_dashboard .tab_contents .filter_content .element_switch {
892 display: flex;
893 justify-content: space-between;
894 align-items: center;
895 position: relative;
896 overflow: hidden;
897 }
898 .spel_dashboard .tab_contents .filter_content .element_switch .badge {
899 width: 64px;
900 height: 64px;
901 text-align: center;
902 border-radius: 5px;
903 color: #fff;
904 position: absolute;
905 left: -36px;
906 top: -36px;
907 font-size: 12px;
908 font-family: "Roboto", sans-serif;
909 cursor: pointer;
910 background: #e9336b;
911 -webkit-transform: rotate(-45deg);
912 transform: rotate(-45deg);
913 text-transform: uppercase;
914 padding: 3px;
915 display: flex;
916 align-items: flex-end;
917 justify-content: center;
918 font-weight: 700;
919 }
920 .spel_dashboard .tab_contents .filter_content .element_switch .element_content {
921 font-size: 14px;
922 font-weight: 400;
923 font-family: "Roboto", sans-serif;
924 display: flex;
925 align-items: center;
926 }
927 .spel_dashboard .tab_contents .filter_content .element_switch .element_content i {
928 font-size: 32px;
929 color: #000000;
930 margin-right: 20px;
931 }
932 .spel_dashboard .tab_contents .filter_content .element_switch input {
933 display: none;
934 }
935 .spel_dashboard .tab_contents .filter_content .element_switch input:checked + .widget_switcher {
936 background: #7fb71f;
937 }
938 .spel_dashboard .tab_contents .filter_content .element_switch input:checked + .widget_switcher:before {
939 transform: translateX(19px);
940 }
941 .spel_dashboard .tab_contents .filter_content .element_switch .widget_switcher {
942 width: 40px;
943 height: 20px;
944 background: #848d95;
945 border-radius: 45px;
946 position: relative;
947 display: block;
948 }
949 .spel_dashboard .tab_contents .filter_content .element_switch .widget_switcher::before {
950 content: "";
951 width: 14px;
952 height: 14px;
953 border-radius: 50%;
954 left: 4px;
955 top: 3px;
956 position: absolute;
957 background: #fff;
958 transition: all 0.2s linear;
959 }
960 .spel_dashboard .tab_contents .filter_content .pro .badge {
961 position: relative;
962 }
963 .spel_dashboard .tab_contents .filter_content .pro .badge::before {
964 content: "Pro";
965 width: 62px;
966 height: 62px;
967 text-align: center;
968 border-radius: 5px;
969 color: #fff;
970 position: absolute;
971 left: -36px;
972 top: -36px;
973 font-size: 10px;
974 cursor: pointer;
975 background: #e9336b;
976 transform: rotate(-45deg);
977 text-transform: uppercase;
978 padding: 3px;
979 display: flex;
980 align-items: flex-end;
981 justify-content: center;
982 font-weight: 700;
983 }
984 .spel_dashboard .api_box {
985 padding: 24px;
986 }
987 .spel_dashboard .api_box h3 {
988 font-size: 16px;
989 font-weight: 600;
990 line-height: 24px;
991 font-family: "Roboto", sans-serif;
992 color: #242729;
993 margin-top: 0;
994 margin-bottom: 6px;
995 }
996 .spel_dashboard .api_box p {
997 font-size: 12px;
998 line-height: 18px;
999 font-weight: 500;
1000 color: #535a60;
1001 font-family: "Inter", sans-serif;
1002 margin-top: 0;
1003 }
1004 .spel_dashboard .api_box .api_panel .api_inner h5 {
1005 font-size: 14px;
1006 font-weight: 500;
1007 line-height: 22px;
1008 color: #242729;
1009 font-family: "Roboto", sans-serif;
1010 margin-bottom: 12px;
1011 margin-top: 0;
1012 }
1013 .spel_dashboard .api_box .api_panel .api_inner input {
1014 width: 100%;
1015 border: 1px solid #bbc0c4;
1016 font-size: 14px;
1017 padding: 4px 10px;
1018 color: #242729;
1019 font-family: "Roboto", sans-serif;
1020 line-height: 30px;
1021 margin: 0;
1022 outline: none;
1023 box-shadow: none;
1024 }
1025 .spel_dashboard .api_box .api_panel .api_inner input.placeholder {
1026 color: #bbc0c4;
1027 }
1028 .spel_dashboard .api_box .api_panel .api_inner input:-moz-placeholder {
1029 color: #bbc0c4;
1030 }
1031 .spel_dashboard .api_box .api_panel .api_inner input::-moz-placeholder {
1032 color: #bbc0c4;
1033 }
1034 .spel_dashboard .api_box .api_panel .api_inner input::-webkit-input-placeholder {
1035 color: #bbc0c4;
1036 }
1037 .spel_dashboard .api_box .api_panel .api_inner input:focus {
1038 border-color: rgba(109, 39, 229, 0.6901960784);
1039 }
1040 .spel_dashboard .api_box .api_panel p {
1041 font-size: 12px;
1042 font-family: "Inter", sans-serif;
1043 line-height: 20px;
1044 color: #535a60;
1045 margin-top: 10px;
1046 }
1047 .spel_dashboard .api_box .api_panel + .api_panel {
1048 margin-top: 10px;
1049 }
1050 .spel_dashboard .integration_banner {
1051 text-align: left;
1052 padding: 45px;
1053 }
1054 .spel_dashboard .integration_item {
1055 margin-top: 20px;
1056 padding: 40px;
1057 }
1058 .spel_dashboard .integration_item img {
1059 width: 40px;
1060 height: 40px;
1061 }
1062 .spel_dashboard .integration_item h3 {
1063 font-size: 18px;
1064 font-weight: 600;
1065 font-family: "Roboto", sans-serif;
1066 color: #0c0d0e;
1067 margin-top: 12px;
1068 margin-bottom: 10px;
1069 line-height: 1.3;
1070 }
1071 .spel_dashboard .integration_item p {
1072 font-size: 14px;
1073 color: #3c4146;
1074 line-height: 26px;
1075 font-family: "Inter", sans-serif;
1076 margin-bottom: 0;
1077 margin-top: 0;
1078 }
1079 .spel_dashboard .integration_item .dashboard_btn {
1080 padding: 9px 32px;
1081 margin-top: 25px;
1082 }
1083 .spel_dashboard .integration_item .dashboard_btn.active_btn {
1084 background: #848d95;
1085 cursor: not-allowed;
1086 }
1087 .spel_dashboard .integration_item .dashboard_btn.active_btn:hover {
1088 box-shadow: none;
1089 }
1090 .spel_dashboard .mt-25 {
1091 margin-top: 25px;
1092 }
1093 .spel_dashboard .pr_promo_box {
1094 background: #fff;
1095 border-radius: 8px;
1096 padding: 16px 16px 30px;
1097 margin-top: 25px;
1098 }
1099 .spel_dashboard .pr_promo_box h2 {
1100 font-weight: 700;
1101 font-size: 28px;
1102 color: #242729;
1103 font-family: "Roboto", sans-serif;
1104 margin-bottom: 18px;
1105 }
1106 .spel_dashboard .pr_promo_box p {
1107 font-size: 18px;
1108 line-height: 28px;
1109 color: #535a60;
1110 font-family: "Inter", sans-serif;
1111 margin-top: 0;
1112 }
1113 .spel_dashboard .pr_promo_box .demo_btn {
1114 font-size: 14px;
1115 font-weight: 500;
1116 color: #e9336b;
1117 font-family: "Inter", sans-serif;
1118 text-decoration: none;
1119 }
1120 .spel_dashboard .pr_promo_box .demo_btn i {
1121 margin-left: 4px;
1122 transition: all 0.2s linear;
1123 }
1124 .spel_dashboard .pr_promo_box .demo_btn:hover i {
1125 transform: translateX(5px);
1126 }
1127 .spel_dashboard .pr_promo_box .promo_video {
1128 background: #6d27e5;
1129 border-radius: 4px;
1130 padding: 12px;
1131 position: relative;
1132 }
1133 .spel_dashboard .pr_promo_box .promo_video img {
1134 width: 100%;
1135 border-radius: 4px;
1136 }
1137 .spel_dashboard .pr_promo_box .promo_video .popup_youtube {
1138 position: absolute;
1139 width: 40px;
1140 background: #fff;
1141 filter: drop-shadow(0 30px 60px rgba(0, 0, 0, 0.12));
1142 text-align: center;
1143 line-height: 38px;
1144 color: #0c0d0e;
1145 font-size: 18px;
1146 border-radius: 50%;
1147 height: 40px;
1148 top: 50%;
1149 left: 50%;
1150 transform: translate(-50%, -50%);
1151 border: 0;
1152 transition: all 0.3s;
1153 display: flex;
1154 align-items: center;
1155 justify-content: center;
1156 }
1157 .spel_dashboard .pr_promo_box .promo_video .popup_youtube::before, .spel_dashboard .pr_promo_box .promo_video .popup_youtube:after {
1158 content: "";
1159 width: 100%;
1160 height: 100%;
1161 border: 1.2px solid #fff;
1162 border-radius: 50%;
1163 opacity: 0.3;
1164 position: absolute;
1165 left: 50%;
1166 top: 50%;
1167 }
1168 .spel_dashboard .pr_promo_box .promo_video .popup_youtube::before {
1169 transform: translate(-50%, -50%) scale(1.32);
1170 }
1171 .spel_dashboard .pr_promo_box .promo_video .popup_youtube:after {
1172 border-radius: 50%;
1173 box-shadow: 0 1px 15px 1px rgba(255, 255, 255, 0.3);
1174 transform: scale(8);
1175 animation: spel_pulse 2s infinite;
1176 }
1177 .spel_dashboard .pr_promo_box .promo_video .popup_youtube:hover {
1178 transform: translate(-50%, -50%) scale(1.02);
1179 }
1180 .spel_dashboard .qa_inner {
1181 border-radius: 12px;
1182 background: #fff;
1183 padding: 48px 56px;
1184 flex-wrap: nowrap;
1185 align-items: start;
1186 }
1187 .spel_dashboard .qa_inner img {
1188 margin-right: 25px;
1189 }
1190 .spel_dashboard .qa_inner h2 {
1191 font-size: 24px;
1192 font-weight: 600;
1193 font-family: "Roboto", sans-serif;
1194 margin-bottom: 15px;
1195 color: #0c0d0e;
1196 }
1197 .spel_dashboard .qa_inner p {
1198 font-size: 16px;
1199 line-height: 32px;
1200 color: #2f3337;
1201 margin-top: 0;
1202 }
1203 .spel_dashboard .fancybox-slide--iframe .fancybox-content,
1204 .spel_dashboard .fancybox-slide--map .fancybox-content,
1205 .spel_dashboard .fancybox-slide--pdf .fancybox-content,
1206 .spel_dashboard .fancybox-slide--video .fancybox-content {
1207 width: 55%;
1208 height: 50%;
1209 }
1210
1211 .ezd-colum-space-4 {
1212 margin-bottom: 20px;
1213 }
1214
1215 /*============ keyframes animation =============*/
1216 @-webkit-keyframes spel_pulse {
1217 0% {
1218 opacity: 1;
1219 -webkit-transform: translate(-50%, -50%) scale(1);
1220 transform: translate(-50%, -50%) scale(1);
1221 }
1222 100% {
1223 opacity: 0;
1224 -webkit-transform: translate(-50%, -50%) scale(2);
1225 transform: translate(-50%, -50%) scale(2);
1226 }
1227 }
1228 @keyframes spel_pulse {
1229 0% {
1230 opacity: 1;
1231 -webkit-transform: translate(-50%, -50%) scale(1);
1232 transform: translate(-50%, -50%) scale(1);
1233 }
1234 100% {
1235 opacity: 0;
1236 -webkit-transform: translate(-50%, -50%) scale(2);
1237 transform: translate(-50%, -50%) scale(2);
1238 }
1239 }
1240 #spel_theme_builder_modal {
1241 display: none;
1242 position: fixed;
1243 top: 0;
1244 left: 0;
1245 width: 100%;
1246 height: 100%;
1247 background: rgba(0, 0, 0, 0.5);
1248 backdrop-filter: blur(5px);
1249 z-index: 9999;
1250 opacity: 0;
1251 visibility: hidden;
1252 transition: opacity 0.3s ease, visibility 0.3s ease;
1253 }
1254 #spel_theme_builder_modal.show-popup {
1255 opacity: 1;
1256 visibility: visible;
1257 }
1258
1259 .spel_theme_builder_wrapper.spel-modal.spel-fade {
1260 transition: opacity 0.15s linear;
1261 }
1262 .spel_theme_builder_wrapper.spel-modal .modal-dialog {
1263 width: 500px;
1264 margin: 0 auto;
1265 position: absolute;
1266 top: 50%;
1267 left: 50%;
1268 transform: translate(-50%, -50%);
1269 display: flex;
1270 align-items: center;
1271 transition: all 0.3s ease;
1272 }
1273 .spel_theme_builder_wrapper.spel-modal .modal-dialog.modal-dialog-centered {
1274 display: flex;
1275 align-items: center;
1276 min-height: calc(100% - 1rem);
1277 }
1278 .spel_theme_builder_wrapper.spel-modal form {
1279 width: 100%;
1280 }
1281 .spel_theme_builder_wrapper.spel-modal form .modal-content {
1282 position: relative;
1283 background-color: #fff;
1284 border: 1px solid #ccc;
1285 border-radius: 0.3rem;
1286 box-shadow: 0 3px 9px rgba(0, 0, 0, 0.5);
1287 }
1288 .spel_theme_builder_wrapper.spel-modal form .modal-content.show-popup {
1289 opacity: 1;
1290 transform: scale(1);
1291 }
1292 .spel_theme_builder_wrapper.spel-modal form .modal-content .modal-title {
1293 margin: 0;
1294 line-height: 1.5;
1295 }
1296 .spel_theme_builder_wrapper.spel-modal form .modal-content .modal-close {
1297 background: transparent;
1298 border: none;
1299 font-size: 20px;
1300 cursor: pointer;
1301 }
1302 .spel_theme_builder_wrapper.spel-modal form .modal-content .modal-close:hover {
1303 color: red;
1304 }
1305 .spel_theme_builder_wrapper.spel-modal form .modal-content .modal-header,
1306 .spel_theme_builder_wrapper.spel-modal form .modal-content .modal-footer {
1307 display: flex;
1308 justify-content: space-between;
1309 align-items: center;
1310 padding: 15px;
1311 border-bottom: 1px solid #e9ecef;
1312 }
1313 .spel_theme_builder_wrapper.spel-modal form .modal-content .modal-footer {
1314 border-top: 1px solid #e9ecef;
1315 }
1316 .spel_theme_builder_wrapper.spel-modal form .modal-content .modal-body {
1317 position: relative;
1318 flex: 1 1 auto;
1319 padding: 1rem;
1320 }
1321 .spel_theme_builder_wrapper.spel-modal form .modal-content .modal-body .input-group {
1322 margin-bottom: 1rem;
1323 }
1324 .spel_theme_builder_wrapper.spel-modal form .modal-content .form-control {
1325 display: block;
1326 width: 100%;
1327 padding: 0.375rem 0.75rem;
1328 font-size: 1rem;
1329 line-height: 1.5;
1330 color: #495057;
1331 background-color: #fff;
1332 background-clip: padding-box;
1333 border: 1px solid #ced4da;
1334 border-radius: 0.25rem;
1335 transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
1336 }
1337 .spel_theme_builder_wrapper.spel-modal form .modal-content .btn.btn-default {
1338 color: #333;
1339 background-color: #fff;
1340 border-color: #ccc;
1341 }
1342 .spel_theme_builder_wrapper.spel-modal form .modal-content .btn.btn-default:hover {
1343 color: #333;
1344 background-color: #e6e6e6;
1345 border-color: #adadad;
1346 }
1347 .spel_theme_builder_wrapper.spel-modal form .modal-content .btn.btn-primary {
1348 color: #fff;
1349 background-color: #007bff;
1350 border-color: #007bff;
1351 }
1352 .spel_theme_builder_wrapper.spel-modal form .modal-content .btn.btn-primary:hover {
1353 color: #fff;
1354 background-color: #0056b3;
1355 border-color: #004085;
1356 }
1357 .spel_theme_builder_wrapper.spel-modal form .modal-content .switch-group {
1358 display: flex;
1359 align-items: center;
1360 }
1361 .spel_theme_builder_wrapper.spel-modal form .modal-content .switch-group .admin-input-switch {
1362 position: relative;
1363 display: inline-block;
1364 width: 50px;
1365 height: 25px;
1366 }
1367 .spel_theme_builder_wrapper.spel-modal form .modal-content .switch-group .admin-input-switch input {
1368 opacity: 0;
1369 width: 0;
1370 height: 0;
1371 }
1372 .spel_theme_builder_wrapper.spel-modal form .modal-content .switch-group .admin-input-switch .admin-control-label {
1373 position: absolute;
1374 cursor: pointer;
1375 top: 0;
1376 left: 0;
1377 right: 0;
1378 bottom: 0;
1379 background-color: #ccc;
1380 transition: 0.4s;
1381 border-radius: 25px;
1382 }
1383 .spel_theme_builder_wrapper.spel-modal form .modal-content .switch-group .admin-input-switch .admin-control-label:before {
1384 position: absolute;
1385 content: "";
1386 height: 21px;
1387 width: 21px;
1388 left: 2px;
1389 bottom: 2px;
1390 background-color: white;
1391 transition: 0.4s;
1392 border-radius: 50%;
1393 }
1394 .spel_theme_builder_wrapper.spel-modal form .modal-content .switch-group .admin-input-switch input:checked + .admin-control-label {
1395 background-color: #2196F3;
1396 }
1397 .spel_theme_builder_wrapper.spel-modal form .modal-content .switch-group .admin-input-switch input:checked + .admin-control-label:before {
1398 transform: translateX(25px);
1399 }
1400
1401 /*# sourceMappingURL=admin.css.map */
1402