.tooltip_container {position:absolute;z-index:99999;background:#000;color:#fff;padding:5px 10px;line-height:16px;margin-top:12px;border-radius:3px;font-size:13px;text-align:center;max-width:260px;opacity:0;white-space:normal;font-weight:initial;font-style:initial;text-decoration:initial;text-transform:initial}
.tooltip_container:after {content:'';position:absolute;border:6px solid transparent;border-top-width:0;border-bottom-color:#000;top:-6px;left:50%;margin-left:-6px}
.tooltip_container.top {margin-top:-6px}
.tooltip_container.top:after {border:6px solid transparent;border-bottom-width:0;border-top-color:#000;top:auto;bottom:-6px;left:50%;margin-left:-6px}
.tooltip_container.left {margin-top:auto;margin-left:3px}
.tooltip_container.left:after {border:6px solid transparent;border-right-width:0;border-left-color:#000;top:50%;left:auto;right:-6px;margin-left:0;margin-top:-6px}
.tooltip_container.right {margin-top:auto;margin-left:-3px}
.tooltip_container.right:after {border:6px solid transparent;border-left-width:0;border-right-color:#000;top:50%;left:0;margin-top:-6px}
.tooltip.light + .tooltip_container {background:#fff;color:#000;border:1px solid #ccc}
.tooltip.light + .tooltip_container:after {border-bottom-color:#fff}
.tooltip.light + .tooltip_container:before {content:'';position:absolute;border:7px solid transparent;border-top-width:0;border-bottom-color:#ccc;top:-7px;left:50%;margin-left:-7px}
.tooltip.light + .tooltip_container.top:after {border:6px solid transparent;border-bottom-width:0;border-top-color:#fff}
.tooltip.light + .tooltip_container.top:before {border:6px solid transparent;border-bottom-width:0;border-top-color:#ccc;top:auto;bottom:-7px;left:50%;margin-left:-6px}
.tooltip.light + .tooltip_container.left:after {border:6px solid transparent;border-right-width:0;border-left-color:#fff}
.tooltip.light + .tooltip_container.left:before {border:7px solid transparent;border-right-width:0;border-left-color:#ccc;top:50%;left:auto;right:-7px;margin-left:0;margin-top:-7px}
.tooltip.light + .tooltip_container.right:after {border:6px solid transparent;border-left-width:0;border-right-color:#fff}
.tooltip.light + .tooltip_container.right:before {border:7px solid transparent;border-left-width:0;border-right-color:#ccc;top:50%;left:0;margin-top:-7px}

/* animation */
.animated {animation-duration:0.2s;animation-fill-mode:both;transform:translateZ(0);backface-visibility:hidden}
.fadeInLeft {animation-name:fadeInLeft}
.fadeOutLeft {animation-name:fadeOutLeft}
.fadeInRight {animation-name:fadeInRight}
.fadeOutRight {animation-name:fadeOutRight}
.fadeInTop {animation-name:fadeInTop}
.fadeInTopBig {animation-name:fadeInTopBig}
.fadeOutTop {animation-name:fadeOutTop}
.fadeInBottom {animation-name:fadeInBottom}
.fadeOutBottom {animation-name:fadeOutBottom}

@keyframes fadeInLeft {
  0% {opacity:0;transform:translateX(-10px)}
  100% {opacity:1;transform:translateX(0)}
}
@keyframes fadeOutLeft {
  0% {opacity:1;transform:translateX(0)}
	100% {opacity:0;transform:translateX(-10px)}
}

@keyframes fadeInRight {
  0% {opacity:0;transform:translateX(10px)}
  100% {opacity:1;transform:translateX(0)}
}
@keyframes fadeOutRight {
  0% {opacity:1;transform:translateX(0)}
	100% {opacity:0;transform:translateX(10px)}
}

@keyframes fadeInTop {
  0% {opacity:0;transform:translateY(-10px)}
  100% {opacity:1;transform:translateY(0)}
}
@keyframes fadeOutTop {
  0% {opacity:1;transform: translateY(0)}
	100% {opacity:0;transform:translateY(-10px)}
}

@keyframes fadeInTopBig {
  0% {opacity:0;transform:translateY(-100%)}
  100% {opacity:1;transform:translateY(0)}
}

@keyframes fadeInBottom {
  0% {opacity:0;transform:translateY(10px)}
  100% {opacity:1;transform:translateY(0)}
}
@keyframes fadeOutBottom {
  0% {opacity:1;transform:translateY(0)}
	100% {opacity:0;transform:translateY(10px)}
}