:root {
    --cell-corner-radius: 0px;
    --cell-border-width: 1px;
}

.cell {
    width: 100px;
    height: 100px;
    outline: var(--cell-border-width) solid #555;
    float: left;
    background-color: #000;
    overflow: hidden;
    border-radius: var(--cell-corner-radius);
}

.grid_row {
    clear: both;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    flex-wrap: nowrap;
}

.symbol_0 { background-color: #000; }
.symbol_1 { background-color: #0074D9; }
.symbol_2 { background-color: #FF4136; }
.symbol_3 { background-color: #2ECC40; }
.symbol_4 { background-color: #FFDC00; }
.symbol_5 { background-color: #AAAAAA; }
.symbol_6 { background-color: #F012BE; }
.symbol_7 { background-color: #FF851B; }
.symbol_8 { background-color: #7FDBFF; }
.symbol_9 { background-color: #870C25; }

.symbol_preview {
    width: 8%;
    height: 0;
    padding-bottom: 8%;
    float: left;
    cursor: pointer;
}

#symbol_picker, .symbol-picker {
    display: flex;
    gap: 4px;
    padding: 8px 0;
    flex-wrap: wrap;
}

.symbol-picker .symbol_preview {
    width: 32px;
    height: 32px;
    padding-bottom: 0;
    float: none;
    border: 2px solid transparent;
    border-radius: 4px;
}

.symbol-picker .symbol_preview.selected {
    border-color: #fff;
    box-shadow: 0 0 4px rgba(255,255,255,0.8);
}

.selected-symbol-preview {
    border: 2px solid rgb(255, 255, 255);
}