@keyframes blink {
from, to {
color: transparent;
}
50% {
color: black;
}
}
@-moz-keyframes blink {
from, to {
color: transparent;
}
50% {
color: black;
}
}
@-webkit-keyframes blink {
from, to {
color: transparent;
}
50% {
color: black;
}
}
@-ms-keyframes blink {
from, to {
color: transparent;
}
50% {
color: black;
}
}
@-o-keyframes blink {
from, to {
color: transparent;
}
50% {
color: black;
}
}
.tochatbe-widget * {
box-sizing: border-box;
}
.tochatbe-widget {
position: fixed;
bottom: 12px;
z-index: 999999;
display: flex;
flex-direction: column;
}
.tochatbe-widget__body {
margin-bottom: 10px;
min-width: 300px;
max-width: 340px;
display: none;
margin-left: 12px;
}
.tochatbe-widget__body-header {
padding: 15px;
font-size: 15px;
line-height: 22px;
text-align: center;
border-radius: 4px 4px 0 0;
position: relative;
}
.tochatbe-widget-close {
position: absolute;
top: -40px;
width: 30px;
height: 30px;
border-radius: 4px;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
user-select: none;
}
.tochatbe-support-persons {
background-color: #ffffff;
padding: 15px;
box-shadow: 0 50px 30px rgba(0,0,0,0.1);
border-radius: 0 0 4px 4px;
max-height: 370px;
overflow-y: auto;
min-height: 20px;
}
.tochatbe-support-person {
display: flex;
margin-bottom: 15px;
border: 1px solid #F5F5F5;
cursor: pointer;
}
.tochatbe-support-person__img {
width: 70px;
height: 70px;
margin-right: 15px;
position: relative;
}
.tochatbe-support-person__img img {
width: 100%;
border-radius: 0;
}
.tochatbe-support-person__status {
background-color: red;
width: 16px;
height: 16px;
border-radius: 50%;
position: absolute;
bottom: 0;
right: 0;
}
.tochatbe-support-person__status--avail {
background-color: #00c853;
}
.tochatbe-support-person__status--not-avail {
background-color: #ffd600;
}
.tochatbe-support-person__meta {
display: flex;
flex-direction: column;
justify-content: center;
}
.tochatbe-support-person__name,
.tochatbe-support-person__title {
line-height: 20px;
}
.tochatbe-support-person__name {
font-size: 16px;
font-weight: 700;
color: #706F6F;
}
.tochatbe-support-person__title {
color: #706F6F;
}
.tochatbe-welcome-msg {
padding: 5px 15px;
border-radius: 0 0 4px 4px;
}
.tochatbe-custom-offer {
margin: 10px 0;
}
.tochatbe-custom-offer img {
width: 100%;
}
.tochatbe-widget__trigger {
padding: 6px 14px;
border-radius: 4px;
cursor: pointer;
font-size: 15px;
display: inline-block;
user-select: none;
display: flex;
align-items: center;
} .tochatbe-gdpr {
font-size: 14px;
border: 1px solid transparent;
padding-left: 15px;
background-color: #ffffff;
}
.tochatbe-gdpr.error {
border: 1px solid red;
} a.tochatbe-whatsapp-button {
padding: 6px 20px !important;
text-align: center !important;
text-decoration: none !important;
margin-right: 5px !important;
border-radius: 2px !important;
cursor: pointer !important;
font-size: 15px !important;
outline: none !important;
display: inline-block !important;
}
.tochatbe-blinking-cursor {
font-weight: 100;
font-size: 15px;
color: #2E3D48;
-webkit-animation: 1s blink step-end infinite;
-moz-animation: 1s blink step-end infinite;
-ms-animation: 1s blink step-end infinite;
-o-animation: 1s blink step-end infinite;
animation: 1s blink step-end infinite;
} .tochatbe-input-wrapper {
display: flex;
align-items: center;
padding: 5px 10px;
background: #fff;
box-shadow: 0 50px 30px rgba(0,0,0,0.1);
border-radius: 0 0 4px 4px;
border-top: 1px solid #ccc;
}
.tochatbe-input-wrapper input {
flex: 1;
height: 40px;
background: transparent !important;
border: none !important;
box-shadow: none !important;
}
.tochatbe-input-icon {
display: flex;
justify-content: center;
align-items: center;
width: 30px;
cursor: pointer;
margin: 0 10px;
}
.tochatbe-input-icon svg {
width: 100%;
height: auto;
} .tochatbe_jwi {
display: inline-block;
position: fixed;
bottom: 12px;
filter: drop-shadow( 0px 0px 15px rgba( 0,0,0,.1 ) );
outline: none;
z-index: 99999;
} .tochatbe-icon-close svg {
width: 14px;
}
.tochatbe-icon-whatsapp {
line-height: 0 !important;
margin-right: 5px;
}
.tochatbe-icon-whatsapp svg {
width: 16px;
}