PluginProbe
SupportCandy – AI Customer Support Ticket System & Live Chatbot Agent / 3.4.6
SupportCandy – AI Customer Support Ticket System & Live Chatbot Agent v3.4.6
3.5.3 3.5.2 3.5.1 3.4.9 3.5.0 3.4.8 3.4.7 trunk 2.3.1 3.3.6 3.3.7 3.3.8 3.3.9 3.4.0 3.4.1 3.4.2 3.4.3 3.4.4 3.4.5 3.4.6
supportcandy / framework / style.css

style.css in SupportCandy – AI Customer Support Ticket System & Live Chatbot Agent 3.4.6, at framework/style.css

2,270 lines 42.7 KB
No matching file
Up and down to move Enter to open Esc to close
Raw Download Zip
1 .wpsc-xs-1,
2 .wpsc-sm-1,
3 .wpsc-md-1,
4 .wpsc-lg-1,
5 .wpsc-xs-2,
6 .wpsc-sm-2,
7 .wpsc-md-2,
8 .wpsc-lg-2,
9 .wpsc-xs-3,
10 .wpsc-sm-3,
11 .wpsc-md-3,
12 .wpsc-lg-3,
13 .wpsc-xs-4,
14 .wpsc-sm-4,
15 .wpsc-md-4,
16 .wpsc-lg-4,
17 .wpsc-xs-5,
18 .wpsc-sm-5,
19 .wpsc-md-5,
20 .wpsc-lg-5,
21 .wpsc-xs-6,
22 .wpsc-sm-6,
23 .wpsc-md-6,
24 .wpsc-lg-6,
25 .wpsc-xs-7,
26 .wpsc-sm-7,
27 .wpsc-md-7,
28 .wpsc-lg-7,
29 .wpsc-xs-8,
30 .wpsc-sm-8,
31 .wpsc-md-8,
32 .wpsc-lg-8,
33 .wpsc-xs-9,
34 .wpsc-sm-9,
35 .wpsc-md-9,
36 .wpsc-lg-9,
37 .wpsc-xs-10,
38 .wpsc-sm-10,
39 .wpsc-md-10,
40 .wpsc-lg-10,
41 .wpsc-xs-11,
42 .wpsc-sm-11,
43 .wpsc-md-11,
44 .wpsc-lg-11,
45 .wpsc-xs-12,
46 .wpsc-sm-12,
47 .wpsc-md-12,
48 .wpsc-lg-12 {
49 float: left;
50 position: relative;
51 padding: 0 15px 15px;
52 box-sizing: border-box;
53 }
54
55 #wpsc-container {
56 display: flex;
57 flex-direction: column;
58 width: 100%;
59 background-color: transparent;
60 box-sizing: border-box;
61 font-size: 14px !important;
62 }
63 .wpsc-modal {
64 font-size: 14px !important;
65 }
66 .select2-container {
67 font-size: 14px !important;
68 }
69
70 #wpsc-container input[type="text"]:focus,
71 #wpsc-container input[type="text"],
72 #wpsc-container input[type="password"]:focus,
73 #wpsc-container input[type="password"],
74 .wpsc-modal input[type="text"]:focus,
75 .wpsc-modal input[type="text"],
76 .wpsc-modal input[type="password"]:focus,
77 .wpsc-modal input[type="password"],
78 #wpsc-container select,
79 #wpsc-container select:focus,
80 .wpsc-modal select,
81 .wpsc-modal select:focus,
82 #wpsc-container textarea,
83 #wpsc-container textarea:focus,
84 .wpsc-modal textarea,
85 .wpsc-modal textarea:focus,
86 .select2-selection:focus,
87 .select2-results__options li:focus,
88 input[type="text"].select2-search__field:focus {
89 outline: none !important;
90 outline-width: 0 !important;
91 box-shadow: none;
92 -moz-box-shadow: none;
93 -webkit-box-shadow: none;
94 border-radius: 5px !important;
95 }
96
97 #wpsc-container input[type="text"].select2-search__field,
98 #wpsc-container input[type="text"]:focus.select2-search__field,
99 .wpsc-modal input[type="text"].select2-search__field,
100 .wpsc-modal input[type="text"]:focus.select2-search__field,
101 #wpsc-container input[type="text"].wpsc-search-input,
102 #wpsc-container input[type="text"]:focus.wpsc-search-input {
103 border: none !important;
104 }
105
106 .select2-search__field {
107 padding: 0 !important;
108 }
109
110 #wpsc-container form,
111 .wpsc-modal form {
112 width: 100%;
113 }
114 .wpsc-row {
115 float: left;
116 position: relative;
117 width: 100%;
118 box-sizing: border-box;
119 }
120
121 .wpsc-tag {
122 display: inline-flex;
123 justify-content: center;
124 align-items: center;
125 padding: 2px 10px;
126 border-radius: 5px;
127 font-size: 10px;
128 font-weight: normal;
129 width: fit-content;
130 margin: 2px 0 2px 0;
131 }
132
133 /* Header */
134 .wpsc-header {
135 float: left;
136 display: flex;
137 align-items: center;
138 width: 100%;
139 padding: 10px 15px;
140 box-sizing: border-box;
141 }
142 .wpsc-tickets-nav,
143 .wpsc-header-nav {
144 display: flex;
145 align-items: center;
146 cursor: pointer;
147 margin-right: 15px;
148 opacity: 0.7;
149 }
150 .wpsc-tickets-nav.active,
151 .wpsc-tickets-nav:hover,
152 .wpsc-header-nav.active,
153 .wpsc-header-nav:hover {
154 opacity: 1;
155 }
156 .wpsc-tickets-nav svg,
157 .wpsc-header-nav svg,
158 .wpsc-humbargar-title svg {
159 height: 16px;
160 margin-right: 5px;
161 overflow: visible;
162 }
163 .wpsc-tickets-nav label,
164 .wpsc-header-nav label,
165 .wpsc-humbargar-title label {
166 font-size: 16px;
167 font-weight: 600;
168 cursor: pointer;
169 }
170 .wpsc-header .log-out {
171 margin-right: 0;
172 margin-left: auto;
173 }
174 .wpsc-humbargar {
175 display: flex;
176 align-items: center;
177 color: #000;
178 }
179 .wpsc-humbargar-title {
180 display: flex;
181 align-items: center;
182 flex-grow: 1;
183 color: #000;
184 }
185 .wpsc-humbargar svg {
186 width: 22px;
187 }
188 .wpsc-humbargar-overlay,
189 .wpsc-modal .overlay {
190 position: fixed;
191 width: 100%;
192 height: 100%;
193 top: 0;
194 left: 0;
195 background-color: #000;
196 opacity: 0.7;
197 cursor: pointer;
198 }
199 .wpsc-humbargar-menu {
200 position: fixed;
201 width: 250px;
202 height: 100%;
203 box-sizing: border-box;
204 top: 0;
205 right: 0;
206 background-color: #fff;
207 overflow: auto;
208 }
209 .wpsc-humbargar-menu .wpsc-merge-box-inner {
210 padding: 15px 15px 0;
211 }
212 .wpsc-humbargar-close {
213 display: flex;
214 width: 100%;
215 align-items: center;
216 color: #000;
217 cursor: pointer;
218 margin-bottom: 20px;
219 }
220 .wpsc-humbargar-close svg {
221 width: 16px;
222 }
223 .wpsc-humbargar-menu-item,
224 .wpsc-setting-nav {
225 width: 100%;
226 display: flex;
227 align-items: center;
228 padding: 10px;
229 box-sizing: border-box;
230 border: none;
231 border-radius: 5px;
232 background-color: #fff;
233 color: #707070;
234 cursor: pointer;
235 margin-bottom: 5px;
236 }
237 .wpsc-humbargar-menu-item:hover,
238 .wpsc-humbargar-menu-item.active,
239 .wpsc-setting-nav:hover,
240 .wpsc-setting-nav.active {
241 color: #fff;
242 }
243 .wpsc-humbargar-menu-item svg,
244 .wpsc-setting-nav svg {
245 width: 18px;
246 margin-right: 10px;
247 min-width: 18px;
248 }
249 .wpsc-humbargar-menu-item label .wpsc-setting-nav label {
250 font-size: 16px;
251 font-weight: normal;
252 }
253
254 /* Body */
255 .wpsc-body {
256 float: left;
257 display: flex;
258 flex-wrap: wrap;
259 width: 100%;
260 padding-top: 15px;
261 box-sizing: border-box;
262 }
263
264 /* Loading div */
265 .wpsc-loader {
266 display: flex;
267 align-items: center;
268 justify-content: center;
269 width: 100%;
270 height: 100px;
271 }
272 .wpsc-loader img {
273 width: 40px;
274 }
275 .wpsc-inline-loader {
276 width: 18px;
277 }
278
279 /* Filters */
280 .wpsc-filter {
281 float: left;
282 display: flex;
283 flex-wrap: wrap;
284 align-items: center;
285 width: 100%;
286 box-sizing: border-box;
287 margin: 0 15px;
288 }
289 .wpsc-search {
290 display: flex;
291 align-items: center;
292 flex-grow: 1;
293 color: #dcdcdc;
294 }
295 .wpsc-search .search-field {
296 width: 300px;
297 display: flex;
298 padding: 5px 10px;
299 background-color: #fff;
300 border-radius: 5px;
301 align-items: center;
302 margin-bottom: 10px;
303 }
304 .wpsc-search svg {
305 width: 20px;
306 }
307 .wpsc-search input {
308 border: none !important;
309 background-color: transparent !important;
310 flex-grow: 1;
311 }
312 .wpsc-filter-container {
313 display: flex;
314 flex-wrap: wrap;
315 align-items: flex-end;
316 margin-bottom: 10px;
317 }
318 .wpsc-filter-item {
319 max-width: 200px;
320 margin-right: 5px;
321 margin-bottom: 10px;
322 }
323 .wpsc-filter-item label {
324 font-size: 12px;
325 font-weight: 600;
326 margin-bottom: 3px;
327 }
328 .wpsc-filter-item select {
329 width: 100% !important;
330 }
331 .wpsc-filter-submit {
332 display: flex;
333 margin-bottom: 10px;
334 }
335 .wpsc-it-action-container {
336 display: flex;
337 flex-wrap: wrap;
338 align-items: center;
339 }
340 .wpsc-filter-actions {
341 display: flex;
342 flex-wrap: wrap;
343 align-items: center;
344 }
345 .wpsc-it-action-container .wpsc-filter-actions {
346 margin-bottom: 15px;
347 }
348 .wpsc-filter-actions .action-devider {
349 height: 18px;
350 border-left: 1px solid #2c3e50;
351 margin: 0 5px;
352 }
353 .wpsc-filter-actions span {
354 cursor: pointer;
355 font-size: 16px;
356 text-decoration: underline;
357 }
358 .wpsc-filter-actions span:hover {
359 color: #0073aa;
360 }
361
362 /* Ticket List */
363 .wpsc-tickets-container {
364 border: none;
365 box-shadow: 0 0 3px 0 #a4b0be;
366 border-radius: 5px;
367 padding: 15px 15px 0 15px;
368 margin: 0 15px 15px;
369 width: calc(100% - 30px);
370 box-sizing: border-box;
371 }
372 .wpsc-bulk-actions {
373 display: flex;
374 align-items: center;
375 margin-bottom: 20px;
376 }
377 .wpsc-bulk-actions select {
378 min-width: 150px;
379 max-width: 250px;
380 margin-right: 5px;
381 }
382 .wpsc-bulk-actions button {
383 margin-right: 5px;
384 display: flex;
385 align-items: center;
386 }
387 .wpsc-bulk-actions button svg {
388 height: 13px;
389 margin-left: 15px;
390 }
391 .wpsc-ticket-pagination-header {
392 display: flex;
393 flex-grow: 1;
394 align-items: center;
395 justify-content: flex-end;
396 }
397 .wpsc-ticket-pagination-footer {
398 display: flex;
399 align-items: center;
400 justify-content: center;
401 width: 100%;
402 padding: 0 0 20px;
403 box-sizing: border-box;
404 }
405 .wpsc-ticket-pagination-header span,
406 .wpsc-ticket-pagination-footer span {
407 display: flex;
408 align-items: center;
409 font-size: 14px;
410 cursor: pointer;
411 }
412 .wpsc-ticket-pagination-header span.wpsc-pagination-txt,
413 .wpsc-ticket-pagination-footer span.wpsc-pagination-txt {
414 text-decoration: none;
415 cursor: default;
416 }
417 .wpsc-ticket-pagination-header svg,
418 .wpsc-ticket-pagination-footer svg {
419 height: 14px;
420 margin: 0 10px;
421 cursor: pointer;
422 }
423
424 /* Popover Menu */
425 .wpsc-popover-menu {
426 padding: 3px !important;
427 border-radius: 3px !important;
428 }
429 .wpsc-popover-menu-item {
430 display: flex;
431 align-items: center;
432 padding: 10px;
433 cursor: pointer;
434 background-color: #fff;
435 color: #707070;
436 }
437 .wpsc-popover-menu-item:hover {
438 color: #fff;
439 }
440 .wpsc-popover-menu-item svg {
441 width: 14px;
442 margin-right: 10px;
443 }
444 .wpsc-popover-menu-item span {
445 font-size: 14px;
446 }
447
448 /* Ticket List */
449 .wpsc-ticket-list-tbl {
450 width: 100% !important;
451 margin-bottom: 20px !important;
452 border-collapse: collapse !important;
453 border-spacing: 0 !important;
454 border: none !important;
455 font-size: 13px !important;
456 }
457 .wpsc-ticket-list-tbl th,
458 .wpsc-ticket-list-tbl td {
459 text-align: left !important;
460 padding: 10px !important;
461 border: none !important;
462 box-sizing: border-box;
463 }
464 .wpsc-ticket-list-tbl tbody tr:hover {
465 cursor: pointer;
466 }
467
468 /* Modal Popup */
469 .wpsc-modal .loader,
470 .wpsc-modal .inner-container {
471 position: fixed;
472 display: flex;
473 justify-content: center;
474 width: 100%;
475 height: 100%;
476 top: 0;
477 left: 0;
478 }
479 .wpsc-modal .loader {
480 align-items: center;
481 }
482 .wpsc-modal .inner-container {
483 padding-top: 50px;
484 align-items: flex-start;
485 }
486 .wpsc-modal .loader img {
487 width: 50px;
488 }
489 .wpsc-modal .modal {
490 width: 650px;
491 display: block;
492 top: auto;
493 bottom: auto;
494 right: auto;
495 left: auto;
496 }
497 @media only screen and (max-width: 768px) {
498 .wpsc-modal .modal {
499 width: 90%;
500 }
501 }
502 .wpsc-modal-header {
503 font-size: 16px;
504 font-weight: 400;
505 text-align: left;
506 padding: 10px 15px;
507 }
508 .wpsc-modal-body {
509 display: flex;
510 font-size: 14px;
511 padding: 20px 15px 15px 15px;
512 max-height: 300px;
513 overflow: auto;
514 border-bottom: 1px solid #a4b0be;
515 }
516 .wpsc-modal-footer {
517 padding: 10px 15px;
518 }
519 #wpsc-container .select2-container {
520 width: 100% !important;
521 }
522 .select2-container .select2-selection--single {
523 height: 30px !important;
524 }
525 #wpsc-container input[type="text"],
526 #wpsc-container input[type="password"],
527 .wpsc-modal input[type="text"],
528 .wpsc-modal input[type="password"] {
529 padding: 0 8px;
530 line-height: 2 !important;
531 min-height: 30px !important;
532 max-height: 30px !important;
533 }
534 .wpsc-modal-body .wpsc-tff {
535 padding: 0 0 15px !important;
536 }
537 .wpsc-modal-body .wpsc-tff .name {
538 font-size: 12px !important;
539 font-weight: 600 !important;
540 }
541
542 /* Toggle Buttons */
543 .wpsc-toggle-btn {
544 display: flex;
545 width: fit-content;
546 border: 1px solid #c3c3c3;
547 }
548 .wpsc-toggle-btn div {
549 padding: 5px 10px;
550 background-color: #fff;
551 color: #000;
552 border: none !important;
553 cursor: pointer;
554 font-size: 12px;
555 }
556 .wpsc-toggle-btn div.active {
557 background-color: #c3c3c3;
558 }
559
560 /* Form fields */
561 .wpsc-input-group {
562 width: 100%;
563 display: flex;
564 flex-direction: column;
565 padding-bottom: 15px;
566 box-sizing: border-box;
567 }
568 .wpsc-input-group .label-container {
569 display: flex;
570 align-items: center;
571 color: #000;
572 margin-bottom: 2px;
573 }
574 .wpsc-input-group label {
575 font-size: 12px;
576 font-weight: 600;
577 margin-right: 5px;
578 }
579 .wpsc-input-group .label-container svg {
580 width: 12px;
581 margin-left: 5px;
582 }
583 .wpsc-input-group input[type="text"],
584 .wpsc-input-group select {
585 width: 100%;
586 max-width: 100%;
587 }
588 .wpsc-input-group .checkbox-group,
589 .wpsc-input-group .radio-group {
590 width: 100%;
591 display: flex;
592 flex-wrap: wrap;
593 align-items: center;
594 }
595 .wpsc-input-group .checkbox-group div,
596 .wpsc-input-group .radio-group div {
597 width: 250px;
598 display: flex;
599 flex-wrap: wrap;
600 align-items: center;
601 margin: 0 10px 5px 0;
602 }
603 .wpsc-input-group .checkbox-group div input,
604 .wpsc-input-group .radio-group div input {
605 margin: 0 5px 0 0 !important;
606 }
607 .wpsc-input-group .checkbox-group div span,
608 .wpsc-input-group .radio-group div span {
609 font-size: 12px;
610 font-weight: 300;
611 }
612 .wpsc-input-group .required-char {
613 font-size: 12px;
614 color: #ff0000;
615 }
616 .wpsc-input-group .divide-bar {
617 width: 100%;
618 display: flex;
619 flex-wrap: grid;
620 align-items: center;
621 }
622 .wpsc-form-devider {
623 width: 100%;
624 display: flex;
625 justify-content: center;
626 font-size: 18px;
627 margin-bottom: 15px;
628 }
629 .wpsc-form-devider span.label {
630 margin: 0 10px;
631 }
632
633 /* Individual Ticket */
634 .wpsc-it-container {
635 display: flex;
636 align-items: flex-start;
637 width: 100%;
638 box-sizing: border-box;
639 margin: 0 15px;
640 }
641 .wpsc-it-body {
642 display: flex;
643 flex-direction: column;
644 justify-content: flex-start;
645 flex-grow: 1;
646 gap: 10px;
647 }
648 .wpsc-it-sidebar-widget-container {
649 display: flex;
650 flex-direction: column;
651 justify-content: flex-start;
652 min-width: 250px;
653 max-width: 250px;
654 box-sizing: border-box;
655 margin-left: 20px;
656 }
657 .wpsc-it-body-item,
658 .wpsc-it-widget {
659 width: 100%;
660 box-sizing: border-box;
661 }
662 .wpsc-it-subject-container {
663 display: flex;
664 align-items: flex-start;
665 width: 100%;
666 box-sizing: border-box;
667 }
668 .wpsc-it-subject-container h2 {
669 flex-grow: 1;
670 margin: 0px !important;
671 font-size: 18px !important;
672 font-weight: 300;
673 color: #000;
674 }
675 .wpsc-it-subject-container span {
676 display: flex;
677 align-items: center;
678 cursor: pointer;
679 width: 20px;
680 margin-left: 5px;
681 }
682 .wpsc-it-subject-container svg {
683 width: 18px;
684 margin-bottom: 5px;
685 }
686 .wpsc-it-reply-section-container {
687 display: flex;
688 flex-direction: column;
689 width: 100%;
690 box-sizing: border-box;
691 }
692 #wpsc-it-bcc,
693 #wpsc-it-cc {
694 width: 100%;
695 box-shadow: 0px 0px 3px 2px #ddd !important;
696 border-radius: 0px !important;
697 margin-bottom: 10px;
698 }
699 .mce-tinymce {
700 margin-bottom: 10px !important;
701 box-shadow: 0px 0px 3px 2px #ddd !important;
702 }
703 .wpsc-it-editor-action-container {
704 display: flex;
705 align-items: flex-start;
706 flex-wrap: wrap;
707 width: 100%;
708 box-sizing: border-box;
709 margin: 0 1px;
710 }
711 .wpsc-it-editor-action-container > * {
712 flex: 1 1 auto;
713 }
714 .wpsc-it-editor-action-container .actions {
715 display: flex;
716 flex-direction: column;
717 flex-wrap: wrap;
718 margin-bottom: 5px;
719 }
720 .wpsc-it-editor-action-container .submit-container {
721 display: flex;
722 justify-content: flex-end;
723 }
724 .wpsc-it-editor-submit {
725 margin-left: 5px;
726 }
727 .wpsc-editor-actions,
728 .wpsc-editor-attachment-container {
729 display: flex;
730 flex-wrap: wrap;
731 }
732 .wpsc-editor-actions span {
733 cursor: pointer;
734 font-size: 16px;
735 font-weight: normal;
736 margin-right: 10px;
737 }
738 .wpsc-editor-attachment-container {
739 flex-direction: column;
740 }
741 .wpsc-editor-attachment {
742 display: flex;
743 align-items: center;
744 width: 100%;
745 max-width: 500px;
746 box-sizing: border-box;
747 margin-top: 5px;
748 padding: 5px 10px;
749 border-radius: 3px;
750 }
751 .wpsc-editor-attachment.upload-waiting {
752 background-color: #ffebce;
753 color: #eb961c;
754 }
755 .wpsc-editor-attachment.upload-success {
756 background-color: #c7ecee;
757 color: #2d9ba1;
758 }
759 .wpsc-editor-attachment.upload-error {
760 background-color: #ffe7e1;
761 color: #ec1010;
762 }
763 .wpsc-editor-attachment.upload-waiting .attachment-remove {
764 display: none;
765 }
766 .wpsc-editor-attachment.upload-success .attachment-waiting,
767 .wpsc-editor-attachment.upload-error .attachment-waiting {
768 display: none;
769 }
770 .wpsc-editor-attachment .attachment-label {
771 flex-grow: 1;
772 font-size: 12px;
773 font-weight: 400;
774 }
775 .wpsc-editor-attachment .attachment-remove,
776 .wpsc-editor-attachment .attachment-waiting {
777 display: flex;
778 align-items: center;
779 margin-left: 5px;
780 }
781 .wpsc-editor-attachment .attachment-remove {
782 cursor: pointer;
783 }
784 .wpsc-editor-attachment svg {
785 height: 12px;
786 }
787 .wpsc-it-thread-section-container {
788 display: flex;
789 flex-direction: column;
790 width: 100%;
791 box-sizing: border-box;
792 margin-top: 35px;
793 margin-bottom: 0px !important;
794 }
795 .wpsc-thread {
796 display: flex;
797 width: 100%;
798 box-sizing: border-box;
799 margin-bottom: 50px;
800 }
801 .wpsc-thread .thread-avatar {
802 display: flex;
803 align-items: flex-start;
804 }
805 .wpsc-thread .thread-avatar img {
806 border-radius: 22px;
807 max-width: 32px;
808 }
809 .wpsc-thread .thread-avatar svg {
810 width: 32px;
811 color: #777;
812 }
813 .wpsc-thread .thread-body {
814 display: flex;
815 flex-direction: column;
816 align-items: flex-start;
817 flex-grow: 1;
818 margin-left: 10px;
819 }
820 .wpsc-thread .thread-header {
821 display: flex;
822 width: 100%;
823 margin-bottom: 10px;
824 }
825 .wpsc-thread .user-info {
826 display: flex;
827 flex-grow: 1;
828 flex-direction: column;
829 }
830 .wpsc-thread .user-info h2 {
831 font-size: 14px;
832 font-weight: 600;
833 margin: 0;
834 }
835 .wpsc-thread .thread-type {
836 opacity: 0.5;
837 }
838 .wpsc-thread .thread-time,
839 .wpsc-thread-logs {
840 font-size: 10px;
841 font-weight: normal;
842 }
843 .wpsc-thread .actions {
844 display: none;
845 align-items: flex-start;
846 justify-content: flex-end;
847 }
848 .wpsc-thread:hover .actions {
849 display: flex;
850 }
851 .wpsc-thread .actions span {
852 display: flex;
853 align-items: flex-start;
854 cursor: pointer;
855 margin-left: 5px;
856 }
857 .wpsc-thread .actions svg {
858 height: 14px;
859 }
860 .wpsc-thread .thread-text,
861 .wpsc-modal-thread-log .thread-text {
862 font-size: 14px;
863 font-weight: 400;
864 margin-bottom: 10px;
865 word-break: break-word;
866 }
867 .wpsc-thread .thread-text {
868 overflow: hidden;
869 }
870 .wpsc-thread .thread-text ul{
871 list-style-type: disc !important;
872 padding-inline-start: 2em;
873 }
874 .wpsc-thread p {
875 font-size: 14px;
876 font-weight: 400;
877 }
878 .wpsc-log-diff {
879 display: flex;
880 width: 100%;
881 box-sizing: border-box;
882 }
883 .wpsc-log-diff .lhs,
884 .wpsc-log-diff .transform-icon,
885 .wpsc-log-diff .rhs {
886 display: flex;
887 align-items: center;
888 flex-wrap: wrap;
889 word-break: break-word;
890 overflow-wrap: anywhere;
891 white-space: normal;
892 }
893 .wpsc-log-diff .transform-icon svg {
894 width: 12px;
895 margin: 0 10px;
896 }
897 .wpsc-edit-thread {
898 display: flex;
899 width: 100%;
900 flex-direction: column;
901 }
902 .wpsc-modal-thread-log {
903 width: 100%;
904 display: flex;
905 flex-direction: column;
906 }
907 .wpsc-it-widget {
908 display: flex;
909 flex-direction: column;
910 width: 100%;
911 min-width: 100%;
912 max-width: 100%;
913 box-sizing: border-box;
914 margin-bottom: 15px;
915 }
916 .wpsc-widget-header {
917 display: flex;
918 align-items: center;
919 padding: 10px;
920 }
921 .wpsc-widget-header h2 {
922 font-size: 14px !important;
923 font-weight: 600;
924 flex-grow: 1;
925 margin: 0px !important;
926 }
927 .wpsc-widget-header span {
928 display: flex;
929 align-items: center;
930 margin-left: 5px;
931 cursor: pointer;
932 }
933 .wpsc-widget-header svg {
934 width: 14px;
935 }
936 .wpsc-widget-body {
937 display: flex;
938 flex-direction: column;
939 font-size: 14px;
940 font-weight: normal;
941 padding: 10px 10px 0;
942 overflow-y: auto;
943 }
944 .wpsc-widget-body .info-list-item {
945 display: flex;
946 align-items: center;
947 flex-wrap: wrap;
948 margin-bottom: 10px;
949 }
950 .wpsc-widget-body .info-list-item .info-label {
951 margin-right: 5px;
952 }
953 .wpsc-widget-default {
954 margin-bottom: 10px;
955 }
956 .info-val.fullwidth {
957 width: 100%;
958 }
959 .wpsc-widget-body .user-list-item {
960 display: flex;
961 align-items: flex-start;
962 margin-bottom: 10px;
963 }
964 .wpsc-widget-body .user-list-item img {
965 border-radius: 20px;
966 margin-right: 5px;
967 }
968 .wpsc-widget-body .user-list-item .ul-body {
969 display: flex;
970 flex-direction: column;
971 justify-content: center;
972 min-height: 40px;
973 }
974 .wpsc-widget-body .user-list-item .ul-label {
975 font-size: 14px;
976 font-weight: normal;
977 margin-bottom: 5px;
978 }
979 .wpsc-widget-body .user-list-item .ul-actions {
980 display: flex;
981 align-items: center;
982 }
983 .wpsc-widget-body .user-list-item .ul-actions span {
984 display: flex;
985 align-items: center;
986 cursor: pointer;
987 margin-right: 5px;
988 }
989 .wpsc-widget-body .user-list-item .ul-actions svg {
990 height: 14px;
991 }
992 .wpsc-it-mob-widget-trigger-btn {
993 display: flex;
994 cursor: pointer;
995 padding: 10px;
996 align-items: center;
997 color: #000;
998 box-shadow: 0px 0px 3px 2px #ddd !important;
999 }
1000 .wpsc-it-mob-widget-trigger-btn h2 {
1001 flex-grow: 1;
1002 font-size: 16px !important;
1003 font-weight: 600;
1004 margin: 0px !important;
1005 color: #000;
1006 }
1007 .wpsc-it-mob-widget-trigger-btn span {
1008 display: flex;
1009 align-items: center;
1010 }
1011 .wpsc-it-mob-widget-trigger-btn svg {
1012 height: 16px;
1013 }
1014 .wpsc-it-mob-widgets-inner-container {
1015 margin-top: 15px;
1016 }
1017 .wpsc-thread-attachments {
1018 display: flex;
1019 flex-direction: column;
1020 margin-bottom: 10px;
1021 }
1022 .wpsc-attachment-header {
1023 flex-grow: 1;
1024 margin: 0 0 2px 0 !important;
1025 font-size: 12px;
1026 font-weight: bold;
1027 }
1028 .wpsc-attachment-item {
1029 display: flex;
1030 align-items: center;
1031 max-width: 400px;
1032 margin-bottom: 2px;
1033 }
1034 .wpsc-attachment-name {
1035 flex-grow: 1;
1036 cursor: pointer;
1037 }
1038 .wpsc-thread-logs {
1039 display: flex;
1040 flex-direction: column;
1041 }
1042 #wpsc-container table,
1043 #wpsc-container th,
1044 #wpsc-container td,
1045 .wpsc-modal table,
1046 .wpsc-modal th,
1047 .wpsc-modal td {
1048 border: 1px solid #ddd;
1049 border-collapse: collapse;
1050 cursor: pointer;
1051 }
1052 .dt-search {
1053 margin-bottom: 10px !important;
1054 }
1055 #wpsc-container .dataTables_wrapper th,
1056 #wpsc-container .dataTables_wrapper td,
1057 #wpsc-container table.dataTable.no-footer,
1058 .wpsc-modal .dataTables_wrapper th,
1059 .wpsc-modal .dataTables_wrapper td,
1060 .wpsc-modal table.dataTable.no-footer {
1061 border-bottom: 1px solid #ddd !important;
1062 }
1063 .wpsc_url_auth_sign_in {
1064 padding-bottom: 10px;
1065 }
1066 .wpsc_url_auth_sign_in p {
1067 margin: 0;
1068 }
1069 .wpsc_auth_header {
1070 font-size: 16px;
1071 }
1072 .wpsc_auth_link {
1073 font-size: 12px;
1074 }
1075
1076 /* Macro */
1077 .wpscMacros .extra-info {
1078 font-size: 12px;
1079 color: #777;
1080 }
1081
1082 /* Form Filter */
1083 .wpsc-form-filter-container,
1084 .wpsc-form-filter-container .and-item {
1085 width: 100%;
1086 display: flex;
1087 flex-direction: column;
1088 align-items: center;
1089 gap: 15px;
1090 border: 1px dashed #000;
1091 border-radius: 5px;
1092 padding: 15px;
1093 box-sizing: border-box;
1094 }
1095 .wpsc-form-filter-container .and-container,
1096 .wpsc-form-filter-container .or-container {
1097 width: 100%;
1098 display: flex;
1099 flex-direction: column;
1100 }
1101 .wpsc-form-filter-container .and-container {
1102 gap: 15px;
1103 }
1104 .wpsc-form-filter-container .or-container {
1105 gap: 5px;
1106 }
1107 .wpsc-form-filter-container button {
1108 width: fit-content;
1109 }
1110 .wpsc-form-filter-item {
1111 display: flex;
1112 width: 100%;
1113 align-items: center;
1114 margin-bottom: 5px;
1115 padding: 5px 5px 0 5px;
1116 background-color: #dcdcdc;
1117 border-radius: 3px;
1118 box-sizing: border-box;
1119 }
1120 .wpsc-form-filter-item .content {
1121 display: flex;
1122 align-items: center;
1123 flex-wrap: wrap;
1124 }
1125 .wpsc-form-filter-item .operator {
1126 min-height: 28px !important;
1127 height: 28px !important;
1128 }
1129 .wpsc-form-filter-item .remove-container {
1130 display: flex;
1131 align-items: center;
1132 justify-content: flex-end;
1133 flex-grow: 1;
1134 }
1135 .wpsc-form-filter-item .content .item {
1136 width: 130px;
1137 max-width: 130px;
1138 margin: 0 5px 5px 0;
1139 }
1140 .wpsc-form-filter-item .content .item.operand.single {
1141 width: 250px;
1142 max-width: 250px;
1143 }
1144 .wpsc-form-filter-item .remove-container span {
1145 display: flex;
1146 align-items: center;
1147 margin-bottom: 5px;
1148 cursor: pointer;
1149 }
1150 .wpsc-form-filter-item .remove-container svg {
1151 width: 18px;
1152 color: #c3c3c3;
1153 }
1154 .wpsc-form-filter-add-btn {
1155 width: fit-content;
1156 }
1157 .select2-container .select2-selection--single {
1158 margin: 0 !important;
1159 }
1160 .wpsc-form-filter-item .content .wpsc-inline-loader {
1161 margin-bottom: 5px;
1162 }
1163
1164 /* Snippets */
1165 .wpsc-snippets {
1166 display: none;
1167 }
1168
1169 /* Flatpicker */
1170 .flatpickr-calendar.open {
1171 z-index: 999999999 !important;
1172 }
1173
1174 /* Section */
1175 .wpsc-section-header {
1176 font-size: 22px;
1177 font-weight: 300;
1178 margin: 0 5px 15px 0;
1179 }
1180 .wpsc-section-container {
1181 border: none;
1182 box-shadow: 0 0 3px 0 #a4b0be;
1183 border-radius: 5px;
1184 padding: 15px 0 0 0;
1185 width: 100%;
1186 font-size: 12px;
1187 box-sizing: border-box;
1188 }
1189
1190 /* TinyMCE editor switching */
1191 .wpsc_tinymce_editor_btns {
1192 display: flex !important;
1193 justify-content: flex-end;
1194 margin-bottom: 4px;
1195 }
1196 .wpsc_tinymce_editor_btns .inner-container {
1197 border: 1px solid #c3c3c3;
1198 display: flex;
1199 }
1200 .wpsc-switch-editor {
1201 cursor: pointer;
1202 border: none;
1203 padding: 6px 24px !important;
1204 text-align: center;
1205 font-size: 13px;
1206 background-color: #fff;
1207 color: #000;
1208 border-radius: 0 !important;
1209 margin: 0 !important;
1210 }
1211 .wpsc-switch-editor.active {
1212 background: #c3c3c3;
1213 }
1214 .wpsc_textarea {
1215 height: 160px !important;
1216 width: 100% !important;
1217 }
1218
1219 /* Ticket form field */
1220 .wpsc-tff {
1221 display: flex;
1222 flex-direction: column;
1223 }
1224 .wpsc-tff .name {
1225 font-weight: bold;
1226 }
1227 .wpsc-tff .extra-info {
1228 font-size: 10px;
1229 margin-bottom: 5px;
1230 }
1231 .wpsc-tff textarea {
1232 min-height: 100px;
1233 }
1234 .wpsc-tff-label {
1235 display: flex;
1236 justify-content: flex-start;
1237 align-items: flex-start;
1238 }
1239 .wpsc-tff-label .required-indicator {
1240 color: #ff0000;
1241 margin-left: 5px;
1242 }
1243 .wpsc-hidden {
1244 display: none !important;
1245 }
1246 .wpsc-thread-info {
1247 display: flex;
1248 width: 100%;
1249 flex-direction: column;
1250 align-items: flex-start;
1251 }
1252 .wpsc-thread-info .info-list-item {
1253 display: flex;
1254 flex-wrap: wrap;
1255 margin-bottom: 10px;
1256 }
1257 .wpsc-thread-info .info-list-item .info-label {
1258 font-size: 14px;
1259 font-weight: normal;
1260 margin-right: 5px;
1261 }
1262 .wpsc-thread-info .info-list-item .info-val {
1263 font-size: 14px;
1264 font-weight: normal;
1265 }
1266 .wpsc-ticket-thread-expander {
1267 margin-bottom: 10px;
1268 color: #003eff;
1269 cursor: pointer;
1270 }
1271
1272 /** Agent profile */
1273 .wpsc-agent-profile {
1274 width: 100%;
1275 display: flex;
1276 margin: 0 15px 15px;
1277 }
1278 .wpsc-ap-mobile-menu {
1279 width: 100%;
1280 margin: 0 15px 10px;
1281 }
1282 .wpsc-ap-menu-container {
1283 min-width: 250px;
1284 display: flex;
1285 flex-wrap: wrap;
1286 flex-direction: column;
1287 align-items: center;
1288 justify-content: flex-start;
1289 padding: 10px;
1290 margin-right: 30px;
1291 background-color: #fff;
1292 border-radius: 5px;
1293 box-shadow: 6px 6px 10px 0px #ced6e0;
1294 }
1295 .wpsc-ap-menu-body {
1296 display: flex;
1297 flex-direction: column;
1298 align-items: flex-start;
1299 justify-content: flex-start;
1300 flex-wrap: wrap;
1301 flex-grow: 1;
1302 }
1303 .wpsc-ap-nav {
1304 width: 100%;
1305 display: flex;
1306 align-items: center;
1307 padding: 10px;
1308 box-sizing: border-box;
1309 border: none;
1310 border-radius: 5px;
1311 background-color: #fff;
1312 color: #707070;
1313 cursor: pointer;
1314 margin-bottom: 5px;
1315 }
1316 .wpsc-ap-nav.active,
1317 .wpsc-ap-nav:hover {
1318 color: #fff;
1319 }
1320 .wpsc-ap-nav svg {
1321 width: 18px;
1322 margin-right: 10px;
1323 }
1324 .wpsc-ap-nav label {
1325 font-size: 14px !important;
1326 }
1327 .wpsc-ap-tab-container {
1328 display: flex;
1329 flex-wrap: wrap;
1330 width: 100%;
1331 align-items: center;
1332 margin-bottom: 10px;
1333 }
1334 .wpsc-ap-tab-container button {
1335 padding: 7px 15px;
1336 font-size: 16px;
1337 font-weight: normal;
1338 border: none !important;
1339 color: #6a6a6a;
1340 background-color: transparent;
1341 cursor: pointer;
1342 border-radius: 16px;
1343 margin: 0 5px 5px 0;
1344 }
1345 .wpsc-ap-tab-container button.active,
1346 .wpsc-ap-tab-container button:hover {
1347 color: #fff;
1348 background-color: #ffa04a;
1349 }
1350
1351 /* date input */
1352 .wpsc-input-close-group {
1353 width: 100%;
1354 display: flex;
1355 }
1356 .wpsc-input-close-group input {
1357 width: 100%;
1358 }
1359 .wpsc-input-close-group span {
1360 display: flex !important;
1361 margin-left: -18px !important;
1362 align-items: center !important;
1363 cursor: pointer !important;
1364 }
1365 .wpsc-input-close-group svg {
1366 height: 10px;
1367 color: #888;
1368 }
1369 .wpsc-no-ticket-found {
1370 display: flex;
1371 justify-content: center;
1372 width: 100%;
1373 padding: 0 0 50px 0;
1374 color: #8a8a8a;
1375 align-items: center;
1376 font-size: 14px;
1377 text-decoration: none;
1378 cursor: default;
1379 }
1380
1381 /* working hrs */
1382 table.wpsc-working-hrs,
1383 table.wpsc-working-hrs tr,
1384 table.wpsc-working-hrs td {
1385 border: none !important;
1386 font-size: 13px;
1387 color: #777;
1388 }
1389 table.wpsc-working-hrs td {
1390 padding: 0 15px 15px !important;
1391 }
1392 table.wpsc-working-hrs {
1393 width: fit-content !important;
1394 }
1395 .wpsc-working-hrs .dayName {
1396 font-weight: 600;
1397 }
1398
1399 /* Shortcode */
1400 .wpsc-shortcode-container {
1401 border-radius: 5px;
1402 overflow: hidden;
1403 }
1404
1405 /* wpsc image */
1406 .mce-i-wpsc_insert_editor_img::before {
1407 content: "\e014";
1408 }
1409
1410 /* Theme compatibility */
1411 #wpsc-container label,
1412 .wpsc-humbargar-menu label,
1413 .wpsc-modal label {
1414 margin: 0px !important;
1415 }
1416 #wpsc-container form,
1417 .wpsc-modal form {
1418 margin: 0 !important;
1419 }
1420
1421 /* Select */
1422 #wpsc-container select,
1423 .wpsc-modal select {
1424 font-size: 14px !important;
1425 min-height: 30px !important;
1426 max-height: 30px !important;
1427 padding: 0 24px 0 8px !important;
1428 }
1429
1430 /* Checkboxes */
1431 #wpsc-container .checkbox-container,
1432 .wpsc-modal .checkbox-container {
1433 display: flex;
1434 line-height: normal;
1435 }
1436 #wpsc-container .checkbox-container input,
1437 .wpsc-modal .checkbox-container input {
1438 padding: 0;
1439 height: initial;
1440 width: initial;
1441 margin-bottom: 0;
1442 display: none;
1443 cursor: pointer;
1444 }
1445 #wpsc-container .checkbox-container label,
1446 .wpsc-modal .checkbox-container label {
1447 position: relative;
1448 cursor: pointer;
1449 padding: 0 !important;
1450 font-size: 14px !important;
1451 }
1452 #wpsc-container .checkbox-container label:before,
1453 .wpsc-modal .checkbox-container label:before {
1454 content: "";
1455 -webkit-appearance: none;
1456 background-color: #fff;
1457 box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05),
1458 inset 0px -15px 10px -12px rgba(0, 0, 0, 0.05);
1459 display: inline-block;
1460 position: relative;
1461 vertical-align: middle;
1462 cursor: pointer;
1463 margin-right: 5px;
1464 border: 1px solid #8a8a8a;
1465 }
1466 #wpsc-container .checkbox-container input:checked + label:after,
1467 .wpsc-modal .checkbox-container input:checked + label:after {
1468 content: "";
1469 display: block;
1470 position: absolute;
1471 top: 1px;
1472 left: 7px;
1473 width: 6px;
1474 height: 12px;
1475 border: solid #0079bf;
1476 border-width: 0 2px 2px 0;
1477 transform: rotate(45deg);
1478 }
1479 #wpsc-container .checkbox-container label,
1480 .wpsc-modal .checkbox-container label {
1481 display: flex;
1482 }
1483 #wpsc-container .checkbox-container label:before,
1484 .wpsc-modal .checkbox-container label:before {
1485 width: 18px !important;
1486 height: 18px !important;
1487 box-sizing: border-box;
1488 padding: 8px;
1489 }
1490 #wpsc-container .checkbox-container label:after,
1491 .wpsc-modal .checkbox-container label:after {
1492 flex-grow: 1;
1493 }
1494 #wpsc-container .checkbox-container p,
1495 .wpsc-modal .checkbox-container p {
1496 margin: 0 !important;
1497 }
1498
1499 /* Radio button */
1500 #wpsc-container .radio-container,
1501 .wpsc-modal .radio-container {
1502 display: flex;
1503 line-height: normal;
1504 margin-bottom: 5px;
1505 }
1506 #wpsc-container .radio-container input,
1507 .wpsc-modal .radio-container input {
1508 display: none !important;
1509 }
1510 #wpsc-container .radio-container input + label,
1511 .wpsc-modal .radio-container input + label {
1512 position: relative;
1513 padding-left: 23px;
1514 cursor: pointer;
1515 line-height: 18px;
1516 display: inline-block;
1517 }
1518 #wpsc-container .radio-container input + label:before,
1519 .wpsc-modal .radio-container input + label:before {
1520 content: "";
1521 position: absolute;
1522 left: 0;
1523 top: 0;
1524 width: 18px;
1525 height: 18px;
1526 border-radius: 100%;
1527 background: #fff;
1528 box-sizing: border-box;
1529 }
1530 #wpsc-container .radio-container input + label:after,
1531 .wpsc-modal .radio-container input + label:after {
1532 content: "";
1533 width: 12px;
1534 height: 12px;
1535 background: #0079bf;
1536 position: absolute;
1537 top: 3px;
1538 left: 3px;
1539 border-radius: 100%;
1540 -webkit-transition: all 0.2s ease;
1541 transition: all 0.2s ease;
1542 }
1543 #wpsc-container .radio-container input:not(:checked) + label:after,
1544 .wpsc-modal .radio-container input:not(:checked) + label:after {
1545 opacity: 0;
1546 -webkit-transform: scale(0);
1547 transform: scale(0);
1548 }
1549 #wpsc-container .radio-container input:checked + label:after,
1550 .wpsc-modal .radio-container input:checked + label:after {
1551 opacity: 1;
1552 -webkit-transform: scale(1);
1553 transform: scale(1);
1554 }
1555 #wpsc-container .radio-container p,
1556 .wpsc-modal .radio-container p {
1557 margin: 0 !important;
1558 }
1559
1560 /* Buttons */
1561 .wpsc-button {
1562 border-radius: 5px !important;
1563 padding: 5px 10px !important;
1564 cursor: pointer;
1565 line-height: normal;
1566 }
1567 .wpsc-button.margin-right {
1568 margin-right: 5px;
1569 }
1570 .wpsc-button.margin-left {
1571 margin-left: 5px;
1572 }
1573 .wpsc-button.small {
1574 font-size: 12px !important;
1575 }
1576 .wpsc-button.normal {
1577 font-size: 14px !important;
1578 }
1579
1580 /* Links */
1581 .wpsc-link {
1582 cursor: pointer !important;
1583 text-decoration: none !important;
1584 }
1585 .wpsc-link:hover {
1586 text-decoration: underline !important;
1587 }
1588
1589 /* Auth screen */
1590 .wpsc-auth-container {
1591 display: flex;
1592 margin: 20px;
1593 align-items: center;
1594 justify-content: center;
1595 }
1596 .wpsc-auth-container .auth-inner-container {
1597 display: flex;
1598 flex-direction: column;
1599 max-width: 300px !important;
1600 }
1601 .wpsc-auth-container h2 {
1602 font-size: 25px !important;
1603 margin: 0 0 10px 0 !important;
1604 text-align: left;
1605 }
1606 .wpsc-auth-container input[type="text"],
1607 .wpsc-auth-container input[type="password"] {
1608 width: 100% !important;
1609 height: 30px !important;
1610 font-size: 14px !important;
1611 margin: 0 0 5px !important;
1612 }
1613 .wpsc-auth-container .remember-me {
1614 margin-bottom: 5px;
1615 }
1616 .wpsc-auth-container button {
1617 margin-bottom: 5px !important;
1618 }
1619 .wpsc-auth-container .auth-links {
1620 margin: 0 !important;
1621 display: flex;
1622 flex-direction: column;
1623 }
1624 .wpsc-auth-container .auth-links a {
1625 margin-bottom: 5px !important;
1626 }
1627 .wpsc-shortcode-container .select2-container,
1628 .wpsc-section-container .select2-container,
1629 .wpsc-modal-body .select2-container {
1630 width: 100% !important;
1631 }
1632
1633 /* file attachment notice */
1634 .wpsc-file-attachment-notice {
1635 align-self: flex-start;
1636 font-style: italic;
1637 font-size: 10px;
1638 font-weight: normal;
1639 color: #6e6e6e;
1640 margin-bottom: 10px;
1641 }
1642
1643 /* Progrss loader */
1644 .wpscPrograssLoaderContainer {
1645 width: 100%;
1646 height: 100%;
1647 display: flex;
1648 justify-content: center;
1649 align-items: center;
1650 }
1651 .wpscPrograssLoader {
1652 width: 100px;
1653 display: inline-block;
1654 position: relative;
1655 text-align: center;
1656 line-height: 1.2;
1657 }
1658 .wpscPrograssLoader strong {
1659 position: absolute;
1660 top: 30px;
1661 left: 0;
1662 width: 100%;
1663 text-align: center;
1664 line-height: 40px;
1665 font-size: 30px;
1666 }
1667 .wpscPrograssLoader strong small {
1668 font-size: 15px;
1669 }
1670 .thread-body img {
1671 max-width: 100% !important;
1672 }
1673
1674 /* Setting datatables */
1675 .wpsc-setting-tbl {
1676 width: 100% !important;
1677 margin-bottom: 20px !important;
1678 border-collapse: collapse !important;
1679 border-spacing: 0 !important;
1680 border: none !important;
1681 font-size: 13px !important;
1682 }
1683 .wpsc-setting-tbl th,
1684 .wpsc-setting-tbl td {
1685 text-align: left !important;
1686 padding: 10px !important;
1687 border: none !important;
1688 box-sizing: border-box;
1689 }
1690 .wpsc-setting-tbl tbody tr:hover {
1691 cursor: pointer;
1692 }
1693 .wpsc-setting-tbl th {
1694 background-color: #313042;
1695 color: #fff;
1696 }
1697 .wpsc-setting-tbl tr:nth-child(even) {
1698 background-color: #f2f2f2;
1699 color: #2c3e50;
1700 }
1701 .wpsc-setting-tbl tr:nth-child(odd) {
1702 background-color: #fff;
1703 color: #2c3e50;
1704 }
1705 .wpsc-setting-tbl tbody tr:hover {
1706 background-color: #dfe4ea;
1707 color: #2c3e50;
1708 }
1709 .wpsc-thread .user-info h2.user-name {
1710 margin-right: 5px;
1711 }
1712 .options button {
1713 width: fit-content;
1714 }
1715
1716 /* Progrssbar */
1717 .wpsc-pg-container {
1718 width: 100%;
1719 }
1720 .wpsc-pg-container .ui-progressbar {
1721 position: relative;
1722 }
1723 .wpsc-pg-label {
1724 position: absolute;
1725 left: 50%;
1726 top: 4px;
1727 font-weight: bold;
1728 text-shadow: 1px 1px 0 #fff;
1729 }
1730
1731 /* Ticket tags */
1732 .wpsc-ticket-tag {
1733 display: flex;
1734 justify-content: center;
1735 align-items: center;
1736 border-radius: 5px;
1737 font-weight: normal;
1738 width: fit-content;
1739 font-size: 12px;
1740 padding: 5px 5px;
1741 margin: 0 5px 5px 0;
1742 cursor: pointer;
1743 line-height: 1em;
1744 }
1745 .wpsc-tag-list {
1746 display: flex;
1747 flex-wrap: wrap;
1748 margin-bottom: 10px;
1749 }
1750
1751 /* Agent collision */
1752 .wpsc-agent-collision {
1753 margin: 0;
1754 }
1755 .wpsc-agent-collision .wpsc-widget-body {
1756 display: flex;
1757 flex-direction: row;
1758 flex-wrap: wrap;
1759 gap: 5px;
1760 padding: 10px;
1761 }
1762 .wpsc-ac-agent {
1763 display: flex;
1764 width: fit-content;
1765 align-items: center;
1766 gap: 5px;
1767 padding: 5px;
1768 border-radius: 5px;
1769 font-size: 13px;
1770 }
1771 .wpsc-ac-agent img {
1772 border-radius: 50%;
1773 }
1774
1775 /* Dashboard widgets css */
1776
1777 .wpsc-dash-widget svg {
1778 color: #ccc;
1779 height: 80px !important;
1780 }
1781
1782 .wpsc-dashboard-widget-icon-header {
1783 display: flex;
1784 align-items: center;
1785 }
1786
1787 .wpsc-dashboard-card-icon-header {
1788 cursor: pointer;
1789 }
1790
1791 /* Style the row of small widgets */
1792 .wpsc-dash-widgets-row {
1793 display: flex;
1794 flex-wrap: wrap;
1795 }
1796
1797 /* Style individual small widgets */
1798 .wpsc-dash-widget {
1799 margin: 10px;
1800 position: relative;
1801 box-sizing: border-box;
1802 background-color: #f4f6f9;
1803 border: 1px solid #ccc;
1804 border-radius: 5px;
1805 padding: 10px;
1806 box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
1807 }
1808
1809 .wpsc-dash-widget2 {
1810 padding: 10px;
1811 }
1812
1813 .wpsc-dash-widget-small {
1814 width: calc(20% - 20px);
1815 display: flex;
1816 flex-direction: row;
1817 justify-content: space-between;
1818 align-items: center;
1819 }
1820
1821 .wpsc-dash-widget-small .wpsc-dash-widget-icon {
1822 font-size: 70px; /* Increase the size as needed */
1823 color: #ccc; /* Change the icon color as needed */
1824 margin-left: 10px; /* Add margin to separate from the text */
1825 }
1826
1827 .wpsc-dash-widget-small svg {
1828 opacity: 0.2;
1829 }
1830
1831 .wpsc-dash-widget-mid {
1832 width: calc(50% - 20px);
1833 }
1834
1835 .wpsc-dash-widget-large {
1836 width: calc(100% - 20px);
1837 }
1838
1839 .wpsc-widget h2 {
1840 font-size: 18px;
1841 margin-bottom: 5px;
1842 }
1843
1844 .wpsc-dash-widget-small h2 {
1845 margin-bottom: 5px;
1846 font-size: 35px;
1847 font-weight: 600;
1848 }
1849
1850 /* Style the header of widgets with icons and actions */
1851 .wpsc-dash-widget-header {
1852 display: flex;
1853 justify-content: space-between;
1854 align-items: center;
1855 margin-bottom: 10px;
1856 border-bottom: 1px solid #ccc;
1857 padding-bottom: 10px;
1858 }
1859
1860 .wpsc-dash-widget-header svg {
1861 color: #ccc;
1862 height: 15px !important;
1863 margin: 0px 5px 0px 0px;
1864 }
1865
1866 .wpsc-dash-widget-actions {
1867 /* Widget action links styles here */
1868 }
1869
1870 .wpsc-dash-widget-actions a {
1871 cursor: pointer;
1872 text-decoration: none;
1873 }
1874
1875 /* Style the content of widgets */
1876 .wpsc-dash-widget-content {
1877 /* Widget content styles here */
1878 }
1879
1880 .wpsc-actions-btn-setting {
1881 padding-bottom: 15px;
1882 }
1883
1884 /* Style full-width widgets */
1885 .wpsc-full-width-widget {
1886 width: 100%;
1887 }
1888
1889 .wpsc-dashboard-view {
1890 width: 100%;
1891 }
1892
1893 /* table scrollable */
1894 .wpsc-db-agent-list {
1895 width: 100%;
1896 border-collapse: collapse;
1897 }
1898
1899 .wpsc-dash-widget-content::-webkit-scrollbar,
1900 .wpsc-widget-body::-webkit-scrollbar {
1901 width: 5px;
1902 height: 5px;
1903 }
1904
1905 .wpsc-dash-widget-content::-webkit-scrollbar-thumb,
1906 .wpsc-widget-body::-webkit-scrollbar-thumb {
1907 margin-top: 10px;
1908 background-color: #cfcfcf;
1909 border-radius: 10px;
1910 }
1911
1912 .wpsc-dash-widget-content::-webkit-scrollbar-track,
1913 .wpsc-widget-body::-webkit-scrollbar-track {
1914 background-color: #ffffff;
1915 }
1916 /* table scrollable end */
1917
1918 .wpsc-dash-widget-mid .wpsc-dash-widget-content {
1919 max-height: 400px;
1920 height: 400px;
1921 }
1922
1923 .wpsc-dbw-info {
1924 overflow-y: auto;
1925 }
1926
1927 /* Additional styles for responsive design can be added as needed */
1928 @media screen and (max-width: 1200px) {
1929 .wpsc-dash-widget-small {
1930 width: calc(25% - 20px);
1931 }
1932
1933 .wpsc-dash-widget-mid {
1934 width: calc(100% - 20px);
1935 }
1936 }
1937
1938 @media screen and (max-width: 768px) {
1939 .wpsc-dash-widget-small {
1940 width: calc(33% - 20px);
1941 }
1942
1943 .wpsc-dash-widgets-row {
1944 margin: 0 10px;
1945 }
1946
1947 .wpsc-widget {
1948 width: 100%;
1949 }
1950
1951 .wpsc-dash-widget-small h2 {
1952 font-size: 25px;
1953 margin-bottom: 5px;
1954 font-weight: 600;
1955 }
1956
1957 .wpsc-dash-widget-small p {
1958 font-size: 14px;
1959 font-weight: 500;
1960 }
1961
1962 .wpsc-dash-widget svg {
1963 height: 60px !important;
1964 }
1965
1966 .wpsc-dashboard-widget-icon-header {
1967 display: inline-flex;
1968 align-items: center;
1969 }
1970
1971 .wpsc-dash-widget-header svg {
1972 height: 30px !important;
1973 }
1974
1975 .wpsc-dash-widget-actions {
1976 padding-top: 10px;
1977 }
1978
1979 .wpsc-dash-widget-mid {
1980 width: calc(100% - 20px);
1981 }
1982 }
1983
1984 @media screen and (max-width: 600px) {
1985 .wpsc-dash-widget-small {
1986 width: calc(50% - 20px);
1987 }
1988
1989 .wpsc-dashboard-view,
1990 .wpsc-dashboard-widget-view {
1991 display: contents;
1992 }
1993
1994 .wpsc-dash-widget-small h2 {
1995 font-size: 18px;
1996 margin-bottom: 5px;
1997 font-weight: 600;
1998 }
1999
2000 .wpsc-dash-widget-mid {
2001 width: calc(100% - 20px);
2002 }
2003 }
2004
2005 @media screen and (max-width: 480px) {
2006 .wpsc-dash-widget-small {
2007 width: calc(100% - 20px);
2008 }
2009
2010 .wpsc-dash-widget-mid {
2011 width: calc(100% - 20px);
2012 }
2013
2014 .wpsc-dash-widget-header {
2015 display: block;
2016 }
2017 }
2018
2019 .wpsc-widget-list-section {
2020 display: flex;
2021 flex-direction: column;
2022 }
2023
2024 .wpsc-widget-list {
2025 border-bottom: 1px solid #ccc;
2026 padding: 10px 0px;
2027 }
2028
2029 .wpsc-widget-list:last-child {
2030 border-bottom: none;
2031 }
2032
2033 #wpsc-dash-agent-list .dt-search {
2034 display: none;
2035 }
2036
2037 /* User profile starts */
2038 .wpsc-up-section {
2039 width: 100%;
2040 }
2041 .wpsc-up-section main {
2042 min-width: 320px;
2043 max-width: 100%;
2044 margin: 0 auto;
2045 }
2046 .wpsc-up-section section {
2047 padding: 10px 0px;
2048 }
2049 .wpsc-up-content {
2050 display: none;
2051 }
2052 .wpsc-up-content.active {
2053 display: block;
2054 }
2055 .wpsc-up-section .wpsc-profile-tab {
2056 display: inline-block;
2057 margin: 0 0 -1px;
2058 padding: 15px 25px;
2059 font-weight: 600;
2060 font-size: 16px;
2061 text-align: center;
2062 color: #bbb;
2063 border: 1px solid transparent;
2064 }
2065 .wpsc-up-section .wpsc-profile-tab:hover {
2066 color: #2b2d42;
2067 cursor: pointer;
2068 }
2069 .wpsc-up-tab > .active {
2070 color: #2b2d42;
2071 }
2072 .wpsc-up-container {
2073 display: flex;
2074 align-items: center;
2075 margin: 0px 0px 20px 0px;
2076 padding: 10px;
2077 background-color: #f0f0f1;
2078 border-radius: 5px;
2079 }
2080 .wpsc-up-picture img {
2081 display: flex;
2082 align-items: center;
2083 border-radius: 50%;
2084 margin-right: 10px;
2085 }
2086 .wpsc-up-info {
2087 display: flex;
2088 flex-direction: column;
2089 }
2090 .wpsc-up-name {
2091 font-size: 16px;
2092 font-weight: bold;
2093 }
2094 .wpsc-up-email {
2095 font-size: 14px;
2096 color: #888;
2097 }
2098 .wpsc-back-button {
2099 padding: 0px 0px 10px 0px;
2100 }
2101
2102 .wpsc-widget-scroller {
2103 height: 250px;
2104 }
2105 .wpsc-widget-scroller::-webkit-scrollbar {
2106 width: 5px;
2107 }
2108 .wpsc-widget-scroller::-webkit-scrollbar-thumb {
2109 margin-top: 10px;
2110 background-color: #888;
2111 border-radius: 10px;
2112 }
2113 .wpsc-widget-scroller::-webkit-scrollbar-track {
2114 background-color: #eeeeee;
2115 }
2116 /* User profile Ends */
2117
2118 /* Ticket statistic create and closed ticket count css */
2119 .ticket-info-container {
2120 display: flex;
2121 align-items: center;
2122 }
2123
2124 .ticket-info-container > div,
2125 .ticket-info-container > select {
2126 margin: 0px 10px;
2127 }
2128
2129 @media screen and (max-width: 480px) {
2130 .ticket-info-container {
2131 flex-direction: column;
2132 align-items: flex-start;
2133 justify-content: flex-start;
2134 }
2135 .ticket-info-container > div,
2136 .ticket-info-container > select {
2137 margin: 0px 10px 5px 0px;
2138 }
2139 }
2140 /* Ticket statistic create and closed ticket count css end */
2141
2142 .wpsc-ct-loader {
2143 margin: 0 5px;
2144 display: flex;
2145 align-items: center;
2146 }
2147
2148 .wpsc-ct-actions {
2149 display: flex;
2150 }
2151
2152 .wpsc-reg-user > .wpsc-tff {
2153 padding-left: 0px !important;
2154 }
2155
2156 .wpsc-icon-wp-logo {
2157 height: 15px !important;
2158 }
2159
2160 /* Merge ticket popup css starts */
2161 .wpsc-merge-container {
2162 width: 100%;
2163 display: block;
2164 justify-content: space-between;
2165 }
2166
2167 .wpsc-merge-container .wpsc-merge-warning {
2168 background-color: #fff8e5;
2169 padding: 5px 15px;
2170 margin-bottom: 15px;
2171 font-size: 14px;
2172 border-radius: 5px;
2173 text-align: center;
2174 border: 1px solid #FFE79B;
2175 }
2176
2177 .wpsc-merge-container .wpsc-merge-box {
2178 width: 100%;
2179 background-color: #f0f0f0;
2180 position: relative;
2181 display: inline-flex;
2182 border-radius: 5px;
2183 padding: 10px 0px;
2184 }
2185
2186 .wpsc-merge-container .wpsc-merge-box:nth-child(4) {
2187 margin-bottom: 10px;
2188 }
2189
2190 .wpsc-merge-container .wpsc-merge-box .wpsc-merge-ticket-details {
2191 padding: 0px 15px;
2192 position: relative;
2193 flex: 1 1 30%;
2194 }
2195
2196 .wpsc-merge-container .wpsc-merge-box .wpsc-merge-id {
2197 padding: 0px 15px;
2198 position: relative;
2199 }
2200
2201 .wpsc-merge-container .wpsc-merge-box .wpsc-merge-id > div {
2202 font-size: 14px;
2203 color: #777;
2204 background-color: #E5E4E2;
2205 padding: 5px 15px;
2206 border-radius: 5px;
2207 border: 1px solid #D3D3D3;
2208 }
2209
2210 .wpsc-merge-container .wpsc-merge-box .wpsc-merge-ticket-details h3 {
2211 font-size: 14px;
2212 margin: 0em 0 0.8em 0;
2213 }
2214
2215 .wpsc-merge-container .wpsc-merge-box .wpsc-merge-ticket-details > p {
2216 margin: 5px 0 15px 0;
2217 font-size: 12px;
2218 line-height: 0.1;
2219 color: #777;
2220 }
2221
2222 .wpsc-merge-container .wpsc-merge-box .wpsc-merge-ticket-details > span {
2223 font-style: italic;
2224 }
2225
2226 .wpsc-merge-divider {
2227 width: 100%;
2228 display: block;
2229 height: 0.5px;
2230 background-color: #C8C8C8;
2231 margin-bottom: 1em;
2232 }
2233
2234 .wpsc-comment-textarea {
2235 width: 100%;
2236 }
2237
2238 .wpsc-merge-container .wpsc-merge-direction {
2239 width: 100%;
2240 }
2241
2242 .wpsc-merge-container .wpsc-merge-direction svg {
2243 width: 12px;
2244 padding: 20px 0px;
2245 display: flex;
2246 margin: auto;
2247 }
2248
2249 .wpsc-merge-comment-info {
2250 margin: 5px 0 15px 0;
2251 font-size: 12px;
2252 line-height: 0.1;
2253 color: #777;
2254 }
2255
2256 @media screen and (max-width: 768px) {
2257
2258 .wpsc-merge-comment-info {
2259 line-height: normal;
2260 }
2261
2262 .wpsc-merge-container .wpsc-merge-box {
2263 display: block;
2264 }
2265
2266 .wpsc-merge-container .wpsc-merge-box .wpsc-merge-id {
2267 padding: 0px 15px 10px 15px;
2268 }
2269 }
2270 /* Merge ticket popup css ends */