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

/* - D�FINITION -------------------------------------------------------- */
/* Affichage des fenêtres.                                               */
/* --------------------------------------------------------------------- */

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


.ActFenetre > .Contenu
  {
    position: absolute;
    top: 30px;
    left: 30px;
    bottom: 30px;
    right: 30px;
    border: 3px solid;
    z-index: 10;                    /* Par-dessus le reste, qui a index 0 */
    background-color: var(--couleurContenuFenetre);
    border-color: var(--couleurBordureContenuFenetre);
  }

.FenetreNotifsUser    > .Contenu { z-index: 90 }
.FenetreNotifs        > .Contenu { z-index: 95 }
.FenetrePlansTests    > .Contenu { z-index: 999 }    /* Au-dessus de toutes les autres fenêtres */
.FenetreSelect        > .Contenu { z-index: 1000; border: 2px solid }
.SectionDevant                   { z-index: 50 }     /* Section devant une autre, comme dans la page de login */
.FenetreNotifInfo     > .Contenu { z-index: 12 }
.EnleveKitLayout      > .Contenu { z-index: 12 }

.ActFenetre.Content.FenetreImageEnlarge  > .Contenu { z-index: 1001 }   /* Devant le select */
.ActFenetre.Content.LayoutInfosAtome     > .Contenu { z-index: 4 }
/* Fenêtres ouvertes au-dessus d'une autre fenêtre, où le modal se situe entre deux fenêtres (zIndexModal: 99) */
.ActFenetre.Content.FenetreItemADefPerdu > .Contenu { z-index: 100 } /* .FenetreItemADefPerdu > .Contenu { z-index: 100 !important} */
.ActFenetre.Content.EnleveKitLayout      > .Contenu { z-index: 100 } /* .EnleveKitLayout  > .Contenu { z-index: 100 !important} */
.ActFenetre.Content > .Contenu
  {
    width: fit-content;
    height: fit-content;
    max-Height: 90%;
    padding-bottom: 8px;
    z-index: 10;
    top: 60px;
    left: 50%;
    bottom: auto;
    right: auto;
    transform: translate(-50%);
  }

/* Avoir scroll bar dans LayoutItemsAjFen. (2023-11-28 Ali: devrait être revisité)  */
.ActFenetre > .Contenu.ActSection {flex-shrink: 1;}
.ActFenetre .Contenu.ActSection > .Colonne.ActSection {flex-shrink: 1; overflow: auto;}

.ActMenu > .Contenu
  {
    position: absolute;
    top: 5px;
    left: 400px;
    width: 200px;
    height: 40px;
    border: 3px solid;
    background-color: var(--couleurContenuMenu);
    border-color: var(--couleurBordureContenuMenu);
  }

/* --------------------------------------------------------------------- */
/* Snackbar (alertes � l'usager).                                        */

.Snack
  {
    box-sizing: border-box;
    position: absolute;
    border: 1px solid;
    border-left: 5px solid;
    border-top-color: var(--couleurBordureHautSnack);
    border-right-color: var(--couleurBordureDroiteSnack);
    border-bottom-color: var(--couleurBordureBasSnack);
    width:  380px; /*   fit-content;*/
    height: fit-content; /*  60px;*/
    padding: 24px 14px 24px 14px;
    z-index: 999;                      /* Par-dessus les fen�tres         */
    align-items: center;
    justify-content: center;
    font-family: 'Open Sans', 'Arial';    font-size: 14px;
    background-color: var(--couleurSnack);

    -webkit-animation: apparait 1s linear; /* Safari */
    animation: apparait 1s linear;
  }

.Snack > button
  {
    background-color: var(--couleurBoutonSnack);
    padding-right: 0px; /* por avoir un padding-right de 14px de snackbar */
    border: none;
  }

.Snacksuccess { border-left-color: var(--couleurBordureGaucheSnacksucces); }
.Snackerror   { border-left-color: var(--couleurBordureGaucheSnackerror); }
.Snackwarning { border-left-color: var(--couleurBordureGaucheSnackwarning); }
.Snackinfo    { border-left-color: var(--couleurBordureGaucheSnackinfo); }

.Snack.Snacksuccess > span { color: var(--couleurTexteSnacksucces); }
.Snack.Snackerror > span { color: var(--couleurTexteSnackerror); }
.Snack.Snackwarning > span {color: var(--couleurTexteSnackwarning);}
.Snack.Snackinfo > span {color: var(--couleurTexteSnackinfo); }

.Snack.Snackerror > span, .Snack.Snacksuccess > span, .Snack.Snackwarning > span, .Snack.Snackinfo > span
  { 
    flex: 1;
    vertical-align: middle;
    text-align: left; 
    font-size: 14px;
  }

.Snack.Snackerror > span::before { content: url("../Imgs/StErr.svg"); }
.Snack.Snacksuccess > span::before { content: url("../Imgs/StSucces.svg"); }
.Snack.Snackwarning > span::before {content: url("../Imgs/StAvert.svg")}
.Snack.Snackinfo > span::before {content: url("../Imgs/Info.svg")}

