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

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

2,285 lines 43.0 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
469 /* Modal Popup */
470 .wpsc-modal .loader,
471 .wpsc-modal .inner-container {
472 position: fixed;
473 display: flex;
474 justify-content: center;
475 width: 100%;
476 height: 100%;
477 top: 0;
478 right: 0;
479 }
480 .wpsc-modal .loader {
481 align-items: center;
482 }
483 .wpsc-modal .inner-container {
484 padding-top: 50px;
485 align-items: flex-start;
486 }
487 .wpsc-modal .loader img {
488 width: 50px;
489 }
490 .wpsc-modal .modal {
491 width: 650px;
492 display: block;
493 top: auto;
494 bottom: auto;
495 right: auto;
496 left: auto;
497 }
498 @media only screen and (max-width: 768px) {
499 .wpsc-modal .modal {
500 width: 90%;
501 }
502 }
503 .wpsc-modal-header {
504 font-size: 16px;
505 font-weight: 400;
506 text-align: right;
507 padding: 10px 15px;
508 }
509 .wpsc-modal-body {
510 display: flex;
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-left: 5px;
579 }
580 .wpsc-input-group .label-container svg {
581 width: 12px;
582 margin-right: 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 0 5px 10px;
603 }
604 .wpsc-input-group .checkbox-group div input,
605 .wpsc-input-group .radio-group div input {
606 margin: 0 0 0 5px !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-right: 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-right: 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-right: 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-left: 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-right: 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-right: 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-right: 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 .thread-text ul{
872 list-style-type: disc !important;
873 padding-inline-start: 2em;
874 }
875 .wpsc-thread p {
876 font-size: 14px;
877 font-weight: 400;
878 }
879 .wpsc-log-diff {
880 display: flex;
881 width: 100%;
882 box-sizing: border-box;
883 }
884 .wpsc-log-diff .lhs,
885 .wpsc-log-diff .transform-icon,
886 .wpsc-log-diff .rhs {
887 display: flex;
888 align-items: center;
889 flex-wrap: wrap;
890 word-break: break-word;
891 overflow-wrap: anywhere;
892 white-space: normal;
893 }
894 .wpsc-log-diff .transform-icon svg {
895 width: 12px;
896 margin: 0 10px;
897 }
898 .wpsc-edit-thread {
899 display: flex;
900 width: 100%;
901 flex-direction: column;
902 }
903 .wpsc-modal-thread-log {
904 width: 100%;
905 display: flex;
906 flex-direction: column;
907 }
908 .wpsc-it-widget {
909 display: flex;
910 flex-direction: column;
911 width: 100%;
912 min-width: 100%;
913 max-width: 100%;
914 box-sizing: border-box;
915 margin-bottom: 15px;
916 }
917 .wpsc-widget-header {
918 display: flex;
919 align-items: center;
920 padding: 10px;
921 }
922 .wpsc-widget-header h2 {
923 font-size: 14px !important;
924 font-weight: 600;
925 flex-grow: 1;
926 margin: 0px !important;
927 }
928 .wpsc-widget-header span {
929 display: flex;
930 align-items: center;
931 margin-right: 5px;
932 cursor: pointer;
933 }
934 .wpsc-widget-header svg {
935 width: 14px;
936 }
937 .wpsc-widget-body {
938 display: flex;
939 flex-direction: column;
940 font-size: 14px;
941 font-weight: normal;
942 padding: 10px 10px 0;
943 overflow-y: auto;
944 }
945 .wpsc-widget-body .info-list-item {
946 display: flex;
947 align-items: center;
948 flex-wrap: wrap;
949 margin-bottom: 10px;
950 }
951 .wpsc-widget-body .info-list-item .info-label {
952 margin-left: 5px;
953 }
954 .wpsc-widget-default {
955 margin-bottom: 10px;
956 }
957 .info-val.fullwidth {
958 width: 100%;
959 }
960 .wpsc-widget-body .user-list-item {
961 display: flex;
962 align-items: flex-start;
963 margin-bottom: 10px;
964 }
965 .wpsc-widget-body .user-list-item img {
966 border-radius: 20px;
967 margin-left: 5px;
968 }
969 .wpsc-widget-body .user-list-item .ul-body {
970 display: flex;
971 flex-direction: column;
972 justify-content: center;
973 min-height: 40px;
974 }
975 .wpsc-widget-body .user-list-item .ul-label {
976 font-size: 14px;
977 font-weight: normal;
978 margin-bottom: 5px;
979 }
980 .wpsc-widget-body .user-list-item .ul-actions {
981 display: flex;
982 align-items: center;
983 }
984 .wpsc-widget-body .user-list-item .ul-actions span {
985 display: flex;
986 align-items: center;
987 cursor: pointer;
988 margin-left: 5px;
989 }
990 .wpsc-widget-body .user-list-item .ul-actions svg {
991 height: 14px;
992 }
993 .wpsc-it-mob-widget-trigger-btn {
994 display: flex;
995 cursor: pointer;
996 padding: 10px;
997 align-items: center;
998 color: #000;
999 box-shadow: 0px 0px 3px 2px #ddd !important;
1000 }
1001 .wpsc-it-mob-widget-trigger-btn h2 {
1002 flex-grow: 1;
1003 font-size: 16px !important;
1004 font-weight: 600;
1005 margin: 0px !important;
1006 color: #000;
1007 }
1008 .wpsc-it-mob-widget-trigger-btn span {
1009 display: flex;
1010 align-items: center;
1011 }
1012 .wpsc-it-mob-widget-trigger-btn svg {
1013 height: 16px;
1014 }
1015 .wpsc-it-mob-widgets-inner-container {
1016 margin-top: 15px;
1017 }
1018 .wpsc-thread-attachments {
1019 display: flex;
1020 flex-direction: column;
1021 margin-bottom: 10px;
1022 }
1023 .wpsc-attachment-header {
1024 flex-grow: 1;
1025 margin: 0 0 2px 0 !important;
1026 font-size: 12px;
1027 font-weight: bold;
1028 }
1029 .wpsc-attachment-item {
1030 display: flex;
1031 align-items: center;
1032 max-width: 400px;
1033 margin-bottom: 2px;
1034 }
1035 .wpsc-attachment-name {
1036 flex-grow: 1;
1037 cursor: pointer;
1038 }
1039 .wpsc-thread-logs {
1040 display: flex;
1041 flex-direction: column;
1042 }
1043 #wpsc-container table,
1044 #wpsc-container th,
1045 #wpsc-container td,
1046 .wpsc-modal table,
1047 .wpsc-modal th,
1048 .wpsc-modal td {
1049 border: 1px solid #ddd;
1050 border-collapse: collapse;
1051 cursor: pointer;
1052 }
1053 .dt-search {
1054 margin-bottom: 10px !important;
1055 }
1056 #wpsc-container .dataTables_wrapper th,
1057 #wpsc-container .dataTables_wrapper td,
1058 #wpsc-container table.dataTable.no-footer,
1059 .wpsc-modal .dataTables_wrapper th,
1060 .wpsc-modal .dataTables_wrapper td,
1061 .wpsc-modal table.dataTable.no-footer {
1062 border-bottom: 1px solid #ddd !important;
1063 }
1064 .wpsc_url_auth_sign_in {
1065 padding-bottom: 10px;
1066 }
1067 .wpsc_url_auth_sign_in p {
1068 margin: 0;
1069 }
1070 .wpsc_auth_header {
1071 font-size: 16px;
1072 }
1073 .wpsc_auth_link {
1074 font-size: 12px;
1075 }
1076
1077 /* Macro */
1078 .wpscMacros .extra-info {
1079 font-size: 12px;
1080 color: #777;
1081 }
1082
1083 /* Form Filter */
1084 .wpsc-form-filter-container,
1085 .wpsc-form-filter-container .and-item {
1086 width: 100%;
1087 display: flex;
1088 flex-direction: column;
1089 align-items: center;
1090 gap: 15px;
1091 border: 1px dashed #000;
1092 border-radius: 5px;
1093 padding: 15px;
1094 box-sizing: border-box;
1095 }
1096 .wpsc-form-filter-container .and-container,
1097 .wpsc-form-filter-container .or-container {
1098 width: 100%;
1099 display: flex;
1100 flex-direction: column;
1101 }
1102 .wpsc-form-filter-container .and-container {
1103 gap: 15px;
1104 }
1105 .wpsc-form-filter-container .or-container {
1106 gap: 5px;
1107 }
1108 .wpsc-form-filter-container button {
1109 width: fit-content;
1110 }
1111 .wpsc-form-filter-item {
1112 display: flex;
1113 width: 100%;
1114 align-items: center;
1115 margin-bottom: 5px;
1116 padding: 5px 5px 0 5px;
1117 background-color: #dcdcdc;
1118 border-radius: 3px;
1119 box-sizing: border-box;
1120 }
1121 .wpsc-form-filter-item .content {
1122 display: flex;
1123 align-items: center;
1124 flex-wrap: wrap;
1125 }
1126 .wpsc-form-filter-item .operator {
1127 min-height: 28px !important;
1128 height: 28px !important;
1129 }
1130 .wpsc-form-filter-item .remove-container {
1131 display: flex;
1132 align-items: center;
1133 justify-content: flex-end;
1134 flex-grow: 1;
1135 }
1136 .wpsc-form-filter-item .content .item {
1137 width: 130px;
1138 max-width: 130px;
1139 margin: 0 0 5px 5px;
1140 }
1141 .wpsc-form-filter-item .content .item.operand.single {
1142 width: 250px;
1143 max-width: 250px;
1144 }
1145 .wpsc-form-filter-item .remove-container span {
1146 display: flex;
1147 align-items: center;
1148 margin-bottom: 5px;
1149 cursor: pointer;
1150 }
1151 .wpsc-form-filter-item .remove-container svg {
1152 width: 18px;
1153 color: #c3c3c3;
1154 }
1155 .wpsc-form-filter-add-btn {
1156 width: fit-content;
1157 }
1158 .select2-container .select2-selection--single {
1159 margin: 0 !important;
1160 }
1161 .wpsc-form-filter-item .content .wpsc-inline-loader {
1162 margin-bottom: 5px;
1163 }
1164
1165 /* Snippets */
1166 .wpsc-snippets {
1167 display: none;
1168 }
1169
1170 /* Flatpicker */
1171 .flatpickr-calendar.open {
1172 z-index: 999999999 !important;
1173 }
1174
1175 /* Section */
1176 .wpsc-section-header {
1177 font-size: 22px;
1178 font-weight: 300;
1179 margin: 0 0 15px 5px;
1180 }
1181 .wpsc-section-container {
1182 border: none;
1183 box-shadow: 0 0 3px 0 #a4b0be;
1184 border-radius: 5px;
1185 padding: 15px 0 0 0;
1186 width: 100%;
1187 font-size: 12px;
1188 box-sizing: border-box;
1189 }
1190
1191 /* TinyMCE editor switching */
1192 .wpsc_tinymce_editor_btns {
1193 display: flex !important;
1194 justify-content: flex-end;
1195 margin-bottom: 4px;
1196 }
1197 .wpsc_tinymce_editor_btns .inner-container {
1198 border: 1px solid #c3c3c3;
1199 display: flex;
1200 }
1201 .wpsc-switch-editor {
1202 cursor: pointer;
1203 border: none;
1204 padding: 6px 24px !important;
1205 text-align: center;
1206 font-size: 13px;
1207 background-color: #fff;
1208 color: #000;
1209 border-radius: 0 !important;
1210 margin: 0 !important;
1211 }
1212 .wpsc-switch-editor.active {
1213 background: #c3c3c3;
1214 }
1215 .wpsc_textarea {
1216 height: 160px !important;
1217 width: 100% !important;
1218 }
1219
1220 /* Ticket form field */
1221 .wpsc-tff {
1222 display: flex;
1223 flex-direction: column;
1224 }
1225 .wpsc-tff .name {
1226 font-weight: bold;
1227 }
1228 .wpsc-tff .extra-info {
1229 font-size: 10px;
1230 margin-bottom: 5px;
1231 }
1232 .wpsc-tff textarea {
1233 min-height: 100px;
1234 }
1235 .wpsc-tff-label {
1236 display: flex;
1237 justify-content: flex-start;
1238 align-items: flex-start;
1239 }
1240 .wpsc-tff-label .required-indicator {
1241 color: #ff0000;
1242 margin-right: 5px;
1243 }
1244 .wpsc-hidden {
1245 display: none !important;
1246 }
1247 .wpsc-thread-info {
1248 display: flex;
1249 width: 100%;
1250 flex-direction: column;
1251 align-items: flex-start;
1252 }
1253 .wpsc-thread-info .info-list-item {
1254 display: flex;
1255 flex-wrap: wrap;
1256 margin-bottom: 10px;
1257 }
1258 .wpsc-thread-info .info-list-item .info-label {
1259 font-size: 14px;
1260 font-weight: normal;
1261 margin-left: 5px;
1262 }
1263 .wpsc-thread-info .info-list-item .info-val {
1264 font-size: 14px;
1265 font-weight: normal;
1266 }
1267 .wpsc-ticket-thread-expander {
1268 margin-bottom: 10px;
1269 color: #003eff;
1270 cursor: pointer;
1271 }
1272
1273 /** Agent profile */
1274 .wpsc-agent-profile {
1275 width: 100%;
1276 display: flex;
1277 margin: 0 15px 15px;
1278 }
1279 .wpsc-ap-mobile-menu {
1280 width: 100%;
1281 margin: 0 15px 10px;
1282 }
1283 .wpsc-ap-menu-container {
1284 min-width: 250px;
1285 display: flex;
1286 flex-wrap: wrap;
1287 flex-direction: column;
1288 align-items: center;
1289 justify-content: flex-start;
1290 padding: 10px;
1291 margin-left: 30px;
1292 background-color: #fff;
1293 border-radius: 5px;
1294 box-shadow: -6px 6px 10px 0px #ced6e0;
1295 }
1296 .wpsc-ap-menu-body {
1297 display: flex;
1298 flex-direction: column;
1299 align-items: flex-start;
1300 justify-content: flex-start;
1301 flex-wrap: wrap;
1302 flex-grow: 1;
1303 }
1304 .wpsc-ap-nav {
1305 width: 100%;
1306 display: flex;
1307 align-items: center;
1308 padding: 10px;
1309 box-sizing: border-box;
1310 border: none;
1311 border-radius: 5px;
1312 background-color: #fff;
1313 color: #707070;
1314 cursor: pointer;
1315 margin-bottom: 5px;
1316 }
1317 .wpsc-ap-nav.active,
1318 .wpsc-ap-nav:hover {
1319 color: #fff;
1320 }
1321 .wpsc-ap-nav svg {
1322 width: 18px;
1323 margin-left: 10px;
1324 }
1325 .wpsc-ap-nav label {
1326 font-size: 14px !important;
1327 }
1328 .wpsc-ap-tab-container {
1329 display: flex;
1330 flex-wrap: wrap;
1331 width: 100%;
1332 align-items: center;
1333 margin-bottom: 10px;
1334 }
1335 .wpsc-ap-tab-container button {
1336 padding: 7px 15px;
1337 font-size: 16px;
1338 font-weight: normal;
1339 border: none !important;
1340 color: #6a6a6a;
1341 background-color: transparent;
1342 cursor: pointer;
1343 border-radius: 16px;
1344 margin: 0 0 5px 5px;
1345 }
1346 .wpsc-ap-tab-container button.active,
1347 .wpsc-ap-tab-container button:hover {
1348 color: #fff;
1349 background-color: #ffa04a;
1350 }
1351
1352 /* date input */
1353 .wpsc-input-close-group {
1354 width: 100%;
1355 display: flex;
1356 }
1357 .wpsc-input-close-group input {
1358 width: 100%;
1359 }
1360 .wpsc-input-close-group span {
1361 display: flex !important;
1362 margin-right: -18px !important;
1363 align-items: center !important;
1364 cursor: pointer !important;
1365 }
1366 .wpsc-input-close-group svg {
1367 height: 10px;
1368 color: #888;
1369 }
1370 .wpsc-no-ticket-found {
1371 display: flex;
1372 justify-content: center;
1373 width: 100%;
1374 padding: 0 0 50px 0;
1375 color: #8a8a8a;
1376 align-items: center;
1377 font-size: 14px;
1378 text-decoration: none;
1379 cursor: default;
1380 }
1381
1382 /* working hrs */
1383 table.wpsc-working-hrs,
1384 table.wpsc-working-hrs tr,
1385 table.wpsc-working-hrs td {
1386 border: none !important;
1387 font-size: 13px;
1388 color: #777;
1389 }
1390 table.wpsc-working-hrs td {
1391 padding: 0 15px 15px !important;
1392 }
1393 table.wpsc-working-hrs {
1394 width: fit-content !important;
1395 }
1396 .wpsc-working-hrs .dayName {
1397 font-weight: 600;
1398 }
1399
1400 /* Shortcode */
1401 .wpsc-shortcode-container {
1402 border-radius: 5px;
1403 overflow: hidden;
1404 }
1405
1406 /* wpsc image */
1407 .mce-i-wpsc_insert_editor_img::before {
1408 content: "\e014";
1409 }
1410
1411 /* Theme compatibility */
1412 #wpsc-container label,
1413 .wpsc-humbargar-menu label,
1414 .wpsc-modal label {
1415 margin: 0px !important;
1416 }
1417 #wpsc-container form,
1418 .wpsc-modal form {
1419 margin: 0 !important;
1420 }
1421
1422 /* Select */
1423 #wpsc-container select,
1424 .wpsc-modal select {
1425 font-size: 14px !important;
1426 min-height: 30px !important;
1427 max-height: 30px !important;
1428 padding: 0 8px 0 24px !important;
1429 }
1430
1431 /* Checkboxes */
1432 #wpsc-container .checkbox-container,
1433 .wpsc-modal .checkbox-container {
1434 display: flex;
1435 line-height: normal;
1436 }
1437 #wpsc-container .checkbox-container input,
1438 .wpsc-modal .checkbox-container input {
1439 padding: 0;
1440 height: initial;
1441 width: initial;
1442 margin-bottom: 0;
1443 display: none;
1444 cursor: pointer;
1445 }
1446 #wpsc-container .checkbox-container label,
1447 .wpsc-modal .checkbox-container label {
1448 position: relative;
1449 cursor: pointer;
1450 padding: 0 !important;
1451 font-size: 14px !important;
1452 }
1453 #wpsc-container .checkbox-container label:before,
1454 .wpsc-modal .checkbox-container label:before {
1455 content: "";
1456 -webkit-appearance: none;
1457 background-color: #fff;
1458 box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05),
1459 inset 0px -15px 10px -12px rgba(0, 0, 0, 0.05);
1460 display: inline-block;
1461 position: relative;
1462 vertical-align: middle;
1463 cursor: pointer;
1464 margin-left: 5px;
1465 border: 1px solid #8a8a8a;
1466 }
1467 #wpsc-container .checkbox-container input:checked + label:after,
1468 .wpsc-modal .checkbox-container input:checked + label:after {
1469 content: "";
1470 display: block;
1471 position: absolute;
1472 top: 1px;
1473 right: 8px;
1474 width: 3px;
1475 height: 9px;
1476 border: solid #0079bf;
1477 border-width: 0 0 2px 2px;
1478 transform: matrix(-1, -1, -1, 1, 3, 0);
1479 }
1480 #wpsc-container .checkbox-container label,
1481 .wpsc-modal .checkbox-container label {
1482 display: flex;
1483 }
1484 #wpsc-container .checkbox-container label:before,
1485 .wpsc-modal .checkbox-container label:before {
1486 width: 18px !important;
1487 height: 18px !important;
1488 box-sizing: border-box;
1489 padding: 8px;
1490 }
1491 #wpsc-container .checkbox-container label:after,
1492 .wpsc-modal .checkbox-container label:after {
1493 flex-grow: 1;
1494 }
1495 #wpsc-container .checkbox-container p,
1496 .wpsc-modal .checkbox-container p {
1497 margin: 0 !important;
1498 }
1499
1500 /* Radio button */
1501 #wpsc-container .radio-container,
1502 .wpsc-modal .radio-container {
1503 display: flex;
1504 line-height: normal;
1505 margin-bottom: 5px;
1506 }
1507 #wpsc-container .radio-container input,
1508 .wpsc-modal .radio-container input {
1509 display: none !important;
1510 }
1511 #wpsc-container .radio-container input + label,
1512 .wpsc-modal .radio-container input + label {
1513 position: relative;
1514 padding-right: 23px;
1515 cursor: pointer;
1516 line-height: 18px;
1517 display: inline-block;
1518 }
1519 #wpsc-container .radio-container input + label:before,
1520 .wpsc-modal .radio-container input + label:before {
1521 content: "";
1522 position: absolute;
1523 right: 0;
1524 top: 0;
1525 width: 18px;
1526 height: 18px;
1527 border-radius: 100%;
1528 background: #fff;
1529 box-sizing: border-box;
1530 }
1531 #wpsc-container .radio-container input + label:after,
1532 .wpsc-modal .radio-container input + label:after {
1533 content: "";
1534 width: 12px;
1535 height: 12px;
1536 background: #0079bf;
1537 position: absolute;
1538 top: 3px;
1539 right: 3px;
1540 border-radius: 100%;
1541 -webkit-transition: all 0.2s ease;
1542 transition: all 0.2s ease;
1543 }
1544 #wpsc-container .radio-container input:not(:checked) + label:after,
1545 .wpsc-modal .radio-container input:not(:checked) + label:after {
1546 opacity: 0;
1547 -webkit-transform: scale(0);
1548 transform: scale(0);
1549 }
1550 #wpsc-container .radio-container input:checked + label:after,
1551 .wpsc-modal .radio-container input:checked + label:after {
1552 opacity: 1;
1553 -webkit-transform: scale(1);
1554 transform: scale(1);
1555 }
1556 #wpsc-container .radio-container p,
1557 .wpsc-modal .radio-container p {
1558 margin: 0 !important;
1559 }
1560
1561 /* Buttons */
1562 .wpsc-button {
1563 border-radius: 5px !important;
1564 padding: 5px 10px !important;
1565 cursor: pointer;
1566 line-height: normal;
1567 }
1568 .wpsc-button.margin-right {
1569 margin-left: 5px;
1570 }
1571 .wpsc-button.margin-left {
1572 margin-right: 5px;
1573 }
1574 .wpsc-button.small {
1575 font-size: 12px !important;
1576 }
1577 .wpsc-button.normal {
1578 font-size: 14px !important;
1579 }
1580
1581 /* Links */
1582 .wpsc-link {
1583 cursor: pointer !important;
1584 text-decoration: none !important;
1585 }
1586 .wpsc-link:hover {
1587 text-decoration: underline !important;
1588 }
1589
1590 /* Auth screen */
1591 .wpsc-auth-container {
1592 display: flex;
1593 margin: 20px;
1594 align-items: center;
1595 justify-content: center;
1596 }
1597 .wpsc-auth-container .auth-inner-container {
1598 display: flex;
1599 flex-direction: column;
1600 max-width: 300px !important;
1601 }
1602 .wpsc-auth-container h2 {
1603 font-size: 25px !important;
1604 margin: 0 0 10px 0 !important;
1605 text-align: right;
1606 }
1607 .wpsc-auth-container input[type="text"],
1608 .wpsc-auth-container input[type="password"] {
1609 width: 100% !important;
1610 height: 30px !important;
1611 font-size: 14px !important;
1612 margin: 0 0 5px !important;
1613 }
1614 .wpsc-auth-container .remember-me {
1615 margin-bottom: 5px;
1616 }
1617 .wpsc-auth-container button {
1618 margin-bottom: 5px !important;
1619 }
1620 .wpsc-auth-container .auth-links {
1621 margin: 0 !important;
1622 display: flex;
1623 flex-direction: column;
1624 }
1625 .wpsc-auth-container .auth-links a {
1626 margin-bottom: 5px !important;
1627 }
1628 .wpsc-shortcode-container .select2-container,
1629 .wpsc-section-container .select2-container,
1630 .wpsc-modal-body .select2-container {
1631 width: 100% !important;
1632 }
1633
1634 /* file attachment notice */
1635 .wpsc-file-attachment-notice {
1636 align-self: flex-start;
1637 font-style: italic;
1638 font-size: 10px;
1639 font-weight: normal;
1640 color: #6e6e6e;
1641 margin-bottom: 10px;
1642 }
1643
1644 /* Progrss loader */
1645 .wpscPrograssLoaderContainer {
1646 width: 100%;
1647 height: 100%;
1648 display: flex;
1649 justify-content: center;
1650 align-items: center;
1651 }
1652 .wpscPrograssLoader {
1653 width: 100px;
1654 display: inline-block;
1655 position: relative;
1656 text-align: center;
1657 line-height: 1.2;
1658 }
1659 .wpscPrograssLoader strong {
1660 position: absolute;
1661 top: 30px;
1662 right: 0;
1663 width: 100%;
1664 text-align: center;
1665 line-height: 40px;
1666 font-size: 30px;
1667 }
1668 .wpscPrograssLoader strong small {
1669 font-size: 15px;
1670 }
1671 .thread-body img {
1672 max-width: 100% !important;
1673 }
1674
1675 /* Setting datatables */
1676 .wpsc-setting-tbl {
1677 width: 100% !important;
1678 margin-bottom: 20px !important;
1679 border-collapse: collapse !important;
1680 border-spacing: 0 !important;
1681 border: none !important;
1682 font-size: 13px !important;
1683 }
1684 .wpsc-setting-tbl th,
1685 .wpsc-setting-tbl td {
1686 text-align: right !important;
1687 padding: 10px !important;
1688 border: none !important;
1689 box-sizing: border-box;
1690 }
1691 .wpsc-setting-tbl tbody tr:hover {
1692 cursor: pointer;
1693 }
1694 .wpsc-setting-tbl th {
1695 background-color: #313042;
1696 color: #fff;
1697 }
1698 .wpsc-setting-tbl tr:nth-child(even) {
1699 background-color: #f2f2f2;
1700 color: #2c3e50;
1701 }
1702 .wpsc-setting-tbl tr:nth-child(odd) {
1703 background-color: #fff;
1704 color: #2c3e50;
1705 }
1706 .wpsc-setting-tbl tbody tr:hover {
1707 background-color: #dfe4ea;
1708 color: #2c3e50;
1709 }
1710 .wpsc-thread .user-info h2.user-name {
1711 margin-left: 5px;
1712 }
1713 .options button {
1714 width: fit-content;
1715 }
1716
1717 /* Progrssbar */
1718 .wpsc-pg-container {
1719 width: 100%;
1720 }
1721 .wpsc-pg-container .ui-progressbar {
1722 position: relative;
1723 }
1724 .wpsc-pg-label {
1725 position: absolute;
1726 right: 50%;
1727 top: 4px;
1728 font-weight: bold;
1729 text-shadow: 1px 1px 0 #fff;
1730 }
1731
1732 /* Ticket tags */
1733 .wpsc-ticket-tag {
1734 display: flex;
1735 justify-content: center;
1736 align-items: center;
1737 border-radius: 5px;
1738 font-weight: normal;
1739 width: fit-content;
1740 font-size: 14px;
1741 padding: 5px 5px;
1742 }
1743 .wpsc-ticket-tag-list {
1744 margin: 3px;
1745 }
1746 .wpsc-ticket-tag-list:first-child {
1747 margin-right: 0;
1748 }
1749 .wpsc-ticket-tag-list:last-child {
1750 margin-left: 0;
1751 }
1752 .wpsc-tag-list {
1753 display: flex;
1754 flex-wrap: wrap;
1755 margin-bottom: 10px;
1756 }
1757 .wpsc-add-ticket-tag {
1758 margin: 0px 3px 0px 0px;
1759 }
1760 .wpsc-close-ticket-tag {
1761 margin: 0px 3px 0px 0px;
1762 }
1763 .wpsc-ticket-tags-action {
1764 display: flex;
1765 margin: 5px 0px 0px 0px;
1766 flex-direction: row-reverse;
1767 }
1768
1769 /* Agent collision */
1770 .wpsc-agent-collision {
1771 margin: 0;
1772 }
1773 .wpsc-agent-collision .wpsc-widget-body {
1774 display: flex;
1775 flex-direction: row;
1776 flex-wrap: wrap;
1777 gap: 5px;
1778 padding: 10px;
1779 }
1780 .wpsc-ac-agent {
1781 display: flex;
1782 width: fit-content;
1783 align-items: center;
1784 gap: 5px;
1785 padding: 5px;
1786 border-radius: 5px;
1787 font-size: 13px;
1788 }
1789 .wpsc-ac-agent img {
1790 border-radius: 50%;
1791 }
1792
1793 /* Dashboard widgets css */
1794
1795 .wpsc-dash-widget svg {
1796 color: #ccc;
1797 height: 80px !important;
1798 }
1799
1800 .wpsc-dashboard-widget-icon-header {
1801 display: flex;
1802 align-items: center;
1803 }
1804
1805 .wpsc-dashboard-card-icon-header {
1806 cursor: pointer;
1807 }
1808
1809 /* Style the row of small widgets */
1810 .wpsc-dash-widgets-row {
1811 display: flex;
1812 flex-wrap: wrap;
1813 }
1814
1815 /* Style individual small widgets */
1816 .wpsc-dash-widget {
1817 margin: 10px;
1818 position: relative;
1819 box-sizing: border-box;
1820 background-color: #f4f6f9;
1821 border: 1px solid #ccc;
1822 border-radius: 5px;
1823 padding: 10px;
1824 box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
1825 }
1826
1827 .wpsc-dash-widget2 {
1828 padding: 10px;
1829 }
1830
1831 .wpsc-dash-widget-small {
1832 width: calc(20% - 20px);
1833 display: flex;
1834 flex-direction: row;
1835 justify-content: space-between;
1836 align-items: center;
1837 }
1838
1839 .wpsc-dash-widget-small .wpsc-dash-widget-icon {
1840 font-size: 70px; /* Increase the size as needed */
1841 color: #ccc; /* Change the icon color as needed */
1842 margin-left: 10px; /* Add margin to separate from the text */
1843 }
1844
1845 .wpsc-dash-widget-small svg {
1846 opacity: 0.2;
1847 }
1848
1849 .wpsc-dash-widget-mid {
1850 width: calc(50% - 20px);
1851 }
1852
1853 .wpsc-dash-widget-large {
1854 width: calc(100% - 20px);
1855 }
1856
1857 .wpsc-widget h2 {
1858 font-size: 18px;
1859 margin-bottom: 5px;
1860 }
1861
1862 .wpsc-dash-widget-small h2 {
1863 margin-bottom: 5px;
1864 font-size: 35px;
1865 font-weight: 600;
1866 }
1867
1868 /* Style the header of widgets with icons and actions */
1869 .wpsc-dash-widget-header {
1870 display: flex;
1871 justify-content: space-between;
1872 align-items: center;
1873 margin-bottom: 10px;
1874 border-bottom: 1px solid #ccc;
1875 padding-bottom: 10px;
1876 }
1877
1878 .wpsc-dash-widget-header svg {
1879 color: #ccc;
1880 height: 15px !important;
1881 margin: 0px 0px 0px 5px;
1882 }
1883
1884 .wpsc-dash-widget-actions {
1885 /* Widget action links styles here */
1886 }
1887
1888 .wpsc-dash-widget-actions a {
1889 cursor: pointer;
1890 text-decoration: none;
1891 }
1892
1893 /* Style the content of widgets */
1894 .wpsc-dash-widget-content {
1895 /* Widget content styles here */
1896 }
1897
1898 .wpsc-actions-btn-setting {
1899 padding-bottom: 15px;
1900 }
1901
1902 /* Style full-width widgets */
1903 .wpsc-full-width-widget {
1904 width: 100%;
1905 }
1906
1907 .wpsc-dashboard-view {
1908 width: 100%;
1909 }
1910
1911 /* table scrollable */
1912 .wpsc-db-agent-list {
1913 width: 100%;
1914 border-collapse: collapse;
1915 }
1916
1917 .wpsc-dash-widget-content::-webkit-scrollbar,
1918 .wpsc-widget-body::-webkit-scrollbar {
1919 width: 5px;
1920 height: 5px;
1921 }
1922
1923 .wpsc-dash-widget-content::-webkit-scrollbar-thumb,
1924 .wpsc-widget-body::-webkit-scrollbar-thumb {
1925 margin-top: 10px;
1926 background-color: #cfcfcf;
1927 border-radius: 10px;
1928 }
1929
1930 .wpsc-dash-widget-content::-webkit-scrollbar-track,
1931 .wpsc-widget-body::-webkit-scrollbar-track {
1932 background-color: #ffffff;
1933 }
1934 /* table scrollable end */
1935
1936 .wpsc-dash-widget-mid .wpsc-dash-widget-content {
1937 max-height: 400px;
1938 }
1939
1940 .wpsc-dbw-info {
1941 overflow-y: auto;
1942 }
1943
1944 /* Additional styles for responsive design can be added as needed */
1945 @media screen and (max-width: 1200px) {
1946 .wpsc-dash-widget-small {
1947 width: calc(25% - 20px);
1948 }
1949
1950 .wpsc-dash-widget-mid {
1951 width: calc(100% - 20px);
1952 }
1953 }
1954
1955 @media screen and (max-width: 768px) {
1956 .wpsc-dash-widget-small {
1957 width: calc(33% - 20px);
1958 }
1959
1960 .wpsc-dash-widgets-row {
1961 margin: 0 10px;
1962 }
1963
1964 .wpsc-widget {
1965 width: 100%;
1966 }
1967
1968 .wpsc-dash-widget-small h2 {
1969 font-size: 25px;
1970 margin-bottom: 5px;
1971 font-weight: 600;
1972 }
1973
1974 .wpsc-dash-widget-small p {
1975 font-size: 14px;
1976 font-weight: 500;
1977 }
1978
1979 .wpsc-dash-widget svg {
1980 height: 60px !important;
1981 }
1982
1983 .wpsc-dashboard-widget-icon-header {
1984 display: inline-flex;
1985 align-items: center;
1986 }
1987
1988 .wpsc-dash-widget-header svg {
1989 height: 30px !important;
1990 }
1991
1992 .wpsc-dash-widget-actions {
1993 padding-top: 10px;
1994 }
1995
1996 .wpsc-dash-widget-mid {
1997 width: calc(100% - 20px);
1998 }
1999 }
2000
2001 @media screen and (max-width: 600px) {
2002 .wpsc-dash-widget-small {
2003 width: calc(50% - 20px);
2004 }
2005
2006 .wpsc-dashboard-view,
2007 .wpsc-dashboard-widget-view {
2008 display: contents;
2009 }
2010
2011 .wpsc-dash-widget-small h2 {
2012 font-size: 18px;
2013 margin-bottom: 5px;
2014 font-weight: 600;
2015 }
2016
2017 .wpsc-dash-widget-mid {
2018 width: calc(100% - 20px);
2019 }
2020 }
2021
2022 @media screen and (max-width: 480px) {
2023 .wpsc-dash-widget-small {
2024 width: calc(100% - 20px);
2025 }
2026
2027 .wpsc-dash-widget-mid {
2028 width: calc(100% - 20px);
2029 }
2030
2031 .wpsc-dash-widget-header {
2032 display: block;
2033 }
2034 }
2035
2036 .wpsc-widget-list-section {
2037 display: flex;
2038 flex-direction: column;
2039 }
2040
2041 .wpsc-widget-list {
2042 border-bottom: 1px solid #ccc;
2043 padding: 10px 0px;
2044 }
2045
2046 .wpsc-widget-list:last-child {
2047 border-bottom: none;
2048 }
2049
2050 #wpsc-dash-agent-list .dt-search {
2051 display: none;
2052 }
2053
2054 /* User profile starts */
2055 .wpsc-up-section {
2056 width: 100%;
2057 }
2058 .wpsc-up-section main {
2059 min-width: 320px;
2060 max-width: 100%;
2061 margin: 0 auto;
2062 }
2063 .wpsc-up-section section {
2064 padding: 20px 0px;
2065 }
2066 .wpsc-up-content {
2067 display: none;
2068 }
2069 .wpsc-up-content.active {
2070 display: block;
2071 }
2072 .wpsc-up-section .wpsc-profile-tab {
2073 display: inline-block;
2074 margin: 0 0 -1px;
2075 padding: 15px 25px;
2076 font-weight: 600;
2077 font-size: 16px;
2078 text-align: center;
2079 color: #bbb;
2080 border: 1px solid transparent;
2081 }
2082 .wpsc-up-section .wpsc-profile-tab:hover {
2083 color: #2b2d42;
2084 cursor: pointer;
2085 }
2086 .wpsc-up-tab > .active {
2087 color: #2b2d42;
2088 }
2089 .wpsc-up-container {
2090 display: flex;
2091 align-items: center;
2092 margin: 0px 0px 20px 0px;
2093 padding: 10px;
2094 background-color: #f0f0f1;
2095 border-radius: 5px;
2096 }
2097 .wpsc-up-picture img {
2098 display: flex;
2099 align-items: center;
2100 border-radius: 50%;
2101 margin-left: 10px;
2102 }
2103 .wpsc-up-info {
2104 display: flex;
2105 flex-direction: column;
2106 }
2107 .wpsc-up-name {
2108 font-size: 16px;
2109 font-weight: bold;
2110 }
2111 .wpsc-up-email {
2112 font-size: 14px;
2113 color: #888;
2114 }
2115 .wpsc-back-button {
2116 padding: 0px 0px 10px 0px;
2117 }
2118
2119 .wpsc-widget-scroller {
2120 height: 250px;
2121 }
2122 .wpsc-widget-scroller::-webkit-scrollbar {
2123 width: 5px;
2124 }
2125 .wpsc-widget-scroller::-webkit-scrollbar-thumb {
2126 margin-top: 10px;
2127 margin-left: 0; /* Adjusted for RTL */
2128 background-color: #888;
2129 border-radius: 10px;
2130 }
2131 .wpsc-widget-scroller::-webkit-scrollbar-track {
2132 background-color: #eeeeee;
2133 }
2134 /* User profile Ends */
2135
2136 /* Ticket statistic create and closed ticket count css */
2137 .ticket-info-container {
2138 display: flex;
2139 flex-direction: row-reverse;
2140 align-items: center;
2141 }
2142
2143 .ticket-info-container > div,
2144 .ticket-info-container > select {
2145 margin: 0px 10px 0px 0px;
2146 }
2147
2148 @media screen and (max-width: 480px) {
2149 .ticket-info-container {
2150 flex-direction: column;
2151 align-items: flex-end;
2152 justify-content: flex-start;
2153 }
2154 .ticket-info-container > div,
2155 .ticket-info-container > select {
2156 margin: 0px 0px 5px 10px;
2157 }
2158 }
2159 /* Ticket statistic create and closed ticket count css end */
2160
2161 .wpsc-ct-loader {
2162 margin: 0 5px;
2163 display: flex;
2164 align-items: center;
2165 }
2166
2167 .wpsc-ct-actions {
2168 display: flex;
2169 }
2170
2171 .wpsc-reg-user > .wpsc-tff {
2172 padding-right: 0px !important;
2173 }
2174
2175 /* Merge ticket popup css starts */
2176 .wpsc-merge-container {
2177 width: 100%;
2178 display: block;
2179 justify-content: space-between;
2180 }
2181
2182 .wpsc-merge-container .wpsc-merge-warning {
2183 background-color: #fff8e5;
2184 padding: 5px 15px;
2185 margin-bottom: 15px;
2186 font-size: 14px;
2187 border-radius: 5px;
2188 text-align: center;
2189 border: 1px solid #FFE79B;
2190 }
2191
2192 .wpsc-merge-container .wpsc-merge-box {
2193 width: 100%;
2194 background-color: #f0f0f0;
2195 position: relative;
2196 display: inline-flex;
2197 border-radius: 5px;
2198 padding: 10px 0px;
2199 }
2200
2201 .wpsc-merge-container .wpsc-merge-box:nth-child(4) {
2202 margin-bottom: 10px;
2203 }
2204
2205 .wpsc-merge-container .wpsc-merge-box .wpsc-merge-ticket-details {
2206 padding: 0px 15px;
2207 position: relative;
2208 flex: 1 1 30%;
2209 }
2210
2211 .wpsc-merge-container .wpsc-merge-box .wpsc-merge-id {
2212 padding: 0px 15px;
2213 position: relative;
2214 }
2215
2216 .wpsc-merge-container .wpsc-merge-box .wpsc-merge-id > div {
2217 font-size: 14px;
2218 color: #777;
2219 background-color: #E5E4E2;
2220 padding: 5px 15px;
2221 border-radius: 5px;
2222 border: 1px solid #D3D3D3;
2223 }
2224
2225 .wpsc-merge-container .wpsc-merge-box .wpsc-merge-ticket-details h3 {
2226 font-size: 14px;
2227 margin: 0em 0 0.8em 0;
2228 }
2229
2230 .wpsc-merge-container .wpsc-merge-box .wpsc-merge-ticket-details > p {
2231 margin: 5px 0 15px 0;
2232 font-size: 12px;
2233 line-height: 0.1;
2234 color: #777;
2235 }
2236
2237 .wpsc-merge-container .wpsc-merge-box .wpsc-merge-ticket-details > span {
2238 font-style: italic;
2239 }
2240
2241 .wpsc-merge-divider {
2242 width: 100%;
2243 display: block;
2244 height: 0.5px;
2245 background-color: #C8C8C8;
2246 margin-bottom: 1em;
2247 }
2248
2249 .wpsc-comment-textarea {
2250 width: 100%;
2251 }
2252
2253 .wpsc-merge-container .wpsc-merge-direction {
2254 width: 100%;
2255 }
2256
2257 .wpsc-merge-container .wpsc-merge-direction svg {
2258 width: 12px;
2259 padding: 20px 0px;
2260 display: flex;
2261 margin: auto;
2262 }
2263
2264 .wpsc-merge-comment-info {
2265 margin: 5px 0 15px 0;
2266 font-size: 12px;
2267 line-height: 0.1;
2268 color: #777;
2269 }
2270
2271 @media screen and (max-width: 768px) {
2272
2273 .wpsc-merge-comment-info {
2274 line-height: normal;
2275 }
2276
2277 .wpsc-merge-container .wpsc-merge-box {
2278 display: block;
2279 }
2280
2281 .wpsc-merge-container .wpsc-merge-box .wpsc-merge-id {
2282 padding: 0px 15px 10px 15px;
2283 }
2284 }
2285 /* Merge ticket popup css ends */