.ft-tooltip-container {
    position: absolute;
    top: 0;
    width: auto;
    z-index: 0;

    .circ {
        border-radius: 50%;
        color: #fff;
        display: block;
        height: 10px;
        position: absolute;
        text-align: center;
        width: 10px;

        &.actuals {
            background-color: $primary-blue;
        }

        &.projected {
            background-color: $primary-green;
        }

        &.original-projected {
            background-color: $peacock;
        }

        &.expensed {
            background-color: $primary-purp;
        }
    }

    &.plus,
    &.minus {
        .circ.actuals {
            height: 16px;
            margin-top: -3px;
            margin-left: -3px;
            width: 16px;
        }

        &.right {
            .circ.actuals {
                margin-left: 0;
                margin-right: -3px;
            }
        }
    }

    &.plus .circ.actuals:before {
        content: '+';
        display: block;
        position: absolute;
        top: -1px;
        width: 100%;
    }

    &.minus .circ.actuals:before {
        content: '-';
    }

    .tip {
        border-radius: 3px;
        color: #fff;
        display: block;
        line-height: 26px;
        opacity: .85;
        position: absolute;

        &.actuals {
            background-color: $primary-blue;
        }

        &.projected {
            background-color: $primary-green;
        }

        &.original-projected {
            background-color: $peacock;
        }

        &.expensed {
            background-color: $primary-purp;
        }

        &.expanded {
            min-width: 225px;

            .tip-details {
                display: block;
            }
        }

        .pad {
            display: block;
            padding: 0 10px;
        }

        .tip-details {
            background-color: #fff;
            border-bottom-left-radius: 3px;
            border-bottom-right-radius: 3px;
            color: $primary-txt-color;
            display: none;
            margin: 0 1px 1px 1px;
            padding: 15px;

            i {
                display: inline-block;
                height: 10px;
                margin-right: 5px;
                vertical-align: middle;
                width: 10px;
            }

            .term-license {
                background-color: rgba(2, 110, 173, 0.5);
            }

            .transactional {
                background-color: rgba(88, 160, 201, 0.5);
            }

            .transactional-theatrical {
                background-color: rgba(172, 207, 228, 0.5);
            }
        }
    }

    &.right {
        border-right: 1px solid $rhino;

        .circ {
            left: auto;
            right: -5px;
        }

        .tip {
            left: auto;
            right: 8px;

            .pad {
                text-align: right;
            }
        }
    }

    &.left {
        border-left: 1px solid $rhino;

        .circ {
            left: -5px;
            right: auto;
        }

        .tip {
            left: 8px;
            right: auto;
        }
    }
}