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

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

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