Not logged in.  Login/Logout/Register | List snippets | | Create snippet | Upload image | Upload data

1126
LINES

< > BotCompany Repo | #1030643 // style.css for FIA Bot

Document

1  
2  
#screenreadertrick {
3  
  position: absolute !important; /* Outside the DOM flow */
4  
  height: 1px; width: 1px; /* Nearly collapsed */
5  
  overflow: hidden;
6  
  clip: rect(1px 1px 1px 1px); /* IE 7+ only support clip without commas */
7  
  clip: rect(1px, 1px, 1px, 1px); /* All other browsers */
8  
}
9  
10  
/* old opener */
11  
12  
body {
13  
  font-family: 'Roboto', sans-serif;
14  
}
15  
.chatbot button:focus {
16  
    outline: none;
17  
}
18  
.chat-btn {
19  
    position: fixed;
20  
    bottom: /*2rem*/40px;
21  
    right: /*2rem*/40px;
22  
    z-index: -1;
23  
    text-decoration: none;
24  
    display: -moz-flex;
25  
    display: -o-flex;
26  
    display: -webkit-flex;
27  
    display: flex;
28  
    -webkit-justify-content: center;
29  
    justify-content: center;
30  
    -webkit-align-items: center;
31  
    align-items: center;
32  
    width: 70px;
33  
    height: 70px;
34  
    background: linear-gradient(135deg, rgb(42, 39, 218), rgb(0, 204, 255)) !important;
35  
    color: #ffffff;
36  
    border-radius: 50%;
37  
    font-size: 30px;
38  
    will-change: transform;
39  
    transition: all 0.2s ease-in-out 0s;
40  
    box-shadow: rgba(0, 77, 255, 0.5) 0px 4px 24px;
41  
    
42  
    background: url(https://botcompany.de/images/1102979) !important;
43  
    background-size: 100% !important;
44  
    box-shadow: none;
45  
    border-radius: 0;
46  
}
47  
48  
.chat-btn div {
49  
    display: inline;
50  
    transition: transform 0.8s;
51  
    visibility: visible;
52  
    opacity: 1;
53  
    position: absolute;
54  
    left: 50%;
55  
    top: 50%;
56  
    transform: translate(-50%, -50%) rotateZ(0);
57  
}
58  
59  
.chat-btn div.hide {
60  
    visibility: hidden;
61  
    opacity: 0;
62  
    transform: translate(-50%, -50%) rotateZ(180deg);
63  
    transition: transform 0.8s;
64  
}
65  
66  
.chat-btn .fa-comment-dots {
67  
    display: none;
68  
}
69  
70  
.chat-btn .fa-pencil-alt {
71  
    display: none;
72  
}
73  
74  
.chat-btn:hover i.fas.fa-comment-dots {
75  
  display: none;
76  
}
77  
78  
.chat-btn:focus i.fas.fa-comment-dots {
79  
  color: #fff;
80  
}
81  
82  
.chat-btn:hover i.fas.fa-pencil-alt {
83  
  display: block;
84  
}
85  
86  
/*.chat-btn:hover {
87  
    transform: scale(1.2);
88  
    background: #fff !important;
89  
    color: rgb(0, 125, 252);
90  
}*/
91  
    
92  
/*Chatbot Starts*/
93  
94  
.chat-icon button {
95  
  font-size: 32px;
96  
  line-height: 55px;
97  
  -webkit-transition: all .7s ease-out;
98  
  -moz-transition: all .7s ease-in-out;
99  
  transition: all .7s ease-in-out;
100  
  color: #fff;
101  
  background: transparent;
102  
  border: none;
103  
  /*width: 50px;*/
104  
  height: 50px;
105  
  line-height: 50px;
106  
  border-radius: 50px;
107  
}
108  
109  
/* country selector */
110  
.chat-bottom select {
111  
  float: left;
112  
  margin-left: 10px;
113  
  margin-top: 10px;
114  
}
115  
116  
#chat_countrycode {
117  
  display: none;
118  
}
119  
120  
#chat_countrycode.visible {
121  
  display: inline;
