/* ===================================================================== */
/*                            Section.css                                */
/*   2019  Dunin Technologie Inc.                                        */
/* ===================================================================== */

/* - D FINITION -------------------------------------------------------- */
/* Affichage des sections.                                               */
/* --------------------------------------------------------------------- */

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


/* --------------------------------------------------------------------- */
/* Page de Login.                                                        */

.ActSection.CadreLogin { align-items: center }

.ActSection.Login
  {
    margin-top: 140px;
    width: 400px;
    height: fit-content;
    border: solid 1px var(--couleurBordureSectionLogin);   
    flex-direction: column;
    background-color: var(--couleurSectionLogin);
  }

.LoginSectionLogo         { height: 120px;        justify-content: center;  align-items: center }
.LoginSectionSeConnecter  { height: fit-content;  justify-content: center;  align-items: center }
.LoginSectionInput        { height: 160px;        justify-content: center;  align-items: center }
.LoginSectionConnexion    { height: 70px;         justify-content: center;  align-items: center }
.LoginSectionLangue       { height: fit-content }

.ActOnglet.Langue { padding: 10px 0px 6px 6px } /* Espaces autours du choix de langues */
.ActOnglet.Small.Langue > div { margin-left: 0px }

.ActBouton.Primaire.Login > button   { margin-top: 30px }

.LoginPage { background-image: url("../../Client/Imgs/LoginBackground.jpg"); background-size: cover }
.LoginPage2 { background-image: url("../../Client/Imgs/LoginBackground2.jpg"); background-size: cover }

.ActTexte.MessageLoginEve             { width: 100%;  margin:0px }
h5.MessageLoginEve                    { position: absolute;  left: 30px;  bottom: 80px }

.ActTexte.MessageLoginDescriptionEve  { width: 100%;  margin:0px }
span.MessageLoginDescriptionEve       { position: absolute;  left: 30px;  bottom: 60px }

.MessageLoginCookies        { position:absolute; right:30px; bottom:10px; width: 400px; text-align:right }

.LoginInput                 { flex-direction: column }

.ElementLogin {width: 270px}  /* button#login {width: 180px}*/

.LoginSectionHaut, .LoginSectionLogo, .MessageLoginSeConnecter, .LoginSectionConnexion, .LoginChoixLangue > .Boutons {margin-bottom: 10px;}
.LoginInputUser {margin-bottom: 20px;}

/* --------------------------------------------------------------------- */
/* Section Accueil.                                                      */

.AccueilPage  { flex-direction: column;  align-items: center }

.AccueilCadre  { border: solid 1px var(--couleurBordureAccueilCadre);  flex-direction: column;  margin-top: 140px;  width: 500px;  height: fit-content }

.AccueilEntete { padding: 40px 40px 20px 40px }
.TitreAccueilEnkiWeb { font-weight: 800;   font-size: 24px }

.ActSection.SectionAccueil  { height: fit-content;  flex-direction: column }
.AccueilSectionA { padding: 0px 0px 20px 0px;  border-bottom: solid 1px; min-height: fit-content; }
.AccueilCreerSection, .AccueilRechercherSection, .AccueilGererSection, .AccueilOuvrirSection { padding: 0px 40px 10px 40px }
.AccueilCreerTitre, .AccueilRechercherTitre, .AccueilGererTitre, .AccueilOuvrirTitre { font-size: 15px;  font-weight: 600 }

.AccueilSectionB { padding: 20px 40px 20px 40px }
.AccueilSectionC { padding: 20px 40px 20px 40px }
.AccueilSectionD { padding: 20px 40px 20px 40px }


.AccueilSlogan
  {
    justify-content: center;
  }

.AccueilTitreCreer      { font-weight: 600;   font-size: 17px }
.AccueilTitreRechercher { font-weight: 600;   font-size: 17px }

/* --------------------------------------------------------------------- */
/* Tool bar session.                                                     */
.ToolBarSession { height: 44px; }
.ToolBarSession .Logo {align-items: center;}

/* Message simulation (copie de document en mode simulation) */
.MsgSimulation { display: none;}

.Simulation { background-color: var(--couleurSimulation);}

.Simulation div.MsgSimulation
{
  display: block;
  position: fixed;
  top: 10%;
  left: 80%;
  transform: translateX(-50%);
  background-color: var(--couleurMsgSimulation);
  padding: 10px 20px;
  border-radius: 5px;
  margin: 10px 0;
  font-size: 16px;
  font-weight: bold;
  box-shadow: 0 2px 4px rgba(0,0,0,0.2);
  animation: pulse 2s infinite;
  width: max-content;
}

.Simulation span.MsgSimulation { display: inline-block;}

@keyframes pulse
{
  0% { opacity: 1; }
  50% { opacity: 0.7; }
  100% { opacity: 1; }
}

/* --------------------------------------------------------------------- */
/* Dims vs parent.                                                       */

.LargFlush { width: 100%; }
.HautFlush { height: 100% }


/* --------------------------------------------------------------------- */
/* On utilise les flex box partout.                                      */

div
  {
    display: flex;                    /* Le contenu est flexible         */
    min-height: 0;                    /* Patch pour scroll bar           */
    flex-shrink: 0;                   /* Ne compresse pas                */
  }


