﻿.checkbox-list {
    display: flex;
    flex-flow: wrap;
    justify-content: space-between;
}

.wrapper__checkbox {
    border: 0.2rem solid #808080;
    display: flex;
    justify-content: space-between;
    margin: 0.5rem;
    padding: 1rem;
    width: 45%;
}

label input[type="radio"], label input[type="checkbox"] {
    display:none;        
}

label input[type="radio"] ~ i.fa.fa-circle-o {
    display: inline;
}

label input[type="radio"] ~ i.fa.fa-dot-circle-o {
    display: none;
}

label input[type="radio"]:checked ~ i.fa.fa-circle-o {
    display: none;
}

label input[type="radio"]:checked ~ i.fa.fa-dot-circle-o {
    display: inline;
}

label input[type="radio"] ~ span {
    font-weight:normal;
}

label input[type="radio"]:checked ~ span {
    font-weight:bold;
}
    
label input[type="checkbox"] ~ i.fa.fa-square-o {
    display: inline;
}
    
label input[type="checkbox"] ~ i.fa.fa-check-square-o {
    display: none;
}
    
label input[type="checkbox"]:checked ~ i.fa.fa-square-o {
    display: none;
}

label input[type="checkbox"]:checked ~ i.fa.fa-check-square-o {
    display: inline;
}

label input[type="checkbox"] ~ span {
    font-weight:normal;
}

label input[type="checkbox"]:checked ~ span {
    font-weight:bold;
}

label.wrapper__radio, .wrapper__checkbox label {
    font-weight: normal;
    margin-bottom: 0;
}

.wrapper__checkbox i.fa.fa-square-o,
.wrapper__checkbox i.fa.fa-check-square-o,
.wrapper__radio i.fa.fa-circle-o,
.wrapper__radio i.fa.fa-dot-circle-o {
    font-size: 1.5rem;    
}

.wrapper__checkbox i.fa.fa-square-o,
.wrapper__checkbox i.fa.fa-check-square-o {
    padding: 0 0.25rem;
}

.wrapper__radio i.fa.fa-circle-o,
.wrapper__radio i.fa.fa-dot-circle-o {
    padding: 1rem;
}

.wrapper__radio {
    display: flex;
    margin: 1rem 0;
}