.pillow-tooltip {
    transition     : opacity 0.25s ease-out 0.2s;
    position       : absolute;
    box-sizing     : border-box;
    width          : 55px;
    height         : 44px;
    margin         : -37px -27px;
    background     : none repeat scroll 0 0 padding-box #ffffff;
    border-image   : url("img/pie_tooltip_bubble.png") 4 6 12 5 stretch;
    border-width   : 4px 6px 12px 5px;
    border-style   : solid;
    color          : #1f1f1f;
    text-align     : center;
    font-size      : 16px;
    line-height    : 30px;
    opacity        : 0;
    pointer-events : none;
}

.pillow-tooltip-big {
    width        : 158px;
    height       : 56px;
    margin       : -49px 0 0 -79px;
    padding-left : 7px;
    border-image : url("img/pie_tooltip_bubble_big.png") 4 6 12 5 stretch;

    .percentage {
        width        : 44px;
        float        : left;
        padding      : 2px 6px 1px 0;
        margin       : 4px 0;
        box-sizing   : border-box;
        border-right : 1px solid #dddddd;
    }

    .metric {
        padding: 2px 0;

        .title {
            display     : block;
            padding-top : 3px;
            line-height : 12px;
            font-size   : 12px;
            color       : #777777;
        }

        .number {
            display     : block;
            margin-top  : -4px;
            font-family : @main-font-regular;
            text-align  : center;
        }
    }
}