img, iframe {max-width: 100%; height: auto} html,body{-webkit-text-size-adjust:100%;text-size-adjust:100%} .webchat .container { width: 100%; padding-right: 15px; padding-left: 15px; margin-right: auto; margin-left: auto; } .webchat h4, .webchat h5, .webchat h6 { margin-top: 0; margin-bottom: 0; text-transform: none; } div.chat-icon{ display: block; position: fixed; bottom: 32px; right: 32px; z-index: 9; } div.chat-icon.hidden { display: none; } .web-chat { width: 300px; height: 450px; position: fixed; bottom: 32px; right: 32px; z-index: 9999; } .web-chat.hidden { display: none; } .chat-window { height: inherit; background: white; position: relative; border: solid 1px #CCC; border-radius: 20px 20px 0 0; } .chat-header { color: white; padding: 0 0 20px 0; position: relative; user-select: none; border-top-right-radius:20px; border-top-left-radius:20px; display: flex; background-color: #f44730; } div.connect-agent,div.wait-message,div.wait-animate { display: none; } .scroll-down { user-select: none; display: none; position: absolute; bottom: 86px; right: 5px; cursor: pointer; width: 20px; height: 20px; z-index: 2; } .scroll-down.unseen-tab { right: 20px; } .chat-room.visible { height: 305px; overflow: auto; scrollbar-color: rgb(229, 229, 229) white; scrollbar-width: thin; } div.in-message-text svg, div.out-message svg { width: 30px; height: 35px; } div.create-message { padding: 9px; clear: both; } #notification-toast { visibility: hidden; max-width: 194px; background-color: #fcbb39; color: #fff; text-align: center; border-radius: 2px; padding: 16px; position: absolute; z-index: 1; right: 30px; top: 81px; font-size: 13px; } div.in-message-text p span:first-of-type, .out-message p span:first-of-type { white-space: break-spaces; } #notification-toast.show { visibility: visible; content: ""; display: table; clear: both; -webkit-animation: fadein 0.5s, fadeout 0.5s 2.5s; animation: fadein 0.5s, fadeout 0.5s 2.5s; } @-webkit-keyframes fadein { from {bottom: 0; opacity: 0;} to {bottom: 30px; opacity: 1;} } @keyframes fadein { from {bottom: 0; opacity: 0;} to {bottom: 30px; opacity: 1;} } div.file-info .message-txt { display: block; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 153px; } .deleted-file div.file-info { opacity: 0.5; pointer-events: none; } div.file-info{ overflow: hidden; font-size: 14px; margin: 0; margin-left: 42px; margin-top: -15px; margin-bottom: 10px; word-break: break-word; max-width: 220px; float: left; background-color: #f5f5f6; padding: 15px; border-radius: 10px; } .out-message div.file-info.preview { background-color: transparent; border-radius: 10px 10px 0; } div.file-info.preview { display: flex; flex-direction: column; justify-content: center; position: relative; padding: 0; align-items: center; min-width: 90px; height: 250px; background-color: transparent; max-width: 250px!important; max-height: 250px!important; border: 1px solid rgba(0,0,0,.05); } .file div.file-info img { max-width: 250px; max-height: 250px; width: auto; height: auto; border-radius: 0 10px 10px; margin-right: 0; } div.media-content { height: calc(100% - 60px); display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 10px; } .incom-message.file div.file-info img { max-width: 240px; max-height: 240px; width: auto; height: auto; border-radius: 0 10px 10px; margin-right: 0; } div.file-info.preview span.time-message { position: absolute; color: #fff; right: 7px; bottom: 7px; background: #2c2c2c; opacity: .5; border-radius: 7px; font-size: 10px; line-height: 17px; height: 17px; text-align: center; align-items: center; padding: 0 2px; } .out-message div.file-info { background-color: #d5fcd5; margin-bottom: 14px; } div.file-txt { position:relative; display: inline-block; float: left; margin-right: 15px; } .out-message .file-txt { float: left; } div.file-info a { position: relative; height: 100%; display: block; } span.file-desc { height: 14px; -o-object-fit: contain; object-fit: contain; font-weight: 400; font-stretch: normal; font-style: normal; line-height: 14px; letter-spacing: normal; text-align: left; color: #757575; font-size: 12px; padding-right: 2px; } .file-info a span { text-transform: uppercase; color: #757575; max-width: 38px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 9px; height: 14px; margin: auto; position: absolute; top: 0; left: 0; text-align: center; bottom: 0; right: 1px; } span.wr-file { height: 100%; display: flex; align-items: center; justify-content: center; cursor: pointer; overflow: hidden; position: relative; } .webchat input[type='file'] { opacity: 0; overflow: hidden; position: absolute; z-index: 2; cursor: pointer; } .webchat input[type='file']::after { content: ''; cursor: pointer; position: absolute; top: 5px; left: 0; width: 100%; height: 100%; display: block; } .webchat 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: #f44730; 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: #f44730; 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; } .webchat textarea::-webkit-input-placeholder { padding-top: 2px; } .webchat textarea::-moz-input-placeholder { padding-top: 2px; } .webchat textarea:-moz-input-placeholder { padding-top: 2px; } .webchat 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; overflow: auto; 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-stretch: normal; line-height: 1.5; letter-spacing: normal; text-align: center; margin-left: 10px; margin-right: 10px; } 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 { 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 p { 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; font-size: 16px; } .chat-description h5{ font-size: 16px; font-weight: 400; } .chat-description h5,.chat-description h4 { margin-bottom: .1rem; } .chat-controls { display: flex; width: 30%; justify-content: flex-end; padding-right: 15px; padding-top: 12px; } div.collapse-chat,div.close-chat { cursor: pointer; } div.leave { text-align: center; } .m-status { position: absolute; font-size: 10px; bottom: 0; right: 14px; color: #f44730; } 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; } div.messages .out-message.seen-m:last-of-type{ margin-bottom:0; } .m-status-seen { position: absolute; font-size: 10px; bottom: 0; right: 11px; color: #f44730; } .close-modal-reconnect .popup-text { margin-top: 30px; } .leave-chat, .declined-chat,.leave-chat-recon { width: 127.1px; height: 30px; outline: none; border: solid 1px #f44730; background-color: #f44730; 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, .leave-chat-recon { 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, div.close-modal-reconnect { 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; } .typing p.find-agent { font-size: 12px; color: #e74c3c; margin-left: 14px; clear: both; text-align: left; } .collapse-chat img { width: 12px; height: 2px; vertical-align: middle; } .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; } .webchat input:focus { outline: none; } div.chat-intro { margin-left: 21px; } div.btn-container { margin-top: 17px; text-align: center; } button.chat-btn, .continue-chat { outline: none; padding-top: 0; width: 116px; height: 30px; background: none; border-radius: 20px; border: solid 1px #e74c3c; font-size: 14px; font-weight: 500; font-style: normal; font-stretch: normal; line-height: 1.14; letter-spacing: normal; text-align: center; color: #e74c3c; transition: background-color .3s linear, color .3s linear; } button.chat-btn:hover { background-color: #e74c3c; 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; } .webchat 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: -10px; right: -28px; width: 100%; } .border-red-500 { border-color: #f56565!important; } .webchat form { height: 432px; } .webchat button, .webchat 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; } .modal { display:none; pointer-events: none; top: 0; left: 0; height: 100%; width: 100%; position: fixed; z-index: 1000; } .showing.modal { display: block; } .showing .modal-container { opacity:1; } .modal-container { position: absolute; top: 0; bottom: 0; left: 0; right: 0; background: rgba(0, 0, 0, 0.32); pointer-events: auto; -webkit-tap-highlight-color: transparent; transition: opacity 400ms cubic-bezier(0.25, 0.8, 0.25, 1); opacity: 0; } .im-cont-modal { display: flex; position: absolute; z-index: 1000; pointer-events: none; top: 0; left: 0; height: 100%; width: 100%; justify-content: center; align-items: center; } .modal-box { max-width: 80vw; pointer-events: auto; width: 80%; height: 80%; position: static; box-sizing: border-box; z-index: 1000; display: flex; justify-content: center; max-height: 100%; } div.modal-header { display: flex; width: 100%; height: 60px; padding: 15px 0px; justify-content: center; } div.img-holder { background: #000000; position: relative; display: flex; flex-direction: column; height: 100%; width: 100%; } .cdk-overlay-dark-backdrop { background: rgba(0, 0, 0, 0.32); } .closeimg { position: absolute; top: 15px; right: 35px; color: #f1f1f1; font-size: 40px; font-weight: bold; transition: 0.3s; } @media only screen and (max-width: 700px){ .modal-box .modal-contents { width: 100%; } } @media only screen and (max-width: 360px){ .web-chat { width: 300px; height: 450px; position: fixed; bottom: 32px; right: 5px; z-index: 9; } } #caption { color: #fff; font-size: 12px; } div.cursor-hand { display: flex; position: absolute; right: 4px;cursor: pointer!important; width: 28px; height: 28px; } div.modal-img { min-width: 350px; min-height: 350px; display: flex; justify-content: center; align-items: center; } .modal-img img { max-width: 100%; max-height: 100%; } .modal-contents, #caption { -webkit-animation-name: zoom; -webkit-animation-duration: 0.6s; animation-name: zoom; animation-duration: 0.6s; } @-webkit-keyframes zoom { from {-webkit-transform:scale(0)} to {-webkit-transform:scale(1)} } @keyframes zoom { from {transform:scale(0)} to {transform:scale(1)} }