#targetSelection { height: 35em; display: flex; justify-content: space-around; align-items: center; flex-wrap: wrap; font-size: 100%; max-width: 860px; } #targetSelection > div { width: 100%; } #targetSelection h2 { margin: 2em; } #targetSelection #targets { width: 30em; margin: 0 auto; } #targetSelection label { display: block; margin-bottom: 1em; display: flex; vertical-align: middle; cursor: pointer; } #targetSelection div { margin-left: 1em; } #targetSelection .optionTitle { font-size: 120%; } #targetSelection label p { color: #555; margin: 0; } #targetSelection input:checked + label .optionTitle { font-weight: 600; color: #2975d1; } #targetSelection input { position: absolute; z-index: -1; opacity: 0; } #targetSelection input:disabled + label, #targetSelection input:disabled + label p, #targetSelection input:disabled + label > i { color: #aaa !important; } #targetSelection input + label > i.fa { max-width: 0.75em; } #targetSelection input + label > i.fa.fa-square-o { color: #555; display: inline; } #targetSelection input + label > i.fa.fa-check-square-o { display: none; } #targetSelection input:checked + label > i.fa.fa-square-o { display: none; } #targetSelection input:checked + label > i.fa.fa-check-square-o { color: #2975d1; display: inline; } #targetSelection label:hover > i.fa { color: #2975d1; } #targetSelection #action { text-align: center; margin: 1em auto; } #targetSelection #action p { font-size: 80%; color: #4a89dc; } /* TODO styler les checkboxes https://codepen.io/KenanYusuf/pen/PZKEKd */