.chat_button {
position: fixed;
bottom: 20px;
right: 100px;
text-align: center;
border: none;
color: rgb(222, 222, 239);
cursor: pointer;
transition: 0.5s ease-in-out;
z-index: 99999;
width: 60px;
height: 60px;
border-radius: 50%; transform: translateZ(0); }
.btn-toggle {
display: flex;
align-items: center;
justify-content: center;
}
.btn-toggle.close .img-open,
.btn-toggle.close .opn-chat {
display: none;
}
span.close-text {
display: none;
}
i#cros-icon {
display: none;
}
.btn-toggle.close span.close-text {
display: block;
font-family: Inter;
font-size: 16px;
font-weight: 600;
line-height: 26px;
text-align: left;
}
.btn-toggle.close i#cros-icon:before {
content: url(//hymbzs.com/wp-content/plugins/autochat/assets/images/x.png);
}
.btn-toggle.close i#cros-icon {
display: block;
height: 26px;
}
.chat_button:focus,
.chat_button:active {
outline: none;
}
.chat_box {
max-height: 100%;
max-width: 100%;
height: 500px;
width: 360px;
background-color: #ffff;
position: fixed;
bottom: 100px;
right: 100px;
display: none;
z-index: 99999;
border-radius: 15px;
box-shadow: 0 0 50px rgba(0, 0, 0, 0.45); transform: translateZ(0); }
.chat_box_header {
padding: 12px 20px;
background: #000000;
border-top-left-radius: 15px;
border-top-right-radius: 15px;
text-align: center;
color: #ffffff;
font-weight: 600;
display: flex;
align-items: center;
align-items: center;
font-size: 18px;
font-family: 'Inter';
line-height: 24px;
}
.chat_box_body {
padding: 6px 16px;
height: 100%;
min-width: 300px;
overflow: scroll;
max-height: 322px;
font-family: 'Inter';
font-size: 14px;
font-style: normal;
font-weight: 400;
line-height: 22px;
scrollbar-width: thin; scrollbar-color: #888 #f1f1f1; }
div#dm-btn button {
background: #fff;
color: #575757;
border: 1px solid #ddd;
padding: 8px 32px;
}
.chat_box_body_self {
padding: 16px 15px;
float: right;
border-radius: 25px;
margin-right: 10px;
background: #5A5EB9;
color: white;
margin: 10px 0;
clear: both;
max-width: 75%;
}
.chat_box_body_other {
background: #F4F4F4;
padding: 11px 18px;
color: #000;
max-width: 100%;
float: left;
margin-left: 10px;
margin: 10px 0;
position: relative;
margin-bottom: 20px;
border-radius: 25px;
clear: both;
font-family: Inter;
font-size: 14px;
font-style: normal;
font-weight: 400;
line-height: 20px;
}
.chat_box_body::-webkit-scrollbar {
width: 5px;
background-color: #F5F5F5;
}
.chat_box_body::-webkit-scrollbar-thumb {
background-color: #77E;
}
.chat_box_footer {
max-width: 100%;
height: 80px;
position: absolute;
bottom: -24px;
width: 96%;
}
.chat_box_footer input {
margin-left: 16px;
width: 310px !important;
height: 40px;
padding-left: 16px;
flex-shrink: 0;
border-radius: 11px;
border: 1px solid rgba(0, 0, 0, 0.40);
background: var(--Background-White, #FFF);
width: 310px;
}
.chat_box_footer input:focus {
outline: none;
}
.chat_box_footer input::placeholder {
font-family: nunito;
}
.chat_box_footer button {
position: absolute;
bottom: 37px;
right: 0px;
width: 40px;
padding: 8px 10px;
border-radius: 11px;
border: 1px solid var(--Stroke-Default, #000);
background: var(--Action-Default, #000);
height: 42px;
}
i.fab.fa-telegram-plane {
rotate: 44deg;
color: #FFF;
}
.chat_box_footer button:focus {
outline: none;
}
.toggle {
display: block;
}
.animated {
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}
@keyframes fadeInUp {
from {
opacity: 0;
-webkit-transform: translate3d(0, 10%, 0);
transform: translate3d(0, 10%, 0);
}
to {
opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
.fadeInUp {
-webkit-animation-name: fadeInUp;
animation-name: fadeInUp;
}
.brand {
text-align: center !important;
margin-top: 25px;
}
@media only screen and (max-width: 420px) {
#chatbar {
width: 100%;
       position: fixed;
left: 0;
bottom: 8rem;
}
#chatbar .chat_box_footer input {
width: 100%;
}
#chatbar .chat_box_footer button {
width: 30%;
right: 0;
}
}
div#dm-btn {
display: flex;
position: absolute;
bottom: 68px;
gap: 9px;
overflow-x: scroll;
width: 320px;
margin-left: 20px;
}
.chat_box_body::-webkit-scrollbar {
background: none;
}
button.chat-inner-btn {
background-color: #fff !important;
color: #3b3838;
font-size: 14px !important;
font-weight: 400 !important;
height: 40px !important;
border-radius: 7px;
border: 1px solid rgba(0, 0, 0, 0.16);
padding: 8px 12px;
display: flex;
width: 110px;
}
.chat_box_chat_body {
background: #F4F4F4;
padding: 8px 12px;
color: #000;
max-width: 100%;
float: left;
margin-left: 10px;
margin: 28px 0;
border-radius: 11px;
clear: both;
font-family: Inter;
font-size: 14px;
font-style: normal;
font-weight: 400;
line-height: 22px;
}
i.send-icon:before {
content: url(//hymbzs.com/wp-content/plugins/autochat/assets/images/PaperPlaneRight.png);
}
.ast-separate-container .chat_box_footer input {
height: 42px;
}
.ast-separate-container .chat_box_footer button {
bottom: 38px;
}
.brad-icon img {
height: 40px;
padding: 6px 6px;
} .chat_box_footer button {
display: none;
}