body[data-v-a54b054c]{margin-top:20px}.chat-online[data-v-a54b054c]{color:#34ce57}.chat-offline[data-v-a54b054c]{color:#e4606d}.chat-messages[data-v-a54b054c]{display:flex;flex-direction:column;max-height:800px;overflow-y:scroll}.chat-message-left[data-v-a54b054c],.chat-message-right[data-v-a54b054c]{display:flex;flex-shrink:0}.chat-message-left[data-v-a54b054c]{margin-right:auto}.chat-message-right[data-v-a54b054c]{flex-direction:row-reverse;margin-left:auto}.py-3[data-v-a54b054c]{padding-top:1rem!important;padding-bottom:1rem!important}.px-4[data-v-a54b054c]{padding-right:1.5rem!important;padding-left:1.5rem!important}.flex-grow-0[data-v-a54b054c]{flex-grow:0!important}.border-top[data-v-a54b054c]{border-top:1px solid #dee2e6!important}.message-container-block[data-v-a54b054c]{margin-bottom:30px;display:flex;height:74vh;width:100%;background:#fff;box-shadow:0 10px 22px rgba(0,0,0,.08);border-radius:8px}.message-container-block .message-contact[data-v-a54b054c]{padding:30px;display:flex;flex-direction:column;width:24%;height:100%;border-right:1px solid #efefef}.message-container-block .chat-container[data-v-a54b054c]{display:flex;flex-direction:column;width:76%;height:100%}.message-contact .search-contact[data-v-a54b054c]{width:100%;height:30px}.search-contact input[data-v-a54b054c]{padding:5px;width:100%;height:100%;border-radius:4px;border:1px solid #efefef;outline:none;background:transparent}.message-contact .contact-contain[data-v-a54b054c]{margin-top:50px;display:flex;flex-direction:column;width:100%;height:auto}.contact-contain .contact-item[data-v-a54b054c]{margin-bottom:25px;display:flex;align-items:center;width:100%;height:auto;cursor:pointer}.contact-item .avatar-contact[data-v-a54b054c]{height:50px;width:50px;border-radius:50%;background:teal}.avatar-contact img[data-v-a54b054c]{height:50px;width:50px;border-radius:50%;-o-object-fit:cover;object-fit:cover}.contact-item .contact-info[data-v-a54b054c]{padding-left:10px;display:flex;align-items:center;width:calc(100% - 50px);height:auto}.contact-info .info-user[data-v-a54b054c]{display:flex;flex-direction:column;height:100%;width:auto}.info-user .contact-name[data-v-a54b054c]{font-weight:600}.info-user .contact-message[data-v-a54b054c]{font-size:.85rem;line-height:1rem}.contact-info .unread-message[data-v-a54b054c]{display:inline-flex;align-items:center;justify-content:center;height:30px;width:30px;background:#f5365c;color:#fff;font-weight:700;text-align:center}.chat-container-header[data-v-a54b054c]{padding:10px 5%;display:flex;justify-content:space-between;align-items:center;height:75px;width:100%;border-bottom:1px solid #efefef}.chat-container-header .active-contact[data-v-a54b054c]{display:flex;align-items:center}.active-contact img[data-v-a54b054c]{margin-right:10px;height:50px;width:50px;border-radius:50%;-o-object-fit:cover;object-fit:cover}.active-contact span[data-v-a54b054c]{font-size:1rem;font-weight:600}.chat-container-header .controls[data-v-a54b054c]{display:flex;align-items:center;height:100%}.controls div[data-v-a54b054c]{padding:8px;font-size:1rem;cursor:pointer;border-radius:5px;transition:.1s ease;color:#707070}.controls div[data-v-a54b054c]:hover{background:#f0f0f0;color:#191c22}.controls div i[data-v-a54b054c]{margin-right:5px}.controls div[data-v-a54b054c]:first-child{margin-right:10px}.chat-container .chat-area[data-v-a54b054c]{padding:5%;height:calc(100% - 150px);width:100%;overflow-y:auto}.chat-area .message-item.right[data-v-a54b054c],.chat-area .message-item[data-v-a54b054c]{display:flex;align-items:center;height:auto;width:100%}.chat-area .message-item.right[data-v-a54b054c]{justify-content:flex-end}.message-item img[data-v-a54b054c]{margin-right:5px;height:30px;width:30px;-o-object-fit:cover;object-fit:cover;border-radius:50%}.message-item p[data-v-a54b054c]{padding:20px;height:auto;width:auto;max-width:700px;border-radius:8px;background:#f0f0f0}.chat-area .message-item.right p[data-v-a54b054c]{background:#efefef}.chat-container .chat-container-bottom[data-v-a54b054c]{padding:10px 5%;display:flex;justify-content:center;align-items:center;height:75px;width:100%;border-top:1px solid #efefef}.chat-container-bottom input[data-v-a54b054c]{padding-left:10px;width:calc(100% - 110px);height:90%;background:#efefef;border-radius:4px;border:none;transition:.1s ease}.chat-container-bottom input[data-v-a54b054c]:focus{background:#ddd}.chat-container-bottom button[data-v-a54b054c]{margin-left:10px;width:100px;height:90%;background:#f5365c;border-radius:4px;border:none;color:#fff}.chat-container-bottom button i[data-v-a54b054c]{margin-right:5px}@media only screen and (max-width:800px){.chat-container[data-v-a54b054c],.message-container-block .message-contact[data-v-a54b054c]{display:none}.message-container-block .message-contact.visible[data-v-a54b054c]{padding:30px;display:flex;width:100%;animation:rightToLeft-a54b054c .5s}.message-container-block .chat-container.visible[data-v-a54b054c]{display:flex;width:100%;animation:leftToRight-a54b054c .5s}@keyframes leftToRight-a54b054c{0%{transform:translateX(200px)}to{transform:translateX(0)}}@keyframes rightToLeft-a54b054c{0%{transform:translateX(-200px)}to{transform:translateX(0)}}.contact-contain .contact-item[data-v-a54b054c]{padding-bottom:10px;border-bottom:1px solid #f0f0f0}.message-item p[data-v-a54b054c]{padding:10px 20px;height:auto;width:auto;max-width:85%;text-align:left}.chat-area .message-item.right p[data-v-a54b054c]{background:#7a7a7a;text-align:right;color:#fff}.chat-container-header[data-v-a54b054c]{padding:10px 5%;display:flex;justify-content:space-between;align-items:center;height:55px}.chat-container .chat-area[data-v-a54b054c]{height:calc(100% - 130px)}.active-contact img[data-v-a54b054c]{margin-right:5px;height:30px;width:30px}.controls div[data-v-a54b054c]{padding:0;font-size:1rem;transition:none;color:#191c22}.controls div[data-v-a54b054c]:first-child{margin-right:5px}.controls div span[data-v-a54b054c]{display:none}.controls div[data-v-a54b054c]:hover{background:transparent;color:#191c22}}