:root
{
    --tooltip-background-color: goldenrod;
    --tooltip-foreground-color: white;
    --tooltip-font-family: 'Helvetica Neue','Segoe UI',Helvetica,Verdana,sans-serif;
}
/**
         * Tooltip Styles
         */
/* Base styles for the element that has a tooltip */
[data-tooltip], .tooltip
{
    position: relative;
    cursor: pointer;
    text-transform: none !important;
    text-align:center;
}

    /* Base styles for the entire tooltip */
    [data-tooltip]:before,
    [data-tooltip]:after,
    .tooltip:before,
    .tooltip:after
    {
        position: absolute;
        visibility: hidden;
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
        filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
        opacity: 0;
        -webkit-transition: opacity 0.2s ease-in-out, visibility 0.2s ease-in-out, -webkit-transform 0.2s cubic-bezier(0.71, 1.7, 0.77, 1.24);
        -moz-transition: opacity 0.2s ease-in-out, visibility 0.2s ease-in-out, -moz-transform 0.2s cubic-bezier(0.71, 1.7, 0.77, 1.24);
        transition: opacity 0.2s ease-in-out, visibility 0.2s ease-in-out, transform 0.2s cubic-bezier(0.71, 1.7, 0.77, 1.24);
        -webkit-transform: translate3d(0, 0, 0);
        -moz-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
        pointer-events: none;
    }

    /* Show the entire tooltip on hover and focus */
    [data-tooltip]:hover:before,
    [data-tooltip]:hover:after,
    [data-tooltip]:focus:before,
    [data-tooltip]:focus:after,
    .tooltip:hover:before,
    .tooltip:hover:after,
    .tooltip:focus:before,
    .tooltip:focus:after
    {
        visibility: visible;
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
        filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
        opacity: 1;
    }

    /* Base styles for the tooltip's directional arrow */
    .tooltip:before,
    [data-tooltip]:before
    {
        z-index: 1001;
        border: 6px solid transparent;
        background: transparent;
        content: "";
    }

    /* Base styles for the tooltip's content area */
    .tooltip:after,
    [data-tooltip]:after
    {
        z-index: 1000;
        padding: 8px;
        width: 160px;
        /* background-color: #000; */

        background-color: var(--tooltip-background-color);
        /* background-color: hsla(0, 0%, 20%, 0.9); */
        color: var(--tooltip-foreground-color);
        content: attr(data-tooltip);
        font-size: 14px;
        font-family: var(--tooltip-font-family);
        line-height: 1.2;
    }

    /* Directions */

    /* Top (default) */
    [data-tooltip]:before,
    [data-tooltip]:after,
    .tooltip:before,
    .tooltip:after,
    .tooltip-top:before,
    .tooltip-top:after
    {
        bottom: 100%;
        left: 50%;
    }

    [data-tooltip]:before,
    .tooltip:before,
    .tooltip-top:before
    {
        margin-left: -6px;
        margin-bottom: -12px;
        border-top-color: var(--tooltip-background-color);
        /*border-top-color: hsla(0, 0%, 20%, 0.9);*/
    }

    /* Horizontally align top/bottom tooltips */
    [data-tooltip]:after,
    .tooltip:after,
    .tooltip-top:after
    {
        margin-left: -80px;
    }

    [data-tooltip]:hover:before,
    [data-tooltip]:hover:after,
    [data-tooltip]:focus:before,
    [data-tooltip]:focus:after,
    .tooltip:hover:before,
    .tooltip:hover:after,
    .tooltip:focus:before,
    .tooltip:focus:after,
    .tooltip-top:hover:before,
    .tooltip-top:hover:after,
    .tooltip-top:focus:before,
    .tooltip-top:focus:after
    {
        -webkit-transform: translateY(-12px);
        -moz-transform: translateY(-12px);
        transform: translateY(-12px);
    }

/* Left */
.tooltip-left:before,
.tooltip-left:after
{
    right: 100%;
    bottom: 50%;
    left: auto;
}

.tooltip-left:before
{
    margin-left: 0;
    margin-right: -12px;
    margin-bottom: 0;
    border-top-color: transparent;
    border-left-color: var(--tooltip-background-color);
    /*            border-left-color: hsla(0, 0%, 20%, 0.9);
            border-left-color: var(--tooltip-background-color);*/
}

.tooltip-left:hover:before,
.tooltip-left:hover:after,
.tooltip-left:focus:before,
.tooltip-left:focus:after
{
    -webkit-transform: translateX(-12px);
    -moz-transform: translateX(-12px);
    transform: translateX(-12px);
}

/* Bottom */
.tooltip-bottom:before,
.tooltip-bottom:after
{
    top: 100%;
    bottom: auto;
    left: 50%;
}

.tooltip-bottom:before
{
    margin-top: -12px;
    margin-bottom: 0;
    border-top-color: transparent;
    border-bottom-color: var(--tooltip-background-color);
    /*border-bottom-color: hsla(0, 0%, 20%, 0.9);*/
}

.tooltip-bottom:hover:before,
.tooltip-bottom:hover:after,
.tooltip-bottom:focus:before,
.tooltip-bottom:focus:after
{
    -webkit-transform: translateY(12px);
    -moz-transform: translateY(12px);
    transform: translateY(12px);
}

/* Right */
.tooltip-right:before,
.tooltip-right:after
{
    bottom: 50%;
    left: 100%;
}

.tooltip-right:before
{
    margin-bottom: 0;
    margin-left: -12px;
    border-top-color: transparent;
    border-right-color: var(--tooltip-background-color);
    /* border-right-color: hsla(0, 0%, 20%, 0.9);*/
}

.tooltip-right:hover:before,
.tooltip-right:hover:after,
.tooltip-right:focus:before,
.tooltip-right:focus:after
{
    -webkit-transform: translateX(12px);
    -moz-transform: translateX(12px);
    transform: translateX(12px);
}

/* Move directional arrows down a bit for left/right tooltips */
.tooltip-left:before,
.tooltip-right:before
{
    top: 3px;
}

/* Vertically center tooltip content for left/right tooltips */
.tooltip-left:after,
.tooltip-right:after
{
    margin-left: 0;
    margin-bottom: -16px;
}