.codex-special__circle {
    display: inline-block;
    width: 7px;
    height: 7px;
    border: 7px solid;
    vertical-align: middle;
    box-sizing: content-box;
    border-radius: 50%;
    cursor: pointer;
    float: right;
}

.codex-special__circle:not(:first-of-type) {
    margin-right: 5px;
}

.codex-special__circle:hover {
    width: 11px;
    height: 11px;
    border-width: 5px;
}

.codex-special__circle--enabled {
    border-radius: 10%;
}

.codex-special__circle--disabled {
    opacity: 0.7;
}

.codex-special__circle--disabled:hover {
    opacity: 1;
}

.codex-special__circle--blue {
    background-color: #36465b;
    border-color: #c5dfff !important;
}

.codex-special__circle--green {
    background-color: #44e963;
    border-color: #7c766a !important;
}

.codex-special__circle--white {
    background-color: #fff;
    border-color: #2b2a28 !important;
}