@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap");
.chatbot-toggler-govivace {
position: fixed;
bottom: 20px;
right: 35px;
border: none;
height: 75px;
width: 75px;
cursor: pointer;
background: #fff;
-webkit-border-radius: 50px 50px 0px 50px;
border-radius: 50px 50px 0px 50px;
padding: 0;
-webkit-animation: glowing 1500ms infinite;
-moz-animation: glowing 1500ms infinite;
-o-animation: glowing 1500ms infinite;
animation: glowing 1500ms infinite;
}
.chatbot-toggler-govivace:focus {
outline: 3px solid #4A90E2;
outline-offset: 3px;
}
#chatgreet-header{
background-color:#49d372;padding: 11px 0;
font-weight: bold;
font-family: 'Material Symbols Outlined';
}
#top-logo{
width:64px;height:60px;display: unset;
}
#close-span{
display: block;
color:#555151;
border: none;
background: transparent;
cursor: pointer;
padding: 5px;
}
#close-span:focus {
outline: 2px solid #4A90E2;
}
@-webkit-keyframes glowing {
0% { background-color: #fff; -webkit-box-shadow: 0 0 3px #52ad28; }
50% { background-color: #fff; -webkit-box-shadow: 0 0 40px #52ad28; }
100% { background-color: #fff; -webkit-box-shadow: 0 0 3px #52ad28; }
}
@-moz-keyframes glowing {
0% { background-color: #fff; -moz-box-shadow: 0 0 3px #52ad28; }
50% { background-color: #fff; -moz-box-shadow: 0 0 40px #52ad28; }
100% { background-color: #fff; -moz-box-shadow: 0 0 3px #52ad28; }
}
@-o-keyframes glowing {
0% { background-color: #fff; box-shadow: 0 0 3px #52ad28; }
50% { background-color: #fff; box-shadow: 0 0 40px #52ad28; }
100% { background-color: #fff; box-shadow: 0 0 3px #52ad28; }
}
@keyframes glowing {
0% { background-color: #fff; box-shadow: 0 0 3px #52ad28; }
50% { background-color: #fff; box-shadow: 0 0 40px #52ad28; }
100% { background-color: #fff; box-shadow: 0 0 3px #52ad28; }
} body.show-chatbot .chatbot-toggler-govivace {
transform: rotate(90deg);
}
.chatbot-toggler-govivace span {
color: #fff;
position: absolute;
}
.chatbot-toggler-govivace span:last-child,
body.show-chatbot .chatbot-toggler-govivace span:first-child  {
opacity: 0;
}
body.show-chatbot .chatbot-toggler-govivace span:last-child {
opacity: 1;
}
.chatbotGovivace {  font-family: 'Poppins';
margin: 0;
box-sizing: border-box;
padding: 0;
position: fixed;
display:flex;
flex-direction:column;
top:59px;
right:5px;
bottom:0;
width: 355px;
background: #fff;
border-radius: 30px;
overflow: hidden;
opacity: 0;
pointer-events: none;
transform: scale(0.5);
transform-origin: bottom right;
box-shadow: 0 0 128px 0 rgba(0,0,0,0.1),
0 32px 64px -48px rgba(0,0,0,0.5);
transition: all 0.1s ease;
z-index: 1001;
}
body.show-chatbot .chatbotGovivace {
opacity: 1;
pointer-events: auto;
transform: scale(1);
}
.chatbotGovivace header {
padding: 2px 0;
position: relative;
text-align: center;
color: #fff; box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}
.chatbotGovivace header span {
position: absolute;
right: 15px;
top: 50%;
display: none;
cursor: pointer;
transform: translateY(-50%);
}
.chatbotGovivace .chatboxGovivace {
overflow-y: auto;
height: 510px;
padding: 10px 20px 100px;
margin: 0 0 0 0;
}
.chatbotGovivace :where(.chatboxGovivace, textarea)::-webkit-scrollbar {
width: 6px;
}
.chatbotGovivace :where(.chatboxGovivace, textarea)::-webkit-scrollbar-track {
background: #fff;
border-radius: 25px;
}
.chatbotGovivace :where(.chatboxGovivace, textarea)::-webkit-scrollbar-thumb {
background: #ccc;
border-radius: 25px;
}
.chatboxGovivace .chat {
display: flex;
list-style: none;
}
.chatboxGovivace .outgoing {
margin: 6px 0;
justify-content: flex-end;
}
.chatboxGovivace .incoming span {
width: 32px;
height: 32px;
color: #fff;
cursor: default;
text-align: center;
line-height: 32px;
align-self: flex-end; border-radius: 4px;
margin: 0 10px 7px 0;
}
.chatboxGovivace .chat p {
white-space: pre-wrap;
padding: 12px 16px;
border-radius: 10px 10px 0 10px;
max-width: 85%;
width: 85%;
color: #fff;
font-size: 0.84rem;  }
.chatboxGovivace .incoming p {
border-radius: 10px 10px 10px 0;
}
.chatboxGovivace .chat p.error {
color: #721c24;
background: #f8d7da;
}
.chatboxGovivace .incoming p {
color: #000;
background: #f2f2f2; }
.chatboxGovivace .incoming div {
background: #f2f2f2;
margin-bottom: 10px;
padding:0px 0px !important; }
.chatbotGovivace .chat-input {
display: flex;
gap: 5px;
position: absolute;
bottom: 0;
width: 100%;   padding: 18px 18px;
border-top: 1px solid #ddd;
box-sizing: border-box;
}
.chat-input textarea {
height: 52px;
width: 100%;
border: none;
outline: none;
resize: none;
max-height: 180px;
padding: 11px 6px;
font-size: 1.0rem;
border-radius: 18px;
white-space: pre;
overflow: hidden;
text-overflow: ellipsis;
font-family: 'Poppins';
}
.chat-input textarea:focus {
outline: 2px solid #4A90E2;
}
textarea::placeholder{
text-align:top;
padding-top:4px;
}
.chat-input span, #send-btn {
align-self: flex-end;
color: #8d8b93;
cursor: pointer;
height: 55px;
display: flex;
align-items: center;
font-size: 2.5rem;
border: none;
background: transparent;
padding: 0;
}
#send-btn:focus {
outline: 2px solid #4A90E2;
}
.chat-input textarea:valid ~ span {
visibility: visible;
}
@media (max-width: 490px) {
.chatbot-toggler-govivace {
right: 30px;
bottom: 50px;
}
.chatbotGovivace {
right: 10px;
bottom: 10;
height: 85%;
border-radius: 10;
width: 90%;
}
.chatbotGovivace .chatboxGovivace {
height: 90%;
padding: 12px 20px 100px;
box-sizing: border-box;
}
.chatbotGovivace .chat-input {
padding: 5px 10px; 
}
.chatbotGovivace header span {
display: block;
}
}
.chatbox-popup__header {
box-sizing: border-box;
display:flex;
width: 100%;
padding: 16px;
color: #fff;
background-color: #0360a5;
align-items: center;
justify-content: space-around;
border-top-right-radius: 12px;
border-top-left-radius: 12px;
}
.chatbox-popup .chatbox-popup__header .chatbox-popup__avatar {
margin-top: -32px;
background-color: #0360a5;
border: 5px solid rgba(0, 0, 0, 0.1);
border-radius: 50%;
}
#poweredby{
font-weight: bolder;
text-decoration: none;color: black;
}
.brand-logo{
padding: 0px 100px;display: flex;
gap: 5px;
position: absolute;
bottom: 0;
width: 100%;font-size: 10px;
}
#text-logo{
margin: auto;
width:50px; height: 43px;
margin-top: -1px;
}
#chatImg{
width:107px;
height:60px;
display: unset;
position: absolute;
margin-top: -14px;
}
#h1tag{
color:#52ad28;font-size: 33px;font-weight: bold;font-family: arsenica;margin-left: -109px;
margin-bottom: 0px; 
margin-top: 6px;  
}
#formSubmit{
background-color: #55555e !important;
}
#Cancel{
background-color: #55555e !important;
}
.dots-class { transform: rotate(0deg);
.three-dots {
width: 11px !important;
height: 11px !important;
background-color: #a29fa2;
display: inline-block;
margin: 1px;
border-radius: 70% !important;
&:nth-child(1) {
animation: bouncedots 1s infinite;
}
&:nth-child(2) {
animation: bouncedots 1s infinite .2s;
}
&:nth-child(3) {
animation: bouncedots 1s infinite .4s;
}
}
}
@keyframes bouncedots {
0% {
transform: translateY(0px);
}
50% {
transform: translateY(6px);
}
100% {
transform: translateY(0px) ;
}
}
.typing {
position: relative;
}
.typing span {
content: "";
-webkit-animation: blink 1.5s infinite;
animation: blink 1.5s infinite;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
height: 10px;
width: 10px;
background: #3b5998;
position: absolute;
left: 0;
top: 0;
border-radius: 50%;
}
.typing span:nth-child(2) {
-webkit-animation-delay: 0.2s;
animation-delay: 0.2s;
margin-left: 15px;
}
.typing span:nth-child(3) {
-webkit-animation-delay: 0.4s;
animation-delay: 0.4s;
margin-left: 30px;
}
@-webkit-keyframes blink {
0% {
opacity: 0.1;
}
20% {
opacity: 1;
}
100% {
opacity: 0.1;
}
}
@keyframes blink {
0% {
opacity: 0.1;
}
20% {
opacity: 1;
}
100% {
opacity: 0.1;
}
}