input[type="radio"] {
    display: none;
}

    input[type="radio"] + label {
        display: block;
        position: relative;
        padding-left: 35px;
        margin-bottom: 20px;
        font: 14px/20px 'Open Sans', Arial, sans-serif;
        color: #252422;
        cursor: pointer;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
    }

        input[type="radio"] + label:last-child {
            margin-bottom: 0;
        }

        input[type="radio"] + label:before {
            content: '';
            display: block;
            width: 20px;
            height: 20px;
            border: 2px solid #252422;
            border-radius: 4px;
            position: absolute;
            left: 0;
            top: 0;
            opacity: 1;
            -webkit-transition: all .12s, border-color .08s;
            transition: all .12s, border-color .08s;
        }

    input[type="radio"]:checked + label:before {
        width: 10px;
        top: -5px;
        left: 5px;
        border-radius: 0;
        opacity: 1;
        border-top-color: transparent;
        border-left-color: transparent;
        -webkit-transform: rotate(45deg);
        transform: rotate(45deg);
    }

    input[type="radio"]:disabled + label {
        cursor: not-allowed;
        opacity: 0.7;
    }

    input[type="radio"]:checked + label.radio-inline:before {
        top: -12px;
        left: 12px;
    }

    input[type="radio"] + label.radio-inline:before {
        top: -10px;
        left: 6px;
    }

    /*COLORS*/
    input[type="radio"]:checked + label.success:before {
        border: 2px solid #6BD098;
        border-top-width: 0px;
        border-left-width: 0px;
    }

    input[type="radio"] + label.success:before {
        border: 2px solid #6BD098;
    }

    input[type="radio"]:checked + label.danger:before {
        border: 2px solid #ef8157;
        border-top-width: 0px;
        border-left-width: 0px;
    }

    input[type="radio"] + label.danger:before {
        border: 2px solid #ef8157;
    }

    input[type="radio"]:checked + label.dark:before {
        border: 2px solid #343a40;
        border-top-width: 0px;
        border-left-width: 0px;
    }

    input[type="radio"] + label.dark:before {
        border: 2px solid #343a40;
    }

    input[type="radio"]:checked + label.default:before {
        border: 2px solid #324380;
        border-top-width: 0px;
        border-left-width: 0px;
    }

    input[type="radio"] + label.default:before {
        border: 2px solid #324380;
    }

    input[type="radio"]:checked + label.info:before {
        border: 2px solid #51bcda;
        border-top-width: 0px;
        border-left-width: 0px;
    }

    input[type="radio"] + label.info:before {
        border: 2px solid #51bcda;
    }

    input[type="radio"]:checked + label.light:before {
        border: 2px solid #f8f9fa;
        border-top-width: 0px;
        border-left-width: 0px;
    }

    input[type="radio"] + label.light:before {
        border: 2px solid #f8f9fa;
    }

    input[type="radio"]:checked + label.primary:before {
        border: 2px solid #51cbce;
        border-top-width: 0px;
        border-left-width: 0px;
    }

    input[type="radio"] + label.primary:before {
        border: 2px solid #51cbce;
    }

    input[type="radio"]:checked + label.secondary:before {
        border: 2px solid #6c757d;
        border-top-width: 0px;
        border-left-width: 0px;
    }

    input[type="radio"] + label.secondary:before {
        border: 2px solid #6c757d;
    }

    input[type="radio"]:checked + label.warning:before {
        border: 2px solid #fbc658;
        border-top-width: 0px;
        border-left-width: 0px;
    }

    input[type="radio"] + label.warning:before {
        border: 2px solid #fbc658;
    }

    input[type="radio"]:checked + label.white:before {
        border: 2px solid #ffffff;
        border-top-width: 0px;
        border-left-width: 0px;
    }

    input[type="radio"] + label.white:before {
        border: 2px solid #ffffff;
    }

    input[type="radio"]:checked + label.radio-checked-white:before {
        border: 2px solid #FFFFFF;
        border-top-width: 0px;
        border-left-width: 0px;
    }