.Zebra_Tooltip {
    background: 0 0;
    position: absolute;
    z-index: 8000;
    pointer-events: none;

    /* Just enforce it's max content to be done dynamically based of CSS size,
     as that way arrow at bottom will work better and more accurately. */
    height: max-content !important;
}
.Zebra_Tooltip .Zebra_Tooltip_Message {
    background: #000;
    border-radius: 5px;
    color: #fff;
    font-size: 12px;
    font-family: Tahoma,Arial,Helvetica,sans-serif;
    line-height: 1.4;
    *margin-right: 0;
    /*max-width: 250px;*/
    /*
    Above is original max-width just as a future reference - in case new problematic edge cases are discovered.
    The width and max width overrides below, help resolve a Chrome edge case, where it seems dynamic calculation
    of width of the tooltip, can round up in Chrome, thus causing a text wrap when not needed.

    So by adding even a 0.01px to it, it should force that double overflow calculation to round properly.
    Max width set to 96vw ensures that the tooltip DOES wrap if necessary - i.e. if a lot of text.
    */
    width: calc(100% + 0.05px);
    max-width: 96vw !important;
    padding: 10px;
    position: relative;
    _width: expression(document.body.clientWidth > 250px ? '250px': 'auto');
    border: 0 solid #000
}
.Zebra_Tooltip .Zebra_Tooltip_Message.Zebra_Tooltip_Has_Close {
    padding-right: 23px
}
.Zebra_Tooltip .Zebra_Tooltip_Arrow {
    position: absolute;
    width: 20px;
    height: 11px;
    overflow: hidden
}
.Zebra_Tooltip .Zebra_Tooltip_Arrow.Zebra_Tooltip_Arrow_Bottom {
    /*bottom: 0*/
    /* Original is bottom 0, but that's inaccurate, as it should be offset based on top,
    so that the arrow starts at the very bottom of the DIV size */
    top: 100%;
}
.Zebra_Tooltip .Zebra_Tooltip_Arrow.Zebra_Tooltip_Arrow_Bottom div {
    top: 0;
    border-color: #000 transparent transparent;
    _border-bottom-color: pink
}
.Zebra_Tooltip .Zebra_Tooltip_Arrow.Zebra_Tooltip_Arrow_Bottom div.Zebra_Tooltip_Arrow_Border {
    border-color: #000 transparent transparent
}
.Zebra_Tooltip .Zebra_Tooltip_Arrow.Zebra_Tooltip_Arrow_Top {
    top: 0
}
.Zebra_Tooltip .Zebra_Tooltip_Arrow.Zebra_Tooltip_Arrow_Top div {
    bottom: 0;
    border-color: transparent transparent #000;
    _border-top-color: pink
}
.Zebra_Tooltip .Zebra_Tooltip_Arrow.Zebra_Tooltip_Arrow_Top div.Zebra_Tooltip_Arrow_Border {
    border-color: transparent transparent #000
}
.Zebra_Tooltip .Zebra_Tooltip_Arrow div {
    position: absolute;
    border-style: solid;
    border-width: 10px;
    width: 0;
    height: 0;
    left: 0;
    _border-left-color: pink;
    _border-right-color: pink;
    _filter: chroma(color=pink)
}
.Zebra_Tooltip .Zebra_Tooltip_Arrow div.Zebra_Tooltip_Arrow_Border {
    border-width: 10px;
    left: 0
}
.Zebra_Tooltip .Zebra_Tooltip_Close {
    color: #fff;
    font-family: Arial,sans-serif;
    font-size: 18px;
    line-height: 1;
    padding: 0 4px;
    position: absolute;
    right: 2px;
    text-decoration: none;
    top: 2px
}
.Zebra_Tooltip .Zebra_Tooltip_Close:hover {
    color: #000;
    background: #c2d076;
    border-radius: 5px
}