.tooltip_container { position:absolute; z-index:10000000; background:rgba(255,255,255,0.8); width:200px; box-shadow:0px 0px 10px rgba(0,0,0,0.5); border-radius:5px; pointer-events:none; }
.tooltip_fadein {  animation-name: fadeIn; animation-duration: 0.2s; animation-fill-mode: forwards; animation-iteration-count: 1; animation-delay: 0s; animation-timing-function:ease-out; }
.tooltip_fadeout {  animation-name: fadeOut; animation-duration: 0.2s; animation-fill-mode: forwards; animation-iteration-count: 1; animation-delay: 0s; animation-timing-function:ease-out; }
.tooltip_content { padding:20px;  }



.tooltip_top:before, .tooltip_right:before, .tooltip_bottom:before, .tooltip_left:before { display:block; content:' '; position:absolute; width:0; height:0; border-width:10px; border-style:solid; }
.tooltip_top:before {  bottom:-20px; left:calc(50% - 10px); border-color:rgba(255,255,255,0.8) transparent transparent transparent;  }
.tooltip_right:before {  top:calc(50% - 10px); left:-20px; border-color:transparent rgba(255,255,255,0.8) transparent transparent;  }
.tooltip_bottom:before {  top:-20px; left:calc(50% - 10px); border-color:transparent transparent rgba(255,255,255,0.8) transparent;  }
.tooltip_left:before {  top:calc(50% - 10px); right:-20px; border-color:transparent transparent transparent rgba(255,255,255,0.8);  }


/* scrolldown button */
@keyframes fadeIn {
    0% { opacity:0; }
    100% { opacity:1; }
} 


@keyframes fadeOut {
    0% { opacity:1; }
    100% { opacity:0; }
} 
/**/