.igz-highcharts-wrapper, .igz-tooltip {
    .tooltips-color-set();

    .igz-tooltip-wrapper {
        background-color: @tooltip-wrapper-bg-color;
        font-size: 12px;
        font-family: @font-family-sans-serif;
        padding: 12px 8px;
        width: 100%;
        border-radius: 5px;

        .series-data {
            display: flex;
            align-items: center;

            &:not(:last-child) {
                margin-bottom: 5px;
            }

            .series-color-pointer {
                margin-right: 8px;
                width: 8px;
                height: 8px;
                border-radius: 50%;
            }

            .series-label {
                color: @series-label-color;
                min-width: 56px;
                margin-right: 16px;
            }

            .series-value {
                margin-left: auto;
            }
        }

        .tooltip-header {
            font-size: 12px;

            .header-name {
                display: inline-block;
            }
        }

        .tooltip-label {
            color: @tooltip-label-color;
            font-weight: 400;
        }

        .tooltip-value {
            color: @tooltip-value-color;

            .tooltip-value-highlighted {
                color: @tooltip-value-hightlighted-color;
            }
        }

        .tooltip-label, .tooltip-value {
            line-height: 15px;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
        }
    }

    .igz-tooltip-arrow-down {
        .triangle-arrow(down, @tooltip-arrow-down-color, 7px, 7px);
        position: absolute;
        margin-left: -7px;
        left: 50%;
    }

    .igz-tooltip-arrow-up {
        .triangle-arrow(up, @tooltip-arrow-down-color, 7px, 7px);
        position: absolute;
        top: -7px;
        margin-left: -7px;
        left: 50%;
    }

    .igz-row span {
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }
}

.igz-highcharts-wrapper {

    g.highcharts-tooltip {
        path {
            fill: none;
        }
    }

    div.highcharts-tooltip {

        > span {
            width: 160px;
        }
    }
}

// Custom Bootstrap tooltip styles

.tooltip {
    .tooltips-color-set();

    transition-duration: 0s;
    z-index: 10001;

    &:not(.more-info-tooltip) {
        pointer-events: none;
    }

    .tooltip-arrow {
        display: none;
    }

    &.bottom {
        margin-top: -4px;
    }

    &.top {
        margin-top: 4px;
    }

    .tooltip-inner {
        text-align: left;
        background-color: @tooltip-inner-bg-color;
        color: @tooltip-inner-color;
        border-radius: 2px;
        word-wrap: break-word;
        max-width: 280px;
    }
}