/*
CSS Spécifique aux inputs
*/

/*
Fieldset
*/
.stdform {
    --ej-input-width: 40.5rem;
    --ej-input-font-weight: normal;
    --ej-input-font-size: 1.4rem;
    --ej-input-line-height: 1.9rem;
    --ej-input-total-height: 2.1rem;
    --ej-input-border-bottom-width: 0.1rem;
    --ej-input-border-bottom-focus-width: 0.2rem;
    
    --ej-input-checkbox-height: 1.4rem;
    --ej-input-checkbox-margin-right: 1rem;
    
    --ej-select-option-font-size: 1.4rem;
    --ej-select-option-line-height: 2.2rem;
    --ej-select-search-font-size: 1.4rem;
    --ej-select-search-line-height: 2.1rem;
    
    --ej-label-font-weight: 300;
    --ej-label-font-size: 1.2rem;
    --ej-label-line-height: 1.6rem;
    
    --ej-error-font-weight: normal;
    --ej-error-font-size: 1.2rem;
    --ej-error-line-height: 1.5rem;
    --ej-nb-ligne-erreur: 1;
    
    --ej-checkbox-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M384 32C419.3 32 448 60.65 448 96V416C448 451.3 419.3 480 384 480H64C28.65 480 0 451.3 0 416V96C0 60.65 28.65 32 64 32H384zM384 64H64C46.33 64 32 78.33 32 96V416C32 433.7 46.33 448 64 448H384C401.7 448 416 433.7 416 416V96C416 78.33 401.7 64 384 64z' /%3E%3C/svg%3E");
    --ej-checkbox-checked-svg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3e%3cpath d='M64 32C28.7 32 0 60.7 0 96V416c0 35.3 28.7 64 64 64H384c35.3 0 64-28.7 64-64V96c0-35.3-28.7-64-64-64H64zM337 209L209 337c-9.4 9.4-24.6 9.4-33.9 0l-64-64c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0l47 47L303 175c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9z' /%3e%3c/svg%3e");
    --ej-checkbox-inderminate-svg: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M64 32C28.7 32 0 60.7 0 96V416c0 35.3 28.7 64 64 64H384c35.3 0 64-28.7 64-64V96c0-35.3-28.7-64-64-64H64zm88 200H296c13.3 0 24 10.7 24 24s-10.7 24-24 24H152c-13.3 0-24-10.7-24-24s10.7-24 24-24z"/></svg>');
    
    --ej-radiobutton-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M256 32a224 224 0 1 1 0 448 224 224 0 1 1 0-448zm0 480A256 256 0 1 0 256 0a256 256 0 1 0 0 512z' /%3E%3C/svg%3E");
    --ej-radiobutton-checked-svg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3e%3cpath d='M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zm0-352a96 96 0 1 1 0 192 96 96 0 1 1 0-192z' /%3e%3c/svg%3e");
    
    --ej-invalid-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 128 512'%3E%3Cpath d='M96 64c0-17.7-14.3-32-32-32S32 46.3 32 64V320c0 17.7 14.3 32 32 32s32-14.3 32-32V64zM64 480c22.1 0 40-17.9 40-40s-17.9-40-40-40s-40 17.9-40 40s17.9 40 40 40z' fill='%23D90000' /%3E%3C/svg%3E");
    --ej-invalid-icon-width: 0.4rem;
    --ej-invalid-icon-margin: 0.3rem;
    --ej-valid-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M440.1 103C450.3 112.4 450.3 127.6 440.1 136.1L176.1 400.1C167.6 410.3 152.4 410.3 143 400.1L7.029 264.1C-2.343 255.6-2.343 240.4 7.029 231C16.4 221.7 31.6 221.7 40.97 231L160 350.1L407 103C416.4 93.66 431.6 93.66 440.1 103V103z' fill='%2373B01D'/%3E%3C/svg%3E");
    --ej-valid-icon-width: 1.4rem;
    --ej-valid-icon-margin: 0.3rem;
    
    --ej-select-arrow-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M233.4 406.6c12.5 12.5 32.8 12.5 45.3 0l192-192c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L256 338.7 86.6 169.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l192 192z' /%3E%3C/svg%3E");
    --ej-select-arrow-icon-width: 1rem;
    --ej-select-arrow-icon-margin: 0.3rem;
    
    --ej-number-date-widget-width: 3rem;
}

.stdform .form-select {
    --bs-form-select-bg-img: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M233.4 406.6c12.5 12.5 32.8 12.5 45.3 0l192-192c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L256 338.7 86.6 169.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l192 192z' /%3E%3C/svg%3E");
    background-position: right center;
    background-size: var(--ej-select-arrow-icon-width);
}

