PluginProbe
Taskbuilder – Project Management & Task Management Tool With Kanban Board / 6.0.6
Taskbuilder – Project Management & Task Management Tool With Kanban Board v6.0.6
6.0.6 6.0.5 6.0.2 6.0.3 6.0.4 6.0.1 6.0.0 5.0.8 5.0.9 4.0.9 5.0.0 5.0.1 5.0.2 5.0.3 5.0.4 5.0.5 5.0.6 5.0.7 trunk 1.0.0 1.0.1 1.0.2 1.0.3 1.0.4 1.0.5 All 58 releases
taskbuilder / asset / css / admin.css

admin.css in Taskbuilder – Project Management & Task Management Tool With Kanban Board 6.0.6, at asset/css/admin.css

2,775 lines 56.7 KB
No matching file
Up and down to move Enter to open Esc to close
Raw Download Zip
1 .wppm-heading-inline{
2 display:inline-block;
3 margin-right:5px;
4 margin-bottom: 0;
5 padding: 9px 0 4px 0;
6 line-height: 1.3;
7 font: 22px "OpenSans-Light",Helvetica,Arial,sans-serif;
8 }
9 .wppm_table_header{
10 font-weight: normal;
11 font-size: 14px;
12 font-family: Helvetica Neue,Helvetica,Arial,sans-serif;
13 }
14 .wppm_admin_logo{
15 margin-right:5px !important;
16 }
17 .mce-window.mce-in, .mce-menu.mce-in.mce-animate{
18 z-index: 900000000001 !important;;
19 }
20 .wppm-add-new-btn{
21 padding: 4px 8px;
22 position: relative;
23 top: -3px;
24 text-decoration: none;
25 border: 1px solid #0071a1;
26 border-radius: 2px;
27 text-shadow: none;
28 font-weight: 600;
29 font-size: 13px;
30 line-height: normal;
31 color: #0071a1;
32 background: #f3f5f6;
33 cursor: pointer;
34 display: inline-block;
35 }
36 .wppm_loading_icon img{
37 margin-left: auto;
38 margin-right: auto;
39 margin-top: auto;
40 display: block;
41 margin-bottom: auto;
42 }
43 #wppm_project_container .wppm_loading_icon, #wppm_task_container .wppm_loading_icon{
44 margin-top: 118px;
45 }
46 .wppm_bootstrap .dataTables_wrapper .dataTables_length select{
47 padding: 0 24px 0 8px !important;
48 }
49 #wppm_add_new_project_frm{
50 position: relative;
51 min-width: 100px;
52 border: 1px solid #ccd0d4;
53 box-shadow: 0 1px 1px rgba(0,0,0,.04);
54 background: #fff;
55 }
56 input[type=text]{
57 box-shadow: 0 0 0 transparent;
58 border-radius: 4px;
59 border: 1px solid #7e8993;
60 background-color: #fff;
61 color: #32373c;
62 }
63 .wppm-button {
64 display: inline-block;
65 text-decoration: none;
66 font-size: 13px;
67 line-height: 26px;
68 height: 28px;
69 margin: 0;
70 padding: 0 10px 1px;
71 cursor: pointer;
72 border-radius: 3px;
73 white-space: nowrap;
74 box-sizing: border-box;
75 border: none;
76 }
77 .wppm-primary {
78 background: #1A9ED4;
79 color: #fff;
80 }
81 .wppm-primary:hover {
82 color: #fff;
83 }
84 .wppm_table{
85 background: #fff;
86 box-shadow: 0 1px 1px rgba(0,0,0,.04);
87 border-spacing: 0;
88 width: 100%;
89 clear: both;
90 margin-top: 10px;
91 display: table;
92 border-collapse: separate;
93 color: #444;
94 font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;
95 font-size: 13px;
96 line-height: 1.4em;
97 max-width:100%;
98 }
99 .wppm_table th{
100 border-bottom: 1px solid #555c64;
101 line-height: 2.2em;
102 font-weight: 400;
103 text-align: left;
104 font-size: 14px;
105 display: table-cell;
106 vertical-align: inherit;
107 background-color:#304FFE;
108 color: #FFFFFF;
109 width:2.2em;
110 padding:0 0 0 3px;
111 }
112 .wppm_table td{
113 vertical-align: middle;
114 padding: 5px 0 5px 2px;
115 width: 2.2em;
116 color: #32373c;
117 font-weight: 400;
118 text-align: left;
119 line-height: 1.3em;
120 font-size: 14px;
121 display: table-cell;
122 white-space: normal;
123 }
124 .wppm_table tbody{
125 word-wrap: break-word;
126 display: table-row-group;
127 vertical-align: middle;
128 border-color: inherit;
129 background-color: #ffffff;
130 color: #444;
131 font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;
132 font-size: 13px;
133 line-height: 1.4em;
134 white-space: normal;
135 }
136 .wppm_table tr:hover{
137 background-color:#f5f5f5;
138 cursor: pointer;
139 }
140 .wppm_table tr{
141 display: table-row;
142 vertical-align: middle;
143 }
144 #wppm_project_table tr:nth-child(even){
145 background-color: #f2f2f2;
146 }
147 #wppm_project_table td{
148 font-weight: 400;
149 font-family: "Nunito", "Segoe UI", arial;
150 border: none !important;
151 white-space: normal;
152 }
153 #wppm_project_table th{
154 border: none !important;
155 }
156 .wppm_thread,.wppm_proj_thread{
157 background-color: #FFFFFF;
158 color: #000000;
159 border-color: #C3C3C3;
160 display: table;
161 padding: 10px;
162 background-color: #FFFFFF;
163 border-radius: 5px;
164 margin-bottom: 20px;
165 margin-top: 10px;
166 }
167 .wppm_thread_avatar{
168 display: table-cell;
169 vertical-align: top;
170 width: 40px;
171 padding: 5px 5px 5px 10px;
172 }
173 .wppm_thread_body{
174 display: table-cell;
175 vertical-align: top;
176 padding: 0 15px 5px 15px;
177 width: 100%;
178 }
179 .wppm_thread_user_name{
180 margin-bottom: 10px;
181 font: 15px "Helvetica Neue",Helvetica,Arial,sans-serif;
182 }
183 #wppm_load_individual_project{
184 border-radius: 4px;
185 color: #2C3E50;
186 min-height: 300px;
187 width: 99%;
188 margin-top: 25px;
189 padding-left: 15px;
190 }
191 .wppm_sidebar_labels{
192 font-size: 12px;
193 margin: 10px 0;
194 cursor: pointer;
195 overflow: hidden;
196 color: #9c9c9c;
197 }
198 .wppm_label_info{
199 margin-right: 5px;
200 font-size: 12;
201 font-weight: 400;
202 }
203 .wppm_sidebar .wppm_body{
204 padding-top: 20px;
205 }
206 .wppm_body {
207 padding-left: 0px;
208 }
209 .wppm_sidebar .row{
210 background-color: #fff;
211 padding: 0 15px;
212 border-radius: 4px;
213 margin-bottom: 15px;
214 }
215 #wppm_project_status_widget{
216 margin-top: 10px;
217 border: 1px solid #eee !important;
218 }
219 .wppm_widget{
220 display: flex;
221 flex-direction: column;
222 width: 100%;
223 min-width: 100%;
224 max-width: 100%;
225 box-sizing: border-box;
226 margin-bottom: 15px;
227 border: 1px solid #eee !important;
228 }
229 .wppm-widget-header {
230 display: flex;
231 align-items: center;
232 padding: 10px;
233 }
234 .wppm-widget-header span {
235 display: flex;
236 align-items: center;
237 margin-left: 5px;
238 cursor: pointer;
239 }
240 .wppm-widget-header h4 {
241 flex-grow: 1;
242 margin: 0px !important;
243 }
244 .wppm-widget-body {
245 display: flex;
246 flex-direction: column;
247 padding: 10px 10px 0;
248 }
249 .wppm-btn{
250 padding: 5px 10px;
251 border-radius: 20px;
252 font-size: 14px;
253 margin-left:20px;
254 background-color: #5067c5;
255 color:#ffffff!important;
256 border: 1px solid #8a8a8a !important;
257 }
258 .wppm-btn-cancel{
259 padding: 5px 10px;
260 border-radius: 14px;
261 font-size: 14px;
262 margin-left:20px;
263 background: linear-gradient(135deg, #ffffff, #ffffff);
264 color:#000000;
265 border: 1px solid #C3C3C3;
266 }
267 .wppm_admin_label{
268 border-radius: 30px;
269 font-weight: bold;
270 padding: 5px 10px;
271 font-size: 10px;
272 }
273 .wppm_section_title{
274 display:inline-block;
275 margin-right:20px;
276 font-size: 23px;
277 font-weight: 400;
278 margin-bottom: 0;
279 padding: 9px 0 4px 0;
280 line-height: 1.3;
281 }
282 #wppm_task_table{
283 width:100%;
284 background-color: #FFFFFF;
285 cursor: pointer;
286 }
287 #wppm_task_table tr:nth-child(even){
288 background-color: #f2f2f2;
289 }
290 #wppm_task_table td{
291 /* border: 1px solid #f2f2f2; */
292 font-weight: 400;
293 font-family: "Nunito", "Segoe UI", arial;
294 border: none !important;
295 white-space: normal;
296 }
297 #wppm_task_table th{
298 border: none !important;
299 }
300 #wppm_task_table_container{
301 padding: 0 15px 15px 15px;
302 }
303 .wppm_status{
304 background-color: aqua;
305 border-radius: 30px;
306 padding: 3px 5px 3px 5px;
307 color: #FFFFFF;
308 font-weight: 600;
309 letter-spacing: .3px;
310 font-size: 10px;
311 display: inline-block;
312 text-align: center;
313 line-height: 1;
314 }
315 .wppm_category{
316 background-color: red;
317 border-radius: 30px;
318 padding: 3px 5px 3px 5px;
319 color: #FFFFFF;
320 font-weight: 600;
321 letter-spacing: .3px;
322 font-size: 10px;
323 display: inline-block;
324 text-align: center;
325 line-height: 1;
326
327 }
328 .wppm_bootstrap .avatar{
329 border-radius: 50%;
330 border: 2px solid #FFF;
331 margin-left: -12px;
332 border: 2px solid #FFF;
333 }
334 .wppm_action_btn{
335 background-color: #FFF;
336 color: #383333 !important;
337 margin-bottom: 3px !important;
338 }
339 /***
340 * Filter display css start
341 */
342 .wppm_filter_display_container{
343 list-style-type: none !important;
344 width: 100% !important;
345 margin: 0 !important;
346 float: left;
347 }
348 .wppm_filter_display_element{
349 max-width: 300px !important;
350 float: left;
351 margin: 3px 3px 3px 0 !important;
352 }
353 .wppm_filter_display_element .flex-container{
354 display: flex;
355 border-radius: 4px;
356 background-color:#1E90FF;
357 color:#fff;
358 font-size: 10px;
359 }
360 .wppm_filter_display_text{
361 max-width: 280px !important;
362 padding: 5px;
363 }
364 .wppm_filter_display_remove{
365 width: 20px !important;
366 padding: 6px;
367 cursor: pointer;
368 }
369 .wppm_padding_space{
370 padding-top: 20px;
371 }
372 .wppm_setting_col2{
373 background-color: #fff;
374 width: 62% !important;
375 padding: 20px;
376 border-radius: 20px;
377 }
378 .wppm_padding_space{
379 padding-top: 20px;
380 }
381 .wppm-sortable-handle,.wppm-sortable-edit,.wppm-sortable-delete,.wppm-sortable-clone{
382 cursor: pointer;
383 width: 25px;
384 }
385 .wppm-sortable-label{
386 width: 220px;
387 }
388 .wppm-flex-container {
389 display: flex;
390 border-radius: 5px;
391 max-width: 320px;
392 height: 35px;
393 }
394 .wppm-title{
395 font:18px "OpenSans-Light",Helvetica,Arial,sans-serif;
396 }
397 .wppm-flex-container > div {
398 margin: 5px 0 5px 5px;
399 padding: 3px;
400 font-size: 12px;
401 }
402 .wppm_alert{
403 position: fixed;
404 top: 50px;
405 right: 50px;
406 font-size: 15px;
407 font-weight: bold;
408 z-index: 10000000000000;
409 }
410 #wppm_add_new_project{
411 margin:20px;
412 background-color: #FFFFFF;
413 font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
414 }
415 .wppm_form_field_label{
416 font-size: 13px;
417 font-style:bold ;
418 }
419 .wppm_task_description,.wppm_project_description{
420 font: 13px "Helvetica Neue",Helvetica,Arial,sans-serif;
421 }
422 .wppm_email_notification_header{
423 padding-left: 15px;
424 }
425 #wppm_project_container{
426 border-radius: 4px;
427 border: 1px solid #E5E4E4;
428 background-color: #fff;
429 color: #2C3E50;
430 min-height: 300px;
431 width: 99%;
432 }
433 #wppm_frm_field_container{
434 padding: 0 20px;
435 padding-top: 15px;
436 width:100%;
437 }
438 .wppm_frm_submit{
439 padding: 0 30px;
440 margin: 30px 0;
441 }
442 .wppm_td_project_status{
443 border-radius: 30px;
444 padding: 3px 5px 3px 5px;
445 font-weight: 600;
446 letter-spacing: .3px;
447 font-size: 10px;
448 display: inline-block;
449 text-align: center;
450 line-height: 1;
451 }
452 #wppm_apply_filter{
453 background-color:#306EFF;
454 margin-bottom:2px;
455 }
456
457 .wppm_label{
458 font-size: 12px;
459 font-weight: 600;
460 color: #9c9c9c;
461 width: 100%;
462 }
463 #wppm_avatar{
464 background-color:black;
465 padding: 3px;
466 color: #fff;
467 display: inline!important;
468 }
469 #wppm_project_search_filter{
470 padding: 0 30px;
471 border-radius: 20px;
472 font: 12px "Helvetica Neue",Arial,Helvetica,sans-serif;
473 }
474 #wppm_project_search_filter_img, .wppm_task_search_filter_img{
475 position: relative !important;
476 top: 10px;
477 left: 30px;
478 }
479 .wppm_add_new_task_img, .wppm_task_list_image{
480 padding-right: 5px;
481 padding-bottom: 3px;
482 }
483 .wppm_table_td{
484 font-size: 14px !important;
485 }
486 #wppm_project_and_task_search{
487 width:40%;
488 margin-top: 15px;
489 }
490 #wppm_project_and_task_search svg{
491 width: 16px;
492 height: 16px;
493 margin-left: 10px;
494 float: left;
495 margin-top: -26px;
496 cursor: pointer;
497 }
498 .wppm_project_frm_fields ul, #frm_get_task_users ul, #frm_get_task_creator ul, #frm_get_project_users ul, #frm_get_project_creator ul{
499 border: 1px solid #ddd;
500 list-style-type: none!important;
501 font: 13px "Helvetica Neue",Helvetica,Arial,sans-serif;
502 }
503 #wppm_task_search{
504 flex-shrink: 0;
505 white-space: nowrap;
506 width:40%;
507 margin-top: 15px;
508 display: flex;
509 /* align-items: center;
510 gap: 8px;
511 align-items: center; */
512 flex-wrap: nowrap;
513 }
514 #wppm_task_search svg{
515 width: 16px;
516 height: 16px;
517 margin-left: 10px;
518 float: left;
519 margin-top: -26px;
520 cursor: pointer;
521 }
522 #wppm_task_search_filter{
523 padding: 0 30px;
524 border-radius: 20px;
525 width: auto;
526 flex: 1;
527 min-width: 150px;
528 min-height: 30px!important;
529 }
530 #wppm_more_filter_option div{
531 display: inline-block;
532 }
533 #wppm_heading_inline svg{
534 width: 28px;
535 height:23px;
536 }
537 .wppm_card_header{
538 border-bottom: 1px solid #EFF2F7;
539 height: 35px;
540 padding-top: 5px;
541 padding-bottom: 5px;
542 }
543 .wppm_task_list{
544 border:1px solid #EFF2F7;
545 display:flex;
546 flex-direction:column;
547 flex-basis: 30%;
548 /* flex: 1 0 auto; */
549 overflow: hidden;
550 flex-grow: 1;
551 flex-shrink: 0;
552 margin:5px;
553 }
554 @media screen and (max-width: 767px) {
555 .wppm_task_list{
556 flex-basis: 50%;
557 }
558 }
559 .wppm_task_name_grid_view, .wppm_task_due_date_grid_view, .wppm_empty_container, .wppm_proj_name_grid_view{
560 font-family: "OpenSans-Semibold","Helvetica Neue",Arial,Helvetica,sans-serif;
561 font-size: 14px;
562 }
563 .wppm_card_body{
564 text-align: center;
565 border:1px solid #EFF2F7;
566 margin: 10px;
567 text-align:left;
568 padding: 10px 5px 10px 0px;
569 border-radius: 5px;
570 }
571 .wppm_task_container{
572 overflow:scroll;
573 display: flex;
574 flex-direction: row;
575 margin-top:40px;
576 overflow-x: auto;
577 overflow-y: auto;
578 min-height: 750px;
579 }
580 #wppm_task_frm_field_container{
581 padding-top: 20px;
582 width:100%;
583 }
584 #wppm_add_new_task{
585 margin:20px;
586 background-color: #FFFFFF;
587 font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
588 }
589 #wppm_task_container{
590 border-radius: 4px;
591 border: 1px solid #E5E4E4;
592 background-color: #fff;
593 color: #2C3E50;
594 min-height: 300px;
595 width: 99%;
596 }
597 .wppm-submit-btn{
598 color: #FFF !important;
599 background-color: #306EFF;
600 border-color: #306EFF;
601 box-shadow: inset 0 1px 0 rgb(255 255 255 / 15%);
602 cursor: pointer;
603 border-radius: 50px !important;
604 padding: 5px;
605 }
606 .wppm_btn{
607 border-radius: 15px!important;
608 }
609 .wppm_reset_btn{
610 color: #273444;
611 background-color: #EFF2F7;
612 border-color: #EFF2F7;
613 border-radius: 50px;
614 padding: 5px;
615 }
616 .select2-selection--single{
617 height:35px!important;
618 }
619 .select2-container{
620 width:500px!important;
621 }
622 .wppm_td_task_status{
623 border-radius: 30px;
624 padding: 3px 5px 3px 5px;
625 font-weight: 600;
626 letter-spacing: .3px;
627 font-size: 10px;
628 display: inline-block;
629 text-align: center;
630 line-height: 1;
631 }
632 .wppm_td_task_priority{
633 border-radius: 30px;
634 padding: 3px 5px 3px 5px;
635 font-weight: 600;
636 letter-spacing: .3px;
637 font-size: 10px;
638 display: inline-block;
639 text-align: center;
640 line-height: 1;
641 }
642 .wppm_empty_container{
643 display: flex;
644 justify-content: center;
645 align-items: center;
646 font-size: 10;
647 font-weight: 500;
648 color: #becdd9;
649 border: 1px dashed #becdd9;
650 height: 0;
651 opacity: 0;
652 border-radius: 15px;
653 opacity: 1;
654 height: 60px;
655 margin-top: 10px;
656 }
657 .wppm_card_task_action{
658 text-align:right;
659 }
660 .wppm_card_task_progress{
661 color:#8492A6;
662 text-align: right;
663 }
664 .wppm_status_name{
665 text-align:left;
666 font-family: "OpenSans-Regular","Helvetica Neue",Arial,Helvetica,sans-serif;
667 font-size: 15px;
668 padding-top: 5px;
669 }
670 .wppm_task_frm_fields ul{
671 border: 1px solid #ddd;
672 list-style-type: none;
673 }
674 .wppm_task_frm_fields li{
675 padding: 5px;
676 }
677 #wppm_view_task_search_filter{
678 padding: 0 30px;
679 border-radius: 20px;
680 }
681 .wppm_task_details, .wppm_project_details{
682 border-bottom: 1px dashed;
683 cursor: pointer;
684 display: inline-block;
685 font: 13px "Helvetica Neue",Helvetica,Arial,sans-serif;
686 }
687 .wppm_task_details_priority{
688 cursor: pointer;
689 }
690 .wppm_task_details_label, #wppm_add_checklist, .wppm_project_details_label{
691 font: 13px "Helvetica Neue",Helvetica,Arial,sans-serif;
692 color: #858c96;
693 width: 98px;
694 float: left;
695 word-wrap: break-word;
696 margin: 5px;
697 cursor: pointer;
698 }
699 .wppm_task_details_container{
700 background-color: #FFFFFF;
701 margin: 15px;
702 padding-bottom: 10px;
703 border: 1px solid #eee !important;
704 }
705 .wppm_task_checklist_container, .wppm_thread{
706 background-color: #FFFFFF;
707 margin: 15px;
708 border: 1px solid #eee !important;
709 }
710 .wppm_task_subtask_container{
711 background-color: #FFFFFF;
712 margin: 15px;
713 border: 1px solid #eee !important;
714 }
715 .wppm_subtask_parent_link{
716 font: 13px "Helvetica Neue",Helvetica,Arial,sans-serif;
717 color: #7a7a7a;
718 margin-top: 4px;
719 }
720 .wppm_subtask_parent_link a{
721 color: #306EFF;
722 text-decoration: none;
723 }
724 .wppm_subtask_badge{
725 display: inline-block;
726 font: 11px "Helvetica Neue",Helvetica,Arial,sans-serif;
727 color: #5a5a5a;
728 background-color: #eef1f5;
729 border-radius: 10px;
730 padding: 1px 8px;
731 margin-left: 6px;
732 vertical-align: middle;
733 }
734 .wppm_proj_thread{
735 background-color: #FFFFFF;
736 border: 1px solid #eee !important;
737 }
738
739 .wppm_progress_bar_container{
740 margin-bottom: 6px;
741 margin-top: 5px;
742 position: relative;
743 }
744 .wppm_progress_bar{
745 background: rgba(9,30,66,.08);
746 border-radius: 4px;
747 clear: both;
748 height: 8px;
749 margin: 0 0 0 40px;
750 overflow: hidden;
751 position: relative;
752 }
753 .wppm_progressbar_label {
754 color: #5e6c84;
755 font-size: 11px;
756 line-height: 10px;
757 position: absolute;
758 top: -1px;
759 left:0;
760 text-align: center;
761 width: 32px;
762 margin-left:10px;
763 }
764 .wppm_checkprogress{
765 bottom: 0;
766 left: 0;
767 position: absolute;
768 overflow:hidden;
769 top: 0;
770 transition-duration: .14s;
771 transition-timing-function: ease-in;
772 margin:10px,0px,10px,0px !important;
773 }
774 .wppm_checklist_divider{
775 margin: 0 15px 0 15px;
776 }
777 .wppm_add_checklist_item_btn{
778 margin-top:10px !important;
779 }
780 #wppm_checklist_btn{
781 margin:10px;
782 }
783 #wppm_add_checklist{
784 border-bottom: 1px dashed;
785 }
786 .wppm_total_checked_item{
787 margin-left: 5px !important;
788 margin-bottom: 10px !important;
789 }
790 .wppm_checklist_total_checked_item{
791 color:#8492A6;
792 font-size: 10px !important;
793 }
794 .wppm_checklist input[type="checkbox"]{
795 margin:5px;
796 }
797 .wppm_card_body{
798 cursor:pointer;
799 }
800 #wppm_grid_view_btn{
801 border: 1px solid #ccc;
802 padding: 5px;
803 background-color: #FFFFFF;
804 float: right;
805 border-radius: 4px;
806 cursor: pointer;
807 font: 13px "Helvetica Neue",Helvetica,Arial,sans-serif;
808 color: #858c96;
809 margin-bottom: 5px;
810 margin-top: 5px;
811 }
812 #tb-advanced-toggle{
813 border: 1px solid #ccc;
814 padding: 6px;
815 background-color: #FFFFFF;
816 /* float: right; */
817 border-radius: 4px;
818 cursor: pointer;
819 /* margin-top:10px; */
820 font: 13px "Helvetica Neue",Helvetica,Arial,sans-serif;
821 color: #858c96;
822 }
823 #wppm_list_view_btn{
824 border: 1px solid #ccc;
825 padding: 5px;
826 background-color: #FFFFFF;
827 float: right;
828 border-radius: 4px;
829 cursor: pointer;
830 font: 13px "Helvetica Neue",Helvetica,Arial,sans-serif;
831 color: #858c96;
832 }
833 #wppm_select_user_role{
834 margin: 10px 10px 10px 0px;
835 }
836 .wppm_delete_user_icon, .wppm_user_roles{
837 margin-top: 7px;
838 cursor: pointer;
839 }
840 #wppm_project_users,#wppm_task_users {
841 margin-bottom: 10px;
842 }
843 .wppm_project_user_avatar,.wppm_task_user_avatar{
844 padding: 10px;
845 overflow:hidden;
846 }
847 .wppm_project_user_names, .wppm_task_user_names,.wppm_project_user_role{
848 padding: 0 0 10px 5px;
849 overflow:hidden;
850 color:#9c9c9c;
851 font: 13px "Helvetica Neue",Helvetica,Arial,sans-serif;
852 }
853 .wppm_project_users_not_assign_label{
854 color:#9c9c9c;
855 }
856 .wppm_user_display_container, .wppm_task_user_display_container{
857 padding: 5px;
858 }
859 #wppm_user_name, #wppm_task_user_name{
860 margin-bottom: 10px;
861 }
862 #wppm_task_users,#wppm_project_creator{
863 margin-left: 10px;
864 }
865 #wppm_comment_btn{
866 display:none;
867 padding: 10px;
868 }
869 #wppm_proj_comment_btn{
870 display:none;
871 padding: 10px;
872 }
873 #wppm_activity_container{
874 background-color:#ffffff;
875 margin:15px;
876 border: 1px solid #eee !important;
877 }
878 .wppm_task_discussion{
879 font: 18px "Helvetica Neue",Helvetica,Arial,sans-serif;
880 }
881 .wppm_proj_discussion{
882 font: 18px "Helvetica Neue",Helvetica,Arial,sans-serif;
883 }
884 .wppm_delete_checklist{
885 color:#b73232 !important;
886 font: 13px/20px "Helvetica Neue",Helvetica,Arial,sans-serif;
887 border-bottom: 1px dashed;
888 position: relative;
889 margin-left: 12px;
890 cursor: pointer;
891 transition: 170ms linear all;
892 }
893 .wppm_delete_checklist:hover{
894 color:#2067b0 !important;
895 border-bottom: 1px dashed !important;
896 text-decoration:none !important;
897 }
898 .wppm_add_checklist{
899 color: #80868e !important;
900 font: 13px/20px "Helvetica Neue",Helvetica,Arial,sans-serif;
901 border-bottom: 1px dashed !important;
902 position: relative;
903 margin-left: 12px;
904 cursor: pointer;
905 transition: 170ms linear all;
906 }
907 .wppm_add_checklist:hover{
908 border-bottom: 1px dashed !important;
909 text-decoration:none !important;
910 }
911 #wppm_task_comment{
912 width: 80%;
913 height: 30px;
914 padding: 5px;
915 margin-bottom: 15px;
916 overflow: hidden;
917 border: 1px solid #eee;
918 color:#eee;
919 margin-top: 10px;
920 font: 13px "Helvetica Neue",Helvetica,Arial,sans-serif;
921 }
922 #wppm_proj_comment{
923 width: 80%;
924 height: 30px;
925 padding: 5px;
926 margin-bottom: 15px;
927 overflow: hidden;
928 border: 1px solid #eee;
929 color:#eee;
930 margin-top: 10px;
931 font: 13px "Helvetica Neue",Helvetica,Arial,sans-serif;
932 }
933 .wppm_attachment_title{
934 font: 15px "Helvetica Neue",Helvetica,Arial,sans-serif;
935 }
936 .wppm_comment_date{
937 color:#a8aeb5;
938 }
939 .wppm_comment_date:hover{
940 color:#000000;
941 font-style: normal;
942 }
943 #wppm_attach_file{
944 color:#301db7;
945 cursor:pointer;
946 font-weight: normal;
947 text-decoration-line: underline;
948 text-decoration-style: dotted;
949 font: 13px "Helvetica Neue",Helvetica,Arial,sans-serif;
950 }
951 #wppm_individual_cancel_comment_btn{
952 float:right;
953 background-color:#ffffff;
954 margin-left: 5px;
955 margin-top:5px;
956 font: 13px "Helvetica Neue",Helvetica,Arial,sans-serif;
957 }
958 #wppm_individual_submit_task_comment_btn{
959 float:right;
960 margin-left: 5px;
961 margin-top:5px;
962 font: 13px "Helvetica Neue",Helvetica,Arial,sans-serif;
963 }
964 #wppm_proj_attach_file{
965 color:#301db7;
966 cursor:pointer;
967 font-weight: normal;
968 text-decoration-line: underline;
969 text-decoration-style: dotted;
970 font: 13px "Helvetica Neue",Helvetica,Arial,sans-serif;
971 }
972 #wppm_individual_cancel_proj_comment_btn{
973 float:right;
974 background-color:#ffffff;
975 margin-left: 5px;
976 margin-top:5px;
977 font: 13px "Helvetica Neue",Helvetica,Arial,sans-serif;
978 }
979 #wppm_individual_submit_proj_comment_btn{
980 float:right;
981 margin-left: 5px;
982 margin-top:5px;
983 font: 13px "Helvetica Neue",Helvetica,Arial,sans-serif;
984 }
985 .wppm_thread_messege{
986 font-size: 14px;
987 font-weight: 400;
988 color: #4e4e4e;
989 }
990 .wppm_attachment_cancel{
991 float: right;
992 margin: -22px 0px 0 0;
993 cursor: pointer;
994 }
995 .widget_header{
996 margin-bottom: 3px !important;
997 font: 14px "Helvetica Neue",Helvetica,Arial,sans-serif !important;
998 }
999 .wppm_task_label,.wppm_checklist_label,.wppm_project_label{
1000 font: 18px "Helvetica Neue",Helvetica,Arial,sans-serif !important;
1001 }
1002 .wppm_task_subtask_container .wppm_checklist_label {
1003 display: inline-flex;
1004 align-items: center;
1005 gap: 8px;
1006 margin-top: 7px;
1007 }
1008 .wppm_task_checklist_container .wppm_checklist_label {
1009 display: inline-flex;
1010 align-items: center;
1011 gap: 8px;
1012 margin-top: 7px;
1013 }
1014 .widget_divider{
1015 margin:4px 0 6px 0px !important;
1016 }
1017 .wppm_individual_task_widget{
1018 margin-top: 15px!important;
1019 }
1020 .select2-container{
1021 z-index:999999999!important;
1022 width:100%!important;
1023 }
1024 .flatpickr-calendar{
1025 z-index:999999999999!important;
1026 }
1027 #wppm_edit_task_label{
1028 width: 100%;
1029 margin-bottom: 10px;
1030 }
1031 #wppm_edit_project_title, #wppm_edit_task_priority,#wppm_edit_task_description_label{
1032 margin-bottom:10px;
1033 }
1034 #wppm_edit_task_priority{
1035 max-width:100%!important;
1036 }
1037 .wppm_edit_task_details_widget, .wppm_thread_action, .wppm_edit_project_details_widget{
1038 float:right;
1039 cursor:pointer;
1040 }
1041 .wppm_add_new_task_btn, #wppm_task_list_btn,#wppm_delete_btn,#wppm_delete_task_btn,#wppm_clone_task_btn,#wppm_print_task_btn,#wppm_archieve_task_btn,#wppm_dashboard_btn{
1042 cursor: pointer;
1043 }
1044 #wppm_project_details_container{
1045 border: 1px solid #eee;
1046 margin-top: 12px;
1047 padding-top: 10px;
1048 margin-bottom: 12px;
1049 }
1050 #wppm_view_project_task{
1051 background-color: #ffffff;
1052 margin-top: 10px;
1053 }
1054 #wppm_project_tasks,.wppm_add_new_project_btn,#wppm_proj_overview_btn{
1055 cursor:pointer;
1056 }
1057 #wppm_add_new_project_btn,#wppm_proj_overview_btn,#wppm_archieve_project_btn{
1058 margin-bottom: 10px;
1059 }
1060 #wppm_delete_project_icon, #wppm_add_new_project_icon, #wppm_project_list_icon, #wppm_task_list_icon{
1061 margin-top: -7px;
1062 }
1063 .wppm_add_new_icon{
1064 float: right!important;
1065 cursor:pointer;
1066 }
1067 .wppm_flex {
1068 display: flex !important;
1069 }
1070 .attachment_link span{
1071 font-size: 13px;
1072 color: #0077AE;
1073 cursor: pointer;
1074 text-decoration-line: underline;
1075 text-decoration-style:dotted;
1076 padding-right: 10px;
1077 }
1078 .wppm_bootstrap select{
1079 max-width:100% !important;
1080 }
1081 #wppm_en_body {
1082 height: 200px !important;
1083 }
1084 #wppm_tbl_templates tr{
1085 cursor:pointer;
1086 }
1087 #tbl_project_tasks td, #tbl_project_tasks th{
1088 text-align: center;
1089 }
1090 #tbl_project_tasks tr{
1091 cursor:pointer;
1092 }
1093 .wppm-pagination-txt{
1094 text-decoration: none;
1095 cursor: default;
1096 padding-right: 5px;
1097 }
1098 .wppm_task_pagination{
1099 float:right;
1100 color:#5f6368;
1101 margin-right:10px;
1102 cursor:pointer;
1103 }
1104 .wppm_proj_pagination{
1105 color:#5f6368;
1106 cursor:pointer;
1107 }
1108 .wppm_proj_pagination_container, .wppm_task_pagination_container{
1109 height: 30px;
1110 margin-top: 10px;
1111 display: flex;
1112 font-family: 'OpenSans-Semibold',"Helvetica Neue",Arial,Helvetica,sans-serif;
1113 font-size: 14px;
1114 }
1115 .wppm_proj_pagination_container a, .wppm_task_pagination_container a{
1116 color:#0073aa;
1117 }
1118 .wppm_pagination_prev{
1119 border-left-width: 1px;
1120 border-left-style: solid;
1121 padding-left: .75em;
1122 padding-right: .5em;
1123 text-decoration: none;
1124 border-color: #cdcdcd;
1125 color:#0073aa;
1126 }
1127 .wppm_pagination_next{
1128 border-left-width: 1px;
1129 border-left-style: solid;
1130 padding-left: .75em;
1131 padding-right: .5em;
1132 text-decoration: none;
1133 border-color: #cdcdcd;
1134 color:#337ab7;
1135 }
1136 .wppm_thread_action_btn{
1137 float: right;
1138 cursor: pointer;
1139 margin-left: 10px;
1140 color: #a7a9ab;
1141 font-size: 14px;
1142 }
1143 .wppm-task-list-btn{
1144 cursor:pointer;
1145 }
1146 .wppm_setting_pills li{
1147 background-color: #ffffff;
1148 border-radius: 15px !important;
1149 color:#9c9c9c !important;
1150 line-height:normal !important;
1151 }
1152 .wppm_email_notification_table td{
1153 font-weight: 400;
1154 font-family: "Nunito", "Segoe UI", arial;
1155 }
1156 .wppm_email_notification_table th{
1157 font-weight: 400;
1158 font-family: "Nunito", "Segoe UI", arial;
1159 font-weight: bold;
1160 }
1161 .wppm_task_result{
1162 text-align: center;
1163 margin-top: 15px;
1164 font-family: 'OpenSans-Light',Arial,Helvetica,sans-serif;
1165 font-size: 15px;
1166 color: #525c69;
1167 }
1168 .wppm_project_result{
1169 text-align: center;
1170 font-family: 'OpenSans-Light',Arial,Helvetica,sans-serif;
1171 font-size: 15px;
1172 color: #525c69;
1173 }
1174 #wppm_edit_project_label{
1175 margin-bottom: 10px;
1176 }
1177 #wppm_edit_project_category{
1178 margin-bottom: 20px;
1179 }
1180 #tbl_project_tasks,#tbl_custom_field,.select2-results__options,.select2-selection__rendered, .wppm_filter_display_text, .wppm_display_user_none, #wppm_assign_to_none_task{
1181 font:13px "Helvetica Neue",Helvetica,Arial,sans-serif;
1182 }
1183 .wppm_edit_project_label, .wppm_edit_task_label, .wppm_edit_task_start_date, .wppm_edit_task_end_date, .wppm_edit_task_priority_label, .wppm_edit_task_description_label,.wppm_edit_project_label,.wppm_edit_project_start_date,.wppm_edit_project_end_date,.wppm_edit_project_category_label, .wppm_edit_project_description_label,.wppm_project_status, .wppm_edit_task_status_label,.wppm_ct_field_label{
1184 font:13px "Helvetica Neue",Helvetica,Arial,sans-serif;
1185 margin-bottom: 5px;
1186 }
1187 #frm_get_project_users ul, #frm_get_task_users ul{
1188 z-index: 10000!important;
1189 position: absolute;
1190 box-shadow: 0 1px 2px rgb(79 148 212 / 80%);
1191 background-color: #fff;
1192 cursor: pointer;
1193 }
1194
1195 .wppm_bootstrap .wppm_padding_space{
1196 padding-top: 20px;
1197 }
1198
1199 .wppm_bootstrap .pricing-widget {
1200 margin-bottom: 30px;
1201 }
1202 .wppm_bootstrap .pheader {
1203 background-color: #555;
1204 color: #ffffff;
1205 padding: 10px;
1206 }
1207 .wppm_bootstrap .pheader .title{
1208 padding: 0;
1209 margin: 0;
1210 text-align: center;
1211 }
1212 .wppm_bootstrap .pheader .subtitle{
1213 padding: 0;
1214 margin: 10px 0 0;
1215 text-align: center;
1216 }
1217 .wppm_bootstrap .payment_freq {
1218 color: #fff !important;
1219 }
1220 .wppm_bootstrap .pbody {
1221 padding: 20px;
1222 border: 1px solid #555;
1223 }
1224 .wppm_bootstrap .addon-container {
1225 display: flex;
1226 align-items: center;
1227 padding: 5px 0;
1228 }
1229 .wppm_bootstrap .addon-details {
1230 flex-grow: 1;
1231 padding-left: 5px;
1232 }
1233 .wppm_bootstrap .pfooter {
1234 display: flex;
1235 border-left: 1px solid #555;
1236 border-right: 1px solid #555;
1237 border-bottom: 1px solid #555;
1238 justify-content: center;
1239 padding: 10px 0;
1240 }
1241
1242 .wppm_bootstrap .purchase_addon{
1243 padding-right: 5px;
1244 }
1245
1246 #wppm_chevron_sort_down_task_name_img, #wppm_chevron_sort_down_project_list_img, #wppm_chevron_sort_down_status_img, #wppm_chevron_sort_down_priority_img, #wppm_chevron_sort_down_start_date_img, #wppm_chevron_sort_down_end_date_img,#wppm_chevron_sort_down_task_duration_img{
1247 margin-right:-19px;
1248 }
1249
1250 .wppm-help-container{
1251 padding: 10px;
1252 background-color: #f0f0f1;
1253 margin-bottom: 15px;
1254 border-radius: 3px;
1255 }
1256
1257 #wppm_public_project_label{
1258 padding: 10px 0px 0px 10px;
1259 }
1260
1261 .wppm-filter-actions{
1262 display: flex;
1263 flex-wrap: wrap;
1264 align-items: center;
1265 }
1266
1267 #wppm_project_filter_container{
1268 display: flex;
1269 flex-wrap: wrap;
1270 align-items: flex-end;
1271 margin-bottom: 10px;
1272 }
1273
1274 #wppm_task_filter_container{
1275 display: flex;
1276 flex-wrap: wrap;
1277 align-items: flex-end;
1278 margin-bottom: 10px;
1279 }
1280
1281 #wppm_task_filter, #wppm_task_list_proj_filter, #tb-filter-created-by
1282 {
1283 border: 1px solid #ccc !important;
1284 background-color:#FFFFFF;
1285 border-radius:4px;
1286 font: 15px "Helvetica Neue",Arial,Helvetica,sans-serif !important;
1287 }
1288
1289 .wppm-filter-item {
1290 max-width: 200px;
1291 margin-right: 5px;
1292 margin-bottom: 10px;
1293 margin: 0 5px 10px 10px;
1294 }
1295 .wppm-filter-item select {
1296 width: 100% !important;
1297 }
1298
1299 .wppm-filter-item label{
1300 font-size: 12px;
1301 font-weight: 600;
1302 margin-bottom: 3px;
1303 vertical-align: middle;
1304 color: #858c96;
1305 }
1306
1307 .wppm_display_submit{
1308 display: flex;
1309 margin-bottom: 10px;
1310 }
1311
1312 .wppm-filter-actions span {
1313 cursor: pointer;
1314 font-size: 16px;
1315 text-decoration: underline;
1316 margin-bottom: 7px!important;
1317 font: 14px "Helvetica Neue",Arial,Helvetica,sans-serif !important;
1318 color: #858c96;
1319 }
1320
1321 .wppm-link {
1322 cursor: pointer !important;
1323 text-decoration: none !important;
1324 }
1325
1326 .wppm-link:hover {
1327 color: #2271b1 !important;
1328 text-decoration: underline !important;
1329 }
1330
1331 #wppm_project_list_container select{
1332 min-height: 30px !important;
1333 max-height: 35px !important;
1334 padding: 0 24px 0 8px !important;
1335 border: 1px solid #ccc !important;
1336 font: 14px "Helvetica Neue",Arial,Helvetica,sans-serif !important;
1337 }
1338
1339 #wppm_task_list_container select{
1340 min-height: 30px !important;
1341 max-height: 35px !important;
1342 padding: 0 24px 0 8px !important;
1343 border: 1px solid #ccc !important;
1344 font: 15px "Helvetica Neue",Arial,Helvetica,sans-serif !important;
1345 }
1346
1347 #wppm_proj_discussion_container{
1348 background-color: #ffffff;
1349 border: 1px solid #eee !important;
1350 }
1351 .wppm-setting-tab-container {
1352 display: flex;
1353 flex-wrap: wrap;
1354 width: 100%;
1355 align-items: center;
1356 margin-bottom: 10px;
1357 background-color:#F0F0F1;
1358 }
1359 .wppm-setting-tab-container button {
1360 padding: 7px 15px;
1361 font-size: 16px;
1362 font-weight: normal;
1363 border: none !important;
1364 color: #6A6A6A;
1365 background-color: transparent;
1366 cursor: pointer;
1367 border-radius: 16px;
1368 margin: 10 0 5px 5px;
1369 }
1370 .wppm-setting-tab-container button.active,
1371 .wppm-setting-tab-container button:hover {
1372 color: #fff;
1373 background-color: #FFA04A;
1374 }
1375 .wppm-input-group {
1376 width: 100%;
1377 display: flex;
1378 flex-direction: column;
1379 padding-bottom: 15px;
1380 box-sizing: border-box;
1381 }
1382 .wppm-input-group .label-container {
1383 display: flex;
1384 align-items: center;
1385 color: #000;
1386 margin-bottom: 2px;
1387 }
1388 .wppm-input-group label {
1389 font-size: 12px;
1390 font-weight: 600;
1391 margin-right: 5px;
1392 }
1393 .wppm-input-group .label-container svg {
1394 width: 12px;
1395 margin-left: 5px;
1396 }
1397 .wppm-input-group input[type="text"],
1398 .wppm-input-group select {
1399 width: 100%;
1400 max-width: 100%;
1401 }
1402 .wppm-input-group .checkbox-group,
1403 .wppm-input-group .radio-group {
1404 width: 100%;
1405 display: flex;
1406 flex-wrap: wrap;
1407 align-items: center;
1408 }
1409 .wppm-input-group .checkbox-group div,
1410 .wppm-input-group .radio-group div {
1411 width: 250px;
1412 display: flex;
1413 flex-wrap: wrap;
1414 align-items: center;
1415 margin: 0 10px 5px 0;
1416 }
1417 .wppm-input-group .checkbox-group div input,
1418 .wppm-input-group .radio-group div input {
1419 margin: 0 5px 0 0 !important;
1420 }
1421 .wppm-input-group .checkbox-group div span,
1422 .wppm-input-group .radio-group div span {
1423 font-size: 12px;
1424 font-weight: 300;
1425 }
1426 .wppm-input-group .required-char {
1427 font-size: 12px;
1428 color: #ff0000;
1429 }
1430 .wppm-input-group .divide-bar {
1431 width: 100%;
1432 display: flex;
1433 flex-wrap: grid;
1434 align-items: center;
1435 }
1436
1437 /* Checkboxes */
1438 #wppm-container .checkbox-container,
1439 .wppm-modal .checkbox-container, #wppm_task_list_container .checkbox-container {
1440 display: flex;
1441 line-height: normal;
1442 }
1443 #wppm-container .checkbox-container input,
1444 .wppm-modal .checkbox-container input, #wppm_task_list_container .checkbox-container input{
1445 padding: 0;
1446 height: initial;
1447 width: initial;
1448 margin-bottom: 0;
1449 display: none;
1450 cursor: pointer;
1451 }
1452 #wppm-container .checkbox-container label,
1453 .wppm-modal .checkbox-container label , #wppm_task_list_container .checkbox-container label{
1454 position: relative;
1455 cursor: pointer;
1456 padding: 0 !important;
1457 font-size: 14px !important;
1458 }
1459 #wppm-container .checkbox-container label:before,
1460 .wppm-modal .checkbox-container label:before , #wppm_task_list_container .checkbox-container label:before{
1461 content:'';
1462 -webkit-appearance: none;
1463 background-color: #fff;
1464 box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), inset 0px -15px 10px -12px rgba(0, 0, 0, 0.05);
1465 display: inline-block;
1466 position: relative;
1467 vertical-align: middle;
1468 cursor: pointer;
1469 margin-left: 5px;
1470 border: 1px solid #8a8a8a;
1471 }
1472 #wppm-container .checkbox-container input:checked + label:after,
1473 .wppm-modal .checkbox-container input:checked + label:after, #wppm_task_list_container .checkbox-container input:checked + label:after{
1474 content: '';
1475 display: block;
1476 position: absolute;
1477 top: 1px;
1478 right: 9px;
1479 width: 6px;
1480 height: 9px;
1481 border: solid #0079bf;
1482 border-width: 0 0 2px 2px;
1483 transform: matrix(-1, -1, -1, 1, 3, 0);
1484 }
1485 #wppm-container .checkbox-container label,
1486 .wppm-modal .checkbox-container label, #wppm_task_list_container .checkbox-container label{
1487 display: flex;
1488 }
1489 #wppm-container .checkbox-container label:before,
1490 .wppm-modal .checkbox-container label:before, #wppm_task_list_container .checkbox-container label:before{
1491 width: 18px !important;
1492 height: 18px !important;
1493 box-sizing: border-box;
1494 padding: 8px;
1495 }
1496 #wppm-container .checkbox-container label:after,
1497 .wppm-modal .checkbox-container label:after, #wppm_task_list_container .checkbox-container label:after {
1498 flex-grow: 1;
1499 }
1500 #wppm-container .checkbox-container p,
1501 .wppm-modal .checkbox-container p, #wppm_task_list_container .checkbox-container p{
1502 margin: 0 !important;
1503 }
1504
1505 .wppm-bulk-actions {
1506 display: flex;
1507 align-items: center;
1508 }
1509 .wppm-bulk-actions select {
1510 min-width: 150px;
1511 max-width: 250px;
1512 margin-left: 5px;
1513 }
1514 .wppm-bulk-actions button {
1515 margin-left: 10px;
1516 display: flex;
1517 align-items: center;
1518 }
1519 .wppm-bulk-actions button svg {
1520 height: 13px;
1521 margin-right: 15px;
1522 }
1523
1524 #wppm-bulk-actions{
1525 left: 0px!important;
1526 }
1527
1528 /* Popover Menu */
1529 .wppm-popover-menu {
1530 padding: 3px !important;
1531 border-radius: 3px !important;
1532 }
1533 .wppm-popover-menu-item {
1534 display: flex;
1535 align-items: center;
1536 padding: 10px;
1537 cursor: pointer;
1538 background-color: #fff;
1539 color: #707070;
1540 margin-left: 10px !important;
1541 }
1542 .wppm-popover-menu-item:hover {
1543 color: #fff;
1544 background-color: #313042 !important;
1545 }
1546 .wppm-popover-menu-item svg {
1547 width: 14px;
1548 margin-left: 10px;
1549 }
1550 .wppm-popover-menu-item span {
1551 font-size: 14px;
1552 }
1553
1554 .wppm-button.secondary {
1555 border: 1px solid #ccc !important;
1556 background-color: #fff !important;
1557 color: #313042 !important;
1558 font: 14px "Helvetica Neue", Arial, Helvetica, sans-serif !important;
1559 }
1560
1561 .wppm-button.small {
1562 font-size: 12px !important;
1563 }
1564
1565 #wppm_task_description, #wppm_add_new_project #wppm_proj_description{
1566 height: 160px !important;
1567 width: 100% !important;
1568 }
1569
1570 /* Form fields */
1571 .wppm-input-group {
1572 width: 100%;
1573 display: flex;
1574 flex-direction: column;
1575 padding-bottom: 15px;
1576 box-sizing: border-box;
1577 }
1578 .wppm-input-group .label-container {
1579 display: flex;
1580 align-items: center;
1581 color: #000;
1582 margin-bottom: 2px;
1583 }
1584 .wppm-input-group label {
1585 font-size: 12px;
1586 font-weight: 600;
1587 margin-left: 5px;
1588 }
1589 .wppm-input-group .label-container svg {
1590 width: 12px;
1591 margin-right: 5px;
1592 }
1593 .wppm-input-group input[type="text"],
1594 .wppm-input-group select {
1595 width: 100%;
1596 max-width: 100%;
1597 }
1598
1599 @media (max-width: 768px) {
1600 .wppm_task_list{
1601 flex-basis: 50% !important;
1602 }
1603 }
1604
1605 #wppmprint_menu{
1606 display: flex;
1607 flex-direction: column;
1608 position: absolute;
1609 background: white;
1610 border: 1px solid #ccc;
1611 z-index: 1000;
1612 margin-left: 155px;
1613 display: none;
1614 }
1615
1616 #wppmprint_menu a {
1617 padding: 8px 12px;
1618 text-decoration: none;
1619 color: #333;
1620 }
1621
1622 #wppmprint_menu a:hover {
1623 background: #f0f0f0;
1624 }
1625
1626 .wppm_checklist_items_container {
1627 list-style: none;
1628 padding-left: 0;
1629 margin-left: 20px;
1630 margin-right: 20px;
1631 }
1632 .wppm_checklist_items_container .wppm_checklist_item {
1633 padding: 6px 10px;
1634 background: #fff;
1635 margin-right: 5px;
1636 margin-bottom: 4px;
1637 margin-left: 5px;
1638 border: 1px solid #ddd;
1639 cursor: grab;
1640 display: flex;
1641 align-items: center;
1642 }
1643 .wppm_checklist_items_container .wppm_chk_items_drag {
1644 margin-right: 10px;
1645 cursor: move;
1646 }
1647 .wppm_subtask_more_users {
1648 display: inline-flex;
1649 flex-shrink: 0;
1650 align-items: center;
1651 justify-content: center;
1652 width: 20px;
1653 height: 20px;
1654 min-width: 20px;
1655 border-radius: 50%;
1656 background: #e2e4e7;
1657 color: #555d66;
1658 font-size: 8px;
1659 line-height: 1;
1660 font-weight: 600;
1661 font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
1662 vertical-align: middle;
1663 margin-left: -12px;
1664 padding: 0;
1665 border: 2px solid #fff;
1666 box-sizing: border-box;
1667 }
1668
1669 /* Add checklist / add checklist item: input + button sized to content, not full-width */
1670 #wppm_checklist_label,
1671 input[name="wppm_checklist_item_label"] {
1672 display: inline-block !important;
1673 width: 240px !important;
1674 max-width: 100%;
1675 margin-right: 8px;
1676 vertical-align: middle;
1677 box-sizing: border-box;
1678 }
1679 #wppm_checklist_btn,
1680 input[name="wppm_checklist_item_label"] + input[type="button"] {
1681 display: inline-block !important;
1682 width: auto !important;
1683 vertical-align: middle;
1684 }
1685
1686 /* Subtasks / checklist - mobile */
1687 @media (max-width: 782px) {
1688 .wppm_checklist_items_container {
1689 margin-left: 0;
1690 margin-right: 0;
1691 }
1692 .wppm_checklist_items_container .wppm_checklist_item {
1693 flex-wrap: wrap;
1694 margin-left: 0;
1695 margin-right: 0;
1696 }
1697 .wppm_checklist_items_container .wppm_checklist_item .col-sm-8,
1698 .wppm_checklist_items_container .wppm_checklist_item .col-sm-4 {
1699 width: 100%;
1700 text-align: left !important;
1701 margin-top: 6px;
1702 }
1703 #wppm_checklist_label,
1704 input[name="wppm_checklist_item_label"] {
1705 width: 100% !important;
1706 margin-right: 0;
1707 margin-bottom: 8px;
1708 }
1709 #wppm_checklist_btn,
1710 input[name="wppm_checklist_item_label"] + input[type="button"] {
1711 width: 100% !important;
1712 }
1713
1714 /* Open Task toolbar: let the icon buttons wrap instead of overflowing */
1715 .wppm_headers.row {
1716 display: flex;
1717 flex-wrap: wrap;
1718 align-items: center;
1719 row-gap: 8px;
1720 }
1721 .wppm_headers .col-sm-8 {
1722 display: flex;
1723 flex-wrap: wrap;
1724 align-items: center;
1725 gap: 6px;
1726 width: 100%;
1727 }
1728
1729 /* Checklist header row (title + delete link) - stack like subtask/checklist items */
1730 .wppm_task_checklist_container .row .col-sm-8,
1731 .wppm_task_checklist_container .row .col-sm-4 {
1732 width: 100%;
1733 text-align: left !important;
1734 margin-top: 4px;
1735 }
1736 .wppm_task_subtask_container,
1737 .wppm_task_checklist_container,
1738 .wppm_thread,
1739 .wppm_proj_thread {
1740 margin: 8px;
1741 }
1742
1743 /* Comment thread: avatar above the comment body instead of a cramped side-by-side table */
1744 .wppm_thread,
1745 .wppm_proj_thread {
1746 display: block;
1747 }
1748 .wppm_thread_avatar,
1749 .wppm_thread_body {
1750 display: block;
1751 width: 100%;
1752 padding-left: 0;
1753 }
1754 .wppm_thread_avatar {
1755 padding-bottom: 8px;
1756 }
1757 }
1758
1759 /* Main container */
1760 /* GRID CONTAINER */
1761 .wppm_bootstrap .pricing-flex {
1762 display: grid !important;
1763 grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
1764 gap: 20px;
1765 align-items: stretch;
1766 }
1767
1768 /* CARD */
1769 .wppm_bootstrap .pricing-widget {
1770 display: flex;
1771 flex-direction: column;
1772
1773 background: #fff;
1774 border: 1px solid #e5e5e5;
1775 border-radius: 6px;
1776 padding: 15px;
1777 box-sizing: border-box;
1778 }
1779
1780 /* BODY GROWS */
1781 .wppm_bootstrap .pricing-widget .pbody {
1782 flex: 1;
1783 }
1784
1785 /* PRO ADDON CARD (Addons page) - card stays fully visible, just a small corner badge */
1786 .wppm_bootstrap .pricing-widget {
1787 position: relative;
1788 }
1789 .wppm_bootstrap .wppm-pro-badge-corner-lg {
1790 position: absolute;
1791 top: 10px;
1792 right: 10px;
1793 z-index: 5;
1794 display: flex;
1795 align-items: center;
1796 justify-content: center;
1797 width: 30px;
1798 height: 30px;
1799 background: #fff;
1800 border-radius: 50%;
1801 box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
1802 line-height: 0;
1803 }
1804
1805 /* PRO FEATURE BADGE ICON (sidebar menu, settings pills, toolbar buttons) */
1806 .wppm-pro-badge {
1807 display: inline-flex;
1808 align-items: center;
1809 margin-left: 4px;
1810 line-height: 0;
1811 vertical-align: middle;
1812 }
1813 .wppm-pro-badge svg {
1814 display: block;
1815 }
1816
1817 /* Locked settings pill */
1818 .wppm_bootstrap .wppm_setting_pills li.wppm-locked-pill a {
1819 display: flex;
1820 align-items: center;
1821 opacity: 0.75;
1822 }
1823 .wppm_bootstrap .wppm_setting_pills li.wppm-locked-pill .wppm-pro-pill-lock {
1824 display: inline-flex;
1825 align-items: center;
1826 margin-right: 4px;
1827 line-height: 0;
1828 vertical-align: middle;
1829 }
1830
1831 /* Locked project toolbar button */
1832 .wppm_bootstrap .wppm-locked-toolbar-btn {
1833 opacity: 0.7;
1834 }
1835 .wppm_bootstrap .wppm-locked-toolbar-btn:hover {
1836 opacity: 1;
1837 }
1838 .wppm_bootstrap .wppm-pro-icon-wrap {
1839 position: relative;
1840 display: inline-block;
1841 line-height: 0;
1842 }
1843 .wppm_bootstrap .wppm-pro-icon-wrap img {
1844 width: 16px;
1845 height: 16px;
1846 vertical-align: middle;
1847 }
1848 .wppm_bootstrap .wppm-pro-badge-corner {
1849 position: absolute;
1850 top: -5px;
1851 right: -6px;
1852 display: flex;
1853 align-items: center;
1854 justify-content: center;
1855 width: 14px;
1856 height: 14px;
1857 background: #fff;
1858 border-radius: 50%;
1859 box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08);
1860 line-height: 0;
1861 }
1862
1863 /* Pro addon teaser (sidebar page + settings inline upsell) */
1864 .wppm-pro-teaser {
1865 max-width: 520px;
1866 margin: 30px auto;
1867 padding: 30px;
1868 text-align: center;
1869 background: #fff;
1870 border: 1px solid #e5e5e5;
1871 border-radius: 6px;
1872 font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
1873 }
1874 .wppm-pro-teaser-inline {
1875 margin: 0;
1876 }
1877 .wppm-pro-teaser-icon {
1878 position: relative;
1879 display: inline-block;
1880 margin-bottom: 15px;
1881 }
1882 .wppm-pro-teaser-icon img {
1883 width: 48px;
1884 height: 48px;
1885 opacity: 0.5;
1886 }
1887 .wppm-pro-teaser-icon .wppm-pro-teaser-lock {
1888 position: absolute;
1889 right: -6px;
1890 bottom: -4px;
1891 display: flex;
1892 align-items: center;
1893 justify-content: center;
1894 width: 22px;
1895 height: 22px;
1896 background: #f5a623;
1897 border-radius: 50%;
1898 line-height: 0;
1899 }
1900 .wppm-pro-teaser h2 {
1901 margin: 0 0 10px;
1902 font-family: "OpenSans-Light", "Helvetica Neue", Helvetica, Arial, sans-serif;
1903 }
1904 .wppm-pro-teaser p {
1905 color: #555;
1906 margin-bottom: 20px;
1907 }
1908 .wppm-pro-teaser-actions .btn {
1909 margin: 0 5px;
1910 }
1911
1912 /* FOOTER */
1913 /* .wppm_bootstrap .pricing-widget .pfooter {
1914 display: flex;
1915 justify-content: space-between;
1916 gap: 10px;
1917 margin-top: 15px;
1918 }
1919
1920 /* MOBILE FOOTER STACK */
1921 @media (max-width: 480px) {
1922 .wppm_bootstrap .pricing-widget .pfooter {
1923 flex-direction: column;
1924 }
1925 } */
1926
1927 .wppm-dashboard{
1928 padding:20px;
1929 margin-top:20px;
1930 font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
1931 }
1932 .wppm-dashboard-top{
1933 display:grid;
1934 grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
1935 gap:20px;
1936 margin-bottom:20px;
1937 }
1938
1939 .wppm-small-widget{
1940 background:#ffffff;
1941 border-radius:10px;
1942 padding:20px;
1943 box-shadow:0 2px 8px rgba(0,0,0,0.05);
1944 transition:all 0.2s ease;
1945 display:flex;
1946 align-items:center;
1947 gap:15px;
1948 }
1949
1950 .wppm-small-widget:hover{
1951 transform:translateY(-3px);
1952 box-shadow:0 6px 16px rgba(0,0,0,0.08);
1953 }
1954
1955 .wppm-small-widget h3{
1956 font-size:14px;
1957 color:#666;
1958 margin-bottom:10px;
1959 }
1960
1961 .wppm-number{
1962 font-size:28px;
1963 font-weight:600;
1964 color:#222;
1965 }
1966 .wppm-small-widget.overdue{
1967 border-left:4px solid #e74c3c;
1968 }
1969
1970 .wppm-divider{
1971 height:1px;
1972 background:#eee;
1973 margin:20px 0;
1974 }
1975
1976 .wppm-row{
1977 display:grid;
1978 grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
1979 gap:20px;
1980 margin-bottom:20px;
1981 }
1982
1983 .wppm-widget{
1984 background:#fff;
1985 border-radius:10px;
1986 padding:20px;
1987 box-shadow:0 2px 8px rgba(0,0,0,0.05);
1988 transition:all 0.2s ease;
1989 }
1990 .wppm-widget h2{
1991 font-size:16px;
1992 margin-bottom:15px;
1993 font-weight:600;
1994 color:#222;
1995 }
1996
1997 #tbl_my_tasks,#tbl_active_projects,#tbl_upcoming_tasks, #tbl_todays_tasks {
1998 border-collapse: collapse !important;
1999 width: 100% !important;
2000 }
2001
2002 #tbl_my_tasks th,
2003 #tbl_my_tasks td,
2004 #tbl_todays_tasks th,
2005 #tbl_todays_tasks td,
2006 #tbl_active_projects th,
2007 #tbl_active_projects td,
2008 #tbl_upcoming_tasks th,
2009 #tbl_upcoming_tasks td {
2010 border: 1px solid #ddd !important;
2011 padding: 8px !important;
2012 }
2013
2014 #tbl_my_tasks th, #tbl_active_projects th, #tbl_upcoming_tasks th, #tbl_todays_tasks th{
2015 background-color: #f5f5f5 !important;
2016 text-align: left !important;
2017 }
2018
2019 #tbl_my_tasks tr:hover, #tbl_active_projects tr:hover, #tbl_upcoming_tasks tr:hover, #tbl_todays_tasks tr:hover{
2020 background-color: #f9f9f9 !important;
2021 cursor: pointer;
2022 }
2023 .wppm-widget table td{
2024 padding:10px;
2025 border-top:1px solid #f2f2f2;
2026 font-size:14px;
2027 }
2028
2029 .wppm-widget table th{
2030 background:#f8fafc;
2031 color:#777;
2032 font-weight:600;
2033 padding:10px;
2034 border-bottom:1px solid #e5e7eb;
2035 }
2036
2037 canvas{
2038 max-height:250px !important;
2039 }
2040
2041 .wppm-widget:hover{
2042 box-shadow:0 8px 20px rgba(0,0,0,0.07);
2043 }
2044
2045 .wppm-widget-icon{
2046 font-size:28px;
2047 background:#f5f7fb;
2048 padding:12px;
2049 border-radius:8px;
2050 }
2051 .wppm-widget h2{
2052 display:flex;
2053 justify-content:space-between;
2054 align-items:center;
2055 }
2056
2057 .wppm-view-all{
2058 font-size:13px;
2059 color:#4c7cf3;
2060 text-decoration:none;
2061 }
2062
2063 .wppm-view-all:hover{
2064 text-decoration:underline;
2065 }
2066
2067 .wppm-workload-list {
2068 list-style: none;
2069 padding: 0;
2070 margin: 0;
2071 }
2072
2073 .wppm-workload-list li {
2074 display: flex;
2075 align-items: center;
2076 gap:10px;
2077 margin-bottom: 10px;
2078 }
2079
2080 .wppm-workload-bar {
2081 flex:1;
2082 height:8px;
2083 background:#eee;
2084 border-radius:5px;
2085 overflow:hidden;
2086 }
2087
2088 .wppm-workload-bar div {
2089 height: 100%;
2090 background: #3498db;
2091 border-radius: 5px;
2092 }
2093
2094 .dashboard-progress-wrapper{
2095 display:flex;
2096 align-items:center;
2097 gap:8px;
2098 }
2099
2100 .dashboard-progress-bar{
2101 flex:1;
2102 height:8px;
2103 background:#e5e7eb;
2104 border-radius:5px;
2105 overflow:hidden;
2106 }
2107
2108 .dashboard-progress{
2109 height:100%;
2110 border-radius:5px;
2111 }
2112
2113 .dashboard-progress-text{
2114 font-size:12px;
2115 font-weight:600;
2116 }
2117 .wppm-priority-dot{
2118 display:inline-block;
2119 width:10px;
2120 height:10px;
2121 border-radius:50%;
2122 margin-right:6px;
2123 vertical-align:middle;
2124 }
2125 /* Wrapper (relative parent) */
2126 .tb-filter-bar {
2127 position: relative;
2128 }
2129
2130 /* Advanced panel (FLOAT) */
2131 #tb-advanced-panel {
2132 position: absolute;
2133 top: 110%; /* below button */
2134 right: 0;
2135 width: 320px;
2136
2137 background: #ffffff;
2138 border: 1px solid #e2e8f0;
2139 border-radius: 10px;
2140 box-shadow: 0 10px 25px rgba(0,0,0,0.1);
2141
2142 padding: 12px;
2143 z-index: 999999999;
2144
2145 /* hidden state */
2146 opacity: 0;
2147 transform: translateY(-10px);
2148 pointer-events: none;
2149
2150 transition: all 0.25s ease;
2151 }
2152
2153 /* OPEN STATE */
2154 #tb-advanced-panel.tb-open {
2155 opacity: 1;
2156 transform: translateY(0);
2157 pointer-events: auto;
2158 }
2159
2160 /* Rows */
2161 .tb-row {
2162 margin-bottom: 10px;
2163 }
2164
2165 .tb-row label {
2166 font-size: 12px;
2167 font-weight: 600;
2168 display: block;
2169 margin-bottom: 4px;
2170 }
2171
2172 /* Inputs */
2173 #tb-advanced-panel input,
2174 #tb-advanced-panel select {
2175 width: 100%!important;
2176 padding: 6px 8px!important;
2177 border: 1px solid #cbd5e1;
2178 border-radius: 6px;
2179 }
2180 /* Wrapper */
2181 .tb-filter-bar {
2182 position: relative;
2183 display: flex;
2184 align-items: center;
2185 gap: 10px;
2186 overflow: visible!important;
2187 }
2188
2189 /* Button */
2190 .tb-btn {
2191 padding: 2px 10px;
2192 border-radius: 6px;
2193 border: 1px solid #cbd5e1;
2194 background: #fff;
2195 cursor: pointer;
2196 }
2197
2198 /* ================= POPOVER ================= */
2199 .tb-popover {
2200 position: absolute;
2201 top: 120%;
2202 right: 0;
2203 width: 320px;
2204
2205 background: #fff;
2206 border: 1px solid #e2e8f0;
2207 border-radius: 10px;
2208 box-shadow: 0 15px 35px rgba(0,0,0,0.12);
2209
2210 padding: 12px;
2211 z-index: 999999999;
2212
2213 opacity: 0;
2214 transform: translateY(-10px);
2215 pointer-events: none;
2216 transition: all 0.25s ease;
2217 }
2218
2219 .tb-popover.tb-open {
2220 opacity: 1;
2221 transform: translateY(0);
2222 pointer-events: auto;
2223 }
2224
2225 /* Arrow */
2226 .tb-arrow {
2227 position: absolute;
2228 top: -6px;
2229 right: 20px;
2230 width: 12px;
2231 height: 12px;
2232 background: white;
2233 border-left: 1px solid #e2e8f0;
2234 border-top: 1px solid #e2e8f0;
2235 transform: rotate(45deg);
2236 }
2237
2238 /* Sections */
2239 .tb-section {
2240 margin-bottom: 12px;
2241 }
2242
2243 .tb-section h4 {
2244 font-size: 12px;
2245 margin-bottom: 6px;
2246 color: #64748b;
2247 }
2248
2249 /* Inputs */
2250 .tb-popover input,
2251 .tb-popover select {
2252 width: 100%;
2253 margin-bottom: 6px;
2254 padding: 6px;
2255 border: 1px solid #cbd5e1;
2256 border-radius: 6px;
2257 }
2258
2259 /* ================= CHIPS ================= */
2260 /* .tb-chips {
2261 display: flex;
2262 gap: 6px;
2263 flex-wrap: wrap;
2264 } */
2265
2266 /* .tb-chip {
2267 background: #eef2ff;
2268 color: #3730a3;
2269 padding: 4px 8px;
2270 border-radius: 20px;
2271 font-size: 12px;
2272 cursor: pointer;
2273 } */
2274 /* =========================
2275 MOBILE FILTER PANEL
2276 ========================= */
2277 /* @media (max-width: 768px) {
2278
2279 #tb-advanced-panel {
2280 position: fixed;
2281 left: 0;
2282 right: 0;
2283 bottom: 0;
2284 top: auto;
2285
2286 width: 100%;
2287 max-height: 80vh;
2288
2289 border-radius: 16px 16px 0 0;
2290 padding: 16px;
2291
2292 transform: translateY(100%);
2293 opacity: 1;
2294 pointer-events: auto;
2295
2296 overflow-y: auto;
2297 }
2298
2299 #tb-advanced-panel.tb-open {
2300 transform: translateY(0);
2301 }
2302
2303 .tb-arrow {
2304 display: none;
2305 }
2306
2307 /* backdrop */
2308 /* #tb-backdrop {
2309 position: fixed;
2310 top: 0;
2311 left: 0;
2312 right: 0;
2313 bottom: 0;
2314 background: rgba(0,0,0,0.4);
2315 z-index: 9998;
2316 display: none;
2317 }
2318
2319 #tb-backdrop.active {
2320 display: block;
2321 }
2322
2323 } */
2324 /* =========================
2325 MOBILE FILTER PANEL
2326 ========================= */
2327 @media (max-width: 768px) {
2328
2329 #tb-advanced-panel,
2330 #tb-advanced-panel.tb-popover {
2331 position: fixed !important;
2332
2333 top: 0 !important;
2334 right: 0 !important;
2335 bottom: 0 !important;
2336 left: 0 !important;
2337
2338 width: 100vw !important;
2339 height: 100vh !important;
2340 max-width: none !important;
2341 max-height: none !important;
2342
2343 margin: 0 !important;
2344 padding: 16px !important;
2345
2346 box-sizing: border-box !important;
2347
2348 background: #fff !important;
2349
2350 border: none !important;
2351 border-radius: 0 !important;
2352
2353 box-shadow: none !important;
2354
2355 overflow-y: auto !important;
2356 -webkit-overflow-scrolling: touch;
2357
2358 z-index: 999999999 !important;
2359
2360 /* CLOSED */
2361 opacity: 0 !important;
2362 visibility: hidden !important;
2363 transform: none !important;
2364 pointer-events: none !important;
2365
2366 transition: opacity 0.25s ease, visibility 0.25s ease !important;
2367 }
2368
2369 @media (max-width: 768px) {
2370
2371 #tb-active-filters,
2372 .tb-chips {
2373 display: flex !important;
2374 flex-direction: column !important;
2375 align-items: stretch !important;
2376 gap: 8px !important;
2377 width: 100% !important;
2378 }
2379
2380 #tb-active-filters .tb-chip,
2381 .tb-chips .tb-chip {
2382 display: inline-flex !important;
2383 align-items: center;
2384 justify-content: space-between;
2385
2386 width: 100% !important;
2387 box-sizing: border-box;
2388 }
2389 }
2390
2391 /* OPEN */
2392 #tb-advanced-panel.tb-open {
2393 opacity: 1 !important;
2394 visibility: visible !important;
2395 transform: none !important;
2396 pointer-events: auto !important;
2397 }
2398
2399 /* Hide arrow on mobile */
2400 #tb-advanced-panel .tb-arrow {
2401 display: none !important;
2402 }
2403
2404 /* Mobile header */
2405 .tb-mobile-header {
2406 display: flex !important;
2407
2408 position: sticky;
2409 top: 0;
2410
2411 background: #fff;
2412 z-index: 2;
2413
2414 padding: 5px 0 15px;
2415 margin-bottom: 15px;
2416
2417 font-size: 18px;
2418 }
2419
2420 #tb-close-filters {
2421 border: 0;
2422 background: transparent;
2423 font-size: 24px;
2424 cursor: pointer;
2425 }
2426
2427 /* Backdrop */
2428 #tb-backdrop {
2429 position: fixed !important;
2430
2431 top: 0 !important;
2432 right: 0 !important;
2433 bottom: 0 !important;
2434 left: 0 !important;
2435
2436 width: 100vw !important;
2437 height: 100vh !important;
2438
2439 background: rgba(0, 0, 0, 0.4);
2440
2441 z-index: 999998 !important;
2442
2443 display: none;
2444 }
2445
2446 #tb-backdrop.active {
2447 display: block !important;
2448 }
2449
2450 }
2451
2452 .tb-mobile-header {
2453 display: none;
2454 justify-content: space-between;
2455 align-items: center;
2456 font-weight: 600;
2457 margin-bottom: 10px;
2458 }
2459
2460 @media (max-width:768px){
2461 .tb-mobile-header {
2462 display: flex;
2463 }
2464 }
2465 .tb-section {
2466 display: flex;
2467 flex-direction: column;
2468 gap: 8px;
2469 }
2470 .tb-popover {
2471 width: 300px;
2472 }
2473 .tb-chip {
2474 background: #eef3ff;
2475 padding: 5px 10px;
2476 border-radius: 20px;
2477 margin: 18px 5px 10px 0px;
2478 display: inline-block;
2479 cursor: pointer;
2480 color: #3730a3;
2481 font-size: 12px;
2482 gap: 6px;
2483 }
2484
2485 .tb-remove {
2486 margin-left: 6px;
2487 color: red;
2488 font-weight: bold;
2489 }
2490
2491 .tb-chip-close {
2492 margin-left: 6px;
2493 cursor: pointer;
2494 }
2495
2496 @media (max-width: 767px) {
2497
2498 .tb-filter-bar {
2499 display: flex;
2500 align-items: center;
2501 justify-content: flex-end;
2502 flex-wrap: wrap;
2503 gap: 8px;
2504 width: 100%;
2505 overflow: visible!important;
2506 }
2507
2508 #tb-advanced-toggle {
2509 display: inline-flex !important;
2510 align-items: center;
2511 justify-content: center;
2512
2513 /* float: left; */
2514 position: relative;
2515 margin-top : 20px;
2516
2517 height: 34px;
2518 min-width: 34px;
2519 padding: 0 10px;
2520
2521 border: 1px solid #d5d9dd;
2522 border-radius: 5px;
2523 background: #fff;
2524
2525 color: #555;
2526 font: 13px "Helvetica Neue", Helvetica, Arial, sans-serif;
2527
2528 cursor: pointer;
2529 box-sizing: border-box;
2530 white-space: nowrap;
2531 }
2532
2533 #tb-advanced-toggle:hover {
2534 background: #f5f5f5;
2535 }
2536
2537 #tb-advanced-panel input,
2538 #tb-advanced-panel select {
2539 width: 75%!important;
2540 padding: 6px 8px!important;
2541 border: 1px solid #cbd5e1;
2542 border-radius: 6px;
2543 }
2544
2545 .wppm-filter-actions span {
2546 cursor: pointer;
2547 font-size: 16px;
2548 text-decoration: underline;
2549 /* margin-bottom: 7px!important; */
2550 font: 14px "Helvetica Neue",Arial,Helvetica,sans-serif !important;
2551 color: #858c96;
2552 margin-bottom: 20px !important;
2553 margin-left: 5px;
2554 }
2555 }
2556
2557 .wppm-mention {
2558 display:inline;
2559 background: #e7f3ff;
2560 color: #0073aa;
2561 font-weight: bold;
2562 padding: 2px 6px;
2563 border-radius: 4px;
2564 font-weight: 500;
2565 margin: 0;
2566 }
2567
2568 .wppm-mention:hover {
2569 background: #d0e7ff;
2570 }
2571
2572 .wppm-mention-me{
2573 background:#ffcc00 !important;
2574 color:#000 !important;
2575 font-weight:700;
2576 }
2577
2578 #wppm_mention_list {
2579 position: absolute !important;
2580 min-width: 220px;
2581 max-width: 300px;
2582 max-height: 240px;
2583 overflow-y: auto;
2584 background: #fff;
2585 border: 1px solid #dcdcde;
2586 border-radius: 8px;
2587 box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
2588 padding: 6px 0;
2589 margin-top: 4px;
2590 z-index: 99999999999 !important;
2591 animation: wppmMentionFade .15s ease-in-out;
2592 }
2593
2594 #wppm_mention_list .mention-item:hover,
2595 #wppm_mention_list .mention-item.active {
2596 background: linear-gradient(135deg, #7c3aed, #a855f7);
2597 color: #fff;
2598 }
2599
2600 #wppm_mention_list .mention-item {
2601 padding: 2px 12px;
2602 cursor: pointer;
2603 font-size: 14px;
2604 color: #333;
2605 border-bottom: 1px solid #eee;
2606 }
2607
2608 #wppm_mention_list .mention-item:last-child {
2609 border-bottom: none;
2610 }
2611
2612 /* Floating Button */
2613 #wppm_notification_bell{
2614 position:fixed;
2615 right:24px;
2616 bottom:24px;
2617 width:56px;
2618 height:56px;
2619 border-radius:16px;
2620 background:#ffffff;
2621 border:1px solid #e5e7eb;
2622 box-shadow:
2623 0 8px 24px rgba(15,23,42,.12),
2624 0 2px 8px rgba(15,23,42,.08);
2625 display:flex;
2626 justify-content:center;
2627 align-items:center;
2628 cursor:pointer;
2629 z-index:999999999!important;
2630 transition:all .25s ease;
2631 }
2632
2633 #wppm_notification_bell:hover{
2634 transform:translateY(-3px);
2635 box-shadow:
2636 0 15px 35px rgba(15,23,42,.18),
2637 0 5px 15px rgba(15,23,42,.12);
2638 }
2639
2640 #wppm_notification_bell .dashicons{
2641 color:#6b7280;
2642 font-size:22px;
2643 transition:.2s;
2644 }
2645
2646 #wppm_notification_bell:hover .dashicons{
2647 color:#7c3aed;
2648 }
2649
2650 /* Notification Badge */
2651 .wppm-badge{
2652 position:absolute;
2653 top:-6px;
2654 right:-6px;
2655 min-width:22px;
2656 height:22px;
2657 border-radius:50px;
2658 background:#ff3366;
2659 color:#fff;
2660 display:flex;
2661 align-items:center;
2662 justify-content:center;
2663 font-size:11px;
2664 font-weight:700;
2665 border:2px solid #fff;
2666 }
2667
2668 /* Popup */
2669 #wppm-notification-container{
2670 position:fixed;
2671 right:24px;
2672 bottom:90px;
2673 width:360px;
2674 background:#fff;
2675 border-radius:18px;
2676 box-shadow:0 20px 60px rgba(0,0,0,.15);
2677 overflow:hidden;
2678 display:none;
2679 z-index:999999999!important;
2680 }
2681
2682 /* Item */
2683 .wppm-notification-item, .wppm-no-notification{
2684 padding:16px 18px;
2685 border-bottom:1px solid #f3f4f6;
2686 cursor:pointer;
2687 transition:.2s;
2688 }
2689
2690 .wppm-notification-item:hover{
2691 background:#f9fafb;
2692 }
2693
2694 .wppm-notification-message{
2695 font-size:14px;
2696 font-weight:600;
2697 color:#111827;
2698 margin-bottom:4px;
2699 }
2700
2701 .wppm-notification-item small{
2702 color:#9ca3af;
2703 }
2704
2705 .wppm-pro-btn{
2706 display:inline-flex;
2707 align-items:center;
2708 gap:6px;
2709 text-decoration:none;
2710 }
2711 /* .wppm-pro-btn .dashicons{
2712 font-size:16px;
2713 width:16px;
2714 height:16px;
2715 line-height:16px;
2716 } */
2717 .wppm-pro-btn .wppm-btn-text{
2718 display:inline-block;
2719 }
2720
2721 .tb-pro-feature-card{
2722 position:relative;
2723 overflow:hidden;
2724 border-radius:8px;
2725 }
2726
2727 .tb-pro-content{
2728 filter:blur(4px);
2729 pointer-events:none;
2730 opacity:.7;
2731 }
2732
2733 .tb-pro-overlay{
2734 position:absolute;
2735 inset:0;
2736 display:flex;
2737 flex-direction:column;
2738 justify-content:center;
2739 align-items:center;
2740 background:rgba(255,255,255,.5);
2741 z-index:10;
2742 }
2743
2744 .tb-pro-badge{
2745 background:#ff9800;
2746 color:#fff;
2747 padding:6px 12px;
2748 border-radius:4px;
2749 margin-bottom:10px;
2750 font-weight:600;
2751 }
2752
2753 #wppm-archive-project {
2754 display: inline-flex;
2755 align-items: center;
2756 gap: 6px;
2757 }
2758
2759 #wppm-archive-project svg {
2760 flex-shrink: 0;
2761 }
2762
2763 .wppm_create_project_btn {
2764 display: inline-flex;
2765 align-items: center;
2766 gap: 6px;
2767 padding: 8px 12px;
2768 border-radius: 4px;
2769 text-decoration: none;
2770 cursor: pointer;
2771 }
2772
2773 .wppm_create_project_btn svg {
2774 flex-shrink: 0;
2775 }