#targetsContainer { max-width: 860px; width: 35em; padding: 0.2em .5em; border-radius: 0.6em; font-size: 85%; box-shadow: 0px 0px 13px 3px rgba(0, 0, 0, 0.25) } #targetsContainer > div { width: 100%; } #targetSelection h1 { margin: 0.3em; color: inherit; text-align: center; } #targetSelection #targets { margin: .3em auto; /* For the checkbox that will appear */ padding: 0; } #targetSelection #targets > div { margin-bottom: .4em; background: rgba(0, 0, 0, 0.2); padding: .6em 1em; border-radius: .3em; } #targetSelection #targets > div p { margin: 0; opacity: .75 } #targetSelection .main { display: flex; justify-content: space-between; align-items: middle; } #targetSelection label { display: block; cursor: pointer; } #targetSelection label i { font-size: 170%; font-width: 600; color: #4b4b66; margin-left: -2em; } #targetSelection .optionTitle { font-size: 130%; margin-left: 1em; font-weight: 600; } #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 { color: #4b4b66; margin-bottom: 1em; } #targetSelection .targetInputOrValue { font-size: 120%; text-align: right; } #targetSelection .editable { border-bottom: 1px dashed #ffffff91} #targetSelection .attractClick, #targetSelection input[type='numeric'] { width: 5em !important; display: inline-block; height: 1.5em; text-align: right; font-weight: 600; padding: 0; padding: 0em 0.5em; background: white; border-radius: 0.2em; border: none; box-shadow: 0px 1px 9px 0px rgba(0, 0, 0, 0.45); color: #333; font-size: inherit } #targetSelection .unit { margin-left: .6em; font-size: 120%; vertical-align: middle; } .input-error { padding: 0 .6em; margin-right: .6em; font-size: 0.8em; font-style: italic; color: #c0392b; background: yellow; font-weight: 600; } /* Autre idée pour styler les checkboxes https://codepen.io/KenanYusuf/pen/PZKEKd */