.ui-tooltip {
    margin: 0; /* 1em 1em 0 1em; */
    padding: 0.5em 1em;
    position: absolute;
    z-index: 1000;
    white-space: nowrap;
}

.ui-tooltip table {
    white-space: normal;
}

.adminReport .ui-tooltip, .adminInterface .ui-tooltip {
    background-color: hsl(35, 20%, 85%);
/*     font-family: Calibri; */
    border: 2px solid white;
}

.adminReport .ui-tooltop {
    font-size: 80%;
}

.adminInterface .ui-toolip {
    font-size: 90%;
}

.widget .ui-tooltip {
    background-color: white;
    font-size: inherit;
}

.ui-tooltip-content span {
    vertical-align: baseline;
}

.ui-tooltip-content .big {
    font-size: 150%;
}

.ui-tooltip-content .right {
    float: right;
    margin-left: 2em;
}

/* Thanks to http://nicolasgallagher.com/pure-css-speech-bubbles/ for idea on how to render triangle using just CSS */
.ui-tooltip-leader {
    content: "";
    position: absolute;
    bottom: -14px;
    border-width: 15px 7px 0 7px;
    border-style: solid;
    display: block;
    width: 0;
}

.adminReport.widget .ui-tooltip-leader {
    border-color: white transparent;
}

.adminReport .ui-tooltip-leader, .adminInterface .ui-tooltip-leader {
    border-color: hsl(35, 20%, 85%) transparent;
}

.help .ui-tooltip-leader {
    border-color: hsl(180, 20%, 85%) transparent;
}

.adminReport .tooltip:hover {
    background-color: hsl(35, 20%, 95%);
}

.adminReport rect.tooltip:hover, .adminReport .tooltip:hover rect,
.adminReport circle.tooltip:hover, .adminReport .tooltip:hover circle
{
    stroke: hsl(35, 40%, 46%);
    stroke-width: 2px;
}

.widget .tooltip:hover {
    background-color: white;
}

.widget rect.tooltip:hover, .widget .tooltip:hover rect, .adminInterface rect.tooltip:hover, .adminInterface .tooltip:hover rect,
.widget circle.tooltip:hover, .widget .tooltip:hover circle, .adminInterface circle.tooltip:hover, .adminInterface .tooltip:hover circle
{
    stroke: white;
    stroke-width: 2px;
}


.ui-tooltip .display-block.nextVertDiv {
    border-right: 2.5px dotted grey;
}

.ui-tooltip .display-label {
    background-color: hsl(35, 20%, 95%) !important;
}



/* for help tooltips */
    .ui-tooltip.help {
        background-color: hsl(180, 20%, 85%);
    }

    .example {
        font-family: monospace;
        padding: 0.2em 0.5em;
        margin: 0 0.2em;
        font-size: 120%;
        color: hsl(134, 89%, 23%);
        background-color: hsla(0, 0%, 100%, 0.5);
    }

    .example.wrong {
        color: hsl(0, 89%, 23%);
    }

    .inline-li {
        display: list-item;
        list-style-type: disc;
        margin-left: 2em;
    }

    kbd {
        border: 1px solid #909090;
        border-bottom-width: 3px;
        border-right-width: 3px;
        border-radius: 4px;
        padding: 2px 5px;
        background-color: hsl(0, 0%, 95%);
    }