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

2,211 lines 41.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 line-height: 2 !important; // fix for wordpress 7
1429 }
1430
1431 /* Checkboxes */
1432 #wpsc-container .checkbox-container,
1433 .wpsc-modal .checkbox-container {
1434 display: flex;
1435 line-height: normal;
1436 }
1437 #wpsc-container .checkbox-container input,
1438 .wpsc-modal .checkbox-container input {
1439 padding: 0;
1440 height: initial;
1441 width: initial;
1442 margin-bottom: 0;
1443 display: none;
1444 cursor: pointer;
1445 }
1446 #wpsc-container .checkbox-container label,
1447 .wpsc-modal .checkbox-container label {
1448 position: relative;
1449 cursor: pointer;
1450 padding: 0 !important;
1451 font-size: 14px !important;
1452 }
1453 #wpsc-container .checkbox-container label:before,
1454 .wpsc-modal .checkbox-container label:before {
1455 content: "";
1456 -webkit-appearance: none;
1457 background-color: #fff;
1458 box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05),
1459 inset 0px -15px 10px -12px rgba(0, 0, 0, 0.05);
1460 display: inline-block;
1461 position: relative;
1462 vertical-align: middle;
1463 cursor: pointer;
1464 margin-right: 5px;
1465 border: 1px solid #8a8a8a;
1466 }
1467 #wpsc-container .checkbox-container input:checked + label:after,
1468 .wpsc-modal .checkbox-container input:checked + label:after {
1469 content: "";
1470 display: block;
1471 position: absolute;
1472 top: 1px;
1473 left: 7px;
1474 width: 6px;
1475 height: 12px;
1476 border: solid #0079bf;
1477 border-width: 0 2px 2px 0;
1478 transform: rotate(45deg);
1479 }
1480 #wpsc-container .checkbox-container label,
1481 .wpsc-modal .checkbox-container label {
1482 display: flex;
1483 }
1484 #wpsc-container .checkbox-container label:before,
1485 .wpsc-modal .checkbox-container label:before {
1486 width: 18px !important;
1487 height: 18px !important;
1488 box-sizing: border-box;
1489 padding: 8px;
1490 }
1491 #wpsc-container .checkbox-container label:after,
1492 .wpsc-modal .checkbox-container label:after {
1493 flex-grow: 1;
1494 }
1495 #wpsc-container .checkbox-container p,
1496 .wpsc-modal .checkbox-container p {
1497 margin: 0 !important;
1498 }
1499
1500 /* Radio button */
1501 #wpsc-container .radio-container,
1502 .wpsc-modal .radio-container {
1503 display: flex;
1504 line-height: normal;
1505 margin-bottom: 5px;
1506 }
1507 #wpsc-container .radio-container input,
1508 .wpsc-modal .radio-container input {
1509 display: none !important;
1510 }
1511 #wpsc-container .radio-container input + label,
1512 .wpsc-modal .radio-container input + label {
1513 position: relative;
1514 padding-left: 23px;
1515 cursor: pointer;
1516 line-height: 18px;
1517 display: inline-block;
1518 }
1519 #wpsc-container .radio-container input + label:before,
1520 .wpsc-modal .radio-container input + label:before {
1521 content: "";
1522 position: absolute;
1523 left: 0;
1524 top: 0;
1525 width: 18px;
1526 height: 18px;
1527 border-radius: 100%;
1528 background: #fff;
1529 box-sizing: border-box;
1530 }
1531 #wpsc-container .radio-container input + label:after,
1532 .wpsc-modal .radio-container input + label:after {
1533 content: "";
1534 width: 12px;
1535 height: 12px;
1536 background: #0079bf;
1537 position: absolute;
1538 top: 3px;
1539 left: 3px;
1540 border-radius: 100%;
1541 -webkit-transition: all 0.2s ease;
1542 transition: all 0.2s ease;
1543 }
1544 #wpsc-container .radio-container input:not(:checked) + label:after,
1545 .wpsc-modal .radio-container input:not(:checked) + label:after {
1546 opacity: 0;
1547 -webkit-transform: scale(0);
1548 transform: scale(0);
1549 }
1550 #wpsc-container .radio-container input:checked + label:after,
1551 .wpsc-modal .radio-container input:checked + label:after {
1552 opacity: 1;
1553 -webkit-transform: scale(1);
1554 transform: scale(1);
1555 }
1556 #wpsc-container .radio-container p,
1557 .wpsc-modal .radio-container p {
1558 margin: 0 !important;
1559 }
1560
1561 /* Buttons */
1562 .wpsc-button {
1563 border-radius: 5px !important;
1564 padding: 5px 10px !important;
1565 cursor: pointer;
1566 line-height: normal;
1567 }
1568 .wpsc-button.margin-right {
1569 margin-right: 5px;
1570 }
1571 .wpsc-button.margin-left {
1572 margin-left: 5px;
1573 }
1574 .wpsc-button.small {
1575 font-size: 12px !important;
1576 }
1577 .wpsc-button.normal {
1578 font-size: 14px !important;
1579 }
1580
1581 /* Links */
1582 .wpsc-link {
1583 cursor: pointer !important;
1584 text-decoration: none !important;
1585 }
1586 .wpsc-link:hover {
1587 text-decoration: underline !important;
1588 }
1589
1590 /* Auth screen */
1591 .wpsc-auth-container {
1592 display: flex;
1593 margin: 20px;
1594 align-items: center;
1595 justify-content: center;
1596 }
1597 .wpsc-auth-container .auth-inner-container {
1598 display: flex;
1599 flex-direction: column;
1600 max-width: 300px !important;
1601 }
1602 .wpsc-auth-container h2 {
1603 font-size: 25px !important;
1604 margin: 0 0 10px 0 !important;
1605 text-align: left;
1606 }
1607 .wpsc-auth-container input[type="text"],
1608 .wpsc-auth-container input[type="password"] {
1609 width: 100% !important;
1610 height: 30px !important;
1611 font-size: 14px !important;
1612 margin: 0 0 5px !important;
1613 }
1614 .wpsc-auth-container .remember-me {
1615 margin-bottom: 5px;
1616 }
1617 .wpsc-auth-container button {
1618 margin-bottom: 5px !important;
1619 }
1620 .wpsc-auth-container .auth-links {
1621 margin: 0 !important;
1622 display: flex;
1623 flex-direction: column;
1624 }
1625 .wpsc-auth-container .auth-links a {
1626 margin-bottom: 5px !important;
1627 }
1628 .wpsc-shortcode-container .select2-container,
1629 .wpsc-section-container .select2-container,
1630 .wpsc-modal-body .select2-container {
1631 width: 100% !important;
1632 }
1633
1634 /* file attachment notice */
1635 .wpsc-file-attachment-notice {
1636 align-self: flex-start;
1637 font-style: italic;
1638 font-size: 10px;
1639 font-weight: normal;
1640 color: #6e6e6e;
1641 margin-bottom: 10px;
1642 }
1643
1644 /* Progrss loader */
1645 .wpscPrograssLoaderContainer {
1646 width: 100%;
1647 height: 100%;
1648 display: flex;
1649 justify-content: center;
1650 align-items: center;
1651 }
1652 .wpscPrograssLoader {
1653 width: 100px;
1654 display: inline-block;
1655 position: relative;
1656 text-align: center;
1657 line-height: 1.2;
1658 }
1659 .wpscPrograssLoader strong {
1660 position: absolute;
1661 top: 30px;
1662 left: 0;
1663 width: 100%;
1664 text-align: center;
1665 line-height: 40px;
1666 font-size: 30px;
1667 }
1668 .wpscPrograssLoader strong small {
1669 font-size: 15px;
1670 }
1671 .thread-body img {
1672 max-width: 100% !important;
1673 }
1674
1675 /* Setting datatables */
1676 .wpsc-setting-tbl {
1677 width: 100% !important;
1678 margin-bottom: 20px !important;
1679 border-collapse: collapse !important;
1680 border-spacing: 0 !important;
1681 border: none !important;
1682 font-size: 13px !important;
1683 }
1684 .wpsc-setting-tbl th,
1685 .wpsc-setting-tbl td {
1686 text-align: left !important;
1687 padding: 10px !important;
1688 border: none !important;
1689 box-sizing: border-box;
1690 }
1691 .wpsc-setting-tbl tbody tr:hover {
1692 cursor: pointer;
1693 }
1694 .wpsc-setting-tbl th {
1695 background-color: #313042;
1696 color: #fff;
1697 }
1698 .wpsc-setting-tbl tr:nth-child(even) {
1699 background-color: #f2f2f2;
1700 color: #2c3e50;
1701 }
1702 .wpsc-setting-tbl tr:nth-child(odd) {
1703 background-color: #fff;
1704 color: #2c3e50;
1705 }
1706 .wpsc-setting-tbl tbody tr:hover {
1707 background-color: #dfe4ea;
1708 color: #2c3e50;
1709 }
1710 .wpsc-thread .user-info h2.user-name {
1711 margin-right: 5px;
1712 }
1713 .options button {
1714 width: fit-content;
1715 }
1716
1717 /* Progrssbar */
1718 .wpsc-pg-container {
1719 width: 100%;
1720 }
1721 .wpsc-pg-container .ui-progressbar {
1722 position: relative;
1723 }
1724 .wpsc-pg-label {
1725 position: absolute;
1726 left: 50%;
1727 top: 4px;
1728 font-weight: bold;
1729 text-shadow: 1px 1px 0 #fff;
1730 }
1731
1732 /* Ticket tags */
1733 .wpsc-ticket-tag {
1734 display: flex;
1735 justify-content: center;
1736 align-items: center;
1737 border-radius: 5px;
1738 font-weight: normal;
1739 width: fit-content;
1740 font-size: 12px;
1741 padding: 5px 5px;
1742 margin: 0 5px 5px 0;
1743 cursor: pointer;
1744 line-height: 1em;
1745 }
1746 .wpsc-tag-list {
1747 display: flex;
1748 flex-wrap: wrap;
1749 margin-bottom: 10px;
1750 }
1751
1752 /* Agent collision */
1753 .wpsc-agent-collision {
1754 margin: 0;
1755 }
1756 .wpsc-agent-collision .wpsc-widget-body {
1757 display: flex;
1758 flex-direction: row;
1759 flex-wrap: wrap;
1760 gap: 5px;
1761 padding: 10px;
1762 }
1763 .wpsc-ac-agent {
1764 display: flex;
1765 width: fit-content;
1766 align-items: center;
1767 gap: 5px;
1768 padding: 5px;
1769 border-radius: 5px;
1770 font-size: 13px;
1771 }
1772 .wpsc-ac-agent img {
1773 border-radius: 50%;
1774 }
1775
1776 /* Dashboard widgets css */
1777
1778 .wpsc-dash-widget svg {
1779 color: #ccc;
1780 height: 80px !important;
1781 }
1782
1783 .wpsc-dashboard-widget-icon-header {
1784 display: flex;
1785 align-items: center;
1786 }
1787
1788 .wpsc-dashboard-card-icon-header {
1789 cursor: pointer;
1790 }
1791
1792 /* Style the row of small widgets */
1793 .wpsc-dash-widgets-row {
1794 display: flex;
1795 flex-wrap: wrap;
1796 }
1797
1798 /* Style individual small widgets */
1799 .wpsc-dash-widget {
1800 margin: 10px;
1801 position: relative;
1802 box-sizing: border-box;
1803 background-color: #f4f6f9;
1804 border: 1px solid #ccc;
1805 border-radius: 5px;
1806 padding: 10px;
1807 box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
1808 }
1809
1810 .wpsc-dash-widget2 {
1811 padding: 10px;
1812 }
1813
1814 .wpsc-dash-widget-small {
1815 width: calc(20% - 20px);
1816 display: flex;
1817 flex-direction: row;
1818 justify-content: space-between;
1819 align-items: center;
1820 }
1821
1822 .wpsc-dash-widget-small .wpsc-dash-widget-icon {
1823 font-size: 70px; /* Increase the size as needed */
1824 color: #ccc; /* Change the icon color as needed */
1825 margin-left: 10px; /* Add margin to separate from the text */
1826 }
1827
1828 .wpsc-dash-widget-small svg {
1829 opacity: 0.2;
1830 }
1831
1832 .wpsc-dash-widget-mid {
1833 width: calc(50% - 20px);
1834 }
1835
1836 .wpsc-dash-widget-large {
1837 width: calc(100% - 20px);
1838 }
1839
1840 .wpsc-widget h2 {
1841 font-size: 18px;
1842 margin-bottom: 5px;
1843 }
1844
1845 .wpsc-dash-widget-small h2 {
1846 margin-bottom: 5px;
1847 font-size: 35px;
1848 font-weight: 600;
1849 }
1850
1851 /* Style the header of widgets with icons and actions */
1852 .wpsc-dash-widget-header {
1853 display: flex;
1854 justify-content: space-between;
1855 align-items: center;
1856 margin-bottom: 10px;
1857 border-bottom: 1px solid #ccc;
1858 padding-bottom: 10px;
1859 }
1860
1861 .wpsc-dash-widget-header svg {
1862 color: #ccc;
1863 height: 15px !important;
1864 margin: 0px 5px 0px 0px;
1865 }
1866
1867 .wpsc-dash-widget-actions {
1868 /* Widget action links styles here */
1869 }
1870
1871 .wpsc-dash-widget-actions a {
1872 cursor: pointer;
1873 text-decoration: none;
1874 }
1875
1876 /* Style the content of widgets */
1877 .wpsc-dash-widget-content {
1878 /* Widget content styles here */
1879 }
1880
1881 .wpsc-actions-btn-setting {
1882 padding-bottom: 15px;
1883 }
1884
1885 /* Style full-width widgets */
1886 .wpsc-full-width-widget {
1887 width: 100%;
1888 }
1889
1890 .wpsc-dashboard-view {
1891 width: 100%;
1892 }
1893
1894 /* table scrollable */
1895 .wpsc-db-agent-list {
1896 width: 100%;
1897 border-collapse: collapse;
1898 }
1899
1900 .wpsc-dash-widget-content::-webkit-scrollbar,
1901 .wpsc-widget-body::-webkit-scrollbar {
1902 width: 5px;
1903 height: 5px;
1904 }
1905
1906 .wpsc-dash-widget-content::-webkit-scrollbar-thumb,
1907 .wpsc-widget-body::-webkit-scrollbar-thumb {
1908 margin-top: 10px;
1909 background-color: #cfcfcf;
1910 border-radius: 10px;
1911 }
1912
1913 .wpsc-dash-widget-content::-webkit-scrollbar-track,
1914 .wpsc-widget-body::-webkit-scrollbar-track {
1915 background-color: #ffffff;
1916 }
1917 /* table scrollable end */
1918
1919 .wpsc-dash-widget-mid .wpsc-dash-widget-content {
1920 max-height: 400px;
1921 height: 400px;
1922 }
1923
1924 .wpsc-dbw-info {
1925 overflow-y: auto;
1926 }
1927
1928 /* Additional styles for responsive design can be added as needed */
1929 @media screen and (max-width: 1200px) {
1930 .wpsc-dash-widget-small {
1931 width: calc(25% - 20px);
1932 }
1933
1934 .wpsc-dash-widget-mid {
1935 width: calc(100% - 20px);
1936 }
1937 }
1938
1939 @media screen and (max-width: 768px) {
1940 .wpsc-dash-widget-small {
1941 width: calc(33% - 20px);
1942 }
1943
1944 .wpsc-dash-widgets-row {
1945 margin: 0 10px;
1946 }
1947
1948 .wpsc-widget {
1949 width: 100%;
1950 }
1951
1952 .wpsc-dash-widget-small h2 {
1953 font-size: 25px;
1954 margin-bottom: 5px;
1955 font-weight: 600;
1956 }
1957
1958 .wpsc-dash-widget-small p {
1959 font-size: 14px;
1960 font-weight: 500;
1961 }
1962
1963 .wpsc-dash-widget svg {
1964 height: 60px !important;
1965 }
1966
1967 .wpsc-dashboard-widget-icon-header {
1968 display: inline-flex;
1969 align-items: center;
1970 }
1971
1972 .wpsc-dash-widget-header svg {
1973 height: 30px !important;
1974 }
1975
1976 .wpsc-dash-widget-actions {
1977 padding-top: 10px;
1978 }
1979
1980 .wpsc-dash-widget-mid {
1981 width: calc(100% - 20px);
1982 }
1983 }
1984
1985 @media screen and (max-width: 600px) {
1986 .wpsc-dash-widget-small {
1987 width: calc(50% - 20px);
1988 }
1989
1990 .wpsc-dashboard-view,
1991 .wpsc-dashboard-widget-view {
1992 display: contents;
1993 }
1994
1995 .wpsc-dash-widget-small h2 {
1996 font-size: 18px;
1997 margin-bottom: 5px;
1998 font-weight: 600;
1999 }
2000
2001 .wpsc-dash-widget-mid {
2002 width: calc(100% - 20px);
2003 }
2004 }
2005
2006 @media screen and (max-width: 480px) {
2007 .wpsc-dash-widget-small {
2008 width: calc(100% - 20px);
2009 }
2010
2011 .wpsc-dash-widget-mid {
2012 width: calc(100% - 20px);
2013 }
2014
2015 .wpsc-dash-widget-header {
2016 display: block;
2017 }
2018 }
2019
2020 .wpsc-widget-list-section {
2021 display: flex;
2022 flex-direction: column;
2023 }
2024
2025 .wpsc-widget-list {
2026 border-bottom: 1px solid #ccc;
2027 padding: 10px 0px;
2028 }
2029
2030 .wpsc-widget-list:last-child {
2031 border-bottom: none;
2032 }
2033
2034 #wpsc-dash-agent-list .dt-search {
2035 display: none;
2036 }
2037
2038 /* User profile starts */
2039 .wpsc-up-section {
2040 width: 100%;
2041 }
2042 .wpsc-up-section main {
2043 min-width: 320px;
2044 max-width: 100%;
2045 margin: 0 auto;
2046 }
2047 .wpsc-up-section section {
2048 padding: 10px 0px;
2049 }
2050 .wpsc-up-content {
2051 display: none;
2052 }
2053 .wpsc-up-content.active {
2054 display: block;
2055 }
2056 .wpsc-up-section .wpsc-profile-tab {
2057 display: inline-block;
2058 margin: 0 0 -1px;
2059 padding: 15px 25px;
2060 font-weight: 600;
2061 font-size: 16px;
2062 text-align: center;
2063 color: #bbb;
2064 border: 1px solid transparent;
2065 }
2066 .wpsc-up-section .wpsc-profile-tab:hover {
2067 color: #2b2d42;
2068 cursor: pointer;
2069 }
2070 .wpsc-up-tab > .active {
2071 color: #2b2d42;
2072 }
2073 .wpsc-up-container {
2074 display: flex;
2075 align-items: center;
2076 margin: 0px 0px 20px 0px;
2077 padding: 10px;
2078 background-color: #f0f0f1;
2079 border-radius: 5px;
2080 }
2081 .wpsc-up-picture img {
2082 display: flex;
2083 align-items: center;
2084 border-radius: 50%;
2085 margin-right: 10px;
2086 }
2087 .wpsc-up-info {
2088 display: flex;
2089 flex-direction: column;
2090 }
2091 .wpsc-up-name {
2092 font-size: 16px;
2093 font-weight: bold;
2094 }
2095 .wpsc-up-email {
2096 font-size: 14px;
2097 color: #888;
2098 }
2099 .wpsc-back-button {
2100 padding: 0px 0px 10px 0px;
2101 }
2102
2103 .wpsc-widget-scroller {
2104 height: 250px;
2105 }
2106 .wpsc-widget-scroller::-webkit-scrollbar {
2107 width: 5px;
2108 }
2109 .wpsc-widget-scroller::-webkit-scrollbar-thumb {
2110 margin-top: 10px;
2111 background-color: #888;
2112 border-radius: 10px;
2113 }
2114 .wpsc-widget-scroller::-webkit-scrollbar-track {
2115 background-color: #eeeeee;
2116 }
2117 /* User profile Ends */
2118
2119 /* Ticket statistic create and closed ticket count css */
2120 .ticket-info-container {
2121 display: flex;
2122 align-items: center;
2123 }
2124
2125 .ticket-info-container > div,
2126 .ticket-info-container > select {
2127 margin: 0px 10px;
2128 }
2129
2130 @media screen and (max-width: 480px) {
2131 .ticket-info-container {
2132 flex-direction: column;
2133 align-items: flex-start;
2134 justify-content: flex-start;
2135 }
2136 .ticket-info-container > div,
2137 .ticket-info-container > select {
2138 margin: 0px 10px 5px 0px;
2139 }
2140 }
2141 /* Ticket statistic create and closed ticket count css end */
2142
2143 .wpsc-ct-loader {
2144 margin: 0 5px;
2145 display: flex;
2146 align-items: center;
2147 }
2148
2149 .wpsc-ct-actions {
2150 display: flex;
2151 }
2152
2153 .wpsc-reg-user > .wpsc-tff {
2154 padding-left: 0px !important;
2155 }
2156
2157 .wpsc-icon-wp-logo {
2158 height: 15px !important;
2159 }
2160
2161 /* Agent collision css starts */
2162 .wpsc-live-agents {
2163 display: flex;
2164 flex-direction: column;
2165 gap: 5px;
2166 align-items: stretch;
2167 }
2168
2169 .wpsc-agent-avatar {
2170 position: relative;
2171 display: flex;
2172 align-items: center;
2173 gap: 6px;
2174 max-width: 100%;
2175 padding: 2px 10px 2px 2px;
2176 border-radius: 16px;
2177 cursor: pointer;
2178 box-sizing: border-box;
2179 transition: transform 0.2s ease, box-shadow 0.2s ease;
2180 }
2181
2182 /* Avatar image */
2183 .wpsc-agent-avatar img {
2184 width: 28px;
2185 height: 28px;
2186 flex-shrink: 0;
2187 object-fit: cover;
2188 border-radius: 50%;
2189 }
2190
2191 /* Agent name shown alongside avatar (also covers installs with avatars disabled) */
2192 .wpsc-agent-name {
2193 overflow: hidden;
2194 text-overflow: ellipsis;
2195 white-space: nowrap;
2196 font-size: 12px;
2197 }
2198 /* Agent collision css ends */
2199
2200 /* Error message only */
2201 .wpsc-error-msg {
2202 color: #e53935;
2203 font-size: 12px;
2204 margin-top: 4px;
2205 line-height: 1.4;
2206 }
2207
2208 #wpsc-container input[type=number] {
2209 min-height: 30px !important; // fix for wordpress 7
2210 }
2211