.elements {margin: 1rem 0;
        display: flex;
        justify-content: space-around;
    }
.grids {margin: 2rem 0;
 display: flex; flex-flow: row wrap; gap: 2rem;
        justify-content: center;
}

.grid7 .figure { flex: 0 0 12rem}
    .grid {
        text-align: center;
    }

.figure {text-align: center}
.figure .caption { margin-top: 0.5rem;}
    .grid-table { border-collapse: collapse;
    width: auto;
        border: 1px solid #bbb;
        cursor: pointer;
        margin: 0 auto;
    }

.grid-element { display: inline-block; border-collapse: collapse; width: auto; border: 0px none}
.grid-element.grid-element.grid-element tr, .grid-table.grid-table.grid-table tr {background-color: transparent}
     .grid-matrix {
        border: 1px solid #bbb;
        border-collapse: collapse;
    }
.grid-matrix.grid-matrix.grid-matrix tr {background-color: transparent}
    .grid-matrix td {
        border: 1px solid #bbb;

        padding: 0;
    }

.grid-response .border-top { border-top: 3px solid #000}
.grid-response .border-right { border-right: 3px solid #000}
.grid-response .border-left { border-left: 3px solid #000}
.grid-response .border-bottom { border-bottom: 3px solid #000}


.grid-matrix {display: inline-block}
.grid-matrix td     {
    box-sizing: border-box;
        border: 1px solid #bbb; padding: 0;
        width: 2.50rem;
        height: 2.5rem;
        text-align: center;
        vertical-align: middle;
    }
.grid-matrix label {display: block; width: 1.5rem; height: 1.5rem}
.grid-matrix input { max-width: 2.5em; text-align: center; border: 0px none; padding-left: 0; padding-right: 0; max-height: 2rem}


span.marker {
display: block; font-weight: bold; font-size: 180%; padding-top: 0.3rem; line-height: 0.5em
}

.ok .marker {color: green}
.nok .marker {color: red}
.not-found .marker {color: darkorange}
.grids label .ok, .grids label .nok, .grids label img, .grids label font {display: none}