/*
    https://codepen.io/jasesmith/pen/EeVmWZ
*/

label.fancy-checkbox {
    display: inline-flex;
    align-items: baseline;
    cursor: pointer;
}

    label.fancy-checkbox input[type="checkbox"],
    label.fancy-checkbox input[type="radio"] {
        position: relative;
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        font-size: 120%;
        width: 1em;
        margin: 0;
        color: inherit;
        outline: none;
        font-family: "FontAwesome";
        transition: 300ms ease-out;
        margin-right: 5px;
        cursor: pointer;
    }

        label.fancy-checkbox input[type="checkbox"]::after,
        label.fancy-checkbox input[type="radio"]::after {
            content: "\f1db";
            display: inline-block;
            text-align: center;
            width: 1em;
            vertical-align: middle;
        }

        label.fancy-checkbox input[type="checkbox"]:checked::after,
        label.fancy-checkbox input[type="radio"]:checked::after {
            font-weight: 900;
        }

        label.fancy-checkbox input[type="checkbox"]:active,
        label.fancy-checkbox input[type="radio"]:active {
            -webkit-transform: scale(0.6);
            transform: scale(0.6);
        }

        label.fancy-checkbox input[type="checkbox"] + span,
        label.fancy-checkbox input[type="radio"] + span {
            margin-left: 0.35em;
        }

        label.fancy-checkbox input[type="checkbox"]:checked::after {
            content: "\f058";
        }

        label.fancy-checkbox input[type="radio"]:checked::after {
            content: "\f192";
        }

    label.fancy-checkbox.square input[type="checkbox"]:after {
        content: "\f096";
    }

    label.fancy-checkbox.square input[type="checkbox"]:checked::after {
        content: "\f14a";
    }

    label.fancy-checkbox.sk-checkbox input[type="checkbox"]:after {
        content: "\f058";
        color: #e4e4e4;
    }

    label.fancy-checkbox.sk-checkbox input[type="checkbox"]:checked::after {
        content: "\f058";
        color: #36C189;
    }

    label.fancy-checkbox.sk-checkbox input[type="radio"]:checked::after {
        content: "\f058";
        color: #36C189;
    }

    label.fancy-checkbox.sk-checkbox input[type="radio"]:checked::after {
        content: "\f058";
        color: #36C189;
    }