.pie-chart {
}

    .pie-chart div {
        background: white;
        border: white;
        border-style: solid;
        border-width: 1px;
    }

        .pie-chart div svg {
            display: block;
            margin: auto;
        }

            .pie-chart div svg .segment-1 {
                fill: #0000ff
            }

            .pie-chart div svg .segment-2 {
                fill: #00ff00
            }

            .pie-chart div svg .segment-3 {
                fill: #377bbc
            }

            .pie-chart div svg .segment-4 {
                fill: #ffff00
            }

            .pie-chart div svg .segment-5 {
                fill: #00ffff
            }

            .pie-chart div svg .segment-6 {
                fill: #ff00ff
            }

            .pie-chart div svg .segment-7 {
                fill: #000080
            }

            .pie-chart div svg .segment-8 {
                fill: #008000
            }

            .pie-chart div svg .segment-9 {
                fill: #800000
            }

            .pie-chart div svg .segment-10 {
                fill: #808000
            }

            .pie-chart div svg .segment-11 {
                fill: #800080
            }

            .pie-chart div svg .segment-12 {
                fill: #008080
            }

            .pie-chart div svg .segment-13 {
                fill: #c04040
            }

            .pie-chart div svg .segment-14 {
                fill: #40c0c0
            }

            .pie-chart div svg .segment-15 {
                fill: #c0c040
            }

            .pie-chart div svg .segment-16 {
                fill: #a0a0f0
            }

            .pie-chart div svg .segment-selected-1 {
                fill: #1010ef
            }

            .pie-chart div svg .segment-selected-2 {
                fill: #10ef10
            }

            .pie-chart div svg .segment-selected-3 {
                fill: #478bcc
            }

            .pie-chart div svg .segment-selected-4 {
                fill: #efef10
            }

            .pie-chart div svg .segment-selected-5 {
                fill: #10efef
            }

            .pie-chart div svg .segment-selected-6 {
                fill: #ef10ef
            }

            .pie-chart div svg .segment-selected-7 {
                fill: #101090
            }

            .pie-chart div svg .segment-selected-8 {
                fill: #109010
            }

            .pie-chart div svg .segment-selected-9 {
                fill: #901010
            }

            .pie-chart div svg .segment-selected-10 {
                fill: #909010
            }

            .pie-chart div svg .segment-selected-11 {
                fill: #901090
            }

            .pie-chart div svg .segment-selected-12 {
                fill: #109090
            }

            .pie-chart div svg .segment-selected-13 {
                fill: #d05050
            }

            .pie-chart div svg .segment-selected-14 {
                fill: #50d0d0
            }

            .pie-chart div svg .segment-selected-15 {
                fill: #d0d050
            }

            .pie-chart div svg .segment-selected-16 {
                fill: #b0b0ff
            }

            .pie-chart div svg .segment-smallpercentage {
                fill: #a0a0a0
            }

        .pie-chart div .pie-key {
            margin: 20px;
        }

            .pie-chart div .pie-key [class*="legend-"] {
                margin: 3px;
                margin-right: 10px;
                display: inline-block;
                vertical-align: middle;
                width: 10px;
                height: 10px;
                border-radius: 50%;
            }

        .pie-chart div figcaption .pie-key-list {
            margin: 0;
            padding: 0;
            list-style: none;
            font-size: 0.8em;
        }

            .pie-chart div figcaption .pie-key-list li {
                margin: 0 0 7px;
                padding: 0;
            }

        .pie-chart div figcaption ul .legend-dot-1 {
            background: #0000ff;
            transform: translateY(-0.1em);
        }

        .pie-chart div figcaption ul .legend-dot-2 {
            background: #00ff00;
            transform: translateY(-0.1em);
        }

        .pie-chart div figcaption ul .legend-dot-3 {
            background: #377bbc;
            transform: translateY(-0.1em);
        }

        .pie-chart div figcaption ul .legend-dot-4 {
            background: #ffff00;
            transform: translateY(-0.1em);
        }

        .pie-chart div figcaption ul .legend-dot-5 {
            background: #00ffff;
            transform: translateY(-0.1em);
        }

        .pie-chart div figcaption ul .legend-dot-6 {
            background: #ff00ff;
            transform: translateY(-0.1em);
        }

        .pie-chart div figcaption ul .legend-dot-7 {
            background: #000080;
            transform: translateY(-0.1em);
        }

        .pie-chart div figcaption ul .legend-dot-8 {
            background: #008000;
            transform: translateY(-0.1em);
        }

        .pie-chart div figcaption ul .legend-dot-9 {
            background: #800000;
            transform: translateY(-0.1em);
        }

        .pie-chart div figcaption ul .legend-dot-10 {
            background: #808000;
            transform: translateY(-0.1em);
        }

        .pie-chart div figcaption ul .legend-dot-11 {
            background: #800080;
            transform: translateY(-0.1em);
        }

        .pie-chart div figcaption ul .legend-dot-12 {
            background: #808000;
            transform: translateY(-0.1em);
        }

        .pie-chart div figcaption ul .legend-dot-13 {
            background: #c04040;
            transform: translateY(-0.1em);
        }

        .pie-chart div figcaption ul .legend-dot-14 {
            background: #40c0c0;
            transform: translateY(-0.1em);
        }

        .pie-chart div figcaption ul .legend-dot-15 {
            background: #c0c040;
            transform: translateY(-0.1em);
        }

        .pie-chart div figcaption ul .legend-dot-16 {
            background: #a0a0f0;
            transform: translateY(-0.1em);
        }

        .pie-chart div figcaption ul .legend-dot-selected-1 {
            background: #0000ff;
            transform: translateY(-0.1em);
        }

        .pie-chart div figcaption ul .legend-dot-selected-2 {
            background: #00ff00;
            transform: translateY(-0.1em);
        }

        .pie-chart div figcaption ul .legend-dot-selected-3 {
            background: #377bbc;
            transform: translateY(-0.1em);
        }

        .pie-chart div figcaption ul .legend-dot-selected-4 {
            background: #ffff00;
            transform: translateY(-0.1em);
        }

        .pie-chart div figcaption ul .legend-dot-selected-5 {
            background: #00ffff;
            transform: translateY(-0.1em);
        }

        .pie-chart div figcaption ul .legend-dot-selected-6 {
            background: #ff00ff;
            transform: translateY(-0.1em);
        }

        .pie-chart div figcaption ul .legend-dot-selected-7 {
            background: #000080;
            transform: translateY(-0.1em);
        }

        .pie-chart div figcaption ul .legend-dot-selected-8 {
            background: #008000;
            transform: translateY(-0.1em);
        }

        .pie-chart div figcaption ul .legend-dot-selected-9 {
            background: #800000;
            transform: translateY(-0.1em);
        }

        .pie-chart div figcaption ul .legend-dot-selected-10 {
            background: #808000;
            transform: translateY(-0.1em);
        }

        .pie-chart div figcaption ul .legend-dot-selected-11 {
            background: #800080;
            transform: translateY(-0.1em);
        }

        .pie-chart div figcaption ul .legend-dot-selected-12 {
            background: #008080;
            transform: translateY(-0.1em);
        }

        .pie-chart div figcaption ul .legend-dot-selected-13 {
            background: #c04040;
            transform: translateY(-0.1em);
        }

        .pie-chart div figcaption ul .legend-dot-selected-14 {
            background: #40c0c0;
            transform: translateY(-0.1em);
        }

        .pie-chart div figcaption ul .legend-dot-selected-15 {
            background: #c0c040;
            transform: translateY(-0.1em);
        }

        .pie-chart div figcaption ul .legend-dot-selected-16 {
            background: #a0a0f0;
            transform: translateY(-0.1em);
        }

        .pie-chart div figcaption ul .legend-dot-smallpercentage {
            background: #a0a0a0;
            transform: translateY(-0.1em);
        }