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

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