/* Cabico Version 2021-12 */
/* ===================================================================== */
/*                          CouleurCustom.css                            */
/* � 2020  Dunin Technologie Inc.                                       */
/* ===================================================================== */

/* - DÉFINITION -------------------------------------------------------- */
/* Couleurs des différents éléments.                                     */
/* --------------------------------------------------------------------- */

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


:root
  {
    --couleurTexte: #000000;          /* Couleur de base des textes      */
    --couleurLabel: #000000;          /* Couleur de base des labels      */
    --couleurSelect: #779FB5;         /* Sélections                      */
    --couleurLigneSelect: #779FB5;    /* Éléments sélectionné (fond)     */
    --couleurTexteHighlightLigneActif: var(--couleurSelect);
    --couleurTexteHighlightSectionLigneActif: var(--couleurSelect);
    /*--couleurErreur: */               /* Signalement d'erreur            */
    --couleurTexteActTitre: #779FB5;
    --couleurChangement: #ebf2c2;

    --couleurTexteTitreSection: #75787B;       /*Titres des sections     */
    --couleurTexteTitreSousSection: #75787B;   /*Titres des sous-sections*/

    --couleurTitreTelescopeLigneActif: transparent;
    --couleurTexteTitreTelescopeLigneActif: var(--couleurSelect);
    --couleurTexteTitreTelescope: #3c3c3c;
    --couleurTitreTelescopePanelContenu: transparent;
    --couleurTexteContenuTitreTelescope: #3C3C3C;
    --couleurBordureContenuTitreTelescope: #C5C5C5;

    --couleurTexteLink: #3C3C3C;
    --couleurTexteLinkHover: #262626;

    --couleurToolBarSession: white;
    --couleurTexteToolBarSession: #3C3C3C;

    --couleurCadre: White;            /* Lignes sépar / cadres           */
    --couleurBordureCadre: #D7D7D7;
    --couleurBordureCadrePetitStepper: white;
    --couleurCadreSimple: var(--couleurCadre);
    --couleurLigneVerticale: #D7D7D7; /* Séparateur Verticale            */

    --couleurBarreTitreFenetre: #000000; /* Barre de titre des fenêtres  */

    --couleurPanel: white;
    --couleurBordurePanel: #D7D7D7;
    --couleurBordurePanelEntete: #D7D7D7;

    /*--couleurBorderActif: #da291c;     Bords d'acteurs actifs            */
    --couleurBorderActif: #779FB5;    /* Bords d'acteurs actifs          */
    --couleurTexteTitrePanel: #000000;/* Titres des panels               */
    --couleurBordureSelect: #DCDDDE;

    --couleurBoutonPrimaire: #3C3C3C;               /* Couleur de de fond du bouton primaire, État normal              */
    --couleurTexteBoutonPrimaire: #FFFFFF;          /* Couleur du texte dans le bouton primaire, État normal           */
    --couleurBordureBoutonPrimaire: #3C3C3C;        /* Couleur de bordure du bouton primaire - État normal             */
    --couleurBoutonPrimaireHover: #75787B;          /* Couleur de de fond du bouton primaire, État de mouse hover      */
    --couleurTexteBoutonPrimaireHover: #FFFFFF;     /* Couleur du texte dans le bouton primaire, État de mouse hover   */
    --couleurBordureBoutonPrimaireHover: #75787B;   /* Couleur de bordure du bouton primaire - État de mouse hover     */

    --couleurBoutonSecondaire: #FFFFFF;             /* Couleur de fond du bouton secondaire - État normal              */
    --couleurTexteBoutonSecondaire: #3C3C3C;        /* Couleur du texte dans le bouton secondaire - État normal        */
    --couleurBordureBoutonSecondaire: #3C3C3C;      /* Couleur de bordure du bouton secondaire - État normal           */
    --couleurBoutonSecondaireHover: #3C3C3C;        /* Couleur de fond du bouton secondaire - État de mouse hover      */
    --couleurTexteBoutonSecondaireHover: #FFFFFF;   /* Couleur du texte dans le bouton secondaire - État de mouse hover*/
    --couleurBordureBoutonSecondaireHover: #3C3C3C; /* Couleur de bordure du bouton secondaire - État de mouse hover   */

    --couleurBoutonOnglet: Transparent;
    --couleurTexteBoutonOnglet: #000000;
    --couleurBordureBoutonOnglet: #EBEBEB;          /* Couleur de bordure de la Ligne sous le bouton des onglets       */
    --couleurTexteBoutonOngletActif: #000000;
    --couleurBordureBoutonOngletActif: var(--couleurBorderActif); /* Couleur de bordure de la Ligne sous le bouton actif des onglets */

    --couleurBoutonCarrouselHover:  #779FB5;

    --couleurTexteBoutonChoix: #000000;

    --couleurBoutonDimension: #D7D7D7;
    --couleurTexteBoutonDimension: white;

    --couleurBordureSectionLogin: black;

    --couleurPanelContenu: white;
    --couleurBordurePanelContenu: #D7D7D7;
    --couleurLignePanelContenu: transparent;                     /* Ligne des items */

    --couleurBordureBasBoutonStepperGrand: white;
    --couleurBordureBasBoutonStepperGrandActif: var(--couleurBorderActif);

    --couleurBordureLigneAvant: var(--couleurCadre);
    --couleurBordureOngletsConfigItem: var(--couleurBordureCadre);

    --couleurBordureCourant: var(--couleurBorderActif);
    --couleurBoxShadowCourant: var(--couleurBorderActif);

    --couleureBordureBasTitreGrille: #D7D7D7;
    
    --couleurBordureFenetreChargeComm : #BABCBD;
    --couleurBordureProgress: var(--couleurBordureSelect);
    --couleurProgress: var(--couleurBordureProgress);
    --couleurProgressBar: #779FB5;
  }


