/* ===================================================================== */
/*                              Base.css                                 */
/* � 2019  Dunin Technologie Inc.                                       */
/* ===================================================================== */

/* - DÉFINITION -------------------------------------------------------- */
/* Affichage de base.                                                    */
/* --------------------------------------------------------------------- */

/* - NOTES ------------------------------------------------------------- */
/* --------------------------------------------------------------------- */


/* --------------------------------------------------------------------- */
/* Permet d'utiliser 100% de la hauteur de la page.                      */

html, body
  {
    height: 100%;
  }


/* --------------------------------------------------------------------- */
/* Couleur de fond et marge du body.                                     */

body
  {
    display: flex;
    margin: 0;
  }


/* --------------------------------------------------------------------- */
/* Logos.                                                                */

.Logo > img { height: 30px }          /* Logo dans la barre titre        */
.LogoLogin > img { height: 60px }     /* Logo de la page de login        */


/* --------------------------------------------------------------------- */
/* Enléve les cadrages du navigateur.                                    */

*:focus { outline: none }


/* --------------------------------------------------------------------- */
/* Éléments invisible.                                                   */

.Invisible { display:none }
.ActGrid > .Invisible { display:inline }   /* Dans un grid, il faut conserver le Div afin d'occuper une case */


/* --------------------------------------------------------------------- */
/* Conserve la taille des acteurs élémentaires, pour le scrolling.       */

input textarea select { flex-shrink: 0 }  /* button: voir Bouton.css */

.ActCheck > input { width:auto }   /* Conserve le check box à gauche */
.CheckContour { margin: 6px }
.CheckContour > input { width:auto; margin:0px }


/* --------------------------------------------------------------------- */
/* Erreur / avertissement.                                               */

select.Error, input.Error, textarea.Error, .CustomSelect.Error { border: solid 2px var(--couleurBordureErreur) }
select.Warning, input.Warning, textarea.Warning, .CustomSelect.Warning { border: solid 2px var(--couleurAvertissement) }

/* --------------------------------------------------------------------- */
/* text-overflow                                                         */
.ActTexte, .ActTexte > span, .ActInput > input {text-overflow: ellipsis;}

/* --------------------------------------------------------------------- */
/* Agrandit selon l'espace disponible.                                   */

.Scale  { flex: 1 }
.Scale2 { flex: 2 }
.Scale3 { flex: 3 }
.Scale4 { flex: 4 }
.Scale5 { flex: 5 }

/* --------------------------------------------------------------------- */
/* Avec scroll bar.                                                      */

.Scroll { flex-shrink: 1;  overflow : auto }      /* Shrink pour entrer ds l'espace dispo   */
.ScrollInvisible { flex-shrink: 1;  overflow: hidden }
.ScrollHoriz { overflow : auto }      /* Ex: toolbar layout 2D */

/* --------------------------------------------------------------------- */
/* Cadre standard.                                                       */

.Marge { margin: 5px }
.Processus .Marge { margin-left: 0px; }

.CadreSimple  { background-color: var(--couleurCadreSimple); border: 1px solid var(--couleurBordureCadre); margin-bottom: 20px; } /* Cadre de base */
.PageRecherche .CadreSimple {margin-top: 10px; margin-bottom: 0px; border-bottom: 1px solid var(--couleurBordureCadre); border-left: 2px solid var(--couleurBordureCadre);} /* table (ActGrid) page recherche   */
.CadreSimpleG { border-left: 1px solid; padding-left: 6px; }   /* .ToolBarLayout */
.CadreSimpleD { border-right: 1px solid; padding-right: 6px; } /* .ToolBarLayout */
.CadreSimpleC
  {
    border:         1px solid;
    padding-bottom: 40px;
    padding-top:    40px;
    padding-left:   100px;
    padding-right:  100px;
  }
.CadreSimpleCP
  {
    padding-bottom:   40px;
    padding-top:      40px;
    padding-left:     100px;
    padding-right:    100px;
    background-color: var(--couleurCadreSimpleCP);
  }

.Cadre
  {
    margin: 4px;
    padding: 10px;
    border: solid 1px var(--couleurBordureCadre);
  } /* Cadre avec marging/padding */

hr.Cadre   /* Séparateur */
  {
    margin: 10px -10px 10px -10px;
    padding: 0px;
    border-top: none;
  }

