.xtip-overlay { z-index: 5; transition: transform 200ms, opacity 200ms; background: #000; font: 14px/17px geometria, "source sans pro", arial; color: #fff; border-radius: 3px; padding: 5px 10px 8px 10px; position: absolute; box-shadow: 0 10px 15px 0 rgba(0,0,0,.3); opacity: 0; }
.xtip-overlay.xtip-white { background-color: #fff; color: #000; box-shadow: 0 3px 12px 0 rgba(0,0,0,.2); }
.xtip-overlay p + p { margin-top: 7px }
.xtip-overlay.xtip-pos-right-top { transform: translateX(50px); }
.xtip-overlay.xtip-pos-left-top { transform: translateX(-50px); }
.xtip-overlay.xtip-pos-right-top:before { content: ""; width: 9px; height: 10px; background: url(i/tick-left.svg); position: absolute; left: -9px; top: 10px; transform: translateX(10px); transition: transform ease 200ms; transition-delay: 100ms; }
.xtip-overlay.xtip-pos-left-top:before { content: ""; width: 9px; height: 10px; background: url(i/tick-right.svg); position: absolute; right: -9px; top: 10px; transform: translateX(-10px); transition: transform ease 200ms; transition-delay: 100ms; }
.xtip-overlay.xtip-white.xtip-pos-left-top:before { background-image: url(i/tick-right-white.svg); }
.xtip-overlay.xtip-animating { transform: translateX(0); opacity: 1; }
.xtip-overlay.xtip-animating:before { transform: translateX(0); }