#targetSelection { max-width: 860px; padding: 0.3em 2em; border-radius: 0.6em; } #targetSelection > div { width: 100%; } #targetSelection h1 { margin: 0.3em; color: inherit; } #targetSelection #targets { margin: 1em auto; /* For the checkbox that will appear */ padding: 0 2em; } #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%; margin-left: -1.6em; } #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 + 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 .targetValue { display: inline-block; border: 1px solid #ccc; } #targetSelection .targetValue, #targetSelection input[type='text'] { width: 4.5em !important; display: inline-block; height: 1.4em; padding: 0; font-size: 120%; padding: 0em 0.3em; background: white; border-radius: 0.1em; border: none; color: #4b4b66; text-align: right; } #targetSelection input[type='text'] { border: 3px solid #4b4b66; } #targetSelection .fa-calculator { margin: 0 0.4em; font-size: 90%; opacity: 0.85; } /* Autre idée pour styler les checkboxes https://codepen.io/KenanYusuf/pen/PZKEKd */