.grid-container {
    display: flex;
    flex-wrap: wrap;
    text-align: center;
    color: white;
}

.grid-container.not-selected > div {
    color: lightgray;
}

.grid-container > div {
    width: 1.5rem;
    line-height: 1;
    padding: 0.25rem 0;
    border: solid 1px white;
}

.grid-container > div.hovered {
    box-shadow: 0 0 3px black;
    font-weight: bold;
    color: black;
    border-color: black;
    z-index: 0;
}

.grid-container > div.selected {
    font-weight: bold;
    color: black;
    box-shadow: 0 0 5px black;
    z-index: 0;
}

.grid-container > div.related {
    font-weight: bold;
    color: black;
}


.grid-container > div.error {
    background-color: #f44336;
}