.graph {
    margin-bottom: 1em;
    font: normal 100%/150% arial,helvetica,sans-serif;
}

.graph caption {
    font: bold 150%/120% arial,helvetica,sans-serif;
    padding-bottom: 0.33em;
}

.graph tbody th {
    text-align: right;
}

@supports (display:grid) {

    .graph {
        display: block;
        margin-top:100px;
    }

    .graph caption {
        display: block;
    }

    .graph thead {
        display: none;
    }

    .graph tbody {
        position: relative;
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(2em, 1fr));
        column-gap: 2.5%;
        align-items: end;
        height: 100%;
        margin: 3em 0 1em 2.8em;
        padding: 0 1em;
        border-bottom: 2px solid rgba(0,0,0,0.5);
        background: repeating-linear-gradient( 180deg, rgba(170,170,170,0.7) 0, rgba(170,170,170,0.7) 1px, transparent 1px, transparent 20% );
    }

    .graph tbody:before,
    .graph tbody:after {
        position: absolute;
        left: -3.2em;
        width: 2.8em;
        text-align: right;
        font: bold 110%/120% arial,helvetica,sans-serif;
    }
    /* prendo il valore MASSIMO dell'asse Y dall'attributo data-maxy che deve essere presente nel tag tbody */
    .graph tbody:before {
        content: attr(data-maxy);
        top: -0.6em;
    }
    /* prendo il valore MINIMO dell'asse Y dall'attributo data-miny che deve essere presente nel tag tbody */
    .graph tbody:after {
        content: attr(data-miny);
        bottom: -0.6em;
    }

    .graph tr {
        position: relative;
        display: block;
    }

    .graph tr:hover {
        z-index: 999;
    }

    .graph th,
    .graph td {
        display: block;
        text-align: center;
    }

    .graph tbody th {
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        font-weight: normal;
        text-align: center;
        white-space: nowrap;
        text-indent: 0;
        transform: rotate(0deg);
    }

    .graph tbody th:after {
        content: "";
    }

    .graph td {
        width: 100%;
        height: 100%;
        background: #F63;
        border-radius: 0.5em 0.5em 0 0;
        transition: background 0.5s;
    }

    .graph tr:hover td {
        opacity: 0.7;
    }

    .graph td span {
        /*overflow: hidden;*/
        position: absolute;
        left: 45%;
        top: 50%;
        width: 4em;
        padding: 0.5em 0;
        margin: -1em 0 0;
        font: normal 80%/120% arial,helvetica,sans-serif;
        /* 			background:white; */
        /* 			box-shadow:0 0 0.25em rgba(0,0,0,0.6); */
        font-weight: bold;
        /*opacity: 0;
            transition: opacity 0.5s;*/
        color: white;
        margin-left: -2em;
    }

    .horizontal {
        transform: rotate(0deg);
    }
    /*.toggleGraph:checked + table td span,
    .graph tr:hover td span {
        width: 4em;
        margin-left: -2em;  
        opacity: 1;
    }*/
}