PluginProbe
SupportCandy – AI Customer Support Ticket System & Live Chatbot Agent / trunk
SupportCandy – AI Customer Support Ticket System & Live Chatbot Agent vtrunk
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 trunk, at framework/style.css

2,261 lines 43.1 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 .wpsc-ticket-list-tbl th.wpsc-tl-sortable-th {
468 cursor: pointer;
469 white-space: nowrap;
470 -webkit-user-select: none;
471 user-select: none;
472 }
473 .wpsc-ticket-list-tbl th .wpsc-tl-th-inner {
474 display: flex;
475 align-items: center;
476 }
477 .wpsc-ticket-list-tbl th .wpsc-tl-sort-icon {
478 display: inline-flex;
479 align-items: center;
480 flex: none;
481 height: 12px;
482 margin-left: 6px;
483 }
484 .wpsc-ticket-list-tbl th .wpsc-tl-sort-icon svg {
485 width: auto;
486 height: 100%;
487 fill: #a7aaad;
488 }
489 .wpsc-ticket-list-tbl th.wpsc-tl-sorted-asc .wpsc-tl-sort-icon svg,
490 .wpsc-ticket-list-tbl th.wpsc-tl-sorted-desc .wpsc-tl-sort-icon svg {
491 fill: #2271b1;
492 }
493
494 /* Modal Popup */
495 .wpsc-modal .loader,
496 .wpsc-modal .inner-container {
497 position: fixed;
498 display: flex;
499 justify-content: center;
500 width: 100%;
501 height: 100%;
502 top: 0;
503 left: 0;
504 }
505 .wpsc-modal .loader {
506 align-items: center;
507 }
508 .wpsc-modal .inner-container {
509 padding-top: 50px;
510 align-items: flex-start;
511 }
512 .wpsc-modal .loader img {
513 width: 50px;
514 }
515 .wpsc-modal .modal {
516 width: 650px;
517 display: block;
518 top: auto;
519 bottom: auto;
520 right: auto;
521 left: auto;
522 }
523 @media only screen and (max-width: 768px) {
524 .wpsc-modal .modal {
525 width: 90%;
526 }
527 }
528 .wpsc-modal-header {
529 font-size: 16px;
530 font-weight: 400;
531 text-align: left;
532 padding: 10px 15px;
533 }
534 .wpsc-modal-body {
535 display: flex;
536 font-size: 14px;
537 padding: 20px 15px 15px 15px;
538 max-height: 300px;
539 overflow: auto;
540 border-bottom: 1px solid #a4b0be;
541 }
542 .wpsc-modal-footer {
543 padding: 10px 15px;
544 }
545 #wpsc-container .select2-container {
546 width: 100% !important;
547 }
548 .select2-container .select2-selection--single {
549 height: 30px !important;
550 }
551 #wpsc-container input[type="text"],
552 #wpsc-container input[type="password"],
553 .wpsc-modal input[type="text"],
554 .wpsc-modal input[type="password"] {
555 padding: 0 8px;
556 line-height: 2 !important;
557 min-height: 30px !important;
558 max-height: 30px !important;
559 }
560 .wpsc-modal-body .wpsc-tff {
561 padding: 0 0 15px !important;
562 }
563 .wpsc-modal-body .wpsc-tff .name {
564 font-size: 12px !important;
565 font-weight: 600 !important;
566 }
567
568 /* Toggle Buttons */
569 .wpsc-toggle-btn {
570 display: flex;
571 width: fit-content;
572 border: 1px solid #c3c3c3;
573 }
574 .wpsc-toggle-btn div {
575 padding: 5px 10px;
576 background-color: #fff;
577 color: #000;
578 border: none !important;
579 cursor: pointer;
580 font-size: 12px;
581 }
582 .wpsc-toggle-btn div.active {
583 background-color: #c3c3c3;
584 }
585
586 /* Form fields */
587 .wpsc-input-group {
588 width: 100%;
589 display: flex;
590 flex-direction: column;
591 padding-bottom: 15px;
592 box-sizing: border-box;
593 }
594 .wpsc-input-group .label-container {
595 display: flex;
596 align-items: center;
597 color: #000;
598 margin-bottom: 2px;
599 }
600 .wpsc-input-group label {
601 font-size: 12px;
602 font-weight: 600;
603 margin-right: 5px;
604 }
605 .wpsc-input-group .label-container svg {
606 width: 12px;
607 margin-left: 5px;
608 }
609 .wpsc-input-group input[type="text"],
610 .wpsc-input-group select {
611 width: 100%;
612 max-width: 100%;
613 }
614 .wpsc-input-group .checkbox-group,
615 .wpsc-input-group .radio-group {
616 width: 100%;
617 display: flex;
618 flex-wrap: wrap;
619 align-items: center;
620 }
621 .wpsc-input-group .checkbox-group div,
622 .wpsc-input-group .radio-group div {
623 width: 250px;
624 display: flex;
625 flex-wrap: wrap;
626 align-items: center;
627 margin: 0 10px 5px 0;
628 }
629 .wpsc-input-group .checkbox-group div input,
630 .wpsc-input-group .radio-group div input {
631 margin: 0 5px 0 0 !important;
632 }
633 .wpsc-input-group .checkbox-group div span,
634 .wpsc-input-group .radio-group div span {
635 font-size: 12px;
636 font-weight: 300;
637 }
638 .wpsc-input-group .required-char {
639 font-size: 12px;
640 color: #ff0000;
641 }
642 .wpsc-input-group .divide-bar {
643 width: 100%;
644 display: flex;
645 flex-wrap: grid;
646 align-items: center;
647 }
648 .wpsc-form-devider {
649 width: 100%;
650 display: flex;
651 justify-content: center;
652 font-size: 18px;
653 margin-bottom: 15px;
654 }
655 .wpsc-form-devider span.label {
656 margin: 0 10px;
657 }
658
659 /* Individual Ticket */
660 .wpsc-it-container {
661 display: flex;
662 align-items: flex-start;
663 width: 100%;
664 box-sizing: border-box;
665 margin: 0 15px;
666 }
667 .wpsc-it-body {
668 display: flex;
669 flex-direction: column;
670 justify-content: flex-start;
671 flex-grow: 1;
672 gap: 10px;
673 }
674 .wpsc-it-sidebar-widget-container {
675 display: flex;
676 flex-direction: column;
677 justify-content: flex-start;
678 min-width: 250px;
679 max-width: 250px;
680 box-sizing: border-box;
681 margin-left: 20px;
682 }
683 .wpsc-it-body-item,
684 .wpsc-it-widget {
685 width: 100%;
686 box-sizing: border-box;
687 }
688 .wpsc-it-subject-container {
689 display: flex;
690 align-items: flex-start;
691 width: 100%;
692 box-sizing: border-box;
693 }
694 .wpsc-it-subject-container h2 {
695 flex-grow: 1;
696 margin: 0px !important;
697 font-size: 18px !important;
698 font-weight: 300;
699 color: #000;
700 }
701 .wpsc-it-subject-container span {
702 display: flex;
703 align-items: center;
704 cursor: pointer;
705 width: 20px;
706 margin-left: 5px;
707 }
708 .wpsc-it-subject-container svg {
709 width: 18px;
710 margin-bottom: 5px;
711 }
712 .wpsc-it-reply-section-container {
713 display: flex;
714 flex-direction: column;
715 width: 100%;
716 box-sizing: border-box;
717 }
718 #wpsc-it-bcc,
719 #wpsc-it-cc {
720 width: 100%;
721 box-shadow: 0px 0px 3px 2px #ddd !important;
722 border-radius: 0px !important;
723 margin-bottom: 10px;
724 }
725 .mce-tinymce {
726 margin-bottom: 10px !important;
727 box-shadow: 0px 0px 3px 2px #ddd !important;
728 }
729 .wpsc-it-editor-action-container {
730 display: flex;
731 align-items: flex-start;
732 flex-wrap: wrap;
733 width: 100%;
734 box-sizing: border-box;
735 margin: 0 1px;
736 }
737 .wpsc-it-editor-action-container > * {
738 flex: 1 1 auto;
739 }
740 .wpsc-it-editor-action-container .actions {
741 display: flex;
742 flex-direction: column;
743 flex-wrap: wrap;
744 margin-bottom: 5px;
745 }
746 .wpsc-it-editor-action-container .submit-container {
747 display: flex;
748 justify-content: flex-end;
749 }
750 .wpsc-it-editor-submit {
751 margin-left: 5px;
752 }
753 .wpsc-editor-actions,
754 .wpsc-editor-attachment-container {
755 display: flex;
756 flex-wrap: wrap;
757 }
758 .wpsc-editor-actions span {
759 cursor: pointer;
760 font-size: 16px;
761 font-weight: normal;
762 margin-right: 10px;
763 }
764 .wpsc-editor-attachment-container {
765 flex-direction: column;
766 }
767 .wpsc-editor-attachment {
768 display: flex;
769 align-items: center;
770 width: 100%;
771 max-width: 500px;
772 box-sizing: border-box;
773 margin-top: 5px;
774 padding: 5px 10px;
775 border-radius: 3px;
776 }
777 .wpsc-editor-attachment.upload-waiting {
778 background-color: #ffebce;
779 color: #eb961c;
780 }
781 .wpsc-editor-attachment.upload-success {
782 background-color: #c7ecee;
783 color: #2d9ba1;
784 }
785 .wpsc-editor-attachment.upload-error {
786 background-color: #ffe7e1;
787 color: #ec1010;
788 }
789 .wpsc-editor-attachment.upload-waiting .attachment-remove {
790 display: none;
791 }
792 .wpsc-editor-attachment.upload-success .attachment-waiting,
793 .wpsc-editor-attachment.upload-error .attachment-waiting {
794 display: none;
795 }
796 .wpsc-editor-attachment .attachment-label {
797 flex-grow: 1;
798 font-size: 12px;
799 font-weight: 400;
800 }
801 .wpsc-editor-attachment .attachment-remove,
802 .wpsc-editor-attachment .attachment-waiting {
803 display: flex;
804 align-items: center;
805 margin-left: 5px;
806 }
807 .wpsc-editor-attachment .attachment-remove {
808 cursor: pointer;
809 }
810 .wpsc-editor-attachment svg {
811 height: 12px;
812 }
813 .wpsc-it-thread-section-container {
814 display: flex;
815 flex-direction: column;
816 width: 100%;
817 box-sizing: border-box;
818 margin-top: 35px;
819 margin-bottom: 0px !important;
820 }
821 .wpsc-thread {
822 display: flex;
823 width: 100%;
824 box-sizing: border-box;
825 margin-bottom: 50px;
826 }
827 .wpsc-thread .thread-avatar {
828 display: flex;
829 align-items: flex-start;
830 }
831 .wpsc-thread .thread-avatar img {
832 border-radius: 22px;
833 max-width: 32px;
834 }
835 .wpsc-thread .thread-avatar svg {
836 width: 32px;
837 color: #777;
838 }
839 .wpsc-thread .thread-body {
840 display: flex;
841 flex-direction: column;
842 align-items: flex-start;
843 flex-grow: 1;
844 margin-left: 10px;
845 }
846 .wpsc-thread .thread-header {
847 display: flex;
848 width: 100%;
849 margin-bottom: 10px;
850 }
851 .wpsc-thread .user-info {
852 display: flex;
853 flex-grow: 1;
854 flex-direction: column;
855 }
856 .wpsc-thread .user-info h2 {
857 font-size: 14px;
858 font-weight: 600;
859 margin: 0;
860 }
861 .wpsc-thread .thread-type {
862 opacity: 0.5;
863 }
864 .wpsc-thread .thread-time,
865 .wpsc-thread-logs {
866 font-size: 10px;
867 font-weight: normal;
868 }
869 .wpsc-thread .actions {
870 display: none;
871 align-items: flex-start;
872 justify-content: flex-end;
873 }
874 .wpsc-thread:hover .actions {
875 display: flex;
876 }
877 .wpsc-thread .actions span {
878 display: flex;
879 align-items: flex-start;
880 cursor: pointer;
881 margin-left: 5px;
882 }
883 .wpsc-thread .actions svg {
884 height: 14px;
885 }
886 .wpsc-thread .thread-text,
887 .wpsc-modal-thread-log .thread-text {
888 font-size: 14px;
889 font-weight: 400;
890 margin-bottom: 10px;
891 word-break: break-word;
892 }
893 .wpsc-thread .thread-text {
894 overflow: hidden;
895 }
896 .wpsc-thread .thread-text.wpsc-collapsed {
897 max-height: 100px;
898 }
899 .wpsc-thread .thread-text.wpsc-expanded {
900 max-height: none;
901 }
902 .wpsc-thread .thread-text ul{
903 list-style-type: disc !important;
904 padding-inline-start: 2em;
905 }
906 .wpsc-thread p {
907 font-size: 14px;
908 font-weight: 400;
909 }
910 .wpsc-log-diff {
911 display: flex;
912 width: 100%;
913 box-sizing: border-box;
914 }
915 .wpsc-log-diff .lhs,
916 .wpsc-log-diff .transform-icon,
917 .wpsc-log-diff .rhs {
918 display: flex;
919 align-items: center;
920 flex-wrap: wrap;
921 word-break: break-word;
922 overflow-wrap: anywhere;
923 white-space: normal;
924 }
925 .wpsc-log-diff .transform-icon svg {
926 width: 12px;
927 margin: 0 10px;
928 }
929 .wpsc-edit-thread {
930 display: flex;
931 width: 100%;
932 flex-direction: column;
933 }
934 .wpsc-modal-thread-log {
935 width: 100%;
936 display: flex;
937 flex-direction: column;
938 }
939 .wpsc-it-widget {
940 display: flex;
941 flex-direction: column;
942 width: 100%;
943 min-width: 100%;
944 max-width: 100%;
945 box-sizing: border-box;
946 margin-bottom: 15px;
947 }
948 .wpsc-widget-header {
949 display: flex;
950 align-items: center;
951 padding: 10px;
952 }
953 .wpsc-widget-header h2 {
954 font-size: 14px !important;
955 font-weight: 600;
956 flex-grow: 1;
957 margin: 0px !important;
958 }
959 .wpsc-widget-header span {
960 display: flex;
961 align-items: center;
962 margin-left: 5px;
963 cursor: pointer;
964 }
965 .wpsc-widget-header svg {
966 width: 14px;
967 }
968 .wpsc-widget-body {
969 display: flex;
970 flex-direction: column;
971 font-size: 14px;
972 font-weight: normal;
973 padding: 10px 10px 0;
974 overflow-y: auto;
975 }
976 .wpsc-widget-body .info-list-item {
977 display: flex;
978 align-items: center;
979 flex-wrap: wrap;
980 margin-bottom: 10px;
981 }
982 .wpsc-widget-body .info-list-item .info-label {
983 margin-right: 5px;
984 }
985 .wpsc-widget-default {
986 margin-bottom: 10px;
987 }
988 .info-val.fullwidth {
989 width: 100%;
990 }
991 .wpsc-widget-body .user-list-item {
992 display: flex;
993 align-items: flex-start;
994 margin-bottom: 10px;
995 }
996 .wpsc-widget-body .user-list-item img {
997 border-radius: 20px;
998 margin-right: 5px;
999 }
1000 .wpsc-widget-body .user-list-item .ul-body {
1001 display: flex;
1002 flex-direction: column;
1003 justify-content: center;
1004 min-height: 40px;
1005 }
1006 .wpsc-widget-body .user-list-item .ul-label {
1007 font-size: 14px;
1008 font-weight: normal;
1009 margin-bottom: 5px;
1010 }
1011 .wpsc-widget-body .user-list-item .ul-actions {
1012 display: flex;
1013 align-items: center;
1014 }
1015 .wpsc-widget-body .user-list-item .ul-actions span {
1016 display: flex;
1017 align-items: center;
1018 cursor: pointer;
1019 margin-right: 5px;
1020 }
1021 .wpsc-widget-body .user-list-item .ul-actions svg {
1022 height: 14px;
1023 }
1024 .wpsc-it-mob-widget-trigger-btn {
1025 display: flex;
1026 cursor: pointer;
1027 padding: 10px;
1028 align-items: center;
1029 color: #000;
1030 box-shadow: 0px 0px 3px 2px #ddd !important;
1031 }
1032 .wpsc-it-mob-widget-trigger-btn h2 {
1033 flex-grow: 1;
1034 font-size: 16px !important;
1035 font-weight: 600;
1036 margin: 0px !important;
1037 color: #000;
1038 }
1039 .wpsc-it-mob-widget-trigger-btn span {
1040 display: flex;
1041 align-items: center;
1042 }
1043 .wpsc-it-mob-widget-trigger-btn svg {
1044 height: 16px;
1045 }
1046 .wpsc-it-mob-widgets-inner-container {
1047 margin-top: 15px;
1048 }
1049 .wpsc-thread-attachments {
1050 display: flex;
1051 flex-direction: column;
1052 margin-bottom: 10px;
1053 }
1054 .wpsc-attachment-header {
1055 flex-grow: 1;
1056 margin: 0 0 2px 0 !important;
1057 font-size: 12px;
1058 font-weight: bold;
1059 }
1060 .wpsc-attachment-item {
1061 display: flex;
1062 align-items: center;
1063 max-width: 400px;
1064 margin-bottom: 2px;
1065 }
1066 .wpsc-attachment-name {
1067 flex-grow: 1;
1068 cursor: pointer;
1069 }
1070 .wpsc-thread-logs {
1071 display: flex;
1072 flex-direction: column;
1073 }
1074 #wpsc-container table,
1075 #wpsc-container th,
1076 #wpsc-container td,
1077 .wpsc-modal table,
1078 .wpsc-modal th,
1079 .wpsc-modal td {
1080 border: 1px solid #ddd;
1081 border-collapse: collapse;
1082 cursor: pointer;
1083 }
1084 .dt-search {
1085 margin-bottom: 10px !important;
1086 }
1087 #wpsc-container .dataTables_wrapper th,
1088 #wpsc-container .dataTables_wrapper td,
1089 #wpsc-container table.dataTable.no-footer,
1090 .wpsc-modal .dataTables_wrapper th,
1091 .wpsc-modal .dataTables_wrapper td,
1092 .wpsc-modal table.dataTable.no-footer {
1093 border-bottom: 1px solid #ddd !important;
1094 }
1095 .wpsc_url_auth_sign_in {
1096 padding-bottom: 10px;
1097 }
1098 .wpsc_url_auth_sign_in p {
1099 margin: 0;
1100 }
1101 .wpsc_auth_header {
1102 font-size: 16px;
1103 }
1104 .wpsc_auth_link {
1105 font-size: 12px;
1106 }
1107
1108 /* Macro */
1109 .wpscMacros .extra-info {
1110 font-size: 12px;
1111 color: #777;
1112 }
1113
1114 /* Form Filter */
1115 .wpsc-form-filter-container,
1116 .wpsc-form-filter-container .and-item {
1117 width: 100%;
1118 display: flex;
1119 flex-direction: column;
1120 align-items: center;
1121 gap: 15px;
1122 border: 1px dashed #000;
1123 border-radius: 5px;
1124 padding: 15px;
1125 box-sizing: border-box;
1126 }
1127 .wpsc-form-filter-container .and-container,
1128 .wpsc-form-filter-container .or-container {
1129 width: 100%;
1130 display: flex;
1131 flex-direction: column;
1132 }
1133 .wpsc-form-filter-container .and-container {
1134 gap: 15px;
1135 }
1136 .wpsc-form-filter-container .or-container {
1137 gap: 5px;
1138 }
1139 .wpsc-form-filter-container button {
1140 width: fit-content;
1141 }
1142 .wpsc-form-filter-item {
1143 display: flex;
1144 width: 100%;
1145 align-items: center;
1146 margin-bottom: 5px;
1147 padding: 5px 5px 0 5px;
1148 background-color: #dcdcdc;
1149 border-radius: 3px;
1150 box-sizing: border-box;
1151 }
1152 .wpsc-form-filter-item .content {
1153 display: flex;
1154 align-items: center;
1155 flex-wrap: wrap;
1156 }
1157 .wpsc-form-filter-item .operator {
1158 min-height: 28px !important;
1159 height: 28px !important;
1160 }
1161 .wpsc-form-filter-item .remove-container {
1162 display: flex;
1163 align-items: center;
1164 justify-content: flex-end;
1165 flex-grow: 1;
1166 }
1167 .wpsc-form-filter-item .content .item {
1168 width: 130px;
1169 max-width: 130px;
1170 margin: 0 5px 5px 0;
1171 }
1172 .wpsc-form-filter-item .content .item.operand.single {
1173 width: 250px;
1174 max-width: 250px;
1175 }
1176 .wpsc-form-filter-item .remove-container span {
1177 display: flex;
1178 align-items: center;
1179 margin-bottom: 5px;
1180 cursor: pointer;
1181 }
1182 .wpsc-form-filter-item .remove-container svg {
1183 width: 18px;
1184 color: #c3c3c3;
1185 }
1186 .wpsc-form-filter-add-btn {
1187 width: fit-content;
1188 }
1189 .select2-container .select2-selection--single {
1190 margin: 0 !important;
1191 }
1192 .wpsc-form-filter-item .content .wpsc-inline-loader {
1193 margin-bottom: 5px;
1194 }
1195
1196 /* Snippets */
1197 .wpsc-snippets {
1198 display: none;
1199 }
1200
1201 /* Flatpicker */
1202 .flatpickr-calendar.open {
1203 z-index: 999999999 !important;
1204 }
1205
1206 /* Section */
1207 .wpsc-section-header {
1208 font-size: 22px;
1209 font-weight: 300;
1210 margin: 0 5px 15px 0;
1211 }
1212 .wpsc-section-container {
1213 border: none;
1214 box-shadow: 0 0 3px 0 #a4b0be;
1215 border-radius: 5px;
1216 padding: 15px 0 0 0;
1217 width: 100%;
1218 font-size: 12px;
1219 box-sizing: border-box;
1220 }
1221
1222 /* TinyMCE editor switching */
1223 .wpsc_tinymce_editor_btns {
1224 display: flex !important;
1225 justify-content: flex-end;
1226 margin-bottom: 4px;
1227 }
1228 .wpsc_tinymce_editor_btns .inner-container {
1229 border: 1px solid #c3c3c3;
1230 display: flex;
1231 }
1232 .wpsc-switch-editor {
1233 cursor: pointer;
1234 border: none;
1235 padding: 6px 24px !important;
1236 text-align: center;
1237 font-size: 13px;
1238 background-color: #fff;
1239 color: #000;
1240 border-radius: 0 !important;
1241 margin: 0 !important;
1242 }
1243 .wpsc-switch-editor.active {
1244 background: #c3c3c3;
1245 }
1246 .wpsc_textarea:not(#wpsc-en-body) {
1247 height: 160px !important;
1248 width: 100% !important;
1249 }
1250 /* Email Notifications body editor (Ticket Notifications, OTP, Satisfaction Survey,
1251 Auto Close Ticket, WooCommerce create ticket): allow vertical resize handle to work
1252 by not forcing height with !important. Scoped to this id only so other .wpsc_textarea
1253 usages (canned replies, GDPR/T&C, ticket description, print templates, etc.) are unaffected. */
1254 #wpsc-en-body.wpsc_textarea {
1255 height: 160px;
1256 width: 100% !important;
1257 resize: vertical;
1258 }
1259
1260 /* Ticket form field */
1261 .wpsc-tff {
1262 display: flex;
1263 flex-direction: column;
1264 }
1265 .wpsc-tff .name {
1266 font-weight: bold;
1267 }
1268 .wpsc-tff .extra-info {
1269 font-size: 10px;
1270 margin-bottom: 5px;
1271 }
1272 .wpsc-tff textarea {
1273 min-height: 100px;
1274 }
1275 .wpsc-tff-label {
1276 display: flex;
1277 justify-content: flex-start;
1278 align-items: flex-start;
1279 }
1280 .wpsc-tff-label .required-indicator {
1281 color: #ff0000;
1282 margin-left: 5px;
1283 }
1284 .wpsc-hidden {
1285 display: none !important;
1286 }
1287 .wpsc-thread-info {
1288 display: flex;
1289 width: 100%;
1290 flex-direction: column;
1291 align-items: flex-start;
1292 }
1293 .wpsc-thread-info .info-list-item {
1294 display: flex;
1295 flex-wrap: wrap;
1296 margin-bottom: 10px;
1297 }
1298 .wpsc-thread-info .info-list-item .info-label {
1299 font-size: 14px;
1300 font-weight: normal;
1301 margin-right: 5px;
1302 }
1303 .wpsc-thread-info .info-list-item .info-val {
1304 font-size: 14px;
1305 font-weight: normal;
1306 }
1307 .wpsc-ticket-thread-expander {
1308 margin-bottom: 10px;
1309 color: #003eff;
1310 cursor: pointer;
1311 }
1312
1313 /** Agent profile */
1314 .wpsc-agent-profile {
1315 width: 100%;
1316 display: flex;
1317 margin: 0 15px 15px;
1318 }
1319 .wpsc-ap-mobile-menu {
1320 width: 100%;
1321 margin: 0 15px 10px;
1322 }
1323 .wpsc-ap-menu-container {
1324 min-width: 250px;
1325 display: flex;
1326 flex-wrap: wrap;
1327 flex-direction: column;
1328 align-items: center;
1329 justify-content: flex-start;
1330 padding: 10px;
1331 margin-right: 30px;
1332 background-color: #fff;
1333 border-radius: 5px;
1334 box-shadow: 6px 6px 10px 0px #ced6e0;
1335 }
1336 .wpsc-ap-menu-body {
1337 display: flex;
1338 flex-direction: column;
1339 align-items: flex-start;
1340 justify-content: flex-start;
1341 flex-wrap: wrap;
1342 flex-grow: 1;
1343 }
1344 .wpsc-ap-nav {
1345 width: 100%;
1346 display: flex;
1347 align-items: center;
1348 padding: 10px;
1349 box-sizing: border-box;
1350 border: none;
1351 border-radius: 5px;
1352 background-color: #fff;
1353 color: #707070;
1354 cursor: pointer;
1355 margin-bottom: 5px;
1356 }
1357 .wpsc-ap-nav.active,
1358 .wpsc-ap-nav:hover {
1359 color: #fff;
1360 }
1361 .wpsc-ap-nav svg {
1362 width: 18px;
1363 margin-right: 10px;
1364 }
1365 .wpsc-ap-nav label {
1366 font-size: 14px !important;
1367 }
1368 .wpsc-ap-tab-container {
1369 display: flex;
1370 flex-wrap: wrap;
1371 width: 100%;
1372 align-items: center;
1373 margin-bottom: 10px;
1374 }
1375 .wpsc-ap-tab-container button {
1376 padding: 7px 15px;
1377 font-size: 16px;
1378 font-weight: normal;
1379 border: none !important;
1380 color: #6a6a6a;
1381 background-color: transparent;
1382 cursor: pointer;
1383 border-radius: 16px;
1384 margin: 0 5px 5px 0;
1385 }
1386 .wpsc-ap-tab-container button.active,
1387 .wpsc-ap-tab-container button:hover {
1388 color: #fff;
1389 background-color: #ffa04a;
1390 }
1391
1392 /* date input */
1393 .wpsc-input-close-group {
1394 width: 100%;
1395 display: flex;
1396 }
1397 .wpsc-input-close-group input {
1398 width: 100%;
1399 }
1400 .wpsc-input-close-group span {
1401 display: flex !important;
1402 margin-left: -18px !important;
1403 align-items: center !important;
1404 cursor: pointer !important;
1405 }
1406 .wpsc-input-close-group svg {
1407 height: 10px;
1408 color: #888;
1409 }
1410 .wpsc-no-ticket-found {
1411 display: flex;
1412 justify-content: center;
1413 width: 100%;
1414 padding: 0 0 50px 0;
1415 color: #8a8a8a;
1416 align-items: center;
1417 font-size: 14px;
1418 text-decoration: none;
1419 cursor: default;
1420 }
1421
1422 /* working hrs */
1423 table.wpsc-working-hrs,
1424 table.wpsc-working-hrs tr,
1425 table.wpsc-working-hrs td {
1426 border: none !important;
1427 font-size: 13px;
1428 color: #777;
1429 }
1430 table.wpsc-working-hrs td {
1431 padding: 0 15px 15px !important;
1432 }
1433 table.wpsc-working-hrs {
1434 width: fit-content !important;
1435 }
1436 .wpsc-working-hrs .dayName {
1437 font-weight: 600;
1438 }
1439
1440 /* Shortcode */
1441 .wpsc-shortcode-container {
1442 border-radius: 5px;
1443 overflow: hidden;
1444 }
1445
1446 /* wpsc image */
1447 .mce-i-wpsc_insert_editor_img::before {
1448 content: "\e014";
1449 }
1450
1451 /* Theme compatibility */
1452 #wpsc-container label,
1453 .wpsc-humbargar-menu label,
1454 .wpsc-modal label {
1455 margin: 0px !important;
1456 }
1457 #wpsc-container form,
1458 .wpsc-modal form {
1459 margin: 0 !important;
1460 }
1461
1462 /* Select */
1463 #wpsc-container select,
1464 .wpsc-modal select {
1465 font-size: 14px !important;
1466 min-height: 30px !important;
1467 max-height: 30px !important;
1468 padding: 0 24px 0 8px !important;
1469 line-height: 2 !important; // fix for wordpress 7
1470 }
1471
1472 /* Checkboxes */
1473 #wpsc-container .checkbox-container,
1474 .wpsc-modal .checkbox-container {
1475 display: flex;
1476 line-height: normal;
1477 }
1478 #wpsc-container .checkbox-container input,
1479 .wpsc-modal .checkbox-container input {
1480 padding: 0;
1481 height: initial;
1482 width: initial;
1483 margin-bottom: 0;
1484 display: none;
1485 cursor: pointer;
1486 }
1487 #wpsc-container .checkbox-container label,
1488 .wpsc-modal .checkbox-container label {
1489 position: relative;
1490 cursor: pointer;
1491 padding: 0 !important;
1492 font-size: 14px !important;
1493 }
1494 #wpsc-container .checkbox-container label:before,
1495 .wpsc-modal .checkbox-container label:before {
1496 content: "";
1497 -webkit-appearance: none;
1498 background-color: #fff;
1499 box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05),
1500 inset 0px -15px 10px -12px rgba(0, 0, 0, 0.05);
1501 display: inline-block;
1502 position: relative;
1503 vertical-align: middle;
1504 cursor: pointer;
1505 margin-right: 5px;
1506 border: 1px solid #8a8a8a;
1507 }
1508 #wpsc-container .checkbox-container input:checked + label:after,
1509 .wpsc-modal .checkbox-container input:checked + label:after {
1510 content: "";
1511 display: block;
1512 position: absolute;
1513 top: 1px;
1514 left: 7px;
1515 width: 6px;
1516 height: 12px;
1517 border: solid #0079bf;
1518 border-width: 0 2px 2px 0;
1519 transform: rotate(45deg);
1520 }
1521 #wpsc-container .checkbox-container label,
1522 .wpsc-modal .checkbox-container label {
1523 display: flex;
1524 }
1525 #wpsc-container .checkbox-container label:before,
1526 .wpsc-modal .checkbox-container label:before {
1527 width: 18px !important;
1528 height: 18px !important;
1529 box-sizing: border-box;
1530 padding: 8px;
1531 }
1532 #wpsc-container .checkbox-container label:after,
1533 .wpsc-modal .checkbox-container label:after {
1534 flex-grow: 1;
1535 }
1536 #wpsc-container .checkbox-container p,
1537 .wpsc-modal .checkbox-container p {
1538 margin: 0 !important;
1539 }
1540
1541 /* Radio button */
1542 #wpsc-container .radio-container,
1543 .wpsc-modal .radio-container {
1544 display: flex;
1545 line-height: normal;
1546 margin-bottom: 5px;
1547 }
1548 #wpsc-container .radio-container input,
1549 .wpsc-modal .radio-container input {
1550 display: none !important;
1551 }
1552 #wpsc-container .radio-container input + label,
1553 .wpsc-modal .radio-container input + label {
1554 position: relative;
1555 padding-left: 23px;
1556 cursor: pointer;
1557 line-height: 18px;
1558 display: inline-block;
1559 }
1560 #wpsc-container .radio-container input + label:before,
1561 .wpsc-modal .radio-container input + label:before {
1562 content: "";
1563 position: absolute;
1564 left: 0;
1565 top: 0;
1566 width: 18px;
1567 height: 18px;
1568 border-radius: 100%;
1569 background: #fff;
1570 box-sizing: border-box;
1571 }
1572 #wpsc-container .radio-container input + label:after,
1573 .wpsc-modal .radio-container input + label:after {
1574 content: "";
1575 width: 12px;
1576 height: 12px;
1577 background: #0079bf;
1578 position: absolute;
1579 top: 3px;
1580 left: 3px;
1581 border-radius: 100%;
1582 -webkit-transition: all 0.2s ease;
1583 transition: all 0.2s ease;
1584 }
1585 #wpsc-container .radio-container input:not(:checked) + label:after,
1586 .wpsc-modal .radio-container input:not(:checked) + label:after {
1587 opacity: 0;
1588 -webkit-transform: scale(0);
1589 transform: scale(0);
1590 }
1591 #wpsc-container .radio-container input:checked + label:after,
1592 .wpsc-modal .radio-container input:checked + label:after {
1593 opacity: 1;
1594 -webkit-transform: scale(1);
1595 transform: scale(1);
1596 }
1597 #wpsc-container .radio-container p,
1598 .wpsc-modal .radio-container p {
1599 margin: 0 !important;
1600 }
1601
1602 /* Buttons */
1603 .wpsc-button {
1604 border-radius: 5px !important;
1605 padding: 5px 10px !important;
1606 cursor: pointer;
1607 line-height: normal;
1608 }
1609 .wpsc-button.margin-right {
1610 margin-right: 5px;
1611 }
1612 .wpsc-button.margin-left {
1613 margin-left: 5px;
1614 }
1615 .wpsc-button.small {
1616 font-size: 12px !important;
1617 }
1618 .wpsc-button.normal {
1619 font-size: 14px !important;
1620 }
1621
1622 /* Links */
1623 .wpsc-link {
1624 cursor: pointer !important;
1625 text-decoration: none !important;
1626 }
1627 .wpsc-link:hover {
1628 text-decoration: underline !important;
1629 }
1630
1631 /* Auth screen */
1632 .wpsc-auth-container {
1633 display: flex;
1634 margin: 20px;
1635 align-items: center;
1636 justify-content: center;
1637 }
1638 .wpsc-auth-container .auth-inner-container {
1639 display: flex;
1640 flex-direction: column;
1641 max-width: 300px !important;
1642 }
1643 .wpsc-auth-container h2 {
1644 font-size: 25px !important;
1645 margin: 0 0 10px 0 !important;
1646 text-align: left;
1647 }
1648 .wpsc-auth-container input[type="text"],
1649 .wpsc-auth-container input[type="password"] {
1650 width: 100% !important;
1651 height: 30px !important;
1652 font-size: 14px !important;
1653 margin: 0 0 5px !important;
1654 }
1655 .wpsc-auth-container .remember-me {
1656 margin-bottom: 5px;
1657 }
1658 .wpsc-auth-container button {
1659 margin-bottom: 5px !important;
1660 }
1661 .wpsc-auth-container .auth-links {
1662 margin: 0 !important;
1663 display: flex;
1664 flex-direction: column;
1665 }
1666 .wpsc-auth-container .auth-links a {
1667 margin-bottom: 5px !important;
1668 }
1669 .wpsc-shortcode-container .select2-container,
1670 .wpsc-section-container .select2-container,
1671 .wpsc-modal-body .select2-container {
1672 width: 100% !important;
1673 }
1674
1675 /* file attachment notice */
1676 .wpsc-file-attachment-notice {
1677 align-self: flex-start;
1678 font-style: italic;
1679 font-size: 10px;
1680 font-weight: normal;
1681 color: #6e6e6e;
1682 margin-bottom: 10px;
1683 }
1684
1685 /* Progrss loader */
1686 .wpscPrograssLoaderContainer {
1687 width: 100%;
1688 height: 100%;
1689 display: flex;
1690 justify-content: center;
1691 align-items: center;
1692 }
1693 .wpscPrograssLoader {
1694 width: 100px;
1695 display: inline-block;
1696 position: relative;
1697 text-align: center;
1698 line-height: 1.2;
1699 }
1700 .wpscPrograssLoader strong {
1701 position: absolute;
1702 top: 30px;
1703 left: 0;
1704 width: 100%;
1705 text-align: center;
1706 line-height: 40px;
1707 font-size: 30px;
1708 }
1709 .wpscPrograssLoader strong small {
1710 font-size: 15px;
1711 }
1712 .thread-body img {
1713 max-width: 100% !important;
1714 }
1715
1716 /* Setting datatables */
1717 .wpsc-setting-tbl {
1718 width: 100% !important;
1719 margin-bottom: 20px !important;
1720 border-collapse: collapse !important;
1721 border-spacing: 0 !important;
1722 border: none !important;
1723 font-size: 13px !important;
1724 }
1725 .wpsc-setting-tbl th,
1726 .wpsc-setting-tbl td {
1727 text-align: left !important;
1728 padding: 10px !important;
1729 border: none !important;
1730 box-sizing: border-box;
1731 }
1732 .wpsc-setting-tbl tbody tr:hover {
1733 cursor: pointer;
1734 }
1735 .wpsc-setting-tbl th {
1736 background-color: #313042;
1737 color: #fff;
1738 }
1739 .wpsc-setting-tbl tr:nth-child(even) {
1740 background-color: #f2f2f2;
1741 color: #2c3e50;
1742 }
1743 .wpsc-setting-tbl tr:nth-child(odd) {
1744 background-color: #fff;
1745 color: #2c3e50;
1746 }
1747 .wpsc-setting-tbl tbody tr:hover {
1748 background-color: #dfe4ea;
1749 color: #2c3e50;
1750 }
1751 .wpsc-thread .user-info h2.user-name {
1752 margin-right: 5px;
1753 }
1754 .options button {
1755 width: fit-content;
1756 }
1757
1758 /* Progrssbar */
1759 .wpsc-pg-container {
1760 width: 100%;
1761 }
1762 .wpsc-pg-container .ui-progressbar {
1763 position: relative;
1764 }
1765 .wpsc-pg-label {
1766 position: absolute;
1767 left: 50%;
1768 top: 4px;
1769 font-weight: bold;
1770 text-shadow: 1px 1px 0 #fff;
1771 }
1772
1773 /* Ticket tags */
1774 .wpsc-ticket-tag {
1775 display: flex;
1776 justify-content: center;
1777 align-items: center;
1778 border-radius: 5px;
1779 font-weight: normal;
1780 width: fit-content;
1781 font-size: 12px;
1782 padding: 5px 5px;
1783 margin: 0 5px 5px 0;
1784 cursor: pointer;
1785 line-height: 1em;
1786 }
1787 .wpsc-tag-list {
1788 display: flex;
1789 flex-wrap: wrap;
1790 margin-bottom: 10px;
1791 }
1792
1793 /* Agent collision */
1794 .wpsc-agent-collision {
1795 margin: 0;
1796 }
1797 .wpsc-agent-collision .wpsc-widget-body {
1798 display: flex;
1799 flex-direction: row;
1800 flex-wrap: wrap;
1801 gap: 5px;
1802 padding: 10px;
1803 }
1804 .wpsc-ac-agent {
1805 display: flex;
1806 width: fit-content;
1807 align-items: center;
1808 gap: 5px;
1809 padding: 5px;
1810 border-radius: 5px;
1811 font-size: 13px;
1812 }
1813 .wpsc-ac-agent img {
1814 border-radius: 50%;
1815 }
1816
1817 /* Dashboard widgets css */
1818
1819 .wpsc-dash-widget svg {
1820 color: #ccc;
1821 height: 80px !important;
1822 }
1823
1824 .wpsc-dashboard-widget-icon-header {
1825 display: flex;
1826 align-items: center;
1827 }
1828
1829 .wpsc-dashboard-card-icon-header {
1830 cursor: pointer;
1831 }
1832
1833 /* Style the row of small widgets */
1834 .wpsc-dash-widgets-row {
1835 display: flex;
1836 flex-wrap: wrap;
1837 }
1838
1839 /* Style individual small widgets */
1840 .wpsc-dash-widget {
1841 margin: 10px;
1842 position: relative;
1843 box-sizing: border-box;
1844 background-color: #f4f6f9;
1845 border: 1px solid #ccc;
1846 border-radius: 5px;
1847 padding: 10px;
1848 box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
1849 }
1850
1851 .wpsc-dash-widget2 {
1852 padding: 10px;
1853 }
1854
1855 .wpsc-dash-widget-small {
1856 width: calc(20% - 20px);
1857 display: flex;
1858 flex-direction: row;
1859 justify-content: space-between;
1860 align-items: center;
1861 }
1862
1863 .wpsc-dash-widget-small .wpsc-dash-widget-icon {
1864 font-size: 70px; /* Increase the size as needed */
1865 color: #ccc; /* Change the icon color as needed */
1866 margin-left: 10px; /* Add margin to separate from the text */
1867 }
1868
1869 .wpsc-dash-widget-small svg {
1870 opacity: 0.2;
1871 }
1872
1873 .wpsc-dash-widget-mid {
1874 width: calc(50% - 20px);
1875 }
1876
1877 .wpsc-dash-widget-large {
1878 width: calc(100% - 20px);
1879 }
1880
1881 .wpsc-widget h2 {
1882 font-size: 18px;
1883 margin-bottom: 5px;
1884 }
1885
1886 .wpsc-dash-widget-small h2 {
1887 margin-bottom: 5px;
1888 font-size: 35px;
1889 font-weight: 600;
1890 }
1891
1892 /* Style the header of widgets with icons and actions */
1893 .wpsc-dash-widget-header {
1894 display: flex;
1895 justify-content: space-between;
1896 align-items: center;
1897 margin-bottom: 10px;
1898 border-bottom: 1px solid #ccc;
1899 padding-bottom: 10px;
1900 }
1901
1902 .wpsc-dash-widget-header svg {
1903 color: #ccc;
1904 height: 15px !important;
1905 margin: 0px 5px 0px 0px;
1906 }
1907
1908 .wpsc-dash-widget-actions {
1909 /* Widget action links styles here */
1910 }
1911
1912 .wpsc-dash-widget-actions a {
1913 cursor: pointer;
1914 text-decoration: none;
1915 }
1916
1917 /* Style the content of widgets */
1918 .wpsc-dash-widget-content {
1919 /* Widget content styles here */
1920 }
1921
1922 .wpsc-actions-btn-setting {
1923 width: 100%;
1924 display: flex;
1925 align-items: center;
1926 justify-content: space-between;
1927 padding-bottom: 15px;
1928 }
1929
1930 /* Style full-width widgets */
1931 .wpsc-full-width-widget {
1932 width: 100%;
1933 }
1934
1935 .wpsc-dashboard-view {
1936 width: 100%;
1937 }
1938
1939 /* table scrollable */
1940 .wpsc-db-agent-list {
1941 width: 100%;
1942 border-collapse: collapse;
1943 }
1944
1945 .wpsc-dash-widget-content::-webkit-scrollbar,
1946 .wpsc-widget-body::-webkit-scrollbar {
1947 width: 5px;
1948 height: 5px;
1949 }
1950
1951 .wpsc-dash-widget-content::-webkit-scrollbar-thumb,
1952 .wpsc-widget-body::-webkit-scrollbar-thumb {
1953 margin-top: 10px;
1954 background-color: #cfcfcf;
1955 border-radius: 10px;
1956 }
1957
1958 .wpsc-dash-widget-content::-webkit-scrollbar-track,
1959 .wpsc-widget-body::-webkit-scrollbar-track {
1960 background-color: #ffffff;
1961 }
1962 /* table scrollable end */
1963
1964 .wpsc-dash-widget-mid .wpsc-dash-widget-content {
1965 max-height: 400px;
1966 height: 400px;
1967 }
1968
1969 .wpsc-dbw-info {
1970 overflow-y: auto;
1971 }
1972
1973 /* Additional styles for responsive design can be added as needed */
1974 @media screen and (max-width: 1200px) {
1975 .wpsc-dash-widget-small {
1976 width: calc(25% - 20px);
1977 }
1978
1979 .wpsc-dash-widget-mid {
1980 width: calc(100% - 20px);
1981 }
1982 }
1983
1984 @media screen and (max-width: 768px) {
1985 .wpsc-dash-widget-small {
1986 width: calc(33% - 20px);
1987 }
1988
1989 .wpsc-dash-widgets-row {
1990 margin: 0 10px;
1991 }
1992
1993 .wpsc-widget {
1994 width: 100%;
1995 }
1996
1997 .wpsc-dash-widget-small h2 {
1998 font-size: 25px;
1999 margin-bottom: 5px;
2000 font-weight: 600;
2001 }
2002
2003 .wpsc-dash-widget-small p {
2004 font-size: 14px;
2005 font-weight: 500;
2006 }
2007
2008 .wpsc-dash-widget svg {
2009 height: 60px !important;
2010 }
2011
2012 .wpsc-dashboard-widget-icon-header {
2013 display: inline-flex;
2014 align-items: center;
2015 }
2016
2017 .wpsc-dash-widget-header svg {
2018 height: 30px !important;
2019 }
2020
2021 .wpsc-dash-widget-actions {
2022 padding-top: 10px;
2023 }
2024
2025 .wpsc-dash-widget-mid {
2026 width: calc(100% - 20px);
2027 }
2028 }
2029
2030 @media screen and (max-width: 600px) {
2031 .wpsc-dash-widget-small {
2032 width: calc(50% - 20px);
2033 }
2034
2035 .wpsc-dashboard-view,
2036 .wpsc-dashboard-widget-view {
2037 display: contents;
2038 }
2039
2040 .wpsc-dash-widget-small h2 {
2041 font-size: 18px;
2042 margin-bottom: 5px;
2043 font-weight: 600;
2044 }
2045
2046 .wpsc-dash-widget-mid {
2047 width: calc(100% - 20px);
2048 }
2049 }
2050
2051 @media screen and (max-width: 480px) {
2052 .wpsc-dash-widget-small {
2053 width: calc(100% - 20px);
2054 }
2055
2056 .wpsc-dash-widget-mid {
2057 width: calc(100% - 20px);
2058 }
2059
2060 .wpsc-dash-widget-header {
2061 display: block;
2062 }
2063 }
2064
2065 .wpsc-widget-list-section {
2066 display: flex;
2067 flex-direction: column;
2068 }
2069
2070 .wpsc-widget-list {
2071 border-bottom: 1px solid #ccc;
2072 padding: 10px 0px;
2073 }
2074
2075 .wpsc-widget-list:last-child {
2076 border-bottom: none;
2077 }
2078
2079 #wpsc-dash-agent-list .dt-search {
2080 display: none;
2081 }
2082
2083 .wpsc-recent-ticket-list td, .wpsc-db-agent-list td,
2084 .wpsc-db-user-todo td {
2085 cursor: default !important;
2086 }
2087
2088 /* User profile starts */
2089 .wpsc-up-section {
2090 width: 100%;
2091 }
2092 .wpsc-up-section main {
2093 min-width: 320px;
2094 max-width: 100%;
2095 margin: 0 auto;
2096 }
2097 .wpsc-up-section section {
2098 padding: 10px 0px;
2099 }
2100 .wpsc-up-content {
2101 display: none;
2102 }
2103 .wpsc-up-content.active {
2104 display: block;
2105 }
2106 .wpsc-up-section .wpsc-profile-tab {
2107 display: inline-block;
2108 margin: 0 0 -1px;
2109 padding: 15px 25px;
2110 font-weight: 600;
2111 font-size: 16px;
2112 text-align: center;
2113 color: #bbb;
2114 border: 1px solid transparent;
2115 }
2116 .wpsc-up-section .wpsc-profile-tab:hover {
2117 color: #2b2d42;
2118 cursor: pointer;
2119 }
2120 .wpsc-up-tab > .active {
2121 color: #2b2d42;
2122 }
2123 .wpsc-up-container {
2124 display: flex;
2125 align-items: center;
2126 margin: 0px 0px 20px 0px;
2127 padding: 10px;
2128 background-color: #f0f0f1;
2129 border-radius: 5px;
2130 }
2131 .wpsc-up-picture img {
2132 display: flex;
2133 align-items: center;
2134 border-radius: 50%;
2135 margin-right: 10px;
2136 }
2137 .wpsc-up-info {
2138 display: flex;
2139 flex-direction: column;
2140 }
2141 .wpsc-up-name {
2142 font-size: 16px;
2143 font-weight: bold;
2144 }
2145 .wpsc-up-email {
2146 font-size: 14px;
2147 color: #888;
2148 }
2149 .wpsc-back-button {
2150 padding: 0px 0px 10px 0px;
2151 }
2152
2153 .wpsc-widget-scroller {
2154 height: 250px;
2155 }
2156 .wpsc-widget-scroller::-webkit-scrollbar {
2157 width: 5px;
2158 }
2159 .wpsc-widget-scroller::-webkit-scrollbar-thumb {
2160 margin-top: 10px;
2161 background-color: #888;
2162 border-radius: 10px;
2163 }
2164 .wpsc-widget-scroller::-webkit-scrollbar-track {
2165 background-color: #eeeeee;
2166 }
2167 /* User profile Ends */
2168
2169 /* Ticket statistic create and closed ticket count css */
2170 .ticket-info-container {
2171 display: flex;
2172 align-items: center;
2173 }
2174
2175 .ticket-info-container > div,
2176 .ticket-info-container > select {
2177 margin: 0px 10px;
2178 }
2179
2180 @media screen and (max-width: 480px) {
2181 .ticket-info-container {
2182 flex-direction: column;
2183 align-items: flex-start;
2184 justify-content: flex-start;
2185 }
2186 .ticket-info-container > div,
2187 .ticket-info-container > select {
2188 margin: 0px 10px 5px 0px;
2189 }
2190 }
2191 /* Ticket statistic create and closed ticket count css end */
2192
2193 .wpsc-ct-loader {
2194 margin: 0 5px;
2195 display: flex;
2196 align-items: center;
2197 }
2198
2199 .wpsc-ct-actions {
2200 display: flex;
2201 }
2202
2203 .wpsc-reg-user > .wpsc-tff {
2204 padding-left: 0px !important;
2205 }
2206
2207 .wpsc-icon-wp-logo {
2208 height: 15px !important;
2209 }
2210
2211 /* Agent collision css starts */
2212 .wpsc-live-agents {
2213 display: flex;
2214 flex-direction: column;
2215 gap: 5px;
2216 align-items: stretch;
2217 }
2218
2219 .wpsc-agent-avatar {
2220 position: relative;
2221 display: flex;
2222 align-items: center;
2223 gap: 6px;
2224 max-width: 100%;
2225 padding: 2px 10px 2px 2px;
2226 border-radius: 16px;
2227 cursor: pointer;
2228 box-sizing: border-box;
2229 transition: transform 0.2s ease, box-shadow 0.2s ease;
2230 }
2231
2232 /* Avatar image */
2233 .wpsc-agent-avatar img {
2234 width: 28px;
2235 height: 28px;
2236 flex-shrink: 0;
2237 object-fit: cover;
2238 border-radius: 50%;
2239 }
2240
2241 /* Agent name shown alongside avatar (also covers installs with avatars disabled) */
2242 .wpsc-agent-name {
2243 overflow: hidden;
2244 text-overflow: ellipsis;
2245 white-space: nowrap;
2246 font-size: 12px;
2247 }
2248 /* Agent collision css ends */
2249
2250 /* Error message only */
2251 .wpsc-error-msg {
2252 color: #e53935;
2253 font-size: 12px;
2254 margin-top: 4px;
2255 line-height: 1.4;
2256 }
2257
2258 #wpsc-container input[type=number] {
2259 min-height: 30px !important; // fix for wordpress 7
2260 }
2261