.form-select.is-invalid:not([multiple]):not([size]), .form-select.is-invalid:not([multiple])[size="1"], .was-validated .form-select:invalid:not([multiple]):not([size]), .was-validated .form-select:invalid:not([multiple])[size="1"] {
    --bs-form-select-bg-icon: var(--ej-invalid-icon);
    background-position: right center, center right calc(var(--ej-select-arrow-icon-width) + 2 * var(--ej-select-arrow-icon-margin));
    background-size: var(--ej-select-arrow-icon-width),var(--ej-invalid-icon-width);
}

.form-select.is-valid:not([multiple]):not([size]), .form-select.is-valid:not([multiple])[size="1"], .was-validated .form-select:valid:not([multiple]):not([size]), .was-validated .form-select:valid:not([multiple])[size="1"] {
    --bs-form-select-bg-icon: var(--ej-valid-icon);
    background-position: right center, center right calc(var(--ej-select-arrow-icon-width) + 2 * var(--ej-select-arrow-icon-margin));
    background-size: var(--ej-select-arrow-icon-width),var(--ej-valid-icon-width);
}

.stdform.inscription {
    --ej-input-font-size: 1.6rem;
    --ej-input-line-height: 2.1rem;
    --ej-input-total-height: 2.3rem;
    
    --ej-input-checkbox-height: 1.6rem;
    
    --ej-label-font-size: 1.4rem;
    --ej-label-line-height: 1.9rem;
    --ej-nb-ligne-erreur: 2;
    
    --ej-select-search-font-size: 1.6rem;
    --ej-select-search-line-height: 2.1rem;
}
.stdform.inscription fieldset {
    --bs-gutter-x: 4rem;
}
.stdform fieldset .row,
.stdform .fieldset .row {
    --bs-gutter-x: 1rem;
    --bs-gutter-y: 0.2rem;
    max-width: calc(var(--bs-gutter-x) + var(--ej-input-width));
}

.stdform fieldset.large .row {
    max-width: calc(100% + var(--bs-gutter-x));
}

.stdform legend {
    font: normal normal 500 1.6rem/2.4rem Roboto;
    color: #000000;
    margin-left: calc(var(--bs-gutter-x) * -0.5);
    margin-bottom: 2rem;
}

.stdform fieldset:not(:first-child) legend {
    margin-top: 3.5rem;
}
/*-------------------------
 * CSS pour anciens écrans     
 * .site-content est legacy
 *-------------------------*/
.site-content .stdform fieldset {
    max-width: 93rem;
    margin-left: 0;
}
.site-content .stdform fieldset legend {
    display: flex;
    align-items: center;
}
.site-content .stdform fieldset legend::after {
    content: "";
    display: flex;
    flex: 1 1;
    border-bottom: 0.1rem solid var(--bs-gray-400);
    margin-left: 1rem;
    margin-top: 0.3rem;
}

.site-content .stdform fieldset>.fieldset-container {
    background: #F6F7F8 0% 0% no-repeat padding-box;
    padding: 3rem 3rem 2rem 3rem;
}
/*
INPUT
*/

.stdform .col-field,
.stdform .col-text {
    position: relative;
}
.stdform .col-auto.col-field {
    /*flex-basis: calc(var(--bs-gutter-x) + var(--ej-input-width));*/
}
.stdform .col-text .form-value {
    display: block;
    margin-top: var(--ej-label-line-height);
    margin-bottom: calc(var(--ej-error-line-height) * var(--ej-nb-ligne-erreur));
    font-weight: var(--ej-input-font-weight);
    font-size: var(--ej-input-font-size);
    line-height: var(--ej-input-line-height);
}
.stdform .col-field label,
.stdform .col-text .form-label {
    top: 0;
    margin: 0;
    position: absolute;
    pointer-events: none;
    transition: 0.2s ease all;
    -moz-transition: 0.2s ease all;
    -webkit-transition: 0.2s ease all;
    font-weight: var(--ej-input-font-weight);
    font-size: var(--ej-input-font-size);
    line-height: var(--ej-input-line-height);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: calc(100% - var(--bs-gutter-x));
}

.stdform .col-textarea label {
    font-weight: var(--ej-input-font-weight);
    font-size: var(--ej-input-font-size);
    line-height: var(--ej-input-line-height);
    max-width: calc(100% - var(--bs-gutter-x));
    margin-bottom: 0;
}

.stdform .form-label .required {
    margin-left: 0.5rem;
}

.stdform .col-auto.col-field + .col-field:not(.col-auto)::before {
    clear: both;
}

/* @todo nécessaire ? */
.stdform .col-field label .small {
    color: var(--bs-gray-600);
    font-size: 80%;
    font-weight: 300;
}

