.form-row {
    margin-bottom: 20px;
    text-align: left;
}

.form-row .form-label {
    display: block;
    margin-bottom: 8px;
    color: #333333;
}

.form-row input {
    width: 100%;
    padding: 10px;
    border: 1px solid #cccccc;
    border-radius: 4px;
}

.form-row > input[type=radio] ~ label:before
{
    width:10px;
    height:10px;
    border: 1px solid black;
    content: '';
}


.form-row > input[type=radio],
.form-row > input[type=checkbox]
{
    opacity:0;
    height:0;
    width:0;
    margin:0;
    padding:0;
    position:absolute;
}

.form-row > input[type=radio] ~ label:before ,
.form-row > input[type=checkbox] ~ label:before
{
    background: #fff;
    border: 2px solid #99BFE6;
    margin-top: -3px;
    margin-right: 15px;
    display: inline-block;
    vertical-align: middle;
    content: '';
    width: 20px;
    height: 20px;

}

.form-row > input[type=radio] ~ label:before
{
    border-radius: 50%;
}

.form-row > input[type=checkbox] ~ label:before
{
    border-radius: 25%;
}

.form-row > input[type=radio]:checked ~ label::before,
.form-row > input[type=checkbox]:checked ~ label::before
{
    background-color:#216bba;
    background-repeat: no-repeat;
    background-size: contain;
}


.form-row > input[type=radio]:checked ~ label:before
{
    background-image : url('data:svg+xml;');
}

.form-row > input[type=checkbox]:checked ~ label:before
{
    background-image : url('checkbox.svg');
}

.form-row > input[type=checkbox]:focus ~ label:before,
.form-row > input[type=radio]:focus ~ label:before
{
    border-color:blue;
    border-width : 2px;

}

.form-row > input[type=checkbox]:disabled ~ label:before
{
    background-color:lightgrey;
}