.chkBuffer {
    -webkit-appearance: none;
    -moz-appearance: none;
    -ms-appearance: none;
    -o-appearance: none;
    appearance: none;
    position: relative;
    right: 0;
    bottom: 0;
    left: 0;
    height: 20px;
    width: 20px;
    vertical-align: -0.8rem;
    transition: all .15s ease-out 0s;
    color: #fff;
    cursor: pointer;
    display: inline-block;
    margin: .4rem;
    outline: none;
    border-radius: 10%;
}

/* Checkbox */
.chkBuffer:before, .chkBuffer:after {
    position: absolute;
    content: "";
    background: #fff;
    transition: all .2s ease-in-out;
}

.chkBuffer:before {
    left: 2px;
    top: 6px;
    width: 0;
    height: 2px;
    transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
}

.chkBuffer:after {
    right: 9px;
    bottom: 3px;
    width: 2px;
    height: 0;
    transform: rotate(40deg);
    -webkit-transform: rotate(40deg);
    -moz-transform: rotate(40deg);
    -ms-transform: rotate(40deg);
    -o-transform: rotate(40deg);
    transition-delay: .2s;
}

.chkBuffer:checked:before {
    left: 1px;
    top: 10px;
    width: 6px;
    height: 2px;
}

.chkBuffer:checked:after {
    right: 5px;
    bottom: 1px;
    width: 2px;
    height: 14px;
}

.chkBuffer:indeterminate:before, .chkBuffer:indeterminate:after {
    width: 7px;
    height: 2px;
    transform: rotate(0);
    -webkit-transform: rotate(0);
    -moz-transform: rotate(0);
    -ms-transform: rotate(0);
    -o-transform: rotate(0);
}

.chkBuffer:indeterminate:before {
    left: 1px;
    top: 7px;
}

.chkBuffer:indeterminate:after {
    right: 1px;
    bottom: 7px;
}

/* Colors */
.chkBuffer {
    border: 2px solid #dadada;
}

    .chkBuffer:checked, .chkBuffer:indeterminate, input[type=radio]:checked:before {
        background: #888888;
    }

    /* Complement colors */
    .chkBuffer.blue, input[type=radio].blue {
        border: 2px solid #2196f3;
    }

        .chkBuffer.blue:checked, .chkBuffer.blue:indeterminate, input[type=radio].blue:checked:before {
            background: #2196f3;
        }

    .chkBuffer.red, input[type=radio].red {
        border: 2px solid #f44336;
    }

        .chkBuffer.red:checked, .chkBuffer.red:indeterminate, input[type=radio].red:checked:before {
            background: #f44336;
        }

    .chkBuffer.orange, input[type=radio].orange {
        border: 2px solid #ffc107;
    }

        .chkBuffer.orange:checked, .chkBuffer.orange:indeterminate, input[type=radio].orange:checked:before {
            background: #ffc107;
        }

    .chkBuffer.brown, input[type=radio].brown {
        border: 2px solid #4f4644;
    }

        .chkBuffer.brown:checked, .chkBuffer.brown:indeterminate, input[type=radio].brown:checked:before {
            background: #4f4644;
        }