:root {
    --provinsi: #0D2E3C;
    --kabupaten: #2A5771;
    --tema: #004ED6;
    --fungsisosial: #341B69;
    --alatbahan: #B71F68;
    --demografis: #CE5400;
    --ekosistem: #3FB00B;
    --caraproses: #fbff13;
    --wbtb: #1e90ff;

    --strokewidth: 1px;
}

/* grids */
.minor-grid {
    stroke: #cccccc;
    stroke-width: 0.1;
    shape-rendering: crispEdges;
}

.main-grid {
    color: #212121;
    stroke-width: 0.4;
    shape-rendering: crispEdges;
}

/* ticks */
.axis line {
    stroke: #3f3f3f;
    shape-rendering: crispEdges;
}

/* contour */
.axis path {
    stroke: #3f3f3f;
    shape-rendering: crispEdges;
}

/* rectangle */


/* line */
.line-wrapper {
    opacity: 0.8;
}

path.freeline {
    stroke: #d444ae;
    stroke-width: 6;
    fill: none;
}

/* radial shape */
path.radial {
    stroke: none;
    fill: #60e59b;
}


.svg-container {
    position: relative;
}

#tooltip {
    position: absolute;
    visibility: hidden;
    background: white;
    padding: 10px 16px;
    border: 1px solid #ccc;
    border-radius: 7px;
    box-shadow: 0px 4px 11px 1px rgba(0, 0, 0, 0.13);
    -webkit-box-shadow: 0px 4px 11px 1px rgba(0, 0, 0, 0.13);
    -moz-box-shadow: 0px 4px 11px 1px rgba(0, 0, 0, 0.13);
}

.legend-row {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
}

.center {
    fill: #e74c3c;
}

.provinsi {
    fill: #fff;
    background-color: var(--provinsi);
    stroke: var(--provinsi);
    stroke-width: var(--strokewidth);
}

.kabupaten {
    fill: #fff;
    background-color: var(--kabupaten);
    stroke: var(--kabupaten);
    stroke-width: var(--strokewidth);
}

.dati {
    fill: #fff;
    background-color: var(--kabupaten);
    stroke: var(--kabupaten);
    stroke-width: var(--strokewidth);
}

.wbtb {
    fill: #fff;
    background-color: var(--wbtb);
    stroke: var(--wbtb);
    stroke-width: var(--strokewidth);
}

.tema {
    fill: #fff;
    background-color: var(--tema);
    stroke: var(--tema);
    stroke-width: var(--strokewidth);
}

.fungsiSosial {
    fill: #fff;
    background-color: var(--fungsisosial);
    stroke: var(--fungsisosial);
    stroke-width: var(--strokewidth);
}

.alatBahan {
    fill: #fff;
    background-color: var(--alatbahan);
    stroke: var(--alatbahan);
    stroke-width: var(--strokewidth);
}

.demografi {
    fill: #fff;
    background-color: var(--demografis);
    stroke: var(--demografis);
    stroke-width: var(--strokewidth);
}

.ekosistem {
    fill: #fff;
    background-color: var(--ekosistem);
    stroke: var(--ekosistem);
    stroke-width: var(--strokewidth);
}

.caraProses {
    fill: #fff;
    background-color: var(--caraproses);
    stroke: var(--caraproses);
    stroke-width: var(--strokewidth);
}

.parent-provinsi div {
    color: var(--provinsi);
}

.parent-kabupaten div {
    color: var(--kabupaten);
}

.parent-wbtb div {
    color: var(--wbtb);
}

.parent-tema div {
    color: var(--tema);
}

.parent-fungsiSosial div {
    color: var(--fungsisosial);
}

.parent-alatBahan div {
    color: var(--alatbahan);
}

.parent-demografi div {
    color: var(--demografis);
}

.parent-ekosistem div {
    color: var(--ekosistem);
}

.parent-caraProses div {
    color: var(--caraproses);
}