/* --------------------------------------------------------------------- */
/* Couleur par dfaut des textes.                                        */

body, select, input, textarea, button { color: var(--couleurTexte) }


/* --------------------------------------------------------------------- */
/* Highlighted.                                                          */

/* Highligth de l'élément courant: */
.Courant:not(.Label):not(canvas) { box-shadow: 0 0 8px var(--couleurBoxShadowCourant); }

.Tile.Border.Image > button.Actif > img, .Tile.Border.Image > button.Actif > object  { border-color: var(--couleurBorderActif) }  /* Highligth de l'élément courant. */
/* 2023-10-25: Ali Apparence de l'état mouse hover sur boutons avec état selected  */
.Tile.Border.Image > button.Inactif:hover > img, .Tile.Border.Image > button.Inactif:hover > object, .ImageSeparee.ActChoix.Image.Texte > button.Inactif:hover > div
  { 
    border: solid 3px var(--couleurBorderActif);
    padding: 0px
  }

/* Sélection dans une liste / une grille: */
.ActTexte.Actif, .ActSelect.Actif, .ActInput.Actif, .ActCheck.Actif, .ActBouton.Actif, .ActGrid > .ActSection.Actif { background-color: unset; color: var(--couleurSelect) }
.Ligne.Actif > .Highlight { color: var(--couleurTexteHighlightLigneActif) }
.Ligne.Actif > .ActSection > .Highlight { color: var(--couleurTexteHighlightSectionLigneActif); }

/* --------------------------------------------------------------------- */
/* Contenu de l'onglet principal.                                        */

.ActPanel { background-color: var(--couleurPanel);  border-radius: 5px;  border-color: var(--couleurBordurePanel) }   /* Panneaux réguliers */

/* --------------------------------------------------------------------- */
/* Cadres.                                                               */

.Cadre, .CadreSimple          { border-radius: 5px } /* Cadre de base */
.Stepper.Petit.Cadre          { border-color: var(--couleurBordureCadrePetitStepper) }  /* Efface le cadre de l'onglet kit */

.PanelEntete  { border-top-left-radius: 5px;  border-top-right-radius: 5px; }
.PanelContenu { border-bottom-left-radius: 5px;  border-bottom-right-radius: 5px; }


/* --------------------------------------------------------------------- */
/* Titres.                                                               */

h2 { color: #3C3C3C }               /* Titres de section (panels ou autres) (Titre de section) */

/* --------------------------------------------------------------------- */
/* Télescopes (pannel gauche + contenu de la commande.                   */

.Ligne.Actif > .ActTelescope > .ActTitre  { font-weight: 700 }  /* Kit */
.ActTelescope .Ligne.Actif .Highlight     { color: var(--couleurSelect);  background-color: transparent;  font-weight: 700 }  /* Item */

.ActTelescope > .ActTitre { border: none;  background-color: unset; color: var(--couleurTexteTitreTelescope) }

.ActTelescope > .ActTitre .Contenu
  {
    color: var(--couleurTexteContenuTitreTelescope);
    background-color: unset;
    border-color: var(--couleurBordureContenuTitreTelescope);
  }

.Toggle.Ouvert > button
  {
	  background-image: url("../../Client/Imgs/TelescopeFlecheNoir.svg")
  }

.Toggle.Ferme > button
  {
	  background-image: url("../../Client/Imgs/TelescopeFlecheNoir.svg");
  } 

/* --------------------------------------------------------------------- */
/* Tuiles.                                                               */

.Tile.Border.Image > button > img, .Tile.Border.Image > button > object  { border: 0px }   /* Cadre autour d'une tuile */