/*                      */
/* Layout des dialogues */
/*                      */

.p-conteneurAppli__coucheDialogues .d-dialogue { pointer-events: none; }
.d-dialogue
{
  position: absolute;
  max-height: 92vh;
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 35rem;
}

.bko-compat.d-dialogue {
    width: auto;
}

.d-dialogue__titre /*titre du dialogue*/
{
  position: relative;
  text-align: left;
  font-size: 1rem;
/*   border-bottom: 2px solid var(--couleur--fonce); */
  padding-left: .25rem;
  padding-right: .75rem;
  padding-bottom: .25rem;
  padding-top: .25rem;
  color: #505050;
  flex-grow: 0;
  flex-shrink: 0;
  background: white;
  width: auto;
  display: inline-block;
  border-top-left-radius: .5rem;
  border-top-right-radius: .5rem;
  border-top: 3px solid var(--couleur--fonce);
  border-left: 1px solid var(--couleur--fonce);
  border-right: 1px solid var(--couleur--fonce);
  margin: 0rem;
  font-weight: normal;
/*   box-shadow: 2px 3px 10px 1px #a1a1a1; */
  margin-bottom: -1px; /*cacher le trait bleu du bas qui sépare du contenu*/
  
  pointer-events: auto;
  
  background: var(--couleur--fonce);
  color: white;
  font-weight: bold;
  font-size: .8rem;
/*   line-height: 1.5; */
}

.d-dialogue__titre__icone
{
  margin-right: .3rem;
  margin-left: .3rem;
  
  background-color: rgba(255, 255, 255, 0.77);
  border-radius: .4rem;
  padding: 1em;
  margin-top: -.4em;
  margin-left: -.25em;
  margin-bottom: -.15em;
}

/*
 HACK pour autoriser icones font awesome (faudra faire un choix à la fin...)
 */
.d-dialogue__titre__icone.fa, .d-dialogue__titre__icone.fb, .d-dialogue__titre__icone.fl, .d-dialogue__titre__icone.fas, .d-dialogue__titre__icone.far
{
  line-height: 1.5;
  margin: 0 .3rem;
  background-color: unset;
  border-radius: unset;
  padding: unset;
  color: white;
}


.d-dialogue__formulaire {
  flex: 1 1 auto;
  min-height: 0rem;
  
  background: white;
  border: 1px solid var(--couleur--fonce);
  border-radius: .5rem;
  border-top-left-radius: 0rem;
  box-shadow: 2px 3px 10px 1px #a1a1a1;
  
  transition: height .5s ease;
  
  pointer-events: auto;
}

/*hack à droite */
/*.d-dialogue{ align-items: flex-end; }
.d-dialogue__titre__icone {float: right !important; margin-right: -.6rem; margin-left: .3rem; }
.d-dialogue__formulaire { border-radius: .5rem; border-top-right-radius: 0rem; }*/
/* fin hack à droite */

.d-dialogue--repliee .d-dialogue__formulaire
{
  border: 0;
  height: 0px;
  overflow: hidden;
  box-shadow: none;
}

.d-dialogue--repliee .d-dialogue__titre
{
  border-bottom: 1px solid var(--couleur--fonce);
}

.d-dialogue--dockADroite { /* positioner un dialogue à droite */
  left: unset !important;
  top: 10;
  right: 10;
  width: 320px;
  height: unset;
}





@media (max-width: 720px) {
  .d-dialogue
  {
    top: 0px !important;
    left: 0px !important;
    min-width: 100%;
    min-height: 100%;  
    max-width: 100%;
    max-height: 100%;
    overflow: auto;
    align-items: stretch;
  }

  .d-dialogue__formulaire {
    border-radius: 0;
  }
  
  .d-dialogue__titre
  {
    border-radius: 0rem;
    width: 100%;
    margin-bottom: 0px; /*annule le margin-bottom: -1px défini pour grand écran*/
  }


  .d-dialogue input,
  .d-dialogue select{
    font-size: 1em;
  }
}



