.color-blue {
  background: #007bff;
}
.color-cyan {
  background: #17a2b8;
}
.color-gray {
  background: #6c757d;
}
.color-gray-dark {
  background: #343a40;
}
.color-indigo {
  background: #6610f2;
}
.color-yellow {
  background: #ffc107;
}
.color-orange {
  background: #fd7e14;
}
.color-pink {
  background: #e83e8c;
}
.color-red {
  background: #dc3545;
}
.color-teal {
  background: #20c997;
}
.color-green {
  background: #28a745;
}
.color-purple {
  background: #6f42c1;
}

.level-text {
   vertical-align: center!important;
}

.colors-table {
    width: 100%;
    padding-left: 2px;
}

.colors-table tr {
    border:0px solid #d9d9d9;
}

.option-color {
    float: left;
    vertical-align: center!important;
    border-radius: 5px;
    margin-bottom: 25px;
    height: 30px;
    width:15%;
}

.option-index-color {
    float: left;
    vertical-align: center!important;
    border-radius: 5px;
    /* margin-bottom: 25px; */
    height: 37px;
    width:20%;
}

.option-color label {
    visibility: hidden;
    text-align: center;
    color:white;
    vertical-align:middle;
}

.option-color.active {
    border:3px solid #3362b1;
}

.colors-table td {
    margin: 10px 1px;
}