/* so can change thru js */
: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;
}

/* Colors */
.symbol_0 {
    background-color: #000;
}
.symbol_1 {
    background-color: #0074D9;
    /* blue */
}
.symbol_2 {
    background-color: #FF4136;
    /* red */
}
.symbol_3 {
    background-color: #2ECC40;
    /* green */
}
.symbol_4 {
    background-color: #FFDC00;
    /* yellow */
}
.symbol_5 {
    background-color: #AAAAAA;
    /* grey */
}
.symbol_6 {
    background-color: #F012BE;
    /* fuschia */
}
.symbol_7 {
    background-color: #FF851B;
    /* orange */
}
.symbol_8 {
    background-color: #7FDBFF;
    /* teal */
}
.symbol_9 {
    background-color: #870C25;
    /* brown */
}


/*Symbol picker*/

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

#symbol_picker {
    float: left;
    margin-left: 20px;
    padding-bottom: 8px;
    width: 100%;
}

#output_grid_size {
    max-width: 70px !important;
}

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

}

/*Selectable*/

.ui-selected {
    background-image: url(../img/black-twill.png), url(../img/brushed-alum.png);
}

.ui-selectable-helper {
    border: 1px dotted #ddd;
    position: absolute;
    z-index: 1000;
}