abbr.ao_tooltip.icon-info{text-decoration: none;}

.ao_tooltip{text-decoration: underline dotted;}
.ao_tooltip_content{
    position: absolute;
    background: #fff;
    color: #000;
    border-radius: 20px;
    padding: 5px 20px;
    width: max-content;
    max-width: 400px;
    font-size: 0.8em;
    border: 1px solid var(--ao-debug);

    /*initial style tooltip animation*/
    z-index: -10;
    opacity:0;
    transform: translateY(-20px);
    /*z-index recovers with 0.5s delay*/
    transition: z-index 0s 0.5s, opacity 0.5s, transform 0.5s;
}
.ao_tooltip_content > .arrow{
    content:"";
    z-index: 100;
    border-top-color: #fff;
    line-height: 1;
    font-size: .9em;
    pointer-events: none;
    position: absolute;
    box-sizing: border-box;
    transform: translate(-50%,-3px) rotate(45deg);
    border: 1px solid var(--ao-debug);
    width: 10px;
    height: 10px;
    background: #fff;
    border-top: 0;
    border-left: 0;
}

.ao_tooltip_content{}
.ao_tooltip_content.bottom{opacity:0;transform:translateY(20px)}
.ao_tooltip_content.open{
    opacity:1;
    transform:none !important;
    z-index: 100;
    /*z-index is set immediately*/
    transition: z-index 0s, opacity 0.5s, transform 0.5s;
}

.ao_tooltip_content.mobile{left:20px;right:20px; width:auto;max-width: 100vw}
.ao_tooltip_content.top > .arrow{bottom: -9px;}
.ao_tooltip_content.bottom > .arrow{top: 0;transform: translate(-50%,-6px) rotate(225deg);}