PluginProbe
WANotifier for Forms and Actions / 2.1.3
WANotifier for Forms and Actions v2.1.3
3.1.0 3.0.4 2.7.10 2.7.11 2.7.12 2.7.13 2.7.2 2.7.3 2.7.4 2.7.5 2.7.6 2.7.7 2.7.8 2.7.9 3.0.0 3.0.1 3.0.2 3.0.3 trunk 0.1.0 0.1.1 1.0.0 1.0.1 1.0.2 1.0.3 All 66 releases
notifier / assets / css / admin.css

admin.css in WANotifier for Forms and Actions 2.1.3, at assets/css/admin.css

846 lines 18.8 KB
No matching file
Up and down to move Enter to open Esc to close
Raw Download Zip
1 /**
2 * Breakpoints
3 */
4 /**
5 * Colours
6 */
7 .hide {
8 display: none !important;
9 }
10
11 .small {
12 font-size: 85%;
13 }
14
15 .d-block {
16 display: block !important;
17 }
18
19 .d-flex {
20 display: flex !important;
21 flex-wrap: wrap;
22 }
23
24 .justify-content-center {
25 justify-content: center;
26 }
27
28 .justify-content-end {
29 justify-content: flex-end;
30 }
31
32 .justify-content-between {
33 justify-content: space-between;
34 }
35
36 .align-content-center {
37 align-content: center;
38 }
39
40 .align-items-center {
41 align-items: center;
42 }
43
44 .col {
45 flex: 1 0 0%;
46 box-sizing: border-box;
47 }
48
49 .w-25 {
50 flex: 0 0 auto;
51 width: 25%;
52 }
53
54 .w-30 {
55 flex: 0 0 auto;
56 width: 30%;
57 }
58
59 .w-33 {
60 flex: 0 0 auto;
61 width: 33.33333333%;
62 }
63
64 .w-40 {
65 flex: 0 0 auto;
66 width: 40%;
67 }
68
69 .w-50 {
70 flex: 0 0 auto;
71 width: 50%;
72 }
73
74 .w-60 {
75 flex: 0 0 auto;
76 width: 60%;
77 }
78
79 .w-70 {
80 flex: 0 0 auto;
81 width: 70%;
82 }
83
84 .w-75 {
85 flex: 0 0 auto;
86 width: 75%;
87 }
88
89 .w-80 {
90 flex: 0 0 auto;
91 width: 80%;
92 }
93
94 .w-100 {
95 flex: 1 0 100%;
96 }
97
98 .w-auto {
99 width: auto !important;
100 }
101
102 .rounded {
103 border-radius: 8px;
104 }
105
106 .bg-white {
107 background-color: #fff;
108 }
109
110 .p-20 {
111 padding: 20px;
112 }
113
114 .text-truncate {
115 display: block;
116 white-space: nowrap;
117 overflow: hidden;
118 text-overflow: ellipsis;
119 }
120
121 .text-left {
122 text-align: left;
123 }
124
125 .text-right {
126 text-align: right;
127 }
128
129 .text-uppercase {
130 text-transform: uppercase;
131 }
132
133 .ms-auto {
134 margin-left: auto;
135 }
136
137 .mt-0 {
138 margin-top: 0;
139 }
140
141 .mb-0 {
142 margin-bottom: 0;
143 }
144
145 .loader {
146 height: 100px;
147 background-size: 50px 50px;
148 background-repeat: no-repeat;
149 background-position: center;
150 background-color: #f7f7f7;
151 background-image: url("data:image/svg+xml,%3Csvg version='1.1' id='L9' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 100 100' enable-background='new 0 0 0 0' xml:space='preserve'%3E%3Cpath fill='%23000' d='M73,50c0-12.7-10.3-23-23-23S27,37.3,27,50 M30.9,50c0-10.5,8.5-19.1,19.1-19.1S69.1,39.5,69.1,50'%3E%3CanimateTransform attributeName='transform' attributeType='XML' type='rotate' dur='1s' from='0 50 50' to='360 50 50' repeatCount='indefinite' /%3E%3C/path%3E%3C/svg%3E");
152 }
153
154 /* Global */
155 #wpcontent {
156 padding-left: 0 !important;
157 }
158
159 #screen-meta {
160 margin: 0 -20px;
161 }
162 @media screen and (max-width: 767px) {
163 #screen-meta {
164 margin: 0 0 0 -12px;
165 border-left: 0;
166 border-right: 0;
167 }
168 }
169
170 #wpbody {
171 padding-left: 20px;
172 }
173 @media screen and (max-width: 767px) {
174 #wpbody {
175 padding-top: 0;
176 padding-left: 12px;
177 }
178 }
179
180 .wrap.notifier {
181 margin-top: 20px;
182 }
183
184 /* Meta Fields */
185 .meta-fields .form-field {
186 position: relative;
187 }
188 .meta-fields .form-field label.form-label,
189 .meta-fields .form-field legend {
190 font-size: 14px;
191 font-weight: 500;
192 display: block;
193 margin-bottom: 5px;
194 }
195 .meta-fields .form-field label .limit-text {
196 float: right;
197 color: #999;
198 }
199 .meta-fields .form-field input[type=text],
200 .meta-fields .form-field input[type=password],
201 .meta-fields .form-field textarea,
202 .meta-fields .form-field select {
203 width: 100%;
204 max-width: 100%;
205 }
206 @media screen and (max-width: 767px) {
207 .meta-fields .form-field input[type=text],
208 .meta-fields .form-field input[type=password],
209 .meta-fields .form-field textarea,
210 .meta-fields .form-field select {
211 width: 100%;
212 }
213 }
214 .meta-fields .form-field input[disabled=disabled],
215 .meta-fields .form-field textarea[disabled=disabled],
216 .meta-fields .form-field select[disabled=disabled] {
217 background-color: #f6f7f7;
218 cursor: not-allowed;
219 }
220 .meta-fields .form-field *:disabled {
221 background-color: #f6f7f7;
222 }
223 .meta-fields .form-field .radio-buttons {
224 margin: 0;
225 }
226 .meta-fields .form-field .radio-buttons li {
227 display: inline-block;
228 margin-right: 20px;
229 }
230 .meta-fields .form-field .radio-buttons li label {
231 display: inline-block;
232 width: auto;
233 }
234 .meta-fields .form-field .fields-repeater {
235 width: 100%;
236 border-collapse: collapse;
237 }
238 .meta-fields .form-field .fields-repeater th {
239 text-align: left;
240 font-size: 13px;
241 font-weight: normal;
242 border: 1px solid #a8a6a6;
243 padding: 10px;
244 background-color: #f7f7f7;
245 }
246 .meta-fields .form-field .fields-repeater td {
247 width: 50%;
248 border: 1px solid #a8a6a6;
249 padding: 10px;
250 vertical-align: top;
251 }
252 .meta-fields .form-field .fields-repeater td input,
253 .meta-fields .form-field .fields-repeater td select,
254 .meta-fields .form-field .fields-repeater td textarea {
255 width: 100%;
256 }
257 .meta-fields .form-field .fields-repeater td.delete-repeater-field {
258 min-width: 20px;
259 text-align: center;
260 }
261 .meta-fields .form-field .fields-repeater td.delete-repeater-field span {
262 margin-top: 5px;
263 cursor: pointer;
264 }
265 .meta-fields fieldset.form-field {
266 font-size: 13px;
267 line-height: 1.5;
268 margin: 1em 0;
269 }
270 .meta-fields h3 {
271 margin-bottom: 5px;
272 font-size: 14px;
273 }
274 .meta-fields h4 {
275 margin-bottom: 0;
276 }
277 .meta-fields hr {
278 margin: 20px auto;
279 }
280 .meta-fields .optional-text {
281 color: #999;
282 font-weight: normal;
283 }
284 .meta-fields .description {
285 font-size: 12px;
286 margin-top: 5px;
287 display: inline-block;
288 color: #555;
289 }
290 @media screen and (max-width: 767px) {
291 .meta-fields .col {
292 flex: 0 0 100%;
293 }
294 }
295
296 .notifier-media-preview {
297 display: block;
298 }
299
300 .notifier-notice {
301 margin-top: 20px;
302 margin-left: 0;
303 }
304
305 table.wp-list-table {
306 border: 1px solid #eee;
307 box-shadow: none;
308 border-radius: 8px;
309 }
310 table.wp-list-table thead td,
311 table.wp-list-table thead th {
312 padding-top: 5px !important;
313 padding-bottom: 5px !important;
314 border-bottom: 1px solid #eee;
315 }
316 table.wp-list-table tfoot td,
317 table.wp-list-table tfoot th {
318 padding-top: 5px !important;
319 padding-bottom: 5px !important;
320 border-top: 1px solid #eee;
321 }
322
323 .notifier-toggle-switch input[type=checkbox] {
324 position: relative;
325 -webkit-appearance: none;
326 -moz-appearance: none;
327 appearance: none;
328 width: 32px;
329 height: 16px;
330 background: #ccc;
331 border-radius: 40px;
332 box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
333 cursor: pointer;
334 transition: 0.2s;
335 border: none;
336 outline: none;
337 }
338 .notifier-toggle-switch input:checked[type=checkbox] {
339 -webkit-appearance: none;
340 -moz-appearance: none;
341 appearance: none;
342 background: #00c417;
343 }
344 .notifier-toggle-switch input[type=checkbox]::before {
345 content: none;
346 }
347 .notifier-toggle-switch input[type=checkbox]::after {
348 position: absolute;
349 content: "";
350 width: 16px;
351 height: 16px;
352 top: 0;
353 left: 0;
354 background: #fff;
355 border-radius: 50%;
356 box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
357 transform: scale(1.1);
358 transition: 0.2s;
359 }
360 .notifier-toggle-switch input:checked[type=checkbox]::after {
361 left: 50%;
362 }
363
364 @media screen and (max-width: 767px) {
365 #notifier-admin-header {
366 padding-top: 46px;
367 }
368 }
369 #notifier-admin-header .notifier-admin-header-content {
370 background: #fff;
371 box-sizing: border-box;
372 width: 100%;
373 top: 32px;
374 z-index: 1001;
375 padding: 0 20px;
376 height: 70px;
377 display: flex;
378 align-content: center;
379 align-items: center;
380 justify-content: space-between;
381 border-bottom: 1px solid #eee;
382 }
383 @media screen and (max-width: 767px) {
384 #notifier-admin-header .notifier-admin-header-content {
385 padding: 0 12px;
386 }
387 }
388 #notifier-admin-header .notifier-admin-header-content.sticky {
389 box-shadow: 0 8px 8px 0 rgba(85, 93, 102, 0.3);
390 }
391 @media screen and (max-width: 767px) {
392 #notifier-admin-header .notifier-admin-header-content .header-page-title {
393 flex: 1;
394 }
395 }
396 @media screen and (max-width: 767px) {
397 #notifier-admin-header .notifier-admin-header-content .header-menu-items {
398 flex: 1;
399 justify-content: flex-end;
400 }
401 }
402 #notifier-admin-header .notifier-admin-header-content .header-menu-items ul {
403 margin: 0;
404 }
405 #notifier-admin-header .notifier-admin-header-content .header-menu-items ul li {
406 display: inline-block;
407 margin-bottom: 0;
408 }
409 #notifier-admin-header .notifier-admin-header-content .header-menu-items ul li:last-child {
410 border-right: 0;
411 }
412 #notifier-admin-header .notifier-admin-header-content .header-menu-items ul li a {
413 text-decoration: none;
414 padding: 0 20px;
415 display: block;
416 }
417 @media screen and (max-width: 767px) {
418 #notifier-admin-header .notifier-admin-header-content .header-menu-items ul li a {
419 padding: 0 10px;
420 }
421 }
422 #notifier-admin-header .notifier-admin-header-content .header-menu-items ul li a.active {
423 color: #555;
424 }
425 @media screen and (max-width: 767px) {
426 #notifier-admin-header .notifier-admin-header-content .header-action-links {
427 display: none !important;
428 }
429 }
430 #notifier-admin-header .notifier-admin-header-content .header-action-links > * {
431 text-decoration: none;
432 padding: 0 10px;
433 display: inline-block;
434 }
435 #notifier-admin-header .notifier-admin-header-content .header-action-links > *.header-version {
436 color: #777;
437 }
438
439 .onboarding {
440 max-width: 600px;
441 margin: 0 auto;
442 background: #fff;
443 border-radius: 10px;
444 box-shadow: 0 8px 8px 0 rgba(85, 93, 102, 0.1);
445 }
446 .onboarding .onboarding-head {
447 padding: 20px;
448 border-bottom: 1px solid #eee;
449 }
450 .onboarding .onboarding-head h1,
451 .onboarding .onboarding-head h2,
452 .onboarding .onboarding-head h3 {
453 margin: 0;
454 }
455 .onboarding .onboarding-head p {
456 margin-bottom: 0;
457 }
458 .onboarding .onboarding-body {
459 padding: 20px;
460 }
461 .onboarding .onboarding-body h1,
462 .onboarding .onboarding-body h2,
463 .onboarding .onboarding-body h3,
464 .onboarding .onboarding-body p:first-child {
465 margin-top: 0;
466 }
467 .onboarding .onboarding-body p:last-child {
468 margin-bottom: 0;
469 }
470 .onboarding .onboarding-footer {
471 padding: 20px;
472 border-top: 1px solid #eee;
473 }
474
475 .dashboard-boxes {
476 display: flex;
477 flex-wrap: wrap;
478 margin-left: -10px;
479 margin-right: -10px;
480 }
481 .dashboard-boxes .col {
482 padding: 0 10px;
483 }
484 @media screen and (max-width: 992px) {
485 .dashboard-boxes > .col:not(.w-100) {
486 flex: 0 0 50% !important;
487 }
488 }
489 @media screen and (max-width: 767px) {
490 .dashboard-boxes > .col:not(.w-100) {
491 flex: 0 0 100% !important;
492 }
493 }
494 .dashboard-boxes .dashboard-box {
495 border-radius: 8px;
496 background-color: #fff;
497 display: flex;
498 flex-direction: column;
499 margin-bottom: 20px;
500 }
501 .dashboard-boxes .dashboard-box.dashboard-box-top {
502 height: auto;
503 }
504 @media screen and (max-width: 767px) {
505 .dashboard-boxes .dashboard-box.dashboard-box-top .w-25 {
506 flex: 0 0 100%;
507 }
508 }
509 .dashboard-boxes .dashboard-box .dashboard-box-head {
510 padding: 15px 20px;
511 border-bottom: 1px solid #eee;
512 }
513 @media screen and (max-width: 767px) {
514 .dashboard-boxes .dashboard-box .dashboard-box-head {
515 padding: 12px;
516 }
517 }
518 .dashboard-boxes .dashboard-box .dashboard-box-head h2,
519 .dashboard-boxes .dashboard-box .dashboard-box-head h3 {
520 margin: 0;
521 }
522 @media screen and (max-width: 767px) {
523 .dashboard-boxes .dashboard-box .dashboard-box-head h2,
524 .dashboard-boxes .dashboard-box .dashboard-box-head h3 {
525 font-size: 16px;
526 }
527 }
528 .dashboard-boxes .dashboard-box .dashboard-box-body {
529 padding: 15px 20px;
530 }
531 @media screen and (max-width: 767px) {
532 .dashboard-boxes .dashboard-box .dashboard-box-body {
533 padding: 12px;
534 }
535 }
536 .dashboard-boxes .dashboard-box .dashboard-box-body *:first-child {
537 margin-top: 0;
538 }
539 .dashboard-boxes .dashboard-box .dashboard-box-body h3 {
540 font-size: 1.2em;
541 }
542 .dashboard-boxes .dashboard-box .dashboard-box-body table {
543 width: 100%;
544 }
545 .dashboard-boxes .dashboard-box .dashboard-box-body table th,
546 .dashboard-boxes .dashboard-box .dashboard-box-body table td {
547 text-align: left;
548 vertical-align: top;
549 }
550 .dashboard-boxes .dashboard-box .dashboard-box-body table th:first-child,
551 .dashboard-boxes .dashboard-box .dashboard-box-body table td:first-child {
552 width: 20%;
553 }
554 .dashboard-boxes .dashboard-box .dashboard-box-body .dashicons-marker {
555 color: #ccc;
556 }
557 .dashboard-boxes .dashboard-box .dashboard-box-body .dashicons-yes-alt {
558 color: #01a401;
559 }
560 .dashboard-boxes .dashboard-box .dashboard-box-footer {
561 margin-top: auto;
562 padding: 15px 20px;
563 }
564 .dashboard-boxes .dashboard-box .dashboard-box-footer .dashboard-box-buttons-wrap {
565 text-align: right;
566 }
567 .dashboard-boxes .dashboard-box .dashboard-box-footer .dashboard-box-buttons-wrap .button {
568 margin-left: 10px;
569 }
570
571 #wa-notifier-api-key {
572 width: 100%;
573 margin-bottom: 10px;
574 }
575
576 .notifier-triggers-group-wrap {
577 margin-bottom: 30px;
578 }
579 .notifier-triggers-group-wrap .notifier-trigger-wrap {
580 margin-bottom: 20px;
581 }
582 .notifier-triggers-group-wrap .notifier-trigger-wrap .notifier-trigger-label {
583 font-size: 16px;
584 }
585 .notifier-triggers-group-wrap .notifier-trigger-wrap .notifier-trigger-label input[type=checkbox] {
586 -webkit-appearance: none;
587 -moz-appearance: none;
588 appearance: none;
589 margin: 0;
590 font: inherit;
591 color: #697a8d;
592 width: 20px;
593 height: 20px;
594 border: 2px solid #697a8d;
595 border-radius: 3px;
596 background-color: transparent;
597 outline: none !important;
598 margin-right: 10px;
599 }
600 .notifier-triggers-group-wrap .notifier-trigger-wrap .notifier-trigger-label input[type=checkbox]::before {
601 content: "";
602 }
603 .notifier-triggers-group-wrap .notifier-trigger-wrap .notifier-trigger-label input[type=checkbox]:checked {
604 color: white;
605 background: #0396a1;
606 border-color: #0396a1;
607 box-shadow: none;
608 }
609 .notifier-triggers-group-wrap .notifier-trigger-wrap .notifier-trigger-label input[type=checkbox]:checked::before {
610 content: "\f147";
611 font-family: "dashicons";
612 font-size: 20px;
613 display: block;
614 position: absolute;
615 height: 18px;
616 width: 18px;
617 margin-top: -1px;
618 margin-left: -3px;
619 }
620 .notifier-triggers-group-wrap .notifier-trigger-wrap .notifier-trigger-label .notifier-show-trigger-info {
621 border: 0;
622 background: none;
623 padding: 0;
624 cursor: pointer;
625 color: #aaa;
626 }
627 .notifier-triggers-group-wrap .notifier-trigger-wrap .notifier-trigger-info {
628 background: #f7f7f7;
629 padding: 10px;
630 margin-top: 10px;
631 border: 1px solid #eee;
632 border-radius: 10px;
633 }
634
635 .notifier-overview-image {
636 float: right;
637 display: inline-block;
638 }
639 .notifier-overview-image img {
640 width: 100%;
641 height: auto;
642 max-width: 200px;
643 }
644 @media screen and (max-width: 767px) {
645 .notifier-overview-image {
646 float: none;
647 }
648 .notifier-overview-image img {
649 max-width: none;
650 }
651 }
652
653 .notifier-settings-form-profile .notifier-profile-fields-right {
654 margin-left: 50px;
655 margin-top: 100px;
656 }
657 @media screen and (max-width: 767px) {
658 .notifier-settings-form-profile .notifier-profile-fields-right {
659 display: none;
660 }
661 }
662
663 .notifier-fields-table {
664 width: 100%;
665 max-width: 700px;
666 }
667 .notifier-fields-table tr th {
668 vertical-align: top;
669 text-align: left;
670 padding: 20px 10px 20px 0;
671 width: 200px;
672 line-height: 1.3;
673 font-weight: 600;
674 }
675 @media screen and (max-width: 767px) {
676 .notifier-fields-table tr th {
677 display: block;
678 width: 100%;
679 padding: 10px 0 5px 0;
680 }
681 }
682 .notifier-fields-table tr th.section-title {
683 padding: 0;
684 }
685 .notifier-fields-table tr td {
686 margin-bottom: 9px;
687 padding: 15px 10px;
688 line-height: 1.3;
689 vertical-align: middle;
690 }
691 @media screen and (max-width: 767px) {
692 .notifier-fields-table tr td {
693 display: block;
694 width: 100%;
695 padding: 0;
696 }
697 }
698 .notifier-fields-table tr h3 {
699 margin-bottom: 0px;
700 }
701 .notifier-fields-table tr .description {
702 font-weight: normal;
703 }
704 .notifier-fields-table input:not([type=button]),
705 .notifier-fields-table textarea,
706 .notifier-fields-table select {
707 width: 100%;
708 max-width: none;
709 }
710 .notifier-fields-table #notifier_ctc_enable {
711 max-width: 16px;
712 height: 16px;
713 }
714
715 .notifier-chat-btn-image-url {
716 display: none;
717 }
718
719 .disabled-field {
720 background: #fff !important;
721 opacity: 0.5;
722 pointer-events: none;
723 }
724
725 .post-type-wa_notifier_trigger #minor-publishing-actions #save-action,
726 .post-type-wa_notifier_trigger #misc-publishing-actions {
727 display: none;
728 }
729 .post-type-wa_notifier_trigger #minor-publishing-actions {
730 padding: 15px 10px;
731 text-align: left;
732 }
733 .post-type-wa_notifier_trigger .trigger-fields-wrap {
734 margin: 1em 0;
735 }
736 .post-type-wa_notifier_trigger .notifier-trigger-merge-tags {
737 margin-bottom: 5px;
738 }
739 .post-type-wa_notifier_trigger .notifier-trigger-merge-tags .notifier-merge-tags-wrap {
740 padding: 10px 10px 5px 10px;
741 border: 1px solid #8c8f94;
742 border-radius: 3px;
743 }
744 .post-type-wa_notifier_trigger .notifier-trigger-merge-tags .notifier-merge-tags-wrap .notifier-merge-tags {
745 flex-wrap: nowrap;
746 margin-bottom: 10px;
747 }
748 .post-type-wa_notifier_trigger .notifier-trigger-merge-tags .notifier-merge-tags-wrap .notifier-merge-tags:last-child {
749 margin-bottom: 0;
750 }
751 @media screen and (max-width: 767px) {
752 .post-type-wa_notifier_trigger .notifier-trigger-merge-tags .notifier-merge-tags-wrap .notifier-merge-tags {
753 flex-wrap: wrap;
754 }
755 }
756 .post-type-wa_notifier_trigger .notifier-trigger-merge-tags .notifier-merge-tags-wrap .notifier-merge-tags legend.form-label {
757 font-size: 13px;
758 min-width: 120px;
759 max-width: 120px;
760 font-weight: 500;
761 margin-bottom: 5px;
762 margin-top: 1px;
763 }
764 .post-type-wa_notifier_trigger .notifier-trigger-merge-tags .notifier-merge-tags-wrap .notifier-merge-tags .multi-checkbox-wrapper {
765 flex-grow: 1;
766 }
767 .post-type-wa_notifier_trigger .notifier-trigger-merge-tags .notifier-merge-tags-wrap .notifier-merge-tags .multi-checkbox-wrapper .form-check {
768 display: inline-block;
769 margin-bottom: 5px;
770 width: 25%;
771 }
772 .post-type-wa_notifier_trigger .notifier-trigger-merge-tags .notifier-merge-tags-wrap .notifier-merge-tags .multi-checkbox-wrapper .form-check .form-check-label {
773 width: auto;
774 display: block;
775 white-space: nowrap;
776 overflow: hidden;
777 text-overflow: ellipsis;
778 }
779 @media screen and (max-width: 1440px) {
780 .post-type-wa_notifier_trigger .notifier-trigger-merge-tags .notifier-merge-tags-wrap .notifier-merge-tags .multi-checkbox-wrapper .form-check {
781 width: 33.33%;
782 }
783 }
784 @media screen and (max-width: 1024px) {
785 .post-type-wa_notifier_trigger .notifier-trigger-merge-tags .notifier-merge-tags-wrap .notifier-merge-tags .multi-checkbox-wrapper .form-check {
786 width: 50%;
787 }
788 }
789 @media screen and (max-width: 767px) {
790 .post-type-wa_notifier_trigger .notifier-trigger-merge-tags .notifier-merge-tags-wrap .notifier-merge-tags .multi-checkbox-wrapper .form-check {
791 width: 100%;
792 }
793 }
794
795 .notifier-click-to-chat-btn {
796 position: fixed;
797 bottom: 20px;
798 right: 20px;
799 cursor: pointer;
800 z-index: 99999999;
801 }
802 .notifier-click-to-chat-btn a {
803 text-decoration: none !important;
804 display: inline-block;
805 outline: none !important;
806 }
807 .notifier-click-to-chat-btn a:hover, .notifier-click-to-chat-btn a:focus {
808 text-decoration: none !important;
809 }
810 .notifier-click-to-chat-btn.notifier-click-to-chat-style-3 a {
811 display: flex;
812 justify-content: center;
813 align-items: center;
814 background-color: #e4e4e4;
815 color: #7f7d7d;
816 padding: 0 12px;
817 border-radius: 25px;
818 font-size: 13px;
819 line-height: 32px;
820 }
821 .notifier-click-to-chat-btn.notifier-click-to-chat-style-4 a {
822 display: flex;
823 padding: 0 2rem;
824 letter-spacing: 0.5px;
825 transition: 0.2s ease-out;
826 text-align: center;
827 justify-content: center;
828 align-items: center;
829 border-radius: 2px;
830 height: 36px;
831 line-height: 36px;
832 vertical-align: middle;
833 box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -2px rgba(0, 0, 0, 0.2);
834 box-sizing: inherit;
835 background-color: #26a69a;
836 color: #fff;
837 }
838 .notifier-click-to-chat-btn.notifier-click-to-chat-style-custom img {
839 width: 100%;
840 height: auto;
841 max-width: 150px;
842 max-height: 150px;
843 -o-object-fit: cover;
844 object-fit: cover;
845 }
846