.checkbox-custom, .radio-custom, .radio-custom2 {
    opacity: 0;
    position: absolute;   
}

.checkbox-custom, .checkbox-custom-label, .radio-custom, .radio-custom-label, .radio-custom2, .radio-custom-label2 {
    display: inline-block;
    vertical-align: middle;
    margin: 2px;
    cursor: pointer;
}

.checkbox-custom-label, .radio-custom-label, .radio-custom-label2 {
    position: relative;
}

.checkbox-custom + .checkbox-custom-label:before, .radio-custom + .radio-custom-label:before, .radio-custom2 + .radio-custom-label2:before {
    content: '';
    background: #fff;
    border: 4px solid #ddd;
    display: inline-block;
    vertical-align: middle;
    width: 50px;
    height: 50px;
    padding: 5px;
    margin-right: 10px;
    text-align: center;
}

.checkbox-custom:checked + .checkbox-custom-label:before {
    font-Size: 20px;
    background: rebeccapurple;
    color: #fff;
}

.radio-custom + .radio-custom-label:before, .radio-custom2 + .radio-custom-label2:before{
    border-radius: 50%;
}

.radio-custom:checked + .radio-custom-label:before {
    content: "\f00c";
    font-family: 'FontAwesome';
  	font-size: 25px;
    color: #bbb;
}

.radio-custom2:checked + .radio-custom-label2:before {
	content: "\f00d";
    font-family: 'FontAwesome';
	font-size: 25px;
	color: #bbb;
}

.checkbox-custom:focus + .checkbox-custom-label, .radio-custom:focus + .radio-custom-label, .radio-custom2:focus + .radio-custom-label2 {
  outline: 1px solid #ddd; /* focus style */
}

/* Radio for YES NO */

.radio-customYes, .radio-customNo, .radio-Yes-Green, .radio-No-Red {
    opacity: 0;
    position: absolute;   
}

.radio-customYes, .radio-custom-labelYes, .radio-customNo, .radio-custom-labelNo, .radio-Yes-Green, .radio-label-Yes-Green, .radio-No-Red, .radio-label-No-Red {
    display: inline-block;
    vertical-align: middle;
    margin: 2px;
    cursor: pointer;
}

.radio-custom-labelYes, .radio-custom-labelNo, .radio-label-Yes-Green, .radio-label-No-Red {
    position: relative;
}

.radio-customYes + .radio-custom-labelYes:before {
    content: 'Yes';
	font-family: 'Helvetica';
	font-size: 20px;
	color: #ddd;
	padding-top: 7px;
    background: #fff;
    border: 4px solid #ddd;
    display: inline-block;
    vertical-align: middle;
    width: 50px;
    height: 50px;
    /*padding: 5px;*/
    margin-right: 10px;
    text-align: center;
}

.radio-customNo + .radio-custom-labelNo:before {
    content: 'No';
	font-family: 'Helvetica';
	font-size: 20px;
	color: #ddd;
	padding-top: 7px;
    background: #fff;
    border: 4px solid #ddd;
    display: inline-block;
    vertical-align: middle;
    width: 50px;
    height: 50px;
    /*padding: 5px;*/
    margin-right: 10px;
    text-align: center;
}

.radio-Yes-Green + .radio-label-Yes-Green:before {
    content: 'Yes';
	font-family: 'Helvetica';
	font-size: 20px;
	color: #ddd;
	padding-top: 7px;
    background: #fff;
    border: 4px solid #ddd;
    display: inline-block;
    vertical-align: middle;
    width: 50px;
    height: 50px;
    /*padding: 5px;*/
    margin-right: 10px;
    text-align: center;
}

.radio-No-Red + .radio-label-No-Red:before {
    content: 'No';
	font-family: 'Helvetica';
	font-size: 20px;
	color: #ddd;
	padding-top: 7px;
    background: #fff;
    border: 4px solid #ddd;
    display: inline-block;
    vertical-align: middle;
    width: 50px;
    height: 50px;
    /*padding: 5px;*/
    margin-right: 10px;
    text-align: center;
}

.radio-customYes + .radio-custom-labelYes:before, .radio-customNo + .radio-custom-labelNo:before{
    border-radius: 50%;
}

.radio-Yes-Green + .radio-label-Yes-Green:before, .radio-No-Red + .radio-label-No-Red:before{
    border-radius: 50%;
}

.radio-customYes:checked + .radio-custom-labelYes:before {
    content: "Yes";
    font-family: 'Helvetica';
  	font-size: 20px;
    color: #F00;
    padding-top: 7px;
	background: #F99;
    border: 4px solid #F00;
}

.radio-customNo:checked + .radio-custom-labelNo:before {
	content: "No";
    font-family: 'Helvetica';
	font-size: 20px;
	color: #5B0;
	padding-top: 7px;
	background: #BE9;
    border: 4px solid #5B0;
}

.radio-Yes-Green:checked + .radio-label-Yes-Green:before {
    content: "Yes";
    font-family: 'Helvetica';
  	font-size: 20px;
    color: #5B0;
    padding-top: 7px;
	background: #BE9;
    border: 4px solid #5B0;
}

.radio-No-Red:checked + .radio-label-No-Red:before {
	content: "No";
    font-family: 'Helvetica';
	font-size: 20px;
	color: #F00;
	padding-top: 7px;
	background: #F99;
    border: 4px solid #F00;
}

.radio-customYes:focus + .radio-custom-labelYes, .radio-customNo:focus + .radio-custom-labelNo {
  outline: 1px solid #ddd; /* focus style */
}

.radio-Yes-Green:focus + .radio-label-Yes-Green, .radio-No-Red:focus + .radio-label-No-Red {
  outline: 1px solid #ddd; /* focus style */
}