/**
  * Translate down and scale the label up to cover the placeholder,
  * when following an input (with placeholder-shown support).
  * Also make sure the label is only on one row, at max 2/3rds of the
  * field—to make sure it scales properly and doesn't wrap.
  */
.stdform input:placeholder-shown + label,
.stdform input:placeholder-shown + .autocomplete-menu + label, /* Autocomplete in the middle...*/
.stdform select:not(.has_values) + label {
    cursor: text;
    transform-origin: left bottom;
    transform: translate(0, var(--ej-label-line-height));
}

.stdform input[type="number"]:not(:focus):placeholder-shown + label,
.stdform input[type="number"]:not(:focus):placeholder-shown + .autocomplete-menu + label,/* Autocomplete in the middle...*/
.stdform input[type="date"]:not(:focus):placeholder-shown + label {
    max-width: calc(100% - var(--ej-number-date-widget-width));
}
/*
.stdform select.has_values + label {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 40.8rem;
    transform: translate(0, 0);
    cursor: pointer;
    color: #707070;
    font: normal normal 300 1.4rem/2.4rem Roboto;
}*/
/**
  * By default, the placeholder should be transparent. Also, it should 
  * inherit the transition.
  */
::-webkit-input-placeholder {
    opacity: 0;
    transition: inherit;
}

/**
  * Add a transition to the label and input.
  * I'm not even sure that touch-action: manipulation works on
  * inputs, but hey, it's new and cool and could remove the 
  * pesky delay.
  */
.stdform label,
.stdform input {
   /* transition: all 0.2s;*/
    touch-action: manipulation;
}

.stdform :not(.a11y-container)>input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not(.ck),
.stdform select:not(.ck) {
    margin-top: var(--ej-label-line-height);
    margin-bottom: calc(var(--ej-error-line-height) * var(--ej-nb-ligne-erreur));
    font-weight: var(--ej-input-font-weight);
    font-size: var(--ej-input-font-size);
    line-height: var(--ej-input-line-height);
    color: var(--bs-body-color);
    background-color: transparent;
    height: calc(var(--ej-input-total-height) + var(--ej-input-border-bottom-width));
    padding: 0 0 calc(var(--ej-input-total-height) - var(--ej-input-line-height)) 0;
    display: block;
    width: 100%;
    border-top: none;
    border-left: none;
    border-right: none;
    border-bottom-width: var(--ej-input-border-bottom-width);
    border-radius: 0;
    transition: 0.2s ease background;
    -moz-transition: 0.2s ease background;
    -webkit-transition: 0.2s ease background;
}

.stdform select:not(.ck) {
    padding-right: calc(var(--ej-select-arrow-icon-width) + 2 * var(--ej-valid-icon-margin));
}

.stdform :not(.a11y-container)>input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not(.ck) {
    background-position: right center;
    background-size: 0;
}
/*
.stdform select {
    background-color: transparent;
    -webkit-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 512'%3e%3cpath d='M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z' /%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-size: 1rem;
    background-position: right center;
    cursor: pointer;
}*/
/*
.stdform select::after {
    content: "";
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M233.4 406.6c12.5 12.5 32.8 12.5 45.3 0l192-192c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L256 338.7 86.6 169.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l192 192z' /%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M233.4 406.6c12.5 12.5 32.8 12.5 45.3 0l192-192c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L256 338.7 86.6 169.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l192 192z' /%3E%3C/svg%3E");
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    background-color: var(--bs-body-color);
    width: 1rem;
    height: 1rem;
    display: block;
}*/
.stdform select::-ms-expand {
    display: none;
}/*
_:-ms-fullscreen, :root .stdform select {
    background-position: 19.5rem center;
    background-size: contain;
}*/

@media (max-device-width: 583.98px) {
    .stdform input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not(.ck) {
        width:100%
    }
}

@media (max-device-width: 767.98px) and (min-device-width: 576px){
    .stdform input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not(.ck) {
        width:30.5rem;
    }
}

.stdform :not(.a11y-container)>input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not(.ck):focus,
.stdform select:not(.ck):focus {
    outline: none;
    border-bottom-width: var(--ej-input-border-bottom-focus-width);
    padding-bottom: calc(var(--ej-input-total-height) - var(--ej-input-line-height) - var(--ej-input-border-bottom-focus-width) + var(--ej-input-border-bottom-width));
    box-shadow: none;
    border-color: var(--bs-border-color);
}

.stdform .col-field input:not([type="checkbox"]):not([type="radio"]) ~ .col-text {
    position: absolute;
    left: 100%;
    top: 0;
}
/**
  * Show the placeholder when the input is focused.
  */
