Your IP : 216.73.217.77
.card.lw-whatsapp-chat-block-container {
@media (max-width: 767px) {
position: absolute;
top: 0;
left: 0;
z-index: 1;
// height: 100vh;
width: 100vw;
.lw-whatsapp-chat-window {
padding: 0;
.chat-container {
.card-body {
padding: 0;
}
.conversation {
padding: 0 12px;
.conversation-container {
// height: calc(100vh - 175px);
height: calc(100vh - 380px);
}
}
.user-bar {
min-height: 80px;
padding: 20px;
margin-top: -1px;
}
}
}
.lw-contacts-header {
padding: 0;
background-color: #004e45;
color: white;
}
.lw-contact-list-block,
.lw-contact-crm-block {
position: fixed;
height: 100vh;
width: 100vw;
z-index: 2;
margin: 0;
background-color: rgb(255 255 255 / 88%);
backdrop-filter: blur(3px);
}
.lw-contact-crm-block {
right: 0;
padding: 40px;
}
}
@media (min-width: 768px) {
.lw-contact-list-block,
.lw-contact-crm-block {
display: block !important;
height: 90vh;
overflow: auto;
}
}
.lw-whatsapp-chat-window {
.marvel-device .screen {
text-align: left;
}
.screen-container {
height: 100%;
}
/* Status Bar */
.status-bar {
height: 25px;
background: #004e45;
color: #fff;
font-size: 14px;
padding: 0 8px;
}
.status-bar:after {
content: "";
display: table;
clear: both;
}
.status-bar div {
float: right;
position: relative;
top: 50%;
transform: translateY(-50%);
margin: 0 0 0 8px;
font-weight: 600;
}
/* Chat */
.chat {
height: calc(100% - 69px);
}
.chat-container {
height: 100%;
}
/* User Bar */
.user-bar {
min-height: 55px;
background: #005e54;
color: #fff;
padding: 8px;
font-size: 24px;
position: relative;
z-index: 1;
border-top-left-radius: 4px;
border-top-right-radius: 4px;
width: 100%;
}
.user-bar:after {
content: "";
display: table;
clear: both;
}
.user-bar div {
float: left;
position: relative;
}
.user-bar .actions {
float: right;
margin: 0 0 0 20px;
}
.user-bar .actions.more {
margin: 0 12px 0 32px;
}
.user-bar .actions.attachment {
margin: 0 0 0 30px;
}
.user-bar .actions.attachment i {
display: block;
transform: rotate(-45deg);
}
.user-bar .avatar {
margin: 0 0 0 5px;
width: 36px;
height: 36px;
}
.user-bar .avatar img {
border-radius: 50%;
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1);
display: block;
width: 100%;
}
.user-bar .name {
font-size: 17px;
font-weight: 600;
text-overflow: ellipsis;
letter-spacing: 0.3px;
margin: 0 0 0 8px;
overflow: hidden;
width: 50%;
}
.user-bar .status {
display: block;
font-size: 13px;
font-weight: 400;
letter-spacing: 0;
}
/* Conversation */
.conversation {
height: calc(100% - 12px);
position: relative;
// background: #efe7dd url("../../imgs/wa-chat-message-bg.jpeg") repeat;
background: #f1e9df url("../../imgs/wa-message-bg-faded.png") repeat;
z-index: 0;
padding-bottom: 25px;
border-bottom-left-radius: 4px;
border-bottom-right-radius: 4px;
}
.conversation ::-webkit-scrollbar {
transition: all 0.5s;
width: 5px;
height: 1px;
z-index: 10;
}
.conversation ::-webkit-scrollbar-track {
background: transparent;
}
.conversation ::-webkit-scrollbar-thumb {
background: #b3ada7;
}
.lw-chat-message-item {
width: 100%;
}
.conversation .conversation-container {
box-shadow: inset 0 10px 10px -10px #000000;
overflow-x: hidden;
padding: 0 16px;
margin-bottom: 5px;
height: calc(80vh - 100px);
scroll-behavior: smooth;
display: flex;
// flex-wrap: wrap;
width: 100%;
flex-direction: column-reverse;
@supports (font: -apple-system-body) {
}
.conversation-container-chats {
width: 100%;
@supports (font: -apple-system-body) {
height: -webkit-fill-available;
}
}
}
.conversation .conversation-container:after {
content: "";
display: table;
clear: both;
}
/* Messages */
.message {
color: #000;
clear: both;
line-height: 18px;
font-size: 15px;
padding: 8px;
position: relative;
margin: 8px 0;
max-width: 85%;
word-wrap: break-word;
}
.message:after {
position: absolute;
content: "";
width: 0;
height: 0;
border-style: solid;
}
.metadata {
display: inline-block;
float: right;
padding: 0 0 0 7px;
position: relative;
bottom: -4px;
}
.metadata .time {
color: rgba(0, 0, 0, 0.45);
font-size: 11px;
display: inline-block;
}
.metadata .tick {
display: inline-block;
margin-left: 2px;
position: relative;
top: 4px;
height: 16px;
width: 16px;
}
.metadata .tick svg {
position: absolute;
transition: 0.5s ease-in-out;
}
.metadata .tick svg:first-child {
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-transform: perspective(800px) rotateY(180deg);
transform: perspective(800px) rotateY(180deg);
}
.metadata .tick svg:last-child {
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-transform: perspective(800px) rotateY(0deg);
transform: perspective(800px) rotateY(0deg);
}
.metadata .tick-animation svg:first-child {
-webkit-transform: perspective(800px) rotateY(0);
transform: perspective(800px) rotateY(0);
}
.metadata .tick-animation svg:last-child {
-webkit-transform: perspective(800px) rotateY(-179.9deg);
transform: perspective(800px) rotateY(-179.9deg);
}
.message:first-child {
margin: 16px 0 8px;
}
.message.received {
background: #fff;
border-radius: 0px 5px 5px 5px;
float: left;
}
.message.received .metadata {
padding: 0 0 0 16px;
}
.message.received:after {
border-width: 0px 10px 10px 0;
border-color: transparent #fff transparent transparent;
top: 0;
left: -9px;
}
.message.sent {
background: #e1ffc7;
border-radius: 5px 0px 5px 5px;
float: right;
}
.lw-highlight-replied-message {
background: rgba(194, 237, 114, 0.5);
}
.message.sent:after {
border-width: 0px 0 10px 10px;
border-color: transparent transparent transparent #e1ffc7;
top: 0;
right: -9px;
}
/* Compose */
.conversation-compose {
display: flex;
flex-direction: row;
align-items: flex-end;
height: 50px;
width: 100%;
z-index: 2;
}
.conversation-compose > div,
.conversation-compose input {
background: #fff;
height: 100%;
}
.conversation-compose .emoji {
display: flex;
align-items: center;
justify-content: center;
background: white;
border-radius: 5px 0 0 5px;
flex: 0 0 auto;
margin-left: 8px;
width: 10px;
}
.conversation-compose .input-msg {
border: 0;
flex: 1 1 auto;
font-size: 16px;
margin: 0;
outline: none;
min-width: 50px;
border-radius: 0;
}
.conversation-compose .photo {
flex: 0 0 auto;
text-align: center;
position: relative;
width: 48px;
border-radius: 0;
}
.conversation-compose .photo:after {
border-width: 0px 0 10px 10px;
border-color: transparent transparent transparent #fff;
border-style: solid;
position: absolute;
width: 0;
height: 0;
content: "";
top: 0;
right: -9px;
}
.conversation-compose .photo .lw-whatsapp-bar-icon-btn i {
display: block;
color: #7d8488;
font-size: 24px;
transform: translate(-50%, -50%);
position: relative;
top: 50%;
left: 50%;
}
.conversation-compose .send {
background: transparent;
border: 0;
cursor: pointer;
flex: 0 0 auto;
margin-left: 8px;
margin-right: 8px;
padding: 0;
position: relative;
outline: none;
}
.conversation-compose .send .circle {
background: #008a7c;
border-radius: 50%;
color: #fff;
position: relative;
width: 48px;
height: 48px;
display: flex;
align-items: center;
justify-content: center;
}
.conversation-compose .send .circle i {
font-size: 24px;
margin-left: 5px;
}
/* Small Screens */
@media (max-width: 767px) {
.marvel-device.nexus5 {
border-radius: 0;
flex: none;
padding: 0;
max-width: none;
overflow: hidden;
height: 100%;
width: 100%;
}
.marvel-device > .screen .chat {
visibility: visible;
}
.marvel-device {
visibility: hidden;
}
.marvel-device .status-bar {
display: none;
}
.screen-container {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
padding: 0 18px;
}
.conversation {
height: calc(100vh - 220px);
}
.conversation .conversation-container {
height: calc(100vh - 250px);
}
}
.lw-contact-list-header {
label.lw-contact-list-label-tag.active {
padding: 8px;
}
}
.lw-contact-list {
height: calc(80vh - 160px);
position: relative;
overflow: auto;
.lw-contact-list-item-selected {
background-color: rgb(113 113 113 / 18%) !important;
}
.lw-contact {
border-bottom: 1px solid #e9ecef !important;
padding: 4px 12px;
border-radius: 4px;
.badge {
text-transform: none;
}
.badge.rounded-pill {
border-radius: 50%;
width: 26px;
height: 26px;
line-height: inherit;
}
h2 {
margin-bottom: 2px;
}
.lw-contact-avatar {
height: 2.5em;
width: 2.5em;
object-fit: cover;
border-radius: 50%;
margin-right: 16px;
}
}
}
.message {
box-shadow: rgba(0, 0, 0, 0.1) 1px 1px 1px;
transition: all 0.1s ease;
.lw-whatsapp-header-image {
object-fit: contain;
max-width: 100%;
}
.lw-whatsapp-header-video {
max-width: 100%;
}
}
.lw-plain-message-text {
white-space: pre-line;
}
.message.sent {
.lw-template-message {
.lw-plain-message-text {
white-space: pre-line;
}
.lw-whatsapp-preview .card {
border: none;
box-shadow: none;
}
.lw-whatsapp-preview-message-container {
max-width: 400px;
margin-top: 8px;
.lw-whatsapp-preview > .card {
&::after {
display: none;
}
}
}
}
}
.emojionearea .emojionearea-picker {
left: 10px;
}
.emojionearea {
margin-left: 25px;
position: relative;
width: 300px;
&.focused {
box-shadow: none;
}
.emojionearea-editor {
margin-left: 20px;
margin-top: 6px;
}
&.emojionearea-inline > .emojionearea-button,
.emojionearea-button {
top: 12px;
}
}
.emojionearea-button {
position: absolute;
left: 0;
}
.emojionearea .emojionearea-editor {
max-height: 130px;
height: 44px;
min-height: 0;
overflow: auto;
background-color: white;
}
.dropdown-item.active,
.dropdown-item:active {
background-color: #18726a;
}
}
.nav-tabs {
margin-left: 0;
border-bottom: 1px solid #2aac32;
.nav-link {
padding: 4px 0.75rem;
font-size: 1rem;
background-color: #ffffff;
color: #999da6;
cursor: pointer;
outline: none;
&.active {
background-color: #2aac32;
color: #ffffff;
}
}
}
.selectize-control.multi .selectize-input > div {
background: white;
color: black;
border: 1px solid #ddd;
font-size: 11px;
padding: 1px 6px;
&.active {
outline: 2px solid rgb(42 172 50 / 57%);
}
}
.lw-borderers-selectize .selectize-input {
// border: 0;
}
.selectize-dropdown [data-selectable] {
display: inline-block;
padding: 4px 12px !important;
margin: 2px;
cursor: pointer;
}
.lw-labels-selector-box:not(.lw-expanded-labels) {
height: 60px;
overflow: auto;
white-space: nowrap;
padding: 2px;
}
}