body{background-color:"#ccc";-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;margin:0;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif}code{font-family:source-code-pro,Menlo,Monaco,Consolas,Courier New,monospace}html,body{margin:0;padding:0}.tooltip{cursor:pointer;display:block;position:relative}div.tooltip span{visibility:hidden;color:#fff;text-align:center;z-index:1;opacity:0;background-color:#333;border-radius:6px;width:200px;margin-left:-100px;padding:5px 0;transition:opacity .3s;position:absolute;bottom:135%;left:50%}div.tooltip-left span{margin-left:0;inset:50% calc(100% + 8px) auto auto;transform:translateY(-50%)}div.tooltip span:after{content:"";border:5px solid #0000;border-top-color:#333;margin-left:-5px;position:absolute;top:100%;left:50%}div.tooltip-left span:after{border-color:#0000 #0000 #0000 #333;margin-left:0;top:50%;left:100%;transform:translateY(-50%)}div:hover.tooltip span{visibility:visible;opacity:1}