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;}