122  
}
123  
124  
.chat-bottom a button {
125  
    color: #737373;
126  
    transition: 0.4s all ease-in;
127  
    cursor: pointer;
128  
    font-size: 18px;
129  
}
130  
131  
.chat-bottom a button:hover {
132  
    color: #f16e00;
133  
}
134  
135  
button.fa-paper-plane {
136  
  border: none;
137  
  padding: 0;
138  
  background: none;
139  
  height: 30px;
140  
}
141  
142  
/* get rid of this? */
143  
.chatbot {
144  
  font-family: 'Roboto', sans-serif;
145  
}
146  
147  
.chatbot .chat-box {
148  
    bottom: 0px;
149  
    position: fixed;
150  
    margin: 1em;
151  
    right: 20px;
152  
    z-index: 10998;
153  
    max-height: calc(100% - 47px);
154  
    overflow: hidden;
155  
    box-shadow: 1px 1px 100px 2px rgba(0, 0, 0, 0.22);
156  
    border-radius: 16px;
157  
}
158  
159  
.chat-icon {
160  
    /* latest fixes */
161  
    /*display: block;*/
162  
    display: flex;
163  
    align-items: center;
164  
    justify-content: center;
165  
    
166  
    width: 56px;
167  
    height: 56px;
168  
    border-radius: 50%;
169  
    text-align: center;
170  
    color: #f0f0f0;
171  
    margin: 25px auto 0;
172  
    box-shadow: 0 0 4px rgba(0, 0, 0, .14), 0 4px 8px rgba(0, 0, 0, .28);
173  
    cursor: pointer;
174  
    -webkit-transition: all .1s ease-out;
175  
    transition: all .1s ease-out;
176  
    position: relative;
177  
    z-index: 10998;
178  
    overflow: hidden;
179  
    background: #42a5f5;
180  
}
181  
182  
.chat-icon i {
183  
    font-size: 2em;
184  
    line-height: 55px;
185  
    -webkit-transition: all .2s ease-out;
186  
    -webkit-transition: all .2s ease-in-out;
187  
    transition: all .2s ease-in-out;
188  
}
189  
190  
/*Chatbox*/
191  
192  
.chat {
193  
    /*position: fixed;*/
194  
    right: 85px;
195  
    bottom: 20px;
196  
    width: 400px;
197  
    /*font-size: 14px;*/
198  
    line-height: 25px;
199  
    font-weight: 500;
200  
    -webkit-font-smoothing: antialiased;
201  
    font-smoothing: antialiased;
202  
    opacity: 0;
203  
    display: none; /* XXX */
204  
    box-shadow: 1px 1px 100px 2px rgba(0, 0, 0, 0.22);
205  
    border-radius: 10px;
206  
    -webkit-transition: all .2s ease-out;
207  
    -webkit-transition: all .2s ease-in-out;
208  
    transition: all .2s ease-in-out;
209  
}
210  
211  
.chat_fullscreen {
212  
    position: fixed;
213  
    right: 0px;
214  
    bottom: 0px;
215  
    top: 0px;
216  
}
217  
218  
.chat, .chat_header {
219  
    font-family: 'Roboto', sans-serif;
220  
}
221  
222  
.chat_header {
223  
    text-align: center;
224  
    font-weight: 500;
225  
    color: #fff;
226  
    /*height: 55px;*/
227  
    background: #42a5f5;
228  
    border-top-left-radius: 10px;
229  
    border-top-right-radius: 10px;
230  
    display: flex;
231  
    align-items: center;
232  
    background: linear-gradient(135deg, rgb(42, 39, 218) 0%, rgb(0, 204, 255) 100%);
233  
    padding: 12px;
234  
}
235  
236  
.chat_header {
237  
  position: relative;
238  
}
239  
240  
.chat_header img.header-user {
241  
  width: 50px;
242  
  height: 50px;
243  
  border-radius: 50px;
244  
  margin-right: 10px;
245  
  display:none;
246  
}
247  
248  
.chat_header .four-people {
249  
    width: 52px;
250  
    height: 52px;
251  
    overflow: hidden;
252  
    margin-right: 15px;
253  
}
254  
.chat_header .title-img {
255  
  border-radius: 50px;
256  
  width: 52px;
257  
  height: 52px;
258  
  padding: 0px;
259  
  background: #fff;
260  
}
261  
.chat_header .four-people .users {
262  
    width: 28px;
263  
    height: 28px;
264  
    border-radius: 50px;
265  
    float: left;
266  
}
267  
268  
.chat_header .four-people .users.user-1 {
269  
 background: url("https://gaippbots.com/bot/uploaded-image/146356");
270  
 background-size: cover;
271  
}
272  
273  
.chat_header .four-people .users.user-2 {
274  
 background: url("https://gaippbots.com/bot/uploaded-image/146565");
275  
 background-size: cover;
276  
}
277  
278  
.chat_header .four-people .users.user-3 {
279  
 background: url("https://gaippbots.com/bot/uploaded-image/146566");
280  
 background-size: cover;
281  
}
282  
283  
.chat_header .four-people .users.user-4 {
284  
 background: url("https://gaippbots.com/bot/uploaded-image/146567");
285  
 background-size: cover;
286  
}
287  
288  
.chat_header .four-people .users:nth-child(2n) {
289  
    margin-left: -5px;
290  
}
291  
292  
.chat_header .four-people .users:nth-child(n+3) {
293  
    margin-top: -4px;
294  
}
295  
296  
.chat_header h2 {
297  
  font-size: 24px;
298  
  margin: 0;
299  
  color: #ffffff;
300  
  font-weight: normal;
301  
}
302  
303  
.chat_header button {
304  
  background: transparent;
305  
  border: none;
306  
  color: #fff;
307  
  padding: 0;
308  
  margin: 0;
309  
  font-size: 19px !important;
310  
  width: 40px;
311  
  height: 40px;
312  
  border-radius: 50px;
313  
  display: block;
314  
  line-height: 40px;
315  
  cursor: pointer;
316  
  transition: 0.3s all ease-in;
317  
}
318  
319  
.chat_header button:hover {
320  
  background: rgba(0, 36, 92, 0.16);
321  
}
322  
323  
.chat_header button.fas.fa-ellipsis-v {
324  
  
325  
}
326  
    