.d-dialogue h2
{
  margin: 0em;
  font-size: 1.1em;
  margin-top: 0.7em;
}

.d-dialogue table h4
{
  font-size: 0.9em;
  margin-top: 0.7em;
  margin-left: 0em;
  margin-right: 0em;
  margin-bottom: 0em;
  display: inline;
  color: rgba(0,0,0, 0.7);
}

.d-dialogue h4
{
  font-size: .8rem;
  margin-top: .55rem;
  margin-left: 0em;
  margin-right: 0em;
  margin-bottom: 0em;
  display: inline;
  color: rgba(0,0,0, 0.7);
}

.d-dialogue p
{
  text-align: justify;
  margin-top: 0.66em;
  margin-bottom: 0.66em;
}

/* TODO: faire une vraie classe pour les li dans les dialogue 
   nb: les règle ci-dessous, appliquées à l'aveugle, cassent select2 qui n'a rien fait, le pauvre...
 */
/*.d-dialogue li
{
  list-style: none;
  margin-left: 2em;
  margin-top: 0.2em;
}*/

.d-dialogue button
{
  margin: 0.2em;
}

.d-dialogue .blocOkAnnul
{
  float: right;
}

.bd_bloc { display: inline-block; margin: 0.5em; }

.a-formulaire__boutonRefObjFrm { display: none; } /* bouton cache permetant de recuperer l'objet gerant le formulaire dans lequel il se trouve*/

/*                   */
/* Blocs de dialogue */
/*                   */

.o-blocdlg {
  display: flex;
  flex-direction: column;
  padding-bottom: .75rem;
}

