.solar-details-container-monatswerte-graph {
    width: 505px;
    height: 300px;
    padding: .5em;
    background-color: white;
}

.solar-details-container-monatswerte-graph svg#monatswerte-graph {
    width: 500px;
    height: 250px;
}

.solar-details-container-monatswerte-graph ul.legend {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    margin: 10px 0;
    width: 100%;
}

.solar-details-container-monatswerte-graph ul.legend li svg {
    margin-left: 1em;
    margin-right: .5em;
}

.solar-details-container-monatswerte-graph svg.dif,
.solar-details-container-monatswerte-graph svg#monatswerte-graph .dif {
    fill: rgb(255, 217, 102);
}

.solar-details-container-monatswerte-graph svg.dir,
.solar-details-container-monatswerte-graph svg#monatswerte-graph .dir {
    fill: rgb(222, 169, 0);
}

.solar-details-container-monatswerte-graph svg.strom,
.solar-details-container-monatswerte-graph svg#monatswerte-graph .strom {
    fill: none;
    stroke: rgb(68, 114, 196);
    stroke-width: 3px;
}

.solar-details-st .solar-details-container-monatswerte-graph li.strom {
    display: none;
}

@media (max-width: 500px) {

    .solar-details-container-monatswerte-graph {
        width: 345px;
        height: 320px;
        padding: 5px;
        box-sizing: border-box;
        margin-left: auto;
        margin-right: auto;
    }

    .solar-details-container-monatswerte-graph svg#monatswerte-graph {
        width: 330px;
    }

    .solar-details-container-monatswerte-graph ul.legend li span {
        font-size: .8em;
    }
}