327  
.chat_header .buttons {
328  
  /*position: absolute;
329  
  top: 50%;
330  
  right: 20px;
331  
  transform: translateY(-50%);*/
332  
  margin-left: auto;
333  
  background-color: transparent !important;
334  
  display:flex;
335  
}
336  
337  
.header-bottom {
338  
    padding: 15px;
339  
    background: linear-gradient(135deg, rgb(42, 39, 218) 0%, rgb(0, 204, 255) 100%);
340  
    color: #fff;
341  
    position: relative;
342  
    clear: both;
343  
}
344  
345  
.header-bottom::before {
346  
    content: "";
347  
    display: block;
348  
    width: 12px;
349  
    height: 12px;
350  
    position: absolute;
351  
    top: calc(50% - 7px);
352  
    background: rgb(117 218 95);
353  
    border-radius: 50%;
354  
    left: 25px;
355  
}
356  
357  
.header-bottom::after {
358  
    content: "";
359  
    position: absolute;
360  
    width: 100%;
361  
    bottom: -8px;
362  
    left: 0px;
363  
    border-image-source: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzNzIgMTUiPgogIDxwYXRoIGQ9Ik0zNDkuOCAxLjRDMzM0LjUuNCAzMTguNSAwIDMwMiAwaC0yLjVjLTkuMSAwLTE4LjQuMS0yNy44LjQtMzQuNSAxLTY4LjMgMy0xMDIuMyA0LjctMTQgLjUtMjggMS4yLTQxLjUgMS42Qzg0IDcuNyA0MS42IDUuMyAwIDIuMnY4LjRjNDEuNiAzIDg0IDUuMyAxMjguMiA0LjEgMTMuNS0uNCAyNy41LTEuMSA0MS41LTEuNiAzMy45LTEuNyA2Ny44LTMuNiAxMDIuMy00LjcgOS40LS4zIDE4LjctLjQgMjcuOC0uNGgyLjVjMTYuNSAwIDMyLjQuNCA0Ny44IDEuNCA4LjQuMyAxNS42LjcgMjIgMS4yVjIuMmMtNi41LS41LTEzLjgtLjUtMjIuMy0uOHoiIGZpbGw9IiNmZmYiLz4KPC9zdmc+Cg==);
364  
    border-image-slice: 0 0 100%;
365  
    border-image-repeat: stretch;
366  
    border-width: 0px 0px 15px;
367  
    border-bottom-style: solid;
