WP-Chatbot for Facebook Messenger Customer Chat - Version 4.7

Version Description

Compatibility with latest version of WordPress Bug fixes and usability improvements

Download this release

Release Info

Developer mobilemonkeydevops
Plugin Icon 128x128 WP-Chatbot for Facebook Messenger Customer Chat
Version 4.7
Comparing to
See all releases

Code changes from version 4.6.3 to 4.7

Files changed (3) hide show
  1. admin/assets/css/admin-styles.css +3527 -3421
  2. readme.txt +6 -2
  3. wp-chatbot.php +2 -2
admin/assets/css/admin-styles.css CHANGED
@@ -1,3421 +1,3527 @@
1
- /* Styles for admin page */
2
-
3
-
4
- /* Submit button */
5
- /* .options .submit { */
6
- .submit {
7
- position: sticky !important;
8
- bottom: 1px;
9
- }
10
-
11
-
12
- .display-none {
13
- display: none;
14
- }
15
-
16
- .display-block {
17
- display: block;
18
- }
19
-
20
- .mobilemonkey-big-button {
21
- padding: 20px 40px !important;
22
- line-height: 0 !important;
23
- }
24
-
25
- .connect-button {
26
- background-color: #4267b2;
27
- border-radius: 4px;
28
- color: #fff;
29
- display: block;
30
- width: 254px;
31
- height: 40px;
32
- text-decoration: none;
33
- }
34
-
35
- .connect-button:hover, .connect-button:focus {
36
- color: #fff;
37
- }
38
-
39
- .connected-page {
40
- padding: 0 15px 15px 0;
41
- }
42
-
43
- .connected-page .connected-page-title {
44
- font-size: 16px;
45
- font-weight: 700;
46
- }
47
-
48
- .connected-page .connected-page-title span {
49
- font-weight: bold;
50
- color: green;
51
- }
52
-
53
- .connected-page-settings {
54
- position: relative;
55
- float: right;
56
- }
57
-
58
- .connected-page-settings #button_disconnect_page {
59
- cursor: pointer;
60
- background-color: #ca4646;
61
- display: inline-block;
62
- padding: 3px 8px;
63
- font-size: 12px;
64
- text-decoration: none;
65
- color: #fff;
66
- border-radius: 5px;
67
- }
68
-
69
- .connected-page-settings #button_disconnect_page:hover {
70
- color: #3a3a3a;
71
- background: #e8e8e8;
72
- }
73
-
74
- .cat-checklist {
75
- padding: 15px !important;
76
- margin-bottom: 30px !important;
77
- }
78
-
79
- .connect-button span {
80
- font-family: Helvetica, Arial, sans-serif;
81
- font-size: 14px;
82
- text-align: center;
83
- display: inline-block;
84
- width: 200px;
85
- }
86
-
87
- .connect-button svg {
88
- height: 24px;
89
- margin: 8px;
90
- display: inline-block;
91
- vertical-align: middle;
92
- }
93
-
94
- .choose-page {
95
- margin-top: 10px;
96
- }
97
-
98
- .choose-page .select-page {
99
- border: 1px solid #dedede;
100
- padding: 15px;
101
- margin-top: -1px;
102
- font-size: 16px;
103
- }
104
-
105
- .choose-page .select-page + .select-page {
106
- border-bottom: none;
107
- }
108
-
109
- .choose-page .select-page:last-child {
110
- border-bottom: 1px solid #dedede;
111
- }
112
-
113
- .choose-page .select-page a {
114
- background-color: #d93;
115
- display: inline-block;
116
- float: right;
117
- padding: 3px 8px;
118
- font-size: 12px;
119
- text-decoration: none;
120
- color: #fff;
121
- border-radius: 5px;
122
- }
123
-
124
- .choose-page .select-page a:hover {
125
- color: #3a3a3a;
126
- background: #e8e8e8;
127
- }
128
-
129
- .logout-mobilemonkey {
130
- text-align: right;
131
- margin: 0 0 15px 0;
132
- overflow: hidden;
133
- }
134
-
135
- .logout-mobilemonkey a {
136
- background-color: #d93;
137
- display: inline-block;
138
- float: right;
139
- padding: 3px 8px;
140
- font-size: 12px;
141
- text-decoration: none;
142
- color: #fff;
143
- border-radius: 5px;
144
- }
145
-
146
- .logout-mobilemonkey a:hover {
147
- color: #3a3a3a;
148
- background: #e8e8e8;
149
- }
150
-
151
- .mobilemonkey-button {
152
- margin-top: 10px;
153
- position: relative;
154
- display: inline-block;
155
- }
156
-
157
- .mobilemonkey-button button {
158
- background-color: #d93;
159
- display: inline-block;
160
- padding: 3px 8px;
161
- font-size: 12px;
162
- text-decoration: none;
163
- color: #fff;
164
- border-radius: 5px;
165
- }
166
-
167
- .mobilemonkey-button .copiedtext {
168
- color: green;
169
- display: none;
170
- }
171
-
172
- .get-subscribers_block {
173
- margin-bottom: 15px;
174
- }
175
-
176
- .get-subscribers_block h3 {
177
- margin: 0 0 10px;
178
- }
179
-
180
- .get-subscribers_block .link-icon {
181
- width: 45px;
182
- display: inline-block;
183
- margin-right: 10px;
184
- vertical-align: top;
185
- }
186
-
187
- .get-subscribers_block .link-icon path {
188
- fill: #654fa5;
189
- }
190
-
191
- .get-subscribers_block .link-info {
192
- display: inline-block;
193
- }
194
-
195
- .get-subscribers_block button {
196
- background-color: #d93;
197
- display: inline-block;
198
- border: none;
199
- padding: 5px 8px;
200
- font-size: 12px;
201
- text-decoration: none;
202
- color: #fff;
203
- border-radius: 5px;
204
- }
205
-
206
- .get-subscribers_block button:hover {
207
- cursor: pointer;
208
- color: #3a3a3a;
209
- background: #e8e8e8;
210
- }
211
-
212
- .mobilemonkey-settings {
213
- display: inline-block;
214
- }
215
-
216
- .mobilemonkey-settings, .connect-page {
217
- position: relative;
218
- }
219
-
220
- .connect-page {
221
- float: right;
222
- height: 32px;
223
- }
224
-
225
- .opacity-button {
226
- opacity: 0.3;
227
- }
228
-
229
- .lazyload {
230
- display: none;
231
- position: absolute;
232
- top: 0;
233
- background: url(../img/lazyload.svg) center no-repeat;
234
- width: 100%;
235
- bottom: 0;
236
- left: 0;
237
- }
238
- .save_change{
239
- position: relative;
240
- }
241
-
242
- .connect-page .lazyload, .connected-page-settings .lazyload {
243
- top: -8px;
244
-
245
- }
246
-
247
- .active-page-info {
248
- display: flex;
249
- align-items: flex-start;
250
- flex-direction: column;
251
- }
252
- .connect_check .fa{
253
- display: inline;
254
- }
255
- .page_name__wrap{
256
- display: flex;
257
- flex-direction: row;
258
- align-items: center;
259
- }
260
- span.pro,span.free{
261
- padding: 3px 10px 3px 10px;
262
- width: 50px;
263
- height: 25px;
264
- color: #FFFFFF;
265
- font-family: "Open Sans",sans-serif;
266
- font-size: 13px;
267
- font-weight: bold;
268
- line-height: 19px;
269
- text-align: center;
270
- border-radius: 7px;
271
- margin-left: 11px;
272
- background: -webkit-gradient(linear, left top, right top, from(#db8700), to(#f0b537));
273
- background: linear-gradient(to right, #db8700 0%, #f0b537 100%);
274
- background: -webkit-linear-gradient(left, #db8700 0%, #f0b537 100%);
275
- }
276
- span.pro{
277
- background: -webkit-gradient(linear, left top, right top, from(#db8700), to(#f0b537));
278
- background: linear-gradient(to right, #db8700 0%, #f0b537 100%);
279
- background: -webkit-linear-gradient(left, #db8700 0%, #f0b537 100%);
280
- }
281
- span.free{
282
- background: none;
283
- background-color: #C8C8CE;
284
- }
285
- /* .active-page-image, .active-page-info {
286
- display: inline-block;
287
- vertical-align: middle;
288
- } */
289
-
290
- .active-page-image {
291
- max-width: 60px;
292
- margin-right: 10px;
293
- }
294
-
295
- .toplevel_page_mobilemonkey-contacts {
296
- padding-right: 20px;
297
- }
298
-
299
- /* i.mce-i-mobilemonkey-shortcode {
300
- background-image: url('../image/tinymce_icon.png');
301
- } */
302
-
303
- .get-mm-free-button {
304
- position: relative;
305
- width: 254px;
306
- height: 40px;
307
- overflow: hidden;
308
- border-radius: 3px;
309
- }
310
-
311
- .get-mm-free-button__fallback,
312
- .get-mm-free-button__fallback:hover {
313
- text-decoration: none;
314
- }
315
-
316
- /*Fallback button and iframe:before get same styles */
317
- .get-mm-free-button__fallback, .get-mm-free-button .fb-send-to-messenger.fb_iframe_widget::before {
318
- color: #fff;
319
- font-size: 19px;
320
- line-height: 29px;
321
- text-transform: uppercase;
322
- border-radius: 3px;
323
- position: absolute;
324
- top: 0;
325
- left: 0;
326
- right: 0;
327
- bottom: 0;
328
- transition: all 0.3s ease 0s;
329
- }
330
-
331
- .get-mm-free-button .fb-send-to-messenger.fb_iframe_widget::before {
332
- pointer-events: none;
333
- z-index: 2;
334
- content: 'Connect Facebook Page';
335
- font-family: Helvetica, Arial, sans-serif;
336
- background: #4267b2 url(../img/fb.svg) 8px no-repeat;
337
- background-size: 24px;
338
- font-size: 14px;
339
- text-align: right;
340
- padding-right: 13px;
341
- box-sizing: border-box;
342
- color: #fff;
343
- width: 254px;
344
- height: 40px;
345
- line-height: 40px;
346
- text-decoration: none;
347
- text-transform: uppercase;
348
- border-radius: 3px;
349
- position: absolute;
350
- top: 0;
351
- left: 0;
352
- right: 0;
353
- bottom: 0;
354
- transition: all 0.3s ease 0s;
355
- }
356
-
357
- /* Hide Facebook plugin until rendered callback from Facebook */
358
- .get-mm-free-button .fb-send-to-messenger {
359
- display: none;
360
- }
361
-
362
- /* Add class to show Facebook plugin once get rendered callback from Facebook */
363
- .get-mm-free-button .fb-send-to-messenger.fb-send-to-messenger--loaded-iframe {
364
- display: block;
365
- }
366
-
367
- .mobilemonkey-logo {
368
- background: url(../img/mobilemonkey_logo.png) left bottom no-repeat;
369
- background-size: contain;
370
- height: 70px;
371
- max-width: 330px;
372
- position: relative;
373
- }
374
-
375
- .options-subtitle {
376
- font-size: 12px;
377
- }
378
-
379
-
380
-
381
-
382
-
383
- .switch {
384
- position: relative;
385
- display: inline-block;
386
- width: 52px;
387
- height: 25px;
388
- margin: 0;
389
- margin-right: 20px;
390
- }
391
-
392
- /* Hide default HTML checkbox */
393
- .switch input {
394
- opacity: 0;
395
- width: 0;
396
- height: 0;
397
- }
398
- .qq_label{
399
- margin-top: 5px;
400
- }
401
- /* The slider */
402
- .slider {
403
- position: absolute;
404
- cursor: pointer;
405
- top: 0;
406
- left: 0;
407
- right: 0;
408
- bottom: 0;
409
- background-color: #ccc;
410
- -webkit-transition: .4s;
411
- transition: .4s;
412
- }
413
- .switch__wrap{
414
- display: flex;
415
- margin-top: 15px;
416
- }
417
- .switch__wrap p{
418
- color: #000;
419
- }
420
- .slider:before {
421
- position: absolute;
422
- content: "";
423
- height: 18px;
424
- width: 18px;
425
- left: 4px;
426
- bottom: 4px;
427
- background-color: white;
428
- -webkit-transition: .4s;
429
- transition: .4s;
430
- }
431
-
432
- input:checked + .slider {
433
- background-color: #2196F3;
434
- }
435
-
436
- input:focus + .slider {
437
- box-shadow: 0 0 1px #2196F3;
438
- }
439
-
440
- input:checked + .slider:before {
441
- -webkit-transform: translateX(26px);
442
- -ms-transform: translateX(26px);
443
- transform: translateX(26px);
444
- }
445
-
446
- /* Rounded sliders */
447
- .slider.round {
448
- border-radius: 34px;
449
- }
450
-
451
- .slider.round:before {
452
- border-radius: 50%;
453
- }
454
-
455
- .answering-service label {
456
- display: block;
457
- margin-bottom: 10px;
458
- }
459
-
460
- .toc-tab-box .answering-service .input-field {
461
- padding-left: 0;
462
- }
463
-
464
- .toc-tab-box .answering-service h6 {
465
- font-weight: bold;
466
- }
467
-
468
- .answering-service textarea {
469
- resize: none;
470
- }
471
-
472
- .as_state p {
473
- display: inline-block;
474
- color: #444;
475
- margin-left: 20px;
476
- font-size: 1rem;
477
- font-weight: bold;
478
- vertical-align: middle;
479
- }
480
-
481
- body .toc-tab-box .answering-service input {
482
- border: 1px solid #9e9e9e;
483
- padding: 0 0 0 20px;
484
- }
485
-
486
- body .toc-tab-box .button {
487
- padding: 20px;
488
- line-height: 0;
489
- }
490
-
491
- .toc-tab-box .form-table th {
492
- width: 1px;
493
- }
494
- .form-table td p{
495
- display: block;
496
- }
497
-
498
- .form-table{
499
- position: relative;
500
- }
501
- .mm_only_block{
502
- margin-top: 20px;
503
- }
504
- .mm_only_block h6 {
505
- line-height: 1.6rem;
506
- margin: 0 0 20px 0;
507
- font-weight: 600;
508
- font-size: 16px;
509
- letter-spacing: 1px;
510
- }
511
-
512
- .mm_only_block a.go_mm{
513
- height: auto;
514
- padding: 5px 15px;
515
- border-radius: 4px;
516
- color: #fff;
517
- }
518
-
519
-
520
-
521
- .mm_only_block a.go_mm{
522
- background-color: #324ef8;
523
- }
524
- .mm_only_block .but__wrap{
525
- margin-top: 20px;
526
- display: flex;
527
- flex-direction: row;
528
- }
529
-
530
- .mm_only_block a.reset_chatbot{
531
- background-color: gray;
532
- margin-right: 2rem;
533
- border-radius: 4px;
534
- color: #fff;
535
- padding: 5px 15px;
536
- }
537
-
538
-
539
- .mm_only_block a.go_mm{
540
- background-color: #324ef8;
541
- padding: 5px 15px;
542
- }
543
- .mm_only_block .but__wrap{
544
- margin-top: 20px;
545
- display: flex;
546
- flex-direction: row;
547
- }
548
-
549
- .test-bot-button {
550
- position: absolute;
551
- right: 0;
552
- }
553
-
554
-
555
- .test-bot-button__button-wrapper {
556
- height: 29px;
557
- width: 137px;
558
- margin-bottom: 10px;
559
- overflow: hidden;
560
- border-radius: 3px;
561
- position: relative;
562
- }
563
-
564
- .test-bot-button .fb_iframe_widget {
565
- position: initial;
566
- }
567
-
568
- .fb_iframe_widget {
569
- display: inline-block;
570
- position: relative;
571
- }
572
-
573
- .test-bot-button .fb-send-to-messenger.fb_iframe_widget:before {
574
- background-color: #0084ff;
575
- border-radius: 3px;
576
- color: #fff;
577
- content: "Test your ChatBot";
578
- font-size: 14px;
579
- font-weight: 500;
580
- height: 29px;
581
- line-height: 29px;
582
- pointer-events: none;
583
- position: absolute;
584
- left: 0;
585
- top: 0;
586
- width: 140px;
587
- padding-right: 0px;
588
- z-index: 2;
589
- padding-left: 8px;
590
- -webkit-transition: background-color .3s ease-in-out;
591
- transition: background-color .3s ease-in-out;
592
- cursor: pointer;
593
- font-family: "Open Sans", sans-serif;
594
- }
595
-
596
- .fb_iframe_widget span {
597
- display: inline-block;
598
- position: relative;
599
- text-align: justify;
600
- }
601
- .sp-input{
602
- text-transform: uppercase;
603
- }
604
-
605
-
606
-
607
- body {
608
- margin-top: 100px;
609
- font-family: 'Trebuchet MS', serif;
610
- line-height: 1.6;
611
- background-color: #efefef;
612
- }
613
-
614
- .step-wrapper {
615
- margin: 0 auto;
616
- background-color: #ffffff;
617
- border-radius: 10px;
618
- margin-bottom: 100px;
619
- -webkit-box-shadow: 0px 0px 5px -2px rgba(0, 0, 0, 0.75);
620
- box-shadow: 0px 0px 5px -2px rgba(0, 0, 0, 0.75);
621
- }
622
-
623
- .step-wrapper .tab_header {
624
- display: -webkit-box;
625
- display: -ms-flexbox;
626
- display: flex;
627
- -webkit-box-align: center;
628
- -ms-flex-align: center;
629
- align-items: center;
630
- background-color: #f7f8fa;
631
- }
632
- .step-wrapper .tab-link.current span.tab_header{
633
- background-color: #ffffff;
634
- }
635
-
636
- .step-wrapper ul.tabs_wrapper {
637
- margin: 0px;
638
- padding: 0px;
639
- list-style: none;
640
- border-radius: 12px;
641
-
642
- }
643
-
644
- .step-wrapper ul li {
645
- color: #222;
646
- display: -ms-inline-flexbox;
647
- display: inline-flex;
648
- -webkit-box-align: center;
649
- -ms-flex-align: center;
650
- align-items: center;
651
- padding: 0 1em;
652
- font-size: 18px;
653
- cursor: pointer;
654
- margin-bottom: 0px;
655
- height: 50px;
656
- }
657
-
658
- .step-wrapper ul li .tab_number {
659
- width: 30px;
660
- height: 30px;
661
- display: block;
662
- background-color: #fff;
663
- display: -webkit-box;
664
- display: -ms-flexbox;
665
- display: flex;
666
- -webkit-box-align: center;
667
- -ms-flex-align: center;
668
- align-items: center;
669
- -webkit-box-pack: center;
670
- -ms-flex-pack: center;
671
- justify-content: center;
672
- border-radius: 50%;
673
- color: #3c59e4;
674
- margin-right: 0.7rem;
675
- border: 2px solid #3c59e4;
676
- }
677
-
678
- .step-wrapper ul li .tab_contacts__count {
679
- margin-left: 0.5em;
680
- background-color: #1ac9b7;
681
- padding: 0.1em 0.8em;
682
- font-size: 14px;
683
- color: #fff;
684
- border-radius: 5px;
685
- }
686
-
687
- .step-wrapper ul li.current {
688
- background-color: #fff;
689
- color: #222;
690
- border: 2px solid #3c59e4;
691
- border-bottom: 0;
692
- border-top-left-radius: 5px;
693
- border-top-right-radius: 5px;
694
- height: 52px;
695
- }
696
- .step-wrapper ul li.done .tab_number{
697
- background-color: #3c59e4;
698
- color: #fff;
699
- border: 2px solid #3c59e4;
700
- }
701
- /*.step-wrapper ul li.done.incomplete{
702
- pointer-events: none;
703
- opacity: 0.6;
704
- }*/
705
- .step-wrapper ul li.current .tab_number {
706
- background-color: #3c59e4;
707
- color: #fff;
708
- border: 2px solid #3c59e4;
709
- }
710
-
711
-
712
- .tab-content {
713
- display: none;
714
- border-bottom-right-radius: 5px;
715
- border-bottom-left-radius: 5px;
716
- }
717
-
718
- .tab-content .tab-content__wrapper {
719
- background: #fff;
720
- padding: 1em 2em;
721
- border-bottom-right-radius: 10px;
722
- border-bottom-left-radius: 10px;
723
- }
724
-
725
- .tab-content.current {
726
- display: inherit;
727
- }
728
-
729
- .tab-content h1 {
730
- color: #525252;
731
- font-family: "Open Sans",sans-serif;
732
- font-size: 36px;
733
- font-weight: bold;
734
- line-height: 49px;
735
- margin: 0 0 0.7em;
736
- }
737
-
738
- .tab-content h3 {
739
- text-transform: uppercase;
740
- color: #525252;
741
- font-family: "Open Sans",sans-serif;
742
- font-size: 16px;
743
- font-weight: 800;
744
- letter-spacing: 0.15px;
745
- line-height: 22px;
746
- margin-bottom: 0;
747
- }
748
-
749
- .tab-content p {
750
- color: #393E4A;
751
- font-family: "Open Sans",sans-serif;
752
- font-size: 16px;
753
- line-height: 22px;
754
- margin: 0.7em 0;
755
- }
756
-
757
- .tab-content textarea, .tab-content input[type=text]:not(.browser-default) {
758
- padding: 20px;
759
- width: 100%;
760
- border: 1px solid #979797;
761
- margin: .5em 0;
762
- line-height: 20px;
763
- border-radius: 5px;
764
- font-size: 16px;
765
- -webkit-box-sizing: border-box;
766
- box-sizing: border-box;
767
- }
768
-
769
- .tab-content .input-field {
770
- display: -webkit-box;
771
- display: -ms-flexbox;
772
- display: flex;
773
- -webkit-box-orient: vertical;
774
- -webkit-box-direction: normal;
775
- -ms-flex-direction: column;
776
- flex-direction: column;
777
- width: 100%;
778
- }
779
-
780
- .tab-content .input-field__email input[type=email]:not(.browser-default) {
781
- width: 250px;
782
- padding: .5em;
783
- background-color: #e7e7e7;
784
- -webkit-box-sizing: border-box;
785
- box-sizing: border-box;
786
- }
787
-
788
- .tab-content .upgrade_button {
789
- padding: .7em;
790
- border: none;
791
- border-radius: 5px;
792
- color: #fff;
793
- background: -webkit-gradient(linear, left top, right top, from(#db8700), to(#f0b537));
794
- background: linear-gradient(to right, #db8700 0%, #f0b537 100%);
795
- background: -webkit-linear-gradient(left, #db8700 0%, #f0b537 100%);
796
- font-size: 14px;
797
- font-weight: 600;
798
- text-decoration: none;
799
- }
800
-
801
- .tab-content .tab-content__footer {
802
- margin-top: 50px;
803
- display: -webkit-box;
804
- display: -ms-flexbox;
805
- display: flex;
806
- -webkit-box-pack: end;
807
- -ms-flex-pack: end;
808
- justify-content: flex-end;
809
- }
810
-
811
- .tab-content .button-primary{
812
- padding: 10px 30px;
813
- background-color: #324ef8;
814
- border-radius: 5px;
815
- color: #fff;
816
- text-decoration: none;
817
- text-transform: uppercase;
818
- font-size: 16px;
819
- height: auto;
820
- border: none;
821
- width: auto;
822
- }
823
- p.submit{
824
- margin-top: 30px;
825
- text-align: right;
826
- width: 100%;
827
- }
828
- .tab-content .button-primary:hover,.tab-content .button-primary:active,.tab-content .button-primary:focus {
829
- opacity: 0.75;
830
- background-color: #324ef8;
831
- border: none;
832
- }
833
-
834
-
835
- .as_row {
836
- display: -webkit-box;
837
- display: -ms-flexbox;
838
- display: flex;
839
- -webkit-box-orient: horizontal;
840
- -webkit-box-direction: normal;
841
- -ms-flex-direction: row;
842
- flex-direction: row;
843
- -webkit-box-align: center;
844
- -ms-flex-align: center;
845
- align-items: center;
846
- }
847
-
848
- .as_row .switch {
849
- position: relative;
850
- display: inline-block;
851
- width: 52px;
852
- height: 27px;
853
- margin: 0;
854
- margin-right: 20px;
855
- }
856
-
857
- .as_row .switch input {
858
- opacity: 0;
859
- width: 0;
860
- height: 0;
861
- }
862
-
863
- .as_row .slider {
864
- position: absolute;
865
- cursor: pointer;
866
- top: 0;
867
- left: 0;
868
- right: 0;
869
- bottom: 0;
870
- background-color: #ccc;
871
- -webkit-transition: .4s;
872
- transition: .4s;
873
- }
874
-
875
- .as_row .slider:before {
876
- position: absolute;
877
- content: "";
878
- height: 19px;
879
- width: 19px;
880
- left: 4px;
881
- bottom: 4px;
882
- background-color: white;
883
- -webkit-transition: .4s;
884
- transition: .4s;
885
- }
886
-
887
- .as_row input:checked + .slider {
888
- background-color: #2196F3;
889
- }
890
-
891
- .as_row input:focus + .slider {
892
- -webkit-box-shadow: 0 0 1px #2196F3;
893
- box-shadow: 0 0 1px #2196F3;
894
- }
895
-
896
- .as_row input:checked + .slider:before {
897
- -webkit-transform: translateX(25px);
898
- transform: translateX(25px);
899
- }
900
-
901
- .as_row .slider.round {
902
- border-radius: 34px;
903
- }
904
-
905
- .as_row .slider.round:before {
906
- border-radius: 50%;
907
- }
908
-
909
- .customization_button__wrapper, .pro_button__wrapper {
910
- background: -webkit-gradient(linear, left top, right top, from(#3d5afe), to(#7c4dff));
911
- background: linear-gradient(to right, #3d5afe 0%, #7c4dff 100%);
912
- padding: 1em 1.5em;
913
- border-radius: 18px;
914
- -webkit-box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, 0.75);
915
- box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, 0.75);
916
- }
917
- .pro_button__wrapper{
918
- position: absolute;
919
- display: flex;
920
- align-items: center;
921
- top: -4px;
922
- width: 100%;
923
- /* height: 64px;*/
924
- padding: 0 1em;
925
- left: 0;
926
- }
927
-
928
- .customization_button__wrapper .customization_button__link, .pro_button__wrapper .pro_button__link {
929
- text-decoration: none;
930
- }
931
- .pro_button__wrapper .pro_button__link{
932
- width: 100%;
933
- height: 100%;
934
- }
935
- .pro_button__wrapper .pro_button__link:focus{
936
- border: 0;
937
- box-shadow: none;
938
- height: 100%;
939
- }
940
-
941
- .customization_button__wrapper .customization_button__image {
942
- background-image: url("../img/monkey_head.png");
943
- background-size: contain;
944
- width: 45px;
945
- height: 45px;
946
- display: block;
947
- background-repeat: no-repeat;
948
- background-position: center;
949
- margin: 0 0.3em;
950
- }
951
-
952
- .customization_button__wrapper .customization_button,.pro_button__wrapper .pro_button {
953
- display: -webkit-box;
954
- display: -ms-flexbox;
955
- display: flex;
956
- -webkit-box-pack: justify;
957
- -ms-flex-pack: justify;
958
- justify-content: space-between;
959
- -webkit-box-align: center;
960
- -ms-flex-align: center;
961
- align-items: center;
962
- }
963
- .pro_button__wrapper .pro_button{
964
- display: flex;
965
- justify-content: space-between;
966
- height: 100%;
967
- }
968
-
969
- .pro_button__content{
970
- flex-direction: column;
971
- height: 100%;
972
- }
973
- .pro_button__content h3,.pro_button__content p{
974
- color: #fff;
975
- padding: 0;
976
- margin: 0;
977
- }
978
- .tab-content .form-table .pro_button__content p{
979
- margin-top: 5px;
980
- margin-bottom: 7px;
981
- }
982
- .pro_button__content h3 b{
983
- color: red;
984
- text-decoration: underline;
985
- }
986
-
987
- .customization_button__wrapper .customization_button .customization_button__content,.pro_button__wrapper .pro_button .pro_button__content {
988
- display: -webkit-box;
989
- display: -ms-flexbox;
990
- display: flex;
991
- -webkit-box-align: center;
992
- -ms-flex-align: center;
993
- align-items: center;
994
- color: #fff;
995
- font-size: 22px;
996
- font-weight: bold;
997
- line-height: 30px;
998
- justify-content: center;
999
- }
1000
-
1001
- .customization_button__wrapper .customization_button__action, .pro_button__wrapper .pro_button__action{
1002
- padding: 1em 2em;
1003
- background-color: #fff;
1004
- border-radius: 10px;
1005
- display: -webkit-box;
1006
- display: -ms-flexbox;
1007
- display: flex;
1008
- -webkit-box-align: center;
1009
- -ms-flex-align: center;
1010
- align-items: center;
1011
- }
1012
- .pro_button__wrapper .pro_button__action{
1013
- padding: 0.6rem 2rem;
1014
- }
1015
- .customization_button__wrapper .customization_button__action .button_action__text , .pro_button__wrapper .pro_button_action__text{
1016
- font-size: 18px;
1017
- font-weight: 800;
1018
- line-height: 24px;
1019
- text-transform: uppercase;
1020
- color: #7e74fe;
1021
- }
1022
-
1023
- .customize_section input, .customize_section select{
1024
- width: 30%;
1025
- }
1026
- .select-1{
1027
- margin: 15px 0;
1028
- }
1029
-
1030
- .customize_section input.select_numbers, .customize_section select.select_numbers {
1031
- width: 100px;
1032
- }
1033
-
1034
- .customize_section .greeting_display__wrapper span {
1035
- color: #393E4A;
1036
- font-family: "Open Sans",sans-serif;
1037
- font-size: 16px;
1038
- line-height: 22px;
1039
- margin-left: 1.2em;
1040
- }
1041
-
1042
- .list_tabs__button {
1043
- display: none;
1044
-
1045
- background-size: contain;
1046
- width: 20px;
1047
- height: 20px;
1048
- background-repeat: no-repeat;
1049
- background-position: center;
1050
- }
1051
-
1052
- .list_tabs__button .list_tabs {
1053
- display: none;
1054
- }
1055
- .form-table p.description{
1056
- font-style: normal;
1057
- }
1058
- #to_pro,#unsaved_option, #pro_option,#cancel,#mm_option {
1059
- z-index: 999;
1060
- transition: all 0.5s ease;
1061
- background-color: #FFFFFF;
1062
- display: none;
1063
- position: fixed;
1064
- top: 30%;
1065
- left: 0;
1066
- right: 0;
1067
- width: 563px;
1068
- margin: 0 auto;
1069
- color: #525252;
1070
- border: 1px solid #000;
1071
- border-radius: 10px;
1072
- }
1073
-
1074
-
1075
- #to_pro .modal_close,#unsaved_option .modal_close,#pro_option .modal_close, #mm_option .modal_close,#cancel .modal_close {
1076
- background-size: contain;
1077
- width: 15px;
1078
- height: 15px;
1079
- background-repeat: no-repeat;
1080
- background-position: center;
1081
- position: absolute;
1082
- right: 12px;
1083
- top: 12px;
1084
- cursor: pointer;
1085
- z-index: 999;
1086
- }
1087
-
1088
-
1089
- #to_pro .upgrade__wrapper,#unsaved_option .unsaved__wrapper,#cancel .cancel__wrapper,#mm_option .mm__wrapper{
1090
- position: relative;
1091
- height: 302px;
1092
- padding-top: 1em;
1093
- }
1094
-
1095
- #to_pro .upgrade__content,#unsaved_option .unsaved__content,#cancel .cancel__content,#mm_option .mm__content{
1096
- padding: 1.5em;
1097
- }
1098
-
1099
-
1100
-
1101
- #to_pro .upgrade__button, #unsaved_option .unsaved__button, #mm_option .mm__button,#cancel .cancel__button{
1102
- padding: 1.5em 2em;
1103
- text-align: center;
1104
- position: absolute;
1105
- width: 100%;
1106
- max-width: 564px;
1107
- bottom: 0px;
1108
- display: flex;
1109
- justify-content: flex-end;
1110
- align-items: baseline;
1111
- }
1112
- #unsaved_option .unsaved__button{
1113
- flex-direction: row-reverse;
1114
- justify-content: flex-start;
1115
- }
1116
-
1117
- #to_pro .upgrade__button .reds,#unsaved_option .unsaved__button .reds,#cancel .cancel__button .reds{
1118
- padding: 5px 15px;
1119
- background-color: #ca4646;
1120
- border-radius: 5px;
1121
- color: #fff;
1122
- text-decoration: none;
1123
- text-transform: uppercase;
1124
- font-size: 16px;
1125
- border: none;
1126
- flex-basis: 25%;
1127
- position: relative;
1128
- margin: 0 10px;
1129
- }
1130
- #cancel .cancel__button .reds{
1131
- flex-basis: 40%;
1132
- }
1133
- .subscribe_succes_cancel{
1134
- font-size: 19px;
1135
- padding: 20px;
1136
- height: 80%;
1137
- display: flex;
1138
- align-items: center;
1139
- }
1140
- #to_pro .upgrade__button .reds:hover,#unsaved_option .unsaved__button .reds:hover,#cancel .cancel__button .reds:hover{
1141
- opacity: 0.75;
1142
- background-color: #ca4646;
1143
- border: none;
1144
- }
1145
- #unsaved_option .unsaved__button #discard_button{
1146
- background-color: #fff;
1147
- color: #ca4646;
1148
- }
1149
- #unsaved_option .unsaved__button #discard_button:hover{
1150
- text-decoration: underline;
1151
- background-color: #fff;
1152
- opacity: 1;
1153
- }
1154
- #unsaved_option .unsaved__button #discard_button:focus{
1155
- box-shadow: none;
1156
- }
1157
- .modal a.blues{
1158
- cursor: pointer;
1159
- padding: 5px 15px;
1160
- background-color: #324ef8;
1161
- border-radius: 5px;
1162
- color: #fff;
1163
- text-decoration: none;
1164
- font-size: 16px;
1165
- border: none;
1166
- margin: 0 10px;
1167
- position: relative;
1168
- }
1169
- .modal .mm__content{
1170
- color: #525252;
1171
- }
1172
- .modal a.gray{
1173
- padding: 5px 15px;
1174
- border-radius: 5px;
1175
- background-color: gray;
1176
- cursor: pointer;
1177
- color: #fff;
1178
- text-decoration: none;
1179
- font-size: 16px;
1180
- border: none;
1181
- margin: 0 10px;
1182
- position: relative;
1183
- }
1184
- .modal .mm__content{
1185
- color: #525252;
1186
- }
1187
- .modal a.gray{
1188
- padding: 5px 15px;
1189
- border-radius: 5px;
1190
- background-color: gray;
1191
- cursor: pointer;
1192
- color: #fff;
1193
- text-decoration: none;
1194
- font-size: 16px;
1195
- border: none;
1196
- margin: 0 10px;
1197
- }
1198
- .modal .upgrade__button .blues,.modal .unsaved__button .blues{
1199
- text-transform: uppercase;
1200
- flex-basis: 25%;
1201
- }
1202
- .modal a.blues:hover,.modal a.blues:hover{
1203
- opacity: 0.75;
1204
- background-color: #324ef8;
1205
- border: none;
1206
- }
1207
- .mobile_wrap .modal-overlays {
1208
- position: fixed;
1209
- margin-left: -20px;
1210
- right: 0;
1211
- height: auto;
1212
- width: auto;
1213
- background: #000;
1214
- will-change: opacity;
1215
- opacity: 0.4;
1216
- z-index: 998;
1217
- top: -25%;
1218
- left: 0;
1219
- bottom: 0;
1220
- display: none;
1221
- }
1222
- .mobile_wrap{
1223
- overflow: hidden;
1224
- width: 100%;
1225
- }
1226
-
1227
- #modal_form {
1228
- display: none;
1229
- position: fixed;
1230
- top: 5%;
1231
- right: 0;
1232
- left: 0;
1233
- width: 650px;
1234
- margin: 0 auto;
1235
- background-color: #4558fe;
1236
- font-size: 18px;
1237
- border-radius: 0.9em;
1238
- -webkit-box-shadow: 0px 0px 5px -2px rgba(0, 0, 0, 0.75);
1239
- box-shadow: 0px 0px 5px -2px rgba(0, 0, 0, 0.75);
1240
- }
1241
-
1242
- #modal_form .modal_form__wrapper {
1243
- padding: 0.5em;
1244
- }
1245
-
1246
- #modal_form .modal_form__header {
1247
- padding: 0 1.7em;
1248
- color: #fff;
1249
- }
1250
-
1251
- #modal_form .modal_form__header .customization_button__image {
1252
- background-size: contain;
1253
- width: 45px;
1254
- height: 45px;
1255
- display: block;
1256
- background-repeat: no-repeat;
1257
- background-position: center;
1258
- margin: 0 1em;
1259
- }
1260
-
1261
- #modal_form .modal_form__header .logo_header {
1262
- display: -webkit-box;
1263
- display: -ms-flexbox;
1264
- display: flex;
1265
- -webkit-box-pack: center;
1266
- -ms-flex-pack: center;
1267
- justify-content: center;
1268
- -webkit-box-align: center;
1269
- -ms-flex-align: center;
1270
- align-items: center;
1271
- color: #FFFFFF;
1272
- font-size: 20px;
1273
- font-weight: bold;
1274
- line-height: 19px;
1275
- }
1276
-
1277
- #modal_form .modal_form__header .version_name__header {
1278
- display: -webkit-box;
1279
- display: -ms-flexbox;
1280
- display: flex;
1281
- -webkit-box-orient: vertical;
1282
- -webkit-box-direction: normal;
1283
- -ms-flex-direction: column;
1284
- flex-direction: column;
1285
- -webkit-box-pack: center;
1286
- -ms-flex-pack: center;
1287
- justify-content: center;
1288
- -webkit-box-align: center;
1289
- -ms-flex-align: center;
1290
- align-items: center;
1291
- margin-bottom: 1em;
1292
- }
1293
-
1294
- #modal_form .modal_form__header .version_name__header .version_header__text {
1295
- color: #FFFFFF;
1296
- font-size: 56px;
1297
- font-weight: 800;
1298
- line-height: 77px;
1299
- }
1300
-
1301
- #modal_form .modal_form__header .version_name__header .version_header__price {
1302
- font-size: 32px;
1303
- font-weight: 800;
1304
- line-height: 43px;
1305
- text-align: right;
1306
- }
1307
-
1308
- #modal_form .modal_form__header .version_name__header .version_header__price span {
1309
- font-size: 24px;
1310
- font-weight: bold;
1311
- line-height: 32px;
1312
- }
1313
-
1314
- #modal_form .modal_form__header .header_variations {
1315
- display: -webkit-box;
1316
- display: -ms-flexbox;
1317
- display: flex;
1318
- }
1319
-
1320
- #modal_form .modal_form__header .header_variations span {
1321
- background-size: 15px;
1322
- width: 15px;
1323
- height: 15px;
1324
- padding: 0.5em;
1325
- background-repeat: no-repeat;
1326
- background-position: center;
1327
- }
1328
-
1329
- #modal_form .modal_form__header .header_variations .variation_item {
1330
- margin-right: 2em;
1331
- color: #FFFFFF;
1332
- font-size: 16px;
1333
- font-weight: 600;
1334
- line-height: 22px;
1335
- }
1336
-
1337
- #modal_form .modal_form__header .header_input {
1338
- background-color: #fff;
1339
- border-radius: 0.7em;
1340
- padding: 0.7em 1em;
1341
- display: -webkit-box;
1342
- display: -ms-flexbox;
1343
- display: flex;
1344
- -webkit-box-align: center;
1345
- -ms-flex-align: center;
1346
- align-items: center;
1347
- margin: 1em 0;
1348
- }
1349
-
1350
- #modal_form .modal_form__header .header_input .checkbox_image {
1351
- background-size: 25px;
1352
- width: 28px;
1353
- height: 28px;
1354
- padding: 0.5em;
1355
- background-repeat: no-repeat;
1356
- background-position: center;
1357
- background-color: #5455fe;
1358
- border-radius: 50%;
1359
- }
1360
-
1361
- #modal_form .modal_form__header .header_input .header_input__content {
1362
- margin-left: 3em;
1363
- }
1364
-
1365
- #modal_form .modal_form__header .header_input .header_input__name {
1366
- color: #525252;
1367
- font-size: 20px;
1368
- font-weight: bold;
1369
- line-height: 27px;
1370
- }
1371
-
1372
- #modal_form .modal_form__header .header_input .header_input__date {
1373
- color: #525252;
1374
- font-size: 14px;
1375
- line-height: 19px;
1376
- }
1377
-
1378
- #modal_form .form_row {
1379
- display: -webkit-box;
1380
- display: -ms-flexbox;
1381
- display: flex;
1382
- padding: 0.5em;
1383
- }
1384
-
1385
- #modal_form .form_input {
1386
- -webkit-box-orient: vertical;
1387
- -webkit-box-direction: normal;
1388
- -ms-flex-direction: column;
1389
- flex-direction: column;
1390
- width: 100%;
1391
- max-width: 100%;
1392
- padding: 0 1.2em;
1393
- color: #fff;
1394
- }
1395
-
1396
- #modal_form .form_input label {
1397
- color: #FFFFFF;
1398
- font-size: 16px;
1399
- font-weight: 800;
1400
- line-height: 22px;
1401
- text-transform: uppercase;
1402
- }
1403
-
1404
- #modal_form .form_input input {
1405
- padding: 0.8em 1.5em;
1406
- border-radius: 0.7em;
1407
- border: none;
1408
- font-size: 18px;
1409
- line-height: 20px;
1410
- width: 100%;
1411
- max-width: 100%;
1412
- -webkit-box-sizing: border-box;
1413
- box-sizing: border-box;
1414
- }
1415
-
1416
- #modal_form .form_input a {
1417
- color: #FFFFFF;
1418
- font-size: 14px;
1419
- font-weight: bold;
1420
- line-height: 19px;
1421
- }
1422
-
1423
- #modal_form .form_privacy {
1424
- padding: 0.5em;
1425
- }
1426
-
1427
- #modal_form .form_privacy .form_checkbox {
1428
- padding: 0 1.2em;
1429
- }
1430
-
1431
- #modal_form .form_checkbox {
1432
- color: #FFFFFF;
1433
- font-size: 14px;
1434
- line-height: 19px;
1435
- }
1436
-
1437
- #modal_form .form_checkbox a {
1438
- color: #FFFFFF;
1439
- font-size: 14px;
1440
- font-weight: bold;
1441
- line-height: 19px;
1442
- }
1443
-
1444
- #modal_form .form_submit {
1445
- display: -webkit-box;
1446
- display: -ms-flexbox;
1447
- display: flex;
1448
- -webkit-box-pack: center;
1449
- -ms-flex-pack: center;
1450
- justify-content: center;
1451
- }
1452
-
1453
- #modal_form .form_submit a {
1454
- color: #5456FF;
1455
- font-size: 30px;
1456
- font-weight: bold;
1457
- line-height: 41px;
1458
- background-color: #fff;
1459
- padding: 0.5em 1.9em;
1460
- text-decoration: none;
1461
- display: inline-block;
1462
- border-radius: 0.7em;
1463
- }
1464
- .setup_section table tbody tr:first-child th{
1465
- font-weight: 800;
1466
- letter-spacing: 0.2px;
1467
- line-height: 30px;
1468
- float: left;
1469
- padding: 10px 0;
1470
- font-size: 22px;
1471
- font-weight: 800;
1472
- }
1473
- .tab-content .tab-content__wrapper .testchat{
1474
- position: absolute;
1475
- right: 0;
1476
- background-color: #6071fb;
1477
- color: #fff;
1478
- border:none;
1479
- box-shadow: none;
1480
- width: 140px;
1481
- text-align: center;
1482
- font-family: "Open Sans", sans-serif;
1483
- font-size: 14px;
1484
- font-weight: 500;
1485
- }
1486
- .tab-content table th{
1487
- font-family: "Open Sans",sans-serif;
1488
- font-weight: bold;
1489
- color: #525252;
1490
- font-size: 14px;
1491
- letter-spacing: 0.15px;
1492
- line-height: 22px;
1493
- padding: 0;
1494
- text-transform: uppercase;
1495
- }
1496
- .tab-content label.gray{
1497
- color: #949494;
1498
- font-family: "Open Sans",sans-serif;
1499
- font-size: 16px;
1500
- line-height: 22px;
1501
- padding: 10px 0;
1502
- }
1503
- .tab-content .form-table td p{
1504
- font-family: "Open Sans",sans-serif;
1505
- margin-bottom: 10px;
1506
- margin-top: 0;
1507
- font-size: 16px;
1508
- }
1509
- .tab-content table label{
1510
- color: #525252;
1511
- font-family: "Open Sans",sans-serif;
1512
- font-size: 14px;
1513
- letter-spacing: 0.13px;
1514
- line-height: 19px;
1515
- padding-bottom: 10px;
1516
- }
1517
- .tab-content .input-field{
1518
- padding: 0;
1519
- }
1520
- .tab-content .as_state{
1521
- display: flex;
1522
- flex-direction: column;
1523
- }
1524
-
1525
- .tab-content .as h6{
1526
- font-size: 14px;
1527
- font-weight: bold;
1528
- line-height: 19px;
1529
- text-transform: uppercase;
1530
- }
1531
- .tab-content .sp-replacer{
1532
- margin-top: 20px;
1533
- background: none;
1534
- padding: 0;
1535
- }
1536
- .tab-content input[type=checkbox]{
1537
- width: auto;
1538
- }
1539
- .tab-content input[type=number]{
1540
- width: 30%!important;
1541
- }
1542
- .tab-content .sp-replacer,.sp-preview{
1543
- width: 80px;
1544
- height: 80px;
1545
- border: none;
1546
- }
1547
- .tab-content .sp-dd{
1548
- display: none;
1549
- }
1550
-
1551
- .customize_section table th,
1552
- .customize_section table td {
1553
- margin-bottom: 10px;
1554
- }
1555
- .options table td{
1556
- margin-bottom: 15px;
1557
- vertical-align: middle;
1558
- padding: 0;
1559
- width: 80%;
1560
- }
1561
- .wrap__pro{
1562
- position: relative;
1563
- }
1564
- .customize_section table th{
1565
- font-family: "Open Sans",sans-serif;
1566
- font-weight: 800;
1567
- color: #525252;
1568
- font-size: 16px;
1569
- letter-spacing: 0.15px;
1570
- line-height: 22px;
1571
- padding: 0;
1572
- text-transform: uppercase;
1573
- }
1574
-
1575
- .setup_section th,
1576
- .setup_section td{
1577
- display: block;
1578
- width: auto;
1579
- }
1580
- .customize_section th,
1581
- .customize_section td{
1582
- display: block!important;
1583
- width: auto;
1584
- }
1585
-
1586
- .options .contact_tab table th.sortable a,.options .contact_tab table th.sorted a,.options .contact_tab table th{
1587
- display: inline-block;
1588
- padding: 0;
1589
- color: #A9A5A5;
1590
- height: 100%;
1591
- text-transform: capitalize;
1592
- }
1593
- .options .contact_tab table th.sortable a:focus,.options .contact_tab table th.sorted a:focus{
1594
- box-shadow: none;
1595
- }
1596
-
1597
- .options .contact_tab table,.options .contact_tab table tbody{
1598
- display: block;
1599
- }
1600
- .options .contact_tab table tr:first-child{
1601
- padding-bottom: 15px;
1602
- margin-bottom: 0;
1603
- box-shadow: none;
1604
- }
1605
- .options .contact_tab table tr:hover:not(:first-child){
1606
- cursor: pointer;
1607
- background-color: #f9fafb;
1608
- }
1609
- .download__wrap .pro_button__content{
1610
- text-align: center;
1611
- }
1612
- .options .contact_tab table tr{
1613
- margin-bottom: 1em;
1614
- display: grid;
1615
- grid-column: 1 / -1;
1616
- grid-template-columns: 10% 25% 10% 10% 12% 23% 10%;
1617
- padding: 1rem 25px;
1618
- box-shadow: 0 0 4px 3px rgba(242,239,237,1);
1619
- vertical-align: middle;
1620
- -ms-flex-align: center;
1621
- align-items: center;
1622
- }
1623
- .options .contact_tab table td{
1624
- margin: 0;
1625
- padding: 0;
1626
- width: 100%;
1627
- vertical-align: middle;
1628
- font-family: "Open Sans",sans-serif;
1629
- font-size: 14px;
1630
- font-weight: bold;
1631
- word-break: break-all;
1632
- }
1633
-
1634
- .options .contact_tab table td img{
1635
- vertical-align: middle;
1636
- border-radius: 50%;
1637
- min-width: 3.5rem;
1638
- }
1639
- .options .contact_tab table td.gender{
1640
- text-transform: capitalize;
1641
- }
1642
- .options .contact_tab table{
1643
- border: none;
1644
- }
1645
- .contact_tab{
1646
- padding: 20px 20px 40px 20px;
1647
- }
1648
- .contact_tab .table__wrap .displaying-num{
1649
- display: none;
1650
- }
1651
- .contact_tab .table__wrap{
1652
- padding-bottom: 5rem;
1653
- }
1654
- .tab-content .contact_head__wrap h4,.tab-content .contact_head__wrap p{
1655
- display: inline-block;
1656
- font-size: 18px;
1657
- }
1658
- .contact_head__wrap{
1659
- display: flex;
1660
- justify-content: space-between;
1661
- align-items: center;
1662
- margin-bottom: 20px;
1663
- }
1664
-
1665
- .contact_head__wrap a{
1666
- color: #324EF8;
1667
- font-family: "Open Sans",sans-serif;
1668
- font-size: 16px;
1669
- font-weight: 600;
1670
- line-height: 22px;
1671
- box-shadow: 0 0 10px #cfcfcf;
1672
- border-radius: 9px;
1673
- padding: 10px;
1674
- }
1675
- .contact_head__wrap a:active{
1676
- box-shadow: none;
1677
- }
1678
- .contact_head__wrap a>i{
1679
- color: #324EF8;
1680
- margin-right: 8px;
1681
- }
1682
- .contact_head__wrap .download__wrap{
1683
- position: relative;
1684
- width: 71%;
1685
- height: 100%;
1686
- text-align: right;
1687
- }
1688
- .contact_head__wrap .pro_button__wrapper{
1689
- display: flex;
1690
- align-items: center;
1691
- top: -35px;
1692
- width: 100%;
1693
- height: 100px;
1694
- left: 0;
1695
- position: absolute;
1696
- bottom: 0;
1697
- padding: 0;
1698
- }
1699
-
1700
- .contact_head__wrap .pro_button__wrapper .pro_button__content p{
1701
- margin-bottom: 5px;
1702
- }
1703
-
1704
- .contact_head__wrap .pro_button__wrapper a{
1705
- padding: 0.5em 1em;
1706
- }
1707
-
1708
- .contact_head__wrap .pro_button__wrapper a{
1709
- box-shadow: none;
1710
- }
1711
-
1712
-
1713
- .tab-content .contact_head__wrap h4{
1714
- margin: 0 10px 0 0;
1715
- color: #525252;
1716
- font-family: "Open Sans",sans-serif;
1717
- font-size: 36px;
1718
- font-weight: bold;
1719
- }
1720
- .table__wrap{
1721
- position: relative;
1722
- }
1723
-
1724
- .connected-page .connect_check{
1725
- display: inline-block;
1726
- margin: 10px 0 0 0;
1727
- padding: 1px 10px;
1728
- background-color: green;
1729
- border-radius: 5px;
1730
- color: #fff;
1731
- text-decoration: none;
1732
- text-transform: uppercase;
1733
- font-size: 13px;
1734
- height: auto;
1735
- border: none;
1736
- width: fit-content;
1737
-
1738
- }
1739
- .connected-page .connect_check:hover {
1740
- opacity: 0.75;
1741
- border: none;
1742
- }
1743
- .connect_check .fa-check{
1744
- margin-right: 5px;
1745
- }
1746
- .page_name{
1747
- color: #525252;
1748
- font-family: "Open Sans",sans-serif;
1749
- font-size: 26px;
1750
- font-weight: bold;
1751
- letter-spacing: 0.24px;
1752
- line-height: 32px;
1753
- margin: 0;
1754
- vertical-align: middle;
1755
-
1756
- }
1757
- #contacts_modal {
1758
- width: 65%;
1759
- -webkit-user-drag:none;
1760
- user-drag:none;
1761
- -moz-user-drag:none;
1762
- -ms-user-drag:none;
1763
- position: absolute;
1764
- padding: 1em 2em;
1765
- color: #fff;
1766
- top: 20%;
1767
- left: 0;
1768
- right: 0;
1769
- margin: 0 auto;
1770
- background: -webkit-gradient(linear, left top, right top, from(#3d5afe), to(#7c4dff));
1771
- background: linear-gradient(to right, #3d5afe 0%, #7c4dff 100%);
1772
- border-radius: 18px;
1773
- -webkit-box-shadow: 0px 0px 5px 1px rgba(0, 0, 0, 0.75);
1774
- box-shadow: 0px 0px 5px 1px rgba(0, 0, 0, 0.75);
1775
- }
1776
-
1777
- #contacts_modal .contact_modal__wrapper {
1778
- display: -webkit-box;
1779
- display: -ms-flexbox;
1780
- display: flex;
1781
- -webkit-box-pack: justify;
1782
- -ms-flex-pack: justify;
1783
- justify-content: space-between;
1784
- -webkit-box-align: center;
1785
- -ms-flex-align: center;
1786
- align-items: center;
1787
- }
1788
-
1789
- #contacts_modal .contact_modal__content {
1790
- display: -webkit-box;
1791
- display: -ms-flexbox;
1792
- display: flex;
1793
- -webkit-box-align: center;
1794
- -ms-flex-align: center;
1795
- align-items: center;
1796
- }
1797
- #contacts_modal .contact_modal__content p {
1798
- color: #FFFFFF;
1799
- font-size: 22px;
1800
- font-weight: bold;
1801
- line-height: 30px;
1802
- }
1803
- #contacts_modal .contact_modal__content .logo_name {
1804
- color: #FFFFFF;
1805
- font-family: "Open Sans",sans-serif;
1806
- font-size: 20px;
1807
- font-weight: bold;
1808
- line-height: 19px;
1809
- }
1810
-
1811
- #contacts_modal .contact_modal__button {
1812
- background-color: #fff;
1813
- padding: 0.7em 1.5em;
1814
- font-size: 18px;
1815
- font-weight: 800;
1816
- line-height: 24px;
1817
- text-transform: uppercase;
1818
- border-radius: 9px;
1819
- }
1820
-
1821
- #contacts_modal .contact_modal__button a {
1822
- text-decoration: none;
1823
- }
1824
-
1825
- #contacts_modal .customization_button__image {
1826
- background-image: url("../img/monkey_head.png");
1827
- background-size: contain;
1828
- width: 45px;
1829
- height: 45px;
1830
- background-repeat: no-repeat;
1831
- background-position: center;
1832
- margin: 0 .3em;
1833
- display: inline-block;
1834
- }
1835
- .connected-page-bottom .active-page-info{
1836
- display: block;
1837
- }
1838
- .log_out__wrapper,.disconnect_page__wrapper{
1839
- margin-top: 10px;
1840
- display: flex;
1841
- justify-content: space-between;
1842
- align-items: center;
1843
- }
1844
- .log_out__wrapper h5{
1845
- margin: 0;
1846
- padding: 0;
1847
- }
1848
- .log_out__wrapper .logout-mobilemonkey{
1849
- margin: 0;
1850
- }
1851
- .disconnect_page__wrapper{
1852
- padding: 0 20px;
1853
- background-color: #25252525;
1854
- }
1855
- .disconnect_page__wrapper p b {
1856
- color: green;
1857
- }
1858
- .disconnect_page__wrapper p {
1859
- color: #000;
1860
- }
1861
- .mm_only-state{
1862
- background-color: #000000;
1863
- }
1864
- .contact_modal__button div{
1865
- color: #5F52FE;
1866
- }
1867
- .mobilemonkey-settings h5{
1868
- color: #525252;
1869
- font-family: "Open Sans",sans-serif;
1870
- font-size: 36px;
1871
- font-weight: bold;
1872
- letter-spacing: 0.33px;
1873
- line-height: 49px;
1874
- margin: 20px 0 0 0;
1875
- }
1876
- .mobilemonkey-settings p.get_start{
1877
- color: #525252; font-family: "Open Sans",sans-serif;
1878
- font-size: 24px;
1879
- letter-spacing: 0.22px;
1880
- line-height: 33px;
1881
- margin: 0 0 30px 0;
1882
- }
1883
- .mobilemonkey-settings p{
1884
- margin-top: 15px;
1885
- }
1886
- .tab-content .form-table td .welcome_text{
1887
- margin: 5px 10px 20px 0;
1888
- }
1889
- .tab-content .form-table td .head_text{
1890
- font-size: 22px;
1891
- font-weight: 800;
1892
- line-height: 30px;
1893
- font-family: "Open Sans",sans-serif;
1894
- letter-spacing: 0.15px;
1895
- color: #525252;
1896
- text-transform: uppercase;
1897
- }
1898
-
1899
- .tab-content .form-table td .qual_p{
1900
- margin: 20px 0 30px 0;
1901
- }
1902
-
1903
- @media (max-width: 575.98px) {
1904
- #to_pro, #unsaved_option{
1905
- width: 90%;
1906
- }
1907
- .service-content {
1908
- text-align: center;
1909
- }
1910
- .service-content iframe{
1911
- width: 250px!important;
1912
- }
1913
- .contact_tab{
1914
- padding-bottom: 100px;
1915
- }
1916
- .customization_button,#contacts_modal .contact_modal__wrapper{
1917
- flex-direction: column;
1918
- }
1919
- .customization_button .customization_button__action,#contacts_modal .contact_modal__button{
1920
- margin-top: 20px;
1921
- }
1922
- #contacts_modal {
1923
- width: 100%;
1924
- }
1925
- #contacts_modal .contact_modal__content{
1926
- flex-direction: column;
1927
- text-align: center;
1928
- }
1929
- .contact_tab .table__wrap{
1930
- padding-bottom: 10rem;
1931
- }
1932
- .customization_button__wrapper .customization_button .customization_button__content{
1933
- flex-direction: column;
1934
- text-align: center;
1935
- }
1936
- }
1937
-
1938
- @media (min-width: 576px) and (max-width: 767.98px) {
1939
- .contact_tab{
1940
- padding-bottom: 100px;
1941
- }
1942
- .customization_button,#contacts_modal .contact_modal__wrapper{
1943
- flex-direction: column;
1944
- }
1945
- .customization_button .customization_button__action,#contacts_modal .contact_modal__button{
1946
- margin-top: 20px;
1947
- }
1948
- #contacts_modal {
1949
- width: 100%;
1950
- }
1951
- .download__wrap .pro_button__wrapper{
1952
- padding: 0;
1953
- }
1954
- .download__wrap .pro_button__wrapper .pro_button{
1955
- flex-direction: column;
1956
- text-align: center;
1957
- }
1958
- }
1959
-
1960
-
1961
- @media (min-width: 768px) and (max-width: 991.98px) {
1962
- .contact_tab{
1963
- padding-bottom: 100px;
1964
- }
1965
- .customization_button,#contacts_modal .contact_modal__wrapper{
1966
- flex-direction: column;
1967
- }
1968
- .customization_button .customization_button__action,#contacts_modal .contact_modal__button{
1969
- margin-top: 20px;
1970
- }
1971
- .download__wrap .pro_button__wrapper{
1972
- padding: 0;
1973
- }
1974
- .download__wrap .pro_button__wrapper .pro_button{
1975
- flex-direction: column;
1976
- text-align: center;
1977
- }
1978
- }
1979
-
1980
-
1981
- @media (min-width: 992px) and (max-width: 1199.98px) {
1982
- .customization_button,#contacts_modal .contact_modal__wrapper{
1983
- flex-direction: column;
1984
- }
1985
- .download__wrap .pro_button__wrapper{
1986
- padding: 0;
1987
- }
1988
- .download__wrap .pro_button__wrapper .pro_button{
1989
- flex-direction: column;
1990
- text-align: center;
1991
- }
1992
- }
1993
-
1994
-
1995
- @media (min-width: 1800px) {
1996
- .main-question{
1997
- width: 800px!important;
1998
- }
1999
- }
2000
-
2001
-
2002
- /*PRO modal*/
2003
-
2004
- #pro_option{
2005
- border-radius: 0;
2006
- border: 0;
2007
- background-color: transparent;
2008
- top: 10%;
2009
- max-height: 100%;
2010
- }
2011
- #pro_option .modal_close i{
2012
- color: #fff;
2013
- font-size: 20px;
2014
- }
2015
- .billing-modal-header {
2016
- width: 100%;
2017
- display: flex;
2018
- background-color: #4F57FF;
2019
- align-items: center;
2020
- flex-direction: column;
2021
- color: #fff;
2022
- border-radius: 10px 10px 0 0;
2023
- }
2024
- .billing-modal-header__plan-name {
2025
- font-size: 43px;
2026
- font-weight: 700;
2027
- text-transform: uppercase;
2028
- line-height: 45px;
2029
- text-align: center;
2030
- }
2031
- .billing-modal-header__plan-price{
2032
- text-align: center;
2033
- }
2034
- .billing-modal-header__plan-price p{
2035
- font-size: 23px;
2036
- margin: 0;
2037
- text-align: center;
2038
- font-weight: 200;
2039
- }
2040
- .billing-modal-header__plan-price .discount .disc_cross b{
2041
- font-size: 1.4em;
2042
- }
2043
- .billing-modal-header__plan-price .discount .disc_cross{
2044
- margin-right: 20px;
2045
- position: relative;
2046
- color: #fff;
2047
- font-size: 20px;
2048
- }
2049
- .billing-modal-header__plan-price .discount{
2050
- display: flex;
2051
- margin-top: 5px;
2052
- align-items: baseline;
2053
- }
2054
- .billing-modal-header__plan-price .discount p{
2055
- color: #2FF2E1;
2056
- text-decoration: none;
2057
- font-size: 20px;
2058
- }
2059
- .modal .billing-modal-header__plan-price h4{
2060
- font-weight: 600;
2061
- text-decoration: none;
2062
- color: #FF7140;
2063
- line-height: 18px;
2064
- margin: 15px 0 0;
2065
- }
2066
- .billing-modal-header__plan-price p.billed{
2067
- text-decoration: none;
2068
- color: #9095FF;
2069
- font-weight: 200;
2070
- font-size: 1.6em;
2071
- }
2072
-
2073
- .billing-modal-header__plan-price .discount .disc_cross:before {
2074
- content: "";
2075
- border-bottom: 2px solid #FF8761;
2076
- position: absolute;
2077
- height: 10px;
2078
- width: 100%;
2079
- bottom: 18px;
2080
- }
2081
- .billing-modal-header__plan-price h4 b{
2082
- font-weight: 200;
2083
- font-size: 0.7em;
2084
- }
2085
- p.billed{
2086
- color: #9095FF;
2087
- font-weight: 200;
2088
- font-size: 0.6em;
2089
- }
2090
- .billing-modal-header__logo div{
2091
- background-image: url("../img/monkey_head.png");
2092
- background-size: contain;
2093
- width: 35px;
2094
- height: 35px;
2095
- display: block;
2096
- background-repeat: no-repeat;
2097
- background-position: center;
2098
- margin: 0 0.3em;
2099
- }
2100
-
2101
- .billing-modal-header__logo{
2102
- margin: 1rem 0;
2103
- display: flex;
2104
- align-items: center;
2105
- }
2106
-
2107
- .billing-modal-header__logo span{
2108
- color: #fff;
2109
- font-size: 18px;
2110
- font-weight: bold;
2111
- }
2112
-
2113
- .billing-page-details {
2114
- width: 90%;
2115
- background-color: #fff;
2116
- display: flex;
2117
- padding: 10px 15px;
2118
- align-items: center;
2119
- justify-content: space-between;
2120
- margin-top: 10px;
2121
- border-radius: 12px;
2122
- margin-bottom: 1rem;
2123
- }
2124
-
2125
- .billing-page-details__image {
2126
- width: 50px;
2127
- height: 50px;
2128
- border-radius: 100%;
2129
- background-color: grey;
2130
- }
2131
-
2132
- .billing-page-details__name {
2133
- font-weight: 800;
2134
- font-size: 20px;
2135
- color: #525252;
2136
- margin: 5px 0;
2137
- }
2138
-
2139
- .billing-page-details__middle {
2140
- align-self: flex-start;
2141
- margin-left: 15px;
2142
- }
2143
-
2144
- .billing-page-details__check-circle {
2145
- background-color: #de8f08;
2146
- border-radius: 100%;
2147
- width: 40px;
2148
- height: 40px;
2149
- display: flex;
2150
- justify-content: center;
2151
- align-items: center;
2152
- }
2153
-
2154
-
2155
- .billing-page-details__left-section {
2156
- display: flex;
2157
- align-items: center;
2158
- }
2159
-
2160
- .billing-page-details__sends-text {
2161
- color: #de8f08;
2162
- font-size: 16px;
2163
- font-weight: 600;
2164
- }
2165
-
2166
- .billing-modal {
2167
- width: 525px;
2168
- color: #525252;
2169
- display: flex;
2170
- align-items: center;
2171
- flex-direction: column;
2172
- padding: 0;
2173
- overflow: hidden;
2174
- }
2175
- .checkout-form {
2176
- display: flex;
2177
- flex-direction: column;
2178
- align-items: center;
2179
- font-family: 'Open Sans', sans-serif;
2180
- }
2181
-
2182
- .checkout-form__name-fields {
2183
- width: 100%;
2184
- display: flex;
2185
- flex-direction: row;
2186
- justify-content: space-between;
2187
- }
2188
-
2189
- .billing-modal-body{
2190
- padding: 30px 30px 0 30px;
2191
- width: 100%;
2192
- background-color:#fff;
2193
- }
2194
- .billing_info_wrap{
2195
- display: flex;
2196
- justify-content: center;
2197
- }
2198
- .billing-modal-body .name__wrap,.billing-modal-body .card__wrap{
2199
- display: flex;
2200
- justify-content: space-between;
2201
- }
2202
- .name__wrap .firstname__wrap,.name__wrap .lastname__wrap{
2203
- width: 45%;
2204
- }
2205
- .billing-modal-body label{
2206
- font-size: 14px;
2207
- font-weight: bold;
2208
- font-family: 'Open Sans', sans-serif;
2209
- color: #666;
2210
- }
2211
- .checkout-form .billing-modal-body input[type=email]:not(.browser-default):focus:not([readonly]),
2212
- .checkout-form .billing-modal-body input[type=text]:not(.browser-default):focus:not([readonly]),
2213
- .checkout-form .billing-modal-body select:focus
2214
- {
2215
- border-bottom: 1px solid #dfdfdf;
2216
- box-shadow: none;
2217
- }
2218
- .checkout-form .billing-modal-body input[type=email],
2219
- .checkout-form .billing-modal-body input[type=text],
2220
- .checkout-form .billing-modal-body select
2221
- {
2222
- padding: 20px;
2223
- width: 100%;
2224
- border: 1px solid #dfdfdf;
2225
- margin: .5em 0;
2226
- line-height: 20px;
2227
- border-radius: 5px;
2228
- font-size: 16px;
2229
- -webkit-box-sizing: border-box;
2230
- box-sizing: border-box;
2231
- }
2232
- .checkout-form .billing-modal-body select{
2233
- padding: 0 20px;
2234
- height: 45px;
2235
- }
2236
- .billing-modal-footer {
2237
- font-family: "Open Sans", sans-serif;
2238
- border-radius: 0 0 10px 10px;
2239
- background-color: #fff;
2240
- width: 100%;
2241
- padding: 5px 30px 25px 30px;
2242
- display: flex;
2243
- flex-direction: column;
2244
- }
2245
- .billing-modal-body hr{
2246
- border-top: 1px solid #CFCFCF;
2247
- margin: 15px 0;
2248
- }
2249
- .more_info{
2250
- margin: 15px 0 0 0;
2251
- }
2252
- .billing-modal-footer input[type=checkbox]{
2253
- background: #999;
2254
- }
2255
- .billing-modal-footer input[type=checkbox]:before{
2256
- color: #fff;
2257
- }
2258
- .billing-modal-footer .term__wrap{
2259
- margin: 10px 0;
2260
- }
2261
-
2262
- .modal a.oranges,.modal button.oranges{
2263
- cursor: pointer;
2264
- padding: 13px 25px;
2265
- background-color: RGB(236,182,83);
2266
- border-radius: 10px;
2267
- color: #fff;
2268
- text-decoration: none;
2269
- font-size: 20px;
2270
- font-family: "Open Sans", sans-serif;
2271
- font-weight: 700;
2272
- border: none;
2273
- margin: 0 10px;
2274
- position: relative;
2275
- align-self: center;
2276
- }
2277
- .billing-page-details__check-circle i {
2278
- font-size: 28px;
2279
- }
2280
- .recurly-hosted-field{
2281
- height: 3.5rem;
2282
- margin-top: 0;
2283
- }
2284
-
2285
- .card__wrap input[type=text]:not(.browser-default){
2286
- border-radius: 0;
2287
- border-right: 0;
2288
- border-left: 0;
2289
- }
2290
-
2291
- .card__wrap #card_number{
2292
- width: 100%;
2293
- }
2294
- .terms-label a{
2295
- color: #525252;
2296
- font-weight: bold;
2297
- }
2298
- #pro_option{
2299
- width: 640px;
2300
- }
2301
-
2302
- .subscribe__wrap .page_name__wrap h2.subscribe_page_name{
2303
- margin: 0;
2304
- font-size: 2.5rem;
2305
- font-family: 'Open Sans',sans-serif;
2306
- }
2307
- .subscribe__wrap .page_name__wrap span.pro{
2308
- border-radius: 5px;
2309
- width: auto;
2310
- height: auto;
2311
- line-height: 22px;
2312
- align-self: center;
2313
- font-size: 1.2rem;
2314
- padding: 7px;
2315
- }
2316
- .subscribe_connect p {
2317
- color: #888;
2318
- font-size: 15px;
2319
- }
2320
- .page_info__wrap{
2321
- border: 1px solid #EFEFEF;
2322
- padding: 20px 35px 30px;
2323
- border-radius: 10px;
2324
- display: flex;
2325
- justify-content: space-between;
2326
- }
2327
-
2328
- .percentage-bar__body-wrapper {
2329
- display: -webkit-box;
2330
- display: -ms-flexbox;
2331
- display: flex;
2332
- -webkit-box-orient: horizontal;
2333
- -webkit-box-direction: normal;
2334
- -ms-flex-direction: column;
2335
- flex-direction: column;
2336
- -webkit-box-align: center;
2337
- -ms-flex-align: center;
2338
- align-items: center;
2339
- width: 80%;
2340
- margin-top: 10px;
2341
- }
2342
- .percentage-bar__card-used-number,.percentage-bar__card-max-number {
2343
- font-weight: 800;
2344
- font-size: 16px;
2345
- margin-right: -20px;
2346
- }
2347
- .number__wrap{
2348
- display: flex;
2349
- flex-direction: row;
2350
- justify-content: space-between;
2351
- width: 100%;
2352
- }
2353
- .percentage-bar__bar {
2354
- height: 9px;
2355
- }
2356
- .percentage-bar__bar {
2357
- position: relative;
2358
- background-color: #cbcbcb;
2359
- width: 100%;
2360
- height: 12px;
2361
- border-radius: 10px;
2362
- overflow: hidden;
2363
- }
2364
- .percentage-bar__used-percentage{
2365
- height: 9px;
2366
- }
2367
- .percentage-bar__used-percentage {
2368
- position: absolute;
2369
- left: 0;
2370
- background-color: #ff943f;
2371
- height: 12px;
2372
- border-radius: 10px;
2373
- }
2374
- .message_sent__wrap label{
2375
- font-size: 0.9rem;
2376
- text-transform: uppercase;
2377
- color: #555;
2378
- font-weight: bold;
2379
- }
2380
- .message_sent__wrap{
2381
- margin-top: 2rem;
2382
- }
2383
- .button_cancel,.button_edit{
2384
- padding: 5px 15px;
2385
- border-radius: 5px;
2386
- background-color: gray;
2387
- cursor: pointer;
2388
- color: #fff;
2389
- text-decoration: none;
2390
- font-size: 16px;
2391
- border: none;
2392
- margin: 0 10px;
2393
- }
2394
- a.button_cancel:hover,a.button_cancel:focus,a.button_edit:focus,a.button_edit:hover{
2395
- color: #fff;
2396
- }
2397
- .button_go{
2398
- margin-top: 20px;
2399
- height: auto;
2400
- background-color: darkgreen;
2401
- padding: 10px 15px;
2402
- border: 1px solid #000;
2403
- color: #fff;
2404
- }
2405
- .button_go:hover,.button_go:focus{
2406
- color: #fff;
2407
- }
2408
- .invoice_info_wrap a{
2409
- text-decoration: underline;
2410
- margin-right: 25px;
2411
- }
2412
- .subscribe_info__wrap,.invoice_info_wrap{
2413
- display: flex;
2414
- justify-content: space-between;
2415
- }
2416
- .button__wrap{
2417
- align-self: center;
2418
- }
2419
- .subscribe_info__wrap{
2420
- padding: 0 0 20px 0;
2421
- }
2422
- .button_update{
2423
- background-color: #324ef8;
2424
- height: auto;
2425
- padding: 12px 20px;
2426
- border-radius: 4px;
2427
- color: #fff;
2428
- font-size: 18px;
2429
- }
2430
- .button_update:focus,.button_update:hover{
2431
- color: #fff;
2432
- }
2433
- .payment_info{
2434
- background-color: #DDE3FE;
2435
- border-radius: 14px;
2436
- width: 50%;
2437
- display: flex;
2438
- flex-direction: column;
2439
- padding: 10px 24px;
2440
- margin-bottom: 20px;
2441
- }
2442
- .billed_with{
2443
- color: #ADB0B9;
2444
- }
2445
- #errors{
2446
- color: red;
2447
- text-align: center;
2448
- height: 50px;
2449
- background-color: #1111;
2450
- border-radius: 14px;
2451
- width: 50%;
2452
- display: flex;
2453
- align-self: center;
2454
- justify-content: center;
2455
- align-items: center;
2456
- margin-bottom: 30px;
2457
- display: none;
2458
- }
2459
- .row .col.s12 .questions-wrapper {
2460
- width: 100%;
2461
- margin: 0 auto;
2462
- padding: 0;
2463
- }
2464
- .question-block__wrapper {
2465
- float: left;
2466
- width: 100%;
2467
- box-shadow: 0px 0px 9px -3px rgba(0,0,0,0.75);
2468
- border-radius: 9px;
2469
- margin: 0 0 20px auto;
2470
- }
2471
- .question-button__add,.qa-button__add{
2472
- cursor: pointer;
2473
- position: relative;
2474
- margin: 1rem 0 3rem 0;
2475
- display: inline-block;
2476
- width: 100%;
2477
- }
2478
- .qa-button__add .pro_button__wrapper{
2479
- top: -15px;
2480
- }
2481
- .question-block__header {
2482
- display: flex;
2483
- justify-content: space-between;
2484
- padding: 10px 20px;
2485
- border-bottom: 1px solid #e4e4e4;
2486
- align-items: center;
2487
- }
2488
- .question-block__header .header__title {
2489
- display: flex;
2490
- flex-direction: column;
2491
- text-align: center;
2492
- }
2493
- .question-block_content .question-input__wrapper{
2494
- padding: 0;
2495
- }
2496
- .question-block_content{
2497
- display: flex;
2498
- flex-direction: column;
2499
- position: relative;
2500
- }
2501
- .question-input__wrapper,
2502
- .answer-input__wrapper {
2503
- background-color: #E5E5E5;
2504
- padding: 20px 20px 0 20px;
2505
- border-radius: 9px;
2506
- }
2507
- .question-input__wrapper{
2508
- margin: 10px 10px 10px 55px;
2509
- }
2510
- .question-input__item input[type=text]:not(.browser-default):focus:not([readonly]),
2511
- .answer-input__item input[type=text]:not(.browser-default):focus:not([readonly]){
2512
- border: none;
2513
- box-shadow: none;
2514
- }
2515
- .answer-input__wrapper{
2516
- box-shadow: 0 0 8px -1px rgba(82,82,82,1);
2517
- z-index: 9;
2518
- }
2519
- .answer-input__wrapper .answer-input__item input[type=text]:not(.browser-default){
2520
- margin:10px 10px 10px 0 ;
2521
- width: 100%;
2522
- }
2523
- .question-input__item input[type=text]:not(.browser-default),
2524
- .answer-input__item input[type=text]:not(.browser-default) {
2525
- margin: 10px 20px;
2526
- box-sizing: border-box;
2527
- padding: 10px 25px;
2528
- width: calc(100% - 40px);
2529
- border:none;
2530
- border-radius: 9px;
2531
- background: #FFFFFF;
2532
- }
2533
- .answer-input__item{
2534
- display: inline-block;
2535
- }
2536
- .tab-content .form-table td .answer-input__item p {
2537
- display: inline-block;
2538
- color: #FFFFFF;
2539
- font-family: "Open Sans",sans-serif;
2540
- font-size: 13px;
2541
- line-height: 18px;
2542
- }
2543
- .question_text {
2544
- padding: 15px 25px;
2545
- cursor: pointer;
2546
- }
2547
-
2548
- .question-input__state{
2549
- color: #525252;
2550
- }
2551
-
2552
- .answer-input__wrapper .answer-input__state{
2553
- padding: 10px 0 10px 20px;
2554
- color: #fff;
2555
- }
2556
- .tab-content .answer-input__item input[type=checkbox] {
2557
- background: transparent;
2558
- border: 2px solid #fff;
2559
- height: 20px;
2560
- width: 20px;
2561
- border-radius: 3px;
2562
- }
2563
- .tab-content .answer-input__item input[type=checkbox]:checked:before{
2564
- margin: -2px 0 0 -3px;
2565
- color: #fff;
2566
- }
2567
- .question_cancel,.answer_cancel{
2568
- font-size: 14px;
2569
- font-weight: 400;
2570
- cursor: pointer;
2571
- }
2572
-
2573
- .question-input__state,
2574
- .answer-input__state {
2575
- display: flex;
2576
- justify-content: flex-end;
2577
- padding: 10px 20px;
2578
- font-family: "Open Sans",sans-serif;
2579
- font-size: 16px;
2580
- font-weight: 800;
2581
- line-height: 22px;
2582
- cursor: pointer;
2583
- }
2584
-
2585
- .question-input__state span,
2586
- .answer-input__state span {
2587
- margin-left: 10px;
2588
- }
2589
- .answer-input__button {
2590
- margin: 0 0 10px 20px;
2591
- display: flex;
2592
- flex-wrap: wrap;
2593
- max-width: 70%;
2594
- width: 70%;
2595
- word-break: break-all;
2596
- }
2597
- .answer__bin, .qa__bin {
2598
- width: 25px;
2599
- min-width: 25px;
2600
- height: 25px;
2601
- background-color: #e4e4e4;
2602
- color: #9E9E9E;
2603
- text-align: center;
2604
- line-height: 25px;
2605
- border-radius: 50%;
2606
- margin-left: 5px;
2607
- position: relative;
2608
- }
2609
- .main-question{
2610
- padding: 5px;
2611
- }
2612
- .answer-input__block {
2613
- display: flex;
2614
- padding: 10px 0;
2615
- position: relative;
2616
- }
2617
- .answer-item__result {
2618
- display: block;
2619
- color: #fff;
2620
- border-radius: 30px;
2621
- cursor: pointer;
2622
- margin-right: 10px;
2623
- margin-bottom: 20px;
2624
- display: flex;
2625
- justify-content: center;
2626
- align-items: center;
2627
- }
2628
- .answer__result {
2629
- padding: 10px 35px;
2630
- display: block;
2631
- align-self: center;
2632
- background-color: #0e71ff;
2633
- border-radius: 30px;
2634
- }
2635
- .add__answer {
2636
- -moz-user-select: none;
2637
- -khtml-user-select: none;
2638
- user-select: none;
2639
- cursor: pointer;
2640
- padding: 10px 15px;
2641
- display: block;
2642
- border-radius: 30px;
2643
- border: 1px solid #e4e4e4;
2644
- color: #767676;
2645
- font-family: "Open Sans", sans-serif;
2646
- font-size: 16px;
2647
- line-height: 22px;
2648
- width: 150px;
2649
- }
2650
- .tab-content .form-table td .tooltip {
2651
- display: none;
2652
- position: absolute;
2653
- background-color: #FF7140;
2654
- border-radius: 5px;
2655
- padding: 10px;
2656
- font-size: 12px;
2657
- color: #fff;
2658
- top: 35px;
2659
- width: 182px;
2660
- word-break: keep-all;
2661
- z-index: 15;
2662
- }
2663
- .tab-content .form-table td .tooltip.qa{
2664
- top: 113px;
2665
- }
2666
- .tab-content .form-table td .tooltip.lq{
2667
- top: 5%;
2668
- left: 100%;
2669
- }
2670
- .tab-content .form-table td .tooltip.lq_answer{
2671
- right: 0;
2672
- top: 25px;
2673
- }
2674
- .have_qa a{
2675
- display: block;
2676
- padding: 20px;
2677
- font-size: 18px;
2678
- font-weight: bolder;
2679
- text-align: center;
2680
- background-color: #0e71ff;
2681
- font-family: "Open Sans",sans-serif;
2682
- color: #fff;
2683
- border-radius: 18px;
2684
- margin-bottom: 40px;
2685
- }
2686
- .tab-content .main-question h3{
2687
- margin: 0 1em 1em;
2688
- }
2689
- .answer-input__wrapper, .qa-input__wrapper {
2690
- display: none;
2691
- position: absolute;
2692
- width: 100%;
2693
- top: 50px;
2694
- background-color: #0e71ff;
2695
- }
2696
- .tab-content .notify_mode{
2697
- color: #525252;
2698
- font-weight: bold;
2699
- }
2700
-
2701
- .notify_radio__wrap input[type=radio]:checked:before {
2702
- width: 12px;
2703
- height: 12px;
2704
- margin: 3px 2px 2px 2px;
2705
- background-color: #324EF8;
2706
- float: none;
2707
- }
2708
- .notify_radio__wrap {
2709
- padding: 10px 0;
2710
- }
2711
- .notify_radio__wrap input[type=radio]{
2712
- border: 2px solid #324EF8;
2713
- height: 22px;
2714
- width: 22px;
2715
- vertical-align: bottom;
2716
- }
2717
- .email__wrap{
2718
- display: flex;
2719
- }
2720
- .tab-content table .email__wrap label{
2721
- width: 15%;
2722
- align-self: center;
2723
- padding: 0;
2724
- font-weight: bold;
2725
- }
2726
- .question-input__wrapper .edit,.answer-item__result .edit_answer{
2727
- display: flex;
2728
- position: absolute;
2729
- top: 21px;
2730
- left: 10px;
2731
- height: 25px;
2732
- width: 25px;
2733
- color: #9E9E9E;
2734
- align-items: center;
2735
- background-color: #E5E5E5;
2736
- border-radius: 50px;
2737
- justify-content: center;
2738
- cursor: pointer;
2739
- }
2740
- .answer-item__result .edit_answer{
2741
- position: static;
2742
- margin-left: 5px;
2743
- }
2744
- .email_block .pro_button__wrapper{
2745
- height: 100%;
2746
- }
2747
- .email_block .pro_button__wrapper .pro_button__content{
2748
- justify-content: center;
2749
- }
2750
- .tab-content .email__wrap input[type=text]:not(.browser-default){
2751
- width: 40%;
2752
- height: 32px;
2753
- font-size: 14px;
2754
- }
2755
-
2756
- .add_question, .add_qa{
2757
- user-select: none;
2758
- color: #324EF8;
2759
- box-shadow: 0px 0px 9px -3px rgba(0,0,0,0.75);
2760
- padding: 10px 30px;
2761
- border-radius: 5px;
2762
- font-family: "Open Sans",sans-serif;
2763
- font-size: 15px;
2764
- font-weight: 600;
2765
- line-height: 22px;
2766
- }
2767
- .add_question b, .add_qa b{
2768
- vertical-align: baseline;
2769
- font-weight: bold;
2770
- }
2771
- .add__answer b{
2772
- font-size: 30px;
2773
- font-weight: 400;
2774
- line-height: 4px;
2775
- vertical-align: sub;
2776
- }
2777
- .triangle {
2778
- content: "";
2779
- position: absolute;
2780
- width: 0;
2781
- height: 0;
2782
- border-left: 25px solid transparent;
2783
- border-right: 25px solid transparent;
2784
- border-bottom: 25px solid #0e71ff;
2785
- top: -19px;
2786
- left: 30px;
2787
- }
2788
- .add_as_button{
2789
- cursor: pointer;
2790
- margin: 2em 0 0 0.8em;
2791
- display: inline-block;
2792
- }
2793
- .as_item__wrap{
2794
- align-items: center;
2795
- display: flex;
2796
- position: relative;
2797
- }
2798
- .wrap__pro input[type=text]:not(.browser-default){
2799
- width: 50%;
2800
- }
2801
-
2802
- .del_as{
2803
- margin-left: 20px;
2804
- width: 25px;
2805
- min-width: 25px;
2806
- height: 25px;
2807
- background-color: #e4e4e4;
2808
- color: #9E9E9E;
2809
- text-align: center;
2810
- line-height: 25px;
2811
- border-radius: 50%;
2812
- position: absolute;
2813
- right: -40px;
2814
- cursor: pointer;
2815
- }
2816
- .add_as{
2817
- color: #324EF8;
2818
- box-shadow: 0px 0px 9px -3px rgba(0,0,0,0.75);
2819
- padding: 10px 30px;
2820
- border-radius: 5px;
2821
- font-family: "Open Sans",sans-serif;
2822
- font-size: 15px;
2823
- font-weight: 600;
2824
- line-height: 22px;
2825
- }
2826
- .answer-input__add{
2827
- margin-right: 15px;
2828
- }
2829
- .header__close{
2830
- height: 25px;
2831
- width: 25px;
2832
- background-color: #D8D8D8;
2833
- border-radius: 50px;
2834
- position: relative;
2835
- cursor: pointer;
2836
- }
2837
- .header__close:after {
2838
- position: relative;
2839
- content: "\d7";
2840
- font-size: 27px;
2841
- color: #525252;
2842
- left: 5px;
2843
- top: -5px;
2844
- }
2845
- .main-qa{
2846
- display: flex;
2847
- flex-direction: row;
2848
- background-color: #F4F6FF;
2849
- border-radius: 15px;
2850
- position: relative;
2851
- margin: 20px 0;
2852
- }
2853
- .main-qa .del_qa{
2854
- position: absolute;
2855
- right: 10px;
2856
- top: 10px;
2857
- color: #0e71ff;
2858
- font-size: 20px;
2859
- cursor: pointer;
2860
- }
2861
- .main-qa h6{
2862
- font-size: 14px;
2863
- font-weight: bold;
2864
- text-transform: uppercase;
2865
- color: #525252;
2866
- font-family: "Open Sans", sans-serif;
2867
- }
2868
- .qa-question__wrap,.qa-response{
2869
- display: flex;
2870
- padding: 1em 2em;
2871
- flex-direction: column;
2872
- width: 50%;
2873
- flex-basis: 50%;
2874
- }
2875
- .qa-question__wrap .qa-question_input,.qa-question__wrap .qa-question-block{
2876
- margin: 1em;
2877
- }
2878
- .qa-question__wrap{
2879
- padding: 0;
2880
- }
2881
- .add_qa_question{
2882
- width: 30%;
2883
- align-self: auto;
2884
- justify-content: center;
2885
- text-align: center;
2886
- display: flex;
2887
- margin: 9px;
2888
- background-color: #0e71ff;
2889
- align-items: center;
2890
- border-radius: 8px;
2891
- color: #fff;
2892
- font-size: 16px;
2893
- box-shadow: 0px 0px 9px -3px rgba(0,0,0,0.75);
2894
- cursor: pointer;
2895
- user-select: none;
2896
- }
2897
- .add_qa_question:focus,.add_qa_question:active{
2898
- box-shadow: none;
2899
- }
2900
- .fb-customerchat{
2901
- display: none;
2902
- }
2903
- #mm-root {
2904
- display: none;
2905
- }
2906
- .tab-content .qa-wrapper .qa_head{
2907
- font-size: 22px;
2908
- margin-bottom: 15px;
2909
- margin-top: 0;
2910
- }
2911
- .tab-content .input-field.qa-wrapper{
2912
- padding: 0;
2913
- }
2914
- .qa-response input[type=text]:not(.browser-default)::placeholder, .question_button_wrap input[type=text]:not(.browser-default)::placeholder{
2915
- color: #A7A7A7;
2916
- }
2917
- .qa-response input[type=text]:not(.browser-default), .question_button_wrap input[type=text]:not(.browser-default){
2918
- background-color: #fff;
2919
- }
2920
- .tab-content .form-table td .qa_p{
2921
- margin-bottom: 20px;
2922
- margin-top: 10px;
2923
- }
2924
- .qa-question-block-item{
2925
- color: #fff;
2926
- border-radius: 30px;
2927
- cursor: pointer;
2928
- margin-right: 10px;
2929
- margin-bottom: 20px;
2930
- display: flex;
2931
- justify-content: center;
2932
- align-items: center;
2933
- }
2934
- .qa-question-block{
2935
- margin: 10px 0 10px 0;
2936
- display: flex;
2937
- flex-wrap: wrap;
2938
- }
2939
- span.qa-question-result {
2940
- padding: 10px 35px;
2941
- display: block;
2942
- align-self: center;
2943
- background-color: #0e71ff;
2944
- border-radius: 30px;
2945
- }
2946
- .question_button_wrap{
2947
- display: flex;
2948
- }
2949
-
2950
- .qa-input__wrapper{
2951
- padding: 20px 20px 0 20px;
2952
- border-radius: 9px;
2953
- z-index: 9;
2954
- }
2955
- .qa-response{
2956
- position: relative;
2957
- }
2958
- .qa-input__state{
2959
- color: #fff;
2960
- display: flex;
2961
- justify-content: flex-end;
2962
- padding: 10px 0 20px;
2963
- font-family: "Open Sans",sans-serif;
2964
- font-size: 16px;
2965
- font-weight: 800;
2966
- line-height: 22px;
2967
- cursor: pointer;
2968
- }
2969
- .qa_submit,.qa_cancel{
2970
- margin-left: 10px;
2971
- font-size: 14px;
2972
- }
2973
- .tab-content .qa-input__item input[type=text]:not(.browser-default){
2974
- background-color: #fff;
2975
- box-sizing: border-box;
2976
- padding: 10px 25px;
2977
- width: 80%;
2978
- border: none;
2979
- border-radius: 9px;
2980
- }
2981
- .qa_cancel{
2982
- font-weight: 400;
2983
- }
2984
- .qa-response:before {
2985
- position: absolute;
2986
- left: 0;
2987
- top: 10%;
2988
- border-left: 1px solid #B0B6CD;
2989
- content: "";
2990
- height: 80%;
2991
- }
2992
- .qa_new-wrapper h3{
2993
- margin-left: 20px;
2994
- font-size: 16px;
2995
- margin-top: 0;
2996
- }
2997
- .qa-question-block-item .edit_qa{
2998
- position: static;
2999
- margin-left: 5px;
3000
- display: flex;
3001
- top: 21px;
3002
- left: 10px;
3003
- height: 25px;
3004
- width: 25px;
3005
- min-width: 25px;
3006
- color: #9E9E9E;
3007
- align-items: center;
3008
- background-color: #E5E5E5;
3009
- border-radius: 50px;
3010
- justify-content: center;
3011
- cursor: pointer;
3012
- word-break: break-all;
3013
- }
3014
- .disabled{
3015
- pointer-events: none;
3016
- opacity: 0.6;
3017
- }
3018
-
3019
- .phone{
3020
- background: url("../img/iphone_x.png");
3021
- padding: 0;
3022
- margin-top: 200px;
3023
- height: 415px;
3024
- width: 220px;
3025
- background-repeat: no-repeat;
3026
- background-position: center center;
3027
- display: flex;
3028
- margin-right: auto;
3029
- margin-left: auto;
3030
- }
3031
- @media (max-width: 720px) {
3032
- .phone{
3033
- margin-top: 0;
3034
- }
3035
- .options table td{
3036
- width: 95%;
3037
- }
3038
- .del_as{
3039
- right: -32px;
3040
- }
3041
- .answer-input__block{
3042
- flex-direction: column;
3043
- }
3044
- .answer-input__add{
3045
- display: flex;
3046
- text-align: center;
3047
- justify-content: center;
3048
- }
3049
- .add_qa_question {
3050
- width: 50%;
3051
- padding: 10px;
3052
-
3053
- }
3054
- .question_button_wrap{
3055
- flex-direction: column;
3056
- align-items: center;
3057
- }
3058
- .test-bot-button{
3059
- top: 7px;
3060
- }
3061
- .row .col.s12 .questions-wrapper{
3062
- margin-top: 20px;
3063
- }
3064
- .tab-content .email__wrap input[type=text]:not(.browser-default){
3065
- width: 85%;
3066
- }
3067
- }
3068
- @media (max-width: 520px) {
3069
- .tab-link .limit__notice_tooltip{
3070
- top: 60px;
3071
- left: 2%;
3072
- }
3073
- .tab-link .limit__notice_tooltip:after{
3074
- border-color: #FD397A transparent transparent transparent;
3075
- top: -24px;
3076
- left: 172px;
3077
- transform: rotate(180deg);
3078
- }
3079
- }
3080
-
3081
- .mobile__wrapper{
3082
- display: flex;
3083
- flex-direction: column;
3084
- justify-content: space-evenly;
3085
- margin-right: auto;
3086
- margin-left: auto;
3087
- align-items: center;
3088
- width: 170px;
3089
- }
3090
- .ht-cc-admin-sidebar__dismiss_button_container {
3091
- position: relative;
3092
- right: 36px;
3093
- top: 20px;
3094
- margin-left: -10px;
3095
- }
3096
- .ht-cc-admin-sidebar__dismiss_button_container .dismiss_button {
3097
- cursor: pointer;
3098
- color: #000;
3099
- font-size: 14px;
3100
- padding: 4px;
3101
- }
3102
-
3103
- .logo_promo{
3104
- background: url("../img/mmL_logo.png");
3105
- height: 76px;
3106
- width: 116px;
3107
- background-size: contain;
3108
- margin-top: 20px;
3109
- background-repeat: no-repeat;
3110
- }
3111
- .dialog_block{
3112
- background-color: #fff;
3113
- border-radius: 10px;
3114
- margin: 0 10px 0 10px;
3115
- padding: 5px 13px;
3116
- font-size: 12px;
3117
- font-weight: 600;
3118
- }
3119
- .text__wrap{
3120
- display: flex;
3121
- height: auto;
3122
- flex-direction: row;
3123
- }
3124
- .dot_icon{
3125
- width: 20px;
3126
- height: 20px;
3127
- position: relative;
3128
- }
3129
- .dot_icon .white_circle{
3130
- width: 20px;
3131
- height: 20px;
3132
- background-color: #ffff;
3133
- border-radius: 50%;
3134
- margin-left: 5px;
3135
- }
3136
- .dot_icon .green_circle{
3137
- position: absolute;
3138
- height: 10px;
3139
- width: 10px;
3140
- border-radius: 50%;
3141
- background: #9EE10E;
3142
- border: 1px solid #FFFFFF;
3143
- right: -8px;
3144
- bottom: -5px;
3145
- }
3146
- .button_download_app{
3147
- background: linear-gradient(31.47deg, #935CF7 21.84%, #586CF5 81.11%);
3148
- border-radius: 5px;
3149
- padding: 5px 15px;
3150
- color: #fff;
3151
- margin-bottom: 40px;
3152
- display: flex;
3153
- cursor: pointer;
3154
- }
3155
- .ios_code{
3156
- background: url('../img/31c07c81b2d635598c3776cfb31eb240.png');
3157
- margin-left: auto;
3158
- margin-right: auto;
3159
- height: 300px;
3160
- width: 300px;
3161
- }
3162
- .promo-app__wrapper .android_app img{
3163
- width: 270px;
3164
- }
3165
- .promo-app__wrapper .ios_app{
3166
- width: 235px;
3167
- cursor: pointer;
3168
- }
3169
- .promo-app__wrapper{
3170
- text-align: center;
3171
- margin-bottom: 25px;
3172
- }
3173
- .promo-app__wrapper a{
3174
- display: block;
3175
- }
3176
- .promo-app__wrapper a:hover,.promo-app__wrapper a:active,.promo-app__wrapper a:focus{
3177
- border: none;
3178
- box-shadow: none;
3179
- }
3180
- .ios-app__wrap p {
3181
- margin-top: 41px;
3182
- }
3183
- .ios-app__wrap{
3184
- display: none;
3185
- }
3186
- .modal-overlays {
3187
- position: fixed;
3188
- margin-left: -20px;
3189
- right: 0;
3190
- height: auto;
3191
- width: auto;
3192
- background: #000;
3193
- will-change: opacity;
3194
- opacity: 0.4;
3195
- z-index: 998;
3196
- top: -25%;
3197
- left: 0;
3198
- bottom: 0;
3199
- display: none;
3200
- }
3201
- #promo_app{
3202
- z-index: 999;
3203
- transition: all 0.5s ease;
3204
- background-color: #FFFFFF;
3205
- display: none;
3206
- position: fixed;
3207
- top: 30%;
3208
- left: 0;
3209
- right: 0;
3210
- width: 563px;
3211
- margin: 0 auto;
3212
- color: #525252;
3213
- border: 1px solid #000;
3214
- border-radius: 10px;
3215
- }
3216
- #promo_app{
3217
- border: none;
3218
- width: 400px;
3219
- height: auto;
3220
- }
3221
- #promo_app p{
3222
- font-family: "Open Sans",sans-serif;
3223
- font-style: normal;
3224
- font-weight: bold;
3225
- font-size: 18px;
3226
- line-height: 25px;
3227
- color: #525252;
3228
- text-align: center;
3229
- margin-top: 35px;
3230
- }
3231
- #promo_app .modal_close {
3232
- background-size: contain;
3233
- width: 15px;
3234
- height: 15px;
3235
- background-repeat: no-repeat;
3236
- background-position: center;
3237
- position: absolute;
3238
- right: 12px;
3239
- top: 12px;
3240
- cursor: pointer;
3241
- z-index: 999;
3242
- }
3243
- #promo_app .modal_close{
3244
- color: #A6A3A3;
3245
- }
3246
- .limit__wrapper{
3247
- background-color: #FD397A;
3248
- width: 32px;
3249
- height: 32px;
3250
- display: flex;
3251
- align-items: center;
3252
- justify-content: center;
3253
- border-radius: 50%;
3254
- margin-left: 12px;
3255
- }
3256
- .limit_notice{
3257
- height: 20px;
3258
- width: 20px;
3259
- border: 2px solid #fff;
3260
- border-radius: 50%;
3261
- display: flex;
3262
- justify-content: center;
3263
- }
3264
- .limit_notice i {
3265
- font-size: 14px;
3266
- color: #fff;
3267
- display: flex;
3268
- align-items: center;
3269
- line-height: 16px;
3270
- }
3271
- .limit__notice_tooltip{
3272
- position: absolute;
3273
- background-color: #FD397A;
3274
- left: 100%;
3275
- max-width: 300px;
3276
- min-width: 280px;
3277
- padding: 20px;
3278
- height: auto;
3279
- display: flex;
3280
- border-radius: 7px;
3281
- flex-direction: column;
3282
- font-weight: 600;
3283
- line-height: 22px;
3284
- color: #FFFFFF;
3285
- font-family: "Open Sans",sans-serif;
3286
- z-index: 9;
3287
- }
3288
- .limit__notice_tooltip p{
3289
- font-size: 16px;
3290
-
3291
- }
3292
- .limit__notice_tooltip p b{
3293
- font-size: 30px;
3294
- font-weight: 600;
3295
- line-height: 14px;
3296
- }
3297
- .limit__button{
3298
- color: #FD397A;
3299
- font-family: "Open Sans",sans-serif;
3300
- font-size: 15px;
3301
- font-weight: bold;
3302
- display: flex;
3303
- line-height: 22px;
3304
- background-color: #fff;
3305
- text-align: center;
3306
- width: 60%;
3307
- justify-content: center;
3308
- align-self: center;
3309
- margin-top: 20px;
3310
- padding: 10px;
3311
- border-radius: 5px;
3312
- }
3313
- .limit__button:hover,.limit__button:focus{
3314
- border: none;
3315
- color: #FD397A;
3316
- box-shadow:none;
3317
- }
3318
- .limit__notice_tooltip span{
3319
- border-top: 1px solid #fff;
3320
- padding-top: 10px;
3321
- font-size: 14px;
3322
- }
3323
- .limit__notice_tooltip:after {
3324
- content: "";
3325
- position: absolute;
3326
- width: 0;
3327
- height: 0;
3328
- border-width: 12px;
3329
- border-style: solid;
3330
- border-color: transparent #FD397A transparent transparent;
3331
- top: 43%;
3332
- left: -24px;
3333
- }
3334
- .limit-notify-close{
3335
- position: absolute;
3336
- right: 5px;
3337
- top: 5px;
3338
- width: 15px;
3339
- height: 14px;
3340
- cursor: pointer;
3341
- }
3342
- .limit-notify-close:before, .limit-notify-close:after{
3343
- position: absolute;
3344
- content: ' ';
3345
- right: 7px;
3346
- height: 13px;
3347
- width: 3px;
3348
- background-color: #fff;
3349
- }
3350
- .limit-notify-close:before{
3351
- transform: rotate(45deg);
3352
- }
3353
- .limit-notify-close:after{
3354
- transform: rotate(-45deg);
3355
- }
3356
-
3357
- a.go-to-inbox-link {
3358
- display: flex;
3359
- flex-direction: row;
3360
- align-items: center;
3361
- justify-content: center;
3362
- background: #3A50F3;
3363
- border-radius: 3px;
3364
- padding: 8px 15px;
3365
- width: 135px;
3366
- font-size: 14px;
3367
- color: #fff;
3368
- margin: 10px 0;
3369
- }
3370
- a.go-to-inbox-link img {
3371
- padding-right: 8px;
3372
- }
3373
-
3374
- .chatbot_settings_tab__content {
3375
- display: flex;
3376
- flex-direction: column;
3377
- align-items: flex-start;
3378
- }
3379
- .chatbot_settings_tab__content p {
3380
- margin: 4px 0;
3381
- }
3382
- .go-to-chat-widget-settings-link {
3383
- color: #000000;
3384
- font-size: 12px;
3385
- border: 1px solid #3555F0;
3386
- border-radius: 2px;
3387
- padding: 8px 15px;
3388
- margin: 16px 0;
3389
- }
3390
- .chatbot_settings_tab__info-box {
3391
- background: #DFE3FD;
3392
- border: 1.06642px solid #3454EF;
3393
- border-radius: 5px;
3394
- padding: 20px 27px;
3395
- display: flex;
3396
- flex-direction: row;
3397
- align-items: flex-start;
3398
- font-size: 13px;
3399
- }
3400
-
3401
- .chatbot_settings_tab__info-box i {
3402
- font-size: 20px;
3403
- color: #3F5BDC;
3404
- margin-right: 12px;
3405
- }
3406
- .already-connected-info {
3407
- font-size: 20px;
3408
- margin: 36px 0;
3409
- line-height: 24px;
3410
- font-family: "Open Sans",sans-serif;
3411
- }
3412
- .already-connected .go_to_mm{
3413
- padding: 10px 30px;
3414
- background-color: #324ef8;
3415
- border-radius: 5px;
3416
- color: #fff;
3417
- text-decoration: none;
3418
- font-size: 16px;
3419
- font-family: "Open Sans",sans-serif;
3420
- border: none;
3421
- }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ /* Styles for admin page */
2
+
3
+ /* Submit button */
4
+ /* .options .submit { */
5
+ .submit {
6
+ position: sticky !important;
7
+ bottom: 1px;
8
+ }
9
+
10
+ .display-none {
11
+ display: none;
12
+ }
13
+
14
+ .display-block {
15
+ display: block;
16
+ }
17
+
18
+ .mobilemonkey-big-button {
19
+ padding: 20px 40px !important;
20
+ line-height: 0 !important;
21
+ }
22
+
23
+ .connect-button {
24
+ background-color: #4267b2;
25
+ border-radius: 4px;
26
+ color: #fff;
27
+ display: block;
28
+ width: 254px;
29
+ height: 40px;
30
+ text-decoration: none;
31
+ }
32
+
33
+ .connect-button:hover,
34
+ .connect-button:focus {
35
+ color: #fff;
36
+ }
37
+
38
+ .connected-page {
39
+ padding: 0 15px 15px 0;
40
+ }
41
+
42
+ .connected-page .connected-page-title {
43
+ font-size: 16px;
44
+ font-weight: 700;
45
+ }
46
+
47
+ .connected-page .connected-page-title span {
48
+ font-weight: bold;
49
+ color: green;
50
+ }
51
+
52
+ .connected-page-settings {
53
+ position: relative;
54
+ float: right;
55
+ }
56
+
57
+ .connected-page-settings #button_disconnect_page {
58
+ cursor: pointer;
59
+ background-color: #ca4646;
60
+ display: inline-block;
61
+ padding: 3px 8px;
62
+ font-size: 12px;
63
+ text-decoration: none;
64
+ color: #fff;
65
+ border-radius: 5px;
66
+ }
67
+
68
+ .connected-page-settings #button_disconnect_page:hover {
69
+ color: #3a3a3a;
70
+ background: #e8e8e8;
71
+ }
72
+
73
+ .cat-checklist {
74
+ padding: 15px !important;
75
+ margin-bottom: 30px !important;
76
+ }
77
+
78
+ .connect-button span {
79
+ font-family: Helvetica, Arial, sans-serif;
80
+ font-size: 14px;
81
+ text-align: center;
82
+ display: inline-block;
83
+ width: 200px;
84
+ }
85
+
86
+ .connect-button svg {
87
+ height: 24px;
88
+ margin: 8px;
89
+ display: inline-block;
90
+ vertical-align: middle;
91
+ }
92
+
93
+ .choose-page {
94
+ margin-top: 10px;
95
+ }
96
+
97
+ .choose-page .select-page {
98
+ border: 1px solid #dedede;
99
+ padding: 15px;
100
+ margin-top: -1px;
101
+ font-size: 16px;
102
+ }
103
+
104
+ .choose-page .select-page + .select-page {
105
+ border-bottom: none;
106
+ }
107
+
108
+ .choose-page .select-page:last-child {
109
+ border-bottom: 1px solid #dedede;
110
+ }
111
+
112
+ .choose-page .select-page a {
113
+ background-color: #d93;
114
+ display: inline-block;
115
+ float: right;
116
+ padding: 3px 8px;
117
+ font-size: 12px;
118
+ text-decoration: none;
119
+ color: #fff;
120
+ border-radius: 5px;
121
+ }
122
+
123
+ .choose-page .select-page a:hover {
124
+ color: #3a3a3a;
125
+ background: #e8e8e8;
126
+ }
127
+
128
+ .logout-mobilemonkey {
129
+ text-align: right;
130
+ margin: 0 0 15px 0;
131
+ overflow: hidden;
132
+ }
133
+
134
+ .logout-mobilemonkey a {
135
+ background-color: #d93;
136
+ display: inline-block;
137
+ float: right;
138
+ padding: 3px 8px;
139
+ font-size: 12px;
140
+ text-decoration: none;
141
+ color: #fff;
142
+ border-radius: 5px;
143
+ }
144
+
145
+ .logout-mobilemonkey a:hover {
146
+ color: #3a3a3a;
147
+ background: #e8e8e8;
148
+ }
149
+
150
+ .mobilemonkey-button {
151
+ margin-top: 10px;
152
+ position: relative;
153
+ display: inline-block;
154
+ }
155
+
156
+ .mobilemonkey-button button {
157
+ background-color: #d93;
158
+ display: inline-block;
159
+ padding: 3px 8px;
160
+ font-size: 12px;
161
+ text-decoration: none;
162
+ color: #fff;
163
+ border-radius: 5px;
164
+ }
165
+
166
+ .mobilemonkey-button .copiedtext {
167
+ color: green;
168
+ display: none;
169
+ }
170
+
171
+ .get-subscribers_block {
172
+ margin-bottom: 15px;
173
+ }
174
+
175
+ .get-subscribers_block h3 {
176
+ margin: 0 0 10px;
177
+ }
178
+
179
+ .get-subscribers_block .link-icon {
180
+ width: 45px;
181
+ display: inline-block;
182
+ margin-right: 10px;
183
+ vertical-align: top;
184
+ }
185
+
186
+ .get-subscribers_block .link-icon path {
187
+ fill: #654fa5;
188
+ }
189
+
190
+ .get-subscribers_block .link-info {
191
+ display: inline-block;
192
+ }
193
+
194
+ .get-subscribers_block button {
195
+ background-color: #d93;
196
+ display: inline-block;
197
+ border: none;
198
+ padding: 5px 8px;
199
+ font-size: 12px;
200
+ text-decoration: none;
201
+ color: #fff;
202
+ border-radius: 5px;
203
+ }
204
+
205
+ .get-subscribers_block button:hover {
206
+ cursor: pointer;
207
+ color: #3a3a3a;
208
+ background: #e8e8e8;
209
+ }
210
+
211
+ .mobilemonkey-settings {
212
+ display: inline-block;
213
+ }
214
+
215
+ .mobilemonkey-settings,
216
+ .connect-page {
217
+ position: relative;
218
+ }
219
+
220
+ .connect-page {
221
+ float: right;
222
+ height: 32px;
223
+ }
224
+
225
+ .opacity-button {
226
+ opacity: 0.3;
227
+ }
228
+
229
+ .lazyload {
230
+ display: none;
231
+ position: absolute;
232
+ top: 0;
233
+ background: url(../img/lazyload.svg) center no-repeat;
234
+ width: 100%;
235
+ bottom: 0;
236
+ left: 0;
237
+ }
238
+ .save_change {
239
+ position: relative;
240
+ }
241
+
242
+ .connect-page .lazyload,
243
+ .connected-page-settings .lazyload {
244
+ top: -8px;
245
+ }
246
+
247
+ .active-page-info {
248
+ display: flex;
249
+ align-items: flex-start;
250
+ flex-direction: column;
251
+ }
252
+ .connect_check .fa {
253
+ display: inline;
254
+ }
255
+ .page_name__wrap {
256
+ display: flex;
257
+ flex-direction: row;
258
+ align-items: center;
259
+ }
260
+ span.pro,
261
+ span.free {
262
+ padding: 3px 10px 3px 10px;
263
+ width: 50px;
264
+ height: 25px;
265
+ color: #ffffff;
266
+ font-family: "Open Sans", sans-serif;
267
+ font-size: 13px;
268
+ font-weight: bold;
269
+ line-height: 19px;
270
+ text-align: center;
271
+ border-radius: 7px;
272
+ margin-left: 11px;
273
+ background: -webkit-gradient(
274
+ linear,
275
+ left top,
276
+ right top,
277
+ from(#db8700),
278
+ to(#f0b537)
279
+ );
280
+ background: linear-gradient(to right, #db8700 0%, #f0b537 100%);
281
+ background: -webkit-linear-gradient(left, #db8700 0%, #f0b537 100%);
282
+ }
283
+ span.pro {
284
+ background: -webkit-gradient(
285
+ linear,
286
+ left top,
287
+ right top,
288
+ from(#db8700),
289
+ to(#f0b537)
290
+ );
291
+ background: linear-gradient(to right, #db8700 0%, #f0b537 100%);
292
+ background: -webkit-linear-gradient(left, #db8700 0%, #f0b537 100%);
293
+ }
294
+ span.free {
295
+ background: none;
296
+ background-color: #c8c8ce;
297
+ }
298
+ /* .active-page-image, .active-page-info {
299
+ display: inline-block;
300
+ vertical-align: middle;
301
+ } */
302
+
303
+ .active-page-image {
304
+ max-width: 60px;
305
+ margin-right: 10px;
306
+ }
307
+
308
+ .toplevel_page_mobilemonkey-contacts {
309
+ padding-right: 20px;
310
+ }
311
+
312
+ /* i.mce-i-mobilemonkey-shortcode {
313
+ background-image: url('../image/tinymce_icon.png');
314
+ } */
315
+
316
+ .get-mm-free-button {
317
+ position: relative;
318
+ width: 254px;
319
+ height: 40px;
320
+ overflow: hidden;
321
+ border-radius: 3px;
322
+ }
323
+
324
+ .get-mm-free-button__fallback,
325
+ .get-mm-free-button__fallback:hover {
326
+ text-decoration: none;
327
+ }
328
+
329
+ /*Fallback button and iframe:before get same styles */
330
+ .get-mm-free-button__fallback,
331
+ .get-mm-free-button .fb-send-to-messenger.fb_iframe_widget::before {
332
+ color: #fff;
333
+ font-size: 19px;
334
+ line-height: 29px;
335
+ text-transform: uppercase;
336
+ border-radius: 3px;
337
+ position: absolute;
338
+ top: 0;
339
+ left: 0;
340
+ right: 0;
341
+ bottom: 0;
342
+ transition: all 0.3s ease 0s;
343
+ }
344
+
345
+ .get-mm-free-button .fb-send-to-messenger.fb_iframe_widget::before {
346
+ pointer-events: none;
347
+ z-index: 2;
348
+ content: "Connect Facebook Page";
349
+ font-family: Helvetica, Arial, sans-serif;
350
+ background: #4267b2 url(../img/fb.svg) 8px no-repeat;
351
+ background-size: 24px;
352
+ font-size: 14px;
353
+ text-align: right;
354
+ padding-right: 13px;
355
+ box-sizing: border-box;
356
+ color: #fff;
357
+ width: 254px;
358
+ height: 40px;
359
+ line-height: 40px;
360
+ text-decoration: none;
361
+ text-transform: uppercase;
362
+ border-radius: 3px;
363
+ position: absolute;
364
+ top: 0;
365
+ left: 0;
366
+ right: 0;
367
+ bottom: 0;
368
+ transition: all 0.3s ease 0s;
369
+ }
370
+
371
+ /* Hide Facebook plugin until rendered callback from Facebook */
372
+ .get-mm-free-button .fb-send-to-messenger {
373
+ display: none;
374
+ }
375
+
376
+ /* Add class to show Facebook plugin once get rendered callback from Facebook */
377
+ .get-mm-free-button .fb-send-to-messenger.fb-send-to-messenger--loaded-iframe {
378
+ display: block;
379
+ }
380
+
381
+ .mobilemonkey-logo {
382
+ background: url(../img/mobilemonkey_logo.png) left bottom no-repeat;
383
+ background-size: contain;
384
+ height: 70px;
385
+ max-width: 330px;
386
+ position: relative;
387
+ }
388
+
389
+ .options-subtitle {
390
+ font-size: 12px;
391
+ }
392
+
393
+ .switch {
394
+ position: relative;
395
+ display: inline-block;
396
+ width: 52px;
397
+ height: 25px;
398
+ margin: 0;
399
+ margin-right: 20px;
400
+ }
401
+
402
+ /* Hide default HTML checkbox */
403
+ .switch input {
404
+ opacity: 0;
405
+ width: 0;
406
+ height: 0;
407
+ }
408
+ .qq_label {
409
+ margin-top: 5px;
410
+ }
411
+ /* The slider */
412
+ .slider {
413
+ position: absolute;
414
+ cursor: pointer;
415
+ top: 0;
416
+ left: 0;
417
+ right: 0;
418
+ bottom: 0;
419
+ background-color: #ccc;
420
+ -webkit-transition: 0.4s;
421
+ transition: 0.4s;
422
+ }
423
+ .switch__wrap {
424
+ display: flex;
425
+ margin-top: 15px;
426
+ }
427
+ .switch__wrap p {
428
+ color: #000;
429
+ }
430
+ .slider:before {
431
+ position: absolute;
432
+ content: "";
433
+ height: 18px;
434
+ width: 18px;
435
+ left: 4px;
436
+ bottom: 4px;
437
+ background-color: white;
438
+ -webkit-transition: 0.4s;
439
+ transition: 0.4s;
440
+ }
441
+
442
+ input:checked + .slider {
443
+ background-color: #2196f3;
444
+ }
445
+
446
+ input:focus + .slider {
447
+ box-shadow: 0 0 1px #2196f3;
448
+ }
449
+
450
+ input:checked + .slider:before {
451
+ -webkit-transform: translateX(26px);
452
+ -ms-transform: translateX(26px);
453
+ transform: translateX(26px);
454
+ }
455
+
456
+ /* Rounded sliders */
457
+ .slider.round {
458
+ border-radius: 34px;
459
+ }
460
+
461
+ .slider.round:before {
462
+ border-radius: 50%;
463
+ }
464
+
465
+ .answering-service label {
466
+ display: block;
467
+ margin-bottom: 10px;
468
+ }
469
+
470
+ .toc-tab-box .answering-service .input-field {
471
+ padding-left: 0;
472
+ }
473
+
474
+ .toc-tab-box .answering-service h6 {
475
+ font-weight: bold;
476
+ }
477
+
478
+ .answering-service textarea {
479
+ resize: none;
480
+ }
481
+
482
+ .as_state p {
483
+ display: inline-block;
484
+ color: #444;
485
+ margin-left: 20px;
486
+ font-size: 1rem;
487
+ font-weight: bold;
488
+ vertical-align: middle;
489
+ }
490
+
491
+ body .toc-tab-box .answering-service input {
492
+ border: 1px solid #9e9e9e;
493
+ padding: 0 0 0 20px;
494
+ }
495
+
496
+ body .toc-tab-box .button {
497
+ padding: 20px;
498
+ line-height: 0;
499
+ }
500
+
501
+ .toc-tab-box .form-table th {
502
+ width: 1px;
503
+ }
504
+ .form-table td p {
505
+ display: block;
506
+ }
507
+
508
+ .form-table {
509
+ position: relative;
510
+ }
511
+ .mm_only_block {
512
+ margin-top: 20px;
513
+ }
514
+ .mm_only_block h6 {
515
+ line-height: 1.6rem;
516
+ margin: 0 0 20px 0;
517
+ font-weight: 600;
518
+ font-size: 16px;
519
+ letter-spacing: 1px;
520
+ }
521
+
522
+ .mm_only_block a.go_mm {
523
+ height: auto;
524
+ padding: 5px 15px;
525
+ border-radius: 4px;
526
+ color: #fff;
527
+ }
528
+
529
+ .mm_only_block a.go_mm {
530
+ background-color: #324ef8;
531
+ }
532
+ .mm_only_block .but__wrap {
533
+ margin-top: 20px;
534
+ display: flex;
535
+ flex-direction: row;
536
+ }
537
+
538
+ .mm_only_block a.reset_chatbot {
539
+ background-color: gray;
540
+ margin-right: 2rem;
541
+ border-radius: 4px;
542
+ color: #fff;
543
+ padding: 5px 15px;
544
+ }
545
+
546
+ .mm_only_block a.go_mm {
547
+ background-color: #324ef8;
548
+ padding: 5px 15px;
549
+ }
550
+ .mm_only_block .but__wrap {
551
+ margin-top: 20px;
552
+ display: flex;
553
+ flex-direction: row;
554
+ }
555
+
556
+ .test-bot-button {
557
+ position: absolute;
558
+ right: 0;
559
+ }
560
+
561
+ .test-bot-button__button-wrapper {
562
+ height: 29px;
563
+ width: 137px;
564
+ margin-bottom: 10px;
565
+ overflow: hidden;
566
+ border-radius: 3px;
567
+ position: relative;
568
+ }
569
+
570
+ .test-bot-button .fb_iframe_widget {
571
+ position: initial;
572
+ }
573
+
574
+ .fb_iframe_widget {
575
+ display: inline-block;
576
+ position: relative;
577
+ }
578
+
579
+ .test-bot-button .fb-send-to-messenger.fb_iframe_widget:before {
580
+ background-color: #0084ff;
581
+ border-radius: 3px;
582
+ color: #fff;
583
+ content: "Test your ChatBot";
584
+ font-size: 14px;
585
+ font-weight: 500;
586
+ height: 29px;
587
+ line-height: 29px;
588
+ pointer-events: none;
589
+ position: absolute;
590
+ left: 0;
591
+ top: 0;
592
+ width: 140px;
593
+ padding-right: 0px;
594
+ z-index: 2;
595
+ padding-left: 8px;
596
+ -webkit-transition: background-color 0.3s ease-in-out;
597
+ transition: background-color 0.3s ease-in-out;
598
+ cursor: pointer;
599
+ font-family: "Open Sans", sans-serif;
600
+ }
601
+
602
+ .fb_iframe_widget span {
603
+ display: inline-block;
604
+ position: relative;
605
+ text-align: justify;
606
+ }
607
+ .sp-input {
608
+ text-transform: uppercase;
609
+ }
610
+
611
+ body {
612
+ margin-top: 100px;
613
+ font-family: "Trebuchet MS", serif;
614
+ line-height: 1.6;
615
+ background-color: #efefef;
616
+ }
617
+
618
+ .step-wrapper {
619
+ margin: 0 auto;
620
+ background-color: #ffffff;
621
+ border-radius: 10px;
622
+ margin-bottom: 100px;
623
+ -webkit-box-shadow: 0px 0px 5px -2px rgba(0, 0, 0, 0.75);
624
+ box-shadow: 0px 0px 5px -2px rgba(0, 0, 0, 0.75);
625
+ }
626
+
627
+ .step-wrapper .tab_header {
628
+ display: -webkit-box;
629
+ display: -ms-flexbox;
630
+ display: flex;
631
+ -webkit-box-align: center;
632
+ -ms-flex-align: center;
633
+ align-items: center;
634
+ background-color: #f7f8fa;
635
+ }
636
+ .step-wrapper .tab-link.current span.tab_header {
637
+ background-color: #ffffff;
638
+ }
639
+
640
+ .step-wrapper ul.tabs_wrapper {
641
+ margin: 0px;
642
+ padding: 0px;
643
+ list-style: none;
644
+ border-radius: 12px;
645
+ }
646
+
647
+ .step-wrapper ul li {
648
+ color: #222;
649
+ display: -ms-inline-flexbox;
650
+ display: inline-flex;
651
+ -webkit-box-align: center;
652
+ -ms-flex-align: center;
653
+ align-items: center;
654
+ padding: 0 1em;
655
+ font-size: 18px;
656
+ cursor: pointer;
657
+ margin-bottom: 0px;
658
+ height: 50px;
659
+ }
660
+
661
+ .step-wrapper ul li .tab_number {
662
+ width: 30px;
663
+ height: 30px;
664
+ display: block;
665
+ background-color: #fff;
666
+ display: -webkit-box;
667
+ display: -ms-flexbox;
668
+ display: flex;
669
+ -webkit-box-align: center;
670
+ -ms-flex-align: center;
671
+ align-items: center;
672
+ -webkit-box-pack: center;
673
+ -ms-flex-pack: center;
674
+ justify-content: center;
675
+ border-radius: 50%;
676
+ color: #3c59e4;
677
+ margin-right: 0.7rem;
678
+ border: 2px solid #3c59e4;
679
+ }
680
+
681
+ .step-wrapper ul li .tab_contacts__count {
682
+ margin-left: 0.5em;
683
+ background-color: #1ac9b7;
684
+ padding: 0.1em 0.8em;
685
+ font-size: 14px;
686
+ color: #fff;
687
+ border-radius: 5px;
688
+ }
689
+
690
+ .step-wrapper ul li.current {
691
+ background-color: #fff;
692
+ color: #222;
693
+ border: 2px solid #3c59e4;
694
+ border-bottom: 0;
695
+ border-top-left-radius: 5px;
696
+ border-top-right-radius: 5px;
697
+ height: 52px;
698
+ }
699
+ .step-wrapper ul li.done .tab_number {
700
+ background-color: #3c59e4;
701
+ color: #fff;
702
+ border: 2px solid #3c59e4;
703
+ }
704
+ /*.step-wrapper ul li.done.incomplete{
705
+ pointer-events: none;
706
+ opacity: 0.6;
707
+ }*/
708
+ .step-wrapper ul li.current .tab_number {
709
+ background-color: #3c59e4;
710
+ color: #fff;
711
+ border: 2px solid #3c59e4;
712
+ }
713
+
714
+ .tab-content {
715
+ display: none;
716
+ border-bottom-right-radius: 5px;
717
+ border-bottom-left-radius: 5px;
718
+ }
719
+
720
+ .tab-content .tab-content__wrapper {
721
+ background: #fff;
722
+ padding: 1em 2em;
723
+ border-bottom-right-radius: 10px;
724
+ border-bottom-left-radius: 10px;
725
+ }
726
+
727
+ .tab-content.current {
728
+ display: inherit;
729
+ }
730
+
731
+ .tab-content h1 {
732
+ color: #525252;
733
+ font-family: "Open Sans", sans-serif;
734
+ font-size: 36px;
735
+ font-weight: bold;
736
+ line-height: 49px;
737
+ margin: 0 0 0.7em;
738
+ }
739
+
740
+ .tab-content h3 {
741
+ text-transform: uppercase;
742
+ color: #525252;
743
+ font-family: "Open Sans", sans-serif;
744
+ font-size: 16px;
745
+ font-weight: 800;
746
+ letter-spacing: 0.15px;
747
+ line-height: 22px;
748
+ margin-bottom: 0;
749
+ }
750
+
751
+ .tab-content p {
752
+ color: #393e4a;
753
+ font-family: "Open Sans", sans-serif;
754
+ font-size: 16px;
755
+ line-height: 22px;
756
+ margin: 0.7em 0;
757
+ }
758
+
759
+ .tab-content textarea,
760
+ .tab-content input[type="text"]:not(.browser-default) {
761
+ padding: 20px;
762
+ width: 100%;
763
+ border: 1px solid #979797;
764
+ margin: 0.5em 0;
765
+ line-height: 20px;
766
+ border-radius: 5px;
767
+ font-size: 16px;
768
+ -webkit-box-sizing: border-box;
769
+ box-sizing: border-box;
770
+ }
771
+
772
+ .tab-content .input-field {
773
+ display: -webkit-box;
774
+ display: -ms-flexbox;
775
+ display: flex;
776
+ -webkit-box-orient: vertical;
777
+ -webkit-box-direction: normal;
778
+ -ms-flex-direction: column;
779
+ flex-direction: column;
780
+ width: 100%;
781
+ }
782
+
783
+ .tab-content .input-field__email input[type="email"]:not(.browser-default) {
784
+ width: 250px;
785
+ padding: 0.5em;
786
+ background-color: #e7e7e7;
787
+ -webkit-box-sizing: border-box;
788
+ box-sizing: border-box;
789
+ }
790
+
791
+ .tab-content .upgrade_button {
792
+ padding: 0.7em;
793
+ border: none;
794
+ border-radius: 5px;
795
+ color: #fff;
796
+ background: -webkit-gradient(
797
+ linear,
798
+ left top,
799
+ right top,
800
+ from(#db8700),
801
+ to(#f0b537)
802
+ );
803
+ background: linear-gradient(to right, #db8700 0%, #f0b537 100%);
804
+ background: -webkit-linear-gradient(left, #db8700 0%, #f0b537 100%);
805
+ font-size: 14px;
806
+ font-weight: 600;
807
+ text-decoration: none;
808
+ }
809
+
810
+ .tab-content .tab-content__footer {
811
+ margin-top: 50px;
812
+ display: -webkit-box;
813
+ display: -ms-flexbox;
814
+ display: flex;
815
+ -webkit-box-pack: end;
816
+ -ms-flex-pack: end;
817
+ justify-content: flex-end;
818
+ }
819
+
820
+ .tab-content .button-primary {
821
+ padding: 10px 30px;
822
+ background-color: #324ef8;
823
+ border-radius: 5px;
824
+ color: #fff;
825
+ text-decoration: none;
826
+ text-transform: uppercase;
827
+ font-size: 16px;
828
+ height: auto;
829
+ border: none;
830
+ width: auto;
831
+ }
832
+ p.submit {
833
+ margin-top: 30px;
834
+ text-align: right;
835
+ width: 100%;
836
+ }
837
+ .tab-content .button-primary:hover,
838
+ .tab-content .button-primary:active,
839
+ .tab-content .button-primary:focus {
840
+ opacity: 0.75;
841
+ background-color: #324ef8;
842
+ border: none;
843
+ }
844
+
845
+ .as_row {
846
+ display: -webkit-box;
847
+ display: -ms-flexbox;
848
+ display: flex;
849
+ -webkit-box-orient: horizontal;
850
+ -webkit-box-direction: normal;
851
+ -ms-flex-direction: row;
852
+ flex-direction: row;
853
+ -webkit-box-align: center;
854
+ -ms-flex-align: center;
855
+ align-items: center;
856
+ }
857
+
858
+ .as_row .switch {
859
+ position: relative;
860
+ display: inline-block;
861
+ width: 52px;
862
+ height: 27px;
863
+ margin: 0;
864
+ margin-right: 20px;
865
+ }
866
+
867
+ .as_row .switch input {
868
+ opacity: 0;
869
+ width: 0;
870
+ height: 0;
871
+ }
872
+
873
+ .as_row .slider {
874
+ position: absolute;
875
+ cursor: pointer;
876
+ top: 0;
877
+ left: 0;
878
+ right: 0;
879
+ bottom: 0;
880
+ background-color: #ccc;
881
+ -webkit-transition: 0.4s;
882
+ transition: 0.4s;
883
+ }
884
+
885
+ .as_row .slider:before {
886
+ position: absolute;
887
+ content: "";
888
+ height: 19px;
889
+ width: 19px;
890
+ left: 4px;
891
+ bottom: 4px;
892
+ background-color: white;
893
+ -webkit-transition: 0.4s;
894
+ transition: 0.4s;
895
+ }
896
+
897
+ .as_row input:checked + .slider {
898
+ background-color: #2196f3;
899
+ }
900
+
901
+ .as_row input:focus + .slider {
902
+ -webkit-box-shadow: 0 0 1px #2196f3;
903
+ box-shadow: 0 0 1px #2196f3;
904
+ }
905
+
906
+ .as_row input:checked + .slider:before {
907
+ -webkit-transform: translateX(25px);
908
+ transform: translateX(25px);
909
+ }
910
+
911
+ .as_row .slider.round {
912
+ border-radius: 34px;
913
+ }
914
+
915
+ .as_row .slider.round:before {
916
+ border-radius: 50%;
917
+ }
918
+
919
+ .customization_button__wrapper,
920
+ .pro_button__wrapper {
921
+ background: -webkit-gradient(
922
+ linear,
923
+ left top,
924
+ right top,
925
+ from(#3d5afe),
926
+ to(#7c4dff)
927
+ );
928
+ background: linear-gradient(to right, #3d5afe 0%, #7c4dff 100%);
929
+ padding: 1em 1.5em;
930
+ border-radius: 18px;
931
+ -webkit-box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, 0.75);
932
+ box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, 0.75);
933
+ }
934
+ .pro_button__wrapper {
935
+ position: absolute;
936
+ display: flex;
937
+ align-items: center;
938
+ top: -4px;
939
+ width: 100%;
940
+ /* height: 64px;*/
941
+ padding: 0 1em;
942
+ left: 0;
943
+ }
944
+
945
+ .customization_button__wrapper .customization_button__link,
946
+ .pro_button__wrapper .pro_button__link {
947
+ text-decoration: none;
948
+ }
949
+ .pro_button__wrapper .pro_button__link {
950
+ width: 100%;
951
+ height: 100%;
952
+ }
953
+ .pro_button__wrapper .pro_button__link:focus {
954
+ border: 0;
955
+ box-shadow: none;
956
+ height: 100%;
957
+ }
958
+
959
+ .customization_button__wrapper .customization_button__image {
960
+ background-image: url("../img/monkey_head.png");
961
+ background-size: contain;
962
+ width: 45px;
963
+ height: 45px;
964
+ display: block;
965
+ background-repeat: no-repeat;
966
+ background-position: center;
967
+ margin: 0 0.3em;
968
+ }
969
+
970
+ .customization_button__wrapper .customization_button,
971
+ .pro_button__wrapper .pro_button {
972
+ display: -webkit-box;
973
+ display: -ms-flexbox;
974
+ display: flex;
975
+ -webkit-box-pack: justify;
976
+ -ms-flex-pack: justify;
977
+ justify-content: space-between;
978
+ -webkit-box-align: center;
979
+ -ms-flex-align: center;
980
+ align-items: center;
981
+ }
982
+ .pro_button__wrapper .pro_button {
983
+ display: flex;
984
+ justify-content: space-between;
985
+ height: 100%;
986
+ }
987
+
988
+ .pro_button__content {
989
+ flex-direction: column;
990
+ height: 100%;
991
+ }
992
+ .pro_button__content h3,
993
+ .pro_button__content p {
994
+ color: #fff;
995
+ padding: 0;
996
+ margin: 0;
997
+ }
998
+ .tab-content .form-table .pro_button__content p {
999
+ margin-top: 5px;
1000
+ margin-bottom: 7px;
1001
+ }
1002
+ .pro_button__content h3 b {
1003
+ color: red;
1004
+ text-decoration: underline;
1005
+ }
1006
+
1007
+ .customization_button__wrapper
1008
+ .customization_button
1009
+ .customization_button__content,
1010
+ .pro_button__wrapper .pro_button .pro_button__content {
1011
+ display: -webkit-box;
1012
+ display: -ms-flexbox;
1013
+ display: flex;
1014
+ -webkit-box-align: center;
1015
+ -ms-flex-align: center;
1016
+ align-items: center;
1017
+ color: #fff;
1018
+ font-size: 22px;
1019
+ font-weight: bold;
1020
+ line-height: 30px;
1021
+ justify-content: center;
1022
+ }
1023
+
1024
+ .customization_button__wrapper .customization_button__action,
1025
+ .pro_button__wrapper .pro_button__action {
1026
+ padding: 1em 2em;
1027
+ background-color: #fff;
1028
+ border-radius: 10px;
1029
+ display: -webkit-box;
1030
+ display: -ms-flexbox;
1031
+ display: flex;
1032
+ -webkit-box-align: center;
1033
+ -ms-flex-align: center;
1034
+ align-items: center;
1035
+ }
1036
+ .pro_button__wrapper .pro_button__action {
1037
+ padding: 0.6rem 2rem;
1038
+ }
1039
+ .customization_button__wrapper
1040
+ .customization_button__action
1041
+ .button_action__text,
1042
+ .pro_button__wrapper .pro_button_action__text {
1043
+ font-size: 18px;
1044
+ font-weight: 800;
1045
+ line-height: 24px;
1046
+ text-transform: uppercase;
1047
+ color: #7e74fe;
1048
+ }
1049
+
1050
+ .customize_section input,
1051
+ .customize_section select {
1052
+ width: 30%;
1053
+ }
1054
+ .select-1 {
1055
+ margin: 15px 0;
1056
+ }
1057
+
1058
+ .customize_section input.select_numbers,
1059
+ .customize_section select.select_numbers {
1060
+ width: 100px;
1061
+ }
1062
+
1063
+ .customize_section .greeting_display__wrapper span {
1064
+ color: #393e4a;
1065
+ font-family: "Open Sans", sans-serif;
1066
+ font-size: 16px;
1067
+ line-height: 22px;
1068
+ margin-left: 1.2em;
1069
+ }
1070
+
1071
+ .list_tabs__button {
1072
+ display: none;
1073
+
1074
+ background-size: contain;
1075
+ width: 20px;
1076
+ height: 20px;
1077
+ background-repeat: no-repeat;
1078
+ background-position: center;
1079
+ }
1080
+
1081
+ .list_tabs__button .list_tabs {
1082
+ display: none;
1083
+ }
1084
+ .form-table p.description {
1085
+ font-style: normal;
1086
+ }
1087
+ #to_pro,
1088
+ #unsaved_option,
1089
+ #pro_option,
1090
+ #cancel,
1091
+ #mm_option {
1092
+ z-index: 999;
1093
+ transition: all 0.5s ease;
1094
+ background-color: #ffffff;
1095
+ display: none;
1096
+ position: fixed;
1097
+ top: 30%;
1098
+ left: 0;
1099
+ right: 0;
1100
+ width: 563px;
1101
+ margin: 0 auto;
1102
+ color: #525252;
1103
+ border: 1px solid #000;
1104
+ border-radius: 10px;
1105
+ }
1106
+
1107
+ #to_pro .modal_close,
1108
+ #unsaved_option .modal_close,
1109
+ #pro_option .modal_close,
1110
+ #mm_option .modal_close,
1111
+ #cancel .modal_close {
1112
+ background-size: contain;
1113
+ width: 15px;
1114
+ height: 15px;
1115
+ background-repeat: no-repeat;
1116
+ background-position: center;
1117
+ position: absolute;
1118
+ right: 12px;
1119
+ top: 12px;
1120
+ cursor: pointer;
1121
+ z-index: 999;
1122
+ }
1123
+
1124
+ #to_pro .upgrade__wrapper,
1125
+ #unsaved_option .unsaved__wrapper,
1126
+ #cancel .cancel__wrapper,
1127
+ #mm_option .mm__wrapper {
1128
+ position: relative;
1129
+ height: 302px;
1130
+ padding-top: 1em;
1131
+ }
1132
+
1133
+ #to_pro .upgrade__content,
1134
+ #unsaved_option .unsaved__content,
1135
+ #cancel .cancel__content,
1136
+ #mm_option .mm__content {
1137
+ padding: 1.5em;
1138
+ }
1139
+
1140
+ #to_pro .upgrade__button,
1141
+ #unsaved_option .unsaved__button,
1142
+ #mm_option .mm__button,
1143
+ #cancel .cancel__button {
1144
+ padding: 1.5em 2em;
1145
+ text-align: center;
1146
+ position: absolute;
1147
+ width: 100%;
1148
+ max-width: 564px;
1149
+ bottom: 0px;
1150
+ display: flex;
1151
+ justify-content: flex-end;
1152
+ align-items: baseline;
1153
+ }
1154
+ #unsaved_option .unsaved__button {
1155
+ flex-direction: row-reverse;
1156
+ justify-content: flex-start;
1157
+ }
1158
+
1159
+ #to_pro .upgrade__button .reds,
1160
+ #unsaved_option .unsaved__button .reds,
1161
+ #cancel .cancel__button .reds {
1162
+ padding: 5px 15px;
1163
+ background-color: #ca4646;
1164
+ border-radius: 5px;
1165
+ color: #fff;
1166
+ text-decoration: none;
1167
+ text-transform: uppercase;
1168
+ font-size: 16px;
1169
+ border: none;
1170
+ flex-basis: 25%;
1171
+ position: relative;
1172
+ margin: 0 10px;
1173
+ }
1174
+ #cancel .cancel__button .reds {
1175
+ flex-basis: 40%;
1176
+ }
1177
+ .subscribe_succes_cancel {
1178
+ font-size: 19px;
1179
+ padding: 20px;
1180
+ height: 80%;
1181
+ display: flex;
1182
+ align-items: center;
1183
+ }
1184
+ #to_pro .upgrade__button .reds:hover,
1185
+ #unsaved_option .unsaved__button .reds:hover,
1186
+ #cancel .cancel__button .reds:hover {
1187
+ opacity: 0.75;
1188
+ background-color: #ca4646;
1189
+ border: none;
1190
+ }
1191
+ #unsaved_option .unsaved__button #discard_button {
1192
+ background-color: #fff;
1193
+ color: #ca4646;
1194
+ }
1195
+ #unsaved_option .unsaved__button #discard_button:hover {
1196
+ text-decoration: underline;
1197
+ background-color: #fff;
1198
+ opacity: 1;
1199
+ }
1200
+ #unsaved_option .unsaved__button #discard_button:focus {
1201
+ box-shadow: none;
1202
+ }
1203
+ .modal a.blues {
1204
+ cursor: pointer;
1205
+ padding: 5px 15px;
1206
+ background-color: #324ef8;
1207
+ border-radius: 5px;
1208
+ color: #fff;
1209
+ text-decoration: none;
1210
+ font-size: 16px;
1211
+ border: none;
1212
+ margin: 0 10px;
1213
+ position: relative;
1214
+ }
1215
+ .modal .mm__content {
1216
+ color: #525252;
1217
+ }
1218
+ .modal a.gray {
1219
+ padding: 5px 15px;
1220
+ border-radius: 5px;
1221
+ background-color: gray;
1222
+ cursor: pointer;
1223
+ color: #fff;
1224
+ text-decoration: none;
1225
+ font-size: 16px;
1226
+ border: none;
1227
+ margin: 0 10px;
1228
+ position: relative;
1229
+ }
1230
+ .modal .mm__content {
1231
+ color: #525252;
1232
+ }
1233
+ .modal a.gray {
1234
+ padding: 5px 15px;
1235
+ border-radius: 5px;
1236
+ background-color: gray;
1237
+ cursor: pointer;
1238
+ color: #fff;
1239
+ text-decoration: none;
1240
+ font-size: 16px;
1241
+ border: none;
1242
+ margin: 0 10px;
1243
+ }
1244
+ .modal .upgrade__button .blues,
1245
+ .modal .unsaved__button .blues {
1246
+ text-transform: uppercase;
1247
+ flex-basis: 25%;
1248
+ }
1249
+ .modal a.blues:hover,
1250
+ .modal a.blues:hover {
1251
+ opacity: 0.75;
1252
+ background-color: #324ef8;
1253
+ border: none;
1254
+ }
1255
+ .mobile_wrap .modal-overlays {
1256
+ position: fixed;
1257
+ margin-left: -20px;
1258
+ right: 0;
1259
+ height: auto;
1260
+ width: auto;
1261
+ background: #000;
1262
+ will-change: opacity;
1263
+ opacity: 0.4;
1264
+ z-index: 998;
1265
+ top: -25%;
1266
+ left: 0;
1267
+ bottom: 0;
1268
+ display: none;
1269
+ }
1270
+ .mobile_wrap {
1271
+ overflow: hidden;
1272
+ width: 100%;
1273
+ }
1274
+
1275
+ #modal_form {
1276
+ display: none;
1277
+ position: fixed;
1278
+ top: 5%;
1279
+ right: 0;
1280
+ left: 0;
1281
+ width: 650px;
1282
+ margin: 0 auto;
1283
+ background-color: #4558fe;
1284
+ font-size: 18px;
1285
+ border-radius: 0.9em;
1286
+ -webkit-box-shadow: 0px 0px 5px -2px rgba(0, 0, 0, 0.75);
1287
+ box-shadow: 0px 0px 5px -2px rgba(0, 0, 0, 0.75);
1288
+ }
1289
+
1290
+ #modal_form .modal_form__wrapper {
1291
+ padding: 0.5em;
1292
+ }
1293
+
1294
+ #modal_form .modal_form__header {
1295
+ padding: 0 1.7em;
1296
+ color: #fff;
1297
+ }
1298
+
1299
+ #modal_form .modal_form__header .customization_button__image {
1300
+ background-size: contain;
1301
+ width: 45px;
1302
+ height: 45px;
1303
+ display: block;
1304
+ background-repeat: no-repeat;
1305
+ background-position: center;
1306
+ margin: 0 1em;
1307
+ }
1308
+
1309
+ #modal_form .modal_form__header .logo_header {
1310
+ display: -webkit-box;
1311
+ display: -ms-flexbox;
1312
+ display: flex;
1313
+ -webkit-box-pack: center;
1314
+ -ms-flex-pack: center;
1315
+ justify-content: center;
1316
+ -webkit-box-align: center;
1317
+ -ms-flex-align: center;
1318
+ align-items: center;
1319
+ color: #ffffff;
1320
+ font-size: 20px;
1321
+ font-weight: bold;
1322
+ line-height: 19px;
1323
+ }
1324
+
1325
+ #modal_form .modal_form__header .version_name__header {
1326
+ display: -webkit-box;
1327
+ display: -ms-flexbox;
1328
+ display: flex;
1329
+ -webkit-box-orient: vertical;
1330
+ -webkit-box-direction: normal;
1331
+ -ms-flex-direction: column;
1332
+ flex-direction: column;
1333
+ -webkit-box-pack: center;
1334
+ -ms-flex-pack: center;
1335
+ justify-content: center;
1336
+ -webkit-box-align: center;
1337
+ -ms-flex-align: center;
1338
+ align-items: center;
1339
+ margin-bottom: 1em;
1340
+ }
1341
+
1342
+ #modal_form .modal_form__header .version_name__header .version_header__text {
1343
+ color: #ffffff;
1344
+ font-size: 56px;
1345
+ font-weight: 800;
1346
+ line-height: 77px;
1347
+ }
1348
+
1349
+ #modal_form .modal_form__header .version_name__header .version_header__price {
1350
+ font-size: 32px;
1351
+ font-weight: 800;
1352
+ line-height: 43px;
1353
+ text-align: right;
1354
+ }
1355
+
1356
+ #modal_form
1357
+ .modal_form__header
1358
+ .version_name__header
1359
+ .version_header__price
1360
+ span {
1361
+ font-size: 24px;
1362
+ font-weight: bold;
1363
+ line-height: 32px;
1364
+ }
1365
+
1366
+ #modal_form .modal_form__header .header_variations {
1367
+ display: -webkit-box;
1368
+ display: -ms-flexbox;
1369
+ display: flex;
1370
+ }
1371
+
1372
+ #modal_form .modal_form__header .header_variations span {
1373
+ background-size: 15px;
1374
+ width: 15px;
1375
+ height: 15px;
1376
+ padding: 0.5em;
1377
+ background-repeat: no-repeat;
1378
+ background-position: center;
1379
+ }
1380
+
1381
+ #modal_form .modal_form__header .header_variations .variation_item {
1382
+ margin-right: 2em;
1383
+ color: #ffffff;
1384
+ font-size: 16px;
1385
+ font-weight: 600;
1386
+ line-height: 22px;
1387
+ }
1388
+
1389
+ #modal_form .modal_form__header .header_input {
1390
+ background-color: #fff;
1391
+ border-radius: 0.7em;
1392
+ padding: 0.7em 1em;
1393
+ display: -webkit-box;
1394
+ display: -ms-flexbox;
1395
+ display: flex;
1396
+ -webkit-box-align: center;
1397
+ -ms-flex-align: center;
1398
+ align-items: center;
1399
+ margin: 1em 0;
1400
+ }
1401
+
1402
+ #modal_form .modal_form__header .header_input .checkbox_image {
1403
+ background-size: 25px;
1404
+ width: 28px;
1405
+ height: 28px;
1406
+ padding: 0.5em;
1407
+ background-repeat: no-repeat;
1408
+ background-position: center;
1409
+ background-color: #5455fe;
1410
+ border-radius: 50%;
1411
+ }
1412
+
1413
+ #modal_form .modal_form__header .header_input .header_input__content {
1414
+ margin-left: 3em;
1415
+ }
1416
+
1417
+ #modal_form .modal_form__header .header_input .header_input__name {
1418
+ color: #525252;
1419
+ font-size: 20px;
1420
+ font-weight: bold;
1421
+ line-height: 27px;
1422
+ }
1423
+
1424
+ #modal_form .modal_form__header .header_input .header_input__date {
1425
+ color: #525252;
1426
+ font-size: 14px;
1427
+ line-height: 19px;
1428
+ }
1429
+
1430
+ #modal_form .form_row {
1431
+ display: -webkit-box;
1432
+ display: -ms-flexbox;
1433
+ display: flex;
1434
+ padding: 0.5em;
1435
+ }
1436
+
1437
+ #modal_form .form_input {
1438
+ -webkit-box-orient: vertical;
1439
+ -webkit-box-direction: normal;
1440
+ -ms-flex-direction: column;
1441
+ flex-direction: column;
1442
+ width: 100%;
1443
+ max-width: 100%;
1444
+ padding: 0 1.2em;
1445
+ color: #fff;
1446
+ }
1447
+
1448
+ #modal_form .form_input label {
1449
+ color: #ffffff;
1450
+ font-size: 16px;
1451
+ font-weight: 800;
1452
+ line-height: 22px;
1453
+ text-transform: uppercase;
1454
+ }
1455
+
1456
+ #modal_form .form_input input {
1457
+ padding: 0.8em 1.5em;
1458
+ border-radius: 0.7em;
1459
+ border: none;
1460
+ font-size: 18px;
1461
+ line-height: 20px;
1462
+ width: 100%;
1463
+ max-width: 100%;
1464
+ -webkit-box-sizing: border-box;
1465
+ box-sizing: border-box;
1466
+ }
1467
+
1468
+ #modal_form .form_input a {
1469
+ color: #ffffff;
1470
+ font-size: 14px;
1471
+ font-weight: bold;
1472
+ line-height: 19px;
1473
+ }
1474
+
1475
+ #modal_form .form_privacy {
1476
+ padding: 0.5em;
1477
+ }
1478
+
1479
+ #modal_form .form_privacy .form_checkbox {
1480
+ padding: 0 1.2em;
1481
+ }
1482
+
1483
+ #modal_form .form_checkbox {
1484
+ color: #ffffff;
1485
+ font-size: 14px;
1486
+ line-height: 19px;
1487
+ }
1488
+
1489
+ #modal_form .form_checkbox a {
1490
+ color: #ffffff;
1491
+ font-size: 14px;
1492
+ font-weight: bold;
1493
+ line-height: 19px;
1494
+ }
1495
+
1496
+ #modal_form .form_submit {
1497
+ display: -webkit-box;
1498
+ display: -ms-flexbox;
1499
+ display: flex;
1500
+ -webkit-box-pack: center;
1501
+ -ms-flex-pack: center;
1502
+ justify-content: center;
1503
+ }
1504
+
1505
+ #modal_form .form_submit a {
1506
+ color: #5456ff;
1507
+ font-size: 30px;
1508
+ font-weight: bold;
1509
+ line-height: 41px;
1510
+ background-color: #fff;
1511
+ padding: 0.5em 1.9em;
1512
+ text-decoration: none;
1513
+ display: inline-block;
1514
+ border-radius: 0.7em;
1515
+ }
1516
+ .setup_section table tbody tr:first-child th {
1517
+ font-weight: 800;
1518
+ letter-spacing: 0.2px;
1519
+ line-height: 30px;
1520
+ float: left;
1521
+ padding: 10px 0;
1522
+ font-size: 22px;
1523
+ font-weight: 800;
1524
+ }
1525
+ .tab-content .tab-content__wrapper .testchat {
1526
+ position: absolute;
1527
+ right: 0;
1528
+ background-color: #6071fb;
1529
+ color: #fff;
1530
+ border: none;
1531
+ box-shadow: none;
1532
+ width: 140px;
1533
+ text-align: center;
1534
+ font-family: "Open Sans", sans-serif;
1535
+ font-size: 14px;
1536
+ font-weight: 500;
1537
+ }
1538
+ .tab-content table th {
1539
+ font-family: "Open Sans", sans-serif;
1540
+ font-weight: bold;
1541
+ color: #525252;
1542
+ font-size: 14px;
1543
+ letter-spacing: 0.15px;
1544
+ line-height: 22px;
1545
+ padding: 0;
1546
+ text-transform: uppercase;
1547
+ }
1548
+ .tab-content label.gray {
1549
+ color: #949494;
1550
+ font-family: "Open Sans", sans-serif;
1551
+ font-size: 16px;
1552
+ line-height: 22px;
1553
+ padding: 10px 0;
1554
+ }
1555
+ .tab-content .form-table td p {
1556
+ font-family: "Open Sans", sans-serif;
1557
+ margin-bottom: 10px;
1558
+ margin-top: 0;
1559
+ font-size: 16px;
1560
+ }
1561
+ .tab-content table label {
1562
+ color: #525252;
1563
+ font-family: "Open Sans", sans-serif;
1564
+ font-size: 14px;
1565
+ letter-spacing: 0.13px;
1566
+ line-height: 19px;
1567
+ padding-bottom: 10px;
1568
+ }
1569
+ .tab-content .input-field {
1570
+ padding: 0;
1571
+ }
1572
+ .tab-content .as_state {
1573
+ display: flex;
1574
+ flex-direction: column;
1575
+ }
1576
+
1577
+ .tab-content .as h6 {
1578
+ font-size: 14px;
1579
+ font-weight: bold;
1580
+ line-height: 19px;
1581
+ text-transform: uppercase;
1582
+ }
1583
+ .tab-content .sp-replacer {
1584
+ margin-top: 20px;
1585
+ background: none;
1586
+ padding: 0;
1587
+ }
1588
+ .tab-content input[type="checkbox"] {
1589
+ width: auto;
1590
+ }
1591
+ .tab-content input[type="number"] {
1592
+ width: 30% !important;
1593
+ }
1594
+ .tab-content .sp-replacer,
1595
+ .sp-preview {
1596
+ width: 80px;
1597
+ height: 80px;
1598
+ border: none;
1599
+ }
1600
+ .tab-content .sp-dd {
1601
+ display: none;
1602
+ }
1603
+
1604
+ .customize_section table th,
1605
+ .customize_section table td {
1606
+ margin-bottom: 10px;
1607
+ }
1608
+ .options table td {
1609
+ margin-bottom: 15px;
1610
+ vertical-align: middle;
1611
+ padding: 0;
1612
+ width: 80%;
1613
+ }
1614
+ .wrap__pro {
1615
+ position: relative;
1616
+ }
1617
+ .customize_section table th {
1618
+ font-family: "Open Sans", sans-serif;
1619
+ font-weight: 800;
1620
+ color: #525252;
1621
+ font-size: 16px;
1622
+ letter-spacing: 0.15px;
1623
+ line-height: 22px;
1624
+ padding: 0;
1625
+ text-transform: uppercase;
1626
+ }
1627
+
1628
+ .setup_section th,
1629
+ .setup_section td {
1630
+ display: block;
1631
+ width: auto;
1632
+ }
1633
+ .customize_section th,
1634
+ .customize_section td {
1635
+ display: block !important;
1636
+ width: auto;
1637
+ }
1638
+
1639
+ .options .contact_tab table th.sortable a,
1640
+ .options .contact_tab table th.sorted a,
1641
+ .options .contact_tab table th {
1642
+ display: inline-block;
1643
+ padding: 0;
1644
+ color: #a9a5a5;
1645
+ height: 100%;
1646
+ text-transform: capitalize;
1647
+ }
1648
+ .options .contact_tab table th.sortable a:focus,
1649
+ .options .contact_tab table th.sorted a:focus {
1650
+ box-shadow: none;
1651
+ }
1652
+
1653
+ .options .contact_tab table,
1654
+ .options .contact_tab table tbody {
1655
+ display: block;
1656
+ }
1657
+ .options .contact_tab table tr:first-child {
1658
+ padding-bottom: 15px;
1659
+ margin-bottom: 0;
1660
+ box-shadow: none;
1661
+ }
1662
+ .options .contact_tab table tr:hover:not(:first-child) {
1663
+ cursor: pointer;
1664
+ background-color: #f9fafb;
1665
+ }
1666
+ .download__wrap .pro_button__content {
1667
+ text-align: center;
1668
+ }
1669
+ .options .contact_tab table tr {
1670
+ margin-bottom: 1em;
1671
+ display: grid;
1672
+ grid-column: 1 / -1;
1673
+ grid-template-columns: 10% 25% 10% 10% 12% 23% 10%;
1674
+ padding: 1rem 25px;
1675
+ box-shadow: 0 0 4px 3px rgba(242, 239, 237, 1);
1676
+ vertical-align: middle;
1677
+ -ms-flex-align: center;
1678
+ align-items: center;
1679
+ }
1680
+ .options .contact_tab table td {
1681
+ margin: 0;
1682
+ padding: 0;
1683
+ width: 100%;
1684
+ vertical-align: middle;
1685
+ font-family: "Open Sans", sans-serif;
1686
+ font-size: 14px;
1687
+ font-weight: bold;
1688
+ word-break: break-all;
1689
+ }
1690
+
1691
+ .options .contact_tab table td img {
1692
+ vertical-align: middle;
1693
+ border-radius: 50%;
1694
+ min-width: 3.5rem;
1695
+ }
1696
+ .options .contact_tab table td.gender {
1697
+ text-transform: capitalize;
1698
+ }
1699
+ .options .contact_tab table {
1700
+ border: none;
1701
+ }
1702
+ .contact_tab {
1703
+ padding: 20px 20px 40px 20px;
1704
+ }
1705
+ .contact_tab .table__wrap .displaying-num {
1706
+ display: none;
1707
+ }
1708
+ .contact_tab .table__wrap {
1709
+ padding-bottom: 5rem;
1710
+ }
1711
+ .tab-content .contact_head__wrap h4,
1712
+ .tab-content .contact_head__wrap p {
1713
+ display: inline-block;
1714
+ font-size: 18px;
1715
+ }
1716
+ .contact_head__wrap {
1717
+ display: flex;
1718
+ justify-content: space-between;
1719
+ align-items: center;
1720
+ margin-bottom: 20px;
1721
+ }
1722
+
1723
+ .contact_head__wrap a {
1724
+ color: #324ef8;
1725
+ font-family: "Open Sans", sans-serif;
1726
+ font-size: 16px;
1727
+ font-weight: 600;
1728
+ line-height: 22px;
1729
+ box-shadow: 0 0 10px #cfcfcf;
1730
+ border-radius: 9px;
1731
+ padding: 10px;
1732
+ }
1733
+ .contact_head__wrap a:active {
1734
+ box-shadow: none;
1735
+ }
1736
+ .contact_head__wrap a > i {
1737
+ color: #324ef8;
1738
+ margin-right: 8px;
1739
+ }
1740
+ .contact_head__wrap .download__wrap {
1741
+ position: relative;
1742
+ width: 71%;
1743
+ height: 100%;
1744
+ text-align: right;
1745
+ }
1746
+ .contact_head__wrap .pro_button__wrapper {
1747
+ display: flex;
1748
+ align-items: center;
1749
+ top: -35px;
1750
+ width: 100%;
1751
+ height: 100px;
1752
+ left: 0;
1753
+ position: absolute;
1754
+ bottom: 0;
1755
+ padding: 0;
1756
+ }
1757
+
1758
+ .contact_head__wrap .pro_button__wrapper .pro_button__content p {
1759
+ margin-bottom: 5px;
1760
+ }
1761
+
1762
+ .contact_head__wrap .pro_button__wrapper a {
1763
+ padding: 0.5em 1em;
1764
+ }
1765
+
1766
+ .contact_head__wrap .pro_button__wrapper a {
1767
+ box-shadow: none;
1768
+ }
1769
+
1770
+ .tab-content .contact_head__wrap h4 {
1771
+ margin: 0 10px 0 0;
1772
+ color: #525252;
1773
+ font-family: "Open Sans", sans-serif;
1774
+ font-size: 36px;
1775
+ font-weight: bold;
1776
+ }
1777
+ .table__wrap {
1778
+ position: relative;
1779
+ }
1780
+
1781
+ .connected-page .connect_check {
1782
+ display: inline-block;
1783
+ margin: 10px 0 0 0;
1784
+ padding: 1px 10px;
1785
+ background-color: green;
1786
+ border-radius: 5px;
1787
+ color: #fff;
1788
+ text-decoration: none;
1789
+ text-transform: uppercase;
1790
+ font-size: 13px;
1791
+ height: auto;
1792
+ border: none;
1793
+ width: fit-content;
1794
+ }
1795
+ .connected-page .connect_check:hover {
1796
+ opacity: 0.75;
1797
+ border: none;
1798
+ }
1799
+ .connect_check .fa-check {
1800
+ margin-right: 5px;
1801
+ }
1802
+ .page_name {
1803
+ color: #525252;
1804
+ font-family: "Open Sans", sans-serif;
1805
+ font-size: 26px;
1806
+ font-weight: bold;
1807
+ letter-spacing: 0.24px;
1808
+ line-height: 32px;
1809
+ margin: 0;
1810
+ vertical-align: middle;
1811
+ }
1812
+ #contacts_modal {
1813
+ width: 65%;
1814
+ -webkit-user-drag: none;
1815
+ user-drag: none;
1816
+ -moz-user-drag: none;
1817
+ -ms-user-drag: none;
1818
+ position: absolute;
1819
+ padding: 1em 2em;
1820
+ color: #fff;
1821
+ top: 20%;
1822
+ left: 0;
1823
+ right: 0;
1824
+ margin: 0 auto;
1825
+ background: -webkit-gradient(
1826
+ linear,
1827
+ left top,
1828
+ right top,
1829
+ from(#3d5afe),
1830
+ to(#7c4dff)
1831
+ );
1832
+ background: linear-gradient(to right, #3d5afe 0%, #7c4dff 100%);
1833
+ border-radius: 18px;
1834
+ -webkit-box-shadow: 0px 0px 5px 1px rgba(0, 0, 0, 0.75);
1835
+ box-shadow: 0px 0px 5px 1px rgba(0, 0, 0, 0.75);
1836
+ }
1837
+
1838
+ #contacts_modal .contact_modal__wrapper {
1839
+ display: -webkit-box;
1840
+ display: -ms-flexbox;
1841
+ display: flex;
1842
+ -webkit-box-pack: justify;
1843
+ -ms-flex-pack: justify;
1844
+ justify-content: space-between;
1845
+ -webkit-box-align: center;
1846
+ -ms-flex-align: center;
1847
+ align-items: center;
1848
+ }
1849
+
1850
+ #contacts_modal .contact_modal__content {
1851
+ display: -webkit-box;
1852
+ display: -ms-flexbox;
1853
+ display: flex;
1854
+ -webkit-box-align: center;
1855
+ -ms-flex-align: center;
1856
+ align-items: center;
1857
+ }
1858
+ #contacts_modal .contact_modal__content p {
1859
+ color: #ffffff;
1860
+ font-size: 22px;
1861
+ font-weight: bold;
1862
+ line-height: 30px;
1863
+ }
1864
+ #contacts_modal .contact_modal__content .logo_name {
1865
+ color: #ffffff;
1866
+ font-family: "Open Sans", sans-serif;
1867
+ font-size: 20px;
1868
+ font-weight: bold;
1869
+ line-height: 19px;
1870
+ }
1871
+
1872
+ #contacts_modal .contact_modal__button {
1873
+ background-color: #fff;
1874
+ padding: 0.7em 1.5em;
1875
+ font-size: 18px;
1876
+ font-weight: 800;
1877
+ line-height: 24px;
1878
+ text-transform: uppercase;
1879
+ border-radius: 9px;
1880
+ }
1881
+
1882
+ #contacts_modal .contact_modal__button a {
1883
+ text-decoration: none;
1884
+ }
1885
+
1886
+ #contacts_modal .customization_button__image {
1887
+ background-image: url("../img/monkey_head.png");
1888
+ background-size: contain;
1889
+ width: 45px;
1890
+ height: 45px;
1891
+ background-repeat: no-repeat;
1892
+ background-position: center;
1893
+ margin: 0 0.3em;
1894
+ display: inline-block;
1895
+ }
1896
+ .connected-page-bottom .active-page-info {
1897
+ display: block;
1898
+ }
1899
+ .log_out__wrapper,
1900
+ .disconnect_page__wrapper {
1901
+ margin-top: 10px;
1902
+ display: flex;
1903
+ justify-content: space-between;
1904
+ align-items: center;
1905
+ }
1906
+ .log_out__wrapper h5 {
1907
+ margin: 0;
1908
+ padding: 0;
1909
+ }
1910
+ .log_out__wrapper .logout-mobilemonkey {
1911
+ margin: 0;
1912
+ }
1913
+ .disconnect_page__wrapper {
1914
+ padding: 0 20px;
1915
+ background-color: #25252525;
1916
+ }
1917
+ .disconnect_page__wrapper p b {
1918
+ color: green;
1919
+ }
1920
+ .disconnect_page__wrapper p {
1921
+ color: #000;
1922
+ }
1923
+ .mm_only-state {
1924
+ background-color: #000000;
1925
+ }
1926
+ .contact_modal__button div {
1927
+ color: #5f52fe;
1928
+ }
1929
+ .mobilemonkey-settings h5 {
1930
+ color: #525252;
1931
+ font-family: "Open Sans", sans-serif;
1932
+ font-size: 36px;
1933
+ font-weight: bold;
1934
+ letter-spacing: 0.33px;
1935
+ line-height: 49px;
1936
+ margin: 20px 0 0 0;
1937
+ }
1938
+ .mobilemonkey-settings p.get_start {
1939
+ color: #525252;
1940
+ font-family: "Open Sans", sans-serif;
1941
+ font-size: 24px;
1942
+ letter-spacing: 0.22px;
1943
+ line-height: 33px;
1944
+ margin: 0 0 30px 0;
1945
+ }
1946
+ .mobilemonkey-settings p {
1947
+ margin-top: 15px;
1948
+ }
1949
+ .tab-content .form-table td .welcome_text {
1950
+ margin: 5px 10px 20px 0;
1951
+ }
1952
+ .tab-content .form-table td .head_text {
1953
+ font-size: 22px;
1954
+ font-weight: 800;
1955
+ line-height: 30px;
1956
+ font-family: "Open Sans", sans-serif;
1957
+ letter-spacing: 0.15px;
1958
+ color: #525252;
1959
+ text-transform: uppercase;
1960
+ }
1961
+
1962
+ .tab-content .form-table td .qual_p {
1963
+ margin: 20px 0 30px 0;
1964
+ }
1965
+
1966
+ @media (max-width: 575.98px) {
1967
+ #to_pro,
1968
+ #unsaved_option {
1969
+ width: 90%;
1970
+ }
1971
+ .service-content {
1972
+ text-align: center;
1973
+ }
1974
+ .service-content iframe {
1975
+ width: 250px !important;
1976
+ }
1977
+ .contact_tab {
1978
+ padding-bottom: 100px;
1979
+ }
1980
+ .customization_button,
1981
+ #contacts_modal .contact_modal__wrapper {
1982
+ flex-direction: column;
1983
+ }
1984
+ .customization_button .customization_button__action,
1985
+ #contacts_modal .contact_modal__button {
1986
+ margin-top: 20px;
1987
+ }
1988
+ #contacts_modal {
1989
+ width: 100%;
1990
+ }
1991
+ #contacts_modal .contact_modal__content {
1992
+ flex-direction: column;
1993
+ text-align: center;
1994
+ }
1995
+ .contact_tab .table__wrap {
1996
+ padding-bottom: 10rem;
1997
+ }
1998
+ .customization_button__wrapper
1999
+ .customization_button
2000
+ .customization_button__content {
2001
+ flex-direction: column;
2002
+ text-align: center;
2003
+ }
2004
+ }
2005
+
2006
+ @media (min-width: 576px) and (max-width: 767.98px) {
2007
+ .contact_tab {
2008
+ padding-bottom: 100px;
2009
+ }
2010
+ .customization_button,
2011
+ #contacts_modal .contact_modal__wrapper {
2012
+ flex-direction: column;
2013
+ }
2014
+ .customization_button .customization_button__action,
2015
+ #contacts_modal .contact_modal__button {
2016
+ margin-top: 20px;
2017
+ }
2018
+ #contacts_modal {
2019
+ width: 100%;
2020
+ }
2021
+ .download__wrap .pro_button__wrapper {
2022
+ padding: 0;
2023
+ }
2024
+ .download__wrap .pro_button__wrapper .pro_button {
2025
+ flex-direction: column;
2026
+ text-align: center;
2027
+ }
2028
+ }
2029
+
2030
+ @media (min-width: 768px) and (max-width: 991.98px) {
2031
+ .contact_tab {
2032
+ padding-bottom: 100px;
2033
+ }
2034
+ .customization_button,
2035
+ #contacts_modal .contact_modal__wrapper {
2036
+ flex-direction: column;
2037
+ }
2038
+ .customization_button .customization_button__action,
2039
+ #contacts_modal .contact_modal__button {
2040
+ margin-top: 20px;
2041
+ }
2042
+ .download__wrap .pro_button__wrapper {
2043
+ padding: 0;
2044
+ }
2045
+ .download__wrap .pro_button__wrapper .pro_button {
2046
+ flex-direction: column;
2047
+ text-align: center;
2048
+ }
2049
+ }
2050
+
2051
+ @media (min-width: 992px) and (max-width: 1199.98px) {
2052
+ .customization_button,
2053
+ #contacts_modal .contact_modal__wrapper {
2054
+ flex-direction: column;
2055
+ }
2056
+ .download__wrap .pro_button__wrapper {
2057
+ padding: 0;
2058
+ }
2059
+ .download__wrap .pro_button__wrapper .pro_button {
2060
+ flex-direction: column;
2061
+ text-align: center;
2062
+ }
2063
+ }
2064
+
2065
+ @media (min-width: 1800px) {
2066
+ .main-question {
2067
+ width: 800px !important;
2068
+ }
2069
+ }
2070
+
2071
+ /*PRO modal*/
2072
+
2073
+ #pro_option {
2074
+ border-radius: 0;
2075
+ border: 0;
2076
+ background-color: transparent;
2077
+ top: 10%;
2078
+ max-height: 100%;
2079
+ }
2080
+ #pro_option .modal_close i {
2081
+ color: #fff;
2082
+ font-size: 20px;
2083
+ }
2084
+ .billing-modal-header {
2085
+ width: 100%;
2086
+ display: flex;
2087
+ background-color: #4f57ff;
2088
+ align-items: center;
2089
+ flex-direction: column;
2090
+ color: #fff;
2091
+ border-radius: 10px 10px 0 0;
2092
+ }
2093
+ .billing-modal-header__plan-name {
2094
+ font-size: 43px;
2095
+ font-weight: 700;
2096
+ text-transform: uppercase;
2097
+ line-height: 45px;
2098
+ text-align: center;
2099
+ }
2100
+ .billing-modal-header__plan-price {
2101
+ text-align: center;
2102
+ }
2103
+ .billing-modal-header__plan-price p {
2104
+ font-size: 23px;
2105
+ margin: 0;
2106
+ text-align: center;
2107
+ font-weight: 200;
2108
+ }
2109
+ .billing-modal-header__plan-price .discount .disc_cross b {
2110
+ font-size: 1.4em;
2111
+ }
2112
+ .billing-modal-header__plan-price .discount .disc_cross {
2113
+ margin-right: 20px;
2114
+ position: relative;
2115
+ color: #fff;
2116
+ font-size: 20px;
2117
+ }
2118
+ .billing-modal-header__plan-price .discount {
2119
+ display: flex;
2120
+ margin-top: 5px;
2121
+ align-items: baseline;
2122
+ }
2123
+ .billing-modal-header__plan-price .discount p {
2124
+ color: #2ff2e1;
2125
+ text-decoration: none;
2126
+ font-size: 20px;
2127
+ }
2128
+ .modal .billing-modal-header__plan-price h4 {
2129
+ font-weight: 600;
2130
+ text-decoration: none;
2131
+ color: #ff7140;
2132
+ line-height: 18px;
2133
+ margin: 15px 0 0;
2134
+ }
2135
+ .billing-modal-header__plan-price p.billed {
2136
+ text-decoration: none;
2137
+ color: #9095ff;
2138
+ font-weight: 200;
2139
+ font-size: 1.6em;
2140
+ }
2141
+
2142
+ .billing-modal-header__plan-price .discount .disc_cross:before {
2143
+ content: "";
2144
+ border-bottom: 2px solid #ff8761;
2145
+ position: absolute;
2146
+ height: 10px;
2147
+ width: 100%;
2148
+ bottom: 18px;
2149
+ }
2150
+ .billing-modal-header__plan-price h4 b {
2151
+ font-weight: 200;
2152
+ font-size: 0.7em;
2153
+ }
2154
+ p.billed {
2155
+ color: #9095ff;
2156
+ font-weight: 200;
2157
+ font-size: 0.6em;
2158
+ }
2159
+ .billing-modal-header__logo div {
2160
+ background-image: url("../img/monkey_head.png");
2161
+ background-size: contain;
2162
+ width: 35px;
2163
+ height: 35px;
2164
+ display: block;
2165
+ background-repeat: no-repeat;
2166
+ background-position: center;
2167
+ margin: 0 0.3em;
2168
+ }
2169
+
2170
+ .billing-modal-header__logo {
2171
+ margin: 1rem 0;
2172
+ display: flex;
2173
+ align-items: center;
2174
+ }
2175
+
2176
+ .billing-modal-header__logo span {
2177
+ color: #fff;
2178
+ font-size: 18px;
2179
+ font-weight: bold;
2180
+ }
2181
+
2182
+ .billing-page-details {
2183
+ width: 90%;
2184
+ background-color: #fff;
2185
+ display: flex;
2186
+ padding: 10px 15px;
2187
+ align-items: center;
2188
+ justify-content: space-between;
2189
+ margin-top: 10px;
2190
+ border-radius: 12px;
2191
+ margin-bottom: 1rem;
2192
+ }
2193
+
2194
+ .billing-page-details__image {
2195
+ width: 50px;
2196
+ height: 50px;
2197
+ border-radius: 100%;
2198
+ background-color: grey;
2199
+ }
2200
+
2201
+ .billing-page-details__name {
2202
+ font-weight: 800;
2203
+ font-size: 20px;
2204
+ color: #525252;
2205
+ margin: 5px 0;
2206
+ }
2207
+
2208
+ .billing-page-details__middle {
2209
+ align-self: flex-start;
2210
+ margin-left: 15px;
2211
+ }
2212
+
2213
+ .billing-page-details__check-circle {
2214
+ background-color: #de8f08;
2215
+ border-radius: 100%;
2216
+ width: 40px;
2217
+ height: 40px;
2218
+ display: flex;
2219
+ justify-content: center;
2220
+ align-items: center;
2221
+ }
2222
+
2223
+ .billing-page-details__left-section {
2224
+ display: flex;
2225
+ align-items: center;
2226
+ }
2227
+
2228
+ .billing-page-details__sends-text {
2229
+ color: #de8f08;
2230
+ font-size: 16px;
2231
+ font-weight: 600;
2232
+ }
2233
+
2234
+ .billing-modal {
2235
+ width: 525px;
2236
+ color: #525252;
2237
+ display: flex;
2238
+ align-items: center;
2239
+ flex-direction: column;
2240
+ padding: 0;
2241
+ overflow: hidden;
2242
+ }
2243
+ .checkout-form {
2244
+ display: flex;
2245
+ flex-direction: column;
2246
+ align-items: center;
2247
+ font-family: "Open Sans", sans-serif;
2248
+ }
2249
+
2250
+ .checkout-form__name-fields {
2251
+ width: 100%;
2252
+ display: flex;
2253
+ flex-direction: row;
2254
+ justify-content: space-between;
2255
+ }
2256
+
2257
+ .billing-modal-body {
2258
+ padding: 30px 30px 0 30px;
2259
+ width: 100%;
2260
+ background-color: #fff;
2261
+ }
2262
+ .billing_info_wrap {
2263
+ display: flex;
2264
+ justify-content: center;
2265
+ }
2266
+ .billing-modal-body .name__wrap,
2267
+ .billing-modal-body .card__wrap {
2268
+ display: flex;
2269
+ justify-content: space-between;
2270
+ }
2271
+ .name__wrap .firstname__wrap,
2272
+ .name__wrap .lastname__wrap {
2273
+ width: 45%;
2274
+ }
2275
+ .billing-modal-body label {
2276
+ font-size: 14px;
2277
+ font-weight: bold;
2278
+ font-family: "Open Sans", sans-serif;
2279
+ color: #666;
2280
+ }
2281
+ .checkout-form
2282
+ .billing-modal-body
2283
+ input[type="email"]:not(.browser-default):focus:not([readonly]),
2284
+ .checkout-form
2285
+ .billing-modal-body
2286
+ input[type="text"]:not(.browser-default):focus:not([readonly]),
2287
+ .checkout-form .billing-modal-body select:focus {
2288
+ border-bottom: 1px solid #dfdfdf;
2289
+ box-shadow: none;
2290
+ }
2291
+ .checkout-form .billing-modal-body input[type="email"],
2292
+ .checkout-form .billing-modal-body input[type="text"],
2293
+ .checkout-form .billing-modal-body select {
2294
+ padding: 20px;
2295
+ width: 100%;
2296
+ border: 1px solid #dfdfdf;
2297
+ margin: 0.5em 0;
2298
+ line-height: 20px;
2299
+ border-radius: 5px;
2300
+ font-size: 16px;
2301
+ -webkit-box-sizing: border-box;
2302
+ box-sizing: border-box;
2303
+ }
2304
+ .checkout-form .billing-modal-body select {
2305
+ padding: 0 20px;
2306
+ height: 45px;
2307
+ }
2308
+ .billing-modal-footer {
2309
+ font-family: "Open Sans", sans-serif;
2310
+ border-radius: 0 0 10px 10px;
2311
+ background-color: #fff;
2312
+ width: 100%;
2313
+ padding: 5px 30px 25px 30px;
2314
+ display: flex;
2315
+ flex-direction: column;
2316
+ }
2317
+ .billing-modal-body hr {
2318
+ border-top: 1px solid #cfcfcf;
2319
+ margin: 15px 0;
2320
+ }
2321
+ .more_info {
2322
+ margin: 15px 0 0 0;
2323
+ }
2324
+ .billing-modal-footer input[type="checkbox"] {
2325
+ background: #999;
2326
+ }
2327
+ .billing-modal-footer input[type="checkbox"]:before {
2328
+ color: #fff;
2329
+ }
2330
+ .billing-modal-footer .term__wrap {
2331
+ margin: 10px 0;
2332
+ }
2333
+
2334
+ .modal a.oranges,
2335
+ .modal button.oranges {
2336
+ cursor: pointer;
2337
+ padding: 13px 25px;
2338
+ background-color: RGB(236, 182, 83);
2339
+ border-radius: 10px;
2340
+ color: #fff;
2341
+ text-decoration: none;
2342
+ font-size: 20px;
2343
+ font-family: "Open Sans", sans-serif;
2344
+ font-weight: 700;
2345
+ border: none;
2346
+ margin: 0 10px;
2347
+ position: relative;
2348
+ align-self: center;
2349
+ }
2350
+ .billing-page-details__check-circle i {
2351
+ font-size: 28px;
2352
+ }
2353
+ .recurly-hosted-field {
2354
+ height: 3.5rem;
2355
+ margin-top: 0;
2356
+ }
2357
+
2358
+ .card__wrap input[type="text"]:not(.browser-default) {
2359
+ border-radius: 0;
2360
+ border-right: 0;
2361
+ border-left: 0;
2362
+ }
2363
+
2364
+ .card__wrap #card_number {
2365
+ width: 100%;
2366
+ }
2367
+ .terms-label a {
2368
+ color: #525252;
2369
+ font-weight: bold;
2370
+ }
2371
+ #pro_option {
2372
+ width: 640px;
2373
+ }
2374
+
2375
+ .subscribe__wrap .page_name__wrap h2.subscribe_page_name {
2376
+ margin: 0;
2377
+ font-size: 2.5rem;
2378
+ font-family: "Open Sans", sans-serif;
2379
+ }
2380
+ .subscribe__wrap .page_name__wrap span.pro {
2381
+ border-radius: 5px;
2382
+ width: auto;
2383
+ height: auto;
2384
+ line-height: 22px;
2385
+ align-self: center;
2386
+ font-size: 1.2rem;
2387
+ padding: 7px;
2388
+ }
2389
+ .subscribe_connect p {
2390
+ color: #888;
2391
+ font-size: 15px;
2392
+ }
2393
+ .page_info__wrap {
2394
+ border: 1px solid #efefef;
2395
+ padding: 20px 35px 30px;
2396
+ border-radius: 10px;
2397
+ display: flex;
2398
+ justify-content: space-between;
2399
+ }
2400
+
2401
+ .percentage-bar__body-wrapper {
2402
+ display: -webkit-box;
2403
+ display: -ms-flexbox;
2404
+ display: flex;
2405
+ -webkit-box-orient: horizontal;
2406
+ -webkit-box-direction: normal;
2407
+ -ms-flex-direction: column;
2408
+ flex-direction: column;
2409
+ -webkit-box-align: center;
2410
+ -ms-flex-align: center;
2411
+ align-items: center;
2412
+ width: 80%;
2413
+ margin-top: 10px;
2414
+ }
2415
+ .percentage-bar__card-used-number,
2416
+ .percentage-bar__card-max-number {
2417
+ font-weight: 800;
2418
+ font-size: 16px;
2419
+ margin-right: -20px;
2420
+ }
2421
+ .number__wrap {
2422
+ display: flex;
2423
+ flex-direction: row;
2424
+ justify-content: space-between;
2425
+ width: 100%;
2426
+ }
2427
+ .percentage-bar__bar {
2428
+ height: 9px;
2429
+ }
2430
+ .percentage-bar__bar {
2431
+ position: relative;
2432
+ background-color: #cbcbcb;
2433
+ width: 100%;
2434
+ height: 12px;
2435
+ border-radius: 10px;
2436
+ overflow: hidden;
2437
+ }
2438
+ .percentage-bar__used-percentage {
2439
+ height: 9px;
2440
+ }
2441
+ .percentage-bar__used-percentage {
2442
+ position: absolute;
2443
+ left: 0;
2444
+ background-color: #ff943f;
2445
+ height: 12px;
2446
+ border-radius: 10px;
2447
+ }
2448
+ .message_sent__wrap label {
2449
+ font-size: 0.9rem;
2450
+ text-transform: uppercase;
2451
+ color: #555;
2452
+ font-weight: bold;
2453
+ }
2454
+ .message_sent__wrap {
2455
+ margin-top: 2rem;
2456
+ }
2457
+ .button_cancel,
2458
+ .button_edit {
2459
+ padding: 5px 15px;
2460
+ border-radius: 5px;
2461
+ background-color: gray;
2462
+ cursor: pointer;
2463
+ color: #fff;
2464
+ text-decoration: none;
2465
+ font-size: 16px;
2466
+ border: none;
2467
+ margin: 0 10px;
2468
+ }
2469
+ a.button_cancel:hover,
2470
+ a.button_cancel:focus,
2471
+ a.button_edit:focus,
2472
+ a.button_edit:hover {
2473
+ color: #fff;
2474
+ }
2475
+ .button_go {
2476
+ margin-top: 20px;
2477
+ height: auto;
2478
+ background-color: darkgreen;
2479
+ padding: 10px 15px;
2480
+ border: 1px solid #000;
2481
+ color: #fff;
2482
+ }
2483
+ .button_go:hover,
2484
+ .button_go:focus {
2485
+ color: #fff;
2486
+ }
2487
+ .invoice_info_wrap a {
2488
+ text-decoration: underline;
2489
+ margin-right: 25px;
2490
+ }
2491
+ .subscribe_info__wrap,
2492
+ .invoice_info_wrap {
2493
+ display: flex;
2494
+ justify-content: space-between;
2495
+ }
2496
+ .button__wrap {
2497
+ align-self: center;
2498
+ }
2499
+ .subscribe_info__wrap {
2500
+ padding: 0 0 20px 0;
2501
+ }
2502
+ .button_update {
2503
+ background-color: #324ef8;
2504
+ height: auto;
2505
+ padding: 12px 20px;
2506
+ border-radius: 4px;
2507
+ color: #fff;
2508
+ font-size: 18px;
2509
+ }
2510
+ .button_update:focus,
2511
+ .button_update:hover {
2512
+ color: #fff;
2513
+ }
2514
+ .payment_info {
2515
+ background-color: #dde3fe;
2516
+ border-radius: 14px;
2517
+ width: 50%;
2518
+ display: flex;
2519
+ flex-direction: column;
2520
+ padding: 10px 24px;
2521
+ margin-bottom: 20px;
2522
+ }
2523
+ .billed_with {
2524
+ color: #adb0b9;
2525
+ }
2526
+ #errors {
2527
+ color: red;
2528
+ text-align: center;
2529
+ height: 50px;
2530
+ background-color: #1111;
2531
+ border-radius: 14px;
2532
+ width: 50%;
2533
+ display: flex;
2534
+ align-self: center;
2535
+ justify-content: center;
2536
+ align-items: center;
2537
+ margin-bottom: 30px;
2538
+ display: none;
2539
+ }
2540
+ .row .col.s12 .questions-wrapper {
2541
+ width: 100%;
2542
+ margin: 0 auto;
2543
+ padding: 0;
2544
+ }
2545
+ .question-block__wrapper {
2546
+ float: left;
2547
+ width: 100%;
2548
+ box-shadow: 0px 0px 9px -3px rgba(0, 0, 0, 0.75);
2549
+ border-radius: 9px;
2550
+ margin: 0 0 20px auto;
2551
+ }
2552
+ .question-button__add,
2553
+ .qa-button__add {
2554
+ cursor: pointer;
2555
+ position: relative;
2556
+ margin: 1rem 0 3rem 0;
2557
+ display: inline-block;
2558
+ width: 100%;
2559
+ }
2560
+ .qa-button__add .pro_button__wrapper {
2561
+ top: -15px;
2562
+ }
2563
+ .question-block__header {
2564
+ display: flex;
2565
+ justify-content: space-between;
2566
+ padding: 10px 20px;
2567
+ border-bottom: 1px solid #e4e4e4;
2568
+ align-items: center;
2569
+ }
2570
+ .question-block__header .header__title {
2571
+ display: flex;
2572
+ flex-direction: column;
2573
+ text-align: center;
2574
+ }
2575
+ .question-block_content .question-input__wrapper {
2576
+ padding: 0;
2577
+ }
2578
+ .question-block_content {
2579
+ display: flex;
2580
+ flex-direction: column;
2581
+ position: relative;
2582
+ }
2583
+ .question-input__wrapper,
2584
+ .answer-input__wrapper {
2585
+ background-color: #e5e5e5;
2586
+ padding: 20px 20px 0 20px;
2587
+ border-radius: 9px;
2588
+ }
2589
+ .question-input__wrapper {
2590
+ margin: 10px 10px 10px 55px;
2591
+ }
2592
+ .question-input__item
2593
+ input[type="text"]:not(.browser-default):focus:not([readonly]),
2594
+ .answer-input__item
2595
+ input[type="text"]:not(.browser-default):focus:not([readonly]) {
2596
+ border: none;
2597
+ box-shadow: none;
2598
+ }
2599
+ .answer-input__wrapper {
2600
+ box-shadow: 0 0 8px -1px rgba(82, 82, 82, 1);
2601
+ z-index: 9;
2602
+ }
2603
+ .answer-input__wrapper
2604
+ .answer-input__item
2605
+ input[type="text"]:not(.browser-default) {
2606
+ margin: 10px 10px 10px 0;
2607
+ width: 100%;
2608
+ }
2609
+ .question-input__item input[type="text"]:not(.browser-default),
2610
+ .answer-input__item input[type="text"]:not(.browser-default) {
2611
+ margin: 10px 20px;
2612
+ box-sizing: border-box;
2613
+ padding: 10px 25px;
2614
+ width: calc(100% - 40px);
2615
+ border: none;
2616
+ border-radius: 9px;
2617
+ background: #ffffff;
2618
+ }
2619
+ .answer-input__item {
2620
+ display: inline-block;
2621
+ }
2622
+ .tab-content .form-table td .answer-input__item p {
2623
+ display: inline-block;
2624
+ color: #ffffff;
2625
+ font-family: "Open Sans", sans-serif;
2626
+ font-size: 13px;
2627
+ line-height: 18px;
2628
+ }
2629
+ .question_text {
2630
+ padding: 15px 25px;
2631
+ cursor: pointer;
2632
+ }
2633
+
2634
+ .question-input__state {
2635
+ color: #525252;
2636
+ }
2637
+
2638
+ .answer-input__wrapper .answer-input__state {
2639
+ padding: 10px 0 10px 20px;
2640
+ color: #fff;
2641
+ }
2642
+ .tab-content .answer-input__item input[type="checkbox"] {
2643
+ background: transparent;
2644
+ border: 2px solid #fff;
2645
+ height: 20px;
2646
+ width: 20px;
2647
+ border-radius: 3px;
2648
+ }
2649
+ .tab-content .answer-input__item input[type="checkbox"]:checked:before {
2650
+ margin: -2px 0 0 -3px;
2651
+ color: #fff;
2652
+ }
2653
+ .question_cancel,
2654
+ .answer_cancel {
2655
+ font-size: 14px;
2656
+ font-weight: 400;
2657
+ cursor: pointer;
2658
+ }
2659
+
2660
+ .question-input__state,
2661
+ .answer-input__state {
2662
+ display: flex;
2663
+ justify-content: flex-end;
2664
+ padding: 10px 20px;
2665
+ font-family: "Open Sans", sans-serif;
2666
+ font-size: 16px;
2667
+ font-weight: 800;
2668
+ line-height: 22px;
2669
+ cursor: pointer;
2670
+ }
2671
+
2672
+ .question-input__state span,
2673
+ .answer-input__state span {
2674
+ margin-left: 10px;
2675
+ }
2676
+ .answer-input__button {
2677
+ margin: 0 0 10px 20px;
2678
+ display: flex;
2679
+ flex-wrap: wrap;
2680
+ max-width: 70%;
2681
+ width: 70%;
2682
+ word-break: break-all;
2683
+ }
2684
+ .answer__bin,
2685
+ .qa__bin {
2686
+ width: 25px;
2687
+ min-width: 25px;
2688
+ height: 25px;
2689
+ background-color: #e4e4e4;
2690
+ color: #9e9e9e;
2691
+ text-align: center;
2692
+ line-height: 25px;
2693
+ border-radius: 50%;
2694
+ margin-left: 5px;
2695
+ position: relative;
2696
+ }
2697
+ .main-question {
2698
+ padding: 5px;
2699
+ }
2700
+ .answer-input__block {
2701
+ display: flex;
2702
+ padding: 10px 0;
2703
+ position: relative;
2704
+ }
2705
+ .answer-item__result {
2706
+ display: block;
2707
+ color: #fff;
2708
+ border-radius: 30px;
2709
+ cursor: pointer;
2710
+ margin-right: 10px;
2711
+ margin-bottom: 20px;
2712
+ display: flex;
2713
+ justify-content: center;
2714
+ align-items: center;
2715
+ }
2716
+ .answer__result {
2717
+ padding: 10px 35px;
2718
+ display: block;
2719
+ align-self: center;
2720
+ background-color: #0e71ff;
2721
+ border-radius: 30px;
2722
+ }
2723
+ .add__answer {
2724
+ -moz-user-select: none;
2725
+ -khtml-user-select: none;
2726
+ user-select: none;
2727
+ cursor: pointer;
2728
+ padding: 10px 15px;
2729
+ display: block;
2730
+ border-radius: 30px;
2731
+ border: 1px solid #e4e4e4;
2732
+ color: #767676;
2733
+ font-family: "Open Sans", sans-serif;
2734
+ font-size: 16px;
2735
+ line-height: 22px;
2736
+ width: 150px;
2737
+ }
2738
+ .tab-content .form-table td .tooltip {
2739
+ display: none;
2740
+ position: absolute;
2741
+ background-color: #ff7140;
2742
+ border-radius: 5px;
2743
+ padding: 10px;
2744
+ font-size: 12px;
2745
+ color: #fff;
2746
+ top: 35px;
2747
+ width: 182px;
2748
+ word-break: keep-all;
2749
+ z-index: 15;
2750
+ }
2751
+ .tab-content .form-table td .tooltip.qa {
2752
+ top: 113px;
2753
+ }
2754
+ .tab-content .form-table td .tooltip.lq {
2755
+ top: 5%;
2756
+ left: 100%;
2757
+ }
2758
+ .tab-content .form-table td .tooltip.lq_answer {
2759
+ right: 0;
2760
+ top: 25px;
2761
+ }
2762
+ .have_qa a {
2763
+ display: block;
2764
+ padding: 20px;
2765
+ font-size: 18px;
2766
+ font-weight: bolder;
2767
+ text-align: center;
2768
+ background-color: #0e71ff;
2769
+ font-family: "Open Sans", sans-serif;
2770
+ color: #fff;
2771
+ border-radius: 18px;
2772
+ margin-bottom: 40px;
2773
+ }
2774
+ .tab-content .main-question h3 {
2775
+ margin: 0 1em 1em;
2776
+ }
2777
+ .answer-input__wrapper,
2778
+ .qa-input__wrapper {
2779
+ display: none;
2780
+ position: absolute;
2781
+ width: 100%;
2782
+ top: 50px;
2783
+ background-color: #0e71ff;
2784
+ }
2785
+ .tab-content .notify_mode {
2786
+ color: #525252;
2787
+ font-weight: bold;
2788
+ }
2789
+
2790
+ .notify_radio__wrap input[type="radio"]:checked:before {
2791
+ width: 12px;
2792
+ height: 12px;
2793
+ margin: 3px 2px 2px 2px;
2794
+ background-color: #324ef8;
2795
+ float: none;
2796
+ }
2797
+ .notify_radio__wrap {
2798
+ padding: 10px 0;
2799
+ }
2800
+ .notify_radio__wrap input[type="radio"] {
2801
+ border: 2px solid #324ef8;
2802
+ height: 22px;
2803
+ width: 22px;
2804
+ vertical-align: bottom;
2805
+ }
2806
+ .email__wrap {
2807
+ display: flex;
2808
+ }
2809
+ .tab-content table .email__wrap label {
2810
+ width: 15%;
2811
+ align-self: center;
2812
+ padding: 0;
2813
+ font-weight: bold;
2814
+ }
2815
+ .question-input__wrapper .edit,
2816
+ .answer-item__result .edit_answer {
2817
+ display: flex;
2818
+ position: absolute;
2819
+ top: 21px;
2820
+ left: 10px;
2821
+ height: 25px;
2822
+ width: 25px;
2823
+ color: #9e9e9e;
2824
+ align-items: center;
2825
+ background-color: #e5e5e5;
2826
+ border-radius: 50px;
2827
+ justify-content: center;
2828
+ cursor: pointer;
2829
+ }
2830
+ .answer-item__result .edit_answer {
2831
+ position: static;
2832
+ margin-left: 5px;
2833
+ }
2834
+ .email_block .pro_button__wrapper {
2835
+ height: 100%;
2836
+ }
2837
+ .email_block .pro_button__wrapper .pro_button__content {
2838
+ justify-content: center;
2839
+ }
2840
+ .tab-content .email__wrap input[type="text"]:not(.browser-default) {
2841
+ width: 40%;
2842
+ height: 32px;
2843
+ font-size: 14px;
2844
+ }
2845
+
2846
+ .add_question,
2847
+ .add_qa {
2848
+ user-select: none;
2849
+ color: #324ef8;
2850
+ box-shadow: 0px 0px 9px -3px rgba(0, 0, 0, 0.75);
2851
+ padding: 10px 30px;
2852
+ border-radius: 5px;
2853
+ font-family: "Open Sans", sans-serif;
2854
+ font-size: 15px;
2855
+ font-weight: 600;
2856
+ line-height: 22px;
2857
+ }
2858
+ .add_question b,
2859
+ .add_qa b {
2860
+ vertical-align: baseline;
2861
+ font-weight: bold;
2862
+ }
2863
+ .add__answer b {
2864
+ font-size: 30px;
2865
+ font-weight: 400;
2866
+ line-height: 4px;
2867
+ vertical-align: sub;
2868
+ }
2869
+ .triangle {
2870
+ content: "";
2871
+ position: absolute;
2872
+ width: 0;
2873
+ height: 0;
2874
+ border-left: 25px solid transparent;
2875
+ border-right: 25px solid transparent;
2876
+ border-bottom: 25px solid #0e71ff;
2877
+ top: -19px;
2878
+ left: 30px;
2879
+ }
2880
+ .add_as_button {
2881
+ cursor: pointer;
2882
+ margin: 2em 0 0 0.8em;
2883
+ display: inline-block;
2884
+ }
2885
+ .as_item__wrap {
2886
+ align-items: center;
2887
+ display: flex;
2888
+ position: relative;
2889
+ }
2890
+ .wrap__pro input[type="text"]:not(.browser-default) {
2891
+ width: 50%;
2892
+ }
2893
+
2894
+ .del_as {
2895
+ margin-left: 20px;
2896
+ width: 25px;
2897
+ min-width: 25px;
2898
+ height: 25px;
2899
+ background-color: #e4e4e4;
2900
+ color: #9e9e9e;
2901
+ text-align: center;
2902
+ line-height: 25px;
2903
+ border-radius: 50%;
2904
+ position: absolute;
2905
+ right: -40px;
2906
+ cursor: pointer;
2907
+ }
2908
+ .add_as {
2909
+ color: #324ef8;
2910
+ box-shadow: 0px 0px 9px -3px rgba(0, 0, 0, 0.75);
2911
+ padding: 10px 30px;
2912
+ border-radius: 5px;
2913
+ font-family: "Open Sans", sans-serif;
2914
+ font-size: 15px;
2915
+ font-weight: 600;
2916
+ line-height: 22px;
2917
+ }
2918
+ .answer-input__add {
2919
+ margin-right: 15px;
2920
+ }
2921
+ .header__close {
2922
+ height: 25px;
2923
+ width: 25px;
2924
+ background-color: #d8d8d8;
2925
+ border-radius: 50px;
2926
+ position: relative;
2927
+ cursor: pointer;
2928
+ }
2929
+ .header__close:after {
2930
+ position: relative;
2931
+ content: "\d7";
2932
+ font-size: 27px;
2933
+ color: #525252;
2934
+ left: 5px;
2935
+ top: -5px;
2936
+ }
2937
+ .main-qa {
2938
+ display: flex;
2939
+ flex-direction: row;
2940
+ background-color: #f4f6ff;
2941
+ border-radius: 15px;
2942
+ position: relative;
2943
+ margin: 20px 0;
2944
+ }
2945
+ .main-qa .del_qa {
2946
+ position: absolute;
2947
+ right: 10px;
2948
+ top: 10px;
2949
+ color: #0e71ff;
2950
+ font-size: 20px;
2951
+ cursor: pointer;
2952
+ }
2953
+ .main-qa h6 {
2954
+ font-size: 14px;
2955
+ font-weight: bold;
2956
+ text-transform: uppercase;
2957
+ color: #525252;
2958
+ font-family: "Open Sans", sans-serif;
2959
+ }
2960
+ .qa-question__wrap,
2961
+ .qa-response {
2962
+ display: flex;
2963
+ padding: 1em 2em;
2964
+ flex-direction: column;
2965
+ width: 50%;
2966
+ flex-basis: 50%;
2967
+ }
2968
+ .qa-question__wrap .qa-question_input,
2969
+ .qa-question__wrap .qa-question-block {
2970
+ margin: 1em;
2971
+ }
2972
+ .qa-question__wrap {
2973
+ padding: 0;
2974
+ }
2975
+ .add_qa_question {
2976
+ width: 30%;
2977
+ align-self: auto;
2978
+ justify-content: center;
2979
+ text-align: center;
2980
+ display: flex;
2981
+ margin: 9px;
2982
+ background-color: #0e71ff;
2983
+ align-items: center;
2984
+ border-radius: 8px;
2985
+ color: #fff;
2986
+ font-size: 16px;
2987
+ box-shadow: 0px 0px 9px -3px rgba(0, 0, 0, 0.75);
2988
+ cursor: pointer;
2989
+ user-select: none;
2990
+ }
2991
+ .add_qa_question:focus,
2992
+ .add_qa_question:active {
2993
+ box-shadow: none;
2994
+ }
2995
+ .fb-customerchat {
2996
+ display: none;
2997
+ }
2998
+ #mm-root {
2999
+ display: none;
3000
+ }
3001
+ .tab-content .qa-wrapper .qa_head {
3002
+ font-size: 22px;
3003
+ margin-bottom: 15px;
3004
+ margin-top: 0;
3005
+ }
3006
+ .tab-content .input-field.qa-wrapper {
3007
+ padding: 0;
3008
+ }
3009
+ .qa-response input[type="text"]:not(.browser-default)::placeholder,
3010
+ .question_button_wrap input[type="text"]:not(.browser-default)::placeholder {
3011
+ color: #a7a7a7;
3012
+ }
3013
+ .qa-response input[type="text"]:not(.browser-default),
3014
+ .question_button_wrap input[type="text"]:not(.browser-default) {
3015
+ background-color: #fff;
3016
+ }
3017
+ .tab-content .form-table td .qa_p {
3018
+ margin-bottom: 20px;
3019
+ margin-top: 10px;
3020
+ }
3021
+ .qa-question-block-item {
3022
+ color: #fff;
3023
+ border-radius: 30px;
3024
+ cursor: pointer;
3025
+ margin-right: 10px;
3026
+ margin-bottom: 20px;
3027
+ display: flex;
3028
+ justify-content: center;
3029
+ align-items: center;
3030
+ }
3031
+ .qa-question-block {
3032
+ margin: 10px 0 10px 0;
3033
+ display: flex;
3034
+ flex-wrap: wrap;
3035
+ }
3036
+ span.qa-question-result {
3037
+ padding: 10px 35px;
3038
+ display: block;
3039
+ align-self: center;
3040
+ background-color: #0e71ff;
3041
+ border-radius: 30px;
3042
+ }
3043
+ .question_button_wrap {
3044
+ display: flex;
3045
+ }
3046
+
3047
+ .qa-input__wrapper {
3048
+ padding: 20px 20px 0 20px;
3049
+ border-radius: 9px;
3050
+ z-index: 9;
3051
+ }
3052
+ .qa-response {
3053
+ position: relative;
3054
+ }
3055
+ .qa-input__state {
3056
+ color: #fff;
3057
+ display: flex;
3058
+ justify-content: flex-end;
3059
+ padding: 10px 0 20px;
3060
+ font-family: "Open Sans", sans-serif;
3061
+ font-size: 16px;
3062
+ font-weight: 800;
3063
+ line-height: 22px;
3064
+ cursor: pointer;
3065
+ }
3066
+ .qa_submit,
3067
+ .qa_cancel {
3068
+ margin-left: 10px;
3069
+ font-size: 14px;
3070
+ }
3071
+ .tab-content .qa-input__item input[type="text"]:not(.browser-default) {
3072
+ background-color: #fff;
3073
+ box-sizing: border-box;
3074
+ padding: 10px 25px;
3075
+ width: 80%;
3076
+ border: none;
3077
+ border-radius: 9px;
3078
+ }
3079
+ .qa_cancel {
3080
+ font-weight: 400;
3081
+ }
3082
+ .qa-response:before {
3083
+ position: absolute;
3084
+ left: 0;
3085
+ top: 10%;
3086
+ border-left: 1px solid #b0b6cd;
3087
+ content: "";
3088
+ height: 80%;
3089
+ }
3090
+ .qa_new-wrapper h3 {
3091
+ margin-left: 20px;
3092
+ font-size: 16px;
3093
+ margin-top: 0;
3094
+ }
3095
+ .qa-question-block-item .edit_qa {
3096
+ position: static;
3097
+ margin-left: 5px;
3098
+ display: flex;
3099
+ top: 21px;
3100
+ left: 10px;
3101
+ height: 25px;
3102
+ width: 25px;
3103
+ min-width: 25px;
3104
+ color: #9e9e9e;
3105
+ align-items: center;
3106
+ background-color: #e5e5e5;
3107
+ border-radius: 50px;
3108
+ justify-content: center;
3109
+ cursor: pointer;
3110
+ word-break: break-all;
3111
+ }
3112
+ .disabled {
3113
+ pointer-events: none;
3114
+ opacity: 0.6;
3115
+ }
3116
+
3117
+ .phone {
3118
+ background: url("../img/iphone_x.png");
3119
+ padding: 0;
3120
+ margin-top: 200px;
3121
+ height: 415px;
3122
+ width: 220px;
3123
+ background-repeat: no-repeat;
3124
+ background-position: center center;
3125
+ display: flex;
3126
+ margin-right: auto;
3127
+ margin-left: auto;
3128
+ }
3129
+ @media (max-width: 720px) {
3130
+ .phone {
3131
+ margin-top: 0;
3132
+ }
3133
+ .options table td {
3134
+ width: 95%;
3135
+ }
3136
+ .del_as {
3137
+ right: -32px;
3138
+ }
3139
+ .answer-input__block {
3140
+ flex-direction: column;
3141
+ }
3142
+ .answer-input__add {
3143
+ display: flex;
3144
+ text-align: center;
3145
+ justify-content: center;
3146
+ }
3147
+ .add_qa_question {
3148
+ width: 50%;
3149
+ padding: 10px;
3150
+ }
3151
+ .question_button_wrap {
3152
+ flex-direction: column;
3153
+ align-items: center;
3154
+ }
3155
+ .test-bot-button {
3156
+ top: 7px;
3157
+ }
3158
+ .row .col.s12 .questions-wrapper {
3159
+ margin-top: 20px;
3160
+ }
3161
+ .tab-content .email__wrap input[type="text"]:not(.browser-default) {
3162
+ width: 85%;
3163
+ }
3164
+ }
3165
+ @media (max-width: 520px) {
3166
+ .tab-link .limit__notice_tooltip {
3167
+ top: 60px;
3168
+ left: 2%;
3169
+ }
3170
+ .tab-link .limit__notice_tooltip:after {
3171
+ border-color: #fd397a transparent transparent transparent;
3172
+ top: -24px;
3173
+ left: 172px;
3174
+ transform: rotate(180deg);
3175
+ }
3176
+ }
3177
+
3178
+ .mobile__wrapper {
3179
+ display: flex;
3180
+ flex-direction: column;
3181
+ justify-content: space-evenly;
3182
+ margin-right: auto;
3183
+ margin-left: auto;
3184
+ align-items: center;
3185
+ width: 170px;
3186
+ }
3187
+ .ht-cc-admin-sidebar__dismiss_button_container {
3188
+ position: relative;
3189
+ right: 36px;
3190
+ top: 20px;
3191
+ margin-left: -10px;
3192
+ }
3193
+ .ht-cc-admin-sidebar__dismiss_button_container .dismiss_button {
3194
+ cursor: pointer;
3195
+ color: #000;
3196
+ font-size: 14px;
3197
+ padding: 4px;
3198
+ }
3199
+
3200
+ .logo_promo {
3201
+ background: url("../img/mmL_logo.png");
3202
+ height: 76px;
3203
+ width: 116px;
3204
+ background-size: contain;
3205
+ margin-top: 20px;
3206
+ background-repeat: no-repeat;
3207
+ }
3208
+ .dialog_block {
3209
+ background-color: #fff;
3210
+ border-radius: 10px;
3211
+ margin: 0 10px 0 10px;
3212
+ padding: 5px 13px;
3213
+ font-size: 12px;
3214
+ font-weight: 600;
3215
+ }
3216
+ .text__wrap {
3217
+ display: flex;
3218
+ height: auto;
3219
+ flex-direction: row;
3220
+ }
3221
+ .dot_icon {
3222
+ width: 20px;
3223
+ height: 20px;
3224
+ position: relative;
3225
+ }
3226
+ .dot_icon .white_circle {
3227
+ width: 20px;
3228
+ height: 20px;
3229
+ background-color: #ffff;
3230
+ border-radius: 50%;
3231
+ margin-left: 5px;
3232
+ }
3233
+ .dot_icon .green_circle {
3234
+ position: absolute;
3235
+ height: 10px;
3236
+ width: 10px;
3237
+ border-radius: 50%;
3238
+ background: #9ee10e;
3239
+ border: 1px solid #ffffff;
3240
+ right: -8px;
3241
+ bottom: -5px;
3242
+ }
3243
+ .button_download_app {
3244
+ background: linear-gradient(31.47deg, #935cf7 21.84%, #586cf5 81.11%);
3245
+ border-radius: 5px;
3246
+ padding: 5px 15px;
3247
+ color: #fff;
3248
+ margin-bottom: 40px;
3249
+ display: flex;
3250
+ cursor: pointer;
3251
+ }
3252
+ .ios_code {
3253
+ background: url("../img/31c07c81b2d635598c3776cfb31eb240.png");
3254
+ margin-left: auto;
3255
+ margin-right: auto;
3256
+ height: 300px;
3257
+ width: 300px;
3258
+ }
3259
+ .promo-app__wrapper .android_app img {
3260
+ width: 270px;
3261
+ }
3262
+ .promo-app__wrapper .ios_app {
3263
+ width: 235px;
3264
+ cursor: pointer;
3265
+ }
3266
+ .promo-app__wrapper {
3267
+ text-align: center;
3268
+ margin-bottom: 25px;
3269
+ }
3270
+ .promo-app__wrapper a {
3271
+ display: block;
3272
+ }
3273
+ .promo-app__wrapper a:hover,
3274
+ .promo-app__wrapper a:active,
3275
+ .promo-app__wrapper a:focus {
3276
+ border: none;
3277
+ box-shadow: none;
3278
+ }
3279
+ .ios-app__wrap p {
3280
+ margin-top: 41px;
3281
+ }
3282
+ .ios-app__wrap {
3283
+ display: none;
3284
+ }
3285
+ .modal-overlays {
3286
+ position: fixed;
3287
+ margin-left: -20px;
3288
+ right: 0;
3289
+ height: auto;
3290
+ width: auto;
3291
+ background: #000;
3292
+ will-change: opacity;
3293
+ opacity: 0.4;
3294
+ z-index: 998;
3295
+ top: -25%;
3296
+ left: 0;
3297
+ bottom: 0;
3298
+ display: none;
3299
+ }
3300
+ #promo_app {
3301
+ z-index: 999;
3302
+ transition: all 0.5s ease;
3303
+ background-color: #ffffff;
3304
+ display: none;
3305
+ position: fixed;
3306
+ top: 30%;
3307
+ left: 0;
3308
+ right: 0;
3309
+ width: 563px;
3310
+ margin: 0 auto;
3311
+ color: #525252;
3312
+ border: 1px solid #000;
3313
+ border-radius: 10px;
3314
+ }
3315
+ #promo_app {
3316
+ border: none;
3317
+ width: 400px;
3318
+ height: auto;
3319
+ }
3320
+ #promo_app p {
3321
+ font-family: "Open Sans", sans-serif;
3322
+ font-style: normal;
3323
+ font-weight: bold;
3324
+ font-size: 18px;
3325
+ line-height: 25px;
3326
+ color: #525252;
3327
+ text-align: center;
3328
+ margin-top: 35px;
3329
+ }
3330
+ #promo_app .modal_close {
3331
+ background-size: contain;
3332
+ width: 15px;
3333
+ height: 15px;
3334
+ background-repeat: no-repeat;
3335
+ background-position: center;
3336
+ position: absolute;
3337
+ right: 12px;
3338
+ top: 12px;
3339
+ cursor: pointer;
3340
+ z-index: 999;
3341
+ }
3342
+ #promo_app .modal_close {
3343
+ color: #a6a3a3;
3344
+ }
3345
+ .limit__wrapper {
3346
+ background-color: #fd397a;
3347
+ width: 32px;
3348
+ height: 32px;
3349
+ display: flex;
3350
+ align-items: center;
3351
+ justify-content: center;
3352
+ border-radius: 50%;
3353
+ margin-left: 12px;
3354
+ }
3355
+ .limit_notice {
3356
+ height: 20px;
3357
+ width: 20px;
3358
+ border: 2px solid #fff;
3359
+ border-radius: 50%;
3360
+ display: flex;
3361
+ justify-content: center;
3362
+ }
3363
+ .limit_notice i {
3364
+ font-size: 14px;
3365
+ color: #fff;
3366
+ display: flex;
3367
+ align-items: center;
3368
+ line-height: 16px;
3369
+ }
3370
+ .limit__notice_tooltip {
3371
+ position: absolute;
3372
+ background-color: #fd397a;
3373
+ left: 100%;
3374
+ max-width: 300px;
3375
+ min-width: 280px;
3376
+ padding: 20px;
3377
+ height: auto;
3378
+ display: flex;
3379
+ border-radius: 7px;
3380
+ flex-direction: column;
3381
+ font-weight: 600;
3382
+ line-height: 22px;
3383
+ color: #ffffff;
3384
+ font-family: "Open Sans", sans-serif;
3385
+ z-index: 9;
3386
+ }
3387
+ .limit__notice_tooltip p {
3388
+ font-size: 16px;
3389
+ }
3390
+ .limit__notice_tooltip p b {
3391
+ font-size: 30px;
3392
+ font-weight: 600;
3393
+ line-height: 14px;
3394
+ }
3395
+ .limit__button {
3396
+ color: #fd397a;
3397
+ font-family: "Open Sans", sans-serif;
3398
+ font-size: 15px;
3399
+ font-weight: bold;
3400
+ display: flex;
3401
+ line-height: 22px;
3402
+ background-color: #fff;
3403
+ text-align: center;
3404
+ width: 60%;
3405
+ justify-content: center;
3406
+ align-self: center;
3407
+ margin-top: 20px;
3408
+ padding: 10px;
3409
+ border-radius: 5px;
3410
+ }
3411
+ .limit__button:hover,
3412
+ .limit__button:focus {
3413
+ border: none;
3414
+ color: #fd397a;
3415
+ box-shadow: none;
3416
+ }
3417
+ .limit__notice_tooltip span {
3418
+ border-top: 1px solid #fff;
3419
+ padding-top: 10px;
3420
+ font-size: 14px;
3421
+ }
3422
+ .limit__notice_tooltip:after {
3423
+ content: "";
3424
+ position: absolute;
3425
+ width: 0;
3426
+ height: 0;
3427
+ border-width: 12px;
3428
+ border-style: solid;
3429
+ border-color: transparent #fd397a transparent transparent;
3430
+ top: 43%;
3431
+ left: -24px;
3432
+ }
3433
+ .limit-notify-close {
3434
+ position: absolute;
3435
+ right: 5px;
3436
+ top: 5px;
3437
+ width: 15px;
3438
+ height: 14px;
3439
+ cursor: pointer;
3440
+ }
3441
+ .limit-notify-close:before,
3442
+ .limit-notify-close:after {
3443
+ position: absolute;
3444
+ content: " ";
3445
+ right: 7px;
3446
+ height: 13px;
3447
+ width: 3px;
3448
+ background-color: #fff;
3449
+ }
3450
+ .limit-notify-close:before {
3451
+ transform: rotate(45deg);
3452
+ }
3453
+ .limit-notify-close:after {
3454
+ transform: rotate(-45deg);
3455
+ }
3456
+
3457
+ a.go-to-inbox-link {
3458
+ display: flex;
3459
+ flex-direction: row;
3460
+ align-items: center;
3461
+ justify-content: center;
3462
+ background: #3a50f3;
3463
+ border-radius: 3px;
3464
+ padding: 8px 15px;
3465
+ width: 135px;
3466
+ font-size: 14px;
3467
+ color: #fff;
3468
+ margin: 10px 0;
3469
+ }
3470
+ a.go-to-inbox-link img {
3471
+ padding-right: 8px;
3472
+ }
3473
+
3474
+ .chatbot_settings_tab__content {
3475
+ display: flex;
3476
+ flex-direction: column;
3477
+ align-items: flex-start;
3478
+ }
3479
+ .chatbot_settings_tab__content p {
3480
+ margin: 4px 0;
3481
+ }
3482
+ .go-to-chat-widget-settings-link {
3483
+ color: #000000;
3484
+ font-size: 12px;
3485
+ border: 1px solid #3555f0;
3486
+ border-radius: 2px;
3487
+ padding: 8px 15px;
3488
+ margin: 16px 0;
3489
+ }
3490
+ .chatbot_settings_tab__info-box {
3491
+ background: #dfe3fd;
3492
+ border: 1.06642px solid #3454ef;
3493
+ border-radius: 5px;
3494
+ padding: 20px 27px;
3495
+ display: flex;
3496
+ flex-direction: row;
3497
+ align-items: flex-start;
3498
+ font-size: 13px;
3499
+ }
3500
+
3501
+ .chatbot_settings_tab__info-box i {
3502
+ font-size: 20px;
3503
+ color: #3f5bdc;
3504
+ margin-right: 12px;
3505
+ }
3506
+ .already-connected-info {
3507
+ font-size: 20px;
3508
+ margin: 36px 0;
3509
+ line-height: 24px;
3510
+ font-family: "Open Sans", sans-serif;
3511
+ }
3512
+ .already-connected .go_to_mm {
3513
+ padding: 10px 30px;
3514
+ background-color: #324ef8;
3515
+ border-radius: 5px;
3516
+ color: #fff;
3517
+ text-decoration: none;
3518
+ font-size: 16px;
3519
+ font-family: "Open Sans", sans-serif;
3520
+ border: none;
3521
+ }
3522
+ .already-connected.already-connected {
3523
+ display: flex;
3524
+ flex-direction: column;
3525
+ align-items: flex-start;
3526
+ gap: 8px;
3527
+ }
readme.txt CHANGED
@@ -1,9 +1,9 @@
1
  === WP-Chatbot for Messenger ===
