/* Styles for top-level component */
.top-level-component .game-boards-container {
    display: flex;
}

.top-level-component .game-boards-container .game-board {
    margin-right: 50px;
}

.game-board-component .grid-container .grid-row {
    display: flex;
}

.game-board-component .grid-container .grid-row .label {
    margin-right: 5px;
    padding-top: 10px;
}

/* Styles for the various grid cell states. */

.game-board-cell-component {
    width: 40px;
    height: 40px;
    border: 1px solid grey;
}

.game-board-cell-component.available {
    background: #eeeeee;
}

.game-board-cell-component.available:hover {
    background: #cccccc;
}

.game-board-cell-component.disabled {
    background: #cccccc;
}

.game-board-cell-component.disabled:hover {
    background: #bbbbbb;
}

.game-board-cell-component.ship {
    background: #414141;
}

.game-board-cell-component.damaged {
    background: #dd0000;
}

.game-board-cell-component.sunk {
    background: #000000;
}

.game-board-cell-component.missed {
    background: #eeeeee;
}

.column_labels {
    display: flex;
    margin-top: 5px;
    margin-left: 15px;
}

.column_labels .label {
    width: 42px;
    text-align: center;
}