#online {
    position: fixed;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    font-family: Arial, Helvetica, sans-serif;
    z-index: 9999;
    transition: right .5s ease;
}

#online.close-online {
    right: -56px;
}

#online.open-online {
    right: 0;
}

#sidebarBtn {
    width: 56px;
    height: 56px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #32373a;
    cursor: pointer;
    transition: all .5s ease;
}

#sidebarBtn i {
    font-size: 20px;
    color: #fff;
}

#online ul.online-list {
    transition: all .5s ease;
    position: relative;
}

#sidebarBtn.sidebarBtnHidden {
    transform: translateX(-56px);
}

#online ul.online-list li {
    width: 56px;
    height: 56px;
    position: relative;
}

#online ul.online-list li.online-linkedin {
    background: #0077b5;
}

#online ul.online-list li.online-whatsapp {
    background: #26D367;
}

#online ul.online-list li.online-email {
    background: #DC483C;
}

#online ul.online-list li.online-facebook {
    background: #4267B2;
}

#online ul.online-list li a {
    background: inherit;
}

#online ul.online-list li span:first-child {
    background: inherit;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 20px;
}

#online ul.online-list li span:last-child {
    border-radius: 10px 0 0 10px;
    background: inherit;
    position: absolute;
    transition: all .5s ease 0s;
    white-space: nowrap;
    height: 100%;
    min-width: 130px;
    transform: rotateY(90deg);
    transform-origin: 100% 0 0;
    line-height: 1.2;
    color: #fff;
    top: 0;
    right: 100%;
    text-align: right;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding-right: 10px;
}

#online ul.online-list li span:first-child i {
    color: #fff;
}

#online ul.online-list li:hover span:last-child {
    transform: rotateY(0);
}

#online ul.online-list li span:last-child p {
    color: inherit;
}

@media (max-width:768px) {
    #online {
        /* display: none; */
    }
}