.stdform input:not(.ck):focus::-webkit-input-placeholder,
.stdform .select-a11y input::-webkit-input-placeholder {
    opacity: 1;
}
/**
  * When the element is focused, remove the label transform.
  * Also, do this when the placeholder is _not_ shown, i.e. when 
  * there's something in the input at all.
  */
.stdform input:not(:placeholder-shown) + label:not(.ck):not(.btn),
.stdform input:focus + label:not(.ck):not(.btn),
.stdform input:not(:placeholder-shown) + .autocomplete-menu + label:not(.ck):not(.btn),
.stdform input:focus + .autocomplete-menu + label:not(.ck):not(.btn),
.stdform .col-text .form-label,
.stdform select:focus + label:not(.ck),
.stdform select.has_values + label:not(.ck) {
    transform: translate(0, 0);
    cursor: pointer;
    color: var(--bs-gray-600);
    font-weight: var(--ej-label-font-weight);
    font-size: var(--ej-label-font-size);
    line-height: var(--ej-label-line-height);
}

.stdform input:not(.ck):not(.btn-check):focus,
.stdform select:not(.ck):focus {
    outline: none;
}

.stdform input:not(.ck):not(.btn-check):disabled,
.stdform input:not(.ck):disabled + label:not(.ck):not(.btn),
.stdform input:not(.ck):disabled + .form-label:not(.ck):not(.btn) {
    opacity: 0.5;
}

.stdform .form-select.is-invalid:focus, .was-validated .form-select:invalid:focus,
.stdform .form-select.is-valid:focus, .was-validated .form-select:valid:focus {
    box-shadow: none;
}
/*
  En dessous des inputs
*/

.stdform .input-verify {
    margin-top: -5%;
    font-size: 1.2rem;
    color: #212121;
}

.stdform .badge-input-verify {
    background-color: #c6c6c6;
    color: #000000;
    font-size: 1rem;
}

.stdform .badge-valid {
    background-color: #c0d99d;
}

/*
* CheckBox & Radio
*/

.form-check:not(.form-switch) {
    min-height: var(--ej-input-line-height);
    line-height: var(--ej-input-line-height);
    padding-left: calc(var(--ej-input-checkbox-height) + var(--ej-input-checkbox-margin-right));
    margin-bottom: 1rem;
    margin-right: 2rem;
}

.stdform .form-check:not(.form-switch) .form-check-input {
    margin-top: calc((var(--ej-input-line-height) - var(--ej-input-checkbox-height)) / 2);
    --bs-border-width: 0;
    --bs-form-check-bg-image: none;
    -webkit-appearance: none;
    appearance: none;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    height: var(--ej-input-checkbox-height);
    width: var(--ej-input-checkbox-height);
    background-color: var(--bs-body-color);
    margin-left: calc(-1 * (var(--ej-input-checkbox-height) + var(--ej-input-checkbox-margin-right)));
}

.form-check-input {
    transform: translateY(-0.15rem);
}

.form-check-input:checked {
    background-color: var(--ej-form-active-bg);
    border-color: var(--ej-form-active-bg);
}

.stdform .form-check-input[type="checkbox"] {
    -webkit-mask-image: var(--ej-checkbox-svg);
    mask-image: var(--ej-checkbox-svg);
}
.stdform .form-check-input[type="checkbox"]:checked {
    --bs-form-check-bg-image: none;
    -webkit-mask-image: var(--ej-checkbox-checked-svg);
    mask-image: var(--ej-checkbox-checked-svg);
    background-color: var(--ej-form-active-bg);
}
.stdform .form-check-input[type="checkbox"]:indeterminate {
    --bs-form-check-bg-image: none;
    -webkit-mask-image: var(--ej-checkbox-inderminate-svg);
    mask-image: var(--ej-checkbox-inderminate-svg);
    background-color: var(--ej-form-active-bg);
}

.stdform .form-check-input[type="radio"] {
    -webkit-mask-image: var(--ej-radiobutton-svg);
    mask-image: var(--ej-radiobutton-svg);
}
.stdform .form-check-input[type="radio"]:checked {
    --bs-form-check-bg-image: none;
    -webkit-mask-image: var(--ej-radiobutton-checked-svg);
    mask-image: var(--ej-radiobutton-checked-svg);
    background-color: var(--ej-form-active-bg);
}

.stdform input.form-check-input:disabled + label.form-check-label,
.stdform input.form-check-input:disabled + span.form-check-label {
    opacity: 0.5;
}

.stdform input.form-check-input + label.form-check-label,
.stdform input.form-check-input + span.form-check-label {
    font-weight: var(--ej-input-font-weight);
    font-size: var(--ej-input-font-size);
    line-height: var(--ej-input-line-height);
    color: var(--bs-body-color);
}

