#CustomYourDashboard {

ul {
    list-style-type: none;
}

.badge-color-choice {
    // transition: all .14s;
    border: 2px solid $white;
    border-radius: 50%;
    cursor: pointer;
    display: inline-block;
    height: 35px;
    width: 35px;
    margin-right: 5px;
    position: relative;

    &[value='dark'] {
        @include linear-gradient($black-states, $cplus_light);
    }

    &[value='grey'] {
        @include linear-gradient($light, $light);
        border: 2px dashed $gray-300;
    }

    &[value='primary'] {
        @include linear-gradient($primary-states, $primary);
    }

    &[value='blue'] {
        @include linear-gradient($info-states, $info);
    }

    &[value='green'] {
        @include linear-gradient($success-states, $success);
    }

    &[value='orange'] {
        @include linear-gradient($warning-states, $warning);
    }

    &[value='red'] {
        @include linear-gradient($danger-states, $danger);
    }

    &:hover {
        border: 1px solid lighten($black-states, 50%);
    }

    &.active {
        border: 2px solid $black-states !important;
    }

}

}