hr.Ligne   /* Séparateur */
  {
    margin: 10px 0px 9px 0px;
    height: 2px;              /* évite que la bordure du bas ne recouvre celle du haut */
    border-top: solid 1px;
    border-bottom: none;
    border-left: none;
    border-right: none;
    border-color: var(--couleurBordureCadre);
  }

hr.LigneVide   /* Séparateur sans affichage */
  {
    margin-top: 10px;
    border: none;
  }

hr.LigneVerticale   /* Séparateur */
  {
    border-top: none;
    border-bottom: none;
    border-left: solid 1px;
    border-right: none;
    padding-left: 10px;
    margin-left: 10px;
    border-color: var(--couleurLigneVerticale);
  }

.LigneSepAtome {margin-top: 0px !important;}

.LigneAuBas
  {
    border-bottom: solid 1px;
    padding-bottom: 10px;
    margin-bottom: 10px;
    border-color: var(--couleurBordureCadre);
  }


/* --------------------------------------------------------------------- */
/* Margin / padding.                                                     */

/* Marge autour des acteurs de saisie */
.ActSelect, .ActTexte:not(.Label), .ActInput, .ActCheck { margin: 4px }
.PageRecherche .Table .ActTexte:not(.Label) {
  margin: 0px;
  padding-left: 10px;
  padding-top: 5px;
  padding-bottom: 5px;
  height: auto;
} /* table (ActGrid) page recherche   */
.GridPadding { padding: 4px 0px 4px 0px }   /* Padding des acteurs dans une grille */

/* Padding du input à l'intérieur des Select Custom */
.CustomSelect         { padding: 4px 2px 4px 10px }
.LargFixe.ActSelect .CustomSelect {padding-left: 6px;} /* padding du input dans liste déroulante de cherche (+margin: 4px) */
.filtreRechercheCommande .LargFixe.ActSelect .CustomSelect { margin-right: 10px; width: 228px} /* Section filtre de recherche dans page recherche */
.ActListe .Ligne.ActSection .ActTexte {padding-left: 6px;} /* padding de choix dans liste déroulante (+margin 4px) */
.ActListe .Ligne.ActSection .SelectLigneMoyenImg .ActTexte {padding-left: 2px;} /* padding de choix dans liste déroulante avec images de taille moyenne (+margin 4px) */

.ActListe .Ligne.ActSection .ActTexte > span.Scale2 /* libellé de l’item dans panel kits et items (Menu de gauche)*/
  {
    max-width: 150px;
    white-space: nowrap; /* pour avoir libellé de l’item dans meme ligne */
    overflow: hidden;
    text-overflow: ellipsis; /* ... si libellé de l’item est long */
  }

.CustomSelect > input { padding: 0px }

/* Padding du input à l'intérieur des acteurs Input */
.ActInput > input { padding: 4px 2px 4px 10px }   /* 10px: avoir la même taille d'entrée de liste déroulante*/

/* Padding du input section compact view */
.ActGrid .ActSelect .CustomSelect {padding-left: 6px;} /* padding de choix dans liste déroulante compact view */
.ActGrid .ActInput > input {padding-left: 6px;} /* padding du input compact view */
.ActGrid .ActTexte {padding-left: 6px;}

/* --------------------------------------------------------------------- */
/* Margin / padding du théme 'Expert' (compressé).                       */

/* Padding autour des acteurs de saisie */
.Expert .ActSelect, .Expert .ActTexte:not(.Label), .Expert .ActInput, .Expert .ActCheck { margin: 2px }
.Expert .GridPadding { padding: 2px 0px 2px 0px }   /* Padding des acteurs dans une grille */

/* Padding du input à l'intérieur des Select Custom */
.Expert .CustomSelect         { padding: 2px 1px 2px 1px }
.Expert .CustomSelect > input { padding: 0px }

/* Padding du input à l'intérieur des acteurs Input */
.Expert .ActInput > input { padding: 2px 1px 2px 1px }


/* --------------------------------------------------------------------- */
/* Contour.                                                              */

select, input, textarea
  {
    border-style: solid;
    border-width: 1px;
  }

h3  { margin: 3px 0px 13px 0px }

.FenetreBarre { padding-bottom:3px; margin-bottom: 2px; min-width:400px; color: var(--couleurTexteFenetreBarre); background-color: var(--couleurBarreTitreFenetre) }  /* Largeur minimale, voir notes sur propriété en cas de changement */

