@-webkit-keyframes dancing-dots-jump {
  0% {
    top: 0;
  }
  55% {
    top: 0;
  }
  60% {
    top: -10px;
  }
  80% {
    top: 3px;
  }
  90% {
    top: -2px;
  }
  95% {
    top: 1px;
  }
  100% {
    top: 0;
  }
}

@-moz-keyframes dancing-dots-jump {
  0% {
    top: 0;
  }
  55% {
    top: 0;
  }
  60% {
    top: -10px;
  }
  80% {
    top: 3px;
  }
  90% {
    top: -2px;
  }
  95% {
    top: 1px;
  }
  100% {
    top: 0;
  }
}

.showBox {
  animation-name: showBox;
  animation-duration: 0.5s;
}

.hideBox {
  animation-name: hideBox;
  animation-duration: 0.5s;
}

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

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

[titleCss] {
  /*position: relative;*/
}

[titleCss]:hover:after {
  content: attr(titleCss);
  padding: 2px 6px;
  color: #fffefe;
  position: absolute;
  right: 0;
  top: 100%;
  white-space: nowrap;
  z-index: 20;
  border-radius: 3px;
  /* box-shadow: 0px 0px 2px #222; */
  background: #424242;
  font-size: smaller;

  animation-name: showTitle;
  animation-duration: 0s;
}

@keyframes showTitle {
  from {
    visibility: hidden;
    opacity: 0;
  }
  to {
    visibility: visible;
    opacity: 1;
  }
}