.aikit-chatbot {
position: fixed;
bottom: 0px;
right: 20px;
width: 450px;
border-radius: 7px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
min-height: 500px;
background-color: #efefef;
display: none;
z-index: 99999;
}
.aikit-chatbot *, ::after, ::before {
box-sizing: border-box;
}
.aikit-chatbot.aikit-chatbot-inline {
position: relative;
bottom: auto;
right: auto;
width: 100%;
border-radius: 0px;
min-height: 500px;
background-color: #efefef;
display: block;
z-index: 99999
}
@media only screen and (max-width: 768px) {
.aikit-chatbot {
display: none;
}
}
.aikit-chatbot.aikit-chatbot-collapsed .aikit-chatbot-footer{
display: none;
}
.aikit-chatbot.aikit-chatbot-collapsed {
min-height: auto;
width: 250px;
}
.aikit-chatbot.aikit-chatbot-collapsed .aikit-chatbot-messages {
display: none;
} .aikit-chatbot-header { background-color: rgb(76, 175, 80, 0.7);
padding: 10px; border-radius: 7px 7px 0px 0px;
cursor: pointer;
min-height: 39px;
}
.aikit-chatbot-header h2 {
margin: 0;
font-size: 16px;
color: #000;
}
.aikit-chat-bubble {
color: #212121;
background: rgba(197, 197, 197, 0.84);
padding: 8px 16px;
border-radius: 5px 15px 15px 15px;
font-weight: 400;
text-transform: none;
text-align: left;
letter-spacing: .5px;
margin: 0 0 2px 0;
max-width: 65%;
float: none;
clear: both;
line-height: 1.5em;
word-break: break-word;
transform-origin: left top;
transition: all 200ms;
box-sizing: content-box;
font-size: 14px;
display: table;
}
.aikit-chat-bubble.reply {
box-shadow: none;
float: right;
position: relative;
transform-origin: right top;
margin: 8px 0 10px;
max-width: 65%;
background: rgba(44, 44, 44, 1);
transform: scale(1) translate3d(0px, 0px, 0px);
padding: 8px 16px;
height: auto;
color: white;
border-radius: 15px 15px 5px 15px;
}
.aikit-chat-bubble.error {
background: rgba(255, 0, 0, 0.7);
color: white;
} .aikit-chatbot-messages {
padding: 10px;
max-height: 368px;
overflow-y: auto;
}
.aikit-chat li {
margin-bottom: 10px;
} .aikit-chatbot-footer {
padding: 10px 10px 2px 10px;
height: 70px; border-top: 1px solid #ccc;
position: absolute;
bottom: 0;
width: 100%;
background-color: #f0f0f1;
}
.aikit-chatbot-footer input[type="text"] {
width: 100%;
padding: 5px;
border: 1px solid #ccc;
border-radius: 3px;
}
.aikit-chatbot-footer textarea {
width: 88%;
padding: 5px;
border: 1px solid #ccc;
border-radius: 5px;
resize: none;
overflow: hidden;
height: 50px;
}
.aikit-chatbot-footer button:hover {
opacity: 0.8;
}
.aikit-chatbot-close {
position: absolute;
right: 12px;
top: 10px;
cursor: pointer;
text-decoration: none;
color: #2b2b2b;
line-height: 21px !important;
}
.aikit-chatbot.aikit-chatbot-collapsed .aikit-chatbot-close {
transform: rotate(180deg);
}
.aikit-chatbot-send {
border-radius: 50% !important;
height: 40px;
width: 40px;
float: right;
margin-top: 5px;
padding: 5px 10px;
background-color: #4CAF50;
color: #fff;
border: none;
cursor: pointer; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.1) inset, 0 1px 1px rgba(0, 0, 0, 0.1), 0 2px 0 0 rgba(255, 255, 255, 0.1) inset, 0 2px 2px rgba(0, 0, 0, 0.1), 0 3px 0 0 rgba(255, 255, 255, 0.1) inset, 0 3px 3px rgba(0, 0, 0, 0.1);
}
.aikit-chat-bubble-loading {
background-color:#E6F8F1;
padding:16px 20px;
-webkit-border-radius: 20px;
-webkit-border-bottom-left-radius: 2px;
-moz-border-radius: 20px;
-moz-border-radius-bottomleft: 2px;
border-radius: 20px;
border-top-left-radius: 2px;
}
.aikit-typing {
align-items: center;
display: flex;
height: 8px;
}
.aikit-typing .aikit-dot {
animation: mercuryTypingAnimation 1.8s infinite ease-in-out;
background-color: #6CAD96 ; //rgba(20,105,69,.7);
border-radius: 50%;
height: 7px;
margin-right: 4px;
vertical-align: middle;
width: 7px;
display: inline-block;
}
.aikit-typing .aikit-dot:nth-child(1) {
animation-delay: 200ms;
}
.aikit-typing .aikit-dot:nth-child(2) {
animation-delay: 300ms;
}
.aikit-typing .aikit-dot:nth-child(3) {
animation-delay: 400ms;
}
.aikit-typing .aikit-dot:last-child {
margin-right: 0;
}
@keyframes mercuryTypingAnimation {
0% {
transform: translateY(0px);
background-color:#6CAD96; // rgba(20,105,69,.7);
}
28% {
transform: translateY(-7px);
background-color:#9ECAB9; //rgba(20,105,69,.4);
}
44% {
transform: translateY(0px);
background-color: #B5D9CB; //rgba(20,105,69,.2);
}
}