.stdform input.form-check-input + label.form-check-label.small,
.stdform input.form-check-input + span.form-check-label.small {
    font: normal normal normal 1.2rem/1.8rem Roboto;
}

.stdform input.form-check-input ~ span.invalid-feedback {
    position: revert;
}

_:-ms-fullscreen, :root .stdform input[type="checkbox"],
_:-ms-fullscreen, :root .stdform input[type="radio"] {
    background-repeat: round;
}

.stdform .form-check-input[type="checkbox"]::-ms-check, 
.stdform .form-check-input[type="radio"]::-ms-check {
    display: none; /* unstyle IE checkboxes */
}



/*
Buttons
*/

/*
.stdform button {
    font: normal normal normal 1.6rem/2.4rem Roboto;
    color: #FFFFFF;
    background: #0267C1 0% 0% no-repeat padding-box;
    border-radius: .5rem;
    padding: .7rem 1.6rem;
    margin: 2rem 0 2rem; 
}*/

/* 
* Select
*/
/*
.custom-select {
    width: 40rem;    
    font-size: 1.6rem;
    margin-top: 2rem;
    color: #000000;
    border: 0px solid #ced4da;
    border-bottom: 1px solid #000000;
}
*/
/*
* Select A11Y
*/

form.stdform .select-a11y-wrapper {
    margin-top: calc(var(--ej-label-line-height) - var(--ej-input-border-bottom-focus-width));
}

form.stdform .select-a11y-wrapper,
form.stdform .select-a11y-wrapper-keyword {
    margin-bottom: calc(var(--ej-error-line-height) * var(--ej-nb-ligne-erreur));
}

form.stdform .select-a11y {
    --bs-btn-margin-top: 0;
    --bs-btn-margin-bottom: 0;
}

form.stdform .select-a11y.select-a11y-keyword {
    display: flex;
    flex-direction: column;
    --ej-nb-ligne-erreur: 0;
}

form.stdform .select-a11y .btn {
    --bs-btn-border-radius: 0;
    --bs-btn-padding-y: 0.2rem;
    --bs-btn-padding-x: 0;
    --bs-btn-font-weight: var(--ej-input-font-weight);
    --bs-btn-font-size: var(--ej-input-font-size);
    --bs-btn-line-height: var(--ej-input-line-height);
    --bs-btn-border-width: 0;
}

