/*
tous les styles relatifs aux questionnaires
*/

:root {
    --elt-space: 0.5em;
}

/* questionnaire RG en VISU ou RUN ou EDIT*/
.quest.RG {

    /* Largeur des titres des questions */
    .title-width-1 { --title-width: 1rem; }
    .title-width-2 { --title-width: 2rem; }
    .title-width-3 { --title-width: 3rem; }
    .title-width-4 { --title-width: 4rem; }
    .title-width-5 { --title-width: 5rem; }
    .title-width-6 { --title-width: 6rem; }
    .title-width-7 { --title-width: 7rem; }
    .title-width-8 { --title-width: 8rem; }
    .title-width-9 { --title-width: 9rem; }
    .title-width-10 { --title-width: 10rem; }
    .title-width-11 { --title-width: 11rem; }
    .title-width-12 { --title-width: 12rem; }
    .title-width-13 { --title-width: 13rem; }
    .title-width-14 { --title-width: 14rem; }
    .title-width-15 { --title-width: 15rem; }
    .title-width-16 { --title-width: 16rem; }
    .title-width-17 { --title-width: 17rem; }
    .title-width-18 { --title-width: 18rem; }
    .title-width-19 { --title-width: 19rem; }
    .title-width-20 { --title-width: 20rem; }
    .title-width-21 { --title-width: 21rem; }
    .title-width-22 { --title-width: 22rem; }
    .title-width-23 { --title-width: 23rem; }
    .title-width-24 { --title-width: 24rem; }
    .title-width-25 { --title-width: 25rem; }
    .title-width-26 { --title-width: 26rem; }
    .title-width-27 { --title-width: 27rem; }
    .title-width-28 { --title-width: 28rem; }
    .title-width-29 { --title-width: 29rem; }
    .title-width-30 { --title-width: 30rem; }
    .title-width-31 { --title-width: 31rem; }
    .title-width-32 { --title-width: 32rem; }
    .title-width-33 { --title-width: 33rem; }
    .title-width-34 { --title-width: 34rem; }
    .title-width-35 { --title-width: 35rem; }
    .title-width-36 { --title-width: 36rem; }
    .title-width-37 { --title-width: 37rem; }
    .title-width-38 { --title-width: 38rem; }
    .title-width-39 { --title-width: 39rem; }
    .title-width-40 { --title-width: 40rem; }
    .title-width-41 { --title-width: 41rem; }
    .title-width-42 { --title-width: 42rem; }
    .title-width-43 { --title-width: 43rem; }
    .title-width-44 { --title-width: 44rem; }
    .title-width-45 { --title-width: 45rem; }
    .title-width-46 { --title-width: 46rem; }
    .title-width-47 { --title-width: 47rem; }
    .title-width-48 { --title-width: 48rem; }
    .title-width-49 { --title-width: 49rem; }
    .title-width-50 { --title-width: 50rem; }
    .title-width-51 { --title-width: 51rem; }
    .title-width-52 { --title-width: 52rem; }
    .title-width-53 { --title-width: 53rem; }
    .title-width-54 { --title-width: 54rem; }
    .title-width-55 { --title-width: 55rem; }
    .title-width-56 { --title-width: 56rem; }
    .title-width-57 { --title-width: 57rem; }
    .title-width-58 { --title-width: 58rem; }
    .title-width-59 { --title-width: 59rem; }
    .title-width-60 { --title-width: 60rem; }

    & div.along.title-width-0 > span.label-like{font-size:0px}
    & div.along.title-width-0, & div.cb-block.title-width-0 > p, & fieldset.title-width-0 > div.along, & dl.data-list.simple div.title-width-0 {display:block}
    & div.along.title-width-0>*, & div.cb-block.title-width-0 > p>*, & fieldset.title-width-0 > div.along>*, & dl.data-list.simple div.title-width-0>* {display:inline-block;margin-right: 1em;}
    & div.along.elt-CHECK_BOX.title-width-0{grid-template-columns: 0rem auto;gap: 0em;}
    
    & div.along[class*="title-width-"]:not(.title-width-0),
    & div.cb-block[class*="title-width-"]:not(.title-width-0) > p,
    & fieldset[class*="title-width-"]:not(.title-width-0) > div.along,
    & dl.data-list.simple div[class*="title-width-"]:not(.title-width-0) {
        grid-template-columns: var(--title-width) auto;
        gap: 1em;
    }

    & div.along[class*="title-width-"],
    & div.cb-block[class*="title-width-"] > p, 
    & fieldset[class*="title-width-"] > div.along, 
    & dl.data-list.simple div[class*="title-width-"]
    {
        align-items: baseline;
    }

     & .elt.elt-RADIO>div.along{
        align-items: center;
    }

    /*couleur des labels (élément elt-titre)*/
    .elt.currentElt .elt-titre {
       color: var(--primary-green);
    }

    /* Largeur des champs */
    .input-size-1 { --input-size: 1rem; }
    .input-size-2 { --input-size: 2rem; }
    .input-size-3 { --input-size: 3rem; }
    .input-size-4 { --input-size: 4rem; }
    .input-size-5 { --input-size: 5rem; }
    .input-size-6 { --input-size: 6rem; }
    .input-size-7 { --input-size: 7rem; }
    .input-size-8 { --input-size: 8rem; }
    .input-size-9 { --input-size: 9rem; }
    .input-size-10 { --input-size: 10rem; }
    .input-size-11 { --input-size: 11rem; }
    .input-size-12 { --input-size: 12rem; }
    .input-size-13 { --input-size: 13rem; }
    .input-size-14 { --input-size: 14rem; }
    .input-size-15 { --input-size: 15rem; }
    .input-size-16 { --input-size: 16rem; }
    .input-size-17 { --input-size: 17rem; }
    .input-size-18 { --input-size: 18rem; }
    .input-size-19 { --input-size: 19rem; }
    .input-size-20 { --input-size: 20rem; }
    .input-size-21 { --input-size: 21rem; }
    .input-size-22 { --input-size: 22rem; }
    .input-size-23 { --input-size: 23rem; }
    .input-size-24 { --input-size: 24rem; }
    .input-size-25 { --input-size: 25rem; }
    .input-size-26 { --input-size: 26rem; }
    .input-size-27 { --input-size: 27rem; }
    .input-size-28 { --input-size: 28rem; }
    .input-size-29 { --input-size: 29rem; }
    .input-size-30 { --input-size: 30rem; }
    .input-size-31 { --input-size: 31rem; }
    .input-size-32 { --input-size: 32rem; }
    .input-size-33 { --input-size: 33rem; }
    .input-size-34 { --input-size: 34rem; }
    .input-size-35 { --input-size: 35rem; }
    .input-size-36 { --input-size: 36rem; }
    .input-size-37 { --input-size: 37rem; }
    .input-size-38 { --input-size: 38rem; }
    .input-size-39 { --input-size: 39rem; }
    .input-size-40 { --input-size: 40rem; }
    .input-size-41 { --input-size: 41rem; }
    .input-size-42 { --input-size: 42rem; }
    .input-size-43 { --input-size: 43rem; }
    .input-size-44 { --input-size: 44rem; }
    .input-size-45 { --input-size: 45rem; }
    .input-size-46 { --input-size: 46rem; }
    .input-size-47 { --input-size: 47rem; }
    .input-size-48 { --input-size: 48rem; }
    .input-size-49 { --input-size: 49rem; }
    .input-size-50 { --input-size: 50rem; }
    .input-size-51 { --input-size: 51rem; }
    .input-size-52 { --input-size: 52rem; }
    .input-size-53 { --input-size: 53rem; }
    .input-size-54 { --input-size: 54rem; }
    .input-size-55 { --input-size: 55rem; }
    .input-size-56 { --input-size: 56rem; }
    .input-size-57 { --input-size: 57rem; }
    .input-size-58 { --input-size: 58rem; }
    .input-size-59 { --input-size: 59rem; }
    .input-size-60 { --input-size: 60rem; }


    /*& .input-size-0{display:grid;grid-template-columns: 100% auto;}*/
    & .input-size-100{display:grid;grid-template-columns: 100% auto;}
    & [class*="input-size-"]:not(.input-size-0, .input-size-100) {
        display: grid;
        grid-template-columns: min( var(--input-size) , 100%) auto;
    }

    & [class*="input-size-"]>*
    {
        display: inline-block;
    }
    
    .elt-titre{
        font-size: 0.9em;   /* alignement sur legend */
    }

    .elt.indentDpd > .elt-titre,
    .elt.elt-RADIO.indentDpd > div > .elt-titre,
    .elt.indentDpd.elt-CHECK_BOX,
    .thirdPart > * {
        margin-left: 1em;
    }

    .thirdPart>.infoSaisie{
        font-style: italic;
    }
   

    /* styleTitreCouleur */
    & .colorTxt1>.elt-titre{color:var(--primary-orange) !important;}
    & .colorTxt1bis>.elt-titre{color:var(--primary-red) !important;}
    & .colorTxt2>.elt-titre{color:#FFFFFF !important;}
    & .colorTxt2bis>.elt-titre{color:#FFFFFF !important;}
    & .colorTxt3>.elt-titre{color:#FFFFFF !important;}
    & .colorTxt3bis>.elt-titre{color: var(--primary-blue) !important;}
    & .warning>.elt-titre{color: var(--primary-orange) !important;}
    & .info>.elt-titre{color: var(--primary-blue) !important;}
    & .error>.elt-titre, & .error > * >.elt-titre{color: var(--agenda-san-red-3) !important;}
    & .success>.elt-titre{color: var(--primary-green) !important;}

    /* styleTitreTexte*/
    & .GSI1>.elt-titre{font-weight:bold !important;}
    & .GSI2>.elt-titre{text-decoration:underline;}
    & .GSI4>.elt-titre{font-style:italic;}
    & .GSI3>.elt-titre{font-weight:bold !important;text-decoration:underline;}
    & .GSI5>.elt-titre{font-weight:bold !important;font-style:italic;}
    & .GSI6>.elt-titre{text-decoration:underline;font-style:italic;}
    & .GSI7>.elt-titre{font-weight:bold !important;text-decoration:underline;font-style:italic;}	


    & .elt.droite .elt-titre{
        text-align: right;
    }

    & .elt.elt-PUCE.droite>.elt-titre,
    & .elt.elt-ARRAY.droite>.elt-titre
    {
        text-align: left;
    }


    & .elt.gauche .elt-titre{
        text-align: left;
    }

    /*
    & *.elt:not(.hidden):not([style*="display: none"]) + *.elt:not([style*="display: none"]) {
        margin-top: 1em;
    }
        */

    /* styleBordure*/
    & .border_sans,
    & fieldset.border_sans,
    & fieldset.puce2.border_sans,
    & fieldset.puce3.border_sans,
    & fieldset.puce4.border_sans
    {border-width:0px !important;}
    & .border_fin,
    & fieldset.border_fin,
    & fieldset.puce2.border_fin,
    & fieldset.puce3.border_fin,
    & fieldset.puce4.border_fin
    {border-width:1px;border-style:dotted;}
    & .border_large, 
    & fieldset.border_large,
    & fieldset.puce2.border_large,
    & fieldset.puce3.border_large,
    & fieldset.puce4.border_large
    {border-width:2px;border-style:solid;}

    & div.elt-TABLEAU.colBorder div.elt-TABLEAU_LIGNE div.elt-TABLEAU_CELLULE:nth-last-of-type(n+2)	/* bordure de colonne, sur toute les cellules sauf la derniere de toutes les lignes */
    {
	    border-right:1px solid black;		
    }
    & div.elt-TABLEAU.rowBorder div.elt-TABLEAU_LIGNE:nth-last-of-type(n+2) div.elt-TABLEAU_CELLULE:nth-last-of-type(n)	/* bordure de ligne, sur toutes les cellules sur toutes les lignes sauf la derniere */
    {
	    border-bottom: 1px solid black;		
    }

    .elt-TABLEAU.border_fin , .elt-TABLEAU.border_large, .elt-TABLEAU.rowBorder, .elt-TABLEAU.colBorder
    {
        
        margin-bottom: var(--elt-space);
    }

    .elt-TABLEAU.border_fin > * > .elt-TABLEAU_CELLULE, 
    .elt-TABLEAU.border_large > * > .elt-TABLEAU_CELLULE, 
    .elt-TABLEAU.rowBorder > * > .elt-TABLEAU_CELLULE, 
    .elt-TABLEAU.colBorder > * > elt-TABLEAU_CELLULE
    {
        padding: var(--elt-space) 0 0 var(--elt-space);    
    }





    /*cacher le titre des questions*/
    
    & div.along.title-off
    {    
         grid-template-columns: auto;

    }
    & div.along.elt-titre,
    & fieldset.title-off.elt-RADIO > div.along /* pour radio */
    {    grid-template-columns: auto;
    }

    & div.along.title-off.elt.elt-CHECK_BOX{
        grid-template-columns: 0 auto;
        column-gap: 0;
    }
   
    & div.elt.title-off > .elt-titre,
    & div.elt.title-off > *:not(.puce) > .elt-titre,
    & div.title-off>label,
    & div.title-off>p>label,
    & div.title-off>legend,     
    & fieldset.puce.title-off>legend,
    & fieldset.title-off > .elt-titre,
    & fieldset.title-off:not(.puce) > * > .elt-titre,
    & p.title-off > label
    {
        position: absolute;top:-100px;left:-100px;font-size: 0px;
    }

    
    & .spacer{
        visibility: hidden;
        display: none;
    }

    /* Adaptation selon les types d'élements */

   

    & select{
        text-overflow: ellipsis;
        width: unset;
        padding: 0 30px 0  5px !important;
    }
 
    & .elt-RADIO.vertical  ul{
        display:block
    }

    & .elt-RADIO:not(.vertical)  ul{
        display:flex;
        flex-direction: row;
    }

    

    & .elt.elt-CHECK_BOX input{
        margin-left : 0px;
    }

    & .elt-RADIO{
        border : unset;
    }


    & .elt-MULTISEL > .elt-titre{
        vertical-align: top;
    }
    
    & .elt-MULTISEL>div>div{
        border: 1px solid var(--fieldset-border);

    }

    & .elt-MULTISEL>div>div>div.value>ul>li{
        display: inline-block;
    }
   
    & .elt-MULTISEL>div>div>div.content{
        border-top: 1px solid var(--fieldset-border);
    }
    & .elt-MULTISEL>div>div>div{
        padding: 0.5em;
    }   

    & .elt-MULTISEL .filter-box{
        display: grid  ;
        grid-template-columns: 5em auto;
        align-items: baseline;
    }

    & .elt-MULTISEL:not(.currentElt) div.content{
        display: none;
    }
    & .elt-MULTISEL:not(.currentElt) p.filter-box{
        display: none;
    }

    & .elt-MULTISEL li.hidden{
        display: none;
    }

    & .elt-MEMO .cke_textarea_inline{
        overflow-y:auto;
    }

    & .elt-TABLEAU {
        display: table;
        width: 100%;
        padding: 0px;
    }
    & .elt-TABLEAU_LIGNE {
        display: table-row;
        padding: 0px;
    }


    .elt{
        margin-bottom: var(--elt-space);
        margin-right: var(--elt-space);
    }



     .elt-TABLEAU_CELLULE,.elt-TABLEAU_LIGNE,.elt-TABLEAU{
        margin: 0;
        padding: 0;
     }

    & .elt-TABLEAU_CELLULE {
        display: table-cell;
        /*padding: 0.5em 0.5em 0.5em 0em;  */
        padding:0 0em 0 0em;
        vertical-align: top;      
    }

    .elt-RADIO input{
        height: 2em;

    }
    .elt-RADIO legend, .elt-RADIO label{
       /* height: 2em;*/
    }

     .elt-RADIO label{
        vertical-align: super;
    }
    .elt.elt-CHECK_BOX label{
        vertical-align: super;
        align-items: unset;
    }

     .elt.elt-CHECK_BOX.along{
        align-items: center;
     } 

      .elt-TITRE p{
        height: 2em;
        vertical-align: sub;

    }
    .elt-titre > .elt-titre{
        font-size: unset;
    }


    /*
    & .elt-TABLEAU_CELLULE > *:not([style*="display: none"]) + * {
        padding-top: 1em;
    }
        */

    & .elt-TABLEAU.nested .elt-TABLEAU_CELLULE {
        padding: 0;
     
    }

    /*
    & .elt-TABLEAU_CELLULE fieldset{
        margin:0px;
    }
        */

    & .elt.elt-PUCE>div>legend{
        font-weight: bold;
    }

    & .puce1, 
    & .puce4, 
    & .puce5, 
    & .puce6,
    & .puce7,
    & .puce8
    {
       border: unset;
       background-color: unset;
    }
    & .puce1 > legend, 
    & .puce2 > legend, 
    & .puce3 > legend, 
    & .puce4 > legend, 
    & .puce5 > legend, 
    & .puce6 > legend,
    & .puce7 > legend,
    & .puce8 > legend,
    & .puce1 > legend > button, 
    & .puce2 > legend > button, 
    & .puce3 > legend > button, 
    & .puce4 > legend > button, 
    & .puce5 > legend > button, 
    & .puce6 > legend > button,
    & .puce7 > legend > button,
    & .puce8 > legend > button
    {
        font-weight: bold;        
    }
     & .puce1 > legend {
        width:100%;
     }

    & .puce1.data-group,
    & .puce4.data-group,
    & .puce5.data-group,
    & .puce6.data-group,
    & .puce7.data-group,
    & .puce8.data-group
    {
        border: unset;
    }

    & .puce1.data-group > h3,
    & .puce4.data-group > h6
    {
        font-weight: bold;

    }

    

    & fieldset.puce2{
        border: 2px solid var(--fieldset-border);
    }

    & fieldset.puce2.texteSeul{
        border: 0px;
        font-weight: normal;
    }

    & fieldset.puce2:not(.texteSeul) > legend{
        padding: 0rem 0rem;
        text-transform: uppercase;
    }

    & .puce2.data-group>h4{
        border: 2px solid bleu;
        font-weight: bold;
    }
    
    & .puce3.data-group>h5{
        font-weight: bold;
    }

    & fieldset.puce3
    {
        border: unset;
    }

    & .puce3.data-group
    {
        border: unset;
    }

    & .puce3:not(.no-indent)  {
        position: relative;
        padding-left: 0.5rem;
        margin: 1.5rem 0;
    }

    & .puce3:not(.no-indent,.texteSeul)::before {
        display: block;
        content: "";
        position: absolute;
        left: 0;
        width: 5px;
        height: 100%;
        border-top: 1px solid var(--shade-grey-1);
        border-bottom: 1px solid var(--shade-grey-1);
        border-left: 1px solid var(--shade-grey-1);
    }

    & fieldset.puce3:not(.no-indent,.texteSeul).collapsible> legend{
        padding-top: 0em;
        font-weight: bold;
        font-variation-settings: var(--fvs-bold);
        text-transform: initial;
        padding-bottom: 1em;
        position: absolute;
        top: -1.5em;
        width: 50%;
    } 
    & fieldset.puce3:not(.no-indent,.texteSeul)> legend{
        padding-top: 0em;
        font-weight: bold;
        font-variation-settings: var(--fvs-bold);
        text-transform: initial;
        padding-bottom: 1em;
        position: absolute;
        top: -0.5em;
        width: 50%;
    }     

    & fieldset.puce3:not(.no-indent,.texteSeul)> legend::after{
        content: "";
        display: block;
    }

    & fieldset.puce3:not(.no-indent,.texteSeul,.title-off)> legend + div{
        margin-top: 1em;
    }   
    

    /* puces texte seul */
    & fieldset.puce2.texteSeul> legend,
    & fieldset.puce3.texteSeul> legend,
    & fieldset.puce4.texteSeul> legend,
    & fieldset.puce5.texteSeul> legend,
    & fieldset.puce6.texteSeul> legend,
    & fieldset.puce7.texteSeul> legend
    {
        padding-top: 1em;
        text-transform: initial;
        font-weight: normal;
    }


    /*suppression des bordure pointillées dans les tableaux*/
    .elt.elt-TABLEAU *+*{
        border:unset;
    }

    fieldset.elt.elt-RADIO{
        /*border : unset;*/
    }

    /*
    radio juste avec le label
    */
    .radioLabel input{
        position: absolute;
        top: -10000px;
    }

    .radioLabel li:has(input:checked) {
        color: var(--text-inv);
        background-color: var(--main-color);
        border-color: var(--main-color);
    }

    .radioLabel li{
        overflow: hidden;
        display: flex;
        align-items: center;
        gap: 0.5em;
        border: 1px solid currentColor;
        border-radius: 0.2em;
        cursor: pointer;
    }

    .radioLabel li:hover,.radioLabel li:focus, .radioLabel li:focus-visible{
		
		
	}

     .radioLabel li:has(*:hover),.radioLabel li:has(*:focus), .radioLabel li:has(*:focus-visible){

        outline: 2px solid var(--main-color);
		outline-offset:2px;
        
	}

    .radioLabel label{
        padding: 0.5em 1em;
        cursor: pointer;
    }
    
    .radioLabel li:has(input:focus) {
        border: 2px double black !important;
        background-color: var(--primary-green);
        filter: opacity(75%);
        transition: filter 0.20s;
    }

    fieldset.elt:not(.elt-puce){
        margin-top:0px;
    }

    & .eltArray{
        padding-left:1em;
        margin-top: 1em;
        margin-bottom: 1em;
    }
    &.exec .eltArray{
        display: grid;
        grid-template-columns: 1em auto;
        gap: 1em;
    }

    & .eltArray.replicat_hide{
        display:none;
    }


    & button.arrayBtn:before{
        color:#38A3B6;
        display: inline-block;
        font: normal normal normal 14px/1 FontAwesome;
        font-size: 30px;
        text-rendering: auto;
        -webkit-font-smoothing: antialiased;	
    }

    & button.arrayBtn{
        min-height: initial;
        background-color: transparent;
        border: none;
        padding: 0;
        cursor: pointer;
    }

    & .eltArray.box{
        border-left: 3px solid gray ;
        padding-left: 1em;
        margin-left: 1em;
    }

    & button.arrayBtn.add:before{
        content:"\f055";
        margin:0.5em;
    }

    & button.arrayBtn.delete:before
    {
        content:"\f057";
    }

    & button.arrayBtn.up:before
    {
        content:"\f0aa";
    }

    & button.arrayBtn.down:before
    {
        content:"\f0ab";
    }

    & .eltArray > .arrayContent {

        /*
        & > * + * {
            margin-top: 1rem;
        }
            */

        padding-bottom: 1em;
    }

    & input[type="radio"]{
        margin: 3px 3px 0px 0px;   
    }

    & fieldset:not(.elt-PUCE,.elt-ARRAY):has(div.along:not(.hidden) select[aria-required=true]) > legend::after,
    & fieldset:not(.elt-PUCE,.elt-ARRAY):has(div.along:not(.hidden) input[aria-required=true]) > legend::after {
        content: " *";
        color: var(--primary-red);
    }

    /* couleurs de messages warning / error */
	& .elt-CALCUL.wrn
	{
		color:#e08919;										/*calcWrn_color*/
	}
	& .elt-CALCUL.err_online,
	& .elt-CALCUL.err_popup
	{
		color:#C00;										/*calcErr_color*/
		padding-top: 1px;								  /*input_padding*/	/* compense le padding de l'input, textarea,inRadio */
	}

    /* couleurs de fond titre et conteneur (styleTitreFond, styleConteneurFond) */
    & .colorBck{ /* normal */
        background-color:transparent;
    }
    & .colorBck1,
    & .colorBck1bis{
        background-color:var(--primary-red)	;
    }
    & .colorBck2,
    & .colorBck2bis{
        background-color:var(--shade-grey-2A);
    }
    & .colorBck3,								
    & .colorBck3bis{
        background-color:var(--primary-blue);
    }

    
    /* classeCSS */
    & .centre{
	    text-align:center;
    }

    & .fondGrisQuestMail, & .fondGrisQuestMail div{
	    background-color: #E3E3E3 !important;
    }

	& fieldset.puce1.header  > legend{				/* titre événement parent en visu event*/
		color:#FFF;						
		background-color:var(--primary-blue)	;
		border: 1px solid #999999;					
            padding : 2px;
	}
	& fieldset.puce1.header2  > legend{				/* titre événement enfant en visu event*/
		color:var(--primary-blue);
		background-color:color-mix(in srgb, var(--shade-grey-2A) 30%, #FFF 70%);
		border: 1px solid #999999;					
        padding : 2px;
	}

    & ul.boxMultiSel{
        list-style-type:none;
    }
    
    & ul.boxMultiSel li {
        margin: 0.2em;
        display: inline-block;
    }

    .alerteMoyenCs div  {
        color : #DF7000;
        font-weight: bold;
    }
    .alerteBasseCs div{
	    color : #FFD700;
        font-weight: bold;
    }
    .alerteHauteCs div{
	    color : #A00;
        font-weight: bold;
    }

   

}


/* questionnaire RG  en RUN only */
.quest.exec.RG {

   

    /*élément masqués*/
    & .elt.hidden{display: none;}


    /*retirer l'indentation*/
    & fieldset.puce.no-indent{padding: 0px;border: 0px;}
    & fieldset.puce.no-indent>div{padding: 0px}

    & fieldset.puce.title-off:not(.no-indent){border: 0px;padding-bottom: 0 !important;}
    & fieldset.puce.title-off:not(.no-indent)>div{padding-bottom: 0 !important;}
    & fieldset.puce.title-off:not(.no-indent):before{display: none;}
    & fieldset.puce.title-off:not(.no-indent){margin-top:0  !important;};
    & fieldset.puce.title-off{margin-bottom: 0 !important};

/*
    & fieldset.puce.no-indent{padding: 0px;border: 0px;}
    
    & fieldset.puce.no-indent>div{padding: 0px}
    
    
    
    & fieldset.puce.title-off>div{padding-bottom: 0px !important}
*/

    /*ajouter une étoile rouge aux questions obligatoires*/
    div.along:has(input[aria-required=true]) legend::after,
    div.along:has(input[aria-required=true]) > label::after,
    .elt:has(select[aria-required=true]) > label::after,
    .elt:has(textarea[aria-required=true]) > label::after,
    div.along:has(input.inReq) > label::after,
    div.along:has(ul.ctrlReq) > legend::after {
        content: " *";
        color: var(--primary-red);
    }

    & .title-off > select[aria-required=true],
    & .title-off > textarea[aria-required=true],
    & .title-off > input[aria-required=true] {
        border: 2px solid var(--primary-red);
    }

    & .element.style {
        grid-template-columns: 8rem auto; display: grid;gap: 1em;
    }

    & fieldset.choice:has(div.along) + fieldset.choice:has(div.along) div.along {
        padding-top: unset; 
        border: none; 
    }

    /*classe spécifiques pour faire joli*/
    & fieldset.puce.separateur{
        border-width: 2px 0px 0px 0px; 
        border-color: black;
        padding: 0px; 
        margin: 0px;
    }
    & fieldset.puce.separateur>legend{text-align: center;}
    & fieldset.puce.separateur>div{padding: 0em;}

    & table.elt-TABLEAU, & table.elt-TABLEAU th, & table.elt-TABLEAU td{border: 0px;margin: 0em;} 
    & table.elt-TABLEAU tr:nth-child(even){background-color: unset;}
    & table.elt-TABLEAU {border: 0px;}
    & table.elt-TABLEAU td {padding: 0.5em;}
    & .elt-MULTISEL div.content{max-height: 200px;overflow-y: scroll;}

    /* tables avec border (classeCSS) */
    
    & .afficheTableau table,
    &.replicats_contraception table ,
    &.insiTableau table
    {
	    border:1px solid black;
        border-collapse: collapse;
    }

    & .afficheTableau td,
    & .afficheTableau th,
    &.replicats_contraception td,
    &.replicats_contraception th,
    & .insiTableau td,
    &.insiTableau th
    {
	    border:1px solid black;
   		padding:0.5em;
    }


    /*masquage des puce no-title avec contenu masqué*/
    & .elt-PUCE.title-off:not(:has(.elt:not(.elt-PUCE):not([style*="display: none"]):not(.hidden)))
    {
        display: none !important;
    }

    & .elt:not(.currentElt)>details>summary>p.filter-box{
        display: none;
    }

    & .filter-box
    {
        margin-top: 1em;
        margin-bottom: 1em;
    }


    & .elt:not(.currentElt)>details>div.content{display: none;}

    & .elt:not(.puce):not(.elt-TABLEAU):not(.elt-TABLEAU_LIGNE):not(.elt-TABLEAU_CELLULE):has(*:focus) *:focus{
        -webkit-animation-name: elt-focus;
        -webkit-animation-duration: 300ms;
        -webkit-animation-iteration-count: 1;
        -webkit-animation-timing-function: ease-in-out;
    }

    /* champ calculé lien */
    & a.calcAction_lien{
        font-size: 90%;
        text-decoration: underline;
        cursor: pointer;
    }

    /* champ calculé derrière radio avec lien (ex: vider l'adresse dcu CS8) */
    & .cb-block.lienButtonRight{
        display : block;
    }

    & .cb-block.lienButtonRight a.calcAction_lien {
        float:right;
    }

    & button.calcAction_bouton{
        padding:4px;
        min-height:14px;
    }
    & button.calcAction_bouton:before{
        color: #fff;
        display: inline-block;
        font: normal normal normal 18px / 1 FontAwesome;
        text-rendering: auto;
        -webkit-font-smoothing: antialiased;
    }
    & .cocher button.calcAction_bouton:before{  /* case cochée */
        content:"\f14a";
    }
    & .decocher button.calcAction_bouton:before{ /* case décochée */
        content:"\f0c8";
    }

    & .boxMultiSel:empty::before{
        content: "Aucune sélection";
        font-style: italic;
        color: var(--shade-grey-2);
    }
 

    & ul.boxMultiSel li button{
        color:black;
    }

    & .elt:not(.input-block) > .elt-titre
    {
            display: inline-block;
    }
    
    & .elt-RADIO:not(.vertical).input-block {
        padding-top: 0;
        padding-bottom: 0;
        legend {
            font-size: 76.5%;
        }
        label {
           display: inline-block;
       }
   }
   & fieldset.input-block.elt-RADIO {
       background-color: var(--input-bg);
       padding: 0.5rem 0.5rem 0.25rem 0.7rem;
   }

   .input-block {
        background-color: var(--input-bg);
        padding: 0.5rem 0.5rem 0.25rem 0.7rem;
        border-left: 1px solid var(--input-border);
        border-top: 1px solid var(--input-border);
        border-right: 1px solid var(--input-border);
        border-bottom: 1px solid black;
   }



     /* icones */
     & .calendar{												/* calendrier : date picker (ex champs date formulaires) */
        background-image:url("img/quest/calendar.gif");	
        display:inline-block;
		width:16px;			
		height:16px;		
		cursor:pointer;		
		background-repeat:no-repeat;
		background-position:center center; 
		vertical-align: top;	
        margin-left: -1.5em;			
    }
}


@-webkit-keyframes elt-focus {
    0% {
        background-color:unset;
        opacity:0;
    }

    30% {
        background-color: var(--primary-green);
        
    }
    
    100% {
        background-color: unset;
        opacity:1;
    }
}
    

/* questionnaire RG  en VISU only */
.quest.visu.RG, 
.quest.questVisu.RG 
{

        /*retirer l'indentation*/
     & fieldset.puce.no-indent{
        border: none;
        padding: 0px;
    }

    & fieldset.puce.no-indent>div{
        padding: 0px;
    }

    & .elt-value{
        font-weight:bold !important;
    }

	& .elt.valeurRouge .elt-value { /* classeCSS valeurRouge */
		color: var(--primary-red) ; 
	}

    & .valeurVide .elt-value{ color:     var(--body-text)    }
    & .replicat_hide{display:none;}
    & .arrayContent{
        padding-bottom: 1em;
        padding-left: 1em;
        padding-right: 1em;
    }

    & .checkbox-value {
        display:block;
    }

    &.obsc{ /* cartouches obs et alerte en visu */
        margin-top:1em;
    }

    & .data-group.contexte dl { /* contexte visu Elt : réduire l'espace sous la puce laissé par la pce en pos -1em */
        margin-top:-1em; 
    }

    & .data-group.contexte dl>* { /* contexte visu Elt : réduire l'espace sous la puce laissé par la pce en pos -1em */
        margin-top:0.5em; 
    }

    & .data-group.contexte { /* contexte visu Elt : un peu d'espace avant les boutons */
        margin-top: 1rem; 
    }


     /* icones */
     & .calendar{												/* calendrier : date picker (ex champs date formulaires) */
        display: none;
    }

    .elt .thirdPart:has(.calendar){
        display: none;
    }

    .elt.input-block{
        background-color: unset;
        border: 0;
    }

    .elt.input-block>div,.elt.input-block>dt{
        display: block !important;
    }


    .elt.puce2.no-indent{
        border: unset;
    }

    .puce-block:not(:empty){
        padding-top: var(--elt-space);
    }


    .collapsible>h2:before,
    .collapsible>h3:before,
    .collapsible>h4:before,
    .collapsible>h5:before,
    .collapsible>h6:before,
    .collapsible>h7:before{
        content:"\f0d8";
        cursor: pointer;
        margin-right: 0.5em;
        color: black;
        display: inline-block;
        font: normal normal normal 18px / 1 FontAwesome;
        text-rendering: auto;
        -webkit-font-smoothing: antialiased;
    }

    .collapsible.collapsed>*:before{
        content:"\f0d7" !important;
    }



    dl.data-list.simple {
        div.elt-TABLEAU_CELLULE + div.elt-TABLEAU_CELLULE {
            padding-top: 0;
        }
    }

    dl.data-list.simple:not(:has(.valeurNonVide))
	{
		display:none;
	}
    
}

/* questionnaire en édition (montage QM2 en mode V3-RG) */
.quest.edit.RG{
    & .elt textarea {
        width:100%; /* iso studio */
    }
    & fieldset.puce.title-off>legend{
        background-color: lightgray;
        position: relative;
        top: 0em;
        left: 0em;
        display: block;
        font-size: unset;
        margin-bottom: 1em;
        width:100%
    }

    & .elt.elt-TABLEAU:before{   
        content: 'TABLEAU (titre pour sélection)';
        background-color: lightgray;
    }

    & .elt.elt-TABLEAU_CELLULE:empty:before{   
        content: 'Ø';
        background-color: lightsalmon;
    }

    

    & .elt.elt-TABLEAU_CELLULE{   
        border: 1px dotted lightgray;
    }
    
    & legend{	/* PUCE : le tag legend est masqué et remplac" par un DIV class legend */
        visibility:unset;					/* FWK! */									/* TODO: pourquoi on préfère un DIV à LEGEND ?? */
        position:unset;					/* FWK! */
    }

    
    /*cacher le titre des questions*/
    & div.along.title-off{    grid-template-columns: auto;}
    & div.title-off>label{   position: absolute;top:-100px;left:-100px;font-size: 0px;}
    & div.title-off>p>label{   position: absolute;top:-100px;left:-100px;font-size: 0px;}
    & div.title-off>legend{   position: absolute;top:-100px;left:-100px;font-size: 0px;}
    & div.along.elt-titre{    grid-template-columns: auto;}

    
    /*retirer l'indentation*/
    & fieldset.puce.no-indent{
        padding: 0px;
        border:none;
    }

    & fieldset.puce.no-indent>div{
        padding: 0px
    }

    /*ajouter une étoile rouge aux questions obligatoires*/
    div.along:has(input[aria-required=true]) legend::after, div.along:has(input[aria-required=true]) > label::after
    {
        content: " *";
        color: var(--primary-red);
    }

    & .element.style {
        grid-template-columns: 8rem auto; display: grid;gap: 1em;
    }

    & fieldset.choice:has(div.along) + fieldset.choice:has(div.along) div.along {
        padding-top: unset; 
        border: none; 
    }

    /*classe spécifiques pour faire joli*/
    & fieldset.puce.separateur{
        border-width: 2px 0px 0px 0px; 
        border-color: black;
        padding: 0px; 
        margin: 0px;
    }
    & fieldset.puce.separateur>legend{text-align: center;}
    & fieldset.puce.separateur>div{padding: 0em;}

    & table.elt-TABLEAU{border-collapse: separate;}
    & table.elt-TABLEAU, & table.elt-TABLEAU th, & table.elt-TABLEAU td{border: 1px solid grey; padding: 1em;margin: 1em;}    
    & table.elt-TABLEAU:nth-child(even){background-color: unset;}

    & .elt-CALCUL > div::before{
        content: '...';
        background-color: turquoise;
    }
    & .elt-CALCUL.calc.wrn > div::before{
       background-color: #DA0;
    }
    & .elt-CALCUL.calc.err_online > div::before,
    & .elt-CALCUL.calc.err_popup > div::before{
       background-color: #C00;
    }

    & .elt.collapsible:not(.active){
        & div.content{
            display: block;
        }
    }

         /* icones */
         & .calendar{												/* calendrier : date picker (ex champs date formulaires) */
            background-image:url("img/quest/calendar.gif");	
            display:inline-block;
            width:16px;			
            height:16px;		
            cursor:pointer;		
            background-repeat:no-repeat;
            background-position:center center; 
            vertical-align: top;				
        }
        & .input-size-100 .calendar{
            margin-top: 0.25em;
            margin-left: -1.5em;
        }

} 

.quest.edit.NO_RG{
    & input[type="checkbox"], & input[type="radio"]{
        width: unset;
        height: unset;
    }

    & .elt.eltCell:empty:before{   
        content: 'Ø';
        background-color: lightsalmon;
    }
}

div.blzQuest:has(.edit.RG){
    font-size:100%;
    padding: 0.5em;
}

/*
compatibilité quest noRG
*/
.noRG form.quest.visu, .noRG form.quest.questVisu 
{
    /*masquer les légendes dans les fieldset PUCE (remplacées par des DIV.legend)*/
    & legend{
        display:none;
    }
}

/*
pour la comparaison des questionnaires
*/
.comparaison{display:block !important}


.______correction_studio______ {}
/*
suppression du gap entre les puces niveau 1
*/
form {
    display: flex;
    flex-direction: column;
    gap: 0rem;
}



/*
indication de conversion d'unité
*/
.conversionUnite::after{
	content: "U";
	border:1px inset black;
	padding:1px;
	font-size:0.9em;
	font-weight:bolder;
	border-radius: 50%;	
	background-color:#FFFF6B;
	margin-left: 0.5em;
	
}
.conversionUnite{
	cursor:pointer;
}

.collapsible {
  

    & button.control
    {
        padding: 2px 0px 0px 0px;  /* pour puce 1, si il y a un fond */
        color: unset;
        background-color: transparent;
        min-height:0px;
    }

    & button.control::after {
        content: unset;
        display: unset;
        position: unset;
        left: unset;
        width: unset;
        height: unset;
        background-image: unset;
        background-repeat: unset;
        transform-origin: unset;
        transform: unset;
    }
    & button.control::before {
        
        content: "";
        display: inline-block;
        position: relative;
        width: 24px;
        height: 24px;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Cpath d='M12,0C5.37,0,0,5.37,0,12s5.37,12,12,12,12-5.37,12-12S18.63,0,12,0ZM12,16.89l-6.36-6.36,1.41-1.41,4.95,4.95,4.95-4.95,1.41,1.41-6.36,6.36Z'%3E%3C/path%3E%3C/svg%3E");
        background-repeat: no-repeat;
        transform-origin: center center;
        transform: scale(0.8);
    }
    & button.control[aria-expanded=true]::before {
        transform: scale(0.8) rotate(180deg);
    }
}



.____________________version_mobile______________ {}

@media (max-width: 44rem) {
    .quest.RG   {
        .elt-RADIO:not(.vertical) ul {
            flex-direction: column;
        }
    }

    /*pewpew : à montrer à Chloé*/
    fieldset {
        padding: 0;
    }
    div.panel{
        padding: 0.25rem;
    }
    .tabLevel1.tsPage {
        padding: 0.5rem;
    }
}

.________________________________correcti_qm2_________________________ {}
/*
ici des correctif car le qm2 génère du html incorrecte
*/
.elt .thirdPart:empty{
    display: none;
}

.elt p:empty{
    display: none;
}


/*****************************************************************************************************************************
blz_calendar        Date-Picker          
*****************************************************************************************************************************/
.____________________blzCalendar____________________{}
.umCalendarMasque{
    width: 100svw;
    height: 100svh;
    position: fixed;
    top: 0;
    left: 0;
    background-color: rgba(0,0,0,0.5);
    z-index: 999;
}



.umCalendar{
    position: absolute;
    background-color: white;
    z-index: 1000;
    box-shadow: 0 5px 12px 1px rgba(0, 0, 0, 0.25);

    & a:active, & a:focus {
        outline: unset;
        outline-offset: unset;
    }

    & table:not(.cards) a::after {
        content: unset;
    }

    & label{
        position: absolute;top:-100px;left:-100px;font-size: 0px;
    }

    & .topBar{
      
        padding: 0.5em;
        background-color: var(--button-bg-def);
        color: white;
    }

    & .topBar a{
        width: 2em;
        height: 2em;
        color: white;
       
    }


    & .yearSelect, & .monthSelect{
        width: 5em;
        height: 2em;
      
    }

    & .topBar>*{
        padding: 0.5em;
    }

    & .secondBar{
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0.5em;
    }
    
    & td:focus{
        outline: unset !important;
    }

    & td{
        width: 2em;
        height: 2em;
        padding: 0;
        text-align: center;
        vertical-align: middle;
       
    }

    & table td a{
        display: block;        
        width: 100%;
        height: 100%;
        padding-top: 0.5em;
        
    }
    & a:hover, a:focus, select:hover, select:focus{
        cursor: pointer;
        background-color: #C00;
        color: white;
    }

}

.elt .thirdPart {
    display: flex !important;
    align-items: center;
}


/*global issu des questionnaires*/
 .calendarAlone{												/* calendrier : date picker (ex champs date formulaires) */
    background-image:url("img/quest/calendar.gif");	
    display:inline-block;
    width:16px;			
    height:16px;		
    cursor:pointer;		
    background-repeat:no-repeat;
    background-position:center center; 
    vertical-align: top;	
    margin-left: -2em;			
}