2
  Requires at least: 4.6
3
- Tested up to: 5.6
4
  Requires PHP: 5.6
5
  Contributors: larrykim, yankovski
6
- Stable tag: 4.6.3
7
  Tags: free live chat, facebook messenger, chatbot, live support, customer chat, web chat plugin, website chat widget, chat marketing, customer support, artificial intelligence, sms tools, mobilemonkey
8
  License: GPLv2 or later
9
  License URI: https://www.gnu.org/licenses/gpl-2.0.html
@@ -586,6 +586,10 @@ WP-Chatbot is extremely flexible, versatile, and compatible. Because it works se
586
 
587
  == Changelog ==
588
 
 
 
 
 
589
  = 4.6.3 =
590
  Compatibility with latest version of WordPress
591
 
1
  === WP-Chatbot for Messenger ===
2
  Requires at least: 4.6
3
+ Tested up to: 6.0.1
4
  Requires PHP: 5.6
5
  Contributors: larrykim, yankovski
6
+ Stable tag: 4.7
7
  Tags: free live chat, facebook messenger, chatbot, live support, customer chat, web chat plugin, website chat widget, chat marketing, customer support, artificial intelligence, sms tools, mobilemonkey
8
  License: GPLv2 or later
9
  License URI: https://www.gnu.org/licenses/gpl-2.0.html
