.facebook-reaction { max-width: 100%; position: relative; margin-top:5px; }

.share-btn { color: #777777; position: relative; cursor: pointer; padding: 20px 20px 0 0; }
.share-btn:hover { color: #0db5e4; }
.share-btn-default:before { font-family: FontAwesome; content: "\f087"; color: #FFFFFF; width: 22px; height: 22px; text-align: center; border-radius: 50%; font-weight: normal; line-height: 22px; background: #777777; }
.share-btn-text { color: #777777 }
.share-btn:hover { color: #0db5e4; }
.share-btn a { text-decoration: none; }
.share-btn a:hover { color: #0db5e4; }
.share-btn-emo { display: inline-block; margin: 0 0px -3px 0; color: #FFFFFF; width: 22px; height: 22px; text-align: center; border-radius: 50%; font-weight: normal; line-height: 22px !important; background: #777777; }

.like-btn { color: #777777; position: relative; cursor: pointer; padding: 20px 20px 0 0; }

.like-btn:hover { color: #0db5e4; }

.like-btn-default:before { font-family: FontAwesome; content: "\f087"; color: #FFFFFF; width: 22px; height: 22px; text-align: center; border-radius: 50%; font-weight: normal; line-height: 22px; background: #777777; }

.like-btn-emo { display: inline-block; margin: 0 0px -3px 0; color: #FFFFFF; width: 22px; height: 22px; text-align: center; border-radius: 50%; font-weight: normal; line-height: 22px !important; background: #777777; }

.reactions-box { height: 22px; width: auto; padding: 15px; position: absolute; top: -45px; left: 1px; box-shadow: 1px 1px 2px #cccccc, -1px 0px 2px #eeeeee; border-radius: 44px 44px; display: none; background: #ffffff; }

.reaction { list-style-type: none; cursor: pointer; display: table-cell; position: relative; text-align: center; padding-left: 5px; padding-right: 5px; padding-top: 5px; padding-bottom: 5px;; }

.like-btn:hover .reactions-box { display: block; }

.reaction-like::after { font-family: FontAwesome; content: "\f087"; font-size: 2.5em; color: rgb(100,160,240);}

.reaction-love::after { font-family: FontAwesome; content: "\f004"; font-size: 2.5em; color: rgb(242, 82, 104);}

.reaction-care::after { font-family: FontAwesome; content: "\f004"; font-size: 2.5em; color: rgb(247, 113, 75);}

.reaction-haha::after { font-family: FontAwesome; content: "\f118"; font-size: 2.5em; color: rgb(240, 186, 21);}

.reaction-wow::after { font-family: FontAwesome; content: "\f005"; font-size: 2.5em; color: rgb(240, 186, 21);}

.reaction-sad::after { font-family: FontAwesome; content: "\f119"; font-size: 2.5em; color: rgb(240, 186, 21);}

.reaction-angry::after { font-family: FontAwesome; content: "\f11a"; font-size: 2.5em; color: rgb(247, 113, 75);}


.reaction-like-new::after { font-family: FontAwesome; font-weight: bold; content: "\f087"; font-size: 1.7em; color: rgb(100,160,240);}
.reaction-like-new::before { color: rgb(100,160,240);}

.reaction-love-new::after { font-family: FontAwesome; font-weight: bold; content: "\f004"; font-size: 1.7em; color: rgb(242, 82, 104);}
.reaction-love-new::before { color: rgb(242, 82, 104);}

.reaction-care-new::after { font-family: FontAwesome; font-weight: bold; content: "\f004"; font-size: 1.7em; color: rgb(247, 113, 75);}
.reaction-care-new::before { color: rgb(247, 113, 75);}

.reaction-haha-new::after { font-family: FontAwesome; font-weight: bold; font-weight: bold; content: "\f118"; font-size: 1.7em; color: rgb(240, 186, 21);}
.reaction-haha-new::before { color: rgb(240, 186, 21);}

.reaction-wow-new::after { font-family: FontAwesome; font-weight: bold; content: "\f005"; font-size: 1.7em; color: rgb(240, 186, 21);}
.reaction-wow-new::before { color: rgb(240, 186, 21);}

.reaction-sad-new::after { font-family: FontAwesome; font-weight: bold; content: "\f119"; font-size: 1.7em; color: rgb(240, 186, 21);}
.reaction-sad-new::before { color: rgb(240, 186, 21);}

.reaction-angry-new::after { font-family: FontAwesome; font-weight: bold; content: "\f11a"; font-size: 1.7em; color: rgb(247, 113, 75);}
.reaction-angry-new::before { color: rgb(247, 113, 75);}




.like-btn:hover .reaction { opacity: 1; }

.reaction:hover { transform: scale(1.3, 1.3); top: 2px }

.reaction::before { display: inline-block; color: #ffffff; text-align: center; min-width: 80%; line-height: 17px; font-size: .6em; height: 17px; margin-left: auto; margin-right: auto; padding-left: 5px; padding-right: 5px; background-color: rgba(0, 0, 0, 1); border-radius: 20px; position: absolute; top: -20px; opacity: 0; transition: opacity .2s ease-in-out 0s; }

.reaction:hover::before { opacity: 1 }

.reaction-like::before { content: 'Like' }

.reaction-love::before { content: 'Love' }

.reaction-care::before { content: 'Care' }

.reaction-haha::before { content: 'Haha' }

.reaction-wow::before { content: 'Wow' }

.reaction-sad::before { content: 'Sad' }

.reaction-angry::before { content: 'Angry' }


.like-stat { margin-top: 10px; }

.like-btn-like { background: rgb(100,160,240); color: #ffffff; }

.like-btn-like:before { font-family: FontAwesome; content: "\f087"; }

.like-btn-love { background: rgb(242, 82, 104); color: #ffffff; }

.like-btn-love:before { font-family: FontAwesome; content: "\f004"; }

.like-btn-haha { background: rgb(240, 186, 21); color: #ffffff; }

.like-btn-haha:before { font-family: FontAwesome; content: "\f118"; }

.like-btn-wow { background: rgb(240, 186, 21); color: #ffffff; }

.like-btn-wow:before { font-family: FontAwesome; content: "\f005"; }

.like-btn-sad { background: rgb(240, 186, 21); color: #ffffff; }

.like-btn-sad:before { font-family: FontAwesome; content: "\f119"; }

.like-btn-angry { background: rgb(247, 113, 75); color: #ffffff; }

.like-btn-angry:before { font-family: FontAwesome; content: "\f11a"; }

.like-btn-text-like { color: rgb(88, 144, 255); }

.like-btn-text-wow, .like-btn-text-haha, .like-btn-text-sad { color: rgb(240, 186, 21) }

.like-btn-text-love { color: rgb(242, 82, 104) }

.like-btn-text-angry { color: rgb(247, 113, 75); }

.like-emo > span { display: inline-block; margin: 0 -3px -3px 0px; width: 22px; height: 22px; border: 1px solid #EEE; border-radius: 50%; text-align: center; }

.like-details { margin-left: 10px; color: #9197a3; font-size: 12px; }


/* Tooltip container */
.tooltip 
{
    position: relative;
    display: inline-block;
    border-bottom: 1px dotted black; /* If you want dots under the hoverable text */
}
  
  /* Tooltip text */
.tooltip .tooltiptext 
{
    visibility: hidden;
    width: 120px;
    background-color: black;
    color: #fff;
    text-align: center;
    padding: 5px 0;
    border-radius: 6px;
   
    /* Position the tooltip text - see examples below! */
    position: absolute;
    z-index: 1;
}
  
  /* Show the tooltip text when you mouse over the tooltip container */
  .tooltip:hover .tooltiptext {
    visibility: visible;
  }