form.stdform .select-a11y .btn-select-a11y {
    background-color: transparent;
    border-bottom: var(--ej-input-border-bottom-width) solid #000000;
    height: calc(var(--ej-input-total-height) + var(--ej-input-total-height) - var(--ej-input-line-height));
    padding: 0 2rem calc(var(--ej-input-total-height) - var(--ej-input-line-height) + var(--ej-input-border-bottom-focus-width)) 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

form.stdform .select-a11y .btn-select-a11y[aria-expanded="true"],
form.stdform .select-a11y .btn-select-a11y:focus {
    border-bottom: var(--ej-input-border-bottom-focus-width) solid #000000;
    padding-bottom: calc(var(--ej-input-total-height) - var(--ej-input-line-height) - var(--ej-input-border-bottom-focus-width) + var(--ej-input-border-bottom-width));
}

form.stdform .select-a11y .btn-select-a11y .icon-select {
    background-color: transparent;
    right: 0;
    top: calc(1em - var(--ej-input-line-height) / 2);
}
form.stdform .select-a11y .btn-select-a11y .icon-select::before {
    content: "";
    -webkit-mask-image: var(--ej-select-arrow-icon);
    mask-image: var(--ej-select-arrow-icon);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    background-color: var(--bs-body-color);
    width: 1rem;
    height: 1rem;
    display: block;
}

form.stdform .select-a11y .a11y-container {
    padding: 0;
    border: 0;
    background-color: var(--bs-gray-200);
    margin-top: 0.3rem;
    box-shadow: .5rem 1rem 2rem rgba(var(--bs-primary-rgb),.25);  
    border-radius: 0 0 .5rem .5rem;
    position: absolute;
}

form.stdform .select-a11y.select-a11y-keyword .a11y-container {
    margin-top: calc(var(--ej-input-total-height) + var(--ej-input-line-height));
}

form.stdform .select-a11y .a11y-container input[type="text"]{
    margin:  0;
    background-color: transparent;
    border: none;
    padding: 1rem;
    --ej-input-font-weight: 300;
    height:calc(2rem + var(--ej-select-search-line-height));
    font-size: var(--ej-select-search-font-size);
    line-height: var(--ej-select-search-line-height);
}
form.stdform .select-a11y .a11y-container input[type="text"]:focus {
    box-shadow: none;
}
form.stdform .select-a11y .a11y-suggestions {
    margin-top: 0;
    border: none;
    background-color: var(--bs-gray-100);
    padding: 1rem 0;
    max-height: 24rem; /* calc(10 * une ligne + padding)*/
    border-radius: 0 0 0.5rem .5rem;
}
form.stdform .select-a11y .a11y-suggestion,
form.stdform .select-a11y .a11y-suggestion-group div[role="presentation"],
form.stdform .select-a11y .a11y-suggestion-group[aria-selected="true"] div[role="presentation"]{
    color: var(--bs-body-color);
    font-weight: var(--ej-input-font-weight);
    font-size: var(--ej-select-option-font-size);
    line-height: var(--ej-select-option-line-height);
    margin: 0.1rem 0;
    padding: 0 1rem 0 2.7rem;
    background-color: transparent;
    position: relative;
}

form.stdform .select-a11y .a11y-suggestion-group div[role="presentation"] {
    --ej-input-font-weight: bold;
}

form.stdform .select-a11y .a11y-suggestion-group .a11y-suggestion {
    margin-left: 2rem !important;
}

form.stdform .select-a11y .a11y-suggestion:focus, 
form.stdform .select-a11y .a11y-suggestion:hover,
form.stdform .select-a11y .a11y-suggestion-group div[role="presentation"]:focus, 
form.stdform .select-a11y .a11y-suggestion-group div[role="presentation"]:hover  {
    color: white;
    background-color: var(--ej-form-active-bg);
}
form.stdform .select-a11y .a11y-suggestion::before,
form.stdform .select-a11y .a11y-suggestion-group div[role="presentation"]::before  {
    content:"";
    position: absolute;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    left: 0.8rem;
    -webkit-mask-image: var(--ej-checkbox-svg);
    mask-image: var(--ej-checkbox-svg);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    background-color: var(--bs-body-color);
    height: 1.3rem;
    width: 1.3rem;
}
form.stdform .select-a11y .a11y-suggestion:focus::before, 
form.stdform .select-a11y .a11y-suggestion:hover::before,
form.stdform .select-a11y .a11y-suggestion-group div[role="presentation"]:focus::before, 
form.stdform .select-a11y .a11y-suggestion-group div[role="presentation"]:hover::before  {
    background-color: white;
}
form.stdform .select-a11y .a11y-suggestion[aria-selected="true"]::before,
form.stdform .select-a11y .a11y-suggestion-group[aria-selected="true"] div[role="presentation"]::before {
    --bs-form-check-bg-image: none;
    -webkit-mask-image: var(--ej-checkbox-checked-svg);
    mask-image: var(--ej-checkbox-checked-svg);
    background-color: var(--ej-form-active-bg);
}
form.stdform .select-a11y .a11y-suggestion[aria-selected="true"]:focus::before, 
form.stdform .select-a11y .a11y-suggestion[aria-selected="true"]:hover::before,
form.stdform .select-a11y .a11y-suggestion-group[aria-selected="true"] div[role="presentation"]:focus::before, 
form.stdform .select-a11y .a11y-suggestion-group[aria-selected="true"] div[role="presentation"]:hover::before  {
    background-color: white;
}

form.stdform .select-a11y .list-selected {
    margin: 0;
    padding: calc(var(--ej-tag-small-list-padding) - (var(--ej-tag-small-margin) / 2));
    background-color: var(--bs-gray-100);
}
form.stdform  .select-a11y .list-selected li {
    margin: 0.25rem;
    display: inline-block;
    max-width: 100%;
}
.tag-item {
    display: inline-block;
    border-radius: calc(var(--ej-tag-small-height) / 2);
    padding: var(--ej-tag-small-padding-y) calc(var(--ej-tag-small-padding-x) + var(--ej-tag-small-height)) var(--ej-tag-small-padding-y) var(--ej-tag-small-padding-x);
    font-size: var(--ej-tag-small-font-size);
    line-height: var(--ej-tag-small-line-height);
    background-color: white;
    border: none;
    box-shadow: 0 .1rem .3rem #00123029;
    position: relative;
    margin: calc(var(--ej-tag-small-margin) / 2);
}

.tag-item:hover {
    box-shadow: .5rem 1rem 1.5rem #0012301A;
}

.tag-item span span:focus {
    font-weight: normal;
}

.list-selected .tag-item {
    text-overflow: ellipsis;
    overflow: clip;
    white-space: nowrap;
    max-width: 100%;
}

.tag-item-supp {
    background-color: var(--bs-gray-400);
    border: none;
    position: absolute;
    right: 0;
    top: 0;
    width: var(--ej-tag-small-height);
    height: var(--ej-tag-small-height);
    border-radius: 0 calc(var(--ej-tag-small-height) / 2) calc(var(--ej-tag-small-height) / 2) 0;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    margin:0;
}

.tag-item-supp .icon-delete {
    transition: 0.2s ease transform  ;
    height: 1.2rem;
    width: 1.2rem;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 384 512'%3E%3Cpath d='M342.6 150.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L192 210.7 86.6 105.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L146.7 256 41.4 361.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L192 301.3 297.4 406.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L237.3 256 342.6 150.6z' /%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M342.6 150.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L192 210.7 86.6 105.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L146.7 256 41.4 361.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L192 301.3 297.4 406.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L237.3 256 342.6 150.6z' /%3E%3C/svg%3E");
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    background-color: var(--bs-body-color);
}
.tag-item-supp .icon-delete::before {
    content:"";
}

.tag-item-supp:focus,
.tag-item-supp:hover {
    outline: none;
    background-color: var(--bs-danger);
}
.tag-item-supp:focus .icon-delete,
.tag-item-supp:hover .icon-delete {
    background-color: var(--bs-white);
}


/*
Erreurs
*/

.error {
    font-weight: var(--ej-error-font-weight);
    font-size: var(--ej-error-font-size);
    line-height: var(--ej-error-line-height);
}

/* Erreur directement au niveau du formulaire, pour les CSRF par exemple */
.stdform span.invalid-feedback {
    display: block;
    margin-top: 0;
    font-weight: var(--ej-error-font-weight);
    font-size: var(--ej-error-font-size);
    line-height: var(--ej-error-line-height);
}

.stdform input + label + span.invalid-feedback {
    position: absolute;
    padding-top: 0;
    top: calc(var(--ej-input-total-height) + var(--ej-label-line-height) + 0.1rem);
}

.stdform .select-a11y-wrapper + span.invalid-feedback, 
.stdform .col-textarea span.invalid-feedback {
    position: absolute;
    padding-top: 0;
}

.stdform .select-a11y-wrapper + span.invalid-feedback {
    bottom: 0;
}

.stdform.was-validated input:invalid,
.stdform input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]).is-invalid {
    background-image: var(--ej-invalid-icon);
    /*background-position: right calc(.5rem) center;*/
    background-size: var(--ej-invalid-icon-width) !important;
    padding-right: calc(var(--ej-invalid-icon-width) + 2 * var(--ej-invalid-icon-margin));
}