586
 
587
  == Changelog ==
588
 
589
+ = 4.7 =
590
+ Compatibility with latest version of WordPress
591
+ Bug fixes and usability improvements
592
+
593
  = 4.6.3 =
594
  Compatibility with latest version of WordPress
595
 
wp-chatbot.php CHANGED
@@ -3,7 +3,7 @@
3
  Plugin Name: WP Chatbot
4
  Plugin URI: https://mobilemonkey.com/wp-chatbot/
5
  Description: MobileMonkey’s OmniChat™ widget is the fastest and simplest way to add live chat to your website. Enjoy hassle-free chatbot integration with advanced live agent takeover.
6
- Version: 4.6
7
  Author: MobileMonkey
8
  Author URI: https://mobilemonkey.com/wp-chatbot/
9
  License: GPL2
@@ -17,7 +17,7 @@ if ( ! defined( 'ABSPATH' ) ) exit;
17
 
18
  // Version - define HTCC_VERSION
19
  if ( ! defined( 'HTCC_VERSION' ) ) {
20
- define( 'HTCC_VERSION', '4.6' );
21
  }
22
 
23
 
3
  Plugin Name: WP Chatbot
4
  Plugin URI: https://mobilemonkey.com/wp-chatbot/
5
  Description: MobileMonkey’s OmniChat™ widget is the fastest and simplest way to add live chat to your website. Enjoy hassle-free chatbot integration with advanced live agent takeover.
6
+ Version: 4.7
7
  Author: MobileMonkey
8
  Author URI: https://mobilemonkey.com/wp-chatbot/
9
  License: GPL2
17
 
18
  // Version - define HTCC_VERSION
19
  if ( ! defined( 'HTCC_VERSION' ) ) {
20
+ define( 'HTCC_VERSION', '4.7' );
21
  }
22
 
23