@keyframes tada {
0%{-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1)}
10%,20%{-webkit-transform:scale(.9) rotate(-8deg);-ms-transform:scale(.9) rotate(-8deg);transform:scale(.9) rotate(-8deg)}
30%,50%,70%{-webkit-transform:scale(1.3) rotate(8deg);-ms-transform:scale(1.3) rotate(8deg);transform:scale(1.3) rotate(8deg)}
40%,60%{-webkit-transform:scale(1.3) rotate(-8deg);-ms-transform:scale(1.3) rotate(-8deg);transform:scale(1.3) rotate(-8deg)}
100%,80%{-webkit-transform:scale(1) rotate(0);-ms-transform:scale(1) rotate(0);transform:scale(1) rotate(0)}
}
#icon-fixed-right {
    position: fixed;
    right: 5px;
    top: 50%;
    transform: translate(0,-50%);
    z-index: 999;
}
#icon-fixed-right a, #icon-fixed-right > div {
    display: block;
    width: 40px;
    height: 40px;
    text-align: center;
    line-height: 40px;
    background: #aaa;
    border-radius: 50%;
    margin: 4px 0;
    color: #fff;
    font-size: 18px;
    position: relative;
}
#icon-fixed-right a i {
    position: relative;
    z-index: 9;
}
#icon-fixed-right a .note, #icon-fixed-right > div .note {
    line-height: 42px;
    font-size: 13px;
    position: absolute;
    right: 0;
    top: 0;
    z-index: 99;
    background: #ccc;
    height: 42px;
    padding-right: 50px;
    border-radius: 30px;
    opacity: 0;
    width: 0;
    transition: all .5s ease;
    white-space: nowrap;
}
#icon-fixed-right a:hover .note, #icon-fixed-right > div:hover .note {
    opacity: 1;
    width: 200px;
}
#icon-fixed-right a:hover i {
    animation: tada 2s linear infinite;
}
#icon-fixed-right a:hover img {
    animation: tada 2s linear infinite;
}
.note.list-chat {
    height: 80px!important;
    border-radius: 8px 20px!important;
    padding: 5px!important;
    text-align: center;
}
.note.list-chat a {
    display: inline-block!important;
    width: 40px!important;
}
.note.list-chat b {
    display: block;
    line-height: 1.5;
}