/* Contents: BAROMETER, GRAPH, TABEL */

/* BAROMETER */
.axy-widget-dekkingsgraad #barometer {
    position: relative;
}

.axy-widget-dekkingsgraad #svg-barometer {
    width: 150px;
    height: 525px;
    z-index: 1;
    top: 0px;
    left: 0px;
    fill: white;
}

.axy-widget-dekkingsgraad #barometer #legend {
    position: absolute;
    top: 0;
    left: 150px;
    width: 50%;
}



/* Barometer tube */
.axy-widget-dekkingsgraad #svg-barometer .baro-material {
    fill: none;
}

.axy-widget-dekkingsgraad #svg-barometer .marker-line {
    stroke-width: 7px;
}

.axy-widget-dekkingsgraad #svg-barometer #euro {
    fill: white;
    font-size: 100px;
    font-family: "courier";
    font-weight: bold;
}

.axy-widget-dekkingsgraad #svg-barometer #needle {
    width: 100px;
    height: 525px;
    z-index: 2;
    top: 0px;
    left: 0px;
}

.axy-widget-dekkingsgraad #svg-barometer .needle-percentage {
    fill: white;
    font-size: 12px;
    font-family: "Open Sans", sans-serif;
}

/* Legenda */
.axy-widget-dekkingsgraad #barometer #legend .section {
    position: absolute;
    width: 100%;
    padding: 10px;
}

    .axy-widget-dekkingsgraad #barometer #legend .section .icon {
        position: relative;
        display: inline-block;
        width: 60px;
        height: 60px;
        background-repeat: no-repeat;
        background-size: contain;
    }

.axy-widget-dekkingsgraad #barometer .section:nth-of-type(1) .icon {
    background-image: url('../../_Klanten/images/dekkingsgraad/sun.png');
}

.axy-widget-dekkingsgraad #barometer .section:nth-of-type(2) .icon {
    background-image: url('../../_Klanten/images/dekkingsgraad/cloud_sun.png');
}

.axy-widget-dekkingsgraad #barometer .section:nth-of-type(3) .icon {
    background-image: url('../../_Klanten/images/dekkingsgraad/cloud.png');
}

.axy-widget-dekkingsgraad #barometer .section:nth-of-type(4) .icon {
    background-image: url('../../_Klanten/images/dekkingsgraad/rain.png');
}

.axy-widget-dekkingsgraad #barometer .section:nth-of-type(5) .icon {
    background-image: url('../../_Klanten/images/dekkingsgraad/thunder.png');
}

.axy-widget-dekkingsgraad #barometer .section .title,
.axy-widget-dekkingsgraad #barometer .section .description {
    left: 90px; /*icon space*/
    position: absolute;
}

.axy-widget-dekkingsgraad #barometer #legend .title {
    font-size: 14px;
    font-weight: bold;
    top: 10px;
}

.axy-widget-dekkingsgraad #barometer #legend .description {
    fill: black;
    font-size: 12px;
    font-family: "Open Sans", sans-serif;
    top: 30px;
}

.axy-widget-dekkingsgraad #barometer #legend .section:not(:first-child) .separator {
    border-top: 1px dashed #777;
    display: block !important;
    position: absolute;
    top: 0;
    width: 100%;
}

/* GRAPH */
.axy-widget-dekkingsgraad #graph {
    width: 100%;
    padding: 10px;
    z-index: 1;
    top: 0px;
    left: 0px;
    overflow-x: auto;
    overflow-y: hidden;
}

.axy-widget-dekkingsgraad #svg-graph {
    width: 750px;
    height: 400px;
}

.axy-widget-dekkingsgraad #graph .legenda-text-bottom {
    font-weight: bold;
}

.axy-widget-dekkingsgraad #graph .raster-line {
    stroke: grey;
    stroke-dasharray: 1,1;
}

.axy-widget-dekkingsgraad #graph .curve {
    stroke-width: 2;
    fill: none;
}
/* TABEL */
.axy-widget-dekkingsgraad #tabel {
    overflow-x: auto;
}
.axy-widget-dekkingsgraad #tabel th {
    font-weight: bold;
}




/* DEFAULT STYLE */
.axy-widget-dekkingsgraad #graph .beleid {
    stroke: lightgreen;
}

.axy-widget-dekkingsgraad #graph .huidige {
    stroke: lightblue;
}

.axy-widget-dekkingsgraad #graph .vereiste {
    stroke: red;
}

.axy-widget-dekkingsgraad #graph .dot.beleid {
    fill: lightgreen;
}

.axy-widget-dekkingsgraad #graph .dot.huidige {
    fill: lightblue;
}

.axy-widget-dekkingsgraad #graph .dot.vereiste {
    fill: red;
}

.axy-widget-dekkingsgraad #svg-barometer .baro-fluid {
    fill: #ddd;
}
    
.axy-widget-dekkingsgraad #svg-barometer .baro-material {
    stroke: #777;
    stroke-width: 20px;
}

.axy-widget-dekkingsgraad #svg-barometer #euro {
    fill: white;
}

.axy-widget-dekkingsgraad #barometer #legend .section .icon {
    fill: black;
}