/* ===================================================================== */
/*                              Texte.css                                */
/* � 2019  Dunin Technologie Inc.                                       */
/* ===================================================================== */

/* - DÉFINITION -------------------------------------------------------- */
/* Affichage des textes.                                                 */
/* --------------------------------------------------------------------- */

/* - NOTES ------------------------------------------------------------- */
/* --------------------------------------------------------------------- */


/* --------------------------------------------------------------------- */
/* Largeurs de textes.                                                   */

.Larg1Car  { width: 1em }
.Larg2Car  { width: 2em }
.Larg3Car  { width: 3em }
.Larg4Car  { width: 4em }
.Larg5Car  { width: 5em }
.Larg6Car  { width: 6em }
.Larg7Car  { width: 7em }
.Larg8Car  { width: 8em }
.Larg9Car  { width: 9em }
.Larg10Car { width: 10em }
.Larg11Car { width: 11em }
.Larg15Car { width: 15em }
.Larg17Car { width: 17em }
.Larg20Car { width: 20em }
.Larg25Car { width: 25em }
.Larg30Car { width: 30em }

/* Agrandira la colonne s'il y a plus d'une icône dans l'affichage «Compact sans image» */
div.Larg3Car.Error, div.Larg3Car.ActInput.Error, div.Larg3Car.Error.ActSelect, div.Larg3Car.Error.ContratChange, div.Larg3Car.Error.ContratChange.ActSelect, div.Larg3Car.ContratChange.Warning, div.Larg3Car.Error.ContratChange2, div.Larg3Car.Error.ContratChange2.ActSelect, div.Larg3Car.ContratChange2.Warning, div.Larg3Car.Warning {width: fit-content;}
div.Larg4Car.Error, div.Larg4Car.ActInput.Error, div.Larg4Car.Error.ActSelect, div.Larg4Car.Error.ContratChange, div.Larg4Car.Error.ContratChange.ActSelect, div.Larg4Car.ContratChange.Warning, div.Larg4Car.Error.ContratChange2, div.Larg4Car.Error.ContratChange2.ActSelect, div.Larg4Car.ContratChange2.Warning, div.Larg4Car.Warning {width: fit-content;}
div.Larg5Car.Error, div.Larg5Car.ActInput.Error, div.Larg5Car.Error.ActSelect, div.Larg5Car.Error.ContratChange, div.Larg5Car.Error.ContratChange.ActSelect, div.Larg5Car.ContratChange.Warning, div.Larg5Car.Error.ContratChange2, div.Larg5Car.Error.ContratChange2.ActSelect, div.Larg5Car.ContratChange2.Warning, div.Larg5Car.Warning, div.Larg5Car.Cle {width: fit-content;}
div.Larg6Car.Error, div.Larg6Car.Error.Cle, div.Larg6Car.ActInput.Error, div.Larg6Car.Error.ActSelect, div.Larg6Car.Error.ContratChange, div.Larg6Car.Error.ContratChange.ActSelect, div.Larg6Car.ContratChange.Warning, div.Larg6Car.Error.ContratChange2, div.Larg6Car.Error.ContratChange2.ActSelect, div.Larg6Car.ContratChange2.Warning, div.Larg6Car.Warning, div.Larg6Car.Cle, div.Larg6Car.Warning.Cle {width: fit-content;}
div.Larg7Car.Error, div.Larg7Car.Error.Cle, div.Larg7Car.Error.ContratChange.ActSelect, div.Larg7Car.ContratChange.Warning, div.Larg7Car.Error.ContratChange2.ActSelect, div.Larg7Car.ContratChange2.Warning, div.Larg7Car.Warning, div.Larg7Car.Cle, div.Larg7Car.Warning.Cle {width: fit-content;}
div.Larg8Car.Error, div.Larg8Car.Error.Cle, div.Larg8Car.Error.ContratChange.ActSelect, div.Larg8Car.ContratChange.Warning, div.Larg8Car.Error.ContratChange2.ActSelect, div.Larg8Car.ContratChange2.Warning, div.Larg8Car.Warning, div.Larg8Car.Cle, div.Larg8Car.Warning.Cle {width: fit-content;}
div.Larg9Car.Error, div.Larg9Car.Error.Cle, div.Larg9Car.Error.ContratChange.ActSelect, div.Larg9Car.ContratChange.Warning, div.Larg9Car.Error.ContratChange2.ActSelect, div.Larg9Car.ContratChange2.Warning, div.Larg9Car.Warning, div.Larg9Car.Cle, div.Larg9Car.Warning.Cle {width: fit-content;}
div.Larg10Car.Error, div.Larg10Car.Error.Cle, div.Larg10Car.Error.ContratChange.ActSelect, div.Larg10Car.ContratChange.Warning, div.Larg10Car.Error.ContratChange2.ActSelect, div.Larg10Car.ContratChange2.Warning, div.Larg10Car.Warning, div.Larg10Car.Cle, div.Larg10Car.Warning.Cle {width: fit-content;}