368  
}
369  
370  
.header-bottom .online {
371  
    color: #fff;
372  
    padding-left: 35px;
373  
    font-size: 15px;
374  
    font-weight: normal;
375  
}
376  
377  
.chat_header .span {
378  
    float: right;
379  
}
380  
381  
.chat.is-visible {
382  
    display: block; /* XXX */
383  
    opacity: 1;
384  
    -webkit-animation: zoomIn .2s cubic-bezier(.42, 0, .58, 1);
385  
    animation: zoomIn .2s cubic-bezier(.42, 0, .58, 1);
386  
}
387  
388  
.is-hide {
389  
    opacity: 0
390  
}
391  
392  
.chat_field {
393  
    position: relative;
394  
    /*margin: 5px 0 5px 0;*/
395  
    width: 65%;
396  
    font-size: 17px;
397  
    line-height: 30px;
398  
    font-weight: 500;
399  
    color: #4b4b4b;
400  
    -webkit-font-smoothing: antialiased;
401  
    font-smoothing: antialiased;
402  
    border: none;
403  
    outline: none;
404  
    display: inline-block;
405  
}
406  
.chat_field:focus {
407  
    outline: none;
408  
    border: none;
409  
}
410  
.chat-bottom #chat_countrycode {
411  
    background: #f0f2f7;
412  
    border: none;
413  
    padding: 3px 5px;
414  
    font-size: 15px;
415  
    margin: 5px 15px;
416  
}
417  
.chat-bottom #chat_countrycode:focus {
418  
    border: none;
419  
    outline: none;
420  
}
421  
.chat_field.chat_message {
422  
    height: 30px;
423  
    resize: none;
424  
    font-size: 17px;
425  
    line-height: 20px;
426  
    font-weight: 400;
427  
    font-family: inherit;
428  
    padding-left: 15px;
429  
    width: 100%;
430  
}
431  
.chat_field.chat_message:hover {
432  
    outline: none;
433  
    border: none;
434  
}
435  
436  
.chat-bottom {
437  
    width: 100%;
438  
    display: inline-block;
439  
    background: #fff;
440  
    /*border-top: 1px solid #eee;*/
441  
    border-bottom-right-radius: 10px;
442  
    border-bottom-left-radius: 10px;
443  
}
444  
445  
.chat-bottom a {
446  
    display: inline-block;
447  
    text-align: center;
448  
}
449  
450  
.chat-bottom .camera-icon {
451  
    float: left;
452  
    background: rgba(0, 0, 0, 0);
453  
}
454  
455  
.chat-bottom .send-icon {
456  
    float: right;
457  
    background: rgba(0, 0, 0, 0);
458  
}
459  
460  
.chat-bottom a {
461  
    width: 35px;
462  
    height: 35px;
463  
    box-shadow: none;
464  
    margin: 5px;
465  
}
466  
467  
.chat-bottom a i {
468  
    font-size: 1.6em;
469  
    line-height: 35px;
470  
    color: #bbb;
471  
}
472  
473  
.chat-bottom a i:hover {
474  
    color: #42a5f5;
475  
}
476  
.chat-bottom a i.fa-arrow-circle-left {
477  
  font-size: 25px;
478  
  color: #108cf1;
479  
}
480  
481  
.chat_converse:focus, button.fas:focus, .chat_message:focus {
482  
  /*outline: .2rem solid #f16e00;*/
483  
  outline: none;
484  
}
485  
486  
.chat-icon button:focus {
487  
  outline: none !important;
488  
  box-shadow: 0 0 3pt 2pt #f16e00;
489  
}
490  
491  
.chat-icon {
492  
  padding: 3px;
493  
}
494  
495  
.chat_converse {
496  
    position: relative;
497  
    background: #fff;
498  
    padding: 6px 0 0px 0;
499  
    height: 350px;
500  
    max-height: 350px;
501  
    min-height: 150px;
502  
    font-size: 17px; /* chat font size */
503  
    line-height: 25px;
504  
    overflow-y: auto;
505  
    width: 100%;
506  
    float: right;
507  
    padding-bottom: 20px;
508  
}
509  
.chat_converse a {
510  
    color: #0071b2;
511  
    text-decoration: underline;
512  
}
513  
514  
.chat .chat_converse .chat_msg_item {
515  
    position: relative;
516  
    margin: 8px 0 15px 0;
517  
    padding: 8px 15px;
518  
    max-width: 75%;
519  
    display: block;
520  
    word-wrap: break-word;
521  
    border-radius: 7px;
522  
    -webkit-animation: zoomIn .5s cubic-bezier(.42, 0, .58, 1);
523  
    animation: zoomIn .5s cubic-bezier(.42, 0, .58, 1);
524  
    clear: both;
525  
    z-index: 9;
526  
        font-weight: normal;
527  
    font-size: 17px;
528  
    line-height: 25px;
529  
}
530  
531  
.status {
532  
    margin: 45px -50px 0 0;
533  
    float: right;
534  
    font-size: 11px;
535  
    opacity: 0.3;
536  
}
537  
538  
.status2 {
539  
    margin: -10px 20px 0 0;
540  
    float: right;
541  
    display: block;
542  
    font-size: 11px;
543  
    opacity: 0.3;
544  
    clear: both;
545  
}
546  
547  
.chat .chat_converse .chat_msg_item .chat_avatar {
548  
    position: absolute;
549  
    top: 0;
550  
}
551  
552  
.chat .chat_converse .chat_msg_item.chat_msg_item_admin .chat_avatar {
553  
    left: -52px;
554  
    background: rgb(240, 242, 247);
555  
}
556  
557  
.chat .chat_converse .chat_msg_item .chat_avatar,
558  
.chat_avatar img {
559  
    width: 40px;
560  
    height: 40px;
561  
    text-align: center;
562  
    border-radius: 50%;
563  
}
564  
565  
.chat .chat_converse .chat_msg_item.chat_msg_item_admin {
566  
    margin-left: 60px;
567  
    float: left;
568  
    background: rgb(240, 242, 247);
569  
    color: #000;
570  
}
571  
572  
.chat .chat_converse .chat_msg_item.chat_msg_item_user {
573  
    margin-right: 20px;
574  
    float: right;
575  
    background: linear-gradient(135deg, rgb(42, 39, 218), rgb(0, 204, 255));
576  
    color: #eceff1;
577  
}
578  
579  
.chat .chat_converse .chat_msg_item.chat_msg_item_admin:before {
580  
    content: '';
581  
    position: absolute;
582  
    top: 15px;
583  
    left: -12px;
584  
    z-index: 10998;
585  
    border: 6px solid transparent;
586  
    border-right-color: rgba(255, 255, 255, .4);
587  
}
588  
589  
#otherSideTyping {
590  
    background-color: #fff;
