@green: #1FF01F;
@red: #a52a2a;
// @blue: #3498db // cyan?
@blue: #3050f8;
@white: #f5f5f5; // whitesmoke
@purple: #9355b5; // 6lack - that far cover
@yellow: #ffa100;

@black: black;
@gray: #222;
@gray-box: #222;
@gray-exists: #444;
@gray-hint: #666;
@gray-hover: #888;
@gray-focus: whitesmoke;

svg {
    stroke: none;
    margin: 0 auto;
    display: block;

    &.red {
        stroke: @red;
    }

    &.green {
        stroke: @green;
    }

    &.blue {
        stroke: @blue;
    }
}

.green {
    color: @green;
    stroke: @green;
}

.red {
    color: @red;
    stroke: @red;
}

.red-fill {
    fill: @red;
}

.blue {
    color: @blue;
    stroke: @blue;
    stroke-linecap: round;
}

.gray {
    color: #333;
    stroke: #333;
}

.white {
    color: @white;
    stroke: @white;
}