.as-color-cell {
    position: relative;
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAIAAAAmkwkpAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAaSURBVBhXYzh8+PD///8hJAOcBSRxyRw+DABJUCox2kjvSgAAAABJRU5ErkJggg==');
    background-size: 1.5em;
    image-rendering: optimizeSpeed;
    /* STOP SMOOTHING, GIVE ME SPEED  */
    image-rendering: -moz-crisp-edges;
    /* Firefox                        */
    image-rendering: -o-crisp-edges;
    /* Opera                          */
    image-rendering: -webkit-optimize-contrast;
    /* Chrome (and eventually Safari) */
    image-rendering: pixelated;
    /* Chrome */
    image-rendering: optimize-contrast;
    /* CSS3 Proposed                  */
    -ms-interpolation-mode: nearest-neighbor;
    /* IE8+                           */
}

.as-color-cell.as-null .as-color-cell-value {
    background-color: transparent !important;
    background-size: contain;
    background-position: center;
    }

.as-color-cell-value {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
}

.as-swatches-table {
    display: table;
    table-layout: fixed;
}

.as-swatches-table-row {
    display: table-row;
}


.as-swatches-table-cell.as-color-cell {
    position: relative;
    display: table-cell;
    background-size: 1.5em;

}