591  
    margin-left: 0;
592  
    display: flex;
593  
    width: 100%;
594  
    align-items: center;
595  
    padding-left: 30px;
596  
}
597  
598  
#otherSideTyping h4 {
599  
  margin-right: 10px;
600  
  margin-left: 15px;
601  
}
602  
603  
#otherSideTyping .dot {
604  
    display: inline-block;
605  
    width: 12px;
606  
    height: 12px;
607  
    border-radius: 50%;
608  
    margin-right: 3px;
609  
    background: #303131;
610  
    animation: wave 1.3s linear infinite;
611  
}
612  
613  
#otherSideTyping .dot:nth-child(2) {
614  
    animation-delay: -1.1s;
615  
}
616  
617  
#otherSideTyping .dot:nth-child(3) {
618  
    animation-delay: -0.9s;
619  
}
620  
621  
.chat_username {
622  
    clear: both;
623  
}
624  
.chat_username p {
625  
    position: relative;
626  
    float: right;
627  
    margin: 0px 20px -5px 0px;
628  
    font-size: 12px;
629  
    color: #ccc;
630  
}
631  
632  
.chat_botname {
633  
  clear: both;
634  
}
635  
636  
.chat_botname p {
637  
    position: relative;
638  
    float: left;
639  
    margin: 0px 0px -6px 60px;
640  
    font-size: 12px;
641  
    color: #42a5f5;
642  
}
643  
644  
.chat-btn, .chat_header, .chat .chat_converse .chat_msg_item.chat_msg_item_user, .chat_header .fa-redo {
645  
    background-color: #db4064;
646  
    color: #ffffff;
647  
}
648  
649  
/* limit embedded videos to chat width */
650  
.chat_converse iframe {
651  
  max-width: 100% !important;
652  
}
653  
654  
@keyframes wave {
655  
    0%,
656  
    60%,
657  
    100% {
658  
        transform: initial;
659  
    }
660  
    30% {
661  
        transform: translateY(-15px);
662  
    }
663  
}
664  
665  
666  
/*Chatbox scrollbar*/
667  
::-webkit-scrollbar {
668  
    width: 6px;
669  
}
670  
671  
::-webkit-scrollbar-track {
672  
    border-radius: 0;
673  
}
674  
675  
::-webkit-scrollbar-thumb {
676  
    margin: 2px;
677  
    border-radius: 10px;
678  
    background: rgba(0, 0, 0, 0.2);
679  
}
680  
681  
682  
/*Element state*/
683  
.is-active {
684  
    -webkit-transform: rotate(180deg);
685  
    transform: rotate(180deg);
686  
    -webkit-transition: all 1s ease-in-out;
687  
    transition: all 1s ease-in-out;
688  
}
689  
690  
.is-float {
691  
    box-shadow: 0 0 6px rgba(0, 0, 0, .16), 0 6px 12px rgba(0, 0, 0, .32);
692  
}
693  
694  
695  
/*Animation*/
696  
697  
@-webkit-keyframes zoomIn {
698  
    0% {
699  
        -webkit-transform: scale(0);
700  
        transform: scale(0);
701  
        opacity: 0.0;
702  
    }
703  
    100% {
704  
        -webkit-transform: scale(1);
705  
        transform: scale(1);
706  
        opacity: 1;
707  
    }
708  
}
709  
710  
@keyframes zoomIn {
711  
    0% {
712  
        -webkit-transform: scale(0);
713  
        transform: scale(0);
714  
        opacity: 0.0;
715  
    }
716  
    100% {
717  
        -webkit-transform: scale(1);
718  
        transform: scale(1);
719  
        opacity: 1;
720  
    }
721  
}
722  
723  
@-webkit-keyframes load {
724  
    0% {
725  
        -webkit-transform: scale(0);
726  
        transform: scale(0);
727  
        opacity: 0.0;
728  
    }
729  
    50% {
730  
        -webkit-transform: scale(1.5);
731  
        transform: scale(1.5);
732  
        opacity: 1;
733  
    }
734  
    100% {
735  
        -webkit-transform: scale(1);
736  
        transform: scale(1);
737  
        opacity: 0;
738  
    }
739  
}
740  
741  
@keyframes load {
742  
    0% {
743  
        -webkit-transform: scale(0);
744  
        transform: scale(0);
745  
        opacity: 0.0;
746  
    }
747  
    50% {
748  
        -webkit-transform: scale(1.5);
749  
        transform: scale(1.5);
750  
        opacity: 1;
751  
    }
752  
    100% {
753  
        -webkit-transform: scale(1);
754  
        transform: scale(1);
755  
        opacity: 0;
756  
    }
757  
}
758  
759  
@media only screen and (min-width: 360px) and (max-width: 399px) {
760  
    .chat {
761  
        width: 275px;
762  
    }
763  
    .chat_field {
764  
        width: 50%;
765  
    }
766  
}
767  
768  
@media only screen and (min-width: 400px) and (max-width: 1023px) {
769  
    
770  
    .chat_field {
771  
        width: 50%;/*65%;*/
772  
    }
773  
}
774  
775  
@media only screen and (min-width: 300px) and (max-width: 767px) {
776  
  .chatbot .chat-box {
777  
    bottom: 15px;
778  
    right: 10px;
779  
  }
780  
  .chat .chat_converse .chat_msg_item {
781  
    font-size: 15px;
782  
    line-height: 20px;
783  
  }
784  
  .chat-btn {
785  
    right: 10px;
786  
    bottom: 50px;
787  
  }
788  
  .chat {
789  
      width: 300px;
790  
      bottom: 50px;
791  
  }
792  
  
793  
}
794  
795  
796  
/* safari fixes */
797  
798  
@media (min-width: 375px) and (max-width: 812px) {
799  
.chat_converse {
800  
  height: 280px;
801  
  max-height: 280px;
802  
}
803  
.chat-icon {
804  
    
805  
    width: 90px!important;
806  
    height: 90px!important;
807  
}
808  
809  
.chat-icon button {
810  
    margin-top: 17px;
811  
    margin-left: -47px;
812  
    font-size: 48px!important;
813  
}
814  
  /* Shift comment icon on the left a bit */
815  
  /*.chat-icon button.fa-comment-dots {
816  
      margin: 0 0 0 -5px !important;
817  
  }*/
818  
}
819  
820  
@media (min-width: 768px) and (max-width: 1024px) {
821  
.chat-icon {
822  
    
823  
    width: 90px!important;
824  
    height: 90px!important;
825  
}
826  
827  
.chat-icon button {
828  
    margin-top: 17px;
829  
    margin-left: -47px;
830  
    font-size: 48px!important;
831  
}
832  
833  
}
834  
835  
.footer-bottom ul {
836  
    list-style: none;
837  
    padding: 0px 15px 10px;
838  
    margin: 0;
839  
    display: flex;
840  
    align-items: center;
841  
}
842  
843  
.footer-bottom ul li {
844  
    display: inline;
845  
}
846  
847  
.footer-bottom ul li a {
848  
    font-size: 14px;
849  
    width: auto;
850  
    height: auto;
851  
}
852  
853  
.footer-bottom ul li.powered-by {
854  
    font-size: 12px;
855  
    color: #999999;
856  
}
857  
.footer-bottom ul li.powered-by img {
858  
  width: 35px;
859  
  margin: -6px 0px 0px 4px;
860  
}
861  
.footer-bottom ul li.powered-by a {
862  
    margin: 0;
863  
}
864  
865  
.footer-bottom ul li a.play-icon i {
866  
    color: #118bf1;
867  
}
868  
869  
/* Make the icon link position relative*/
870  
.chat-icon {
871  
    position: relative;
872  
}
873  
874  
/* Make the icon link position absolute and position it in center */
875  
.chat-icon button {
876  
    position: absolute;
877  
    top: 50%;
878  
    left: 50%;
879  
    transform: translate(-50%, -50%);
880  
    margin: 0 !important;
881  
}
882  
883  
/* smaller heading on mobile */
884  
@media (max-width: 614px) {
885  
  .chat_header h2 {
886  
    font-size: 16px;
887  
  }
888  
}
889  
890  
/* Header Dropdown */
891  
.head-dropdown {
892  
  display: inline-block;
893  
  position: relative;
894  
}
895  
896  
.head-button {
897  
  border-radius: 50px;
898  
  cursor: pointer;
899  
  width: 40px;
900  
  height: 40px;
901  
  line-height: 40px;
902  
  transition: 0.3s all ease-in;
903  
  font-size: 19px;
904  
  display: flex;
905  
  align-items: center;
906  
  justify-content: center;
907  
}
908  
909  
.head-button:hover {
910  
  background-color: rgba(0, 36, 92, 0.16);
911  
}
912  
913  
914  
.head-input {
915  
  display: none;
916  
}
917  
918  
.head-menu {
919  
  position: absolute;
920  
  top: 100%;
921  
  right: -33px;
922  
  border-radius: 10px;
923  
  padding: 10px;
924  
  /* margin: 5px 0px 0px -140px; */
925  
  box-shadow: rgb(198 198 198 / 50%) 0px 4px 24px;
926  
  background-color: #ffffff;
927  
  list-style-type: none;
928  
  z-index: 99999;
929  
}
930  
931  
.head-input + .head-menu {
932  
  display: none;
933  
} 
934  
935  
.head-input:checked + .head-menu {
936  
  display: block;
937  
} 
938  
939  
.head-menu li {
940  
  padding: 8px 20px;
941  
  cursor: pointer;
942  
  white-space: nowrap;
943  
  color: #000;
944  
  font-weight: normal;
945  
  text-align: left;
946  
}
947  
948  
.head-menu li:hover {
949  
  background-color: #f6f6f6;
950  
}
951  
952  
.head-menu li a {
953  
  display: block;
954  
  margin: -10px -20px;
955  
  padding: 10px 20px;
956  
}
957  
958  
.head-menu li.divider{
959  
  padding: 0;
960  
  border-bottom: 1px solid #cccccc;
961  
}
962  
963  
.head-menu li i {
964  
    margin-right: 10px;
965  
    color: #999;
966  
}
967  
968  
.head-menu li i.fa-star {
969  
  color: #fbd701;
970  
}
971  
972  
973  
/*Chatbot Questions*/
974  
975  
.bot-questions {
976  
    transition: transform 0.2s ease 0s, margin 0.2s ease 0s;
977  
   /* background: rgb(240, 242, 247);*/
978  
    color: #000;
979  
    clear: both;
980  
    max-width: 75%;
981  
    border-radius: 20px;
982  
    margin-left: 60px;
983  
    text-align: left;
984  
    font-size: 17px;
985  
    /* border: 1px solid rgb(235, 238, 240); */
986  
    margin-bottom: 20px;
987  
}
988  
.bot-questions .question-title h4 {
989  
    font-size: 17px;
990  
    font-weight: normal;
991  
    color: #000;
992  
    padding: 8px 15px;
993  
    margin: 0;
994  
    background: rgb(240, 242, 247);
995  
    font-family: 'Roboto', sans-serif;
996  
    border-radius: 8px;
997  
}
998  
.bot-questions .all-options {
999  
    background: #fff;
1000  
    border-radius: 20px;
1001  
    border-top-left-radius: 0;
1002  
    border-top-right-radius: 0;
1003  
    margin-top: 15px;
1004  
}
1005  
.bot-questions .all-options .option-single {
1006  
    font-size: 16px;
1007  
    font-weight: normal;
1008  
    display: block;
1009  
    color: rgb(0, 125, 252);
1010  
    text-decoration: none;
1011  
    padding: 5px 15px;
1012  
    border: 1px solid rgb(0, 125, 252);
1013  
    margin: 10px 0px;
1014  
    border-radius: 8px;
1015  
}
1016  
.bot-questions .all-options .option-single:hover {
1017  
    text-decoration: underline;
1018  
    background: #eef9ff
1019  
}
1020  
1021  
/* Single questions */
1022  
.single-choice {
1023  
    background: transparent !important;
1024  
    text-align: right;
1025  
}
1026  
.single-choice .chatbot-choice-button {
1027  
    font-size: 15px;
1028  
    padding: 8px 16px;
1029  
    cursor: pointer;
1030  
    border: 1px solid rgb(0, 125, 252);
1031  
    border-radius: 20px;
1032  
    margin: 3px;
1033  
    background: transparent;
1034  
    color: rgb(0, 125, 252);
1035  
}
1036  
.single-choice .chatbot-choice-button:hover {
1037  
    text-decoration: underline;
1038  
}
1039  
.chat-box .btn-ok {
1040  
    background: #1677ec;
1041  
    border: none;
1042  
    color: #fff;
1043  
    padding: 5px 15px;
1044  
    border-radius: 20px;
1045  
    margin: 10px 0px;
1046  
}
1047  
.chat-box .btn-ok:focus {
1048  
    outline: none;
1049  
}
1050  
1051  
/* Bot Reload */
1052  
1053  
.bot-restart {
1054  
    position: absolute;
1055  
    right: 10px;
1056  
    top: 55px;
1057  
    z-index: 999;
1058  
}
1059  
.bot-restart button {
1060  
    width: 30px;
1061  
    height: 30px;
1062  
    border: none;
1063  
    background: #cfefff;
1064  
    border-radius: 5px;
1065  
    padding: 0;
1066  
    color: #0ba5f7;
1067  
    cursor: pointer;
1068  
}
1069  
1070  
/* hide initially? */
1071  
#chat_telephone, .iti { display: none; }
1072  
1073  
/* Country Flag */
1074  
.chatbot .iti #chat_telephone {
1075  
    border: none;
