/*
* Tooltip Styles
*/
[data-tooltip] .svg-inline--fa,
[data-tooltip] .fa {
    color: black;
}

/* Base styles for the element that has a tooltip */
[data-tooltip] {
    position: relative;
    cursor: pointer;
    text-align: center;
}

    /* Base styles for the entire tooltip */
    [data-tooltip]:before,
    [data-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 {
        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 */
    [data-tooltip]:before {
        z-index: 1001;
        border: 6px solid transparent;
        background: transparent;
        content: "";
    }

    /* Base styles for the tooltip's content area */
    [data-tooltip]:after {
        z-index: 1000;
        padding: 8px;
        /*width: 160px;*/
        background-color: #000;
        background-color: hsla(0, 0%, 20%, 0.9);
        color: #fff;
        content: attr(data-tooltip);
        font-size: 14px;
        line-height: 1.2;
        border-radius: 5px;
    }

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

    [data-tooltip]:before {
        margin-left: -6px;
        margin-bottom: -12px;
        border-top-color: #000;
        border-top-color: hsla(0, 0%, 20%, 0.9);
    }

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

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

    .wide[data-tooltip]:after {
        width: 400px;
        left: -27px;
    }

    .tooltip-right[data-tooltip]:before {
        top: 0px;
        left: 28px;
        margin-left: 0;
        margin-bottom: 0;
        border-right-color: #000;
        border-right-color: hsla(0, 0%, 20%, 0.9);
        border-top-color: transparent;
    }

    .tooltip-right[data-tooltip]:after {
        top: -11px;
        left: 40px;
        margin-left: 0;
        bottom: auto;
        right: auto;
    }

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