.Snack.Snackerror > span::before, .Snack.Snacksuccess > span::before,
.Snack.Snackwarning > span::before, .Snack.Snackinfo > span::before
  {
    padding-right: 29px;
    height: 24px;
    width: 24px;
    float: left;
    vertical-align: middle;
  }

/* Safari */
@-webkit-keyframes apparait
  {
    0% { -webkit-transform: translate(-400px)  }
    100% { -webkit-transform: translate(0px) }
  }

@keyframes apparait
  {
    0% { transform: translate(-400px) }
    100% { transform: translate(0px) }
  }


/* --------------------------------------------------------------------- */
/* Animation d'attente.                                                  */

.loader
  {
    position: fixed;
    top:-100%; right:-100%; left:-100%; bottom:-100%;
    margin:auto;
    z-index:1000;

    border: 16px solid var(--couleurBordureLoader);
    border-radius: 50%;
    border-top: 16px solid var(--couleurBordureHautLoader);
    width: 90px;
    height: 90px;
    -webkit-animation: spin 1.5s linear infinite; /* Safari */
    animation: spin 1.5s linear infinite;
  }

/* Safari */
@-webkit-keyframes spin
  {
    0% { -webkit-transform: rotate(0deg)  }
    100% { -webkit-transform: rotate(360deg) }
  }

@keyframes spin
  {
    0% { transform: rotate(0deg) }
    100% { transform: rotate(360deg) }
  }


/* --------------------------------------------------------------------- */
/* 'Div' modal qui obscurcit l'affichage et bloque les saisies.          */

.Modal
  { 
    z-index: 1;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: var(--couleurModal);
  }

/* FenetreSelect                                      */
.FenetreSelect .ActInput > input {
  background-image: url(../../Client/Imgs/loupe-20px-selectInput.svg);
  background-repeat: no-repeat;
  background-position-y: center;
  background-position-x: 6px;
}

/* --------------------------------------------------------------------- */
/* FenetreChargeComm  (barre de progression)                             */
.FenetreChargeCommSize > .Contenu {
  width: 480px;
  height: fit-content;
  border: 2px solid var(--couleurBordureFenetreChargeComm);
  padding: 25px;
  right: 50%;
  left: 50%;
  top: 25%;
  transform: translate(-50%, -50%);
  box-sizing: border-box;
}
.ActFenetre.FenetreChargeCommSize > .Contenu.ActSection > .Colonne.ActSection {overflow: hidden;}
.FenetreChargeComm div:first-child {margin-bottom: 30px;}
.FenetreChargeComm .Label {width: auto; text-align: left; flex-direction: row;}

#divProgress {
  width: 100%;
  background-color: var(--couleurProgress);
  height: 34px;
  margin-top: 30px;
  margin-bottom: 20px;
  /* border: 1px solid var(--couleurBordureProgress); */
}

.divBar {
  width: 1%;
  height: 34px;
  background-color: var(--couleurProgressBar);
}

.divBar.divBarFin {width: 100%;}

/* FenetrePlansTests                                      */
.FenetrePlansTestsEdit .CadreSimple {margin-bottom: 0px;}
.FenetrePlansTestsEdit .Ligne {margin-top: 0px;}

/* --------------------------------------------------------------------- */
/* FenetreNotifInfo: notifications de type Info                        .TitreFenetreBarre  */
.FenetreNotifInfo .FenetreBarre button    { justify-content: center; }
.FenetreNotifInfo .ActImage               { width: 40px; height: 40px; margin-top: 70px; margin-right: 20px; margin-left: 20px; }
.FenetreNotifInfo .Scale2.ActSection      { max-width: 455px; }
.FenetreNotifInfo .Scale2.ActSection .ActTexte:first-child  { margin-top: 25px; margin-bottom: 25px; }   /* $nomNotif */
.FenetreNotifInfo .Scale2.ActSection .ActTexte:nth-child(2) { margin-right: 25px; margin-bottom: 35px; } /* $msgTrad  */
.FenetreNotifInfo .ActBouton.Secondaire > button            { margin-left: 0px; }

/* --------------------------------------------------------------------- */
/* FenetreImageEnlarge                                                   */
.ActFenetre.FenetreImageEnlarge > .Contenu {width: 500px; height: 500px; }
.ActFenetre.FenetreImageEnlarge .Contenu.ActSection > .Colonne.ActSection { overflow: hidden !important; }
div.imgMagnifierContainer    { margin: 40px; }
button.imgMagnifierContainer { position:relative; border: none; padding: 0px; width: 100%; }
button.imgMagnifierContainer > img { width: 100%; }
.imgMagnifierGlass 
  {
    position: absolute;
    border: 1px solid var(--couleurBordureCercleMagnifierGlass);
    border-radius: 50%;
    cursor: none;
    /*Set the size of the magnifier glass:*/
    width:  140px;
    height: 140px;
  }

/* --------------------------------------------------------------------- */
/* Onglet BOM de la fenêtre FenetreItemModifie (ItemPersonnalise).       */
.SecBOMEdit .BoutonAjout {margin-bottom: 4px;}