#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 #targets > div { margin-bottom: 2em; } #targetSelection .main { display: flex; justify-content: space-between; align-items: middle; } #targetSelection label { display: block; cursor: pointer; } #targetSelection label i { font-size: 170%; } #targetSelection .optionTitle { font-size: 120%; margin-left: 1em; } #targetSelection p { margin: 0; font-weight: 400; font-size: 90%; } #targetSelection input[type='checkbox'] { 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 #action { text-align: center; margin: 1em auto; } #targetSelection #action p { font-size: 80%; border-bottom: #4b4b66 solid 2px; color: #4b4b66; } #targetSelection input[type='text'] { border: 1px solid #3c4963; } #targetSelection .targetValue { display: inline-block; border: 1px solid #ccc; } #targetSelection .targetValue, #targetSelection input[type='text'] { width: 6em; display: inline-block; height: 1.4em; padding: 0; font-size: 100%; padding: 0em 0.3em; } /* Autre idée pour styler les checkboxes https://codepen.io/KenanYusuf/pen/PZKEKd */