img, iframe {max-width: 100%; height: auto} html,body{-webkit-text-size-adjust:100%;text-size-adjust:100%} div.chat-icon{ display: none; position: fixed; bottom: 32px; right: 32px; z-index: 9; } .web-chat { width: 300px; height: 450px; position: fixed; bottom: 32px; right: 32px; z-index: 999; background-color: none; } .chat-window { height: inherit; background: white; position: relative; box-shadow: 11px 7px 27px -26px rgba(0,0,0,0.15), -11px 23px 27px -26px rgba(0,0,0,0.15); } .chat-header { color: white; height: 80px; user-select: none; display: flex; background-image: linear-gradient(to right, #5597c4, #2487c9) } div.connect-agent,div.wait-message,div.wait-animate { display: none; } .chat-room { } .chat-room.visible { height: 310px; overflow: auto; scrollbar-color: rgb(229, 229, 229) white; scrollbar-width: thin; } div.visible { display: block; } .connect-agent div.time-hold,div.time-hold { text-align: center; margin: 4px 0; } div span.time-message { font-size: 10px; font-weight: normal; font-style: normal; font-stretch: normal; line-height: 1.2; letter-spacing: normal; text-align: right; color: #757575; margin-top: 7px; float: right; } div span.time-info { font-size: 10px; font-weight: normal; font-style: normal; font-stretch: normal; line-height: 1.2; letter-spacing: normal; color: #757575; } div.wait-message { text-align: center; margin: 0 14px; } div.wait-message span{ font-size: 14px; font-weight: normal; font-style: normal; font-stretch: normal; line-height: 1.5; letter-spacing: normal; color: #000000; display: block; } .pulse { margin: 36px auto; display: block; width: 7px; height: 7px; border-radius: 50%; background: #2487c9; cursor: pointer; box-shadow: 0 0 0 rgba(204,169,44, 0.4); animation: pulse 1.3s infinite; } .pulse:hover { animation: none; } @-webkit-keyframes pulse { 0% { -webkit-box-shadow: 0 0 0 0 #d3efdf; } 70% { -webkit-box-shadow: 0 0 0 8px rgba(204,169,44, 0); } 100% { -webkit-box-shadow: 0 0 0 0 rgba(204,169,44, 0); } } @keyframes pulse { 0% { -moz-box-shadow: 0 0 0 0 #d3efdf; box-shadow: 0 0 0 0 #d3efdf; } 70% { -moz-box-shadow: 0 0 0 30px rgba(204,169,44, 0); box-shadow: 0 0 0 30px rgba(204,169,44, 0); } 100% { -moz-box-shadow: 0 0 0 0 rgba(204,169,44, 0); box-shadow: 0 0 0 0 rgba(204,169,44, 0); } } p.find-agent { font-size: 14px; color: #2487c9; text-align: center; margin-top: -23px; } .find-agent span { width: 144px; height: 16px; font-size: 24px; margin-left: 2px; font-weight: normal; font-style: italic; font-stretch: normal; line-height: 1.5; letter-spacing: normal; animation-name: blink; animation-duration: 1.4s; animation-iteration-count: infinite; animation-fill-mode: both; } .find-agent span:nth-child(2) { animation-delay: .2s; } .find-agent span:nth-child(3) { animation-delay: .4s; } @keyframes blink { 0% { opacity: .2; } 20% { opacity: 1; } 100% { opacity: .2; } } div.message-box { display: none; position: absolute; width: 94%; background: white; bottom: 4px; box-sizing: border-box; height: 50px; right: -1px; border-radius: 10px; border: solid 1px #e6e6e6; padding-left: 8px; margin: 0 10px; } div.message-box textarea { border: none; outline: none; padding-left: 4px; padding-top: 15px; width: 90%; resize: none; font-size: 14px; } div.message-box textarea::-webkit-scrollbar { width: 0px; background: transparent; } textarea::-webkit-input-placeholder { padding-top: 2px; } textarea::-moz-input-placeholder { padding-top: 2px; } textarea:-moz-input-placeholder { padding-top: 2px; } textarea:-ms-input-placeholder { padding-top: 2px; } button.send-chat { outline: none; background: none; border: none; } button.send-chat img { vertical-align: middle; cursor: pointer; } div.message-box textarea::-webkit-input-placeholder { font-size: 14px; font-weight: normal; font-style: normal; font-stretch: normal; line-height: 1.14; letter-spacing: normal; text-align: left; color: #aaaaaa; } div.message-box textarea::-moz-placeholder { font-size: 14px; font-weight: normal; font-style: normal; font-stretch: normal; line-height: 1.14; letter-spacing: normal; text-align: left; color: #aaaaaa; } div.message-box textarea:-ms-input-placeholder { font-size: 14px; font-weight: normal; font-style: normal; font-stretch: normal; line-height: 1.14; letter-spacing: normal; text-align: left; color: #aaaaaa; } div.chat-space { display: none; position: relative; } div.joined, p.agent-left { font-size: 14px; font-weight: normal; margin-bottom: 10px; font-style: italic; font-stretch: normal; line-height: 1.5; letter-spacing: normal; text-align: center; color: #aaaaaa; } div.system-m { margin-bottom: 3px; font-size: 14px; font-style: italic; font-stretch: normal; line-height: 1.5; letter-spacing: normal; text-align: center; color: #aaaaaa; } div.system-messages { font-size: 12px; font-weight: normal; margin-bottom: 10px; font-family: 'SFProTextRegular', '-apple-system', 'BlinkMacSystemFont', 'sans-serif'; font-stretch: normal; line-height: 1.5; letter-spacing: normal; text-align: center; } p.agent-left { margin-bottom: 5px; padding: 0 5px; } .chat-left { text-align: center; display: none; clear: both; } .chat-note { font-size: 14px; font-weight: normal; font-style: normal; font-stretch: normal; line-height: 1.5; letter-spacing: normal; text-align: center; color: #000000; margin-top: 0; padding: 0 15px; } div.incom-message{ padding: 9px; clear: both; } span.agent-name { font-family: 'SFProTextRegular', '-apple-system', 'BlinkMacSystemFont', 'sans-serif'; vertical-align: top; font-size: 14px; font-weight: 600; font-style: normal; margin-left: -4px; font-stretch: normal; line-height: 1.43; letter-spacing: normal; text-align: left; color: #000000; } .incom-message img { width: 35px; height: 35px; } div.in-message-text { } div.in-message-text p { font-family: 'SFProTextRegular', '-apple-system', 'BlinkMacSystemFont', 'sans-serif'; margin: 0; font-size: 14px; margin-left: 42px; margin-top: -15px; margin-bottom: 10px; word-break: break-word; max-width: 220px; float: left; white-space: pre-line; background-color: #f5f5f6; padding: 15px; border-radius: 10px; } div.out-message { margin-top: 6px; float: right; margin-right: 10px; clear: both; position: relative; } div.out-message.add-out-top { margin-top: -3px; } .out-message p { font-size: 14px; margin-left: 36px; margin-top: -15px; max-width: 222px; word-break: break-word; white-space: pre-line; float: left; background-color: #d5fcd5; padding: 15px; border-radius: 10px; } .chat-description { width: 70%; padding: 20px 0 0 20px; } main .chat-description h4, main .chat-description h5 { margin: 0; } .chat-description h5, .chat-description h4 { color: #fff; } .chat-description h5 { font-weight: normal; } .chat-controls { display: flex; width: 30%; justify-content: flex-end; padding-right: 15px; padding-top: 12px; } div.collapse-chat,div.close-chat { cursor: pointer; align-content: baseline; } div.leave { text-align: center; } .m-status { position: absolute; font-size: 10px; bottom: 0; right: 14px; color: #2487c9; } span.user-w { border-radius: 50%; width: 35px; height: 35px; background-color: #555fb8; display: inline-block; margin-right: 10px; line-height: 34px; color: white; text-align: center; } div.in-message-text { margin-top: 5px; } .add-m-top div.in-message-text { margin-top: 0px; } div.messages .out-message.seen-m{ margin-bottom: 15px; } .m-status-seen { position: absolute; font-size: 10px; bottom: 0; right: 11px; color: #2487c9; } .leave-chat, .declined-chat { width: 127.1px; height: 30px; outline: none; border: solid 1px #2487c9; background-color: #2487c9; font-size: 14px; font-style: normal; font-stretch: normal; line-height: 1.14; letter-spacing: normal; text-align: center; color: #ffffff; border-radius: 20px; } .leave-chat { border: solid 1px #e74c3c; background-color: #e74c3c; } .modal-btn { text-align: right; padding-right: 15px; padding-top: 10px; } div.modal-content { width: 260px; height: 189px; margin: 150px auto 0; background: white; font-size: 14px; } div.popup-text { text-align: center; padding: 0 20px; } .w3-animate-top { position: relative; animation: animatetop 0.4s; } @keyframes animatetop { from {opacity: 0} to {opacity: 1} } div.close-modal { display: none; border-top-right-radius: 20px; border-top-left-radius: 20px; position: absolute; z-index: 1; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: rgb(0,0,0); background-color: rgba(0,0,0,0.4); } .typing { position: absolute; bottom: 36px; } .chat-notification { position: absolute; left: 42px; top: -5px; display: none; object-fit: contain; font-size: 12px; font-weight: 500; width: 20px; height: 20px; border-radius: 50%; opacity: 1; box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16); background-color: #e74c3c; font-style: normal; font-stretch: normal; line-height: 1.5; letter-spacing: normal; text-align: center; color: #ffffff; z-index: 9999; } .typing p.find-agent { font-size: 12px; color: #2487c9; margin-left: 14px; clear: both; text-align: left; } .collapse-chat img { width: 12px; height: 2px; vertical-align: bottom; } .close-chat img{ width: 10.6px; height: 10.6px; margin-left: 14px; } .start-chat { width: 260px; position: relative; height: 169px; border-radius: 3px; border: solid 1px rgba(234, 237, 243, 0.6); margin: 181px auto 20px auto; } p.chat-greeting { width: 211px; height: 37px; font-size: 14px; font-weight: normal; font-style: normal; font-stretch: normal; line-height: 1.5; letter-spacing: normal; color: #000000; margin: 20px 29px 20px 20px; } div.chat-intro input::-webkit-input-placeholder { font-size: 14px; font-weight: normal; font-style: italic; font-stretch: normal; line-height: 1.5; letter-spacing: normal; text-align: left; color: #9ea0a5; } div.chat-intro input::-moz-placeholder { font-size: 14px; font-weight: normal; font-style: italic; font-stretch: normal; line-height: 1.5; letter-spacing: normal; text-align: left; color: #9ea0a5; } div.chat-intro input{ border: none; border-bottom: 1px solid #d0d0d0; width: 214px; } input:focus { outline: none; } div.chat-intro { margin-left: 21px; } div.btn-container { margin-top: 17px; text-align: center; } button.chat-btn { outline: none; padding-top: 0; width: 116px; height: 30px; background: none; border-radius: 20px; border: solid 1px #2487c9; font-size: 14px; font-weight: 500; font-style: normal; font-stretch: normal; line-height: 1.14; letter-spacing: normal; text-align: center; color: #2487c9; transition: background-color .3s linear, color .3s linear; } button.chat-btn:hover { background-color: #2487c9; color: white; } div.chat-intro input:-ms-input-placeholder { font-size: 14px; font-weight: normal; font-style: italic; font-stretch: normal; line-height: 1.5; letter-spacing: normal; text-align: left; color: #9ea0a5; } div.chat-intro input::-moz-placeholder { font-size: 14px; font-weight: normal; font-style: italic; font-stretch: normal; line-height: 1.5; letter-spacing: normal; text-align: left; color: #9ea0a5; } label { display: inline-block; margin-bottom: .5rem; line-height: 21px; margin-top: 12px; } ::-webkit-scrollbar { width: 4px; background: transparent; } ::-webkit-scrollbar-thumb { background-color: rgba(0, 0, 0, 0.3); } .italic { font-style: italic!important; } .text-xs { font-size: .72rem!important; } .text-red-500 { color: #f56565!important; position: absolute; top: -17px; right: 34px; } .border-red-500 { border-color: #f56565!important; } form { height: 432px; } button, input { overflow: visible; } .w-full { width: 100%!important; } .max-w-xs { max-width: 20rem!important; margin: 0 auto; } .mb-4 { margin-bottom: 1rem!important; } .shadow-md { box-shadow: 0 4px 6px -1px rgba(0,0,0,.1),0 2px 4px -1px rgba(0,0,0,.06)!important; } .pb-8 { padding-bottom: 2rem!important; } .pt-6 { padding-top: 1.5rem!important; } .px-8 { padding-left: 2rem!important; padding-right: 2rem!important; } .mb-4 { margin-bottom: 1rem!important; } .rounded { border-radius: .25rem!important; } .bg-white { background-color: #fff!important; } .h3, h3 { font-size: 1.75rem; } h3.login { text-align: center; margin-bottom: 21px; } .font-bold { font-weight: 700!important; } .block { display: block!important; } .text-gray-700 { color: #4a5568!important; } #resizable { background-color: transparent; width: 10px; height: 10px; cursor: se-resize; position: absolute; left: 0; top: 0; } .shadow { box-shadow: 0 1px 3px 0 rgba(0,0,0,.1),0 1px 2px 0 rgba(0,0,0,.06)!important; } .px-3 { padding-left: .75rem!important; padding-right: .75rem!important; } .py-2 { padding-top: .5rem!important; padding-bottom: .5rem!important; } .leading-tight { line-height: 1.25!important; } .border { border-width: 1px!important; } .rounded { border-radius: .25rem!important; } .appearance-none { -webkit-appearance: none!important; -moz-appearance: none!important; appearance: none!important; }