﻿.feed {
    padding-top: 8px;
}
.feed .like-btn {
  cursor: pointer; 

}
  .feed .like-btn::before {
    content: ".";
    opacity: 0;
    display: block;
    width: 44px;
    height: 10px;
    position: absolute;
    top: -10px;
    left: 0; }
    .feed .like-btn .reaction-box {
        position: absolute;
        width: 312px;
        height: 55px;
        background: #fff;
        border: 1px solid #a2a2a27a;
        border-radius: 28px;
        left: 25px;
        bottom: 15px;
        display: none;
        z-index: 1000000000000;
    }
.like {
    background-image: url("/Content/Images/like.png");
    background-size: contain;
    background-repeat: no-repeat;
}
.love {
    background-image: url("/Content/Images/love.png");
    background-size: contain;
    background-repeat: no-repeat;
}
.haha {
    background-image: url("/Content/Images/haha.png");
    background-size: contain;
    background-repeat: no-repeat;
}
.wow {
    background-image: url("/Content/Images/wow.png");
    background-size: contain;
    background-repeat: no-repeat;
}
.sad {
    background-image: url("/Content/Images/sad.png");
    background-size: contain;
    background-repeat: no-repeat;
}
.down {
    background-image: url("/Content/Images/angry.png");
    background-size: contain;
    background-repeat: no-repeat;
}
    .feed .like-btn .reaction-box .reaction-icon {
      width: 12%;
      height: 40px;
      display: inline-block !important;
      border-radius: 20px;
      margin: 8px -1px 0 8px;
      text-align: center;
      transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
      opacity: 0;
      transform: translate(0, 100px) scale(0); }
      .feed .like-btn .reaction-box .reaction-icon label {
        padding: 3px 5px 3px 5px;
        position: relative;
        top: -24px;
        border-radius: 10px;
        font-size: 11px;
        color: #FFF;
        background: #333;
        visibility: hidden; }
  .feed .like-btn:hover .reaction-box {
    display: block; }
    .feed .like-btn:hover .reaction-box .reaction-icon.show {
      opacity: 1;
      transform: translate(0, 0) scale(1); }
    .feed .like-btn:hover .reaction-box .reaction-icon:hover {
      transform: scale(1.4);
      transform-origin: bottom; }
      .feed .like-btn:hover .reaction-box .reaction-icon:hover label {
        visibility: visible; }
