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

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

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