/*---------------------------- .ENUM-LIST ---------------------------------------------*/

.enum-list {list-style: none;margin: 0;padding: 0;counter-reset: item;}
.enum-list:has(>*:nth-child(2)) > *::before { content: counter(item) ".  ";counter-increment: item;padding-left: 1rem;font-size: .9em;opacity: 0.6;font-family: 'Roboto';display: inline-block;text-align: right;}/*L'imbrication :has & :nth-child est impossible à cause de dotless*/
.enum-list:has(>*:nth-child(10)) li:before {width: 18px}/*Ajouter un espace pour les chiffres à 2 chiffres*/
.enum-list:has(>*:nth-child(100)) li:before {width: 29px}/*Ajouter un espace pour les chiffres à 3 chiffres*/




















/*---------------------------- RESPONSIVE ANNEXE ---------------------------------------------*/
/*.Annexe.IndexV2 .wrapper-main #annexe-detail.column{background:red;}*/
/* @container ne fonctionne pas en less car considéré comme une variable */
/*.Annexe.Preview{container-type: inline-size;}
@container (max-width: 650px) {*/
    /* On ne peut pas mettre le selecteur parent (.Annexe.Preview .footer-preview), uniquement la partie enfant*/
    /*.footer-preview li.label {display: none !important;}
    .footer-preview li:has(.system-admin){display:none!important;}
}

@container (max-width: 500px) {
    #controle .wrapper-name{display:none;}

   #content #xml-preview{flex:none;}
   #content #xml-preview .ubl-preview{width: calc(100% - 1rem);}
   #content #xml-preview section{padding:0.25rem 0.5rem;flex-flow:column!important;gap:0.5rem; overflow:auto;}  
   #content #xml-preview section.ubl-preview-header .extra-info{padding-top:0;text-align:left;}  
   #content #xml-preview section .wa-table td,
   #content #xml-preview section .wa-table th >div{padding:1px}
}*/

/*@container (max-width: 650px) {
    #content{background:yellow;}
}

@container (max-width: 600px) {
    #content{background:green;}
}

@container (max-width: 550px) {
    #content{background:pink;}
}

@container (max-width: 500px) {
    #content{background:red;}
}

@container (max-width: 450px) {
    #content{background:blue;}
}

@container (max-width: 400px) {
    #content{background:purple;}
}

@container (max-width: 350px) {
    #content{background:cyan;}
}

@container (max-width: 300px) {
    #content{background:brown;}
}

@container (max-width: 250px) {
    #content{background:black;}
}*/




/*---------------------------- RESPONSIVE AJOUT CLI/FOU ---------------------------------------------*/
/*- signaleticAddInForm  (même design que sur smartphone)-*/
.signaleticAddInForm div.form {container-type: inline-size;}

@container (max-width : 650px) {
    form .fieldset .fieldsetContent.wrapper-column,
    form .fieldset .fieldsetContent.wrapper-column .column,
    form .fieldset .fieldsetContent.wrapper-column .column .line{display:block!important;}
     
    form .fieldset .fieldsetContent .row span.inputSelectContainer,
    form .fieldset .fieldsetContent .row span.inputTextContainer    {width:400px!important;display:block;max-width: 100%;}
    form .fieldset .fieldsetContent .row input:not([type="checkbox"]),
    form .fieldset .fieldsetContent .row select{width: calc(100% - 7px)!important;box-sizing: border-box!important;margin-left:7px!important;}/*attention pas d'espace dans calc*/
}
@container (max-width: 365px) {
    form div.controls .keepEncoding{display:none;}/*cacher pour les téléphone de très petite largeur*/
}