.cbnsi_chat_icon.style1{
position: fixed;
z-index: 99999999;
bottom: 15px;
right: 15px;
height: 60px;
width: 60px;
background-color: #2ECC71;
box-shadow: 0px 0px 11px rgb(0 0 0 / 10%);
border-radius: 100%;
padding: 15px;
cursor: pointer;
transition: all 0.3s;
}
.cbnsi_chat_icon.style1 img,
.cbnsi_chat_icon.style4 img,
.cbnsi_chat_icon.style3 img,
.cbnsi_chat_icon.style5 img,
.cbnsi_chat_icon.style2 img{
filter: invert(100%) sepia(6%) saturate(0%) hue-rotate(9deg) brightness(104%) contrast(108%);
}
.cbnsi_chat_icon.style1:hover,
.cbnsi_chat_icon.style2:hover img{
animation:hoveranimation 1s ease infinite;
-webkit-animation:hoveranimation 1s ease infinite;
-moz-animation:hoveranimation 1s ease infinite;
-o-animation:hoveranimation 1s ease infinite;
}
.cbnsi_chat_icon.style2{
position: fixed;
z-index: 99999999;
bottom: 20px;
right: 20px;
height: 60px;
width: 60px;
background-color: #2ECC71;
box-shadow: 0px 0px 11px rgb(0 0 0 / 10%);
border-radius: 10px;
padding: 15px;
cursor: pointer;
transition: all 0.3s;
}
.cbnsi_chat_icon.style3{
position: fixed;
z-index: 99999999;
bottom: 25px;
right: 25px;
background-color: #2ECC71;
box-shadow: 0px 0px 11px rgb(0 0 0 / 10%);
border-radius: 49px;
padding: 10px 15px;
cursor: pointer;
transition: all 0.3s;
}
.cbnsi_chat_icon.style3 > a{
display: flex;
align-items: center;
flex-wrap: wrap;
text-decoration: none;
}
.cbnsi_chat_icon.style3 img,
.cbnsi_chat_icon.style5 img{
width: 20px;
}
.cbnsi_chat_icon.style3 > a:after{
content: "WhatsApp";
color: #fff;
padding-left: 6px;
font-size: 14px;
}
.cbnsi_chat_icon.style4{
position: fixed;
z-index: 99999999;
bottom: 25px;
right: 25px;
background-color: #2ECC71;
box-shadow: 0px 0px 11px rgb(0 0 0 / 10%);
border-radius: 7px;
padding: 10px;
cursor: pointer;
transition: all 0.3s;
height: 90px;
width: 90px;
text-align: center;
display: flex;
align-items: center;
flex-wrap: wrap;
}
.cbnsi_chat_icon.style4 img{
width: 35px;
padding-bottom: 10px;
}
.cbnsi_chat_icon.style4 a:after{
content: "WhatsApp";
color: #fff;
font-size: 14px
}
.cbnsi_chat_icon.style4 a{
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
text-decoration: none;
}
.cbnsi_chat_icon.style5{
position: fixed;
z-index: 99999999;
bottom: 25px;
right: 25px;
background-color: #2ECC71;
box-shadow: 0px 0px 11px rgb(0 0 0 / 10%);
border-radius: 5px;
cursor: pointer;
transition: all 0.3s;
}
.cbnsi_chat_icon.style3:hover,
.cbnsi_chat_icon.style4:hover,
.cbnsi_chat_icon.style5:hover{
animation: animationless 1s ease infinite;
-webkit-animation: animationless 1s ease infinite;
-moz-animation: animationless 1s ease infinite;
-o-animation: animationless 1s ease infinite;	
}
.cbnsi_chat_icon.style5 > a{
display: flex;
align-items: center;
flex-wrap: wrap;
padding: 10px 15px;
position: relative;
text-decoration: none;
}
.cbnsi_chat_icon.style5 > a:before{
content: "";
position: absolute;
height: 100%;
width: 1px;
background-color: #fff;
left: 42px;
}
.cbnsi_chat_icon.style5 > a:after{
content: "WhatsApp";
color: #fff;
padding-left: 15px;
font-size: 14px;
}
.cbnsi_chat_icon.none{
display: none!important
} @-webkit-keyframes hoveranimation{
0% {-webkit-transform:scale(1)}
10%, 20% {-webkit-transform:scale(0.9) rotate(-3deg)}
30%, 50%, 70%, 90% {-webkit-transform:scale(1.1) rotate(3deg)}
40%, 60%, 80% {-webkit-transform:scale(1.1) rotate(-3deg)}
100% {-webkit-transform:scale(1) rotate(0)}
}
@-moz-keyframes hoveranimation{
0% {-moz-transform:scale(1)}
10%,20% {-moz-transform:scale(0.9) rotate(-3deg)}
30%, 50%, 70%, 90% {-moz-transform:scale(1.1) rotate(3deg)}
40%, 60%, 80% {-moz-transform:scale(1.1) rotate(-3deg)}
100% {-moz-transform:scale(1) rotate(0)}
}
@-o-keyframes hoveranimation{
0% {-o-transform:scale(1)}
10%,20% {-o-transform:scale(0.9) rotate(-3deg)}
30%, 50%, 70%, 90% {-o-transform:scale(1.1) rotate(3deg)}
40%, 60%, 80% {-o-transform:scale(1.1) rotate(-3deg)}
100% {-o-transform:scale(1) rotate(0)}
}
@keyframes hoveranimation{
0% {transform:scale(1)}
10%, 20% {transform:scale(0.9) rotate(-3deg)}
30%, 50%, 70%, 90% {transform:scale(1.1) rotate(3deg)}
40%, 60%, 80% {transform:scale(1.1) rotate(-3deg)}
} @-webkit-keyframes animationless{
0% {-webkit-transform:scale(1)}
10%, 20% {-webkit-transform:scale(0.95) rotate(-1deg)}
30%, 50%, 70%, 90% {-webkit-transform:scale(1.05) rotate(1deg)}
40%, 60%, 80% {-webkit-transform:scale(1.05) rotate(-1deg)}
100% {-webkit-transform:scale(1) rotate(0)}
}
@-moz-keyframes animationless{
0% {-moz-transform:scale(1)}
10%,20% {-moz-transform:scale(0.95) rotate(-1deg)}
30%, 50%, 70%, 90% {-moz-transform:scale(1.05) rotate(1deg)}
40%, 60%, 80% {-moz-transform:scale(1.05) rotate(-1deg)}
100% {-moz-transform:scale(1) rotate(0)}
}
@-o-keyframes animationless{
0% {-o-transform:scale(1)}
10%,20% {-o-transform:scale(0.95) rotate(-1deg)}
30%, 50%, 70%, 90% {-o-transform:scale(1.05) rotate(1deg)}
40%, 60%, 80% {-o-transform:scale(1.05) rotate(-1deg)}
100% {-o-transform:scale(1) rotate(0)}
}
@keyframes animationless{
0% {transform:scale(1)}
10%, 20% {transform:scale(0.95) rotate(-1deg)}
30%, 50%, 70%, 90% {transform:scale(1.05) rotate(1deg)}
40%, 60%, 80% {transform:scale(1.05) rotate(-1deg)}
}