﻿.radio,
.checkboxv2 {
   
    position: relative;
    display: block;
}

    .radio input,
    .checkboxv2 input {
        opacity: 0;
        position: absolute;
        z-index: 1;
        cursor: pointer;
        margin-left: -20px;
    }

        .radio input:checked + label::before,
        .checkboxv2 input:checked + label::before {
            border-color: #9575cd;
        }

        .radio input:checked + label::after,
        .checkboxv2 input:checked + label::after {
            content: '';
            display: inline-block;
            position: absolute;
            width: 13px;
            height: 13px;
            left: 2px;
            top: 4px;
            border: 1px solid #9575cd;
            border-radius: 50%;
            background-color: #6cb161;
        }

    .radio label,
    .checkboxv2 label {
        display: inline-block;
        position: relative;
        padding-left: 5px;
    }

        .radio label::before,
        .checkboxv2 label::before {
            content: '';
            display: inline-block;
            position: absolute;
            width: 17px;
            height: 17px;
            left: 0;
            top: 1px;
          
            border: 1px solid #ccc;
            border-radius: 50%;
            background-color: #fff;
        }

        

    .radio.disabled label,
    .checkboxv2.disabled label {
        color: #ccc;
    }

        .radio.disabled label::before,
        .checkboxv2.disabled label::before {
            opacity: 0.54;
            border-color: #ccc;
        }

    .checkboxv2 input:checked + label::before {
        border-color: #9575cd;
        background-color: #6cb161;
    }

    .checkboxv2 input:checked + label::after {
        text-align:center;
        vertical-align:central;
        content: "\f00c";
        font-family: FontAwesome;
        font-size: 10px;
        color: #fff;
        top: 0;
        left: 2px;
        border-color: transparent;
        background-color: transparent;
    }


    .checkboxv2 label::before {
    border-radius: 2px;
}



.radio,
.checkboxv3 {
    position: relative;
    display: block;
}

    .radio input,
    .checkboxv3 input {
        opacity: 0;
        position: absolute;
        z-index: 1;
        cursor: pointer;
        margin-left: -20px;
    }

        .radio input:checked + label::before,
        .checkboxv3 input:checked + label::before {
            border-color: #9575cd;
        }

        .radio input:checked + label::after,
        .checkboxv3 input:checked + label::after {
            content: '';
            display: inline-block;
            position: absolute;
            width: 13px;
            height: 13px;
            left: 2px;
            top: 4px;
            border: 1px solid #9575cd;
            border-radius: 50%;
            background-color: #6cb161;
        }

    .radio label,
    .checkboxv3 label {
        display: inline-block;
        position: relative;
        padding-left:25px;
        font-weight:normal;
    }

        .radio label::before,
        .checkboxv3 label::before {
            content: '';
            display: inline-block;
            position: absolute;
            width: 17px;
            height: 17px;
            left: 0;
            top: 1px;
            border: 1px solid #ccc;
            border-radius: 50%;
            background-color: #fff;
        }



    .radio.disabled label,
    .checkboxv3.disabled label {
        color: #ccc;
    }

        .radio.disabled label::before,
        .checkboxv3.disabled label::before {
            opacity: 0.54;
            border-color: #ccc;
        }

    .checkboxv3 input:checked + label::before {
        border-color: #9575cd;
        background-color: #6cb161;
    }

    .checkboxv3 input:checked + label::after {
        text-align: center;
        vertical-align: central;
        content: "\f00c";
        font-family: FontAwesome;
        font-size: 10px;
        color: #fff;
        top: 0;
        left: 2px;
        border-color: transparent;
        background-color: transparent;
    }


    .checkboxv3 label::before {
        border-radius: 2px;
    }