.ToolBar { padding: 1px 4px 1px 4px }


/* Section contenant des champs de saisie */
.Formulaire
  {
    flex-direction: column;
    padding: 5px;
    min-Width: 400px
  }

/* Section contenant une scène */
.Scene
  {
    width: 500px;
    height: 500px;
  }


/* Sections vides horizontales */

.VideH1
  {
    height: 5px;
  }

.VideH2
  {
    height: 40px;
  }

.VideH3
  {
    height: 60px;
  }


/* Sections vides verticales */

.VideV1
  {
    width: 40px;
  }

.VideV2
  {
    width: 80px;
  }

.VideV3
  {
    width: 160px;
  }

.VideV4
  {
    width: 70px;
  }

.VideV5
  {
    width: 60px;
  }


/* Section impression */
.Print
  {
    max-height: 200px;
  }

/* Texte avec un lien */
.Link, .LinkBas3px, .LinkProjet.AvecLabel, .LinkNomProd.AvecLabel
{
  cursor: pointer;
  color: var(--couleurTexteLink);
  text-decoration-line: underline;
  text-decoration-color: var(--couleurTexteLink);
  -webkit-text-decoration-line: underline;                /* Safari */
  -webkit-text-decoration-color: var(--couleurTexteLink); /* Safari */
}
.LinkBas3px {margin-bottom:3px;}
.LinkNomProd > span, .NotLinkNomProd > span { text-overflow: ellipsis; white-space: nowrap; overflow: hidden; }

.Link:hover, .LinkBas3px:hover, .LinkProjet.AvecLabel:hover, .LinkNomProd.AvecLabel:hover
{
  color: var(--couleurTexteLinkHover);
  text-decoration-color: var(--couleurTexteLinkHover);
  -webkit-text-decoration-color: var(--couleurTexteLinkHover); /* Safari */
}

/* Pointeur sur Texte */
.Pointer  { cursor: pointer; }

/* Texte en rouge */
.Red  { color: var(--couleurTexteRed); }

/* Texte en vert */
.Green  { color: var(--couleurTexteGreen); }

/* Texte en blanc */
.White  { color: var(--couleurTexteWhite); }

/* Texte en noir */
.Black  { color: var(--couleurTexteBlack); }

/* Texte en gris */
.Gray  { color: var(-couleurTexteGray); }

/* Texte en cobalt (bleu fonc�) */
.Cobalt  { color: var(--couleurTexteCobalt); }

/* Grille servant de liste */
.ActGrid          { grid-row-gap: 1px; background-color: var(--couleurGrid)  }   /* background-color: #A9A9A9 */
.ActGrid > div    { align-items: center; padding: 0px 4px 0px 4px;  min-height:1.4em;  height: max-content; /* Évite le cheveauchement des textes */  }  /* background-color: white */
.ActGrid > .Titre { font-weight: 700; position: sticky; top: 0; }
.PageRecherche .ActGrid > .Titre { height: auto;}                                /* table (ActGrid) page recherche     */
.PageRecherche .ActGrid { grid-row-gap: 0px;}                                    /* table (ActGrid) page recherche     */

/* Grille de format 'table' */
.ActGrid.Table { grid-column-gap: 0px }
.Table > div { padding: 1px 10px 1px 10px;  border: 1px solid var(--couleurBordureTable); }
.PageRecherche .Table > div {border-color: var(--couleureBordureGrillePageRecherche); border-bottom: 0px; border-left: 0px;} /* table (ActGrid) page recherche   */
.PageRecherche .Table .OddRow {background-color: var(--couleurRangeeTable);}

/* Grille avec labels au-dessus des champs textes */
.ActGrid.TopLabel > .ActSelect, .ActGrid.TopLabel > .ActTexte, .ActGrid.TopLabel > .ActInput, .ActGrid.TopLabel > .ActCheck { flex-direction: column; justify-content: center; align-items: center }
.ActGrid.TopLabel > div { min-height:4em }

/* Onglet Small */
.ActOnglet.Small > div { margin-left: 95px }

/* Select Small */
.ActSelect.Small > div { min-width:70px; width:90px; margin:0px 1px 0px 1px; }

/* Select Division */
.ActSelect.Division > div { width:110px; margin:0px 1px 0px 1px; }