/* Icône de feedback dans l'affichage «Compact sans image»: écourter le champ s'il contient un élément et une icône d'erreur ou change*/

div.Larg3Car input.Larg3Car.Error, div.Larg3Car input.Larg3Car.UserModif.ContratChange, div.Larg3Car input.Larg3Car.UserModif.Warning,
div.Larg3Car span.Larg3Car.Error, div.Larg3Car span.Larg3Car.UserModif.ContratChange, div.Larg3Car span.Larg3Car.UserModif.Warning { width: 1.2em; }
div.Larg5Car input.Larg5Car.Error, div.Larg5Car input.Larg5Car.Cle, div.Larg5Car input.Larg5Car.UserModif.ContratChange, div.Larg5Car input.Larg5Car.UserModif.Warning,
div.Larg5Car span.Larg5Car.Error, div.Larg5Car span.Larg5Car.Cle, div.Larg5Car span.Larg5Car.UserModif.ContratChange, div.Larg5Car span.Larg5Car.UserModif.Warning { width: 3em; } 
div.Larg7Car input.Larg7Car.Error, div.Larg7Car.Cle input, div.Larg7Car input.Larg7Car.ContratChange, div.Larg7Car input.Larg7Car.ContratChange2, div.Larg7Car input.Larg7Car.Warning, div.Larg7Car span.Larg7Car.Error, div.Larg7Car.Cle span, div.Larg7Car span.Larg7Car.ContratChange, div.Larg7Car span.Larg7Car.ContratChange2, div.Larg7Car span.Larg7Car.Warning { width: 5em; } 
div.Larg8Car input.Larg8Car.Error, div.Larg8Car.Cle input, div.Larg8Car input.Larg8Car.ContratChange, div.Larg8Car input.Larg8Car.ContratChange2, div.Larg8Car input.Larg8Car.Warning, div.Larg8Car span.Larg8Car.Error, div.Larg8Car.Cle span, div.Larg8Car span.Larg8Car.ContratChange, div.Larg8Car span.Larg8Car.ContratChange2, div.Larg8Car span.Larg8Car.Warning { width: 6em; }
div.Larg9Car input.Larg9Car.Error, div.Larg9Car.Cle input, div.Larg9Car input.Larg9Car.ContratChange, div.Larg9Car input.Larg9Car.ContratChange2, div.Larg9Car input.Larg9Car.Warning, div.Larg9Car span.Larg9Car.Error, div.Larg9Car.Cle span, div.Larg9Car span.Larg9Car.ContratChange, div.Larg9Car span.Larg9Car.ContratChange2, div.Larg9Car span.Larg9Car.Warning { width: 7em; }
div.Larg10Car input.Larg10Car.Error, div.Larg10Car.Cle input, div.Larg10Car input.Larg10Car.ContratChange, div.Larg10Car input.Larg10Car.ContratChange2, div.Larg10Car input.Larg10Car.Warning, div.Larg10Car span.Larg10Car.Error, div.Larg10Car.Cle span, div.Larg10Car span.Larg10Car.ContratChange, div.Larg10Car span.Larg10Car.ContratChange2, div.Larg10Car span.Larg10Car.Warning { width: 8em; }

