.ui-bubble {
    background-color: white;
    border: 1px solid #005288;
    border-radius: 12px;
    box-shadow: 0 5px 20px -5px #000000;
    display: none;
    font-size: 11px;
    overflow: visible;
    padding: 18px;
    position: absolute;
    z-index: 1000;
}

.ui-bubble.ui-bubble-scrollable {
    padding: 12px 6px;
}

.ui-bubble .ui-bubble-scroll-area {
    max-height: 100%;
    overflow: auto;
    padding: 0 12px;
}

.ui-bubble a.ui-bubble-close {
    background-color: #005288;
    border-radius: 8px;
    color: white;
    font-size: 12px;
    height: 16px;
    left: -8px;
    position: absolute;
    text-align: center;
    text-decoration: none;
    top: -8px;
    width: 16px;
}

.ui-bubble-modal {
    bottom: 0;
    left: 0;
    right: 0;
    top: 0;
    position: fixed;
    z-index: 999;
}

/* .tooltip - makes tooltip 'border' */
/* .tooltip div - paints white interior of tooltip */
.ui-bubble .tooltip,
.ui-bubble .tooltip div
{
    border: 18px solid transparent;
    position: absolute;
}

.ui-bubble .tooltip.leftTop div,
.ui-bubble .tooltip.leftCenter div,
.ui-bubble .tooltip.leftBottom div,
.ui-bubble .tooltip.rightTop div,
.ui-bubble .tooltip.rightCenter div,
.ui-bubble .tooltip.rightBottom div
{
    margin-top: -18px;
}

.ui-bubble .tooltip.topLeft div,
.ui-bubble .tooltip.topCenter div,
.ui-bubble .tooltip.topRight div,
.ui-bubble .tooltip.bottomLeft div,
.ui-bubble .tooltip.bottomRight div,
.ui-bubble .tooltip.bottomCenter div
{
    margin-left: -18px;
}

/* left side tooltip */
.ui-bubble .tooltip.leftTop,
.ui-bubble .tooltip.leftCenter,
.ui-bubble .tooltip.leftBottom
{
    border-right-color: #005288;
    border-left: 0 none;
    left: 0;
    margin-left: -18px;
}

.ui-bubble .tooltip.leftTop div,
.ui-bubble .tooltip.leftCenter div,
.ui-bubble .tooltip.leftBottom div
{
    border-right-color: white;
    right: -20px;
}

/* right side tooltip */
.ui-bubble .tooltip.rightTop,
.ui-bubble .tooltip.rightCenter,
.ui-bubble .tooltip.rightBottom
{
    border-left-color: #005288;
    border-right: 0 none;
    margin-right: -18px;
    right: 0;
}

.ui-bubble .tooltip.rightTop div,
.ui-bubble .tooltip.rightCenter div,
.ui-bubble .tooltip.rightBottom div
{
    border-left-color: white;
    left: -20px;
}

/* upward pointing tooltip */
.ui-bubble .tooltip.topLeft,
.ui-bubble .tooltip.topCenter,
.ui-bubble .tooltip.topRight
{
    border-bottom-color: #005288;
    border-top: 0 none;
    top: 0;
    margin-top: -18px;
}

.ui-bubble .tooltip.topLeft div,
.ui-bubble .tooltip.topCenter div,
.ui-bubble .tooltip.topRight div
{
    border-bottom-color: white;
    bottom: -20px;
}

/* downward pointing tooltip */
.ui-bubble .tooltip.bottomLeft,
.ui-bubble .tooltip.bottomCenter,
.ui-bubble .tooltip.bottomRight
{
    border-top-color: #005288;
    border-bottom: 0 none;
    bottom: 0;
    margin-bottom: -18px;
}

.ui-bubble .tooltip.bottomLeft div,
.ui-bubble .tooltip.bottomCenter div,
.ui-bubble .tooltip.bottomRight div
{
    border-top-color: white;
    top: -20px;
}

/* vertical positioning for east/west tooltips */
.ui-bubble .tooltip.leftTop,
.ui-bubble .tooltip.rightTop
{
    top: 16px;
}

.ui-bubble .tooltip.leftBottom,
.ui-bubble .tooltip.rightBottom
{
    bottom: 16px;
}

.ui-bubble .tooltip.leftCenter,
.ui-bubble .tooltip.rightCenter
{
    margin-top: -18px;
    top: 50%;
}

/* horizontal positioning for north/south tooltips */
.ui-bubble .tooltip.topLeft,
.ui-bubble .tooltip.bottomLeft
{
    left: 16px;
}

.ui-bubble .tooltip.topRight,
.ui-bubble .tooltip.bottomRight
{
    right: 16px;
}

.ui-bubble .tooltip.topCenter,
.ui-bubble .tooltip.bottomCenter
{
    left: 50%;
    margin-left: -18px;
}