.column-chart {
    position      : relative;
    width         : 100%;
    height        : 100%;
    box-sizing    : border-box;
    border-bottom : 2px solid #000000;
}

.column-chart-bars {
    display         : flex;
    align-items     : flex-end;
    justify-content : space-between;
    height          : 100%;
    margin          : 0 25px;
}

.column-chart-axis-marker {
    position       : absolute;
    box-sizing     : border-box;
    right          : 0.5px;
    z-index        : 2;
    width          : 100%;
    margin-bottom  : -17px;
    padding-right  : 2.5px;
    font-family    : @secondary-font;
    font-size      : 12px;
    text-align     : right;
    color          : rgba(0, 0, 0, .5);
    pointer-events : none; // prevents bubble flickering

    &:before {
        content    : "";
        display    : block;
        position   : absolute;
        top        : -2px;
        width      : 100%;
        height     : 1px;
        background : #000000;
        opacity    : .1;
    }
}

.column-chart-no-data {
    user-select    : none;
    position       : absolute;
    bottom         : 6.5px;
    width          : 100%;
    margin-left    : -1.5px;
    font-size      : 125px;
    text-align     : center;
    color          : #dddddd;
    cursor         : default;
    font-family    : @main-font-ultra-light;
}

.column-chart-bar {
    position   : relative;
    width      : 280px;
    background : #5a97bd;
}

.column-chart-bar-label {
    position       : absolute;
    bottom         : -21px;
    width          : 100%;
    font-family    : @secondary-font;
    font-size      : 12px;
    text-align     : center;
    color          : #777777;
    pointer-events : none; // prevents bubble flickering
}

.column-chart-bar-value {
    position       : absolute;
    top            : -34px;
    width          : 100%;
    font-size      : 25px;
    text-align     : center;
    pointer-events : none; // prevents bubble flickering
}

.column-chart-bar-unit {
    font-size      : 13px;
    pointer-events : none;
}

.column-chart-bubble {
    display      : flex;
    align-items  : center;
    opacity      : 1; // visible by default
    box-sizing   : content-box;
    z-index      : 2;
    left         : calc(~"50% - 80px");
    top          : -65px;
    margin       : 0;
    width        : 150px;
    height       : 50px;
    font-family  : @main-font-regular;
    color        : #202020;
    border-image : url("img/tooltip_bubble_big.png") 4 6 12 5 stretch;
}

.column-chart-bubble-side {
    line-height : 42px;
    padding-top : 8px;

    &.column-chart-bubble-side-left {
        flex         : 1;
        border-right : 1px solid #eeeeee;

        .column-chart-bubble-details { display: inline; }
    }

    &.column-chart-bubble-side-right {
        flex        : 2;
        padding-top : 0;

        .column-chart-bubble-details {
            display     : block;
            line-height : normal;
        }
    }
}

.column-chart-bubble-details         { font-size: 25px; }
.column-chart-bubble-percentage-sign { font-size: 13px; }
.column-chart-bubble-value           { font-size: 16px; }

.column-chart-bubble-label {
    font-family    : @main-font-medium;
    color          : #777777;
    font-size      : 10px;
    padding-bottom : 3px;
    text-transform : uppercase;
}