1076  
}
1077  
.chatbot .iti #chat_telephone:focus {
1078  
    border: none;
1079  
    outline: none;
1080  
}
1081  
.chatbot .iti__selected-flag {
1082  
    background-color: transparent !important;
1083  
}
1084  
.chatbot .iti {
1085  
    padding: 10px;
1086  
    z-index: 99999;
1087  
}
1088  
.chatbot .iti:focus, .chatbot .iti:active {
1089  
    outline: none;
1090  
    border: none;
1091  
}
1092  
.chatbot .iti__flag-container:focus, .iti__selected-flag:focus {
1093  
    border: none;
1094  
    outline: none;
1095  
}
1096  
1097  
/*Emoji Styles
1098  
.emoji-picker__wrapper {
1099  
    width: 400px;
1100  
    z-index: 99999;
1101  
    left: 140px !important;
1102  
    border: none;
1103  
    bottom: 40px !important;
1104  
}
1105  
.emoji-picker__wrapper .emoji-picker.light {
1106  
    width: 100%;
1107  
    height: 300px;
1108  
    border: none;
1109  
}
1110  
*/
1111  
1112  
.emoji-picker.light {
1113  
    width: 400px;
1114  
    margin: 10px 0px 0px 90px;
1115  
    border: none;
1116  
    height: 360px;
1117  
    max-height: 350px;
1118  
    background: #fff;
1119  
}
1120  
.emoji-picker__wrapper {
1121  
    z-index: 99999;
1122  
    width: 300px;
1123  
    right: 0px !important;
1124  
    left: 0px !important;
1125  
1126  
}

Author comment

Began life as a copy of #1029713

download  show line numbers   

Travelled to 4 computer(s): bhatertpkbcr, mqqgnosmbjvj, pyentgdyhuwx, vouqrxazstgt

No comments. add comment

Snippet ID: #1030643
Snippet name: style.css for FIA Bot
Eternal ID of this version: #1030643/18
Text MD5: d537051da8ff7193448a07fa422ed59c
Author: stefan
Category: javax / css
Type: Document
Public (visible to everyone): Yes
Archived (hidden from active list): No
Created/modified: 2021-02-24 04:08:08
Source code size: 22878 bytes / 1126 lines
Pitched / IR pitched: No / No
Views / Downloads: 151 / 383
Version history: 17 change(s)
Referenced in: [show references]