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

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