PluginProbe
Taskbuilder – Project Management & Task Management Tool With Kanban Board / 6.0.7
Taskbuilder – Project Management & Task Management Tool With Kanban Board v6.0.7
6.0.7 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 All 59 releases
taskbuilder / asset / css / admin.css

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

2,781 lines 56.8 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: center;
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: 0 5px 32px 10px;
1292 display: flex;
1293 flex-direction: column;
1294 justify-content: center;
1295 }
1296
1297 .tb-filters {
1298 margin-bottom: 10px;
1299 align-items: center;
1300 }
1301 .wppm-filter-item select {
1302 width: 100% !important;
1303 }
1304
1305 .wppm-filter-item label{
1306 font-size: 12px;
1307 font-weight: 600;
1308 margin-bottom: 3px;
1309 vertical-align: middle;
1310 color: #858c96;
1311 }
1312
1313 .wppm_display_submit{
1314 display: flex;
1315 margin-bottom: 10px;
1316 }
1317
1318 .wppm-filter-actions span {
1319 cursor: pointer;
1320 font-size: 16px;
1321 text-decoration: underline;
1322 margin-bottom: 7px!important;
1323 font: 14px "Helvetica Neue",Arial,Helvetica,sans-serif !important;
1324 color: #858c96;
1325 }
1326
1327 .wppm-link {
1328 cursor: pointer !important;
1329 text-decoration: none !important;
1330 }
1331
1332 .wppm-link:hover {
1333 color: #2271b1 !important;
1334 text-decoration: underline !important;
1335 }
1336
1337 #wppm_project_list_container select{
1338 min-height: 30px !important;
1339 max-height: 35px !important;
1340 padding: 0 24px 0 8px !important;
1341 border: 1px solid #ccc !important;
1342 font: 14px "Helvetica Neue",Arial,Helvetica,sans-serif !important;
1343 }
1344
1345 #wppm_task_list_container select{
1346 min-height: 30px !important;
1347 max-height: 35px !important;
1348 padding: 0 24px 0 8px !important;
1349 border: 1px solid #ccc !important;
1350 font: 15px "Helvetica Neue",Arial,Helvetica,sans-serif !important;
1351 }
1352
1353 #wppm_proj_discussion_container{
1354 background-color: #ffffff;
1355 border: 1px solid #eee !important;
1356 }
1357 .wppm-setting-tab-container {
1358 display: flex;
1359 flex-wrap: wrap;
1360 width: 100%;
1361 align-items: center;
1362 margin-bottom: 10px;
1363 background-color:#F0F0F1;
1364 }
1365 .wppm-setting-tab-container button {
1366 padding: 7px 15px;
1367 font-size: 16px;
1368 font-weight: normal;
1369 border: none !important;
1370 color: #6A6A6A;
1371 background-color: transparent;
1372 cursor: pointer;
1373 border-radius: 16px;
1374 margin: 10 0 5px 5px;
1375 }
1376 .wppm-setting-tab-container button.active,
1377 .wppm-setting-tab-container button:hover {
1378 color: #fff;
1379 background-color: #FFA04A;
1380 }
1381 .wppm-input-group {
1382 width: 100%;
1383 display: flex;
1384 flex-direction: column;
1385 padding-bottom: 15px;
1386 box-sizing: border-box;
1387 }
1388 .wppm-input-group .label-container {
1389 display: flex;
1390 align-items: center;
1391 color: #000;
1392 margin-bottom: 2px;
1393 }
1394 .wppm-input-group label {
1395 font-size: 12px;
1396 font-weight: 600;
1397 margin-right: 5px;
1398 }
1399 .wppm-input-group .label-container svg {
1400 width: 12px;
1401 margin-left: 5px;
1402 }
1403 .wppm-input-group input[type="text"],
1404 .wppm-input-group select {
1405 width: 100%;
1406 max-width: 100%;
1407 }
1408 .wppm-input-group .checkbox-group,
1409 .wppm-input-group .radio-group {
1410 width: 100%;
1411 display: flex;
1412 flex-wrap: wrap;
1413 align-items: center;
1414 }
1415 .wppm-input-group .checkbox-group div,
1416 .wppm-input-group .radio-group div {
1417 width: 250px;
1418 display: flex;
1419 flex-wrap: wrap;
1420 align-items: center;
1421 margin: 0 10px 5px 0;
1422 }
1423 .wppm-input-group .checkbox-group div input,
1424 .wppm-input-group .radio-group div input {
1425 margin: 0 5px 0 0 !important;
1426 }
1427 .wppm-input-group .checkbox-group div span,
1428 .wppm-input-group .radio-group div span {
1429 font-size: 12px;
1430 font-weight: 300;
1431 }
1432 .wppm-input-group .required-char {
1433 font-size: 12px;
1434 color: #ff0000;
1435 }
1436 .wppm-input-group .divide-bar {
1437 width: 100%;
1438 display: flex;
1439 flex-wrap: grid;
1440 align-items: center;
1441 }
1442
1443 /* Checkboxes */
1444 #wppm-container .checkbox-container,
1445 .wppm-modal .checkbox-container, #wppm_task_list_container .checkbox-container {
1446 display: flex;
1447 line-height: normal;
1448 }
1449 #wppm-container .checkbox-container input,
1450 .wppm-modal .checkbox-container input, #wppm_task_list_container .checkbox-container input{
1451 padding: 0;
1452 height: initial;
1453 width: initial;
1454 margin-bottom: 0;
1455 display: none;
1456 cursor: pointer;
1457 }
1458 #wppm-container .checkbox-container label,
1459 .wppm-modal .checkbox-container label , #wppm_task_list_container .checkbox-container label{
1460 position: relative;
1461 cursor: pointer;
1462 padding: 0 !important;
1463 font-size: 14px !important;
1464 }
1465 #wppm-container .checkbox-container label:before,
1466 .wppm-modal .checkbox-container label:before , #wppm_task_list_container .checkbox-container label:before{
1467 content:'';
1468 -webkit-appearance: none;
1469 background-color: #fff;
1470 box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), inset 0px -15px 10px -12px rgba(0, 0, 0, 0.05);
1471 display: inline-block;
1472 position: relative;
1473 vertical-align: middle;
1474 cursor: pointer;
1475 margin-left: 5px;
1476 border: 1px solid #8a8a8a;
1477 }
1478 #wppm-container .checkbox-container input:checked + label:after,
1479 .wppm-modal .checkbox-container input:checked + label:after, #wppm_task_list_container .checkbox-container input:checked + label:after{
1480 content: '';
1481 display: block;
1482 position: absolute;
1483 top: 1px;
1484 right: 9px;
1485 width: 6px;
1486 height: 9px;
1487 border: solid #0079bf;
1488 border-width: 0 0 2px 2px;
1489 transform: matrix(-1, -1, -1, 1, 3, 0);
1490 }
1491 #wppm-container .checkbox-container label,
1492 .wppm-modal .checkbox-container label, #wppm_task_list_container .checkbox-container label{
1493 display: flex;
1494 }
1495 #wppm-container .checkbox-container label:before,
1496 .wppm-modal .checkbox-container label:before, #wppm_task_list_container .checkbox-container label:before{
1497 width: 18px !important;
1498 height: 18px !important;
1499 box-sizing: border-box;
1500 padding: 8px;
1501 }
1502 #wppm-container .checkbox-container label:after,
1503 .wppm-modal .checkbox-container label:after, #wppm_task_list_container .checkbox-container label:after {
1504 flex-grow: 1;
1505 }
1506 #wppm-container .checkbox-container p,
1507 .wppm-modal .checkbox-container p, #wppm_task_list_container .checkbox-container p{
1508 margin: 0 !important;
1509 }
1510
1511 .wppm-bulk-actions {
1512 display: flex;
1513 align-items: center;
1514 }
1515 .wppm-bulk-actions select {
1516 min-width: 150px;
1517 max-width: 250px;
1518 margin-left: 5px;
1519 }
1520 .wppm-bulk-actions button {
1521 margin-left: 10px;
1522 display: flex;
1523 align-items: center;
1524 }
1525 .wppm-bulk-actions button svg {
1526 height: 13px;
1527 margin-right: 15px;
1528 }
1529
1530 #wppm-bulk-actions{
1531 left: 0px!important;
1532 }
1533
1534 /* Popover Menu */
1535 .wppm-popover-menu {
1536 padding: 3px !important;
1537 border-radius: 3px !important;
1538 }
1539 .wppm-popover-menu-item {
1540 display: flex;
1541 align-items: center;
1542 padding: 10px;
1543 cursor: pointer;
1544 background-color: #fff;
1545 color: #707070;
1546 margin-left: 10px !important;
1547 }
1548 .wppm-popover-menu-item:hover {
1549 color: #fff;
1550 background-color: #313042 !important;
1551 }
1552 .wppm-popover-menu-item svg {
1553 width: 14px;
1554 margin-left: 10px;
1555 }
1556 .wppm-popover-menu-item span {
1557 font-size: 14px;
1558 }
1559
1560 .wppm-button.secondary {
1561 border: 1px solid #ccc !important;
1562 background-color: #fff !important;
1563 color: #313042 !important;
1564 font: 14px "Helvetica Neue", Arial, Helvetica, sans-serif !important;
1565 }
1566
1567 .wppm-button.small {
1568 font-size: 12px !important;
1569 }
1570
1571 #wppm_task_description, #wppm_add_new_project #wppm_proj_description{
1572 height: 160px !important;
1573 width: 100% !important;
1574 }
1575
1576 /* Form fields */
1577 .wppm-input-group {
1578 width: 100%;
1579 display: flex;
1580 flex-direction: column;
1581 padding-bottom: 15px;
1582 box-sizing: border-box;
1583 }
1584 .wppm-input-group .label-container {
1585 display: flex;
1586 align-items: center;
1587 color: #000;
1588 margin-bottom: 2px;
1589 }
1590 .wppm-input-group label {
1591 font-size: 12px;
1592 font-weight: 600;
1593 margin-left: 5px;
1594 }
1595 .wppm-input-group .label-container svg {
1596 width: 12px;
1597 margin-right: 5px;
1598 }
1599 .wppm-input-group input[type="text"],
1600 .wppm-input-group select {
1601 width: 100%;
1602 max-width: 100%;
1603 }
1604
1605 @media (max-width: 768px) {
1606 .wppm_task_list{
1607 flex-basis: 50% !important;
1608 }
1609 }
1610
1611 #wppmprint_menu{
1612 display: flex;
1613 flex-direction: column;
1614 position: absolute;
1615 background: white;
1616 border: 1px solid #ccc;
1617 z-index: 1000;
1618 margin-left: 155px;
1619 display: none;
1620 }
1621
1622 #wppmprint_menu a {
1623 padding: 8px 12px;
1624 text-decoration: none;
1625 color: #333;
1626 }
1627
1628 #wppmprint_menu a:hover {
1629 background: #f0f0f0;
1630 }
1631
1632 .wppm_checklist_items_container {
1633 list-style: none;
1634 padding-left: 0;
1635 margin-left: 20px;
1636 margin-right: 20px;
1637 }
1638 .wppm_checklist_items_container .wppm_checklist_item {
1639 padding: 6px 10px;
1640 background: #fff;
1641 margin-right: 5px;
1642 margin-bottom: 4px;
1643 margin-left: 5px;
1644 border: 1px solid #ddd;
1645 cursor: grab;
1646 display: flex;
1647 align-items: center;
1648 }
1649 .wppm_checklist_items_container .wppm_chk_items_drag {
1650 margin-right: 10px;
1651 cursor: move;
1652 }
1653 .wppm_subtask_more_users {
1654 display: inline-flex;
1655 flex-shrink: 0;
1656 align-items: center;
1657 justify-content: center;
1658 width: 20px;
1659 height: 20px;
1660 min-width: 20px;
1661 border-radius: 50%;
1662 background: #e2e4e7;
1663 color: #555d66;
1664 font-size: 8px;
1665 line-height: 1;
1666 font-weight: 600;
1667 font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
1668 vertical-align: middle;
1669 margin-left: -12px;
1670 padding: 0;
1671 border: 2px solid #fff;
1672 box-sizing: border-box;
1673 }
1674
1675 /* Add checklist / add checklist item: input + button sized to content, not full-width */
1676 #wppm_checklist_label,
1677 input[name="wppm_checklist_item_label"] {
1678 display: inline-block !important;
1679 width: 240px !important;
1680 max-width: 100%;
1681 margin-right: 8px;
1682 vertical-align: middle;
1683 box-sizing: border-box;
1684 }
1685 #wppm_checklist_btn,
1686 input[name="wppm_checklist_item_label"] + input[type="button"] {
1687 display: inline-block !important;
1688 width: auto !important;
1689 vertical-align: middle;
1690 }
1691
1692 /* Subtasks / checklist - mobile */
1693 @media (max-width: 782px) {
1694 .wppm_checklist_items_container {
1695 margin-left: 0;
1696 margin-right: 0;
1697 }
1698 .wppm_checklist_items_container .wppm_checklist_item {
1699 flex-wrap: wrap;
1700 margin-left: 0;
1701 margin-right: 0;
1702 }
1703 .wppm_checklist_items_container .wppm_checklist_item .col-sm-8,
1704 .wppm_checklist_items_container .wppm_checklist_item .col-sm-4 {
1705 width: 100%;
1706 text-align: left !important;
1707 margin-top: 6px;
1708 }
1709 #wppm_checklist_label,
1710 input[name="wppm_checklist_item_label"] {
1711 width: 100% !important;
1712 margin-right: 0;
1713 margin-bottom: 8px;
1714 }
1715 #wppm_checklist_btn,
1716 input[name="wppm_checklist_item_label"] + input[type="button"] {
1717 width: 100% !important;
1718 }
1719
1720 /* Open Task toolbar: let the icon buttons wrap instead of overflowing */
1721 .wppm_headers.row {
1722 display: flex;
1723 flex-wrap: wrap;
1724 align-items: center;
1725 row-gap: 8px;
1726 }
1727 .wppm_headers .col-sm-8 {
1728 display: flex;
1729 flex-wrap: wrap;
1730 align-items: center;
1731 gap: 6px;
1732 width: 100%;
1733 }
1734
1735 /* Checklist header row (title + delete link) - stack like subtask/checklist items */
1736 .wppm_task_checklist_container .row .col-sm-8,
1737 .wppm_task_checklist_container .row .col-sm-4 {
1738 width: 100%;
1739 text-align: left !important;
1740 margin-top: 4px;
1741 }
1742 .wppm_task_subtask_container,
1743 .wppm_task_checklist_container,
1744 .wppm_thread,
1745 .wppm_proj_thread {
1746 margin: 8px;
1747 }
1748
1749 /* Comment thread: avatar above the comment body instead of a cramped side-by-side table */
1750 .wppm_thread,
1751 .wppm_proj_thread {
1752 display: block;
1753 }
1754 .wppm_thread_avatar,
1755 .wppm_thread_body {
1756 display: block;
1757 width: 100%;
1758 padding-left: 0;
1759 }
1760 .wppm_thread_avatar {
1761 padding-bottom: 8px;
1762 }
1763 }
1764
1765 /* Main container */
1766 /* GRID CONTAINER */
1767 .wppm_bootstrap .pricing-flex {
1768 display: grid !important;
1769 grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
1770 gap: 20px;
1771 align-items: stretch;
1772 }
1773
1774 /* CARD */
1775 .wppm_bootstrap .pricing-widget {
1776 display: flex;
1777 flex-direction: column;
1778
1779 background: #fff;
1780 border: 1px solid #e5e5e5;
1781 border-radius: 6px;
1782 padding: 15px;
1783 box-sizing: border-box;
1784 }
1785
1786 /* BODY GROWS */
1787 .wppm_bootstrap .pricing-widget .pbody {
1788 flex: 1;
1789 }
1790
1791 /* PRO ADDON CARD (Addons page) - card stays fully visible, just a small corner badge */
1792 .wppm_bootstrap .pricing-widget {
1793 position: relative;
1794 }
1795 .wppm_bootstrap .wppm-pro-badge-corner-lg {
1796 position: absolute;
1797 top: 10px;
1798 right: 10px;
1799 z-index: 5;
1800 display: flex;
1801 align-items: center;
1802 justify-content: center;
1803 width: 30px;
1804 height: 30px;
1805 background: #fff;
1806 border-radius: 50%;
1807 box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
1808 line-height: 0;
1809 }
1810
1811 /* PRO FEATURE BADGE ICON (sidebar menu, settings pills, toolbar buttons) */
1812 .wppm-pro-badge {
1813 display: inline-flex;
1814 align-items: center;
1815 margin-left: 4px;
1816 line-height: 0;
1817 vertical-align: middle;
1818 }
1819 .wppm-pro-badge svg {
1820 display: block;
1821 }
1822
1823 /* Locked settings pill */
1824 .wppm_bootstrap .wppm_setting_pills li.wppm-locked-pill a {
1825 display: flex;
1826 align-items: center;
1827 opacity: 0.75;
1828 }
1829 .wppm_bootstrap .wppm_setting_pills li.wppm-locked-pill .wppm-pro-pill-lock {
1830 display: inline-flex;
1831 align-items: center;
1832 margin-right: 4px;
1833 line-height: 0;
1834 vertical-align: middle;
1835 }
1836
1837 /* Locked project toolbar button */
1838 .wppm_bootstrap .wppm-locked-toolbar-btn {
1839 opacity: 0.7;
1840 }
1841 .wppm_bootstrap .wppm-locked-toolbar-btn:hover {
1842 opacity: 1;
1843 }
1844 .wppm_bootstrap .wppm-pro-icon-wrap {
1845 position: relative;
1846 display: inline-block;
1847 line-height: 0;
1848 }
1849 .wppm_bootstrap .wppm-pro-icon-wrap img {
1850 width: 16px;
1851 height: 16px;
1852 vertical-align: middle;
1853 }
1854 .wppm_bootstrap .wppm-pro-badge-corner {
1855 position: absolute;
1856 top: -5px;
1857 right: -6px;
1858 display: flex;
1859 align-items: center;
1860 justify-content: center;
1861 width: 14px;
1862 height: 14px;
1863 background: #fff;
1864 border-radius: 50%;
1865 box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08);
1866 line-height: 0;
1867 }
1868
1869 /* Pro addon teaser (sidebar page + settings inline upsell) */
1870 .wppm-pro-teaser {
1871 max-width: 520px;
1872 margin: 30px auto;
1873 padding: 30px;
1874 text-align: center;
1875 background: #fff;
1876 border: 1px solid #e5e5e5;
1877 border-radius: 6px;
1878 font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
1879 }
1880 .wppm-pro-teaser-inline {
1881 margin: 0;
1882 }
1883 .wppm-pro-teaser-icon {
1884 position: relative;
1885 display: inline-block;
1886 margin-bottom: 15px;
1887 }
1888 .wppm-pro-teaser-icon img {
1889 width: 48px;
1890 height: 48px;
1891 opacity: 0.5;
1892 }
1893 .wppm-pro-teaser-icon .wppm-pro-teaser-lock {
1894 position: absolute;
1895 right: -6px;
1896 bottom: -4px;
1897 display: flex;
1898 align-items: center;
1899 justify-content: center;
1900 width: 22px;
1901 height: 22px;
1902 background: #f5a623;
1903 border-radius: 50%;
1904 line-height: 0;
1905 }
1906 .wppm-pro-teaser h2 {
1907 margin: 0 0 10px;
1908 font-family: "OpenSans-Light", "Helvetica Neue", Helvetica, Arial, sans-serif;
1909 }
1910 .wppm-pro-teaser p {
1911 color: #555;
1912 margin-bottom: 20px;
1913 }
1914 .wppm-pro-teaser-actions .btn {
1915 margin: 0 5px;
1916 }
1917
1918 /* FOOTER */
1919 /* .wppm_bootstrap .pricing-widget .pfooter {
1920 display: flex;
1921 justify-content: space-between;
1922 gap: 10px;
1923 margin-top: 15px;
1924 }
1925
1926 /* MOBILE FOOTER STACK */
1927 @media (max-width: 480px) {
1928 .wppm_bootstrap .pricing-widget .pfooter {
1929 flex-direction: column;
1930 }
1931 } */
1932
1933 .wppm-dashboard{
1934 padding:20px;
1935 margin-top:20px;
1936 font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
1937 }
1938 .wppm-dashboard-top{
1939 display:grid;
1940 grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
1941 gap:20px;
1942 margin-bottom:20px;
1943 }
1944
1945 .wppm-small-widget{
1946 background:#ffffff;
1947 border-radius:10px;
1948 padding:20px;
1949 box-shadow:0 2px 8px rgba(0,0,0,0.05);
1950 transition:all 0.2s ease;
1951 display:flex;
1952 align-items:center;
1953 gap:15px;
1954 }
1955
1956 .wppm-small-widget:hover{
1957 transform:translateY(-3px);
1958 box-shadow:0 6px 16px rgba(0,0,0,0.08);
1959 }
1960
1961 .wppm-small-widget h3{
1962 font-size:14px;
1963 color:#666;
1964 margin-bottom:10px;
1965 }
1966
1967 .wppm-number{
1968 font-size:28px;
1969 font-weight:600;
1970 color:#222;
1971 }
1972 .wppm-small-widget.overdue{
1973 border-left:4px solid #e74c3c;
1974 }
1975
1976 .wppm-divider{
1977 height:1px;
1978 background:#eee;
1979 margin:20px 0;
1980 }
1981
1982 .wppm-row{
1983 display:grid;
1984 grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
1985 gap:20px;
1986 margin-bottom:20px;
1987 }
1988
1989 .wppm-widget{
1990 background:#fff;
1991 border-radius:10px;
1992 padding:20px;
1993 box-shadow:0 2px 8px rgba(0,0,0,0.05);
1994 transition:all 0.2s ease;
1995 }
1996 .wppm-widget h2{
1997 font-size:16px;
1998 margin-bottom:15px;
1999 font-weight:600;
2000 color:#222;
2001 }
2002
2003 #tbl_my_tasks,#tbl_active_projects,#tbl_upcoming_tasks, #tbl_todays_tasks {
2004 border-collapse: collapse !important;
2005 width: 100% !important;
2006 }
2007
2008 #tbl_my_tasks th,
2009 #tbl_my_tasks td,
2010 #tbl_todays_tasks th,
2011 #tbl_todays_tasks td,
2012 #tbl_active_projects th,
2013 #tbl_active_projects td,
2014 #tbl_upcoming_tasks th,
2015 #tbl_upcoming_tasks td {
2016 border: 1px solid #ddd !important;
2017 padding: 8px !important;
2018 }
2019
2020 #tbl_my_tasks th, #tbl_active_projects th, #tbl_upcoming_tasks th, #tbl_todays_tasks th{
2021 background-color: #f5f5f5 !important;
2022 text-align: left !important;
2023 }
2024
2025 #tbl_my_tasks tr:hover, #tbl_active_projects tr:hover, #tbl_upcoming_tasks tr:hover, #tbl_todays_tasks tr:hover{
2026 background-color: #f9f9f9 !important;
2027 cursor: pointer;
2028 }
2029 .wppm-widget table td{
2030 padding:10px;
2031 border-top:1px solid #f2f2f2;
2032 font-size:14px;
2033 }
2034
2035 .wppm-widget table th{
2036 background:#f8fafc;
2037 color:#777;
2038 font-weight:600;
2039 padding:10px;
2040 border-bottom:1px solid #e5e7eb;
2041 }
2042
2043 canvas{
2044 max-height:250px !important;
2045 }
2046
2047 .wppm-widget:hover{
2048 box-shadow:0 8px 20px rgba(0,0,0,0.07);
2049 }
2050
2051 .wppm-widget-icon{
2052 font-size:28px;
2053 background:#f5f7fb;
2054 padding:12px;
2055 border-radius:8px;
2056 }
2057 .wppm-widget h2{
2058 display:flex;
2059 justify-content:space-between;
2060 align-items:center;
2061 }
2062
2063 .wppm-view-all{
2064 font-size:13px;
2065 color:#4c7cf3;
2066 text-decoration:none;
2067 }
2068
2069 .wppm-view-all:hover{
2070 text-decoration:underline;
2071 }
2072
2073 .wppm-workload-list {
2074 list-style: none;
2075 padding: 0;
2076 margin: 0;
2077 }
2078
2079 .wppm-workload-list li {
2080 display: flex;
2081 align-items: center;
2082 gap:10px;
2083 margin-bottom: 10px;
2084 }
2085
2086 .wppm-workload-bar {
2087 flex:1;
2088 height:8px;
2089 background:#eee;
2090 border-radius:5px;
2091 overflow:hidden;
2092 }
2093
2094 .wppm-workload-bar div {
2095 height: 100%;
2096 background: #3498db;
2097 border-radius: 5px;
2098 }
2099
2100 .dashboard-progress-wrapper{
2101 display:flex;
2102 align-items:center;
2103 gap:8px;
2104 }
2105
2106 .dashboard-progress-bar{
2107 flex:1;
2108 height:8px;
2109 background:#e5e7eb;
2110 border-radius:5px;
2111 overflow:hidden;
2112 }
2113
2114 .dashboard-progress{
2115 height:100%;
2116 border-radius:5px;
2117 }
2118
2119 .dashboard-progress-text{
2120 font-size:12px;
2121 font-weight:600;
2122 }
2123 .wppm-priority-dot{
2124 display:inline-block;
2125 width:10px;
2126 height:10px;
2127 border-radius:50%;
2128 margin-right:6px;
2129 vertical-align:middle;
2130 }
2131 /* Wrapper (relative parent) */
2132 .tb-filter-bar {
2133 position: relative;
2134 }
2135
2136 /* Advanced panel (FLOAT) */
2137 #tb-advanced-panel {
2138 position: absolute;
2139 top: 110%; /* below button */
2140 right: 0;
2141 width: 320px;
2142
2143 background: #ffffff;
2144 border: 1px solid #e2e8f0;
2145 border-radius: 10px;
2146 box-shadow: 0 10px 25px rgba(0,0,0,0.1);
2147
2148 padding: 12px;
2149 z-index: 999999999;
2150
2151 /* hidden state */
2152 opacity: 0;
2153 transform: translateY(-10px);
2154 pointer-events: none;
2155
2156 transition: all 0.25s ease;
2157 }
2158
2159 /* OPEN STATE */
2160 #tb-advanced-panel.tb-open {
2161 opacity: 1;
2162 transform: translateY(0);
2163 pointer-events: auto;
2164 }
2165
2166 /* Rows */
2167 .tb-row {
2168 margin-bottom: 10px;
2169 }
2170
2171 .tb-row label {
2172 font-size: 12px;
2173 font-weight: 600;
2174 display: block;
2175 margin-bottom: 4px;
2176 }
2177
2178 /* Inputs */
2179 #tb-advanced-panel input,
2180 #tb-advanced-panel select {
2181 width: 100%!important;
2182 padding: 6px 8px!important;
2183 border: 1px solid #cbd5e1;
2184 border-radius: 6px;
2185 }
2186 /* Wrapper */
2187 .tb-filter-bar {
2188 position: relative;
2189 display: flex;
2190 align-items: center;
2191 gap: 10px;
2192 overflow: visible!important;
2193 }
2194
2195 /* Button */
2196 .tb-btn {
2197 padding: 2px 10px;
2198 border-radius: 6px;
2199 border: 1px solid #cbd5e1;
2200 background: #fff;
2201 cursor: pointer;
2202 }
2203
2204 /* ================= POPOVER ================= */
2205 .tb-popover {
2206 position: absolute;
2207 top: 120%;
2208 right: 0;
2209 width: 320px;
2210
2211 background: #fff;
2212 border: 1px solid #e2e8f0;
2213 border-radius: 10px;
2214 box-shadow: 0 15px 35px rgba(0,0,0,0.12);
2215
2216 padding: 12px;
2217 z-index: 999999999;
2218
2219 opacity: 0;
2220 transform: translateY(-10px);
2221 pointer-events: none;
2222 transition: all 0.25s ease;
2223 }
2224
2225 .tb-popover.tb-open {
2226 opacity: 1;
2227 transform: translateY(0);
2228 pointer-events: auto;
2229 }
2230
2231 /* Arrow */
2232 .tb-arrow {
2233 position: absolute;
2234 top: -6px;
2235 right: 20px;
2236 width: 12px;
2237 height: 12px;
2238 background: white;
2239 border-left: 1px solid #e2e8f0;
2240 border-top: 1px solid #e2e8f0;
2241 transform: rotate(45deg);
2242 }
2243
2244 /* Sections */
2245 .tb-section {
2246 margin-bottom: 12px;
2247 }
2248
2249 .tb-section h4 {
2250 font-size: 12px;
2251 margin-bottom: 6px;
2252 color: #64748b;
2253 }
2254
2255 /* Inputs */
2256 .tb-popover input,
2257 .tb-popover select {
2258 width: 100%;
2259 margin-bottom: 6px;
2260 padding: 6px;
2261 border: 1px solid #cbd5e1;
2262 border-radius: 6px;
2263 }
2264
2265 /* ================= CHIPS ================= */
2266 /* .tb-chips {
2267 display: flex;
2268 gap: 6px;
2269 flex-wrap: wrap;
2270 } */
2271
2272 /* .tb-chip {
2273 background: #eef2ff;
2274 color: #3730a3;
2275 padding: 4px 8px;
2276 border-radius: 20px;
2277 font-size: 12px;
2278 cursor: pointer;
2279 } */
2280 /* =========================
2281 MOBILE FILTER PANEL
2282 ========================= */
2283 /* @media (max-width: 768px) {
2284
2285 #tb-advanced-panel {
2286 position: fixed;
2287 left: 0;
2288 right: 0;
2289 bottom: 0;
2290 top: auto;
2291
2292 width: 100%;
2293 max-height: 80vh;
2294
2295 border-radius: 16px 16px 0 0;
2296 padding: 16px;
2297
2298 transform: translateY(100%);
2299 opacity: 1;
2300 pointer-events: auto;
2301
2302 overflow-y: auto;
2303 }
2304
2305 #tb-advanced-panel.tb-open {
2306 transform: translateY(0);
2307 }
2308
2309 .tb-arrow {
2310 display: none;
2311 }
2312
2313 /* backdrop */
2314 /* #tb-backdrop {
2315 position: fixed;
2316 top: 0;
2317 left: 0;
2318 right: 0;
2319 bottom: 0;
2320 background: rgba(0,0,0,0.4);
2321 z-index: 9998;
2322 display: none;
2323 }
2324
2325 #tb-backdrop.active {
2326 display: block;
2327 }
2328
2329 } */
2330 /* =========================
2331 MOBILE FILTER PANEL
2332 ========================= */
2333 @media (max-width: 768px) {
2334
2335 #tb-advanced-panel,
2336 #tb-advanced-panel.tb-popover {
2337 position: fixed !important;
2338
2339 top: 0 !important;
2340 right: 0 !important;
2341 bottom: 0 !important;
2342 left: 0 !important;
2343
2344 width: 100vw !important;
2345 height: 100vh !important;
2346 max-width: none !important;
2347 max-height: none !important;
2348
2349 margin: 0 !important;
2350 padding: 16px !important;
2351
2352 box-sizing: border-box !important;
2353
2354 background: #fff !important;
2355
2356 border: none !important;
2357 border-radius: 0 !important;
2358
2359 box-shadow: none !important;
2360
2361 overflow-y: auto !important;
2362 -webkit-overflow-scrolling: touch;
2363
2364 z-index: 999999999 !important;
2365
2366 /* CLOSED */
2367 opacity: 0 !important;
2368 visibility: hidden !important;
2369 transform: none !important;
2370 pointer-events: none !important;
2371
2372 transition: opacity 0.25s ease, visibility 0.25s ease !important;
2373 }
2374
2375 @media (max-width: 768px) {
2376
2377 #tb-active-filters,
2378 .tb-chips {
2379 display: flex !important;
2380 flex-direction: column !important;
2381 align-items: stretch !important;
2382 gap: 8px !important;
2383 width: 100% !important;
2384 }
2385
2386 #tb-active-filters .tb-chip,
2387 .tb-chips .tb-chip {
2388 display: inline-flex !important;
2389 align-items: center;
2390 justify-content: space-between;
2391
2392 width: 100% !important;
2393 box-sizing: border-box;
2394 }
2395 }
2396
2397 /* OPEN */
2398 #tb-advanced-panel.tb-open {
2399 opacity: 1 !important;
2400 visibility: visible !important;
2401 transform: none !important;
2402 pointer-events: auto !important;
2403 }
2404
2405 /* Hide arrow on mobile */
2406 #tb-advanced-panel .tb-arrow {
2407 display: none !important;
2408 }
2409
2410 /* Mobile header */
2411 .tb-mobile-header {
2412 display: flex !important;
2413
2414 position: sticky;
2415 top: 0;
2416
2417 background: #fff;
2418 z-index: 2;
2419
2420 padding: 5px 0 15px;
2421 margin-bottom: 15px;
2422
2423 font-size: 18px;
2424 }
2425
2426 #tb-close-filters {
2427 border: 0;
2428 background: transparent;
2429 font-size: 24px;
2430 cursor: pointer;
2431 }
2432
2433 /* Backdrop */
2434 #tb-backdrop {
2435 position: fixed !important;
2436
2437 top: 0 !important;
2438 right: 0 !important;
2439 bottom: 0 !important;
2440 left: 0 !important;
2441
2442 width: 100vw !important;
2443 height: 100vh !important;
2444
2445 background: rgba(0, 0, 0, 0.4);
2446
2447 z-index: 999998 !important;
2448
2449 display: none;
2450 }
2451
2452 #tb-backdrop.active {
2453 display: block !important;
2454 }
2455
2456 }
2457
2458 .tb-mobile-header {
2459 display: none;
2460 justify-content: space-between;
2461 align-items: center;
2462 font-weight: 600;
2463 margin-bottom: 10px;
2464 }
2465
2466 @media (max-width:768px){
2467 .tb-mobile-header {
2468 display: flex;
2469 }
2470 }
2471 .tb-section {
2472 display: flex;
2473 flex-direction: column;
2474 gap: 8px;
2475 }
2476 .tb-popover {
2477 width: 300px;
2478 }
2479 .tb-chip {
2480 background: #eef3ff;
2481 padding: 5px 10px;
2482 border-radius: 20px;
2483 margin: 18px 5px 10px 0px;
2484 display: inline-block;
2485 cursor: pointer;
2486 color: #3730a3;
2487 font-size: 12px;
2488 gap: 6px;
2489 }
2490
2491 .tb-remove {
2492 margin-left: 6px;
2493 color: red;
2494 font-weight: bold;
2495 }
2496
2497 .tb-chip-close {
2498 margin-left: 6px;
2499 cursor: pointer;
2500 }
2501
2502 @media (max-width: 767px) {
2503
2504 .tb-filter-bar {
2505 display: flex;
2506 align-items: center;
2507 justify-content: flex-end;
2508 flex-wrap: wrap;
2509 gap: 8px;
2510 width: 100%;
2511 overflow: visible!important;
2512 }
2513
2514 #tb-advanced-toggle {
2515 display: inline-flex !important;
2516 align-items: center;
2517 justify-content: center;
2518
2519 /* float: left; */
2520 position: relative;
2521 margin-top : 20px;
2522
2523 height: 34px;
2524 min-width: 34px;
2525 padding: 0 10px;
2526
2527 border: 1px solid #d5d9dd;
2528 border-radius: 5px;
2529 background: #fff;
2530
2531 color: #555;
2532 font: 13px "Helvetica Neue", Helvetica, Arial, sans-serif;
2533
2534 cursor: pointer;
2535 box-sizing: border-box;
2536 white-space: nowrap;
2537 }
2538
2539 #tb-advanced-toggle:hover {
2540 background: #f5f5f5;
2541 }
2542
2543 #tb-advanced-panel input,
2544 #tb-advanced-panel select {
2545 width: 75%!important;
2546 padding: 6px 8px!important;
2547 border: 1px solid #cbd5e1;
2548 border-radius: 6px;
2549 }
2550
2551 .wppm-filter-actions span {
2552 cursor: pointer;
2553 font-size: 16px;
2554 text-decoration: underline;
2555 /* margin-bottom: 7px!important; */
2556 font: 14px "Helvetica Neue",Arial,Helvetica,sans-serif !important;
2557 color: #858c96;
2558 margin-bottom: 20px !important;
2559 margin-left: 5px;
2560 }
2561 }
2562
2563 .wppm-mention {
2564 display:inline;
2565 background: #e7f3ff;
2566 color: #0073aa;
2567 font-weight: bold;
2568 padding: 2px 6px;
2569 border-radius: 4px;
2570 font-weight: 500;
2571 margin: 0;
2572 }
2573
2574 .wppm-mention:hover {
2575 background: #d0e7ff;
2576 }
2577
2578 .wppm-mention-me{
2579 background:#ffcc00 !important;
2580 color:#000 !important;
2581 font-weight:700;
2582 }
2583
2584 #wppm_mention_list {
2585 position: absolute !important;
2586 min-width: 220px;
2587 max-width: 300px;
2588 max-height: 240px;
2589 overflow-y: auto;
2590 background: #fff;
2591 border: 1px solid #dcdcde;
2592 border-radius: 8px;
2593 box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
2594 padding: 6px 0;
2595 margin-top: 4px;
2596 z-index: 99999999999 !important;
2597 animation: wppmMentionFade .15s ease-in-out;
2598 }
2599
2600 #wppm_mention_list .mention-item:hover,
2601 #wppm_mention_list .mention-item.active {
2602 background: linear-gradient(135deg, #7c3aed, #a855f7);
2603 color: #fff;
2604 }
2605
2606 #wppm_mention_list .mention-item {
2607 padding: 2px 12px;
2608 cursor: pointer;
2609 font-size: 14px;
2610 color: #333;
2611 border-bottom: 1px solid #eee;
2612 }
2613
2614 #wppm_mention_list .mention-item:last-child {
2615 border-bottom: none;
2616 }
2617
2618 /* Floating Button */
2619 #wppm_notification_bell{
2620 position:fixed;
2621 right:24px;
2622 bottom:24px;
2623 width:56px;
2624 height:56px;
2625 border-radius:16px;
2626 background:#ffffff;
2627 border:1px solid #e5e7eb;
2628 box-shadow:
2629 0 8px 24px rgba(15,23,42,.12),
2630 0 2px 8px rgba(15,23,42,.08);
2631 display:flex;
2632 justify-content:center;
2633 align-items:center;
2634 cursor:pointer;
2635 z-index:999999999!important;
2636 transition:all .25s ease;
2637 }
2638
2639 #wppm_notification_bell:hover{
2640 transform:translateY(-3px);
2641 box-shadow:
2642 0 15px 35px rgba(15,23,42,.18),
2643 0 5px 15px rgba(15,23,42,.12);
2644 }
2645
2646 #wppm_notification_bell .dashicons{
2647 color:#6b7280;
2648 font-size:22px;
2649 transition:.2s;
2650 }
2651
2652 #wppm_notification_bell:hover .dashicons{
2653 color:#7c3aed;
2654 }
2655
2656 /* Notification Badge */
2657 .wppm-badge{
2658 position:absolute;
2659 top:-6px;
2660 right:-6px;
2661 min-width:22px;
2662 height:22px;
2663 border-radius:50px;
2664 background:#ff3366;
2665 color:#fff;
2666 display:flex;
2667 align-items:center;
2668 justify-content:center;
2669 font-size:11px;
2670 font-weight:700;
2671 border:2px solid #fff;
2672 }
2673
2674 /* Popup */
2675 #wppm-notification-container{
2676 position:fixed;
2677 right:24px;
2678 bottom:90px;
2679 width:360px;
2680 background:#fff;
2681 border-radius:18px;
2682 box-shadow:0 20px 60px rgba(0,0,0,.15);
2683 overflow:hidden;
2684 display:none;
2685 z-index:999999999!important;
2686 }
2687
2688 /* Item */
2689 .wppm-notification-item, .wppm-no-notification{
2690 padding:16px 18px;
2691 border-bottom:1px solid #f3f4f6;
2692 cursor:pointer;
2693 transition:.2s;
2694 }
2695
2696 .wppm-notification-item:hover{
2697 background:#f9fafb;
2698 }
2699
2700 .wppm-notification-message{
2701 font-size:14px;
2702 font-weight:600;
2703 color:#111827;
2704 margin-bottom:4px;
2705 }
2706
2707 .wppm-notification-item small{
2708 color:#9ca3af;
2709 }
2710
2711 .wppm-pro-btn{
2712 display:inline-flex;
2713 align-items:center;
2714 gap:6px;
2715 text-decoration:none;
2716 }
2717 /* .wppm-pro-btn .dashicons{
2718 font-size:16px;
2719 width:16px;
2720 height:16px;
2721 line-height:16px;
2722 } */
2723 .wppm-pro-btn .wppm-btn-text{
2724 display:inline-block;
2725 }
2726
2727 .tb-pro-feature-card{
2728 position:relative;
2729 overflow:hidden;
2730 border-radius:8px;
2731 }
2732
2733 .tb-pro-content{
2734 filter:blur(4px);
2735 pointer-events:none;
2736 opacity:.7;
2737 }
2738
2739 .tb-pro-overlay{
2740 position:absolute;
2741 inset:0;
2742 display:flex;
2743 flex-direction:column;
2744 justify-content:center;
2745 align-items:center;
2746 background:rgba(255,255,255,.5);
2747 z-index:10;
2748 }
2749
2750 .tb-pro-badge{
2751 background:#ff9800;
2752 color:#fff;
2753 padding:6px 12px;
2754 border-radius:4px;
2755 margin-bottom:10px;
2756 font-weight:600;
2757 }
2758
2759 #wppm-archive-project {
2760 display: inline-flex;
2761 align-items: center;
2762 gap: 6px;
2763 }
2764
2765 #wppm-archive-project svg {
2766 flex-shrink: 0;
2767 }
2768
2769 .wppm_create_project_btn {
2770 display: inline-flex;
2771 align-items: center;
2772 gap: 6px;
2773 padding: 8px 12px;
2774 border-radius: 4px;
2775 text-decoration: none;
2776 cursor: pointer;
2777 }
2778
2779 .wppm_create_project_btn svg {
2780 flex-shrink: 0;
2781 }