#targetSelection h1 { margin: 0.6em; color: inherit; text-align: center; font-size: 180%; } #targetSelection .targets { list-style: none; padding: 0; margin: -1rem 0; } #targetSelection .targets > li:first-child { border-top: none; } #targetSelection .targets > li.small-target * { font-size: 1rem; font-weight: normal; } #targetSelection .targets > li.small-target { border-top: none; } #targetSelection .targets > li.small-target .targetInput { border-width: 1px; padding-top: 0; padding-bottom: 0; } #targetSelection .targets > li { border-top: 1px solid rgba(255, 255, 255, 0.5); padding: 0.6rem 1rem; margin-left: -1rem; margin-right: -1rem; } .light #targetSelection .targets > li:not(:first-child) { border-top: 1px solid rgba(0, 0, 0, 0.1); } #targetSelection .targets > li .main { display: flex; align-items: center; justify-content: space-between; } #targetSelection .targets > li p { margin: 0.2em 0 0; font-style: italic; opacity: 0.8; line-height: 1.2rem; } #targetSelection li .header { display: flex; align-items: center; } #targetSelection .targets > li.small-target .header p { display: none; } #targetSelection .optionTitle { font-size: 115%; font-weight: 500; } #targetSelection .optionTitle a { color: inherit; text-decoration: none; } #targetSelection .optionTitle a:hover, #targetSelection .aidesGlimpse a:hover { text-decoration: underline; } @media (hover: none) { #targetSelection .optionTitle { border: 1px solid rgba(255, 255, 255, 0.3); border-radius: 0.25em; padding: 0.05em 0.4em; font-size: 125%; font-weight: 400; } } #targetSelection #labelNew { background: #e2011c; /* Couleur de la marianne */ border-radius: 0.3em; padding: 0 0.3em; } #targetSelection .targetInputOrValue { font-size: 125%; margin-left: 0.6rem; text-align: right; display: flex; flex-direction: column; align-items: flex-end; } #targetSelection .aidesGlimpse { font-size: 70%; display: flex; } #targetSelection .aidesGlimpse a { display: inline-block; text-decoration: none; } #targetSelection .targetInputOrValue > :not(.targetInput) { margin: 0 0.6rem; } #targetSelection input { margin: 2.7px 0; } #targetSelection .targetInput { width: 5.5em; max-width: 7.5em; text-align: right; background: rgba(255, 255, 255, 0.2); padding: 0; padding: 0.2rem 0.6rem; border-radius: 0.3rem; border: 2px solid; font-size: inherit; } .light #targetSelection .targetInput { color: var(--darkColor); border-color: var(--darkColor); background: white !important; } .light #targetSelection .optionTitle { color: var(--darkestColor); } #targetSelection .editableTarget { max-width: 7.5em; display: inline-block; text-align: right; padding: 0 2px; font-size: inherit; } #targetSelection .targetInputBottomBorder { margin: 0; padding: 0 2px; height: 0; overflow: hidden; } #targetSelection .editableTarget + .targetInputBottomBorder { border-bottom: 1px dashed #ffffff91; } #targetSelection .unit { margin-left: 0.4em; font-size: 110%; vertical-align: middle; } .input-error { padding: 0 0.6em; margin-right: 0.6em; font-size: 90%; font-style: italic; color: #c0392b; background: yellow; font-weight: 500; } /* Autre idée pour styler les checkboxes https://codepen.io/KenanYusuf/pen/PZKEKd */