/* Pour alignement en colonnes avec largeurs fixes */
.LargFixe > select   { min-width:170px; width:170px; margin:0px 10px 0px 10px }
.LargFixe > input    { min-width:160px; width:160px; margin:0px 10px 0px 10px }
.LargFixe > textarea { min-width:160px; width:160px; margin:0px 10px 0px 10px }

/* Pour alignement en colonnes avec largeurs fixes réduites */
.LargReduit > select   { min-width:80px; width:80px; margin:0px 1px 0px 1px; font-size:11px }
.LargReduit > input    { min-width:70px; width:70px; margin:0px 1px 0px 1px }
.LargReduit > textarea { min-width:70px; width:70px; margin:0px 1px 0px 1px }

/* Check réduit  */
.ActCheck.LargReduit > div { min-width:50px; width:64px; margin:0px 1px 0px 1px }

/* Bouton réduit */
.ActBouton.LargReduit > button { min-width:80px; width:80px; margin:0px 1px 0px 1px }

h1 .TitrePage        { margin-top: 10px;  margin-bottom: 13px }  /* Titres des pages */
h2 .TitreSection     { margin-top: 5px;  margin-bottom: 13px }   /* Titres des sections */
h3 .TitreSousSection { margin-top: 5px;  margin-bottom: 13px }   /* Titres des sous-sections */
span.TitreListe { margin-top: 5px }   /* Titres des listes */
.LigneAvant     { padding-Top: 12px;  border-top: solid 1px;  border-color: var(--couleurBordureLigneAvant) }   /* Ligne avant le titre */

.Corps { padding: 0px 10px 0px 10px }  /* Contenu d'une page */

.Note { min-height:80px }   /* Texte multiligne d'une note utilisateur */
.NoteQcq { min-height:180px; border: none; background-color: var(--couleurNoteQcq); }   /* Texte multiligne d'une note quelconque */

/* la zone contenant l’image de rendu 3D de l’item dans le type d’affichage («Liste avec image»)  */
.PhotoItem, .PhotoItem > img { width:300px; height:300px }
.PhotoItem:hover { filter: brightness(0.8) opacity(0.6); cursor: pointer; }

/* --------------------------------------------------------------------- */
/* Pastilles.                                                            */

.ActPastille        { align-items: center; margin:2px }
.ActPastille > div  { width: 32px; height: 24px }
.ActPastille > span { width: 64px; font-size : 12px }

.ActPastille:hover                { cursor: pointer }                    /* Highligth du choix sous le curseur */
.ActPastille.DsColorPicker:hover  { border: solid 2px var(--couleurColorPickerPastilleHover); margin:0px }  /* Highligth du choix sous le curseur, fen�tre ColorPicker */


/* --------------------------------------------------------------------- */
/* Rotations.                                                            */

.Rotate90  { transform: rotate(90deg) }
.Rotate180 { transform: rotate(180deg) }
.Rotate270 { transform: rotate(270deg) }


/* --------------------------------------------------------------------- */
/* Layout.                                                               */

.LayoutRetourPere { background-image: url("../../Client/Imgs/arrow_back-24px.svg");  width: 26px }

/* --------------------------------------------------------------------- */
/* activeChange - ContratChange                                          */
input.UserModif.ContratChange, input.ContratChange, div.CustomSelect.UserModif.ContratChange, div.CustomSelect.ContratChange, div.CustomSelect.UserModif.ContratChange > input {
  /* box-shadow: inset 0px 0px 5px 2px var(--`couleurBoxShadowContratChange); */
  border: solid 2px var(--couleurBordureContratChange);
  background-color: var(--couleurContratChange);
}

div.CustomSelect.UserModif.ContratChange > input { border: none}

/* --------------------------------------------------------------------- */
/* activeChange2 - ContratChange2                                        */
input.UserModif.ContratChange2, input.ContratChange2, div.CustomSelect.UserModif.ContratChange2, div.CustomSelect.ContratChange2, div.CustomSelect.UserModif.ContratChange2 > input {
  /* box-shadow: inset 0px 0px 5px 2px var(--`couleurBoxShadowContratChange2); */
  border: solid 2px var(--couleurBordureContratChange2);
  background-color: var(--couleurContratChange2);
}

div.CustomSelect.UserModif.ContratChange2 > input { border: none}