.stdform.was-validated input:invalid:placeholder-shown + label,
.stdform input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]).is-invalid:placeholder-shown + label,
.stdform.was-validated input:invalid:placeholder-shown + .autocomplete-menu + label,
.stdform input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]).is-invalid:placeholder-shown + .autocomplete-menu + label,
.stdform.was-validated select:invalid:not(.has_values) + label,
.stdform select.is-invalid:not(.has_values) + label {
    max-width: calc(100% - var(--ej-invalid-icon-width) - 2 * var(--ej-invalid-icon-margin) - 0.5rem);
}

.stdform.was-validated input[type="number"]:not(:focus):invalid:placeholder-shown + label,
.stdform input[type="number"].is-invalid:not(:focus):placeholder-shown + label,
.stdform.was-validated input[type="date"]:not(:focus):invalid:placeholder-shown + label,
.stdform input[type="date"].is-invalid:not(:focus):placeholder-shown + label {
    max-width: calc(100% - var(--ej-number-date-widget-width) - var(--ej-invalid-icon-width) - 2 * var(--ej-invalid-icon-margin) - 0.5rem) !important;
}

.stdform.was-validated input:valid,
.stdform input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]).is-valid {
    background-image: var(--ej-valid-icon);
   /* background-position: right calc(.5rem) center;*/
    background-size: var(--ej-valid-icon-width);
    padding-right: calc(var(--ej-valid-icon-width) + 2 * var(--ej-valid-icon-margin));
}

.stdform.was-validated input:valid:placeholder-shown + label,
.stdform input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]).is-valid:placeholder-shown + label,
.stdform.was-validated input:valid:placeholder-shown + .autocomplete-menu + label,
.stdform input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]).is-valid:placeholder-shown + .autocomplete-menu + label,
.stdform.was-validated select:valid:not(.has_values) + label,
.stdform select.is-valid:not(.has_values) + label {
    max-width: calc(100% - var(--ej-valid-icon-width) - 2 * var(--ej-valid-icon-margin) - 0.5rem);
}

.stdform.was-validated input[type="number"]:not(:focus):valid:placeholder-shown + label,
.stdform input[type="number"].is-valid:not(:focus):placeholder-shown + label,
.stdform.was-validated input[type="date"]:not(:focus):valid:placeholder-shown + label,
.stdform input[type="date"].is-valid:not(:focus):placeholder-shown + label {
    max-width: calc(100% - var(--ej-number-date-widget-width) - var(--ej-valid-icon-width) - 2 * var(--ej-valid-icon-margin) - 0.5rem) !important;
}

