#screenreadertrick { position: absolute !important; /* Outside the DOM flow */ height: 1px; width: 1px; /* Nearly collapsed */ overflow: hidden; clip: rect(1px 1px 1px 1px); /* IE 7+ only support clip without commas */ clip: rect(1px, 1px, 1px, 1px); /* All other browsers */ } /* old opener */ body { font-family: 'Roboto', sans-serif; } .chatbot button:focus { outline: none; border: none; } .chat-btn { position: fixed; bottom: /*2rem*/40px; right: /*2rem*/40px; z-index: 999999; text-decoration: none; display: -moz-flex; display: -o-flex; display: -webkit-flex; display: flex; -webkit-justify-content: center; justify-content: center; -webkit-align-items: center; align-items: center; width: 60px; height: 60px; background: linear-gradient(135deg, rgb(42, 39, 218), rgb(0, 204, 255)) !important; color: #ffffff; border-radius: 50%; font-size: 30px; will-change: transform; transition: all 0.2s ease-in-out 0s; box-shadow: rgba(0, 77, 255, 0.5) 0px 4px 24px; } .chat-btn div { display: inline; transition: transform 0.8s; visibility: visible; opacity: 1; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) rotateZ(0); } .chat-btn div.hide { visibility: hidden; opacity: 0; transform: translate(-50%, -50%) rotateZ(180deg); transition: transform 0.8s; } .chat-btn .fa-comment-dots { display: block; } .chat-btn .fa-pencil-alt { display: none; } .chat-btn:hover i.fas.fa-comment-dots { display: none; } .chat-btn:focus i.fas.fa-comment-dots { color: #fff; } .chat-btn:hover i.fas.fa-pencil-alt { display: block; } .chat-btn:hover { transform: scale(1.2); background: #fff !important; color: rgb(0, 125, 252); } /*Chatbot Starts*/ .chat-icon button { font-size: 32px; line-height: 55px; -webkit-transition: all .7s ease-out; -moz-transition: all .7s ease-in-out; transition: all .7s ease-in-out; color: #fff; background: transparent; border: none; /*width: 50px;*/ height: 50px; line-height: 50px; border-radius: 50px; } /* country selector */ .chat-bottom select { float: left; margin-left: 10px; margin-top: 10px; } #chat_countrycode { display: none; } #chat_countrycode.visible { display: inline; } .chat-bottom a button { color: #737373; transition: 0.4s all ease-in; cursor: pointer; font-size: 18px; } .chat-bottom a button:hover { color: #f16e00; } button.fa-paper-plane { border: none; padding: 0; background: none; height: 30px; } /* get rid of this? */ .chatbot { font-family: 'Roboto', sans-serif; } .chatbot .chat-box { bottom: 0px; position: fixed; margin: 1em; right: 40px; z-index: 10998; max-height: calc(100% - 47px); overflow: hidden; box-shadow: 1px 1px 100px 2px rgba(0, 0, 0, 0.22); border-radius: 16px; } .chat-icon { /* latest fixes */ /*display: block;*/ display: flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: 50%; text-align: center; color: #f0f0f0; margin: 25px auto 0; box-shadow: 0 0 4px rgba(0, 0, 0, .14), 0 4px 8px rgba(0, 0, 0, .28); cursor: pointer; -webkit-transition: all .1s ease-out; transition: all .1s ease-out; position: relative; z-index: 10998; overflow: hidden; background: #42a5f5; } .chat-icon i { font-size: 2em; line-height: 55px; -webkit-transition: all .2s ease-out; -webkit-transition: all .2s ease-in-out; transition: all .2s ease-in-out; } /*Chatbox*/ .chat { /*position: fixed;*/ right: 85px; bottom: 20px; width: 400px; /*font-size: 14px;*/ line-height: 25px; font-weight: 500; -webkit-font-smoothing: antialiased; font-smoothing: antialiased; opacity: 0; display: none; /* XXX */ box-shadow: 1px 1px 100px 2px rgba(0, 0, 0, 0.22); border-radius: 10px; -webkit-transition: all .2s ease-out; -webkit-transition: all .2s ease-in-out; transition: all .2s ease-in-out; } .chat_fullscreen { position: fixed; right: 0px; bottom: 0px; top: 0px; } .chat, .chat_header { font-family: 'Roboto', sans-serif; } .chat_header { text-align: center; font-weight: 500; color: #fff; /*height: 55px;*/ background: #42a5f5; border-top-left-radius: 10px; border-top-right-radius: 10px; display: flex; align-items: center; background: linear-gradient(135deg, rgb(42, 39, 218) 0%, rgb(0, 204, 255) 100%); padding: 12px; } .chat_header { position: relative; } .chat_header img.header-user { width: 50px; height: 50px; border-radius: 50px; margin-right: 10px; display:none; } .chat_header .four-people { width: 52px; height: 52px; overflow: hidden; margin-right: 15px; } .chat_header .four-people .users { width: 28px; height: 28px; border-radius: 50px; float: left; } .chat_header .four-people .users.user-1 { background: url("https://gaippbots.com/bot/uploaded-image/146356"); background-size: cover; } .chat_header .four-people .users.user-2 { background: url("https://gaippbots.com/bot/uploaded-image/146565"); background-size: cover; } .chat_header .four-people .users.user-3 { background: url("https://gaippbots.com/bot/uploaded-image/146566"); background-size: cover; } .chat_header .four-people .users.user-4 { background: url("https://gaippbots.com/bot/uploaded-image/146567"); background-size: cover; } .chat_header .four-people .users:nth-child(2n) { margin-left: -5px; } .chat_header .four-people .users:nth-child(n+3) { margin-top: -4px; } .chat_header h2 { font-size: 24px; margin: 0; color: #ffffff; font-weight: normal; } .chat_header button { background: transparent; border: none; color: #fff; padding: 0; margin: 0; font-size: 19px !important; width: 40px; height: 40px; border-radius: 50px; display: block; line-height: 40px; cursor: pointer; transition: 0.3s all ease-in; } .chat_header button:hover { background: rgba(0, 36, 92, 0.16); } .chat_header button.fas.fa-ellipsis-v { } .chat_header .buttons { /*position: absolute; top: 50%; right: 20px; transform: translateY(-50%);*/ margin-left: auto; background-color: transparent !important; display:flex; } .header-bottom { padding: 15px; background: linear-gradient(135deg, rgb(42, 39, 218) 0%, rgb(0, 204, 255) 100%); color: #fff; position: relative; clear: both; } .header-bottom::before { content: ""; display: block; width: 12px; height: 12px; position: absolute; top: calc(50% - 7px); background: rgb(117 218 95); border-radius: 50%; left: 25px; } .header-bottom::after { content: ""; position: absolute; width: 100%; bottom: -8px; left: 0px; border-image-source: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzNzIgMTUiPgogIDxwYXRoIGQ9Ik0zNDkuOCAxLjRDMzM0LjUuNCAzMTguNSAwIDMwMiAwaC0yLjVjLTkuMSAwLTE4LjQuMS0yNy44LjQtMzQuNSAxLTY4LjMgMy0xMDIuMyA0LjctMTQgLjUtMjggMS4yLTQxLjUgMS42Qzg0IDcuNyA0MS42IDUuMyAwIDIuMnY4LjRjNDEuNiAzIDg0IDUuMyAxMjguMiA0LjEgMTMuNS0uNCAyNy41LTEuMSA0MS41LTEuNiAzMy45LTEuNyA2Ny44LTMuNiAxMDIuMy00LjcgOS40LS4zIDE4LjctLjQgMjcuOC0uNGgyLjVjMTYuNSAwIDMyLjQuNCA0Ny44IDEuNCA4LjQuMyAxNS42LjcgMjIgMS4yVjIuMmMtNi41LS41LTEzLjgtLjUtMjIuMy0uOHoiIGZpbGw9IiNmZmYiLz4KPC9zdmc+Cg==); border-image-slice: 0 0 100%; border-image-repeat: stretch; border-width: 0px 0px 15px; border-bottom-style: solid; } .header-bottom .online { color: #fff; padding-left: 35px; font-size: 15px; font-weight: normal; } .chat_header .span { float: right; } .chat.is-visible { display: block; /* XXX */ opacity: 1; -webkit-animation: zoomIn .2s cubic-bezier(.42, 0, .58, 1); animation: zoomIn .2s cubic-bezier(.42, 0, .58, 1); } .is-hide { opacity: 0 } .chat_field { position: relative; /*margin: 5px 0 5px 0;*/ width: 65%; font-size: 17px; line-height: 30px; font-weight: 500; color: #4b4b4b; -webkit-font-smoothing: antialiased; font-smoothing: antialiased; border: none; outline: none; display: inline-block; } .chat_field:focus { outline: none; border: none; } .chat-bottom #chat_countrycode { background: #f0f2f7; border: none; padding: 3px 5px; font-size: 15px; margin: 5px 15px; } .chat-bottom #chat_countrycode:focus { border: none; outline: none; } .chat_field.chat_message { height: 30px; resize: none; font-size: 17px; line-height: 20px; font-weight: 400; font-family: inherit; padding-left: 15px; width: 100%; } .chat_field.chat_message:hover { outline: none; border: none; } .chat-bottom { width: 100%; display: inline-block; background: #fff; border-top: 1px solid #eee; border-bottom-right-radius: 10px; border-bottom-left-radius: 10px; } .chat-bottom a { display: inline-block; text-align: center; } .chat-bottom .camera-icon { float: left; background: rgba(0, 0, 0, 0); } .chat-bottom .send-icon { float: right; background: rgba(0, 0, 0, 0); } .chat-bottom a { width: 35px; height: 35px; box-shadow: none; margin: 5px; } .chat-bottom a i { font-size: 1.6em; line-height: 35px; color: #bbb; } .chat-bottom a i:hover { color: #42a5f5; } .chat_converse:focus, button.fas:focus, .chat_message:focus { /*outline: .2rem solid #f16e00;*/ outline: none; } .chat-icon button:focus { outline: none !important; box-shadow: 0 0 3pt 2pt #f16e00; } .chat-icon { padding: 3px; } .chat_converse { position: relative; background: #fff; padding: 6px 0 0px 0; height: 350px; max-height: 350px; min-height: 150px; font-size: 17px; /* chat font size */ line-height: 25px; overflow-y: auto; width: 100%; float: right; padding-bottom: 20px; } .chat .chat_converse .chat_msg_item { position: relative; margin: 8px 0 15px 0; padding: 8px 15px; max-width: 75%; display: block; word-wrap: break-word; border-radius: 7px; -webkit-animation: zoomIn .5s cubic-bezier(.42, 0, .58, 1); animation: zoomIn .5s cubic-bezier(.42, 0, .58, 1); clear: both; z-index: 9; font-weight: normal; font-size: 17px; line-height: 25px; } .status { margin: 45px -50px 0 0; float: right; font-size: 11px; opacity: 0.3; } .status2 { margin: -10px 20px 0 0; float: right; display: block; font-size: 11px; opacity: 0.3; clear: both; } .chat .chat_converse .chat_msg_item .chat_avatar { position: absolute; top: 0; } .chat .chat_converse .chat_msg_item.chat_msg_item_admin .chat_avatar { left: -52px; background: rgb(240, 242, 247); } .chat .chat_converse .chat_msg_item .chat_avatar, .chat_avatar img { width: 40px; height: 40px; text-align: center; border-radius: 50%; } .chat .chat_converse .chat_msg_item.chat_msg_item_admin { margin-left: 60px; float: left; background: rgb(240, 242, 247); color: #000; } .chat .chat_converse .chat_msg_item.chat_msg_item_user { margin-right: 20px; float: right; background: linear-gradient(135deg, rgb(42, 39, 218), rgb(0, 204, 255)); color: #eceff1; } .chat .chat_converse .chat_msg_item.chat_msg_item_admin:before { content: ''; position: absolute; top: 15px; left: -12px; z-index: 10998; border: 6px solid transparent; border-right-color: rgba(255, 255, 255, .4); } #otherSideTyping { background-color: #fff; margin-left: 0; display: flex; width: 100%; align-items: center; padding-left: 30px; } #otherSideTyping h4 { margin-right: 10px; margin-left: 15px; } #otherSideTyping .dot { display: inline-block; width: 12px; height: 12px; border-radius: 50%; margin-right: 3px; background: #303131; animation: wave 1.3s linear infinite; } #otherSideTyping .dot:nth-child(2) { animation-delay: -1.1s; } #otherSideTyping .dot:nth-child(3) { animation-delay: -0.9s; } .chat_username { clear: both; } .chat_username p { position: relative; float: right; margin: 0px 20px -5px 0px; font-size: 12px; color: #ccc; } .chat_botname { clear: both; } .chat_botname p { position: relative; float: left; margin: 0px 0px -6px 60px; font-size: 12px; color: #42a5f5; } .chat-btn, .chat_header, .chat .chat_converse .chat_msg_item.chat_msg_item_user, .chat_header .fa-redo { background-color: #db4064; color: #ffffff; } /* limit embedded videos to chat width */ .chat_converse iframe { max-width: 100% !important; } @keyframes wave { 0%, 60%, 100% { transform: initial; } 30% { transform: translateY(-15px); } } /*Chatbox scrollbar*/ ::-webkit-scrollbar { width: 6px; } ::-webkit-scrollbar-track { border-radius: 0; } ::-webkit-scrollbar-thumb { margin: 2px; border-radius: 10px; background: rgba(0, 0, 0, 0.2); } /*Element state*/ .is-active { -webkit-transform: rotate(180deg); transform: rotate(180deg); -webkit-transition: all 1s ease-in-out; transition: all 1s ease-in-out; } .is-float { box-shadow: 0 0 6px rgba(0, 0, 0, .16), 0 6px 12px rgba(0, 0, 0, .32); } /*Animation*/ @-webkit-keyframes zoomIn { 0% { -webkit-transform: scale(0); transform: scale(0); opacity: 0.0; } 100% { -webkit-transform: scale(1); transform: scale(1); opacity: 1; } } @keyframes zoomIn { 0% { -webkit-transform: scale(0); transform: scale(0); opacity: 0.0; } 100% { -webkit-transform: scale(1); transform: scale(1); opacity: 1; } } @-webkit-keyframes load { 0% { -webkit-transform: scale(0); transform: scale(0); opacity: 0.0; } 50% { -webkit-transform: scale(1.5); transform: scale(1.5); opacity: 1; } 100% { -webkit-transform: scale(1); transform: scale(1); opacity: 0; } } @keyframes load { 0% { -webkit-transform: scale(0); transform: scale(0); opacity: 0.0; } 50% { -webkit-transform: scale(1.5); transform: scale(1.5); opacity: 1; } 100% { -webkit-transform: scale(1); transform: scale(1); opacity: 0; } } @media only screen and (min-width: 360px) and (max-width: 399px) { .chat { width: 275px; } .chat_field { width: 50%; } } @media only screen and (min-width: 400px) and (max-width: 1023px) { .chat_field { width: 50%;/*65%;*/ } } @media only screen and (min-width: 300px) and (max-width: 767px) { .chatbot .chat-box { bottom: 15px; right: 10px; } .chat .chat_converse .chat_msg_item { font-size: 15px; line-height: 20px; } .chat-btn { right: 10px; bottom: 50px; } .chat { width: 300px; bottom: 50px; } } /* safari fixes */ @media (min-width: 375px) and (max-width: 812px) { .chat_converse { height: 280px; max-height: 280px; } .chat-icon { width: 90px!important; height: 90px!important; } .chat-icon button { margin-top: 17px; margin-left: -47px; font-size: 48px!important; } /* Shift comment icon on the left a bit */ /*.chat-icon button.fa-comment-dots { margin: 0 0 0 -5px !important; }*/ } @media (min-width: 768px) and (max-width: 1024px) { .chat-icon { width: 90px!important; height: 90px!important; } .chat-icon button { margin-top: 17px; margin-left: -47px; font-size: 48px!important; } } .footer-bottom ul { list-style: none; padding: 0px 15px 10px; margin: 0; display: flex; align-items: center; } .footer-bottom ul li { display: inline; } .footer-bottom ul li a { font-size: 14px; width: auto; height: auto; } .footer-bottom ul li.powered-by { font-size: 12px; color: #999999; } .footer-bottom ul li.powered-by img { width: 35px; margin: -6px 0px 0px 4px; } .footer-bottom ul li.powered-by a { margin: 0; } .footer-bottom ul li a.play-icon i { color: #118bf1; } /* Make the icon link position relative*/ .chat-icon { position: relative; } /* Make the icon link position absolute and position it in center */ .chat-icon button { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); margin: 0 !important; } /* smaller heading on mobile */ @media (max-width: 614px) { .chat_header h2 { font-size: 16px; } } /* Header Dropdown */ .head-dropdown { display: inline-block; position: relative; } .head-button { border-radius: 50px; cursor: pointer; width: 40px; height: 40px; line-height: 40px; transition: 0.3s all ease-in; font-size: 19px; display: flex; align-items: center; justify-content: center; } .head-button:hover { background-color: rgba(0, 36, 92, 0.16); } .head-input { display: none; } .head-menu { position: absolute; top: 100%; right: -33px; border-radius: 10px; padding: 10px; /* margin: 5px 0px 0px -140px; */ box-shadow: rgb(198 198 198 / 50%) 0px 4px 24px; background-color: #ffffff; list-style-type: none; z-index: 99999; } .head-input + .head-menu { display: none; } .head-input:checked + .head-menu { display: block; } .head-menu li { padding: 8px 20px; cursor: pointer; white-space: nowrap; color: #000; font-weight: normal; text-align: left; } .head-menu li:hover { background-color: #f6f6f6; } .head-menu li a { display: block; margin: -10px -20px; padding: 10px 20px; } .head-menu li.divider{ padding: 0; border-bottom: 1px solid #cccccc; } .head-menu li i { margin-right: 10px; color: #999; } .head-menu li i.fa-star { color: #fbd701; } /*Chatbot Questions*/ .bot-questions { transition: transform 0.2s ease 0s, margin 0.2s ease 0s; /* background: rgb(240, 242, 247);*/ color: #000; clear: both; max-width: 75%; border-radius: 20px; margin-left: 60px; text-align: left; font-size: 17px; /* border: 1px solid rgb(235, 238, 240); */ margin-bottom: 20px; } .bot-questions .question-title h4 { font-size: 17px; font-weight: normal; color: #000; padding: 8px 15px; margin: 0; background: rgb(240, 242, 247); font-family: 'Roboto', sans-serif; border-radius: 8px; } .bot-questions .all-options { background: #fff; border-radius: 20px; border-top-left-radius: 0; border-top-right-radius: 0; margin-top: 15px; } .bot-questions .all-options .option-single { font-size: 16px; font-weight: normal; display: block; color: rgb(0, 125, 252); text-decoration: none; padding: 5px 15px; border: 1px solid rgb(0, 125, 252); margin: 10px 0px; border-radius: 8px; } .bot-questions .all-options .option-single:hover { text-decoration: underline; background: #eef9ff } /* Single questions */ .single-choice { background: transparent !important; text-align: right; } .single-choice .chatbot-choice-button { font-size: 15px; padding: 8px 16px; cursor: pointer; border: 1px solid rgb(0, 125, 252); border-radius: 20px; margin: 3px; background: transparent; color: rgb(0, 125, 252); } .single-choice .chatbot-choice-button:hover { text-decoration: underline; } .chat-box .btn-ok { background: #1677ec; border: none; color: #fff; padding: 5px 15px; border-radius: 20px; margin: 10px 0px; } .chat-box .btn-ok:focus { outline: none; } /* Bot Reload */ .bot-restart { position: absolute; right: 10px; top: 55px; z-index: 999; } .bot-restart button { width: 30px; height: 30px; border: none; background: #cfefff; border-radius: 5px; padding: 0; color: #0ba5f7; cursor: pointer; } /* Country Flag */ .chatbot .iti #chat_telephone { border: none; } .chatbot .iti #chat_telephone:focus { border: none; outline: none; } .chatbot .iti__selected-flag { background-color: transparent !important; } .chatbot .iti { padding: 10px; z-index: 99999; } .chatbot .iti:focus, .chatbot .iti:active { outline: none; border: none; } .chatbot .iti__flag-container:focus, .iti__selected-flag:focus { border: none; outline: none; } /*Emoji Styles .emoji-picker__wrapper { width: 400px; z-index: 99999; left: 140px !important; border: none; bottom: 40px !important; } .emoji-picker__wrapper .emoji-picker.light { width: 100%; height: 300px; border: none; } */ .emoji-picker.light { width: 400px; margin: 10px 0px 0px 90px; border: none; height: 360px; max-height: 350px; background: #fff; } .emoji-picker__wrapper { z-index: 99999; width: 300px; right: 0px !important; left: 0px !important; }