.like-block a.mark svg {
  fill: #27AE60 !important;
}

.mark {
  color: #27AE60 !important;
}

.like-block{
width:200px;
height: 50px;
border: none;
position: absolute;
background-color: #f3f3f3;
padding: 10px;
border-radius: 21px;
border: solid;
opacity: .9;
font-weight: 600;
font-family: sans-serif;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: space-evenly;
align-content:start;
font-size: 12px;
max-height: 200px;
max-width: 200px;

}

.like-block a{display: flex;flex-direction: column;align-items: center;justify-content: space-around;border-bottom: none;color: inherit;text-decoration: none;}



@keyframes changeColor {
from {
  fill:  #333333;
}
to {
  fill:  #1e864a;
}
}



.like-block a svg, a.block-item{
fill: #333333;
}

.like-block a svg:hover, a.block-item {
cursor: pointer;
animation-name: changeColor;
animation-duration: 500ms;
animation-play-state:running;
fill:  #1e864a;
}

.like-count{
height: 14px;
}

@keyframes changeOpacity {
  from {
      opacity:  0;
  }
  to {
      opacity:  1;
  }
}

.like-title-like, .like-title-doubt, .like-title-trust, .like-title-count{
position: absolute;
background-color: #f2f1f1;
width: 65px;
height: 29px;
padding-top: 12px;
opacity: 0;
font-size: 10px;
text-align: center;
margin-top: -17px;
}

.like-block a:hover .like-title-like,.like-block a:hover .like-title-doubt, .like-block a:hover .like-title-trust, .like-block a:hover .like-title-count{

  animation-name: changeOpacity;
  animation-duration: 800ms;
  animation-play-state:running;
  opacity: 1;
}