.stdform textarea {
    font-size: var(--ej-input-font-size);
    --bs-border-radius: none;
    min-height: 15rem;
    background-color: transparent;
}

.stdform textarea:focus {
  outline: none;
  border-width: var(--ej-input-border-bottom-focus-width);
  box-shadow: none;
  border-color: var(--bs-border-color);
  background-color: transparent;
}
.stdform .col-textarea {
    position: relative;
    padding-bottom: calc(var(--ej-error-line-height) * var(--ej-nb-ligne-erreur));
    margin-top: var(--ej-label-line-height);
}

/*
CKEditor
*/


.stdform .ck-editor {
    --ck-font-face: var(--bs-body-font-family);
    --ck-color-text: var(--bs-body-color);
    --ck-color-toolbar-border: var(--bs-gray-400);
    --ck-color-base-border: var(--bs-gray-400);
    --ck-color-focus-border: var(--bs-black);
    --ck-color-button-on-background: var(--ej-color-light);
    --ck-color-button-on-hover-background: var(--ej-color-medium);
    --ck-color-button-on-active-background: var(--ej-color-medium);
    --ck-color-button-on-color: var(--ej-color-dark);
    --ck-color-focus-outer-shadow: var(--ej-color-medium);
    --ck-color-focus-disabled-shadow: var(--ej-color-medium);
    
    --ck-font-size-base: 1.4rem;
    --ck-widget-type-around-button-size: 2rem;
    --ck-form-header-height: 3.8rem;
    
    --ck-focus-ring: 1px solid var(--ck-color-focus-border);
    --ck-focus-outer-shadow: var(--ck-focus-outer-shadow-geometry) var(--ck-color-focus-outer-shadow);
    --ck-focus-disabled-outer-shadow: var(--ck-focus-outer-shadow-geometry) var(--ck-color-focus-disabled-shadow);
}

.stdform .ck.ck-editor__editable_inline {
    min-height: 15rem;
}

.stdform .ck-editor + .invalid-feedback {
    position: absolute;
}

.stdform.was-validated textarea:invalid + .ck-editor,
.stdform textarea.is-invalid + .ck-editor {
    background-image: var(--ej-invalid-icon);
    background-position: right top calc(.1rem);
    background-size: var(--ej-invalid-icon-width);
    padding-right: calc(var(--ej-invalid-icon-width) + 2 * var(--ej-invalid-icon-margin));
    background-repeat: no-repeat;
}

.stdform.was-validated textarea:valid + .ck-editor,
.stdform textarea.is-valid + .ck-editor{
    background-image: var(--ej-valid-icon);
    background-position: right top calc(.1rem);
    background-size: var(--ej-valid-icon-width);
    padding-right: calc(var(--ej-valid-icon-width) + 2 * var(--ej-valid-icon-margin));
    background-repeat: no-repeat;
}

/**
.stdform.was-validated select:invalid,
.stdform select.is-invalid {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 192 512'%3e%3cpath d='M176 432c0 44.112-35.888 80-80 80s-80-35.888-80-80 35.888-80 80-80 80 35.888 80 80zM25.26 25.199l13.6 272C39.499 309.972 50.041 320 62.83 320h66.34c12.789 0 23.331-10.028 23.97-22.801l13.6-272C167.425 11.49 156.496 0 142.77 0H49.23C35.504 0 24.575 11.49 25.26 25.199z' fill='%23E3170A' /%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-size: 0.5rem;
    background-position: right 0.5rem;
}*/


/*
* CSS pour JQuery Autocomplete
*/

.autocomplete-suggestions { border: none; border-top: none; background: #FFF; cursor: default; overflow: auto; 
                           -webkit-box-shadow: .5rem .5rem 1rem #00123029; -moz-box-shadow: .5rem .5rem 1rem #00123029; 
                           box-shadow: .5rem .5rem 1rem #00123029; }
.autocomplete-suggestion { padding: 0.2rem 0.5rem; white-space: nowrap; overflow: hidden; font-size: 1.4rem;}
.autocomplete-no-suggestion { padding: 0.2rem 0.5rem;}
.autocomplete-selected { background: var(--ej-btn-active-bg); color: var(--ej-btn-active-color); -webkit-text-stroke-width: 0.04rem;}
.autocomplete-suggestions strong { font-weight: bold; }
.autocomplete-group { padding: 0.2rem 0.5rem; font-weight: bold; font-size: 1.6rem; color: #000; display: block; border-bottom: 0.1rem solid #000; }