#mics {
position: relative;
height: 2.4rem;
border-radius: 999px;
padding: 8px 18px;
background: linear-gradient(90deg, #3b1c5a, #0f6c7a, #3b1c5a);
background-size: 300% 100%;
display: flex;
align-items: center;
justify-content: center;
gap: 2px;
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.4);
animation: softShift 8s ease-in-out infinite;
}
@keyframes softShift {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}
#mics-mute {
width: 40px;
height: 40px;
padding: 0.2rem;
border: 1px solid;
border-radius: 50%;
box-shadow: 0 0 5px 0 #5d5d5d;
}
#mics .mic-item {
width: 42px !important;
height: 40px !important;
border-radius: 50%;
border: 2px solid #42b3c5;
}
#mics-mute .fa, #mics .mic-item .fa {
margin-bottom: 5px;
font-variant: all-small-caps;
}
#mics .mic-item-avatar {
border-radius: 50%;
}
span.mic-item-name.truncate.w-full.px-\[0\.166rem\].absolute.left-0.bottom-0
{
bottom: -22px;
z-index: 1;
}
li#bottom-nav-users {
border-color: #000000 !important;
padding: 7px 12px 5px 9px !important;
border-radius: 21px 0 0 17px !important;
border-style: solid !important;
border-left: 4px solid !important;
border-left-style: groove !important;
border-right: 2px solid #fff !important;
}
li#bottom-nav-conversations,li#bottom-nav-rooms,li#bottom-nav-wall,li#bottom-nav-prefs {
padding: 7px 17px 5px !important;
margin-left: -2px !important;
border-radius: 0 !important;
border-right: 2px solid #fff !important;
}
li#bottom-nav-extra {
padding: 7px 12px 5px 9px !important;
border-radius: 0 20px 20px 0px !important;
border-style: solid !important;
border-right: 4px solid !important;
border-right-style: groove !important;
max-width: 40px;
margin-left: -2px;
}
.popup {
text-align: center;
color: #000;
min-width: 10.833rem;
max-width: 10.833rem;
border: 0.125rem solid #fefffc;
z-index: 2000;
background-color: #dee2e6 !important;
position: absolute;
padding: 0.208rem;
border-radius: 0rem 0.625rem 0.625rem 0.625rem;
margin-bottom: -0.2rem;
left: 0.625rem;
box-shadow: 0.083rem 0.167rem 0.083rem #f8f9fa;
}
.avatar-wrapper {
width: 54px;
height: 54px;
border-radius: 0;
overflow: hidden;
}
.avatar-wrapper img {
width: 100%;
height: 100%;
}
.text-center {
text-align: center;
max-height: 100%;
}