[tooltip]{position:relative;z-index:100}[tooltip]::before,[tooltip]::after{text-transform:none;font-size:.85em;line-height:1;user-select:none;pointer-events:none;position:absolute;display:none;opacity:0}[tooltip]::before{content:"";border:5px solid rgba(0,0,0,0);z-index:1001}[tooltip]::after{content:attr(tooltip);text-align:center;min-width:3em;max-width:21em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:1ch 1.5ch;border-radius:.3ch;box-shadow:0 1em 2em -0.5em rgba(0,0,0,.35);background:#232323;color:#fff;z-index:1000}[tooltip]:hover::before,[tooltip]:hover::after{display:block}[tooltip=""]::before,[tooltip=""]::after{display:none !important}[tooltip]:not([flow])::before,[tooltip][flow^=up]::before{bottom:100%;border-bottom-width:0;border-top-color:#232323;position:absolute}[tooltip]:not([flow])::after,[tooltip][flow^=up]::after{bottom:calc(100% + 5px)}[tooltip]:not([flow])::before,[tooltip]:not([flow])::after,[tooltip][flow^=up]::before,[tooltip][flow^=up]::after{left:50%;transform:translate(-50%, -0.5em)}[tooltip][flow^=down]::before{top:100%;border-top-width:0;border-bottom-color:#232323}[tooltip][flow^=down]::after{top:calc(100% + 5px)}[tooltip][flow^=down]::before,[tooltip][flow^=down]::after{left:50%;transform:translate(-50%, 0.5em)}[tooltip][flow^=left]::before{top:50%;border-right-width:0;border-left-color:#232323;left:calc(0em - 5px);transform:translate(-0.5em, -50%)}[tooltip][flow^=left]::after{top:50%;right:calc(100% + 5px);transform:translate(-0.5em, -50%)}[tooltip][flow^=right]::before{top:50%;border-left-width:0;border-right-color:#232323;right:calc(0em - 5px);transform:translate(0.5em, -50%)}[tooltip][flow^=right]::after{top:50%;left:calc(100% + 5px);transform:translate(0.5em, -50%)}@keyframes tooltips-vert{to{opacity:.9;transform:translate(-50%, 0)}}@keyframes tooltips-horz{to{opacity:.9;transform:translate(0, -50%)}}[tooltip]:not([flow]):hover::before,[tooltip]:not([flow]):hover::after,[tooltip][flow^=up]:hover::before,[tooltip][flow^=up]:hover::after,[tooltip][flow^=down]:hover::before,[tooltip][flow^=down]:hover::after{animation:tooltips-vert 300ms ease-out forwards}[tooltip][flow^=left]:hover::before,[tooltip][flow^=left]:hover::after,[tooltip][flow^=right]:hover::before,[tooltip][flow^=right]:hover::after{animation:tooltips-horz 300ms ease-out forwards}