/* Redimensionner l'input à l'intérieur de ActSelect */
div.Larg5Car.Error.CustomSelect, div.Larg5Car.ContratChange.CustomSelect, div.Larg5Car.ContratChange2.CustomSelect { width: 3em; } 

.ActListe .Ligne.ActSection .ActTexte > span#noKitItem.Larg3Car  { width: 2em}   /* Largeur de texte de noKitItem dans panel kits et items */

/* --------------------------------------------------------------------- */
/* Élimine le contour et le fond des textes non  éditable.               */

input:read-only:not(.UserModif)
  {
    border-style: none;
    background-color: transparent;
  }

/* --------------------------------------------------------------------- */
/* Label.                                                                */

div.Label
  {
    flex-grow: 0;
    width: 40%;
    flex-direction: row-reverse;
    padding-right: 20px;
    align-items: center;
    text-align: right;
  }

.ToolBarLayout .ActCheck > div.Label {flex-direction: unset;}

.Label    { color: var(--couleurLabel);  font-weight: 600;  font-size: 15px; }
.Label.Na { color: var(--couleurTexteLabelNa);  font-weight: 400 }
.Label.Courant:not(.Na) > span { font-weight: 700 }  /* Chez certains clients, les labels des champs non s�lectionn�s ne sont pas bold */

.LabelBold > div > .Label { font-weight: 700 }  /* Labels toujours bold (ex: Baultar, contenu de la commande) */

:not(.CheckContour) > .AvecLabel { width: 40%; box-sizing: border-box;}            /* �l�ment de saisie, � droite du label */

:not(.CheckContour) > .AffLarge div.Label  { width: 25% }  /* Label dans un affichage large */
:not(.CheckContour) > .AffLarge .AvecLabel { width: 65% }  /* �l�ment de saisie dans un affichage large */

.TopLabel .Label     { width: auto }
.TopLabel .AvecLabel { width: 80% }

.ActSelect.TopLabel , .ActTexte.TopLabel, .ActInput.TopLabel, .ActCheck.TopLabel { flex-direction: column; justify-content: center; align-items: center }

:not(.LabelGauche) > div.Label.ObligVide::before {  content: url("../../Client/Imgs/ObligVide.svg"); padding-left: 4px; margin-top: -7px; }
:not(.LabelGauche) > div.Label.ObligVal::before  {  content: url("../../Client/Imgs/ObligVal.svg");  padding-left: 4px; margin-top: -7px; }

.LabelGauche > .Label  { flex-direction: row; }
.LabelGauche > div.Label {text-align: left;}
.LabelGauche > div.Label.ObligVide::after { content: url("../../Client/Imgs/ObligVide.svg"); padding-left: 4px; margin-right: -4px; margin-top: -7px; }
.LabelGauche > div.Label.ObligVal::after  { content: url("../../Client/Imgs/ObligVal.svg");  padding-left: 4px; margin-right: -4px; margin-top: -7px; }

.LoginLabel .Label     { width: 200px; margin-left: -60px; }
.LoginLabel .AvecLabel { width: 200px; margin-left: -60px; }

.TelescopeHideToggle { margin-left: 25px; }

.ConserveEspaces { white-space: pre; }

/* --------------------------------------------------------------------- */
/* Section label plus large que la section valeur.                       */

.LabelLarge > .Label { width:60% }
.LabelLarge.AvecLabel { width:40% }


/* --------------------------------------------------------------------- */
/* Label dans une barre titre.                                           */

.Titre > div
  {
    flex: 1;
  }

.Titre > div > .Label
  {
    width: auto;
    flex-direction: row;
    padding-right: 6px
  }

.Titre > div > .Label::after
  {
    content: ":";
  }

/* --------------------------------------------------------------------- */
/* Message des plans de tests.                                           */

.PlansTestsMessage  { color: var(--couleurTextePlansTestsMessage); width:30em }


/* --------------------------------------------------------------------- */
/* Mode d�veloppement: affichage des noms des vues.                     */

.NomVue { color: var(--couleurTexteNomVue) ; font-size: 10px }