@space: 2px;
@space-min: 5px;
@space-default: 10px;
@space-large: 20px;

@colVar-1: #011f4b;
@colVar-2: #3b5998;
@colVar-3: #ededed;
@colVar-4: #cccccc;
@colVar-5: #005b96;
@colVar-6: #ffffff;
@colVar-7: #e5e5e5;
@colVar-8: #b7b7b7;
@colVar-9: #000000;
@colVar-10: #555555;

@defaultTextColor: @colVar-10;
@border-radius: 4px;

.tsdev-pie-chart {
    overflow: hidden;

    .chart-wrapper {
        overflow: hidden;
        border: 1px solid #cccccc;
    }

    .tsdev-pie-chart-legend {
        position: relative;
        z-index: 1;
        overflow-y: auto;
        border: 1px solid #cccccc;
    }

    text {
        stroke-width: 0 !important;
    }

    .legend-item-color {
        float: left;
        width: 10px;
        height: 10px;
        margin-left: 2px;
        margin-right: 5px;
        position: relative;
        top: 2px;
        border-radius: 5px;
    }

    .chart-svg {
        path:hover {
            opacity: 0.5;
        }

        text {
            font-family: Arial;
            font-size: 12px;

        }
    }

}

.tooltip {
    font-size: 12px;
}

.tooltip-inner {
    max-width: 200px;
    padding: 2px @space-min;
    color: @colVar-6;
    text-align: center;
    background-color: @colVar-9;
    border-radius: @border-radius;
    box-shadow: 0 0 15px @colVar-6;
}

.widget-tooltip {
    position: absolute !important;
    z-index: 99999 !important;
    width: auto;
    height: auto;
    min-width: 50px;
    padding: 5px;
    text-align: center;
    pointer-events: none;
    background: @colVar-9;
    border: 0;
    border-radius: 4px;
    box-shadow: 0 0 15px @colVar-6;

    .tooltip-legend-color {
        float: left;
        width: 12px;
        height: 12px;
        margin-right: 5px;
        opacity: 1 !important;
        border: 1px solid #ffffff;
    }

    .tooltip-text {
        position: relative;
        top: -1px;
        width: inherit;
        height: inherit;
        min-width: 50px;
        font: 10px sans-serif;
        color: @colVar-6;
        white-space: nowrap;
    }
}
