PluginProbe
Forumax – AI Powered Advanced Community Forum Plugin / 1.1.0
Forumax – AI Powered Advanced Community Forum Plugin v1.1.0
2.4.4 2.4.3 2.4.2 2.4.1 2.4.0 trunk 1.0.8 1.1.0 1.2.1 1.2.2 1.2.3 1.2.4 1.2.5 1.2.6 1.2.7 1.2.8 1.2.9 1.3.0 1.3.1 1.3.2 1.3.3 1.4.0 1.4.1 2.0.0 2.1.0 All 29 releases
bbp-core / assets / css / admin-ui-style.css

admin-ui-style.css in Forumax – AI Powered Advanced Community Forum Plugin 1.1.0, at assets/css/admin-ui-style.css

1,985 lines 40.0 KB
No matching file
Up and down to move Enter to open Esc to close
Raw Download Zip
1 /**
2 * Convert font-size from px to rem with px fallback
3 *
4 * @param $size - the value in pixel you want to convert
5 *
6 * e.g. p font-size: fs-rem(12px);
7 * e.g. p {@include fontSize(12px);}
8 *
9 */
10 /*--------------------------------------
11 - Base
12 ----------------------------------------*/
13 /**
14 * Convert font-size from px to rem with px fallback
15 *
16 * @param $size - the value in pixel you want to convert
17 *
18 * e.g. p {@include fontSize(12px);}
19 *
20 */
21 @import url("https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;500;700;900&display=swap");
22 .col {
23 position: relative;
24 width: 100%;
25 padding-right: 15px;
26 padding-left: 15px;
27 }
28
29 /*--------------------------------------
30 - Utilities
31 ----------------------------------------*/
32 :root {
33 --container-width: 100%;
34 --container-sm: 33.75rem;
35 --container-md: 45rem;
36 --container-lg: 60rem;
37 --container-xl: 71.25rem;
38 --container-xxl: 90rem;
39 --container-fluid: 100%;
40 --gutter-x: 1.875rem;
41 --gutter-3: 0.125rem;
42 --gutter-5: 0.225rem;
43 --gutter-10: 0.625rem;
44 --gutter-15: 0.9375rem;
45 --gutter-20: 1.25rem;
46 --gutter-25: 1.5625rem;
47 --gutter-30: 1.875rem;
48 --gutter-32: 2rem;
49 --gutter-35: 2.1875rem;
50 --gutter-40: 2.5rem;
51 --gutter-45: 2.8125rem;
52 --gutter-50: 3.125rem;
53 --ff-roboto: "Roboto", sans-serif;
54 --fw-100: 100;
55 --fw-200: 200;
56 --fw-300: 300;
57 --fw-400: 400;
58 --fw-500: 500;
59 --fw-600: 600;
60 --fw-700: 700;
61 --fw-800: 800;
62 --fw-900: 900;
63 --fs-12: 0.75rem;
64 --fs-13: 0.8125rem;
65 --fs-14: 0.875rem;
66 --fs-15: 0.9375rem;
67 --fs-16: 1rem;
68 --fs-17: 1.0625rem;
69 --fs-18: 1.125rem;
70 --fs-20: 1.25rem;
71 --fs-21: 1.3125rem;
72 --fs-24: 1.5rem;
73 --fs-25: 1.5625rem;
74 --fs-28: 1.75rem;
75 --fs-30: 1.875rem;
76 --fs-32: 2rem;
77 --fs-35: 2.1875rem;
78 --fs-40: 2.5rem;
79 --fs-45: 2.8125rem;
80 --hr-bg: var(--clr-black);
81 --hr-width: 100%;
82 --hr-height: 0.3125rem;
83 --hr-gutter-y: 1.875rem;
84 --hr-gutter-x: 0;
85 --hr-padding: 0;
86 --hr-radius: 0;
87 --m: 0;
88 --mt: 0;
89 --mr: 0;
90 --mb: 0;
91 --ml: 0;
92 --mx: 0;
93 --my: 0;
94 --m-auto: auto;
95 --my-auto: auto;
96 --mx-auto: auto;
97 --p: 0;
98 --pt: 0;
99 --pr: 0;
100 --pb: 0;
101 --pl: 0;
102 --px: 0;
103 --py: 0;
104 --p-auto: auto;
105 --py-auto: auto;
106 --px-auto: auto;
107 --border-width: 0.0625rem;
108 --border-style: solid;
109 --border-clr: transparent;
110 --border: var(--border-width) var(--border-style) var(--border-clr);
111 --border-t: var(--border-width) var(--border-style) var(--border-clr);
112 --border-r: var(--border-width) var(--border-style) var(--border-clr);
113 --border-b: var(--border-width) var(--border-style) var(--border-clr);
114 --border-l: var(--border-width) var(--border-style) var(--border-clr);
115 --border-x: var(--border-width) var(--border-style) var(--border-clr);
116 --border-y: var(--border-width) var(--border-style) var(--border-clr);
117 --radius: 0;
118 --radius-t: 0;
119 --radius-r: 0;
120 --radius-b: 0;
121 --radius-l: 0;
122 --radius-full: 50%;
123 --btn-bg: transparent;
124 --btn-clr: inherit;
125 --btn-ff: var(--ff-roboto);
126 --btn-fs: var(--fs-15);
127 --btn-py: 0.625rem;
128 --btn-px: 1.125rem;
129 --btn-my: var(--my);
130 --btn-mx: var(--mx);
131 --clr-black: #000;
132 --clr-black-100: #0D0E2B;
133 --clr-dark: #252733;
134 --clr-text: #575766;
135 --clr-text-light: #9199A1;
136 --clr-white: #fff;
137 --clr-blue: #4C4CF1;
138 --clr-orange: #ff5a46;
139 --clr-yellow: #FFE132;
140 --black_50: #ebebeb;
141 --black_100: #d6d9dc;
142 --black_150: #c8ccd0;
143 --black_200: #bbc0c4;
144 --black_300: #9fa6ad;
145 --black_350: #9199a1;
146 --black_400: #848d95;
147 --black_500: #6a737c;
148 --black_600: #535a60;
149 --black_700: #3c4146;
150 --black_750: #2f3337;
151 --black_800: #242729;
152 --black_900: #0c0d0e;
153 }
154
155 /* Box sizing rules */
156 *,
157 *::before,
158 *::after {
159 box-sizing: border-box;
160 }
161
162 /* Remove default margin */
163 body,
164 h1,
165 h2,
166 h3,
167 h4,
168 p,
169 figure,
170 blockquote,
171 dl,
172 dd {
173 margin: 0;
174 }
175
176 /* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
177 ul[role=list],
178 ol[role=list] {
179 list-style: none;
180 }
181
182 /* Set core root defaults */
183 html:focus-within {
184 scroll-behavior: smooth;
185 }
186
187 /* Set core body defaults */
188 body {
189 font-family: var(--ff-roboto);
190 font-weight: 400;
191 font-size: var(--fs-15);
192 line-height: 1.5625rem;
193 text-rendering: optimizeSpeed;
194 color: var(--clr-black);
195 }
196
197 /* A elements that don't have a class get default styles */
198 a:not([class]) {
199 text-decoration-skip-ink: auto;
200 }
201
202 /* Make images easier to work with */
203 img,
204 picture {
205 max-width: 100%;
206 display: block;
207 }
208
209 /* Inherit fonts for inputs and buttons */
210 input,
211 button,
212 textarea,
213 select {
214 font: inherit;
215 }
216
217 button {
218 border: none;
219 background: transparent;
220 outline: none;
221 cursor: pointer;
222 }
223
224 .hr {
225 background: var(--clr-black-200);
226 width: 100%;
227 height: 1px;
228 margin: 50px 0;
229 padding: 0;
230 border: none;
231 border-radius: 0;
232 opacity: 1;
233 }
234
235 /* Remove all animations, transitions and smooth scroll for people that prefer not to see them */
236 @media (prefers-reduced-motion: reduce) {
237 html:focus-within {
238 scroll-behavior: auto;
239 }
240
241 *,
242 *::before,
243 *::after {
244 animation-duration: 0.01ms !important;
245 animation-iteration-count: 1 !important;
246 transition-duration: 0.01ms !important;
247 scroll-behavior: auto !important;
248 }
249 }
250 .fill-current {
251 fill: currentColor;
252 }
253
254 .scrollToTop {
255 width: 30px;
256 height: 30px;
257 line-height: 30px;
258 text-align: center;
259 color: var(--clr-blue);
260 font-size: 25px;
261 background: transparent;
262 position: fixed;
263 right: 20px;
264 bottom: 50px;
265 display: none;
266 z-index: 99999;
267 border-radius: 50%;
268 }
269 @media screen and (min-width: 576px) {
270 .scrollToTop {
271 width: 50px;
272 height: 50px;
273 line-height: 50px;
274 }
275 }
276 .scrollToTop:hover {
277 color: var(--clr-blue);
278 }
279
280 .no-scroll-y {
281 overflow-y: hidden;
282 }
283
284 .text-blue {
285 color: var(--clr-blue);
286 }
287
288 .green {
289 color: #27ae60;
290 }
291
292 .red {
293 color: #e74c3c;
294 }
295
296 h1,
297 h2,
298 h3,
299 h4,
300 h5,
301 h6 {
302 font-family: var(--ff-roboto);
303 color: #14183E;
304 line-height: 1.4;
305 }
306
307 h1 a,
308 h2 a,
309 h3 a,
310 h4 a,
311 h5 a,
312 h6 a {
313 color: inherit;
314 }
315
316 h1 {
317 font-size: 2rem;
318 }
319 @media screen and (min-width: 20rem) {
320 h1 {
321 font-size: calc(2rem + 1.75 * ((100vw - 20rem) / 55));
322 }
323 }
324 @media screen and (min-width: 75rem) {
325 h1 {
326 font-size: 3.75rem;
327 }
328 }
329
330 h2 {
331 font-size: 2rem;
332 }
333 @media screen and (min-width: 20rem) {
334 h2 {
335 font-size: calc(2rem + 1 * ((100vw - 20rem) / 55));
336 }
337 }
338 @media screen and (min-width: 75rem) {
339 h2 {
340 font-size: 3rem;
341 }
342 }
343
344 h3 {
345 font-size: 1.375rem;
346 }
347 @media screen and (min-width: 20rem) {
348 h3 {
349 font-size: calc(1.375rem + 0.125 * ((100vw - 20rem) / 55));
350 }
351 }
352 @media screen and (min-width: 75rem) {
353 h3 {
354 font-size: 1.5rem;
355 }
356 }
357
358 h4 {
359 font-size: 1rem;
360 }
361 @media screen and (min-width: 20rem) {
362 h4 {
363 font-size: calc(1rem + 0.125 * ((100vw - 20rem) / 55));
364 }
365 }
366 @media screen and (min-width: 75rem) {
367 h4 {
368 font-size: 1.125rem;
369 }
370 }
371
372 ul {
373 margin: 0;
374 padding: 0;
375 }
376
377 li {
378 list-style: none;
379 }
380
381 hr {
382 background: #c2cfff;
383 width: 50px;
384 height: 3px;
385 margin: 35px 0;
386 padding: 0;
387 border: none;
388 }
389 @media screen and (min-width: 768px) {
390 hr {
391 margin-top: 25px;
392 margin-bottom: 25px;
393 }
394 }
395
396 p {
397 margin: 0;
398 }
399
400 label {
401 color: var(--clr-black);
402 cursor: pointer;
403 font-size: 14px;
404 font-weight: 400;
405 }
406
407 /*Home 3 Default Font Family*/
408 .home-3 {
409 font-size: var(--fs-15);
410 font-weight: var(--fw-400);
411 color: var(--clr-black);
412 font-family: var(--font-quicksand);
413 }
414
415 /*Home 3 Default Font Family*/
416 .home-4 {
417 font-size: var(--fs-15);
418 font-weight: var(--fw-400);
419 font-family: var(--font-arimo);
420 }
421
422 .alignment-center {
423 align-items: center;
424 }
425
426 .justify-content-between {
427 justify-content: space-between;
428 }
429
430 .justify-content-end {
431 justify-content: end;
432 }
433
434 /*--------------------------------------
435 - Color
436 ----------------------------------------*/
437 .color {
438 color: var(--clr-black);
439 }
440
441 .text-black {
442 color: var(--clr-black) !important;
443 }
444
445 .bg-black {
446 background: var(--clr-black);
447 }
448
449 .text-white {
450 color: var(--clr-white) !important;
451 }
452
453 .bg-white {
454 background: var(--clr-white);
455 }
456
457 .d-block {
458 display: block;
459 }
460
461 .d-inline-block {
462 display: inline-block;
463 }
464
465 .d-grid {
466 display: grid;
467 }
468
469 .d-flex {
470 display: flex;
471 }
472
473 .flex-row {
474 flex-direction: row;
475 }
476
477 .flex-reverse {
478 flex-direction: row-reverse;
479 }
480
481 .flex-column {
482 flex-direction: column;
483 }
484
485 .flex-column-reverse {
486 flex-direction: column-reverse;
487 }
488
489 /*--
490 - Font Famaly
491 -----------------------------------------*/
492 /*--
493 - Font weight
494 -----------------------------------------*/
495 .font-regular {
496 font-weight: var(--fw-400);
497 }
498
499 .font-medium {
500 font-weight: var(--fw-500);
501 }
502
503 .font-semi-bold {
504 font-weight: var(--fw-600);
505 }
506
507 .font-bold {
508 font-weight: var(--fw-700);
509 }
510
511 .font-black {
512 font-weight: var(--fw-900);
513 }
514
515 /*--
516 - Font Size
517 -----------------------------------------*/
518 /*--
519 - Margin
520 -------------------------------------------*/
521 .mt-n3 {
522 margin-top: -0.4375rem;
523 }
524
525 .mt-n4 {
526 margin-top: -0.75rem;
527 }
528
529 .m-auto {
530 margin: auto;
531 }
532
533 .mx-auto {
534 margin-left: auto;
535 margin-right: auto;
536 }
537
538 .mt-0 {
539 margin-top: 0;
540 }
541
542 .mt-73 {
543 margin-top: 4.5625rem;
544 }
545
546 .mb-8 {
547 margin-bottom: 2rem;
548 }
549
550 .mr-1 {
551 margin-right: 0.25rem;
552 }
553
554 @media (min-width: 768px) {
555 .mt-md-n4 {
556 margin-top: -0.75rem;
557 }
558 }
559
560 .mt-40 {
561 margin-top: 40px;
562 }
563
564 /*---
565 -- Padding
566 -------------------------------------------*/
567 /*----------------------------------------*/
568 /* Component CSS
569 /*----------------------------------------*/
570 .easydocs-accordion {
571 position: relative;
572 padding: 0;
573 list-style: none;
574 margin: 10px 0 20px;
575 background: var(--clr-white);
576 border-radius: 5px;
577 overflow: hidden;
578 }
579 .easydocs-accordion .acc_active .accordion-title {
580 border-bottom: 1px solid #edeae9;
581 }
582 .easydocs-accordion .acc_active .accordion-title::before {
583 transform: translateY(-50%) rotate(90deg);
584 }
585 .easydocs-accordion .ui-state-highlight {
586 height: 50px;
587 background: #f9f9f9;
588 border-top: 1px solid #afabac;
589 border-bottom: 1px solid #afabac;
590 }
591
592 .easydocs-accordion-item {
593 width: 100%;
594 margin: 0;
595 }
596 .easydocs-accordion-item + .easydocs-accordion-item {
597 border-top: 1px solid #edeae9;
598 }
599 .easydocs-accordion-item.is-accordion-open:last-child .accordion-title {
600 border-bottom-left-radius: 0;
601 border-bottom-right-radius: 0;
602 }
603 .easydocs-accordion-item.child-one .child-right-content {
604 align-items: center;
605 }
606 .easydocs-accordion-item.child-one .child-right-content .progress-text {
607 font-size: var(--fs-12);
608 color: var(--clr-text-light);
609 margin-right: var(--gutter-30);
610 }
611 .easydocs-accordion-item.child-one .accordion-title::before {
612 transform: translateY(-50%);
613 }
614 .easydocs-accordion-item.child-one.acc_active .accordion-title::before {
615 transform: translateY(-50%) rotate(90deg);
616 }
617 .easydocs-accordion-item.child-one a {
618 padding: 0;
619 }
620 .easydocs-accordion-item.child-one .accordion-title.has-child a.section-last-label {
621 margin-left: 19px;
622 }
623 .easydocs-accordion-item.child-one .accordion-title.has-child::before {
624 left: 52px;
625 }
626 .easydocs-accordion-item.child-one .nesting-accordion a.child-last-label {
627 margin: 10px 50px 10px 70px;
628 }
629
630 .accordion-title {
631 position: relative;
632 background: #fff;
633 padding: 13px 30px 13px 35px;
634 display: block;
635 cursor: pointer;
636 display: flex;
637 align-items: center;
638 justify-content: space-between;
639 }
640 @media (max-width: 1440px) {
641 .accordion-title {
642 padding: 12px 20px 12px 34px;
643 }
644 }
645 .accordion-title.ez-section-title h4 {
646 font-weight: var(--fw-500);
647 }
648 @media (max-width: 1440px) {
649 .accordion-title.ez-section-title::before {
650 left: 20px;
651 }
652 }
653 .accordion-title.has-child::before {
654 content: "";
655 top: 50%;
656 left: 32px;
657 position: absolute;
658 width: 0;
659 height: 0;
660 border-style: solid;
661 border-width: 5px 0 5px 6px;
662 border-color: transparent transparent transparent var(--clr-text);
663 display: block;
664 transform: translateY(-50%);
665 -webkit-transition: 0.3s ease-out;
666 transition: 0.3s ease-out;
667 }
668 @media (max-width: 1440px) {
669 .accordion-title.has-child::before {
670 left: 20px;
671 }
672 }
673 .accordion-title .count {
674 margin-left: 5px;
675 color: #fff;
676 background: var(--black_200);
677 }
678 .accordion-title ul.actions {
679 display: flex;
680 }
681 .accordion-title ul.actions li {
682 margin: 0;
683 }
684 .accordion-title:hover {
685 background: #f9f9f9;
686 }
687 .accordion-title:hover h4 {
688 color: var(--clr-dark);
689 }
690 .accordion-title:hover ul.actions {
691 display: flex;
692 }
693 .accordion-title:hover ul.actions li {
694 margin: 0;
695 line-height: normal;
696 }
697 .accordion-title h4 {
698 font-size: var(--fs-14);
699 color: var(--clr-text);
700 display: flex;
701 align-items: center;
702 font-weight: normal;
703 }
704 .accordion-title h4 a {
705 text-decoration: none;
706 }
707 .accordion-title .accordion-category-icon {
708 width: 1.25rem;
709 height: 1.25rem;
710 line-height: 1.25rem;
711 border-radius: 50%;
712 text-align: center;
713 margin-left: 5px;
714 }
715 .accordion-title .light-green {
716 background: rgba(45, 178, 45, 0.1);
717 --category-icon: #2db22d;
718 }
719 .accordion-title .light-orange {
720 background: rgba(204, 128, 51, 0.1);
721 --category-icon: #cc8033;
722 }
723 .accordion-title .light-blue {
724 background: rgba(2, 117, 216, 0.1);
725 --category-icon: var(--clr-blue);
726 }
727 .accordion-title .light-gray {
728 background: rgba(66, 66, 66, 0.1);
729 --category-icon: #424242;
730 }
731 .accordion-title ul.actions {
732 display: none;
733 align-items: center;
734 gap: var(--gutter-10);
735 --section-icon: #9199a1;
736 margin-left: 15px;
737 }
738 .accordion-title ul.actions .duplicate {
739 order: 1;
740 }
741 .accordion-title ul.actions .delete {
742 order: 2;
743 }
744 .accordion-title ul.actions li:hover {
745 --section-icon: var(--clr-dark);
746 }
747 .accordion-title ul.actions li a {
748 text-decoration: none;
749 }
750 .accordion-title ul.actions li a .dashicons {
751 color: var(--black_150);
752 font-size: 18px;
753 padding-top: 3px;
754 }
755 .accordion-title ul.actions li a .dashicons:hover {
756 color: var(--black_400);
757 }
758 .accordion-title ul.actions li a img {
759 opacity: 0.5;
760 }
761 .accordion-title ul.actions li a img:hover {
762 opacity: 1;
763 }
764 .accordion-title ul.actions li a.st-pro-notice .dashicons {
765 color: #f1bd6c;
766 }
767 .accordion-title .left-content {
768 display: flex;
769 }
770 .accordion-title .right-content {
771 display: flex;
772 align-items: center;
773 }
774 .accordion-title .right-content .progress-text {
775 font-size: var(--fs-12);
776 color: var(--clr-text-light);
777 margin-left: var(--gutter-30);
778 }
779
780 .easydocs-accordion-body {
781 background: var(--clr-white);
782 color: var(--clr-text);
783 font-size: var(--fs-14);
784 padding: 10px 50px 10px 50px;
785 }
786
787 .nesting-accordion {
788 padding: 0;
789 }
790 .nesting-accordion a {
791 text-decoration: none;
792 }
793
794 .child-docs-wrap {
795 border-bottom: 1px solid #edeae9;
796 }
797 .child-docs-wrap:hover {
798 background-color: #f9f9f9;
799 }
800 .child-docs-wrap .child-right-content {
801 visibility: hidden;
802 }
803 .child-docs-wrap:hover .child-right-content {
804 visibility: visible;
805 }
806
807 a.child-delete,
808 a.child-view-link {
809 padding-left: 5px !important;
810 padding-right: 5px !important;
811 }
812 a.child-delete img,
813 a.child-view-link img {
814 opacity: 0.5;
815 }
816 a.child-delete img:hover,
817 a.child-view-link img:hover {
818 opacity: 1;
819 }
820
821 a.child-delete {
822 padding-right: 28px !important;
823 }
824
825 /* replies count */
826 .count-replies span {
827 position: absolute;
828 top: 1px;
829 left: 8px;
830 color: #fff;
831 font-size: 0.55em;
832 }
833
834 .bbpc-reply-count {
835 box-sizing: border-box;
836 display: block;
837 padding: 0;
838 min-width: 22px;
839 height: 2em;
840 border-radius: 5px;
841 background-color: var(--black_200);
842 color: #fff;
843 font-size: 10px;
844 line-height: 1.9090909;
845 text-align: center;
846 margin-left: 7px;
847 }
848 .bbpc-reply-count:after {
849 content: "";
850 display: block;
851 margin-left: 11px;
852 width: 0;
853 height: 0;
854 border-top: 5px solid var(--black_200);
855 border-right: 5px solid transparent;
856 }
857 .bbpc-reply-count.bbpc-published-replies {
858 background-color: #cc8033;
859 }
860 .bbpc-reply-count.bbpc-published-replies:after {
861 border-top: 5px solid #cc8033;
862 }
863
864 .bbpc-pending-replies:hover, .bbpc-pending-replies:active {
865 background: #0275d8;
866 }
867 .bbpc-pending-replies:hover:after, .bbpc-pending-replies:active:after {
868 border-top-color: #0275d8;
869 }
870
871 .bbpc-nested-replies {
872 margin-left: 30px;
873 display: none;
874 }
875
876 .ez-section-title div:has(.active) .bbpc-pending-replies {
877 background: #0275d8;
878 }
879 .ez-section-title div:has(.active) .bbpc-pending-replies:after {
880 border-top-color: #0275d8;
881 }
882
883 .bbpc-reply-wrap {
884 background-color: #fff;
885 padding: 8px 0;
886 margin-left: 20px;
887 }
888 .bbpc-reply-wrap a {
889 width: 22px;
890 height: 22px;
891 display: inline-block;
892 }
893 .bbpc-reply-wrap:hover {
894 background: #f9f9f9;
895 }
896 .bbpc-reply-wrap:not(:last-child) {
897 border-bottom: 1px solid #edeae9;
898 }
899
900 .easydocs-btn {
901 --btn-fs: var(--fs-16);
902 --btn-ff: var(--ff-roboto);
903 --btn-py: 0.5rem;
904 --btn-px: 1.875rem;
905 position: relative;
906 font-family: var(--btn-ff);
907 font-size: var(--btn-fs);
908 font-weight: var(--fw-400);
909 line-height: 1.5;
910 background: var(--btn-bg);
911 color: var(--btn-clr);
912 border: var(--btn-bw, var(--border-width)) var(--btn-bs, var(--border-style)) var(--btn-bc, var(--btn-bg));
913 text-transform: capitalize;
914 text-decoration: none;
915 border-radius: var(--btn-radius, var(--radius));
916 padding: var(--btn-py) var(--btn-px);
917 margin: var(--btn-mx) var(--btn-mx);
918 display: inline-block;
919 overflow: hidden;
920 text-align: center;
921 cursor: pointer;
922 -webkit-transition: 0.3s ease-out;
923 transition: 0.3s ease-out;
924 }
925 .easydocs-btn-sm {
926 --btn-py: 0.3125rem;
927 }
928 .easydocs-btn-lg {
929 --btn-py: 0.625rem;
930 }
931 .easydocs-btn-xl {
932 --btn-py: 0.75rem;
933 }
934 .easydocs-btn-none {
935 --btn-radius: 0;
936 }
937 .easydocs-btn-round {
938 --btn-radius: 0.375rem;
939 }
940 .easydocs-btn-rounded {
941 --btn-radius: 1.875rem;
942 }
943 .easydocs-btn-round-full {
944 --btn-radius: 50%;
945 }
946 .easydocs-btn-disabled {
947 pointer-events: none;
948 opacity: 0.65;
949 }
950 .easydocs-btn-black-light {
951 --btn-bg: rgba(13, 14, 43, 0.1);
952 --btn-clr: #0D0E2B;
953 --btn-bc: transparent;
954 }
955 .easydocs-btn-black-light:hover {
956 --btn-clr: #0D0E2B;
957 --btn-bg: rgba(13, 14, 43, 0.1);
958 --btn-bc: #0D0E2B;
959 }
960 .easydocs-btn-black-light:focus {
961 outline: 0;
962 box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.5);
963 }
964 .easydocs-btn-green-light {
965 --btn-bg: rgba(45, 178, 45, 0.1);
966 --btn-clr: #2DB22D;
967 --btn-bc: transparent;
968 }
969 .easydocs-btn-green-light:hover {
970 --btn-clr: #2DB22D;
971 --btn-bg: rgba(45, 178, 45, 0.1);
972 --btn-bc: #2DB22D;
973 }
974 .easydocs-btn-green-light:focus {
975 outline: 0;
976 box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.5);
977 }
978 .easydocs-btn-blue-light {
979 --btn-bg: rgba(2, 117, 216, 0.1);
980 --btn-clr: #0275D8;
981 --btn-bc: transparent;
982 }
983 .easydocs-btn-blue-light:hover {
984 --btn-clr: #0275D8;
985 --btn-bg: rgba(2, 117, 216, 0.1);
986 --btn-bc: #0275D8;
987 }
988 .easydocs-btn-blue-light:focus {
989 outline: 0;
990 box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.5);
991 }
992 .easydocs-btn-orange-light {
993 --btn-bg: rgba(204, 128, 51, 0.1);
994 --btn-clr: #CC8033;
995 --btn-bc: transparent;
996 }
997 .easydocs-btn-orange-light:hover {
998 --btn-clr: #CC8033;
999 --btn-bg: rgba(204, 128, 51, 0.1);
1000 --btn-bc: #CC8033;
1001 }
1002 .easydocs-btn-orange-light:focus {
1003 outline: 0;
1004 box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.5);
1005 }
1006 .easydocs-btn-gray-light {
1007 --btn-bg: rgba(66, 66, 66, 0.1);
1008 --btn-clr: #424242;
1009 --btn-bc: transparent;
1010 }
1011 .easydocs-btn-gray-light:hover {
1012 --btn-clr: #424242;
1013 --btn-bg: rgba(66, 66, 66, 0.1);
1014 --btn-bc: #424242;
1015 }
1016 .easydocs-btn-gray-light:focus {
1017 outline: 0;
1018 box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.5);
1019 }
1020 .easydocs-btn-blue {
1021 --btn-bg: var(--clr-blue);
1022 --btn-clr: var(--clr-white);
1023 --btn-bc: var(--clr-blue);
1024 }
1025 .easydocs-btn-blue:hover {
1026 --btn-clr: var(--clr-blue);
1027 --btn-bg: transparent;
1028 --btn-bc: var(--clr-blue);
1029 }
1030 .easydocs-btn-blue:focus {
1031 outline: 0;
1032 box-shadow: 0 0 0 0.4rem rgba(65, 65, 230, 0.5);
1033 }
1034 .easydocs-btn-outline-blue {
1035 --btn-clr: #4141E6;
1036 --btn-bc: #4141E6;
1037 }
1038 .easydocs-btn-outline-blue:hover {
1039 --btn-clr: var(--clr-white);
1040 --btn-bg: #4141E6;
1041 --btn-bc: #4141E6;
1042 }
1043 .easydocs-btn-outline-blue:focus {
1044 outline: 0;
1045 box-shadow: 0 0 0 0.4rem rgba(65, 65, 230, 0.5);
1046 }
1047 .easydocs-btn-white {
1048 --btn-bg: var(--clr-white);
1049 --btn-clr: var(--clr-white);
1050 --btn-bc: var(--clr-white);
1051 }
1052 .easydocs-btn-white:hover {
1053 --btn-clr: var(--clr-white);
1054 --btn-bg: transparent;
1055 --btn-bc: var(--clr-white);
1056 }
1057 .easydocs-btn-white:focus {
1058 outline: 0;
1059 box-shadow: 0 0 0 0.4rem rgba(255, 255, 255, 0.5);
1060 }
1061 .easydocs-btn-outline-white {
1062 --btn-clr: var(--clr-white);
1063 --btn-bc: var(--clr-white);
1064 }
1065 .easydocs-btn-outline-white:hover {
1066 --btn-clr: var(--clr-black);
1067 --btn-bg: var(--clr-white);
1068 --btn-bc: var(--clr-white);
1069 }
1070 .easydocs-btn-outline-white:focus {
1071 outline: 0;
1072 box-shadow: 0 0 0 0.4rem rgba(var(--clr-white), 0.5);
1073 }
1074 .easydocs-btn-gray {
1075 --btn-bg: rgba(37, 39, 51, 0.1);
1076 --btn-clr: var(--clr-dark);
1077 --btn-bc: transparent;
1078 }
1079 .easydocs-btn-gray:hover {
1080 --btn-clr: var(--clr-white);
1081 --btn-bg: var(--clr-blue);
1082 --btn-bc: transparent;
1083 }
1084 .easydocs-btn-gray:focus {
1085 outline: 0;
1086 box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.5);
1087 }
1088
1089 .easydocs-dropdown {
1090 top: 170%;
1091 right: -30px;
1092 position: absolute;
1093 -webkit-box-shadow: 0 10px 35px 0 rgba(0, 0, 0, 0.06);
1094 -moz-box-shadow: 0 10px 35px 0 rgba(0, 0, 0, 0.06);
1095 box-shadow: 0 10px 35px 0 rgba(0, 0, 0, 0.06);
1096 width: 260px;
1097 background-color: var(--clr-white);
1098 border-radius: 0.5rem;
1099 z-index: 999;
1100 -webkit-transition: 0.3s ease-out;
1101 transition: 0.3s ease-out;
1102 display: none;
1103 }
1104 .easydocs-dropdown.is-active {
1105 opacity: 1;
1106 visibility: visible;
1107 top: 130%;
1108 }
1109
1110 .notification-dropdown {
1111 width: 360px;
1112 border-radius: 2px;
1113 }
1114 .notification-dropdown::before {
1115 content: "";
1116 top: -0.625rem;
1117 right: 2.5rem;
1118 position: absolute;
1119 width: 0;
1120 height: 0;
1121 border-style: solid;
1122 border-width: 0 10px 10px 10px;
1123 border-color: transparent transparent var(--clr-white) transparent;
1124 display: block;
1125 }
1126
1127 .form-control {
1128 font-family: var(--ff-roboto);
1129 font-size: var(--fs-14);
1130 color: #9199a1;
1131 background: transparent;
1132 text-transform: capitalize;
1133 padding: 0.75rem 1.25rem;
1134 margin: 0 auto;
1135 width: 100%;
1136 height: auto;
1137 max-width: 37.5rem;
1138 border: 1px solid #EDEAE9;
1139 border-radius: 0.625rem;
1140 -webkit-transition: 0.3s ease-out;
1141 transition: 0.3s ease-out;
1142 }
1143 .form-control:focus {
1144 outline: none;
1145 }
1146 .form-control:focus {
1147 background: white;
1148 box-shadow: none !important;
1149 border: 1px solid #4c4cf1 !important;
1150 border-radius: 0.625rem;
1151 box-sizing: border-box !important;
1152 line-height: unset !important;
1153 }
1154 .form-control:focus ~ .search-icon {
1155 background: var(--clr-blue);
1156 --search-icon: var(--clr-white);
1157 }
1158 .form-control:focus ~ .search-icon .dashicons {
1159 color: #fff;
1160 }
1161
1162 .easydocs-search-form {
1163 position: relative;
1164 max-width: 37.5rem;
1165 flex: 1;
1166 margin-left: auto;
1167 margin-right: auto;
1168 }
1169 .easydocs-search-form .search-icon {
1170 position: absolute;
1171 -webkit-transition: 0.3s ease-out;
1172 transition: 0.3s ease-out;
1173 left: 15px;
1174 transform: translateY(50%);
1175 }
1176 .easydocs-search-form input#bbpc-search {
1177 color: #9199a1;
1178 padding: 10px 15px 10px 40px;
1179 border: 1px solid #EDEAE9;
1180 border-radius: 0.625rem;
1181 box-sizing: border-box;
1182 line-height: unset;
1183 }
1184
1185 .easydocs-accordion-item progress {
1186 -webkit-appearance: none;
1187 appearance: none;
1188 height: 6px;
1189 border-radius: 32px;
1190 width: 100px;
1191 }
1192 .easydocs-accordion-item progress::-webkit-progress-bar {
1193 background-color: #e74c3c;
1194 }
1195 .easydocs-accordion-item progress::-webkit-progress-value {
1196 background-color: #27ae60;
1197 }
1198
1199 .badge {
1200 display: inline-block;
1201 padding: 0.35em 0.65em 0.3em;
1202 font-size: 0.75em;
1203 font-weight: 400;
1204 line-height: 1;
1205 color: #fff;
1206 text-align: center;
1207 white-space: nowrap;
1208 vertical-align: baseline;
1209 border-radius: 0.25rem;
1210 }
1211
1212 /*----------------------------------------*/
1213 /* 02. Header Area
1214 /*----------------------------------------*/
1215 .easydocs-header-area {
1216 padding-top: 30px;
1217 padding-bottom: 50px;
1218 }
1219 .easydocs-header-area .easydocs-row {
1220 margin-left: 0;
1221 margin-right: 0;
1222 }
1223
1224 .navbar-left {
1225 gap: var(--gutter-20);
1226 }
1227 .navbar-left .easydocs-btn {
1228 --btn-icon: var(--clr-blue);
1229 --btn-py: 0.5rem;
1230 --btn-px: 1rem;
1231 --btn-fs: var(--fs-12);
1232 font-weight: 500;
1233 display: flex;
1234 align-items: center;
1235 gap: 6px;
1236 }
1237 .navbar-left .easydocs-btn span.dashicons {
1238 font-size: 14px;
1239 margin-bottom: -4px;
1240 }
1241 .navbar-left .easydocs-btn:hover {
1242 --btn-icon: var(--clr-white);
1243 }
1244
1245 .easydocs-logo-area a {
1246 text-decoration: none;
1247 color: var(--clr-dark);
1248 font-size: var(--fs-24);
1249 font-weight: var(--fw-700);
1250 }
1251
1252 :is(.easydocs-notification, .easydocs-settings) .header-notify-icon {
1253 width: 2.5rem;
1254 height: 2.5rem;
1255 line-height: 2.5rem;
1256 border-radius: 50%;
1257 background: rgba(37, 39, 51, 0.05);
1258 text-align: center;
1259 cursor: pointer;
1260 }
1261 :is(.easydocs-notification, .easydocs-settings) .header-notify-icon:hover {
1262 background: #cdcdcd;
1263 }
1264 :is(.easydocs-notification, .easydocs-settings) .header-notify-icon svg {
1265 position: relative;
1266 top: 0.3rem;
1267 }
1268
1269 .easydocs-notification {
1270 margin-right: 1.6875rem;
1271 position: relative;
1272 }
1273 .easydocs-notification .easydocs-badge {
1274 top: -0.4375rem;
1275 right: -0.5rem;
1276 position: absolute;
1277 background: #FA3E3E;
1278 color: var(--clr-white);
1279 top: -0.4375rem;
1280 right: -0.2rem;
1281 position: absolute;
1282 padding: 0 4px;
1283 min-width: 18px;
1284 max-width: 18px;
1285 border-radius: 50%;
1286 text-align: center;
1287 font-size: 10px;
1288 font-weight: 700;
1289 line-height: 18px;
1290 height: 16px;
1291 display: inline-table;
1292 font-family: "Roboto";
1293 }
1294
1295 .easydocs-settings .header-notify-icons a {
1296 text-decoration: none;
1297 padding-top: 5px;
1298 display: inline-block;
1299 }
1300
1301 :is(.knobs, .layer) {
1302 inset: 0;
1303 position: absolute;
1304 }
1305
1306 .navbar-right .js-darkmode-btn .day svg {
1307 color: #fff;
1308 }
1309 .navbar-right .js-darkmode-btn .night svg {
1310 color: var(--clr-dark);
1311 }
1312
1313 .body_dark .navbar-right .js-darkmode-btn .day svg {
1314 --toggle-icon: #575766;
1315 }
1316 .body_dark .navbar-right .js-darkmode-btn .night svg {
1317 --toggle-icon: #fff;
1318 }
1319
1320 .navbar-right {
1321 display: flex;
1322 align-items: center;
1323 justify-content: flex-end;
1324 }
1325 .navbar-right > ul {
1326 align-items: center;
1327 gap: 8px;
1328 }
1329 .navbar-right .js-darkmode-btn {
1330 display: flex;
1331 align-items: center;
1332 justify-content: space-between;
1333 width: 5rem;
1334 height: 2.5rem;
1335 position: relative;
1336 background: rgba(37, 39, 51, 0.05);
1337 padding: 0 10px;
1338 color: #fff;
1339 border-radius: 24px;
1340 -webkit-transition: 0.3s ease-out;
1341 transition: 0.3s ease-out;
1342 }
1343 .navbar-right .js-darkmode-btn .day svg {
1344 --toggle-icon: #fff;
1345 -webkit-transition: 0.3s ease-out;
1346 transition: 0.3s ease-out;
1347 margin-top: 7px;
1348 }
1349 .navbar-right .js-darkmode-btn .night svg {
1350 --toggle-icon: #575766;
1351 -webkit-transition: 0.3s ease-out;
1352 transition: 0.3s ease-out;
1353 margin-top: 7px;
1354 }
1355 .navbar-right .js-darkmode-btn label {
1356 margin: 0;
1357 cursor: pointer;
1358 position: relative;
1359 z-index: 2;
1360 }
1361 .navbar-right .js-darkmode-btn .ball {
1362 height: 30px;
1363 width: 30px;
1364 position: absolute;
1365 background-color: var(--clr-blue);
1366 border-radius: 50%;
1367 left: 4px;
1368 top: 50%;
1369 transform: translateY(-50%);
1370 cursor: default;
1371 transition: all 0.3s linear 0s;
1372 z-index: 1;
1373 }
1374 .navbar-right .js-darkmode-btn svg {
1375 font-size: 16px;
1376 transition: all 0.3s linear 0s;
1377 }
1378 .navbar-right .js-darkmode-btn input {
1379 display: none;
1380 }
1381
1382 .notification-head {
1383 padding: 9px 12px;
1384 background: #f1f2f3;
1385 -webkit-box-shadow: 0 1px 0 0 #edeef2;
1386 -moz-box-shadow: 0 1px 0 0 #edeef2;
1387 box-shadow: 0 1px 0 0 #edeef2;
1388 }
1389 .notification-head.no-notification-text {
1390 padding: 20px 12px;
1391 background: #bebebe26;
1392 display: block;
1393 text-align: center;
1394 }
1395 .notification-head .header-text {
1396 color: var(--clr-dark);
1397 font-size: var(--fs-13);
1398 font-weight: var(--fw-500);
1399 line-height: 1;
1400 }
1401 .notification-head .right-text {
1402 color: var(--clr-text);
1403 font-size: var(--fs-12);
1404 line-height: 1;
1405 }
1406
1407 .settings-pro-icon {
1408 position: absolute;
1409 right: 0px;
1410 top: -5px;
1411 }
1412
1413 .swal2-styled.swal2-confirm.upgrade-premium-button > a {
1414 color: black;
1415 font-weight: normal;
1416 text-decoration: none;
1417 }
1418
1419 .swal2-footer.notification-pro-footer-wrap > a {
1420 text-decoration: none;
1421 }
1422
1423 .notification-body .filter-button-group {
1424 display: flex;
1425 gap: 8px;
1426 padding-left: var(--gutter-25);
1427 padding-right: var(--gutter-25);
1428 }
1429 .notification-body .filter-button-group svg {
1430 top: 0;
1431 }
1432 .notification-body .filter-button-group .easydocs-btn {
1433 --notification-icon: var(--clr-dark);
1434 --btn-px: 1rem;
1435 --btn-fs: var(--fs-14);
1436 --btn-py: 0.4rem;
1437 display: flex;
1438 align-items: center;
1439 gap: 1px;
1440 --btn-bg: #e4e6eb;
1441 --btn-clr: var(--clr-dark);
1442 --btn-bc: transparent;
1443 }
1444 .notification-body .filter-button-group .easydocs-btn.mixitup-control-active {
1445 background-color: #e7f3ff;
1446 color: #1877f2;
1447 --notification-icon: #1877f2;
1448 }
1449 .notification-body .filter-button-group .easydocs-btn.mixitup-control-active .dashicons-screenoptions:before {
1450 color: #1877f2;
1451 }
1452 .notification-body .filter-button-group .easydocs-btn.mixitup-control-active:hover {
1453 background-color: #d2e6f9;
1454 }
1455 .notification-body .filter-button-group .easydocs-btn:hover {
1456 --notification-icon: var(--clr-white);
1457 background: #cdcdcd;
1458 }
1459
1460 .notify-column {
1461 max-height: 18.75rem;
1462 overflow-y: auto;
1463 scrollbar-width: thin;
1464 /* Notification updated css */
1465 }
1466 .notify-column::-webkit-scrollbar-track {
1467 background-color: var(--clr-text-light);
1468 }
1469 .notify-column::-webkit-scrollbar {
1470 width: 8px;
1471 background-color: #F5F5F5;
1472 }
1473 .notify-column::-webkit-scrollbar-thumb {
1474 background-color: var(--clr-text);
1475 }
1476 .notify-column ul li {
1477 border-bottom: 1px solid #f1f2f3;
1478 margin-bottom: 0;
1479 }
1480 .notify-column ul li a {
1481 text-decoration: none;
1482 gap: 9px;
1483 align-content: space-around;
1484 padding: 10px;
1485 box-sizing: border-box;
1486 }
1487 .notify-column ul li a .notify-icon {
1488 padding-top: 5px;
1489 }
1490 .notify-column ul li a .notify-content-wrap {
1491 width: -webkit-fill-available;
1492 }
1493 .notify-column ul li a .notify-content-wrap .notify-content-header {
1494 color: #525960;
1495 font-size: 12px;
1496 }
1497 .notify-column ul li a .notify-content-wrap .notify-content-summary p {
1498 color: #0074cc;
1499 font-size: 13px;
1500 }
1501 .notify-column ul li a:focus {
1502 box-shadow: none;
1503 }
1504 .notify-column ul li:hover {
1505 background: #e3e6e8;
1506 }
1507 .notify-column ul li:last-child {
1508 border-bottom: none;
1509 }
1510
1511 .notification-item {
1512 display: flex;
1513 align-items: flex-start;
1514 cursor: pointer;
1515 gap: var(--gutter-10);
1516 padding: var(--gutter-10) 15px;
1517 margin-left: var(--gutter-10);
1518 margin-right: var(--gutter-10);
1519 -webkit-transition: 0.3s ease-out;
1520 transition: 0.3s ease-out;
1521 border-radius: 0.3125rem;
1522 }
1523 .notification-item .notification-image {
1524 width: 2.5rem;
1525 height: 2.5rem;
1526 border-radius: 50%;
1527 position: relative;
1528 }
1529 .notification-item .notification-image .notify-badge {
1530 right: 0;
1531 bottom: 0;
1532 position: absolute;
1533 width: 1.125rem;
1534 height: 1.125rem;
1535 line-height: 1.125rem;
1536 border-radius: 50%;
1537 text-align: center;
1538 }
1539 .notification-item .notification-image .notify-badge .dashicons {
1540 top: 0;
1541 }
1542 .notification-item .notification-image .notify-badge-blue {
1543 background-color: #22AAF1;
1544 background-image: linear-gradient(180deg, #22AAF1 0%, #066BDA 100%);
1545 }
1546 .notification-item .notification-image .notify-badge-blue .dashicons {
1547 font-size: 12px;
1548 color: white;
1549 padding-top: 2.5px;
1550 }
1551 .notification-item .notification-image .notify-badge-green {
1552 background-color: #62D77E;
1553 background-image: linear-gradient(180deg, #62D77E 0%, #2BB64E 100%);
1554 }
1555 .notification-item .notification-image .notify-badge-green .dashicons {
1556 font-size: 12px;
1557 color: white;
1558 padding-top: 4px;
1559 }
1560 .notification-item:hover {
1561 background: rgba(76, 76, 241, 0.05);
1562 }
1563
1564 .notification-content .notify-name {
1565 font-size: var(--fs-14);
1566 font-weight: var(--fw-500);
1567 color: var(--clr-dark);
1568 padding-right: 0.5rem;
1569 margin: 0;
1570 line-height: 1;
1571 }
1572 .notification-content .notify-name a {
1573 text-decoration: none;
1574 }
1575 .notification-content .reply-text {
1576 font-size: 14px;
1577 color: var(--clr-text-light);
1578 line-height: 1;
1579 margin-top: 5px;
1580 }
1581
1582 .notify-short-description {
1583 font-size: var(--fs-14);
1584 color: var(--clr-text);
1585 line-height: 1;
1586 margin-top: 0.325rem;
1587 }
1588
1589 .notify-date {
1590 text-align: left;
1591 color: var(--clr-text-light);
1592 line-height: 1;
1593 margin-top: 0.375rem;
1594 }
1595
1596 .eazydocs-no-content {
1597 display: block;
1598 text-align: center;
1599 margin-top: 250px;
1600 }
1601 .eazydocs-no-content img {
1602 width: auto;
1603 max-width: 50px;
1604 height: auto;
1605 margin: 0px auto 10px;
1606 }
1607
1608 /*----------------------------------------*/
1609 /* Grid Layout
1610 /*----------------------------------------*/
1611 .container {
1612 width: 100%;
1613 padding-right: 15px;
1614 padding-left: 15px;
1615 margin-right: auto;
1616 margin-left: auto;
1617 }
1618 @media (min-width: 576px) {
1619 .container {
1620 max-width: 540px;
1621 }
1622 }
1623 @media (min-width: 768px) {
1624 .container {
1625 max-width: 720px;
1626 }
1627 }
1628 @media (min-width: 992px) {
1629 .container {
1630 max-width: 960px;
1631 }
1632 }
1633 @media (min-width: 1200px) {
1634 .container {
1635 max-width: 1170px;
1636 }
1637 }
1638 @media (min-width: 1441px) {
1639 .container {
1640 max-width: 1170px;
1641 }
1642 }
1643
1644 .container-fluid {
1645 width: 100%;
1646 padding-right: 15px;
1647 padding-left: 15px;
1648 margin-right: auto;
1649 margin-left: auto;
1650 }
1651
1652 .row {
1653 display: flex;
1654 flex-wrap: wrap;
1655 margin-right: -15px;
1656 margin-left: -15px;
1657 }
1658
1659 .no-gutters {
1660 margin-right: 0;
1661 margin-left: 0;
1662 }
1663 .no-gutters > .col,
1664 .no-gutters > [class*=col-] {
1665 padding-right: 0;
1666 padding-left: 0;
1667 }
1668
1669 html, body {
1670 height: auto !important;
1671 }
1672
1673 body.bbpc-forum-ui {
1674 background: radial-gradient(80.99% 100% at 50% 0%, #00FF0A 0%, #36008E 100%), radial-gradient(50% 123.47% at 50% 50%, #EFE7C8 0%, #36008E 100%), linear-gradient(301.28deg, #FF006B 0%, #48DD9E 100%), linear-gradient(294.84deg, #5A60E4 0%, #D30000 100%), linear-gradient(52.29deg, #000000 0%, #00FF85 100%), radial-gradient(100% 138.69% at 100% 0%, #0007A5 0%, #FF7A00 100%), radial-gradient(70.41% 100% at 50% 0%, #D5B300 0%, #2200AA 100%);
1675 background-blend-mode: screen, screen, lighten, overlay, lighten, difference, normal;
1676 }
1677
1678 /*----------------------------------------*/
1679 /* 03. Sidebar Area
1680 /*----------------------------------------*/
1681 .tab-container {
1682 display: flex;
1683 }
1684
1685 .tab-menu {
1686 position: relative;
1687 background: #000000;
1688 background: -moz-linear-gradient(to right, #000000 0%, #0a1852 100%);
1689 background: -webkit-linear-gradient(to right, #000000 0%, #0a1852 100%);
1690 background: linear-gradient(to right, #000000 0%, #0a1852 100%);
1691 flex: 0 0 auto;
1692 width: 28%;
1693 }
1694 .tab-menu.short {
1695 height: 100vh;
1696 }
1697 @media (max-width: 1680px) {
1698 .tab-menu {
1699 width: 30%;
1700 }
1701 }
1702 .tab-menu .tab-menu-left-layer {
1703 position: absolute;
1704 top: 0;
1705 left: 0;
1706 width: 60px;
1707 height: 100%;
1708 -webkit-transition: 0.3s ease-out;
1709 transition: 0.3s ease-out;
1710 background: rgba(143, 143, 143, 0.5);
1711 }
1712
1713 .easydocs-tab {
1714 display: none;
1715 }
1716 .easydocs-tab.tab-active {
1717 display: block;
1718 }
1719
1720 .easydocs-navitem {
1721 display: flex;
1722 align-items: center;
1723 justify-content: space-between;
1724 padding: 12px 30px 12px 12px;
1725 margin-bottom: 5px;
1726 cursor: pointer;
1727 -webkit-transition: 0.3s ease-out;
1728 transition: 0.3s ease-out;
1729 position: relative;
1730 border-left: 5px solid transparent;
1731 }
1732 @media (max-width: 1680px) {
1733 .easydocs-navitem {
1734 padding: 13px 25px 13px 20px;
1735 }
1736 }
1737 .easydocs-navitem.is-active {
1738 border-left-color: #72aee6;
1739 background: rgba(159, 162, 180, 0.2);
1740 --title-opacity: 1;
1741 --total-page-opacity: 1;
1742 }
1743 .easydocs-navitem.is-active::before {
1744 content: "";
1745 right: 0;
1746 position: absolute;
1747 width: 0;
1748 height: 0;
1749 border-style: solid;
1750 border-width: 7px 10px 7px 0;
1751 border-color: transparent var(--clr-white) transparent transparent;
1752 display: block;
1753 }
1754 .easydocs-navitem.is-active .total-page {
1755 display: none;
1756 }
1757 .easydocs-navitem.is-active .link {
1758 display: flex;
1759 }
1760 .easydocs-navitem .title {
1761 display: flex;
1762 align-items: center;
1763 gap: 0.625rem;
1764 -webkit-transition: 0.3s ease-out;
1765 transition: 0.3s ease-out;
1766 text-decoration: none;
1767 font-size: var(--fs-16);
1768 font-weight: 500;
1769 color: var(--clr-white);
1770 opacity: var(--title-opacity, 0.7);
1771 }
1772 .easydocs-navitem .title img {
1773 border-radius: 7px;
1774 padding: 5px;
1775 height: auto;
1776 background: #fff;
1777 width: 30px;
1778 }
1779 .easydocs-navitem .title span.dashicons {
1780 width: 32px;
1781 }
1782 .easydocs-navitem .title span.easydocs-forums-title {
1783 padding-left: 15px;
1784 }
1785 .easydocs-navitem .total-page {
1786 font-size: var(--fs-12);
1787 color: var(--clr-white);
1788 opacity: var(--total-page-opacity, 0.5);
1789 -webkit-transition: 0.3s ease-out;
1790 transition: 0.3s ease-out;
1791 }
1792 .easydocs-navitem:hover {
1793 background: rgba(159, 162, 180, 0.2);
1794 --title-opacity: 1;
1795 --total-page-opacity: 1;
1796 }
1797 .easydocs-navitem:hover .total-page {
1798 display: none;
1799 }
1800 .easydocs-navitem:hover .link {
1801 display: flex;
1802 }
1803 .easydocs-navitem:hover .link a {
1804 padding-left: 2px;
1805 padding-right: 2px;
1806 }
1807
1808 .link {
1809 align-items: center;
1810 gap: 0.325rem;
1811 display: none;
1812 -webkit-transition: 0.3s ease-out;
1813 transition: 0.3s ease-out;
1814 }
1815 .link a {
1816 text-decoration: none;
1817 }
1818 .link a .dashicons {
1819 color: var(--black_200);
1820 font-size: 18px;
1821 padding-top: 2px;
1822 }
1823 .link a .dashicons:hover {
1824 color: #fff;
1825 }
1826 .link a.st-pro-notice .dashicons {
1827 color: #f1bd6c;
1828 }
1829 .link:hover svg {
1830 color: #fff;
1831 fill-color: #fff;
1832 }
1833
1834 .easydocs-tab-content {
1835 flex: 0 0 auto;
1836 width: 72%;
1837 padding: 0 40px 40px 40px;
1838 }
1839 @media (max-width: 1680px) {
1840 .easydocs-tab-content {
1841 width: 70%;
1842 }
1843 }
1844 @media (max-width: 1440px) {
1845 .easydocs-tab-content {
1846 width: 70%;
1847 padding: 20px;
1848 }
1849 }
1850 .easydocs-tab-content .button {
1851 padding: 6px 25px;
1852 }
1853
1854 .easydocs-filter-container {
1855 background: var(--clr-white);
1856 padding: var(--gutter-15) var(--gutter-30);
1857 border-radius: 0.375rem;
1858 display: flex;
1859 align-items: center;
1860 justify-content: space-between;
1861 background: linear-gradient(125.95deg, #C700BF 10.95%, #7DA900 100%), linear-gradient(341.1deg, #00C2FF 7.52%, #4E00B1 77.98%), linear-gradient(222.34deg, #A90000 12.99%, #00FFE0 87.21%), linear-gradient(130.22deg, #8FA600 18.02%, #5A31FF 100%);
1862 background-blend-mode: screen, color-dodge, color-dodge, normal;
1863 padding-left: 16px;
1864 }
1865 @media (max-width: 1440px) {
1866 .easydocs-filter-container {
1867 padding: 10px 20px;
1868 }
1869 }
1870
1871 .single-item-filter {
1872 display: flex;
1873 align-items: center;
1874 gap: 5px;
1875 }
1876 .single-item-filter .easydocs-btn {
1877 display: flex;
1878 align-items: center;
1879 justify-content: center;
1880 font-size: 12px;
1881 gap: 0.3125rem;
1882 --btn-fs: var(--fs-14);
1883 transition: all 0.3s;
1884 border-radius: 15px;
1885 }
1886 .single-item-filter .easydocs-btn:hover {
1887 background-color: rgba(0, 0, 0, 0.1);
1888 }
1889 .single-item-filter .easydocs-btn.is-active {
1890 background-color: rgba(0, 0, 0, 0.8);
1891 color: #f1f1f1;
1892 }
1893 .single-item-filter .easydocs-btn.easydocs-btn-black-light {
1894 --btn-icon: #0D0E2B;
1895 }
1896 .single-item-filter .easydocs-btn.easydocs-btn-black-light svg {
1897 fill: #0D0E2B;
1898 }
1899 .single-item-filter .easydocs-btn.easydocs-btn-black-light.mixitup-control-active {
1900 --btn-bg: #0D0E2B;
1901 --btn-clr: var(--clr-white);
1902 --btn-icon: var(--clr-white);
1903 }
1904 .single-item-filter .easydocs-btn.easydocs-btn-black-light.mixitup-control-active svg {
1905 fill: #ffffff;
1906 }
1907 .single-item-filter .easydocs-btn.easydocs-btn-green-light {
1908 --btn-icon: #2DB22D;
1909 }
1910 .single-item-filter .easydocs-btn.easydocs-btn-green-light svg {
1911 fill: #2DB22D;
1912 }
1913 .single-item-filter .easydocs-btn.easydocs-btn-green-light.mixitup-control-active {
1914 --btn-bg: #2DB22D;
1915 --btn-clr: var(--clr-white);
1916 --btn-icon: var(--clr-white);
1917 }
1918 .single-item-filter .easydocs-btn.easydocs-btn-green-light.mixitup-control-active svg {
1919 fill: #ffffff;
1920 }
1921 .single-item-filter .easydocs-btn.easydocs-btn-blue-light {
1922 --btn-icon: #0275D8;
1923 }
1924 .single-item-filter .easydocs-btn.easydocs-btn-blue-light svg {
1925 fill: #0275D8;
1926 }
1927 .single-item-filter .easydocs-btn.easydocs-btn-blue-light.mixitup-control-active {
1928 --btn-bg: #0275D8;
1929 --btn-clr: var(--clr-white);
1930 --btn-icon: var(--clr-white);
1931 }
1932 .single-item-filter .easydocs-btn.easydocs-btn-blue-light.mixitup-control-active svg {
1933 fill: #fff;
1934 }
1935 .single-item-filter .easydocs-btn.easydocs-btn-orange-light {
1936 --btn-icon: #CC8033;
1937 }
1938 .single-item-filter .easydocs-btn.easydocs-btn-orange-light svg {
1939 fill: #CC8033;
1940 }
1941 .single-item-filter .easydocs-btn.easydocs-btn-orange-light.mixitup-control-active {
1942 --btn-bg: #CC8033;
1943 --btn-clr: var(--clr-white);
1944 --btn-icon: var(--clr-white);
1945 }
1946 .single-item-filter .easydocs-btn.easydocs-btn-orange-light.mixitup-control-active svg {
1947 fill: #fff;
1948 }
1949 .single-item-filter .easydocs-btn.easydocs-btn-gray-light {
1950 --btn-icon: #424242;
1951 }
1952 .single-item-filter .easydocs-btn.easydocs-btn-gray-light.mixitup-control-active {
1953 --btn-bg: #424242;
1954 --btn-clr: var(--clr-white);
1955 --btn-icon: var(--clr-white);
1956 }
1957
1958 .single-grid-container {
1959 display: flex;
1960 align-items: center;
1961 border: 1px solid #EDEAE9;
1962 border-radius: 0.375rem;
1963 --grid-icon: #9199A1;
1964 }
1965 .single-grid-container a {
1966 text-decoration: none;
1967 padding: 0.3rem 0.5rem 0.5rem;
1968 height: 1.875rem;
1969 }
1970 .single-grid-container a:first-child {
1971 border-right: 1px solid #EDEAE9;
1972 }
1973 .single-grid-container .is-active {
1974 background: rgba(37, 39, 51, 0.05);
1975 --grid-icon: var(--clr-blue);
1976 }
1977
1978 @media screen and (min-width: 1200px) {
1979 .container {
1980 max-width: 1170px;
1981 }
1982 }
1983
1984 /*# sourceMappingURL=admin-ui-style.css.map */
1985