/*
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.2rem;
    --ej-input-checkbox-margin-right: 1rem;
    --ej-input-switch-width: 1.8rem;
    --ej-input-switch-circle-size: 0.8rem;

    --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 640 640'%3E%3Cpath d='M528 320C528 205.1 434.9 112 320 112C205.1 112 112 205.1 112 320C112 434.9 205.1 528 320 528C434.9 528 528 434.9 528 320zM64 320C64 178.6 178.6 64 320 64C461.4 64 576 178.6 576 320C576 461.4 461.4 576 320 576C178.6 576 64 461.4 64 320z'/%3E%3C/svg%3E");
    --ej-radiobutton-checked-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cpath d='M320 576C461.4 576 576 461.4 576 320C576 178.6 461.4 64 320 64C178.6 64 64 178.6 64 320C64 461.4 178.6 576 320 576zM320 224C373 224 416 267 416 320C416 373 373 416 320 416C267 416 224 373 224 320C224 267 267 224 320 224z'/%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-input-switch-width: 2.1rem;
    --ej-input-switch-circle-size: 1rem;
    
    --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);
    overflow: visible;
}

.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 {
    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)));
}

.stdform .form-card .form-check-input {
    --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;
    background-color: var(--bs-body-color);
    height: 1.8rem;
    width: 1.8rem;
}

.stdform .form-check.form-switch .form-check-input {
    margin-top: calc((var(--ej-input-line-height) - var(--ej-input-checkbox-height)) / 2);
    --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-switch-width);
    margin-left: calc(-1 * (var(--ej-input-switch-width) + var(--ej-input-checkbox-margin-right)));
    background-size: var(--ej-input-switch-circle-size);
    border-width: 0.2rem;
}

/*.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:not(.form-switch) .form-check-input[type="checkbox"] {
    -webkit-mask-image: var(--ej-checkbox-svg);
    mask-image: var(--ej-checkbox-svg);
}
.stdform .form-check:not(.form-switch) .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:not(.form-switch) .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,
.stdform span.form-daterange-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; }