/* --------------------------------------------------------------------- */
/* Orientation du contenu.                                               */

.Right          { justify-content: flex-end }
.Left           { justify-content: flex-start }
.Centre         { justify-content: center }
.AlignStart     { align-items: start }
.Milieu         { align-items: center }
.Rangee         { flex-direction: row }
.Colonne        { flex-direction: column }
.RangeeInverse  { flex-direction: row-reverse }
.ColonneInverse { flex-direction: column-reverse }


/* --------------------------------------------------------------------- */
/* Divisions avec scrolling horizontal manuel (via des boutons).         */

.ScrollHMan
  {
    width: 300px;
    height: auto;
    overflow-x: auto;

    background-color: var(--couleurScrollHMan);
    border-color: var(--couleurBordureScrollHMan);
    border-style: solid;
  }


/* --------------------------------------------------------------------- */
/* Section objet 3D.                                                     */

.Rep3D
  {
    flex: 1;
    border: solid 1px;
    margin: 10px
  }

/* --------------------------------------------------------------------- */
/* PageRecherche                                                         */
/* Section filtre de recherche de commande dans page recherche           */
/* Rechercher des projets, des soumissions et des commandes              */
.PageRecherche {margin-bottom: 20px;}  
.filtreRechercheCommande {width: fit-content; margin: 16px 4px 18px 0px;}
.filtreRechercheCommande .LargFixe.ActInput > input {
  /* être de la même taille que .LargFixe.ActSelect .CustomSelect */ 
  width: 238px;
  margin-left: 0px;
  padding-left: 16px;
  box-sizing: border-box; /* The width and height properties (and min/max properties) includes content, padding and border */
}

.PageRecherche .Ligne {margin-top: 0px; margin-bottom: 0px;}
/* --------------------------------------------------------------------- */
/* Panels, r vision 2020-11.                                            */

.PanelEntete    { margin: 4px 4px 0px 4px; padding: 10px; border: solid 1px var(--couleurBordurePanelEntete); background-color: var(--couleurPanelEntete); }
.PanelContenu   { margin: 0px 4px 4px 4px; padding: 10px; border-bottom: solid 1px;  border-left: solid 1px;  border-right: solid 1px; border-color: var(--couleurBordurePanelContenu); background-color: var(--couleurPanelContenu); }
.ReductionContenu { height: 20%; }

/* Sections kits */
.PanelContenu > .ActListe > .Ligne  { margin-bottom: 10px }  /* Espace entre les kits */

/* Barre des kits */
.ActTitre { background-color: var(--couleurActTitre);  border-color: var(--couleurBordureActTitre) }

/* Ligne des items */
.PanelContenu .Contenu .Ligne
  {
    background-color: var(--couleurLignePanelContenu);
    border-bottom: solid 1px var(--couleurBordureLignePanelContenu); 
    border-left: solid 1px var(--couleurBordureLignePanelContenu); 
    border-right: solid 1px var(--couleurBordureLignePanelContenu);
  }
.PanelContenu .Contenu .Ligne > .ActSection { padding-left: 40px }
.PanelContenu .Contenu .Ligne.Actif  { font-weight: 700 }


/* --------------------------------------------------------------------- */
/* Fenêtre ItemConfigure.                                               */

.OngletsConfigItem { border-bottom: solid 1px var(--couleurBordureOngletsConfigItem) }
.OngletsConfigItem > .Boutons { flex-wrap: wrap; }

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

.PanelLayout .Panel.Gauche .Cadre, .PanelLayout .Panel.Droit .Cadre, .PanelLayout .Panel.Gauche .PanelEntete:first-child {border-top: none; margin-top: 0px;}
.LayoutPanelD .LigneVerticale {margin: 0px; padding: 0px;}
.LayoutPanelD.Cadre {padding: 0px;}

.TitrePanel.TitreSticky { position: sticky; top: 0; background-color: white; }

/* Fenêtre de confirmation de la suppression(ItemADefPerdu,LayoutResetForme*/
.SecImgConfirmation            {margin-right: 60px; margin-left: 20px;}
.SecImgConfirmation .ActImage  {margin-top: 14px; width: 84px; height: 84px;}
.SecMsgConfirmation            {padding-right: 40px;}
.SecMsgConfirmation > div.Msg1 {margin-top: 14px; margin-bottom: 10px;}
.SecMsgConfirmation div.Msg3   {margin-top: 10px; margin-bottom: 10px;}
.SecInfoConfirmation           {margin-top: 4px; margin-bottom: 20px; padding-right: 40px;}
.SecInfoConfirmation div.Label {width: unset; margin-right: 30px;}
.SecBtnConfirmation            {flex-wrap: wrap; margin-top: 35px; margin-bottom: 15px;}


/* --------------------------------------------------------------------- */
/* Onglet Reprise (Fenetere ItemModifie.                                 */

.OngletReprise     .ActGrid > div {justify-content: center;}
.OngletReprise     .ActGrid .ActTexte {margin: 0px !important; padding: 8px !important;}
.OngletReprise     .ActGrid > .Titre  { background-color: var(--couleurTitreTable); border-bottom: 1px solid var(--couleureBordureBasTitreGrille);}