.chart-col option {
    background-color: #fff;
    color: #000;
}

.chart-col-back option {
    background-color: #fff;
    color: #000;
}

.clarama-cell-content .form-label {
    margin-bottom: 0;
}

.data-cell-icon-hover:hover {
    cursor: pointer;
    transition: all 300ms;
}

.data-cell-icon-hover.add:hover {
    color: rgb(120, 208, 135);
}

.data-cell-data-cell-icon-hover.remove:hover {
    color: rgb(199, 57, 57);
}

.color-picker-container {
    position: relative;
}

.color-picker-container select {
    background-color: rgb(255, 99, 132);
    /* width: 120px; */
}

.color-picker-container .chart-col-picker {
    position: absolute;
    bottom: 0;
    right: 0;
    height: 100%;
    width: 14px;
    padding: 0;
    opacity: 0;
}

.color-picker-container .chart-col-picker-back {
    position: absolute;
    bottom: 0;
    right: 0;
    height: 100%;
    width: 14px;
    padding: 0;
    opacity: 0;
}

.grid9-col-1 { /* Series Formats */
    flex: 0 0 auto;
    width: 10.8887%; /* this is derived from (100-2)/9 because the last col (bin icon) i set width: 2% */
}

.grid10-col-1 { /* Series Groups */
    flex: 0 0 auto;
    width: 9.6%; /* this is derived from (100-2-2)/10 because the last col (bin icon) i set width: 2% and draggable div set width: 2% */
}

.grid11-col-1 { /* Series Annotations */
    flex: 0 0 auto;
    width: 9.6%; /* this is derived from (100-2-4)/10 because the last col (bin icon) i set width: 2% and dotted div set width: 4% */
}

.grid13-col-1 { /* Series Annotations */
    flex: 0 0 auto;
    width: 7.8333%; /* this is derived from (100-2-4)/12 because the last col (bin icon) i set width: 2% and dotted div set width: 4% */
}

.grid14-col-1 { /* Series Annotations */
    flex: 0 0 auto;
    width: 7.230%; /* this is derived from (100-2-4 = 94)/13 because the last col (bin icon) i set width: 2% and dotted div set width: 4% */
}