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

2,046 lines 43.5 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 *::before,
242 *::after {
243 animation-duration: 0.01ms !important;
244 animation-iteration-count: 1 !important;
245 transition-duration: 0.01ms !important;
246 scroll-behavior: auto !important;
247 }
248 }
249 .fill-current {
250 fill: currentColor;
251 }
252
253 .scrollToTop {
254 width: 30px;
255 height: 30px;
256 line-height: 30px;
257 text-align: center;
258 color: var(--clr-blue);
259 font-size: 25px;
260 background: transparent;
261 position: fixed;
262 right: 20px;
263 bottom: 50px;
264 display: none;
265 z-index: 99999;
266 border-radius: 50%;
267 }
268 @media screen and (min-width: 576px) {
269 .scrollToTop {
270 width: 50px;
271 height: 50px;
272 line-height: 50px;
273 }
274 }
275 .scrollToTop:hover {
276 color: var(--clr-blue);
277 }
278
279 .no-scroll-y {
280 overflow-y: hidden;
281 }
282
283 .text-blue {
284 color: var(--clr-blue);
285 }
286
287 .green {
288 color: #27ae60;
289 }
290
291 .red {
292 color: #e74c3c;
293 }
294
295 h1,
296 h2,
297 h3,
298 h4,
299 h5,
300 h6 {
301 font-family: var(--ff-roboto);
302 color: #14183E;
303 line-height: 1.4;
304 }
305
306 h1 a,
307 h2 a,
308 h3 a,
309 h4 a,
310 h5 a,
311 h6 a {
312 color: inherit;
313 }
314
315 h1 {
316 font-size: 2rem;
317 }
318 @media screen and (min-width: 20rem) {
319 h1 {
320 font-size: calc(2rem + 1.75 * (100vw - 20rem) / 55);
321 }
322 }
323 @media screen and (min-width: 75rem) {
324 h1 {
325 font-size: 3.75rem;
326 }
327 }
328
329 h2 {
330 font-size: 2rem;
331 }
332 @media screen and (min-width: 20rem) {
333 h2 {
334 font-size: calc(2rem + 1 * (100vw - 20rem) / 55);
335 }
336 }
337 @media screen and (min-width: 75rem) {
338 h2 {
339 font-size: 3rem;
340 }
341 }
342
343 h3 {
344 font-size: 1.375rem;
345 }
346 @media screen and (min-width: 20rem) {
347 h3 {
348 font-size: calc(1.375rem + 0.125 * (100vw - 20rem) / 55);
349 }
350 }
351 @media screen and (min-width: 75rem) {
352 h3 {
353 font-size: 1.5rem;
354 }
355 }
356
357 h4 {
358 font-size: 1rem;
359 }
360 @media screen and (min-width: 20rem) {
361 h4 {
362 font-size: calc(1rem + 0.125 * (100vw - 20rem) / 55);
363 }
364 }
365 @media screen and (min-width: 75rem) {
366 h4 {
367 font-size: 1.125rem;
368 }
369 }
370
371 ul {
372 margin: 0;
373 padding: 0;
374 }
375
376 li {
377 list-style: none;
378 }
379
380 hr {
381 background: #c2cfff;
382 width: 50px;
383 height: 3px;
384 margin: 35px 0;
385 padding: 0;
386 border: none;
387 }
388 @media screen and (min-width: 768px) {
389 hr {
390 margin-top: 25px;
391 margin-bottom: 25px;
392 }
393 }
394
395 p {
396 margin: 0;
397 }
398
399 label {
400 color: var(--clr-black);
401 cursor: pointer;
402 font-size: 14px;
403 font-weight: 400;
404 }
405
406 /*Home 3 Default Font Family*/
407 .home-3 {
408 font-size: var(--fs-15);
409 font-weight: var(--fw-400);
410 color: var(--clr-black);
411 font-family: var(--font-quicksand);
412 }
413
414 /*Home 3 Default Font Family*/
415 .home-4 {
416 font-size: var(--fs-15);
417 font-weight: var(--fw-400);
418 font-family: var(--font-arimo);
419 }
420
421 .alignment-center {
422 align-items: center;
423 }
424
425 .justify-content-between {
426 justify-content: space-between;
427 }
428
429 .justify-content-end {
430 justify-content: end;
431 }
432
433 /*--------------------------------------
434 - Color
435 ----------------------------------------*/
436 .color {
437 color: var(--clr-black);
438 }
439
440 .text-black {
441 color: var(--clr-black) !important;
442 }
443
444 .bg-black {
445 background: var(--clr-black);
446 }
447
448 .text-white {
449 color: var(--clr-white) !important;
450 }
451
452 .bg-white {
453 background: var(--clr-white);
454 }
455
456 .d-block {
457 display: block;
458 }
459
460 .d-inline-block {
461 display: inline-block;
462 }
463
464 .d-grid {
465 display: grid;
466 }
467
468 .d-flex {
469 display: flex;
470 }
471
472 .flex-row {
473 flex-direction: row;
474 }
475
476 .flex-reverse {
477 flex-direction: row-reverse;
478 }
479
480 .flex-column {
481 flex-direction: column;
482 }
483
484 .flex-column-reverse {
485 flex-direction: column-reverse;
486 }
487
488 /*--
489 - Font Famaly
490 -----------------------------------------*/
491 /*--
492 - Font weight
493 -----------------------------------------*/
494 .font-regular {
495 font-weight: var(--fw-400);
496 }
497
498 .font-medium {
499 font-weight: var(--fw-500);
500 }
501
502 .font-semi-bold {
503 font-weight: var(--fw-600);
504 }
505
506 .font-bold {
507 font-weight: var(--fw-700);
508 }
509
510 .font-black {
511 font-weight: var(--fw-900);
512 }
513
514 /*--
515 - Font Size
516 -----------------------------------------*/
517 /*--
518 - Margin
519 -------------------------------------------*/
520 .mt-n3 {
521 margin-top: -0.4375rem;
522 }
523
524 .mt-n4 {
525 margin-top: -0.75rem;
526 }
527
528 .m-auto {
529 margin: auto;
530 }
531
532 .mx-auto {
533 margin-left: auto;
534 margin-right: auto;
535 }
536
537 .mt-0 {
538 margin-top: 0;
539 }
540
541 .mt-73 {
542 margin-top: 4.5625rem;
543 }
544
545 .mb-8 {
546 margin-bottom: 2rem;
547 }
548
549 .mr-1 {
550 margin-right: 0.25rem;
551 }
552
553 @media (min-width: 768px) {
554 .mt-md-n4 {
555 margin-top: -0.75rem;
556 }
557 }
558
559 .mt-40 {
560 margin-top: 40px;
561 }
562
563 /*---
564 -- Padding
565 -------------------------------------------*/
566 /*----------------------------------------*/
567 /* Component CSS
568 /*----------------------------------------*/
569 .easydocs-accordion {
570 position: relative;
571 padding: 0;
572 list-style: none;
573 margin: 10px 0 20px;
574 background: var(--clr-white);
575 border-radius: 5px;
576 overflow: hidden;
577 border: 1px solid #edeae9;
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: 10px;
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 .ezd-btn {
901 --btn-fs: var(--fs-16);
902 --btn-ff: var(--ff-roboto);
903 --btn-py: 0.5rem;
904 --btn-px: 1.6rem;
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 .ezd-btn-sm {
926 --btn-py: 0.3125rem;
927 }
928 .ezd-btn-lg {
929 --btn-py: 0.625rem;
930 }
931 .ezd-btn-xl {
932 --btn-py: 0.75rem;
933 }
934 .ezd-btn-none {
935 --btn-radius: 0;
936 }
937 .ezd-btn-round {
938 --btn-radius: 0.375rem;
939 }
940 .ezd-btn-rounded {
941 --btn-radius: 1.875rem;
942 }
943 .ezd-btn-round-full {
944 --btn-radius: 50%;
945 }
946 .ezd-btn-disabled {
947 pointer-events: none;
948 opacity: 0.65;
949 }
950 .ezd-btn-black-light {
951 --btn-bg: rgba(13, 14, 43, 0.1);
952 --btn-clr: #0D0E2B;
953 --btn-bc: transparent;
954 }
955 .ezd-btn-black-light:hover {
956 --btn-clr: #0D0E2B;
957 --btn-bg: rgba(13, 14, 43, 0.1);
958 --btn-bc: #0D0E2B;
959 }
960 .ezd-btn-black-light:focus {
961 outline: 0;
962 box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.5);
963 }
964 .ezd-btn-green-light {
965 --btn-bg: rgba(45, 178, 45, 0.1);
966 --btn-clr: #2DB22D;
967 --btn-bc: transparent;
968 }
969 .ezd-btn-green-light:hover {
970 --btn-clr: #2DB22D;
971 --btn-bg: rgba(45, 178, 45, 0.1);
972 --btn-bc: #2DB22D;
973 }
974 .ezd-btn-green-light:focus {
975 outline: 0;
976 box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.5);
977 }
978 .ezd-btn-blue-light {
979 --btn-bg: rgba(2, 117, 216, 0.1);
980 --btn-clr: #0275D8;
981 --btn-bc: transparent;
982 }
983 .ezd-btn-blue-light:hover {
984 --btn-clr: #0275D8;
985 --btn-bg: rgba(2, 117, 216, 0.1);
986 --btn-bc: #0275D8;
987 }
988 .ezd-btn-blue-light:focus {
989 outline: 0;
990 box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.5);
991 }
992 .ezd-btn-orange-light {
993 --btn-bg: rgba(204, 128, 51, 0.1);
994 --btn-clr: #CC8033;
995 --btn-bc: transparent;
996 }
997 .ezd-btn-orange-light:hover {
998 --btn-clr: #CC8033;
999 --btn-bg: rgba(204, 128, 51, 0.1);
1000 --btn-bc: #CC8033;
1001 }
1002 .ezd-btn-orange-light:focus {
1003 outline: 0;
1004 box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.5);
1005 }
1006 .ezd-btn-gray-light {
1007 --btn-bg: rgba(66, 66, 66, 0.1);
1008 --btn-clr: #424242;
1009 --btn-bc: transparent;
1010 }
1011 .ezd-btn-gray-light:hover {
1012 --btn-clr: #424242;
1013 --btn-bg: rgba(66, 66, 66, 0.1);
1014 --btn-bc: #424242;
1015 }
1016 .ezd-btn-gray-light:focus {
1017 outline: 0;
1018 box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.5);
1019 }
1020 .ezd-btn-blue {
1021 --btn-bg: var(--clr-blue);
1022 --btn-clr: var(--clr-white);
1023 --btn-bc: var(--clr-blue);
1024 }
1025 .ezd-btn-blue:hover {
1026 --btn-clr: var(--clr-blue);
1027 --btn-bg: transparent;
1028 --btn-bc: var(--clr-blue);
1029 }
1030 .ezd-btn-blue:focus {
1031 outline: 0;
1032 box-shadow: 0 0 0 0.4rem rgba(65, 65, 230, 0.5);
1033 }
1034 .ezd-btn-outline-blue {
1035 --btn-clr: #4141E6;
1036 --btn-bc: #4141E6;
1037 }
1038 .ezd-btn-outline-blue:hover {
1039 --btn-clr: var(--clr-white);
1040 --btn-bg: #4141E6;
1041 --btn-bc: #4141E6;
1042 }
1043 .ezd-btn-outline-blue:focus {
1044 outline: 0;
1045 box-shadow: 0 0 0 0.4rem rgba(65, 65, 230, 0.5);
1046 }
1047 .ezd-btn-white {
1048 --btn-bg: var(--clr-white);
1049 --btn-clr: var(--clr-white);
1050 --btn-bc: var(--clr-white);
1051 }
1052 .ezd-btn-white:hover {
1053 --btn-clr: var(--clr-white);
1054 --btn-bg: transparent;
1055 --btn-bc: var(--clr-white);
1056 }
1057 .ezd-btn-white:focus {
1058 outline: 0;
1059 box-shadow: 0 0 0 0.4rem rgba(255, 255, 255, 0.5);
1060 }
1061 .ezd-btn-outline-white {
1062 --btn-clr: var(--clr-white);
1063 --btn-bc: var(--clr-white);
1064 }
1065 .ezd-btn-outline-white:hover {
1066 --btn-clr: var(--clr-black);
1067 --btn-bg: var(--clr-white);
1068 --btn-bc: var(--clr-white);
1069 }
1070 .ezd-btn-outline-white:focus {
1071 outline: 0;
1072 box-shadow: 0 0 0 0.4rem rgba(var(--clr-white), 0.5);
1073 }
1074 .ezd-btn-gray {
1075 --btn-bg: rgba(37, 39, 51, 0.1);
1076 --btn-clr: var(--clr-dark);
1077 --btn-bc: transparent;
1078 }
1079 .ezd-btn-gray:hover {
1080 --btn-clr: var(--clr-white);
1081 --btn-bg: var(--clr-blue);
1082 --btn-bc: transparent;
1083 }
1084 .ezd-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: 130%;
1091 right: -20px;
1092 position: absolute;
1093 -webkit-box-shadow: 0 30px 40px 0 rgba(4, 73, 89, 0.1) 0 0 0 rgba(var(--clr-black), 1);
1094 -moz-box-shadow: 0 30px 40px 0 rgba(4, 73, 89, 0.1) 0 0 0 rgba(var(--clr-black), 1);
1095 box-shadow: 0 30px 40px 0 rgba(4, 73, 89, 0.1) 0 0 0 rgba(var(--clr-black), 1);
1096 background-color: var(--clr-white);
1097 border-radius: 0.5rem;
1098 z-index: 999;
1099 -webkit-transition: 0.3s ease-out;
1100 transition: 0.3s ease-out;
1101 display: none;
1102 }
1103 .easydocs-dropdown.is-active {
1104 opacity: 1;
1105 visibility: visible;
1106 top: 130%;
1107 }
1108
1109 .notification-dropdown {
1110 width: 340px;
1111 border-bottom: 1px solid rgba(0, 0, 0, 0.08);
1112 border-left: 1px solid rgba(0, 0, 0, 0.05);
1113 border-radius: 3px;
1114 box-shadow: 3px 2px 7px 1px rgba(0, 0, 0, 0.08);
1115 }
1116 .notification-dropdown::before {
1117 content: "";
1118 top: -0.625rem;
1119 right: 28px;
1120 position: absolute;
1121 width: 0;
1122 height: 0;
1123 border-style: solid;
1124 border-width: 0 10px 10px 10px;
1125 border-color: transparent transparent #f9f9f9 transparent;
1126 display: block;
1127 }
1128
1129 .notification-head {
1130 padding: 9px 12px;
1131 background: #f9f9f9;
1132 -webkit-box-shadow: 0 1px 0 0 #edeef2;
1133 -moz-box-shadow: 0 1px 0 0 #edeef2;
1134 box-shadow: 0 1px 0 0 #edeef2;
1135 }
1136 .notification-head.no-notification-text {
1137 padding: 20px 12px;
1138 background: rgba(190, 190, 190, 0.1490196078);
1139 display: block;
1140 text-align: center;
1141 }
1142 .notification-head .header-text {
1143 color: var(--clr-dark);
1144 font-size: var(--fs-13);
1145 font-weight: var(--fw-500);
1146 line-height: 1;
1147 }
1148 .notification-head .right-text {
1149 color: var(--clr-text);
1150 font-size: var(--fs-12);
1151 line-height: 1;
1152 }
1153
1154 .form-control {
1155 font-family: var(--ff-roboto);
1156 font-size: var(--fs-14);
1157 color: #9199a1;
1158 background: transparent;
1159 text-transform: capitalize;
1160 padding: 0.75rem 1.25rem;
1161 margin: 0 auto;
1162 width: 100%;
1163 height: auto;
1164 max-width: 37.5rem;
1165 border: 1px solid #EDEAE9;
1166 border-radius: 0.625rem;
1167 -webkit-transition: 0.3s ease-out;
1168 transition: 0.3s ease-out;
1169 }
1170 .form-control:focus {
1171 outline: none;
1172 }
1173 .form-control:focus {
1174 background: white;
1175 box-shadow: none !important;
1176 border: 1px solid #4c4cf1 !important;
1177 border-radius: 0.625rem;
1178 box-sizing: border-box !important;
1179 line-height: unset !important;
1180 }
1181 .form-control:focus ~ .search-icon {
1182 background: var(--clr-blue);
1183 --search-icon: var(--clr-white);
1184 }
1185 .form-control:focus ~ .search-icon .dashicons {
1186 color: #fff;
1187 }
1188
1189 .easydocs-search-form {
1190 position: relative;
1191 max-width: 37.5rem;
1192 flex: 1;
1193 margin-left: auto;
1194 margin-right: auto;
1195 }
1196 .easydocs-search-form .search-icon {
1197 position: absolute;
1198 -webkit-transition: 0.3s ease-out;
1199 transition: 0.3s ease-out;
1200 left: 20px;
1201 transform: translateY(50%);
1202 }
1203 .easydocs-search-form input#bbpc-search {
1204 color: #9199a1;
1205 padding: 10px 15px 10px 48px;
1206 border: 1px solid #EDEAE9;
1207 box-sizing: border-box;
1208 line-height: unset;
1209 box-shadow: 0 1px 1px rgba(11, 80, 115, 0.3), 0 1px 5px rgba(60, 64, 67, 0.1);
1210 background: rgba(255, 255, 255, 0.35);
1211 border-radius: 25px;
1212 }
1213 .easydocs-search-form input#bbpc-search:hover {
1214 box-shadow: 0 1px 2px 0 rgba(60, 64, 67, 0.3), 0 2px 6px 2px rgba(60, 64, 67, 0.15);
1215 }
1216 .easydocs-search-form input#bbpc-search:focus {
1217 background: #fff;
1218 color: #242729;
1219 outline: none;
1220 }
1221
1222 .easydocs-accordion-item progress {
1223 -webkit-appearance: none;
1224 appearance: none;
1225 height: 6px;
1226 border-radius: 32px;
1227 width: 100px;
1228 }
1229 .easydocs-accordion-item progress::-webkit-progress-bar {
1230 background-color: #e74c3c;
1231 }
1232 .easydocs-accordion-item progress::-webkit-progress-value {
1233 background-color: #27ae60;
1234 }
1235
1236 .badge {
1237 display: inline-block;
1238 padding: 0.35em 0.65em 0.3em;
1239 font-size: 0.75em;
1240 font-weight: 400;
1241 line-height: 1;
1242 color: #fff;
1243 text-align: center;
1244 white-space: nowrap;
1245 vertical-align: baseline;
1246 border-radius: 0.25rem;
1247 }
1248
1249 /*----------------------------------------*/
1250 /* 02. Header Area
1251 /*----------------------------------------*/
1252 .easydocs-header-area {
1253 padding-top: 40px;
1254 padding-bottom: 50px;
1255 }
1256 .easydocs-header-area .easydocs-row {
1257 margin-left: 0;
1258 margin-right: 0;
1259 }
1260
1261 .navbar-left {
1262 gap: var(--gutter-20);
1263 }
1264 .navbar-left .easydocs-btn {
1265 --btn-icon: var(--clr-blue);
1266 --btn-py: 0.5rem;
1267 --btn-px: 1rem;
1268 --btn-fs: var(--fs-12);
1269 font-weight: 500;
1270 gap: 6px;
1271 display: flex;
1272 border: 1px solid var(--clr-blue);
1273 align-items: center;
1274 text-decoration: none;
1275 padding: 5px 10px;
1276 border-radius: 6px;
1277 color: var(--clr-blue);
1278 }
1279 .navbar-left .easydocs-btn span.dashicons {
1280 font-size: 14px;
1281 margin-bottom: -4px;
1282 }
1283 .navbar-left .easydocs-btn:hover {
1284 --btn-icon: var(--clr-white);
1285 background: var(--clr-blue);
1286 }
1287 .navbar-left .easydocs-btn:focus {
1288 box-shadow: 0 0 0 0.4rem rgba(65, 65, 230, 0.5);
1289 }
1290
1291 .easydocs-logo-area a {
1292 text-decoration: none;
1293 color: var(--clr-dark);
1294 font-size: var(--fs-24);
1295 font-weight: var(--fw-700);
1296 }
1297
1298 :is(.easydocs-notification, .easydocs-settings) .header-notify-icon {
1299 width: 2.5rem;
1300 height: 2.5rem;
1301 line-height: 2.5rem;
1302 border-radius: 50%;
1303 background: rgba(37, 39, 51, 0.05);
1304 text-align: center;
1305 cursor: pointer;
1306 }
1307 :is(.easydocs-notification, .easydocs-settings) .header-notify-icon:hover {
1308 background: rgba(37, 39, 51, 0.09);
1309 }
1310 :is(.easydocs-notification, .easydocs-settings) .header-notify-icon svg {
1311 position: relative;
1312 top: 0.3rem;
1313 }
1314
1315 .easydocs-notification {
1316 margin-right: 1.6875rem;
1317 position: relative;
1318 }
1319 .easydocs-notification .easydocs-badge {
1320 top: -0.4375rem;
1321 right: -0.5rem;
1322 position: absolute;
1323 background: #FA3E3E;
1324 color: var(--clr-white);
1325 top: -0.4375rem;
1326 right: -0.2rem;
1327 position: absolute;
1328 padding: 0 4px;
1329 min-width: 18px;
1330 max-width: 18px;
1331 border-radius: 50%;
1332 text-align: center;
1333 font-size: 10px;
1334 font-weight: 700;
1335 line-height: 18px;
1336 height: 16px;
1337 display: inline-table;
1338 font-family: "Roboto";
1339 }
1340
1341 .easydocs-settings .header-notify-icons a {
1342 text-decoration: none;
1343 padding-top: 5px;
1344 display: inline-block;
1345 }
1346
1347 :is(.knobs, .layer) {
1348 inset: 0;
1349 position: absolute;
1350 }
1351
1352 .navbar-right .js-darkmode-btn .day svg {
1353 color: #fff;
1354 }
1355 .navbar-right .js-darkmode-btn .night svg {
1356 color: var(--clr-dark);
1357 }
1358
1359 .body_dark .navbar-right .js-darkmode-btn .day svg {
1360 --toggle-icon: #575766;
1361 }
1362 .body_dark .navbar-right .js-darkmode-btn .night svg {
1363 --toggle-icon: #fff;
1364 }
1365
1366 .navbar-right {
1367 display: flex;
1368 align-items: center;
1369 justify-content: flex-end;
1370 }
1371 .navbar-right > ul {
1372 align-items: center;
1373 gap: 8px;
1374 }
1375 .navbar-right .js-darkmode-btn {
1376 display: flex;
1377 align-items: center;
1378 justify-content: space-between;
1379 width: 5rem;
1380 height: 2.5rem;
1381 position: relative;
1382 background: rgba(37, 39, 51, 0.05);
1383 padding: 0 10px;
1384 color: #fff;
1385 border-radius: 24px;
1386 -webkit-transition: 0.3s ease-out;
1387 transition: 0.3s ease-out;
1388 }
1389 .navbar-right .js-darkmode-btn .day svg {
1390 --toggle-icon: #fff;
1391 -webkit-transition: 0.3s ease-out;
1392 transition: 0.3s ease-out;
1393 margin-top: 7px;
1394 }
1395 .navbar-right .js-darkmode-btn .night svg {
1396 --toggle-icon: #575766;
1397 -webkit-transition: 0.3s ease-out;
1398 transition: 0.3s ease-out;
1399 margin-top: 7px;
1400 }
1401 .navbar-right .js-darkmode-btn label {
1402 margin: 0;
1403 cursor: pointer;
1404 position: relative;
1405 z-index: 2;
1406 }
1407 .navbar-right .js-darkmode-btn .ball {
1408 height: 30px;
1409 width: 30px;
1410 position: absolute;
1411 background-color: var(--clr-blue);
1412 border-radius: 50%;
1413 left: 4px;
1414 top: 50%;
1415 transform: translateY(-50%);
1416 cursor: default;
1417 transition: all 0.3s linear 0s;
1418 z-index: 1;
1419 }
1420 .navbar-right .js-darkmode-btn svg {
1421 font-size: 16px;
1422 transition: all 0.3s linear 0s;
1423 }
1424 .navbar-right .js-darkmode-btn input {
1425 display: none;
1426 }
1427
1428 .settings-pro-icon {
1429 position: absolute;
1430 right: 0px;
1431 top: -5px;
1432 }
1433
1434 .swal2-styled.swal2-confirm.upgrade-premium-button > a {
1435 color: black;
1436 font-weight: normal;
1437 text-decoration: none;
1438 }
1439
1440 .swal2-footer.notification-pro-footer-wrap > a {
1441 text-decoration: none;
1442 }
1443
1444 .notification-body .filter-button-group {
1445 display: flex;
1446 gap: 8px;
1447 padding-left: var(--gutter-25);
1448 padding-right: var(--gutter-25);
1449 }
1450 .notification-body .filter-button-group svg {
1451 top: 0;
1452 }
1453 .notification-body .filter-button-group .easydocs-btn {
1454 --notification-icon: var(--clr-dark);
1455 --btn-px: 1rem;
1456 --btn-fs: var(--fs-14);
1457 --btn-py: 0.4rem;
1458 display: flex;
1459 align-items: center;
1460 gap: 1px;
1461 --btn-bg: #e4e6eb;
1462 --btn-clr: var(--clr-dark);
1463 --btn-bc: transparent;
1464 }
1465 .notification-body .filter-button-group .easydocs-btn.mixitup-control-active {
1466 background-color: #e7f3ff;
1467 color: #1877f2;
1468 --notification-icon: #1877f2;
1469 }
1470 .notification-body .filter-button-group .easydocs-btn.mixitup-control-active .dashicons-screenoptions:before {
1471 color: #1877f2;
1472 }
1473 .notification-body .filter-button-group .easydocs-btn.mixitup-control-active:hover {
1474 background-color: #d2e6f9;
1475 }
1476 .notification-body .filter-button-group .easydocs-btn:hover {
1477 --notification-icon: var(--clr-white);
1478 background: #cdcdcd;
1479 }
1480
1481 .notify-column {
1482 max-height: 25rem;
1483 overflow-y: auto;
1484 scrollbar-width: thin;
1485 /* Notification updated css */
1486 }
1487 .notify-column::-webkit-scrollbar-track {
1488 background-color: var(--clr-text-light);
1489 }
1490 .notify-column::-webkit-scrollbar {
1491 width: 8px;
1492 background-color: #F5F5F5;
1493 }
1494 .notify-column::-webkit-scrollbar-thumb {
1495 background-color: var(--clr-text);
1496 }
1497 .notify-column ul li {
1498 border-bottom: 1px solid #f1f2f3;
1499 margin-bottom: 0;
1500 }
1501 .notify-column ul li a {
1502 text-decoration: none;
1503 gap: 9px;
1504 align-content: space-around;
1505 padding: 10px;
1506 box-sizing: border-box;
1507 }
1508 .notify-column ul li a .notify-icon {
1509 padding-top: 5px;
1510 }
1511 .notify-column ul li a .notify-content-wrap {
1512 width: -webkit-fill-available;
1513 }
1514 .notify-column ul li a .notify-content-wrap .notify-content-header {
1515 color: hsl(210, 8%, 35%);
1516 font-size: 12px;
1517 }
1518 .notify-column ul li a .notify-content-wrap .notify-content-header .noti-type {
1519 color: var(--black_800);
1520 font-weight: 500;
1521 }
1522 .notify-column ul li a .notify-content-wrap .notify-content-summary p {
1523 color: hsl(206, 100%, 40%);
1524 font-size: 13px;
1525 }
1526 .notify-column ul li a:focus {
1527 box-shadow: none;
1528 }
1529 .notify-column ul li:hover {
1530 background: hsl(210, 8%, 90%);
1531 }
1532 .notify-column ul li:last-child {
1533 border-bottom: none;
1534 }
1535
1536 .notification-item {
1537 display: flex;
1538 align-items: flex-start;
1539 cursor: pointer;
1540 gap: var(--gutter-10);
1541 padding: var(--gutter-10) 15px;
1542 margin-left: var(--gutter-10);
1543 margin-right: var(--gutter-10);
1544 -webkit-transition: 0.3s ease-out;
1545 transition: 0.3s ease-out;
1546 border-radius: 0.3125rem;
1547 }
1548 .notification-item .notification-image {
1549 width: 2.5rem;
1550 height: 2.5rem;
1551 border-radius: 50%;
1552 position: relative;
1553 }
1554 .notification-item .notification-image .notify-badge {
1555 right: 0;
1556 bottom: 0;
1557 position: absolute;
1558 width: 1.125rem;
1559 height: 1.125rem;
1560 line-height: 1.125rem;
1561 border-radius: 50%;
1562 text-align: center;
1563 }
1564 .notification-item .notification-image .notify-badge .dashicons {
1565 top: 0;
1566 }
1567 .notification-item .notification-image .notify-badge-blue {
1568 background-color: #22AAF1;
1569 background-image: linear-gradient(180deg, #22AAF1 0%, #066BDA 100%);
1570 }
1571 .notification-item .notification-image .notify-badge-blue .dashicons {
1572 font-size: 12px;
1573 color: white;
1574 padding-top: 2.5px;
1575 }
1576 .notification-item .notification-image .notify-badge-green {
1577 background-color: #62D77E;
1578 background-image: linear-gradient(180deg, #62D77E 0%, #2BB64E 100%);
1579 }
1580 .notification-item .notification-image .notify-badge-green .dashicons {
1581 font-size: 12px;
1582 color: white;
1583 padding-top: 4px;
1584 }
1585 .notification-item:hover {
1586 background: rgba(76, 76, 241, 0.05);
1587 }
1588
1589 .notification-content .notify-name {
1590 font-size: var(--fs-14);
1591 font-weight: var(--fw-500);
1592 color: var(--clr-dark);
1593 padding-right: 0.5rem;
1594 margin: 0;
1595 line-height: 1;
1596 }
1597 .notification-content .notify-name a {
1598 text-decoration: none;
1599 }
1600 .notification-content .reply-text {
1601 font-size: 14px;
1602 color: var(--clr-text-light);
1603 line-height: 1;
1604 margin-top: 5px;
1605 }
1606
1607 .notify-short-description {
1608 font-size: var(--fs-14);
1609 color: var(--clr-text);
1610 line-height: 1;
1611 margin-top: 0.325rem;
1612 }
1613
1614 .notify-date {
1615 text-align: left;
1616 color: var(--clr-text-light);
1617 line-height: 1;
1618 margin-top: 0.375rem;
1619 }
1620
1621 .eazydocs-no-content {
1622 display: block;
1623 text-align: center;
1624 margin-top: 250px;
1625 }
1626 .eazydocs-no-content img {
1627 width: auto;
1628 max-width: 50px;
1629 height: auto;
1630 margin: 0px auto 10px;
1631 }
1632
1633 .bbpc-trash-filter {
1634 border-radius: 1.875rem;
1635 margin-bottom: 0;
1636 background-color: rgba(212, 23, 23, 0.1);
1637 transition: all 0.3s;
1638 }
1639 .bbpc-trash-filter:hover {
1640 background-color: rgba(212, 23, 23, 0.3);
1641 }
1642 .bbpc-trash-filter svg {
1643 fill: rgb(212, 23, 23);
1644 }
1645 .bbpc-trash-filter a {
1646 justify-content: center;
1647 gap: 0.3125rem;
1648 padding: 5px 15px;
1649 font-size: 14px;
1650 display: flex;
1651 align-items: center;
1652 color: rgb(212, 23, 23);
1653 text-decoration: none;
1654 }
1655
1656 .bbpc-settings-icon {
1657 background: rgba(0, 0, 255, 0.058);
1658 padding: 10px;
1659 border-radius: 50%;
1660 }
1661
1662 /*----------------------------------------*/
1663 /* Grid Layout
1664 /*----------------------------------------*/
1665 .container {
1666 width: 100%;
1667 padding-right: 15px;
1668 padding-left: 15px;
1669 margin-right: auto;
1670 margin-left: auto;
1671 }
1672 @media (min-width: 576px) {
1673 .container {
1674 max-width: 540px;
1675 }
1676 }
1677 @media (min-width: 768px) {
1678 .container {
1679 max-width: 720px;
1680 }
1681 }
1682 @media (min-width: 992px) {
1683 .container {
1684 max-width: 960px;
1685 }
1686 }
1687 @media (min-width: 1200px) {
1688 .container {
1689 max-width: 1170px;
1690 }
1691 }
1692 @media (min-width: 1441px) {
1693 .container {
1694 max-width: 1170px;
1695 }
1696 }
1697
1698 .container-fluid {
1699 width: 100%;
1700 padding-right: 15px;
1701 padding-left: 15px;
1702 margin-right: auto;
1703 margin-left: auto;
1704 }
1705
1706 .row {
1707 display: flex;
1708 flex-wrap: wrap;
1709 margin-right: -15px;
1710 margin-left: -15px;
1711 }
1712
1713 .no-gutters {
1714 margin-right: 0;
1715 margin-left: 0;
1716 }
1717 .no-gutters > .col,
1718 .no-gutters > [class*=col-] {
1719 padding-right: 0;
1720 padding-left: 0;
1721 }
1722
1723 html, body {
1724 height: auto !important;
1725 }
1726
1727 body.bbpc-forum-ui {
1728 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%);
1729 background-blend-mode: screen, screen, lighten, overlay, lighten, difference, normal;
1730 }
1731
1732 /*----------------------------------------*/
1733 /* 03. Sidebar Area
1734 /*----------------------------------------*/
1735 .tab-container {
1736 display: flex;
1737 }
1738
1739 .tab-menu {
1740 position: relative;
1741 background: #000000;
1742 background: -moz-linear-gradient(to right, #000000 0%, #0a1852 100%);
1743 background: -webkit-linear-gradient(to right, #000000 0%, #0a1852 100%);
1744 background: linear-gradient(to right, #000000 0%, #0a1852 100%);
1745 flex: 0 0 auto;
1746 width: 28%;
1747 }
1748 .tab-menu.short {
1749 height: 100vh;
1750 }
1751 @media (max-width: 1680px) {
1752 .tab-menu {
1753 width: 30%;
1754 }
1755 }
1756 .tab-menu .tab-menu-left-layer {
1757 position: absolute;
1758 top: 0;
1759 left: 0;
1760 width: 60px;
1761 height: 100%;
1762 -webkit-transition: 0.3s ease-out;
1763 transition: 0.3s ease-out;
1764 background: rgba(143, 143, 143, 0.3);
1765 }
1766
1767 .easydocs-tab {
1768 display: none;
1769 }
1770 .easydocs-tab.tab-active {
1771 display: block;
1772 }
1773
1774 .easydocs-navitem {
1775 display: flex;
1776 align-items: center;
1777 justify-content: space-between;
1778 padding: 12px 30px 12px 12px;
1779 margin-bottom: 5px;
1780 cursor: pointer;
1781 -webkit-transition: 0.3s ease-out;
1782 transition: 0.3s ease-out;
1783 position: relative;
1784 border-left: 5px solid transparent;
1785 }
1786 @media (max-width: 1680px) {
1787 .easydocs-navitem {
1788 padding: 13px 25px 13px 20px;
1789 }
1790 }
1791 .easydocs-navitem.is-active {
1792 border-left-color: #72aee6;
1793 background: rgba(159, 162, 180, 0.2);
1794 --title-opacity: 1;
1795 --total-page-opacity: 1;
1796 }
1797 .easydocs-navitem.is-active::before {
1798 content: "";
1799 right: 0;
1800 position: absolute;
1801 width: 0;
1802 height: 0;
1803 border-style: solid;
1804 border-width: 7px 10px 7px 0;
1805 border-color: transparent var(--clr-white) transparent transparent;
1806 display: block;
1807 }
1808 .easydocs-navitem.is-active .total-page {
1809 display: none;
1810 }
1811 .easydocs-navitem.is-active .link {
1812 display: flex;
1813 }
1814 .easydocs-navitem .title {
1815 display: flex;
1816 align-items: center;
1817 gap: 0.625rem;
1818 -webkit-transition: 0.3s ease-out;
1819 transition: 0.3s ease-out;
1820 text-decoration: none;
1821 font-size: var(--fs-16);
1822 font-weight: 500;
1823 color: var(--clr-white);
1824 opacity: var(--title-opacity, 0.7);
1825 }
1826 .easydocs-navitem .title img {
1827 border-radius: 7px;
1828 padding: 5px;
1829 height: auto;
1830 background: #fff;
1831 width: 30px;
1832 }
1833 .easydocs-navitem .title span.dashicons {
1834 width: 32px;
1835 }
1836 .easydocs-navitem .title span.easydocs-forums-title {
1837 padding-left: 20px;
1838 }
1839 .easydocs-navitem .total-page {
1840 font-size: var(--fs-12);
1841 color: var(--clr-white);
1842 opacity: var(--total-page-opacity, 0.5);
1843 -webkit-transition: 0.3s ease-out;
1844 transition: 0.3s ease-out;
1845 }
1846 .easydocs-navitem:hover {
1847 background: rgba(159, 162, 180, 0.2);
1848 --title-opacity: 1;
1849 --total-page-opacity: 1;
1850 }
1851 .easydocs-navitem:hover .total-page {
1852 display: none;
1853 }
1854 .easydocs-navitem:hover .link {
1855 display: flex;
1856 }
1857 .easydocs-navitem:hover .link a {
1858 padding-left: 2px;
1859 padding-right: 2px;
1860 }
1861
1862 .link {
1863 align-items: center;
1864 gap: 0.325rem;
1865 display: none;
1866 -webkit-transition: 0.3s ease-out;
1867 transition: 0.3s ease-out;
1868 }
1869 .link a {
1870 text-decoration: none;
1871 }
1872 .link a .dashicons {
1873 color: var(--black_200);
1874 font-size: 18px;
1875 padding-top: 2px;
1876 }
1877 .link a .dashicons:hover {
1878 color: #fff;
1879 }
1880 .link a.st-pro-notice .dashicons {
1881 color: #f1bd6c;
1882 }
1883 .link:hover svg {
1884 color: #fff;
1885 fill-color: #fff;
1886 }
1887
1888 .easydocs-tab-content {
1889 flex: 0 0 auto;
1890 width: 72%;
1891 padding: 0 40px 40px 40px;
1892 }
1893 @media (max-width: 1680px) {
1894 .easydocs-tab-content {
1895 width: 70%;
1896 }
1897 }
1898 @media (max-width: 1440px) {
1899 .easydocs-tab-content {
1900 width: 70%;
1901 padding: 20px;
1902 }
1903 }
1904 .easydocs-tab-content .button {
1905 padding: 6px 25px;
1906 }
1907
1908 .easydocs-filter-container {
1909 background: var(--clr-white);
1910 padding: var(--gutter-15) var(--gutter-30);
1911 border-radius: 0.375rem;
1912 display: flex;
1913 align-items: center;
1914 justify-content: space-between;
1915 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%);
1916 background-blend-mode: screen, color-dodge, color-dodge, normal;
1917 padding-left: 16px;
1918 }
1919 @media (max-width: 1440px) {
1920 .easydocs-filter-container {
1921 padding: 10px 20px;
1922 }
1923 }
1924
1925 .single-item-filter {
1926 display: flex;
1927 align-items: center;
1928 gap: 5px;
1929 }
1930 .single-item-filter.all-available li {
1931 padding: 5px 15px;
1932 }
1933 .single-item-filter .easydocs-btn {
1934 display: flex;
1935 align-items: center;
1936 justify-content: center;
1937 font-size: 12px;
1938 gap: 0.3125rem;
1939 --btn-fs: var(--fs-14);
1940 transition: all 0.3s;
1941 border-radius: 15px;
1942 padding: 5px 25px;
1943 }
1944 .single-item-filter .easydocs-btn:hover {
1945 background-color: rgba(0, 0, 0, 0.1);
1946 }
1947 .single-item-filter .easydocs-btn.is-active {
1948 background-color: rgba(0, 0, 0, 0.8);
1949 color: #f1f1f1;
1950 }
1951 .single-item-filter .easydocs-btn.easydocs-btn-black-light {
1952 --btn-icon: #0D0E2B;
1953 }
1954 .single-item-filter .easydocs-btn.easydocs-btn-black-light svg {
1955 fill: #0D0E2B;
1956 }
1957 .single-item-filter .easydocs-btn.easydocs-btn-black-light.mixitup-control-active {
1958 --btn-bg: #0D0E2B;
1959 --btn-clr: var(--clr-white);
1960 --btn-icon: var(--clr-white);
1961 }
1962 .single-item-filter .easydocs-btn.easydocs-btn-black-light.mixitup-control-active svg {
1963 fill: #ffffff;
1964 }
1965 .single-item-filter .easydocs-btn.easydocs-btn-green-light {
1966 --btn-icon: #2DB22D;
1967 }
1968 .single-item-filter .easydocs-btn.easydocs-btn-green-light svg {
1969 fill: #2DB22D;
1970 }
1971 .single-item-filter .easydocs-btn.easydocs-btn-green-light.mixitup-control-active {
1972 --btn-bg: #2DB22D;
1973 --btn-clr: var(--clr-white);
1974 --btn-icon: var(--clr-white);
1975 }
1976 .single-item-filter .easydocs-btn.easydocs-btn-green-light.mixitup-control-active svg {
1977 fill: #ffffff;
1978 }
1979 .single-item-filter .easydocs-btn.easydocs-btn-blue-light {
1980 --btn-icon: #0275D8;
1981 }
1982 .single-item-filter .easydocs-btn.easydocs-btn-blue-light svg {
1983 fill: #0275D8;
1984 }
1985 .single-item-filter .easydocs-btn.easydocs-btn-blue-light.mixitup-control-active {
1986 --btn-bg: #0275D8;
1987 --btn-clr: var(--clr-white);
1988 --btn-icon: var(--clr-white);
1989 }
1990 .single-item-filter .easydocs-btn.easydocs-btn-blue-light.mixitup-control-active svg {
1991 fill: #fff;
1992 }
1993 .single-item-filter .easydocs-btn.easydocs-btn-orange-light {
1994 --btn-icon: #CC8033;
1995 }
1996 .single-item-filter .easydocs-btn.easydocs-btn-orange-light svg {
1997 fill: #CC8033;
1998 }
1999 .single-item-filter .easydocs-btn.easydocs-btn-orange-light.mixitup-control-active {
2000 --btn-bg: #CC8033;
2001 --btn-clr: var(--clr-white);
2002 --btn-icon: var(--clr-white);
2003 }
2004 .single-item-filter .easydocs-btn.easydocs-btn-orange-light.mixitup-control-active svg {
2005 fill: #fff;
2006 }
2007 .single-item-filter .easydocs-btn.easydocs-btn-gray-light {
2008 --btn-icon: #424242;
2009 }
2010 .single-item-filter .easydocs-btn.easydocs-btn-gray-light.mixitup-control-active {
2011 --btn-bg: #424242;
2012 --btn-clr: var(--clr-white);
2013 --btn-icon: var(--clr-white);
2014 }
2015
2016 .single-grid-container {
2017 display: flex;
2018 align-items: center;
2019 border: 1px solid #EDEAE9;
2020 border-radius: 0.375rem;
2021 --grid-icon: #9199A1;
2022 }
2023 .single-grid-container a {
2024 text-decoration: none;
2025 padding: 0.3rem 0.5rem 0.5rem;
2026 height: 1.875rem;
2027 }
2028 .single-grid-container a:first-child {
2029 border-right: 1px solid #EDEAE9;
2030 }
2031 .single-grid-container .is-active {
2032 background: rgba(37, 39, 51, 0.05);
2033 --grid-icon: var(--clr-blue);
2034 }
2035
2036 @media screen and (min-width: 1200px) {
2037 .container {
2038 max-width: 1170px;
2039 }
2040 }
2041 #wpcontent {
2042 height: 100vh;
2043 }
2044
2045 /*# sourceMappingURL=admin-ui-style.css.map */
2046