.o-blocdlg--principal { background-color: white; }
.o-blocdlg--secondaire { background-color: #f7fafd; }




/**
*   Addon pour gestion des tabs
* */



.ui-tabs { padding: 0px; }
.ui-tabs-vertical .ui-tabs-nav { background: none; border: none; }
.ui-tabs .ui-tabs-nav li { margin: 0px; }

.ui-tabs .ui-tabs-panel { background: rgba(255, 255, 255, 0.6); }

.ui-tabs.ui-tabs-vertical { }
.ui-tabs.ui-tabs-vertical .ui-tabs-nav { 
  padding: 0px;
}
.ui-tabs.ui-tabs-vertical .ui-tabs-nav li { width: 100%; border-bottom-width: 1px; border-left-width: 0; margin-bottom: .2em; background: rgba(255, 255, 255, 0.2); padding: 2px; padding-left: 7px; }
.ui-tabs.ui-tabs-vertical .ui-tabs-nav li a { display:block; width: 100%; padding-top: 0.5em; padding-bottom: 0.5em; padding-left: 1em; padding-top: 0.5em; padding-bottom: 0.5em; padding-left: 1em; }
.ui-tabs.ui-tabs-vertical .ui-tabs-nav li.ui-tabs-active { border:0px; background: rgba(255, 255, 255, 0.6); margin-bottom: 0.2em; }
.ui-tabs.ui-tabs-vertical .ui-tabs-panel {
  white-space:normal;
  padding: 1em;
  border:none;
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px;
}



.ui-tabs.ui-tabs-hori, .ui-tabs.ui-tabs-vertical .ui-tabs.ui-tabs-hori
{ white-space:nowrap; background: none; padding: 0px; margin: 0px; border: none; }
.ui-tabs.ui-tabs-hori .ui-tabs-nav, .ui-tabs.ui-tabs-vertical .ui-tabs.ui-tabs-hori .ui-tabs-nav
{ border: none; display: inline-block; vertical-align: top; background: none; padding: 0px; }
.ui-tabs.ui-tabs-hori .ui-tabs-nav li, .ui-tabs.ui-tabs-vertical .ui-tabs.ui-tabs-hori .ui-tabs-nav li
{ display: inline-block; float: none; margin-right: .2em; margin-bottom: 0em; border-left: gray 1px solid; border-top: gray 1px solid; border-right: gray 1px solid; border-bottom: 0px; background: rgba(150, 150, 150, 0.4); width:120px;}
.ui-tabs.ui-tabs-hori .ui-tabs-nav li a, .ui-tabs.ui-tabs-vertical .ui-tabs.ui-tabs-hori .ui-tabs-nav li a
{ width: 100%; padding-top: 0.5em; padding-bottom: 0.5em; padding-left: 1em; }
.ui-tabs.ui-tabs-hori .ui-tabs-nav li.ui-tabs-active, .ui-tabs.ui-tabs-vertical .ui-tabs.ui-tabs-hori .ui-tabs-nav li.ui-tabs-active
{ background: rgba(200, 200, 255, 0.5);}
.ui-tabs.ui-tabs-hori-dansOngletDlg .ui-tabs-panel,  .ui-tabs.ui-tabs-vertical .ui-tabs.ui-tabs-hori-dansOngletDlg .ui-tabs-panel
{ border:none; background: rgba(200, 200, 255, 0.5);   border-top-left-radius: 0px; border-bottom-left-radius: 4px; border-bottom-right-radius: 4px; border-top-right-radius: 4px; }
.ui-tabs.ui-tabs-hori .ui-tabs-panel, .ui-tabs.ui-tabs-vertical .ui-tabs.ui-tabs-hori .ui-tabs-panel
{ border: 1px solid #c8c8c8; border-top-right-radius: .5em; border-bottom-right-radius: .5em; border-bottom-left-radius: .5em; }


.verticalTab {  white-space:nowrap; }

.champErrone { border: red 3px solid !important; } /* Le !important a du être ajouté à cause de bootstrap */


/*
 * Gestion des accordeons.
 */

.d-dialogue .ui-accordion { }
.d-dialogue .ui-accordion .ui-accordion-header { padding: 0px; background: none; border: none; }
.d-dialogue .ui-accordion .ui-accordion-header .ui-accordion-header-icon  { top:0px; left: 0px; position: relative; display: inline-block; }
.d-dialogue .ui-accordion div { border: none; background: rgba(255, 255, 255, 50); padding: 0.25em; }

.d-dialogue .nePasDragger {}  /*  ne pas definir de style, cette classe est appliquee aux element qui ne doivent pas déclencher le drag d'un boite de dialogue (les scrollboxes par exemple) */


/*
 * Gestion des images
 */
.blocEnvoiMail {
background-image: url("../images/animations/envoi_mail.gif");
min-height: 64px;
padding-left: 75px;
background-repeat: no-repeat;
background-position:left ;
}






/*
 * Elements des dialogues
 *
 * */
ul.o-liste {
  list-style: none; /* Remove default bullets */
}

ul.o-liste li {
  margin-left: 1rem;
}

ul.o-liste li::before {
  content: "\2022";  /* Add content: \2022 is the CSS Code/unicode for a bullet */
  color: var(--couleur--fonce); /* Change the color */
  font-weight: bold; /* If you want it to be bold */
  display: inline-block; /* Needed to add space between the bullet and the text */
  width: 1em; /* Also needed for space (tweak if needed) */
  margin-left: -1rem;
}


.o-autocomp input {margin: 0px; padding:0px; padding: 3px; border: 1px solid #bbb; vertical-align: bottom; border-top-left-radius:4px; border-bottom-left-radius:4px; }
.o-autocomp input.chargement { color: grey; text-align: center; }
.o-autocomp input.vide { color: grey; text-align: center; font-style:italic;}
.o-autocomp input.indef { background: lightgrey; color: darkgrey; text-align: center; font-style:italic;}
.o-autocomp button {margin: 0px; padding:0px; border: 1px #bbb solid; vertical-align: bottom; width:26px; height:26px; border-left: 0px; }
.o-autocomp button:last-of-type { border-top-right-radius:4px; border-bottom-right-radius:4px; }
.o-autocomp button img { margin-left: -2px; }

.o-autocomp input.rechercheEnCours
{
  background-image: url("../images/ajax-charge-petit.gif");
  background-repeat: no-repeat;
  background-position:right ;
  color: 888888;
}

/* TODO supprimer ce bloc lorsqu'il ne sera plus nécéssaire */
.o-oldautocomp input {margin: 0px; padding:0px; padding: 3px; border: 1px solid #bbb; vertical-align: bottom; border-top-left-radius:4px; border-bottom-left-radius:4px; }
.o-oldautocomp input.chargement { color: grey; text-align: center; }
.o-oldautocomp input.vide { color: grey; text-align: center; font-style:italic;}
.o-oldautocomp input.indef { background: lightgrey; color: darkgrey; text-align: center; font-style:italic;}
.o-oldautocomp button {margin: 0px; padding:0px; border: 1px #bbb solid; vertical-align: bottom; width:26px; height:26px; border-left: 0px; }
.o-oldautocomp button:last-of-type { border-top-right-radius:4px; border-bottom-right-radius:4px; }
.o-oldautocomp button img { margin-left: -2px; }

.o-oldautocomp input.rechercheEnCours
{
  background-image: url("../images/ajax-charge-petit.gif");
  background-repeat: no-repeat;
  background-position:right ;
  color: 888888;
}

/* 
 * Blocs repliables
 */

.d-dialogue h2[data-toggle]{
  display: flex;
  cursor: pointer;
  justify-content: space-between;
  padding: 0 0 .7rem;
  margin-left: 1rem;
  margin-right: 1rem;
  margin-top: 1.5rem;
}

/* TODO: ne garder que le 2ème définition (ie: recoder les classes pour le reste) */
.d-dialogue h2[data-toggle]:after,
.data-toggle-carret:after
{
  content: '❯';
  transform-origin: .2em .5em;
  transform: rotate(90deg);
  transition: transform .3s ease;
  position: relative;
  display: inline-block;
  margin-left: 1rem;
}

.d-dialogue h2[data-toggle].collapsed:after,
.data-toggle-carret.collapsed:after
{
  transform: rotate(0deg);
}







/*
 * ListesIncluExclu
 *
 */

.ghostEltListesIE
{
  background: rgba(255, 255, 255, 0);
  color: #333;
  font-size: 14px;
  position: absolute;
  font-family: inherit;
  display: inline;
  padding: 5px;
}


/*
 *
 * Menus
 *
 * */

.ui-menu.grilleCoul .ui-menu-item {
    width: 25%;
    display: inline-block;
}

.ui-menu.grilleCoul .ui-menu-item .ui-menu-item-wrapper.ui-state-active { background: none; border: none; }

/*
 * formulaires
 *
 */

.a-formulaire__champ--avecExemple--vide { color: gray; text-align: center; font-style: italic;}










/*                        */
/* Dialogues transversaux */
/*                        */


/*
 *  Dialogue données manquantes
 */

.d-dialogue--donnees-manquantes
{
  --couleur--claire: #ebf4c7;
  --couleur--fonce: #afda00;
}



/*--------------------------------------
    Liste des actions a soumettre
--------------------------------------*/

.d-dialogue--transv-actionsenattente
{
  right: 10px;
  width: 320px;
 
  --couleur--claire: #AAFFAA;
  --couleur--claire: rgba(170, 255, 170, 0.9);
  --couleur--fonce: #05d400;
}



.d-dialogue .d-dialogue--retour-appliquer
{
  --couleur--claire: white;
  --couleur--fonce: white;
  transform: translate(-100%);
}



.o-champ--discret {
  background: none;
  border: none;
    border-bottom-color: currentcolor;
    border-bottom-style: none;
    border-bottom-width: medium;
  border-bottom: 1px solid var(--shadow);
}