.emoticons {
  position: absolute;
} 
.emoticon{
  -webkit-transition: all .2s ease-in-out;
  -moz-transition: all .2s ease-in-out;
  -o-transition: all .2s ease-in-out;
  transition: all .2s ease-in-out;
  margin: 7px 2px;
  background-repeat: no-repeat;
  background-position: top center;
  display: inline-block;
  background-size: 28px;
  width:28px;
  height: 28px;
  content: "&nbsp;";
}
.emoticon-connected {
  cursor: pointer;
  &:hover{
    transform: scale(1.2);
  }
  &:hover:after{
    content: attr(data-tooltip);
    font-size: 6px;
    color: $white;
    background-color: rgba(0, 0, 0, 0.5);
    border-radius: 10px;
    overflow: hidden;
    white-space: nowrap;
    margin: auto;
    line-height: 10px;
    padding: 2px 0;
    text-align: center;
    position: absolute;
    display: block;
    top: -14px;
  }
}
.emo-minified {
  content: "&nbsp;";
  width: 22px;
  height: 22px;
  background-size: 22px;
  background-repeat: no-repeat;
  background-position: top center;
  display: inline-block;
  position: absolute;
}
.sentiment-names-list{
  position: absolute;
}
.sentiment-stats{
  display: none;
  background-color: $white;
  position: relative;
  z-index: 1000;
  -moz-box-shadow: 3px 3px 10px 0px #CCCCCC;
  -webkit-box-shadow: 3px 3px 10px 0px #CCCCCC;
  -o-box-shadow: 3px 3px 10px 0px #CCCCCC;
  box-shadow: 3px 3px 10px 0px #CCCCCC;
  padding: 10px 15px;
  min-width: 480px;
  margin: 0 0 0 -52px;
}
.emoticon-bar-chart{
  display: inline-block;
}
.chart-number{
  display: inline-block;
  font-size: 18px;
  vertical-align: super;
}
.chart-label{
  display: inline-block;
  width: 60px;
  line-height: 15px;
  vertical-align: super;
}
.left {
  float: left;
}
.LikeSentimentOfPost {
  background-image:url(#{$img-dir}/emoticons/agree.svg);
  &:hover:after{
    width: 34px;
    left: calc(50% - 17px);
  }
}
.DisagreeSentimentOfPost {
  background-image: url(#{$img-dir}/emoticons/disagree.svg);
  &:hover:after{
    width: 54px;
    left: calc(50% - 27px);
  }
}
.MoreInfoSentimentOfPost {
  background-image: url(#{$img-dir}/emoticons/more_infos.svg);
  &:hover:after{
    width: 60px;
    left: calc(50% - 30px);
  }
}
.DontUnderstandSentimentOfPost {
  background-image: url(#{$img-dir}/emoticons/not_understand.svg);
  &:hover:after{
    width: 66px;
    left: calc(50% - 33px);
  }
} 
.LikeSentimentOfPost.active {
  transform: scale(1.2);
  background-image: url(#{$img-dir}/emoticons/agree_active.svg);
}
.DisagreeSentimentOfPost.active {
  transform: scale(1.2);
  background-image: url(#{$img-dir}/emoticons/disagree_active.svg);
}
.MoreInfoSentimentOfPost.active {
  transform: scale(1.2);
  background-image: url(#{$img-dir}/emoticons/more_infos_active.svg);
}
.DontUnderstandSentimentOfPost.active {
  transform: scale(1.2);
  background-image: url(#{$img-dir}/emoticons/not_understand_active.svg);
}
.like.min {
  display:none;
  background-image: url(#{$img-dir}/emoticons/agree_min.svg);
}
.disagree.min {
  display:none;
  background-image: url(#{$img-dir}/emoticons/disagree_min.svg);
}
.more_info.min {
  display:none;
  background-image: url(#{$img-dir}/emoticons/more_infos_min.svg);
}
.dont_understand.min {
  display:none;
  background-image: url(#{$img-dir}/emoticons/not_understand_min.svg);
}