/* Tooltip Settings */
[data-tooltip] {
    position: relative;
}

    [data-tooltip]:before {
        content: '';
        /* hides the tooltip when not hovered */
        display: none;
        content: '';
        border-left: 5px solid transparent;
        border-right: 5px solid transparent;
        border-bottom: 5px solid black;
        position: absolute;
        top: 42px;
        left: 35px;
        z-index: 8;
        font-size: 0;
        line-height: 0;
        width: 0;
        height: 0;
    }

    [data-tooltip]:after {
        display: none;
        white-space: pre-line;
        content: attr(data-tooltip);
        position: absolute;
        top: 47px;
        left: 0;
        padding: 5px 8px;
        background: #E0F1FD;
        border: 1px solid black;
        color: black;
        z-index: 9;
        font-size: 0.75em;
        height: 18px;
        line-height: 18px;
        -webkit-border-radius: 3px;
        -moz-border-radius: 3px;
        border-radius: 3px;
        white-space: nowrap;
        word-wrap: normal;
    }

    [data-tooltip]:hover:before,
    [data-tooltip]:hover:after {
        display: block;
    }






/*.ui-tooltip, .arrow:after {
    background: #E0F1FD;
    border: 2px solid white;
}
.ui-tooltip {
    white-space: pre-line;
    padding: 10px 20px;
    color: black;
    border-radius: 20px;
    font: bold 14px "Helvetica Neue", Sans-Serif;
    text-transform: uppercase;
    box-shadow: 0 0 7px black;
}
.arrow {
    width: 70px;
    height: 16px;
    overflow: hidden;
    position: absolute;
    left: 50%;
    margin-left: -35px;
    bottom: -16px;
}
.arrow.top {
    top: -16px;
    bottom: auto;
}
.arrow.left {
    left: 20%;
}
.arrow:after {
    content: "";
    position: absolute;
    left: 20px;
    top: -20px;
    width: 25px;
    height: 25px;
    box-shadow: 6px 5px 9px -9px black;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}
.arrow.top:after {
    bottom: -20px;
    top: auto;
}*/

.ui-tooltip {
    background: #FFFFFF;
    color: black;
    border: 2px solid #a4c8f5;
    padding: 0;
    opacity: 1;
}

.ui-tooltip-content {
    position: relative;
    padding: 1em;
}

    .ui-tooltip-content::after {
        content: '';
        position: absolute;
        border-style: solid;
        display: block;
        width: 0;
    }

.right .ui-tooltip-content::after {
    top: 18px;
    left: -10px;
    border-color: transparent #a4c8f5;
    border-width: 10px 10px 10px 0;
}

.left .ui-tooltip-content::after {
    top: 18px;
    right: -10px;
    border-color: transparent #a4c8f5;
    border-width: 10px 0 10px 10px;
}

.top .ui-tooltip-content::after {
    bottom: -10px;
    left: 72px;
    border-color: #a4c8f5 transparent;
    border-width: 10px 10px 0;
}

.bottom .ui-tooltip-content::after {
    top: -10px;
    left: 72px;
    border-color: #a4c8f5 transparent;
    border-width: 0 10px 10px;
}