/* custom tooltips */
[data-tooltip-sqr] {
    /* misc styles */
    font-weight:bold;
    cursor:pointer;

    /* require position:relative because the tooltip is position:absolute */
    position:relative;
    display:inline-block;
}

[data-tooltip-sqr]::after {
    /* set up our positioning */
    position:absolute;
    top:50%;
    /*left:50%;
    transform:translateX(-50%);*/
    left: 0;

    /* use attr mixed with content to pull the attribute into the world */
    content: attr(data-tooltip-sqr);

    /* misc colors, styling */
    background: #fedb009E; /*#0074C89E;*/
    color:#000;
    font-size:0.65rem;
    text-align:center;
    border-radius:3px;
    opacity:0;
    min-width: min(60vw, 200px);
    height: 0px;
    overflow: hidden;

    /* set transitions so it's not instant */
    transition:top .2s ease-out, opacity .2s ease-out;
}

[data-tooltip-sqr]:hover::after {
    /* on hover, move tooltip to under the element and make it visible */
    top:100%;
    opacity:1;
    height: auto;
    backdrop-filter: blur(10px);
		z-index: 1000;
    padding:.3rem .5rem;
 }

[data-tooltip-sqr-aright]::after {
	left: auto;
  right: 0px;
}