body {
    background: #ccc;
}

span.plus {
    background: #333;
    color: #eee;
    font-size: 1rem;
    font-weight: bold;
    border-radius: 0.75rem;
    padding: 0 0.25rem;
}

#data > .row {
    border: 1px dotted lightgrey;
    padding: 0.5rem;
    margin: 1rem;
    border-radius: 0.5rem;
}

#data label,
#data .off,
#affects span.data {
    padding: 0 0.25rem;
    margin: 0 0 0.125rem 0;
    border-radius: 0.25rem;
    min-width: 1.5rem;
    display: block;
    height: 1.5rem;
    background-color: #ccc;
    text-align: center;
    color: black;
    white-space: nowrap;
    transition: all 0.25s ease-in-out;
}

#data label:hover,
#data .active + label {
    background: black !important;
    color: white !important;
    transition: all 0.25s ease-in-out;
}

form#data label {
    width: 100%;
    text-align: center
}

form#data input[type="checkbox"]:checked + label {
    font-weight: bold
}

form#data .call_emotion + label {
    background: none
}

#data span.active,
#affects span.active {
    background: black;
    border-radius: 0;
    color: yellow;
}

#data .selected + label {
    border-radius: 0;
    color: black;
    font-variant-caps: small-caps;
    font-weight: bold;
    background: repeating-linear-gradient(135deg, #eee 0px, #eee 5px, #fff 0px, #fff 7px) !important;
}

div#affects {
    border-top: 1px dashed black;
    margin: 1rem 0;
}

#affects span.data {
    display: inline-block;
    margin: 0 0.125rem 0 0;
}

#data span.data.off {
    background: #eee;
    color: #333;
}

#data .affect,
#affects .affect {
    margin-bottom: 1rem;
}

#data .affect p,
#affects .affect p {
    background: #eee;
    padding: 0.125rem;
    border-radius: 0.125rem;
}

#affects .affect {
    margin: 1rem;
    padding: 0.5rem;
    border-radius: 0.5rem;
}

#affects .affect > * {
    margin: 0;
    padding: 0;
}

#affects .affect .cause {
    padding-right: 0.25rem;
}

#affects .affect .consequence {
    padding-left: 0.25rem;
}

#affects .affect div p {
    margin: 0 0 0.25rem;
}

div#listeFamilles dl {
    display: flex;
    justify-content: space-between;
    width: 100%;
    flex-wrap: wrap;
}

div#listeFamilles dt h4 {
    text-transform: uppercase;
    padding-left: 0.5rem;
}

div#listeFamilles dt ul {
    font-weight: normal;
    list-style-type: square;
    line-height: 1;
    padding: 0;
    margin: 0 0 1rem 2rem;
}

div#listeFamilles dd {
    display: none;
}

div#listeFamilles dt,
div#listeFamilles dd {
    background: #eee;
}

div#listeFamilles dd ul {
    list-style-type: none;
    padding: 0.5rem;
}

div#listeFamilles dd ul li {
    padding: 0;
    line-height: 1;
}

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

form input[type="radio"] + label,
form input[type="checkbox"] + label {
    display: inline-block;
    padding: 4px 12px;
    background-color: #eee;
    border-color: #333;
    border-radius: 0.5rem;
}

form input[type="radio"]:checked + label,
form input[type="checkbox"]:checked + label {
    background-image: none;
    background-color: yellow;
}

div.groupe {
    padding-top: 1rem;
    margin-bottom: 1rem;
}