PluginProbe
Forumax – AI Powered Advanced Community Forum Plugin / 1.2.5
Forumax – AI Powered Advanced Community Forum Plugin v1.2.5
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.2.5, at assets/css/admin-ui-style.css

2,038 lines 43.2 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 border: 1px solid #edeae9;
579 }
580 .easydocs-accordion .acc_active .accordion-title {
581 border-bottom: 1px solid #edeae9;
582 }
583 .easydocs-accordion .acc_active .accordion-title::before {
584 transform: translateY(-50%) rotate(90deg);
585 }
586 .easydocs-accordion .ui-state-highlight {
587 height: 50px;
588 background: #f9f9f9;
589 border-top: 1px solid #afabac;
590 border-bottom: 1px solid #afabac;
591 }
592
593 .easydocs-accordion-item {
594 width: 100%;
595 margin: 0;
596 }
597 .easydocs-accordion-item + .easydocs-accordion-item {
598 border-top: 1px solid #edeae9;
599 }
600 .easydocs-accordion-item.is-accordion-open:last-child .accordion-title {
601 border-bottom-left-radius: 0;
602 border-bottom-right-radius: 0;
603 }
604 .easydocs-accordion-item.child-one .child-right-content {
605 align-items: center;
606 }
607 .easydocs-accordion-item.child-one .child-right-content .progress-text {
608 font-size: var(--fs-12);
609 color: var(--clr-text-light);
610 margin-right: var(--gutter-30);
611 }
612 .easydocs-accordion-item.child-one .accordion-title::before {
613 transform: translateY(-50%);
614 }
615 .easydocs-accordion-item.child-one.acc_active .accordion-title::before {
616 transform: translateY(-50%) rotate(90deg);
617 }
618 .easydocs-accordion-item.child-one a {
619 padding: 0;
620 }
621 .easydocs-accordion-item.child-one .accordion-title.has-child a.section-last-label {
622 margin-left: 19px;
623 }
624 .easydocs-accordion-item.child-one .accordion-title.has-child::before {
625 left: 52px;
626 }
627 .easydocs-accordion-item.child-one .nesting-accordion a.child-last-label {
628 margin: 10px 50px 10px 70px;
629 }
630
631 .accordion-title {
632 position: relative;
633 background: #fff;
634 padding: 13px 30px 13px 35px;
635 display: block;
636 cursor: pointer;
637 display: flex;
638 align-items: center;
639 justify-content: space-between;
640 }
641 @media (max-width: 1440px) {
642 .accordion-title {
643 padding: 12px 20px 12px 34px;
644 }
645 }
646 .accordion-title.ez-section-title h4 {
647 font-weight: var(--fw-500);
648 }
649 @media (max-width: 1440px) {
650 .accordion-title.ez-section-title::before {
651 left: 20px;
652 }
653 }
654 .accordion-title.has-child::before {
655 content: "";
656 top: 50%;
657 left: 32px;
658 position: absolute;
659 width: 0;
660 height: 0;
661 border-style: solid;
662 border-width: 5px 0 5px 6px;
663 border-color: transparent transparent transparent var(--clr-text);
664 display: block;
665 transform: translateY(-50%);
666 -webkit-transition: 0.3s ease-out;
667 transition: 0.3s ease-out;
668 }
669 @media (max-width: 1440px) {
670 .accordion-title.has-child::before {
671 left: 20px;
672 }
673 }
674 .accordion-title .count {
675 margin-left: 5px;
676 color: #fff;
677 background: var(--black_200);
678 }
679 .accordion-title ul.actions {
680 display: flex;
681 }
682 .accordion-title ul.actions li {
683 margin: 0;
684 }
685 .accordion-title:hover {
686 background: #f9f9f9;
687 }
688 .accordion-title:hover h4 {
689 color: var(--clr-dark);
690 }
691 .accordion-title:hover ul.actions {
692 display: flex;
693 }
694 .accordion-title:hover ul.actions li {
695 margin: 0;
696 line-height: normal;
697 }
698 .accordion-title h4 {
699 font-size: var(--fs-14);
700 color: var(--clr-text);
701 display: flex;
702 align-items: center;
703 font-weight: normal;
704 }
705 .accordion-title h4 a {
706 text-decoration: none;
707 }
708 .accordion-title .accordion-category-icon {
709 width: 1.25rem;
710 height: 1.25rem;
711 line-height: 1.25rem;
712 border-radius: 50%;
713 text-align: center;
714 margin-left: 5px;
715 }
716 .accordion-title .light-green {
717 background: rgba(45, 178, 45, 0.1);
718 --category-icon: #2db22d;
719 }
720 .accordion-title .light-orange {
721 background: rgba(204, 128, 51, 0.1);
722 --category-icon: #cc8033;
723 }
724 .accordion-title .light-blue {
725 background: rgba(2, 117, 216, 0.1);
726 --category-icon: var(--clr-blue);
727 }
728 .accordion-title .light-gray {
729 background: rgba(66, 66, 66, 0.1);
730 --category-icon: #424242;
731 }
732 .accordion-title ul.actions {
733 display: none;
734 align-items: center;
735 gap: var(--gutter-10);
736 --section-icon: #9199a1;
737 margin-left: 15px;
738 }
739 .accordion-title ul.actions .duplicate {
740 order: 1;
741 }
742 .accordion-title ul.actions .delete {
743 order: 2;
744 }
745 .accordion-title ul.actions li:hover {
746 --section-icon: var(--clr-dark);
747 }
748 .accordion-title ul.actions li a {
749 text-decoration: none;
750 }
751 .accordion-title ul.actions li a .dashicons {
752 color: var(--black_150);
753 font-size: 18px;
754 padding-top: 3px;
755 }
756 .accordion-title ul.actions li a .dashicons:hover {
757 color: var(--black_400);
758 }
759 .accordion-title ul.actions li a img {
760 opacity: 0.5;
761 }
762 .accordion-title ul.actions li a img:hover {
763 opacity: 1;
764 }
765 .accordion-title ul.actions li a.st-pro-notice .dashicons {
766 color: #f1bd6c;
767 }
768 .accordion-title .left-content {
769 display: flex;
770 }
771 .accordion-title .right-content {
772 display: flex;
773 align-items: center;
774 }
775 .accordion-title .right-content .progress-text {
776 font-size: var(--fs-12);
777 color: var(--clr-text-light);
778 margin-left: var(--gutter-30);
779 }
780
781 .easydocs-accordion-body {
782 background: var(--clr-white);
783 color: var(--clr-text);
784 font-size: var(--fs-14);
785 padding: 10px 50px 10px 50px;
786 }
787
788 .nesting-accordion {
789 padding: 0;
790 }
791 .nesting-accordion a {
792 text-decoration: none;
793 }
794
795 .child-docs-wrap {
796 border-bottom: 1px solid #edeae9;
797 }
798 .child-docs-wrap:hover {
799 background-color: #f9f9f9;
800 }
801 .child-docs-wrap .child-right-content {
802 visibility: hidden;
803 }
804 .child-docs-wrap:hover .child-right-content {
805 visibility: visible;
806 }
807
808 a.child-delete,
809 a.child-view-link {
810 padding-left: 5px !important;
811 padding-right: 5px !important;
812 }
813 a.child-delete img,
814 a.child-view-link img {
815 opacity: 0.5;
816 }
817 a.child-delete img:hover,
818 a.child-view-link img:hover {
819 opacity: 1;
820 }
821
822 a.child-delete {
823 padding-right: 28px !important;
824 }
825
826 /* replies count */
827 .count-replies span {
828 position: absolute;
829 top: 1px;
830 left: 8px;
831 color: #fff;
832 font-size: 0.55em;
833 }
834
835 .bbpc-reply-count {
836 box-sizing: border-box;
837 display: block;
838 padding: 0;
839 min-width: 22px;
840 height: 2em;
841 border-radius: 5px;
842 background-color: var(--black_200);
843 color: #fff;
844 font-size: 10px;
845 line-height: 1.9090909;
846 text-align: center;
847 margin-left: 10px;
848 }
849 .bbpc-reply-count:after {
850 content: "";
851 display: block;
852 margin-left: 11px;
853 width: 0;
854 height: 0;
855 border-top: 5px solid var(--black_200);
856 border-right: 5px solid transparent;
857 }
858 .bbpc-reply-count.bbpc-published-replies {
859 background-color: #cc8033;
860 }
861 .bbpc-reply-count.bbpc-published-replies:after {
862 border-top: 5px solid #cc8033;
863 }
864
865 .bbpc-pending-replies:hover, .bbpc-pending-replies:active {
866 background: #0275d8;
867 }
868 .bbpc-pending-replies:hover:after, .bbpc-pending-replies:active:after {
869 border-top-color: #0275d8;
870 }
871
872 .bbpc-nested-replies {
873 margin-left: 30px;
874 display: none;
875 }
876
877 .ez-section-title div:has(.active) .bbpc-pending-replies {
878 background: #0275d8;
879 }
880 .ez-section-title div:has(.active) .bbpc-pending-replies:after {
881 border-top-color: #0275d8;
882 }
883
884 .bbpc-reply-wrap {
885 background-color: #fff;
886 padding: 8px 0;
887 margin-left: 20px;
888 }
889 .bbpc-reply-wrap a {
890 width: 22px;
891 height: 22px;
892 display: inline-block;
893 }
894 .bbpc-reply-wrap:hover {
895 background: #f9f9f9;
896 }
897 .bbpc-reply-wrap:not(:last-child) {
898 border-bottom: 1px solid #edeae9;
899 }
900
901 .ezd-btn {
902 --btn-fs: var(--fs-16);
903 --btn-ff: var(--ff-roboto);
904 --btn-py: 0.5rem;
905 --btn-px: 1.6rem;
906 position: relative;
907 font-family: var(--btn-ff);
908 font-size: var(--btn-fs);
909 font-weight: var(--fw-400);
910 line-height: 1.5;
911 background: var(--btn-bg);
912 color: var(--btn-clr);
913 border: var(--btn-bw, var(--border-width)) var(--btn-bs, var(--border-style)) var(--btn-bc, var(--btn-bg));
914 text-transform: capitalize;
915 text-decoration: none;
916 border-radius: var(--btn-radius, var(--radius));
917 padding: var(--btn-py) var(--btn-px);
918 margin: var(--btn-mx) var(--btn-mx);
919 display: inline-block;
920 overflow: hidden;
921 text-align: center;
922 cursor: pointer;
923 -webkit-transition: 0.3s ease-out;
924 transition: 0.3s ease-out;
925 }
926 .ezd-btn-sm {
927 --btn-py: 0.3125rem;
928 }
929 .ezd-btn-lg {
930 --btn-py: 0.625rem;
931 }
932 .ezd-btn-xl {
933 --btn-py: 0.75rem;
934 }
935 .ezd-btn-none {
936 --btn-radius: 0;
937 }
938 .ezd-btn-round {
939 --btn-radius: 0.375rem;
940 }
941 .ezd-btn-rounded {
942 --btn-radius: 1.875rem;
943 }
944 .ezd-btn-round-full {
945 --btn-radius: 50%;
946 }
947 .ezd-btn-disabled {
948 pointer-events: none;
949 opacity: 0.65;
950 }
951 .ezd-btn-black-light {
952 --btn-bg: rgba(13, 14, 43, 0.1);
953 --btn-clr: #0D0E2B;
954 --btn-bc: transparent;
955 }
956 .ezd-btn-black-light:hover {
957 --btn-clr: #0D0E2B;
958 --btn-bg: rgba(13, 14, 43, 0.1);
959 --btn-bc: #0D0E2B;
960 }
961 .ezd-btn-black-light:focus {
962 outline: 0;
963 box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.5);
964 }
965 .ezd-btn-green-light {
966 --btn-bg: rgba(45, 178, 45, 0.1);
967 --btn-clr: #2DB22D;
968 --btn-bc: transparent;
969 }
970 .ezd-btn-green-light:hover {
971 --btn-clr: #2DB22D;
972 --btn-bg: rgba(45, 178, 45, 0.1);
973 --btn-bc: #2DB22D;
974 }
975 .ezd-btn-green-light:focus {
976 outline: 0;
977 box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.5);
978 }
979 .ezd-btn-blue-light {
980 --btn-bg: rgba(2, 117, 216, 0.1);
981 --btn-clr: #0275D8;
982 --btn-bc: transparent;
983 }
984 .ezd-btn-blue-light:hover {
985 --btn-clr: #0275D8;
986 --btn-bg: rgba(2, 117, 216, 0.1);
987 --btn-bc: #0275D8;
988 }
989 .ezd-btn-blue-light:focus {
990 outline: 0;
991 box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.5);
992 }
993 .ezd-btn-orange-light {
994 --btn-bg: rgba(204, 128, 51, 0.1);
995 --btn-clr: #CC8033;
996 --btn-bc: transparent;
997 }
998 .ezd-btn-orange-light:hover {
999 --btn-clr: #CC8033;
1000 --btn-bg: rgba(204, 128, 51, 0.1);
1001 --btn-bc: #CC8033;
1002 }
1003 .ezd-btn-orange-light:focus {
1004 outline: 0;
1005 box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.5);
1006 }
1007 .ezd-btn-gray-light {
1008 --btn-bg: rgba(66, 66, 66, 0.1);
1009 --btn-clr: #424242;
1010 --btn-bc: transparent;
1011 }
1012 .ezd-btn-gray-light:hover {
1013 --btn-clr: #424242;
1014 --btn-bg: rgba(66, 66, 66, 0.1);
1015 --btn-bc: #424242;
1016 }
1017 .ezd-btn-gray-light:focus {
1018 outline: 0;
1019 box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.5);
1020 }
1021 .ezd-btn-blue {
1022 --btn-bg: var(--clr-blue);
1023 --btn-clr: var(--clr-white);
1024 --btn-bc: var(--clr-blue);
1025 }
1026 .ezd-btn-blue:hover {
1027 --btn-clr: var(--clr-blue);
1028 --btn-bg: transparent;
1029 --btn-bc: var(--clr-blue);
1030 }
1031 .ezd-btn-blue:focus {
1032 outline: 0;
1033 box-shadow: 0 0 0 0.4rem rgba(65, 65, 230, 0.5);
1034 }
1035 .ezd-btn-outline-blue {
1036 --btn-clr: #4141E6;
1037 --btn-bc: #4141E6;
1038 }
1039 .ezd-btn-outline-blue:hover {
1040 --btn-clr: var(--clr-white);
1041 --btn-bg: #4141E6;
1042 --btn-bc: #4141E6;
1043 }
1044 .ezd-btn-outline-blue:focus {
1045 outline: 0;
1046 box-shadow: 0 0 0 0.4rem rgba(65, 65, 230, 0.5);
1047 }
1048 .ezd-btn-white {
1049 --btn-bg: var(--clr-white);
1050 --btn-clr: var(--clr-white);
1051 --btn-bc: var(--clr-white);
1052 }
1053 .ezd-btn-white:hover {
1054 --btn-clr: var(--clr-white);
1055 --btn-bg: transparent;
1056 --btn-bc: var(--clr-white);
1057 }
1058 .ezd-btn-white:focus {
1059 outline: 0;
1060 box-shadow: 0 0 0 0.4rem rgba(255, 255, 255, 0.5);
1061 }
1062 .ezd-btn-outline-white {
1063 --btn-clr: var(--clr-white);
1064 --btn-bc: var(--clr-white);
1065 }
1066 .ezd-btn-outline-white:hover {
1067 --btn-clr: var(--clr-black);
1068 --btn-bg: var(--clr-white);
1069 --btn-bc: var(--clr-white);
1070 }
1071 .ezd-btn-outline-white:focus {
1072 outline: 0;
1073 box-shadow: 0 0 0 0.4rem rgba(var(--clr-white), 0.5);
1074 }
1075 .ezd-btn-gray {
1076 --btn-bg: rgba(37, 39, 51, 0.1);
1077 --btn-clr: var(--clr-dark);
1078 --btn-bc: transparent;
1079 }
1080 .ezd-btn-gray:hover {
1081 --btn-clr: var(--clr-white);
1082 --btn-bg: var(--clr-blue);
1083 --btn-bc: transparent;
1084 }
1085 .ezd-btn-gray:focus {
1086 outline: 0;
1087 box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.5);
1088 }
1089
1090 .easydocs-dropdown {
1091 top: 130%;
1092 right: -20px;
1093 position: absolute;
1094 -webkit-box-shadow: 0 30px 40px 0 rgba(4, 73, 89, 0.1) 0 0 0 rgba(var(--clr-black), 1);
1095 -moz-box-shadow: 0 30px 40px 0 rgba(4, 73, 89, 0.1) 0 0 0 rgba(var(--clr-black), 1);
1096 box-shadow: 0 30px 40px 0 rgba(4, 73, 89, 0.1) 0 0 0 rgba(var(--clr-black), 1);
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: 340px;
1112 border-bottom: 1px solid rgba(0, 0, 0, 0.08);
1113 border-left: 1px solid rgba(0, 0, 0, 0.05);
1114 border-radius: 3px;
1115 box-shadow: 3px 2px 7px 1px rgba(0, 0, 0, 0.08);
1116 }
1117 .notification-dropdown::before {
1118 content: "";
1119 top: -0.625rem;
1120 right: 28px;
1121 position: absolute;
1122 width: 0;
1123 height: 0;
1124 border-style: solid;
1125 border-width: 0 10px 10px 10px;
1126 border-color: transparent transparent #f9f9f9 transparent;
1127 display: block;
1128 }
1129
1130 .notification-head {
1131 padding: 9px 12px;
1132 background: #f9f9f9;
1133 -webkit-box-shadow: 0 1px 0 0 #edeef2;
1134 -moz-box-shadow: 0 1px 0 0 #edeef2;
1135 box-shadow: 0 1px 0 0 #edeef2;
1136 }
1137 .notification-head.no-notification-text {
1138 padding: 20px 12px;
1139 background: #bebebe26;
1140 display: block;
1141 text-align: center;
1142 }
1143 .notification-head .header-text {
1144 color: var(--clr-dark);
1145 font-size: var(--fs-13);
1146 font-weight: var(--fw-500);
1147 line-height: 1;
1148 }
1149 .notification-head .right-text {
1150 color: var(--clr-text);
1151 font-size: var(--fs-12);
1152 line-height: 1;
1153 }
1154
1155 .form-control {
1156 font-family: var(--ff-roboto);
1157 font-size: var(--fs-14);
1158 color: #9199a1;
1159 background: transparent;
1160 text-transform: capitalize;
1161 padding: 0.75rem 1.25rem;
1162 margin: 0 auto;
1163 width: 100%;
1164 height: auto;
1165 max-width: 37.5rem;
1166 border: 1px solid #EDEAE9;
1167 border-radius: 0.625rem;
1168 -webkit-transition: 0.3s ease-out;
1169 transition: 0.3s ease-out;
1170 }
1171 .form-control:focus {
1172 outline: none;
1173 }
1174 .form-control:focus {
1175 background: white;
1176 box-shadow: none !important;
1177 border: 1px solid #4c4cf1 !important;
1178 border-radius: 0.625rem;
1179 box-sizing: border-box !important;
1180 line-height: unset !important;
1181 }
1182 .form-control:focus ~ .search-icon {
1183 background: var(--clr-blue);
1184 --search-icon: var(--clr-white);
1185 }
1186 .form-control:focus ~ .search-icon .dashicons {
1187 color: #fff;
1188 }
1189
1190 .easydocs-search-form {
1191 position: relative;
1192 max-width: 37.5rem;
1193 flex: 1;
1194 margin-left: auto;
1195 margin-right: auto;
1196 }
1197 .easydocs-search-form .search-icon {
1198 position: absolute;
1199 -webkit-transition: 0.3s ease-out;
1200 transition: 0.3s ease-out;
1201 left: 20px;
1202 transform: translateY(50%);
1203 }
1204 .easydocs-search-form input#bbpc-search {
1205 color: #9199a1;
1206 padding: 10px 15px 10px 48px;
1207 border: 1px solid #EDEAE9;
1208 box-sizing: border-box;
1209 line-height: unset;
1210 box-shadow: 0 1px 1px rgba(11, 80, 115, 0.3), 0 1px 5px rgba(60, 64, 67, 0.1);
1211 background: rgba(255, 255, 255, 0.35);
1212 border-radius: 25px;
1213 }
1214 .easydocs-search-form input#bbpc-search:hover {
1215 box-shadow: 0 1px 2px 0 rgba(60, 64, 67, 0.3), 0 2px 6px 2px rgba(60, 64, 67, 0.15);
1216 }
1217 .easydocs-search-form input#bbpc-search:focus {
1218 background: #fff;
1219 color: #242729;
1220 outline: none;
1221 }
1222
1223 .easydocs-accordion-item progress {
1224 -webkit-appearance: none;
1225 appearance: none;
1226 height: 6px;
1227 border-radius: 32px;
1228 width: 100px;
1229 }
1230 .easydocs-accordion-item progress::-webkit-progress-bar {
1231 background-color: #e74c3c;
1232 }
1233 .easydocs-accordion-item progress::-webkit-progress-value {
1234 background-color: #27ae60;
1235 }
1236
1237 .badge {
1238 display: inline-block;
1239 padding: 0.35em 0.65em 0.3em;
1240 font-size: 0.75em;
1241 font-weight: 400;
1242 line-height: 1;
1243 color: #fff;
1244 text-align: center;
1245 white-space: nowrap;
1246 vertical-align: baseline;
1247 border-radius: 0.25rem;
1248 }
1249
1250 /*----------------------------------------*/
1251 /* 02. Header Area
1252 /*----------------------------------------*/
1253 .easydocs-header-area {
1254 padding-top: 40px;
1255 padding-bottom: 50px;
1256 }
1257 .easydocs-header-area .easydocs-row {
1258 margin-left: 0;
1259 margin-right: 0;
1260 }
1261
1262 .navbar-left {
1263 gap: var(--gutter-20);
1264 }
1265 .navbar-left .easydocs-btn {
1266 --btn-icon: var(--clr-blue);
1267 --btn-py: 0.5rem;
1268 --btn-px: 1rem;
1269 --btn-fs: var(--fs-12);
1270 font-weight: 500;
1271 display: flex;
1272 align-items: center;
1273 gap: 6px;
1274 }
1275 .navbar-left .easydocs-btn span.dashicons {
1276 font-size: 14px;
1277 margin-bottom: -4px;
1278 }
1279 .navbar-left .easydocs-btn:hover {
1280 --btn-icon: var(--clr-white);
1281 }
1282
1283 .easydocs-logo-area a {
1284 text-decoration: none;
1285 color: var(--clr-dark);
1286 font-size: var(--fs-24);
1287 font-weight: var(--fw-700);
1288 }
1289
1290 :is(.easydocs-notification, .easydocs-settings) .header-notify-icon {
1291 width: 2.5rem;
1292 height: 2.5rem;
1293 line-height: 2.5rem;
1294 border-radius: 50%;
1295 background: rgba(37, 39, 51, 0.05);
1296 text-align: center;
1297 cursor: pointer;
1298 }
1299 :is(.easydocs-notification, .easydocs-settings) .header-notify-icon:hover {
1300 background: rgba(37, 39, 51, 0.09);
1301 }
1302 :is(.easydocs-notification, .easydocs-settings) .header-notify-icon svg {
1303 position: relative;
1304 top: 0.3rem;
1305 }
1306
1307 .easydocs-notification {
1308 margin-right: 1.6875rem;
1309 position: relative;
1310 }
1311 .easydocs-notification .easydocs-badge {
1312 top: -0.4375rem;
1313 right: -0.5rem;
1314 position: absolute;
1315 background: #FA3E3E;
1316 color: var(--clr-white);
1317 top: -0.4375rem;
1318 right: -0.2rem;
1319 position: absolute;
1320 padding: 0 4px;
1321 min-width: 18px;
1322 max-width: 18px;
1323 border-radius: 50%;
1324 text-align: center;
1325 font-size: 10px;
1326 font-weight: 700;
1327 line-height: 18px;
1328 height: 16px;
1329 display: inline-table;
1330 font-family: "Roboto";
1331 }
1332
1333 .easydocs-settings .header-notify-icons a {
1334 text-decoration: none;
1335 padding-top: 5px;
1336 display: inline-block;
1337 }
1338
1339 :is(.knobs, .layer) {
1340 inset: 0;
1341 position: absolute;
1342 }
1343
1344 .navbar-right .js-darkmode-btn .day svg {
1345 color: #fff;
1346 }
1347 .navbar-right .js-darkmode-btn .night svg {
1348 color: var(--clr-dark);
1349 }
1350
1351 .body_dark .navbar-right .js-darkmode-btn .day svg {
1352 --toggle-icon: #575766;
1353 }
1354 .body_dark .navbar-right .js-darkmode-btn .night svg {
1355 --toggle-icon: #fff;
1356 }
1357
1358 .navbar-right {
1359 display: flex;
1360 align-items: center;
1361 justify-content: flex-end;
1362 }
1363 .navbar-right > ul {
1364 align-items: center;
1365 gap: 8px;
1366 }
1367 .navbar-right .js-darkmode-btn {
1368 display: flex;
1369 align-items: center;
1370 justify-content: space-between;
1371 width: 5rem;
1372 height: 2.5rem;
1373 position: relative;
1374 background: rgba(37, 39, 51, 0.05);
1375 padding: 0 10px;
1376 color: #fff;
1377 border-radius: 24px;
1378 -webkit-transition: 0.3s ease-out;
1379 transition: 0.3s ease-out;
1380 }
1381 .navbar-right .js-darkmode-btn .day svg {
1382 --toggle-icon: #fff;
1383 -webkit-transition: 0.3s ease-out;
1384 transition: 0.3s ease-out;
1385 margin-top: 7px;
1386 }
1387 .navbar-right .js-darkmode-btn .night svg {
1388 --toggle-icon: #575766;
1389 -webkit-transition: 0.3s ease-out;
1390 transition: 0.3s ease-out;
1391 margin-top: 7px;
1392 }
1393 .navbar-right .js-darkmode-btn label {
1394 margin: 0;
1395 cursor: pointer;
1396 position: relative;
1397 z-index: 2;
1398 }
1399 .navbar-right .js-darkmode-btn .ball {
1400 height: 30px;
1401 width: 30px;
1402 position: absolute;
1403 background-color: var(--clr-blue);
1404 border-radius: 50%;
1405 left: 4px;
1406 top: 50%;
1407 transform: translateY(-50%);
1408 cursor: default;
1409 transition: all 0.3s linear 0s;
1410 z-index: 1;
1411 }
1412 .navbar-right .js-darkmode-btn svg {
1413 font-size: 16px;
1414 transition: all 0.3s linear 0s;
1415 }
1416 .navbar-right .js-darkmode-btn input {
1417 display: none;
1418 }
1419
1420 .settings-pro-icon {
1421 position: absolute;
1422 right: 0px;
1423 top: -5px;
1424 }
1425
1426 .swal2-styled.swal2-confirm.upgrade-premium-button > a {
1427 color: black;
1428 font-weight: normal;
1429 text-decoration: none;
1430 }
1431
1432 .swal2-footer.notification-pro-footer-wrap > a {
1433 text-decoration: none;
1434 }
1435
1436 .notification-body .filter-button-group {
1437 display: flex;
1438 gap: 8px;
1439 padding-left: var(--gutter-25);
1440 padding-right: var(--gutter-25);
1441 }
1442 .notification-body .filter-button-group svg {
1443 top: 0;
1444 }
1445 .notification-body .filter-button-group .easydocs-btn {
1446 --notification-icon: var(--clr-dark);
1447 --btn-px: 1rem;
1448 --btn-fs: var(--fs-14);
1449 --btn-py: 0.4rem;
1450 display: flex;
1451 align-items: center;
1452 gap: 1px;
1453 --btn-bg: #e4e6eb;
1454 --btn-clr: var(--clr-dark);
1455 --btn-bc: transparent;
1456 }
1457 .notification-body .filter-button-group .easydocs-btn.mixitup-control-active {
1458 background-color: #e7f3ff;
1459 color: #1877f2;
1460 --notification-icon: #1877f2;
1461 }
1462 .notification-body .filter-button-group .easydocs-btn.mixitup-control-active .dashicons-screenoptions:before {
1463 color: #1877f2;
1464 }
1465 .notification-body .filter-button-group .easydocs-btn.mixitup-control-active:hover {
1466 background-color: #d2e6f9;
1467 }
1468 .notification-body .filter-button-group .easydocs-btn:hover {
1469 --notification-icon: var(--clr-white);
1470 background: #cdcdcd;
1471 }
1472
1473 .notify-column {
1474 max-height: 25rem;
1475 overflow-y: auto;
1476 scrollbar-width: thin;
1477 /* Notification updated css */
1478 }
1479 .notify-column::-webkit-scrollbar-track {
1480 background-color: var(--clr-text-light);
1481 }
1482 .notify-column::-webkit-scrollbar {
1483 width: 8px;
1484 background-color: #F5F5F5;
1485 }
1486 .notify-column::-webkit-scrollbar-thumb {
1487 background-color: var(--clr-text);
1488 }
1489 .notify-column ul li {
1490 border-bottom: 1px solid #f1f2f3;
1491 margin-bottom: 0;
1492 }
1493 .notify-column ul li a {
1494 text-decoration: none;
1495 gap: 9px;
1496 align-content: space-around;
1497 padding: 10px;
1498 box-sizing: border-box;
1499 }
1500 .notify-column ul li a .notify-icon {
1501 padding-top: 5px;
1502 }
1503 .notify-column ul li a .notify-content-wrap {
1504 width: -webkit-fill-available;
1505 }
1506 .notify-column ul li a .notify-content-wrap .notify-content-header {
1507 color: #525960;
1508 font-size: 12px;
1509 }
1510 .notify-column ul li a .notify-content-wrap .notify-content-header .noti-type {
1511 color: var(--black_800);
1512 font-weight: 500;
1513 }
1514 .notify-column ul li a .notify-content-wrap .notify-content-summary p {
1515 color: #0074cc;
1516 font-size: 13px;
1517 }
1518 .notify-column ul li a:focus {
1519 box-shadow: none;
1520 }
1521 .notify-column ul li:hover {
1522 background: #e3e6e8;
1523 }
1524 .notify-column ul li:last-child {
1525 border-bottom: none;
1526 }
1527
1528 .notification-item {
1529 display: flex;
1530 align-items: flex-start;
1531 cursor: pointer;
1532 gap: var(--gutter-10);
1533 padding: var(--gutter-10) 15px;
1534 margin-left: var(--gutter-10);
1535 margin-right: var(--gutter-10);
1536 -webkit-transition: 0.3s ease-out;
1537 transition: 0.3s ease-out;
1538 border-radius: 0.3125rem;
1539 }
1540 .notification-item .notification-image {
1541 width: 2.5rem;
1542 height: 2.5rem;
1543 border-radius: 50%;
1544 position: relative;
1545 }
1546 .notification-item .notification-image .notify-badge {
1547 right: 0;
1548 bottom: 0;
1549 position: absolute;
1550 width: 1.125rem;
1551 height: 1.125rem;
1552 line-height: 1.125rem;
1553 border-radius: 50%;
1554 text-align: center;
1555 }
1556 .notification-item .notification-image .notify-badge .dashicons {
1557 top: 0;
1558 }
1559 .notification-item .notification-image .notify-badge-blue {
1560 background-color: #22AAF1;
1561 background-image: linear-gradient(180deg, #22AAF1 0%, #066BDA 100%);
1562 }
1563 .notification-item .notification-image .notify-badge-blue .dashicons {
1564 font-size: 12px;
1565 color: white;
1566 padding-top: 2.5px;
1567 }
1568 .notification-item .notification-image .notify-badge-green {
1569 background-color: #62D77E;
1570 background-image: linear-gradient(180deg, #62D77E 0%, #2BB64E 100%);
1571 }
1572 .notification-item .notification-image .notify-badge-green .dashicons {
1573 font-size: 12px;
1574 color: white;
1575 padding-top: 4px;
1576 }
1577 .notification-item:hover {
1578 background: rgba(76, 76, 241, 0.05);
1579 }
1580
1581 .notification-content .notify-name {
1582 font-size: var(--fs-14);
1583 font-weight: var(--fw-500);
1584 color: var(--clr-dark);
1585 padding-right: 0.5rem;
1586 margin: 0;
1587 line-height: 1;
1588 }
1589 .notification-content .notify-name a {
1590 text-decoration: none;
1591 }
1592 .notification-content .reply-text {
1593 font-size: 14px;
1594 color: var(--clr-text-light);
1595 line-height: 1;
1596 margin-top: 5px;
1597 }
1598
1599 .notify-short-description {
1600 font-size: var(--fs-14);
1601 color: var(--clr-text);
1602 line-height: 1;
1603 margin-top: 0.325rem;
1604 }
1605
1606 .notify-date {
1607 text-align: left;
1608 color: var(--clr-text-light);
1609 line-height: 1;
1610 margin-top: 0.375rem;
1611 }
1612
1613 .eazydocs-no-content {
1614 display: block;
1615 text-align: center;
1616 margin-top: 250px;
1617 }
1618 .eazydocs-no-content img {
1619 width: auto;
1620 max-width: 50px;
1621 height: auto;
1622 margin: 0px auto 10px;
1623 }
1624
1625 .bbpc-trash-filter {
1626 border-radius: 1.875rem;
1627 margin-bottom: 0;
1628 background-color: rgba(212, 23, 23, 0.1);
1629 transition: all 0.3s;
1630 }
1631 .bbpc-trash-filter:hover {
1632 background-color: rgba(212, 23, 23, 0.3);
1633 }
1634 .bbpc-trash-filter svg {
1635 fill: #d41717;
1636 }
1637 .bbpc-trash-filter a {
1638 justify-content: center;
1639 gap: 0.3125rem;
1640 padding: 5px 15px;
1641 font-size: 14px;
1642 display: flex;
1643 align-items: center;
1644 color: #d41717;
1645 text-decoration: none;
1646 }
1647
1648 .bbpc-settings-icon {
1649 background: rgba(0, 0, 255, 0.058);
1650 padding: 10px;
1651 border-radius: 50%;
1652 }
1653
1654 /*----------------------------------------*/
1655 /* Grid Layout
1656 /*----------------------------------------*/
1657 .container {
1658 width: 100%;
1659 padding-right: 15px;
1660 padding-left: 15px;
1661 margin-right: auto;
1662 margin-left: auto;
1663 }
1664 @media (min-width: 576px) {
1665 .container {
1666 max-width: 540px;
1667 }
1668 }
1669 @media (min-width: 768px) {
1670 .container {
1671 max-width: 720px;
1672 }
1673 }
1674 @media (min-width: 992px) {
1675 .container {
1676 max-width: 960px;
1677 }
1678 }
1679 @media (min-width: 1200px) {
1680 .container {
1681 max-width: 1170px;
1682 }
1683 }
1684 @media (min-width: 1441px) {
1685 .container {
1686 max-width: 1170px;
1687 }
1688 }
1689
1690 .container-fluid {
1691 width: 100%;
1692 padding-right: 15px;
1693 padding-left: 15px;
1694 margin-right: auto;
1695 margin-left: auto;
1696 }
1697
1698 .row {
1699 display: flex;
1700 flex-wrap: wrap;
1701 margin-right: -15px;
1702 margin-left: -15px;
1703 }
1704
1705 .no-gutters {
1706 margin-right: 0;
1707 margin-left: 0;
1708 }
1709 .no-gutters > .col,
1710 .no-gutters > [class*=col-] {
1711 padding-right: 0;
1712 padding-left: 0;
1713 }
1714
1715 html, body {
1716 height: auto !important;
1717 }
1718
1719 body.bbpc-forum-ui {
1720 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%);
1721 background-blend-mode: screen, screen, lighten, overlay, lighten, difference, normal;
1722 }
1723
1724 /*----------------------------------------*/
1725 /* 03. Sidebar Area
1726 /*----------------------------------------*/
1727 .tab-container {
1728 display: flex;
1729 }
1730
1731 .tab-menu {
1732 position: relative;
1733 background: #000000;
1734 background: -moz-linear-gradient(to right, #000000 0%, #0a1852 100%);
1735 background: -webkit-linear-gradient(to right, #000000 0%, #0a1852 100%);
1736 background: linear-gradient(to right, #000000 0%, #0a1852 100%);
1737 flex: 0 0 auto;
1738 width: 28%;
1739 }
1740 .tab-menu.short {
1741 height: 100vh;
1742 }
1743 @media (max-width: 1680px) {
1744 .tab-menu {
1745 width: 30%;
1746 }
1747 }
1748 .tab-menu .tab-menu-left-layer {
1749 position: absolute;
1750 top: 0;
1751 left: 0;
1752 width: 60px;
1753 height: 100%;
1754 -webkit-transition: 0.3s ease-out;
1755 transition: 0.3s ease-out;
1756 background: rgba(143, 143, 143, 0.3);
1757 }
1758
1759 .easydocs-tab {
1760 display: none;
1761 }
1762 .easydocs-tab.tab-active {
1763 display: block;
1764 }
1765
1766 .easydocs-navitem {
1767 display: flex;
1768 align-items: center;
1769 justify-content: space-between;
1770 padding: 12px 30px 12px 12px;
1771 margin-bottom: 5px;
1772 cursor: pointer;
1773 -webkit-transition: 0.3s ease-out;
1774 transition: 0.3s ease-out;
1775 position: relative;
1776 border-left: 5px solid transparent;
1777 }
1778 @media (max-width: 1680px) {
1779 .easydocs-navitem {
1780 padding: 13px 25px 13px 20px;
1781 }
1782 }
1783 .easydocs-navitem.is-active {
1784 border-left-color: #72aee6;
1785 background: rgba(159, 162, 180, 0.2);
1786 --title-opacity: 1;
1787 --total-page-opacity: 1;
1788 }
1789 .easydocs-navitem.is-active::before {
1790 content: "";
1791 right: 0;
1792 position: absolute;
1793 width: 0;
1794 height: 0;
1795 border-style: solid;
1796 border-width: 7px 10px 7px 0;
1797 border-color: transparent var(--clr-white) transparent transparent;
1798 display: block;
1799 }
1800 .easydocs-navitem.is-active .total-page {
1801 display: none;
1802 }
1803 .easydocs-navitem.is-active .link {
1804 display: flex;
1805 }
1806 .easydocs-navitem .title {
1807 display: flex;
1808 align-items: center;
1809 gap: 0.625rem;
1810 -webkit-transition: 0.3s ease-out;
1811 transition: 0.3s ease-out;
1812 text-decoration: none;
1813 font-size: var(--fs-16);
1814 font-weight: 500;
1815 color: var(--clr-white);
1816 opacity: var(--title-opacity, 0.7);
1817 }
1818 .easydocs-navitem .title img {
1819 border-radius: 7px;
1820 padding: 5px;
1821 height: auto;
1822 background: #fff;
1823 width: 30px;
1824 }
1825 .easydocs-navitem .title span.dashicons {
1826 width: 32px;
1827 }
1828 .easydocs-navitem .title span.easydocs-forums-title {
1829 padding-left: 20px;
1830 }
1831 .easydocs-navitem .total-page {
1832 font-size: var(--fs-12);
1833 color: var(--clr-white);
1834 opacity: var(--total-page-opacity, 0.5);
1835 -webkit-transition: 0.3s ease-out;
1836 transition: 0.3s ease-out;
1837 }
1838 .easydocs-navitem:hover {
1839 background: rgba(159, 162, 180, 0.2);
1840 --title-opacity: 1;
1841 --total-page-opacity: 1;
1842 }
1843 .easydocs-navitem:hover .total-page {
1844 display: none;
1845 }
1846 .easydocs-navitem:hover .link {
1847 display: flex;
1848 }
1849 .easydocs-navitem:hover .link a {
1850 padding-left: 2px;
1851 padding-right: 2px;
1852 }
1853
1854 .link {
1855 align-items: center;
1856 gap: 0.325rem;
1857 display: none;
1858 -webkit-transition: 0.3s ease-out;
1859 transition: 0.3s ease-out;
1860 }
1861 .link a {
1862 text-decoration: none;
1863 }
1864 .link a .dashicons {
1865 color: var(--black_200);
1866 font-size: 18px;
1867 padding-top: 2px;
1868 }
1869 .link a .dashicons:hover {
1870 color: #fff;
1871 }
1872 .link a.st-pro-notice .dashicons {
1873 color: #f1bd6c;
1874 }
1875 .link:hover svg {
1876 color: #fff;
1877 fill-color: #fff;
1878 }
1879
1880 .easydocs-tab-content {
1881 flex: 0 0 auto;
1882 width: 72%;
1883 padding: 0 40px 40px 40px;
1884 }
1885 @media (max-width: 1680px) {
1886 .easydocs-tab-content {
1887 width: 70%;
1888 }
1889 }
1890 @media (max-width: 1440px) {
1891 .easydocs-tab-content {
1892 width: 70%;
1893 padding: 20px;
1894 }
1895 }
1896 .easydocs-tab-content .button {
1897 padding: 6px 25px;
1898 }
1899
1900 .easydocs-filter-container {
1901 background: var(--clr-white);
1902 padding: var(--gutter-15) var(--gutter-30);
1903 border-radius: 0.375rem;
1904 display: flex;
1905 align-items: center;
1906 justify-content: space-between;
1907 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%);
1908 background-blend-mode: screen, color-dodge, color-dodge, normal;
1909 padding-left: 16px;
1910 }
1911 @media (max-width: 1440px) {
1912 .easydocs-filter-container {
1913 padding: 10px 20px;
1914 }
1915 }
1916
1917 .single-item-filter {
1918 display: flex;
1919 align-items: center;
1920 gap: 5px;
1921 }
1922 .single-item-filter.all-available li {
1923 padding: 5px 15px;
1924 }
1925 .single-item-filter .easydocs-btn {
1926 display: flex;
1927 align-items: center;
1928 justify-content: center;
1929 font-size: 12px;
1930 gap: 0.3125rem;
1931 --btn-fs: var(--fs-14);
1932 transition: all 0.3s;
1933 border-radius: 15px;
1934 padding: 5px 25px;
1935 }
1936 .single-item-filter .easydocs-btn:hover {
1937 background-color: rgba(0, 0, 0, 0.1);
1938 }
1939 .single-item-filter .easydocs-btn.is-active {
1940 background-color: rgba(0, 0, 0, 0.8);
1941 color: #f1f1f1;
1942 }
1943 .single-item-filter .easydocs-btn.easydocs-btn-black-light {
1944 --btn-icon: #0D0E2B;
1945 }
1946 .single-item-filter .easydocs-btn.easydocs-btn-black-light svg {
1947 fill: #0D0E2B;
1948 }
1949 .single-item-filter .easydocs-btn.easydocs-btn-black-light.mixitup-control-active {
1950 --btn-bg: #0D0E2B;
1951 --btn-clr: var(--clr-white);
1952 --btn-icon: var(--clr-white);
1953 }
1954 .single-item-filter .easydocs-btn.easydocs-btn-black-light.mixitup-control-active svg {
1955 fill: #ffffff;
1956 }
1957 .single-item-filter .easydocs-btn.easydocs-btn-green-light {
1958 --btn-icon: #2DB22D;
1959 }
1960 .single-item-filter .easydocs-btn.easydocs-btn-green-light svg {
1961 fill: #2DB22D;
1962 }
1963 .single-item-filter .easydocs-btn.easydocs-btn-green-light.mixitup-control-active {
1964 --btn-bg: #2DB22D;
1965 --btn-clr: var(--clr-white);
1966 --btn-icon: var(--clr-white);
1967 }
1968 .single-item-filter .easydocs-btn.easydocs-btn-green-light.mixitup-control-active svg {
1969 fill: #ffffff;
1970 }
1971 .single-item-filter .easydocs-btn.easydocs-btn-blue-light {
1972 --btn-icon: #0275D8;
1973 }
1974 .single-item-filter .easydocs-btn.easydocs-btn-blue-light svg {
1975 fill: #0275D8;
1976 }
1977 .single-item-filter .easydocs-btn.easydocs-btn-blue-light.mixitup-control-active {
1978 --btn-bg: #0275D8;
1979 --btn-clr: var(--clr-white);
1980 --btn-icon: var(--clr-white);
1981 }
1982 .single-item-filter .easydocs-btn.easydocs-btn-blue-light.mixitup-control-active svg {
1983 fill: #fff;
1984 }
1985 .single-item-filter .easydocs-btn.easydocs-btn-orange-light {
1986 --btn-icon: #CC8033;
1987 }
1988 .single-item-filter .easydocs-btn.easydocs-btn-orange-light svg {
1989 fill: #CC8033;
1990 }
1991 .single-item-filter .easydocs-btn.easydocs-btn-orange-light.mixitup-control-active {
1992 --btn-bg: #CC8033;
1993 --btn-clr: var(--clr-white);
1994 --btn-icon: var(--clr-white);
1995 }
1996 .single-item-filter .easydocs-btn.easydocs-btn-orange-light.mixitup-control-active svg {
1997 fill: #fff;
1998 }
1999 .single-item-filter .easydocs-btn.easydocs-btn-gray-light {
2000 --btn-icon: #424242;
2001 }
2002 .single-item-filter .easydocs-btn.easydocs-btn-gray-light.mixitup-control-active {
2003 --btn-bg: #424242;
2004 --btn-clr: var(--clr-white);
2005 --btn-icon: var(--clr-white);
2006 }
2007
2008 .single-grid-container {
2009 display: flex;
2010 align-items: center;
2011 border: 1px solid #EDEAE9;
2012 border-radius: 0.375rem;
2013 --grid-icon: #9199A1;
2014 }
2015 .single-grid-container a {
2016 text-decoration: none;
2017 padding: 0.3rem 0.5rem 0.5rem;
2018 height: 1.875rem;
2019 }
2020 .single-grid-container a:first-child {
2021 border-right: 1px solid #EDEAE9;
2022 }
2023 .single-grid-container .is-active {
2024 background: rgba(37, 39, 51, 0.05);
2025 --grid-icon: var(--clr-blue);
2026 }
2027
2028 @media screen and (min-width: 1200px) {
2029 .container {
2030 max-width: 1170px;
2031 }
2032 }
2033 #wpcontent {
2034 height: 100vh;
2035 }
2036
2037 /*# sourceMappingURL=admin-ui-style.css.map */
2038