#ext-bottom-navigation {
position: fixed;
display:none;
bottom: 0;
left: 0;
right: 0;
width: 100%;
height: 50px;
z-index: 99999;
background-color: #fff;
color: #333;
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
}
#ext-bottom-navigation .bottom-navigation-items {
display: flex;
align-items: center;
justify-content: space-evenly;
height: 100%;
}
#ext-bottom-navigation .bottom-navigation-item {
flex: 1;
height: 100%;
}    
#ext-bottom-navigation .bottom-navigation-item a {
display: block;
height: 100%;
width: 100%;
padding:5px;
place-content: center;
transition: all 0.3s;
position: relative;
}
#ext-bottom-navigation.style-1 .bottom-navigation-item.active a,
#ext-bottom-navigation.style-1 .bottom-navigation-item:hover a {
background-color: var(--menu-mobile-main-color);
color: #fff;
}
#ext-bottom-navigation.style-2 .bottom-navigation-item a:before {
content: '';
display: block;
width: 60%;
height: 2px;
background-color: transparent;
position: absolute;
top: 0;
left: 20%;
transition: all 0.3s;
}
#ext-bottom-navigation.style-2 .bottom-navigation-item.active a,
#ext-bottom-navigation.style-2 .bottom-navigation-item:hover a {
color: var(--menu-mobile-main-color);
}
#ext-bottom-navigation.style-2 .bottom-navigation-item.active a:before,
#ext-bottom-navigation.style-2 .bottom-navigation-item:hover a:before {
background-color: var(--menu-mobile-main-color);
}
#ext-bottom-navigation .bottom-navigation-item .icon {
height: 18px;
width: auto;
text-align: center;
}
#ext-bottom-navigation .bottom-navigation-item .icon svg {
height: 100%;
width: auto;
}
#ext-bottom-navigation .bottom-navigation-item .icon svg path {
fill: currentColor;
}
#ext-bottom-navigation .bottom-navigation-item  .text {
font-size: 10px;
line-height: 1.25;
margin-top: 2px;
text-align: center;
}
.chaty-channel:before {
content: '';
position: absolute;
inset: -8px;
transition: all 0.5s;
-webkit-transform-origin: 50% 50%;
-ms-transform-origin: 50% 50%;
transform-origin: 50% 50%;
-webkit-animation: zoom 1.3s infinite;
animation: zoom 1.3s infinite;
}
@keyframes zoom {
0% {
transform: scale(0.9);
}
70% {
transform: scale(1);
box-shadow: 0 0 0 10px transparent;
}
100% {
transform: scale(0.9);
box-shadow: 0 0 0 0 transparent;
}
}
.chaty-icon{
animation: phone-vr-circle-fill 1s infinite ease-in-out;
}
@keyframes phone-vr-circle-fill{
0% {
-webkit-transform: rotate(0) scale(1) skew(1deg);
}
25% {
-webkit-transform: rotate(0) scale(0.9) skew(1deg);
}
50% {
-webkit-transform: rotate(-25deg) scale(1) skew(1deg);
}
60% {
-webkit-transform: rotate(25deg) scale(1) skew(1deg);
}
70% {
-webkit-transform: rotate(-25deg) scale(1) skew(1deg);
}
80% {
-webkit-transform: rotate(25deg) scale(1) skew(1deg);
}
90% {
-webkit-transform: rotate(0) scale(1) skew(1deg);
}
100% {
-webkit-transform: rotate(0) scale(1) skew(1deg);
}
}