/*! * DSFR v1.11.2 | SPDX-License-Identifier: MIT | License-Filename: LICENSE.md | restricted use (see terms and conditions) */ @charset "UTF-8"; /* ¯¯¯¯¯¯¯¯¯ *\ FORM \* ˍˍˍˍˍˍˍˍˍ */ .fr-label { display: block; font-size: 1rem; line-height: 1.5rem; color: var(--text-label-grey); } .fr-label + .fr-input, .fr-label + .fr-input-wrap, .fr-label + .fr-select { margin-top: 0.5rem; } .fr-hint-text { display: block; font-size: 0.75rem; line-height: 1.25rem; --text-spacing: 0 0 1rem; } .fr-hint-text + .fr-hint-text { margin-top: 0.25rem; } .fr-fieldset { position: relative; margin: 0 -0.75rem 1rem; padding: 0 0.25rem; display: flex; flex-direction: row; align-items: flex-end; flex-wrap: wrap; border: 0; } .fr-fieldset__legend { padding-bottom: 1rem; padding-left: 0.75rem; padding-right: 0.75rem; margin-left: -0.25rem; margin-right: -0.25rem; font-size: 1rem; line-height: 1.5rem; font-weight: 700; width: 100%; color: var(--text-label-grey); } .fr-fieldset__legend--regular { font-weight: 400; } .fr-fieldset__legend .fr-hint-text { margin-top: 0.5rem; font-weight: 400; } .fr-fieldset--valid, .fr-fieldset--error, .fr-fieldset--info { background-repeat: no-repeat; background-position: 0 -2.25rem; background-size: 2px calc(100% + 1.25rem); } .fr-fieldset--valid .fr-fieldset__legend, .fr-fieldset--error .fr-fieldset__legend, .fr-fieldset--info .fr-fieldset__legend { background-repeat: no-repeat; background-position: 0 0; background-size: 2px 100%; } .fr-fieldset__element { flex: 1 1 100%; max-width: 100%; padding-left: 0.5rem; padding-right: 0.5rem; margin-bottom: 1rem; } .fr-fieldset__element--inline { flex: 0 0 auto; } .fr-fieldset__element--inline-grow, .fr-fieldset__element--inline\@md.fr-fieldset__element--inline-grow { flex-grow: 1; } .fr-fieldset__element--year { flex: 0 0 8rem; } .fr-fieldset__element--year:not(.fr-fieldset__element--inline) { margin-right: calc(100% - 8rem); } .fr-fieldset__element--postal { flex: 0 0 16rem; } .fr-fieldset__element--postal:not(.fr-fieldset__element--inline) { margin-right: calc(100% - 16rem); } .fr-fieldset__element--number { flex: 0 0 6rem; } .fr-fieldset__element--number:not(.fr-fieldset__element--inline) { margin-right: calc(100% - 6rem); } .fr-fieldset__legend > h1:last-child::after, .fr-fieldset__legend > h2:last-child::after, .fr-fieldset__legend > h3:last-child::after, .fr-fieldset__legend > h4:last-child::after, .fr-fieldset__legend > h5:last-child::after, .fr-fieldset__legend > h6:last-child::after, .fr-fieldset__legend > p:last-child::after, .fr-fieldset__legend > .fr-fieldset:last-child::after, .fr-fieldset__element > h1:last-child::after, .fr-fieldset__element > h2:last-child::after, .fr-fieldset__element > h3:last-child::after, .fr-fieldset__element > h4:last-child::after, .fr-fieldset__element > h5:last-child::after, .fr-fieldset__element > h6:last-child::after, .fr-fieldset__element > p:last-child::after, .fr-fieldset__element > .fr-fieldset:last-child::after { content: ""; display: block; margin-bottom: -1rem; } .fr-fieldset > .fr-messages-group { flex: 1 1 100%; padding-left: 0.5rem; padding-right: 0.5rem; } .fr-fieldset > .fr-messages-group > .fr-message:last-child { margin-bottom: 1rem; } .fr-message { --comma: ", "; --content: var(--comma); display: flex; flex-direction: row; align-items: flex-start; font-size: 0.75rem; line-height: 1.25rem; margin: 0 0 0.25rem 0; } .fr-message::after { content: var(--content); position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; /* added line */ border: 0; display: block; } .fr-message:last-child { --comma: ". "; margin-bottom: 0; } .fr-message--error::before, .fr-message--valid::before, .fr-message--info::before { flex: 0 0 auto; vertical-align: calc((0.75em - var(--icon-size)) * 0.5); background-color: currentColor; width: var(--icon-size); height: var(--icon-size); -webkit-mask-size: 100% 100%; mask-size: 100% 100%; --icon-size: 1rem; content: ""; display: inline-block; margin-right: 0.25rem; margin-top: 0.125rem; } .fr-message--error::before { -webkit-mask-image: url("../../icons/system/fr--error-fill.svg"); mask-image: url("../../icons/system/fr--error-fill.svg"); } .fr-message--valid::before { -webkit-mask-image: url("../../icons/system/fr--success-fill.svg"); mask-image: url("../../icons/system/fr--success-fill.svg"); } .fr-message--info::before { -webkit-mask-image: url("../../icons/system/fr--info-fill.svg"); mask-image: url("../../icons/system/fr--info-fill.svg"); } .fr-select-group--valid label, .fr-input-group--valid label, .fr-range-group--valid label, .fr-upload-group--valid label { color: var(--text-default-success); } .fr-select-group--error label, .fr-input-group--error label, .fr-range-group--error label, .fr-upload-group--error label { color: var(--text-default-error); } .fr-select-group--info label, .fr-input-group--info label, .fr-range-group--info label, .fr-upload-group--info label { color: var(--text-default-info); } .fr-select-group--disabled label, .fr-select-group--disabled .fr-hint-text, .fr-input-group--disabled label, .fr-input-group--disabled .fr-hint-text, .fr-range-group--disabled label, .fr-range-group--disabled .fr-hint-text, .fr-upload-group--disabled label, .fr-upload-group--disabled .fr-hint-text { color: var(--text-disabled-grey); } .fr-label--error { color: var(--text-default-error); } .fr-label--success { color: var(--text-default-success); } .fr-label--info { color: var(--text-default-info); } .fr-label--disabled, .fr-label--disabled .fr-hint-text { color: var(--text-disabled-grey); } .fr-hint-text, .fr-message { color: var(--text-mention-grey); } .fr-message--error { color: var(--text-default-error); } .fr-message--valid { color: var(--text-default-success); } .fr-message--info { color: var(--text-default-info); } .fr-fieldset:disabled .fr-label, .fr-fieldset:disabled .fr-hint-text, .fr-fieldset:disabled .fr-fieldset__legend { color: var(--text-disabled-grey); } .fr-fieldset input:disabled + label, .fr-fieldset input:disabled + label .fr-hint-text, .fr-fieldset input:disabled + label + .fr-hint-text { color: var(--text-disabled-grey); } .fr-fieldset--error, .fr-fieldset--error .fr-fieldset__legend { background-image: linear-gradient(0deg, var(--border-plain-error), var(--border-plain-error)); } .fr-fieldset--error .fr-fieldset__legend, .fr-fieldset--error .fr-label { color: var(--text-default-error); } .fr-fieldset--valid, .fr-fieldset--valid .fr-fieldset__legend { background-image: linear-gradient(0deg, var(--border-plain-success), var(--border-plain-success)); } .fr-fieldset--valid .fr-fieldset__legend, .fr-fieldset--valid .fr-label { color: var(--text-default-success); } .fr-fieldset--info, .fr-fieldset--info .fr-fieldset__legend { background-image: linear-gradient(0deg, var(--border-plain-info), var(--border-plain-info)); } .fr-fieldset--info .fr-fieldset__legend, .fr-fieldset--info .fr-label { color: var(--text-default-info); } .fr-select-group:not(:last-child), .fr-input-group:not(:last-child) { margin-bottom: 1.5rem; } .fr-select-group .fr-label .fr-hint-text, .fr-input-group .fr-label .fr-hint-text { margin-top: 0.25rem; } .fr-fieldset--inline .fr-fieldset__content { display: flex; align-items: baseline; justify-content: flex-start; flex-wrap: wrap; margin: -0.75rem 0.5rem 0 0.5rem; } .fr-fieldset--inline .fr-checkbox-group { display: inline-flex; margin-bottom: 0; } .fr-fieldset--inline .fr-checkbox-group:first-child { margin-top: 0; } .fr-fieldset--inline .fr-checkbox-group:not(:last-child) { margin-right: 1.25rem; } .fr-fieldset--inline .fr-checkbox-group:last-child { margin-bottom: 0; } .fr-fieldset--inline .fr-radio-group { display: inline-flex; } .fr-fieldset--inline .fr-radio-group:not(:last-child) { margin-right: 1.75rem; } .fr-fieldset--inline .fr-radio-group:first-child { margin-top: 0; } .fr-fieldset--inline .fr-radio-group:last-child { margin-bottom: 0; } .fr-fieldset__content { position: relative; margin: 0 0.5rem; width: 100%; } .fr-fieldset__content .fr-radio-group:first-child, .fr-fieldset__content .fr-checkbox-group:first-child { margin-top: -0.75rem; } .fr-fieldset__content .fr-radio-group label, .fr-fieldset__content .fr-checkbox-group label { padding: 0.75rem 0; } .fr-fieldset__content .fr-radio-group:not(.fr-radio-rich) input[type=radio] + label::before, .fr-fieldset__content .fr-checkbox-group input[type=checkbox] + label::before { top: 0.75rem; } .fr-fieldset__content + .fr-error-text, .fr-fieldset__content + .fr-valid-text, .fr-fieldset__content + .fr-info-text { margin-top: 0; margin-left: 0.5rem; margin-bottom: 1rem; } .fr-error-text, .fr-valid-text, .fr-info-text { display: flex; flex-direction: row; align-items: center; font-size: 0.75rem; line-height: 1.25rem; margin-top: 1rem; margin-bottom: 0; } .fr-error-text::before, .fr-valid-text::before, .fr-info-text::before { flex: 0 0 auto; vertical-align: calc((0.75em - var(--icon-size)) * 0.5); background-color: currentColor; width: var(--icon-size); height: var(--icon-size); -webkit-mask-size: 100% 100%; mask-size: 100% 100%; --icon-size: 1rem; content: ""; display: inline-block; margin-right: 0.25rem; } .fr-error-text + .fr-error-text, .fr-error-text + .fr-valid-text, .fr-error-text + .fr-info-text, .fr-valid-text + .fr-error-text, .fr-valid-text + .fr-valid-text, .fr-valid-text + .fr-info-text, .fr-info-text + .fr-error-text, .fr-info-text + .fr-valid-text, .fr-info-text + .fr-info-text { margin-top: 0.25rem; } .fr-error-text::before { -webkit-mask-image: url("../../icons/system/fr--error-fill.svg"); mask-image: url("../../icons/system/fr--error-fill.svg"); } .fr-valid-text::before { -webkit-mask-image: url("../../icons/system/fr--success-fill.svg"); mask-image: url("../../icons/system/fr--success-fill.svg"); } .fr-info-text::before { -webkit-mask-image: url("../../icons/system/fr--info-fill.svg"); mask-image: url("../../icons/system/fr--info-fill.svg"); } .fr-error-text { color: var(--text-default-error); } .fr-valid-text { color: var(--text-default-success); } .fr-info-text { color: var(--text-default-info); } .fr-fieldset--valid .fr-fieldset__content::before { box-shadow: inset 2px 0 0 0 var(--border-plain-success); } .fr-fieldset--error .fr-fieldset__content::before { box-shadow: inset 2px 0 0 0 var(--border-plain-error); } .fr-fieldset--info .fr-fieldset__content::before { box-shadow: inset 2px 0 0 0 var(--border-plain-info); } @media (min-width: 36em) { /*! media sm */ } @media (min-width: 48em) { /*! media md */ .fr-fieldset__element--inline\@md { flex: 0 0 auto; } } @media (min-width: 62em) { /*! media lg */ } @media (min-width: 78em) { /*! media xl */ }