#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 */ } /*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; } .chat-bottom div button { color: #343434; transition: 0.4s all ease-in; cursor: pointer; font-size: 18px; } button.fa-paper-plane { border: none; padding: 0; background: none; height: 30px; } .chatbot { font-family: 'Poppins', sans-serif; /*background-color: #f4faff; height: 100vh; display: flex; justify-content: center; align-items: center;*/ } .chatbot .chat-box { bottom: 20px; position: fixed; margin: 1em; right: 0; z-index: 10998; } .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: #1B9AEE; } .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_header { text-align: center; font-weight: 500; color: #fff; height: 55px; background: #1B9AEE; border-top-left-radius: 10px; border-top-right-radius: 10px; display: flex; align-items: center; justify-content: center; } .chat_header h3 { font-size: 2.5em; margin: 0; } .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: 50%; font-size: 14px; line-height: 30px; font-weight: 500; color: #4b4b4b; -webkit-font-smoothing: antialiased; font-smoothing: antialiased; border: none; outline: none; display: inline-block; } .chat_field.chat_message { height: 30px; resize: none; font-size: 14px; line-height: 20px; font-weight: 400; } .chat-bottom { width: 100%; display: inline-block; text-align: center; background: #fff; border-top: 1px solid #eee; border-bottom-right-radius: 10px; border-bottom-left-radius: 10px; } .chat-bottom { display: flex; justify-content: space-between; padding: 0 10px 0 20px; } .chat-bottom .camera-icon { float: left; background: rgba(0, 0, 0, 0); } .chat-bottom .send-icon { display: inline-block; 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: #1B9AEE; } .chat-bottom div button:hover { color: #f16e00; } .chat_converse:focus, button.fas:focus, .chat_message:focus { outline: .2rem solid #F8630D; } .chat-icon button:focus { outline: none !important; box-shadow: 0 0 3pt 2pt #F8630D; } .chat-icon { padding: 3px; } .chat_converse { position: relative; background: #fff; margin: 0; /*margin: 6px 0 0px 0;*/ height: 300px; min-height: 0; font-size: 14px; line-height: 25px; overflow-y: auto; width: 100%; float: right; padding-bottom: 50px; } .chat .chat_converse .chat_msg_item { position: relative; margin: 8px 0 15px 0; padding: 8px 10px; max-width: 60%; display: block; word-wrap: break-word; border-radius: 3px; -webkit-animation: zoomIn .5s cubic-bezier(.42, 0, .58, 1); animation: zoomIn .5s cubic-bezier(.42, 0, .58, 1); clear: both; z-index: 10999; } .chat_converse .status { margin: 45px -50px 0 0; float: right; font-size: 11px; opacity: 0.75; } . chat_converse .status2 { margin: -10px 20px 0 0; float: right; display: block; font-size: 11px; opacity: 0.75; 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: rgba(0, 0, 0, 0.03); } .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: rgba(0, 0, 0, 0.03); color: #666; } .chat .chat_converse .chat_msg_item.chat_msg_item_user { margin-right: 20px; float: right; background: #1B9AEE; 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: 30px; display: flex; width: 100%; align-items: center; } #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: /*#1B9AEE*/#105478; } @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) { .chat { width: 275px; } .chat_field { width: 80%;/*65%;*/ } } @media only screen and (min-width: 400px) { .chat { width: 300px; } } /* TABLETS PORTRAIT */ @media only screen and (min-width: 768px) { .chat { width: 300px; } .chat_field { width: 80%;/*65%;*/ } } /* TABLET LANDSCAPE / DESKTOP */ @media only screen and (min-width: 1024px) { .chat { width: 300px; } .chat_field { width: 80%; } } /* safari fixes */ @media (min-width: 375px) and (max-width: 812px){ .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; } } /* 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; }