:root{
    --visible: hidden;
    --themeFond: ;  
    --themeTexte: ;  
    --themeTableau: ; 
    --themeTableauTexte: ; 
    --themeCalendar: ;
    --themeCalendarTexte: ;
    --themeShadow: ;
    --themeChart:#909090 ;/*#d16a0f;*/
    --themeModalFond: ;
    --themeModalTexte: ;
    --themeModalInput: ;
    --themeTriAnnee: ;
    
}

html{
    scrollbar-width: none;
}

/* theme clair */
body{

    --themeFond:#f2f2f2;/*#e2e2e2;*/
    --themeTexte: #495057;
    --themeTableau: #c8c8c8;
    --themeTableauTexte: var(--themeTexte);
    --themeCalendar: var(--themeFond);/*#d8d8d8;*/                      
    --themeCalendarTexte: var(--themeTexte);/*#495057;*/
    --themeShadow:#909090;
    --themeLabel: #154360;/*#f7be16;/*#eb984e;*//*#2471a3; #154360;#154360;*/
    --themeMenuFond: #aaaaaa;/*#216583; /*#154360;*/
    --themeChart:#495057;
    --themeModalFond: #e2e2e2;
    --themeModalTexte: #216583; /*#154360;*/
    --themeLink: var(--themeLabel); /*#e2e2e2;*/
    --themeModalInput: #d8d8d8; /* thème pour le fond des inputs (modal ou pas) */
    --themeTriAnnee: #aaaaaa; /* thème pour le fond des lignes "année" dans les datatables*/
    --themeOngletBorder: #ccc;
    --themeOngletLabel: var(--themeShadow);
    /*--selectArrowColor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='%2326749a'><polygon points='0,0 100,0 50,50'/></svg>")no-repeat;*/
    --selectArrowColor: url("../IMG/logos/caret-down.svg") no-repeat;
}

/* theme sombre */
.dark{
    --themeFond:#292b2c ; /*#3f4245;*/
    --themeTexte:#f8f9fa;
    --themeTableau:#494c4f;
    --themeTableauTexte:#d8d8d8;
    --themeCalendar: var(--themeFond);/*#3f4245;*/
    --themeCalendarTexte:#d8d8d8;
    --themeShadow: #080808;/*#1a1a1a;*/
    --themeLabel: #00afff;/*#216583;#eb984e;*/
    --themeMenuFond: #292929;/*#343a40;#eb984e;*/ 
    --themeChart:#f8f9fa;
    --themeModalFond: #212529;/*#69625e;*/
    --themeModalTexte: #eb984e;
    --themeLink: var(--themeLabel);/*#e2e2e2;*/
    --themeModalInput:#212121;
    --themeTriAnnee: var(--themeModalInput); /* thème pour le fond des lignes "année" dans les datatables*/
    --themeOngletBorder: #216583;
    --themeOngletLabel: #494c4f;
}

html, body {
    height: 100%;
    margin: 0;
    /*background: rgb(2,0,36);
    background: -moz-linear-gradient(270deg, rgba(2,0,36,1) 0%, rgba(9,9,121,1) 3%, rgba(0,153,255,1) 100%);
    background: -webkit-linear-gradient(270deg, rgba(2,0,36,1) 0%, rgba(9,9,121,1) 3%, rgba(0,153,255,1) 100%);
    background: linear-gradient(270deg, rgba(2,0,36,1) 0%, rgba(9,9,121,1) 3%, rgba(0,153,255,1) 100%); */
}

#wrapper {
    min-height: 100%; 
}

#indexContainer {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);  
    
}

#indexCard {
    border-radius: 3%;
}

#containerAffichage{
    max-width: 70%;
}
   

#lienHabilitation{
    text-decoration: none;
    color: var(--themeMenuFond);
}

label, .bi, .spanLabel {
    color: var(--themeLabel);
}

#switchPleinEcran{
    cursor: pointer;
}

.image{
    height: 80px;
    width: 80px;
    border-radius: 50% !important;
}

#menu_login, #titre_page, #showUsers, #page_principale,
 .dataTables_info, .dataTables_length, .dataTables_filter{
    background-color: var(--themeFond);
    color: var(--themeTexte);    
}

a, .nav-link{
    color: var(--themeLink); 
     
}


#menuLoginTitre {
    text-decoration: none;
    
}

.ajouterPlanning, .ajouterControle, .ajouterMateriel,
.ajouterPerio, .ajouter, .ajouterSecteur,
.ajouterUnUtilisateur, .ajouterModele {
    background-color:#0275d8;
    visibility: var(--visible);
    
}

.chevronRetard, .chevron30jours, .indicConnexion.pointer, .retardCroix, .trenteJoursCroix
{
    cursor: pointer;
}

#container_ajout_materiel, #Afficher_un_materiel{
   background-color: var(--themeFond) !important;
   color:var(--themeTexte) !important ;
}

.ListeMateriel, .listeUsers, .listeFamille, .listeModele,
.listeSecteur, .listePeriodicite, .listePlanning, .listeControles, .listeRetard,
.liste30Jours, .listePlanifies, .listeConnexions
 {    
    background-color: rgba(0, 0, 0, 0.0);
    color: #f8f9fa;
}



toto{
    background-color: rgba(255, 208, 0, 0.5);
}

.span1, .span2{
    font-size:x-large;
}

.indexBody, .modifBody, .connexionBody, .oublieBody{
    padding-bottom: 0px;    
}

.codeBarre{
    background-color: #198754;
}

#img_titre:hover{
    filter: invert(20%);
}

.modal, #container_ajout_materiel, #Afficher_un_materiel{
    color: #6c757d;
}

.modal-content{
    background-color: var(--themeModalFond);
    color: var(--themeTexte);
}

.modal-title{
    color: var(--themeModalTexte);
}


/* TABLEAU DE BORD Styles pour les indicateurs Tableau de bord ----------------------------------------  */
#indicateurRetards, #indicateur30Jours, #indicateurConnexion, #rechercherMateriel, #cardChart, #indicateurBar,
#indicateurTest, #indicateurTest2{
    background-color: var(--themeCalendar) !important;
    color: var(--themeCalendarTexte) !important;
    border: 1px solid var(--themeShadow);
    border-radius: 10px 10px 10px 10px;
   
    box-shadow: 3px 8px 31px -8px var(--themeShadow) !important;
    -webkit-box-shadow: 3px 8px 31px -8px var(--themeShadow) !important;
    -moz-box-shadow: 3px 8px 31px -8px var(--themeShadow) !important;
    
    width: 100%;
   
    
}

#indicateurRetards, #indicateurTest2, #rechercherMateriel, #indicateurConnexion, #indicateurTest, #indicateur30Jours{
    height: 135px;
}

.dessus{
    z-index: 2;
}

.dessous{
    z-index: 0;   
}


#input_chercher{
    position: relative;    
    font-size: 16;    
}
 
.autocomplete{
    position: relative;	
}

.autocomplete-items{
    z-index: 1;
    text-align: left;
    width: 255px;
    padding-top: 5px;
    padding-left: 5px;
    padding-bottom: 5px;
    overflow: scroll;
    scrollbar-width:none;
    max-height: 250px; /*175px;*/
    /*-webkit-box-shadow: var(--themeShadow) 15px 15px 5px 0px rgba(0,0,0,0.75) !important;/*#8773c1;*/
    /*box-shadow: var(--themeShadow)15px 15px 5px 0px rgba(0,0,0,0.75) !important;/*#8773c1;*/ 

    box-shadow: 3px 8px 31px -8px var(--themeShadow) !important;
    -webkit-box-shadow: 3px 8px 31px -8px var(--themeShadow) !important;
    -moz-box-shadow: 3px 8px 31px -8px var(--themeShadow) !important; 
    
}

#bouton_chercher_materiel, #bouton_chercher_materiel_onglet{
    background-color: var(--themeModalInput) !important;
    color: var(--themeModalFond) !important;
    border: none ;       
}

#input_chercherautocomplete-list{ /* vient de autocomplete.js ligne 16 */
    /*-webkit-box-shadow: var(--themeShadow) 0px 5px 15px !important;/*#8773c1;*/
    /*box-shadow: var(--themeShadow)0px 5px 15px !important;/*#8773c1;*/ 
     
    box-shadow: 3px 8px 31px -8px var(--themeShadow) !important;
    -webkit-box-shadow: 3px 8px 31px -8px var(--themeShadow) !important;
    -moz-box-shadow: 3px 8px 31px -8px var(--themeShadow) !important;
}

#bouton_efface_input{
    background-color: var(--themeLabel) !important;
    color: var(--themeModalFond) !important;
    height: 40px;
}

#bouton_chercher_materiel:hover,#bouton_chercher_materiel_onglet:hover, #bouton_efface:hover, #bouton_efface_materiel:hover{
    cursor: pointer;
    font-size:x-large;
    transition: 300ms;
}

#bouton_chercher_materiel_onglet:not(:hover), #bouton_efface_materiel:not(:hover){
    transition: 500ms;
}

#indicateurBar, #cardChart{
    z-index: 0;
    transition: 1s;    
}


/* tableau contrôles en retard/famille sur TdB  */
.trRetard, .tr30jours{
    cursor: pointer;
}

.retardCollapse, .trenteJoursCollapse{
    overflow: auto;
    margin-top: -14%;
    opacity: 100%;
    max-height: 215px;
    width: 100%;
    appearance: none;
    border-color: var(--themeCalendar) !important;
    border-radius: 0% 0% 2% 2%;
    background-color: var(--themeCalendar) !important;
    color: var(--themeCalendarTexte) !important; 
    /*-webkit-box-shadow:  0px 15px 10px 5px var(--themehadow) !important;/*#8773c1;*/
    /*        box-shadow: 0px 15px 10px 5px var(--themeShadow) !important;/*#8773c1;*/ 
    
    box-shadow: 3px 8px 31px -8px var(--themeShadow) !important;
    -webkit-box-shadow: 3px 8px 31px -8px var(--themeShadow) !important;
    -moz-box-shadow: 3px 8px 31px -8px var(--themeShadow) !important;
}


/* Fin tableau de bord  -------------------------------------------------------------------------------------*/


/* Styles pour les Datatables ----------------------------------------  */



td{
    background-color: var(--themeTableau) !important;
    color:var(--themeTableauTexte) !important; 
    font-size: 14;
    border-top: 2px solid !important; 
    border-bottom-color:var(--themeFond) !important;
    border-top-color:var(--themeFond) !important;
    height: 40px !important;  /* hauteur des lignes */
    text-align: center;
    vertical-align: middle;
    
}

.triAnnee{
    background-color: var(--themeTriAnnee) !important; 
 }

th{
    background-color: gray!important; /* couleur secondary bootstrap */
    color: var(--themeTableauTexte) !important; 
    font-size: 16;
    border-bottom-color:var(--themeFond) !important;
    border-top-color:var(--themeFond) !important;
}

tr:hover{
    color:var(--themeTexte) !important;
}

.datatables_wrapper {
    border: 1px solid var(--themeShadow);
    border-radius: 10px;
    padding: 10px;
    
    /*box-shadow: 3px 8px 31px -8px var(--themeShadow) !important;
    -webkit-box-shadow: 3px 8px 31px -8px var(--themeShadow) !important;
    -moz-box-shadow: 3px 8px 31px -8px var(--themeShadow) !important;*/
}

/*.datatables_wrapper, .container_affiche, .container_controleAjout{
    border-color: var(--themeFond) !important;
    border-top: 10px solid;
    border-bottom: 10px solid;
    -webkit-box-shadow: var(--themeShadow) 10px 10px 15px;/*#8773c1;
            box-shadow: var(--themeShadow) 10px 10px 15px;/*#8773c1;
   
}*/

.tableau-container{   
    background-color: var(--themeCalendar);
}

.repere_calendar:hover, .repere_30jours:hover, .repere_retard:hover{   
    cursor: pointer;
    color:var(--themeCalendar)!important;        
}

/* Pour la largeur des headers des tables en mode "large" */
.dataTables_scrollHeadInner{  
    width:100% !important; 
}

.dataTables_scrollHeadInner table{  
    width:100% !important; 
}

.FaireBtn_controle_cal{
    color:var(--themeLabel)!important; 
}


/* Fin des datatables  ------------------------------------------------------------------------- */

#idChercher{
    width: 190px;
    
}

#idChercher::placeholder{
    font-size: 12px;
    font-style: oblique;
}

option{
    color: var(--themeLabel);
}

.bad{
    background-color: red;
    color: white;
    padding: 4px 8px;
    text-align: center;
    border-radius: 5px;  
}


/******************* THEME POUR LES ELEMENTS DE FORMULAIRE *****************************************/
input[type=text], input[type=number], input[type=password], input[type=date], input[type=email],#dropdownMenu1, .color-select,
.color-select ul, 
 select, textarea, .form-select, .etiquette, .periosProchaines, .photoMateriel, #bouton_efface, #bouton_efface_materiel, .autocomplete-items{
    background-color: var(--themeModalInput) !important; /*var(--themeTableau) !important;*/
    color: var(--themeTableauTexte) !important;
    border: none !important;
}

#ajout_materiel_commentaire{
    height: 157px;
}

/* Couleur de la fleche du select  */
select.arrowColor{
    background: var(--selectArrowColor);
    
    background-size: 26px;
    background-position: calc(100% - 10px) /*dist. du bord */ 17px; /* hauteur */
    background-repeat: no-repeat;

}


/******************************************************************************************************/

input:focus, textarea:focus, .form-select:focus
{
    border: 1px solid !important;
    border-color: #0275d8 !important;
    
}

.photoMateriel{
    height: 160px;
}

.colonne3 #afficher_materiel_commentaire{
    height: 150px;
}

  
  /* Sidebar styling */
  .sidebar-nav{
    padding:0px;
    list-style:none; 
      transition:all 0.5s;
      width:100%;
      text-align:center;
  }
  
  .sidebar-nav li{
    line-height:40px;  
      width:100%;
      transition:all .3s;
      padding:10px;
  }
  
  .sidebar-nav li a {
    display:block;
    text-decoration:none;
    color: #ddd;
  }
  
  .sidebar-nav li:hover{
    background:#846bab;
  }

  /* Onglets */
  #container-onglet-selection{
    width: 100%;
  }

  /* Indicateur des périodicités & prochains contrôles formulaire matériel */
  .trMatPerio:hover{
    cursor: pointer;    
  }

  .tooltip-text{
    font-size: 12px;
    font-style: italic;
  }

.card{
    transition: 1s;
}

.colonne-famille-secteur, .colonne-date-mes{
    border-top: 1px solid;
    border-bottom: 1px solid;
    border-color: var(--themeOngletBorder);
}

.colonne-famille-secteur{
    border-left: 1px solid;
    border-color: var(--themeOngletBorder);
} 

.colonne-select-materiel{
    border: 1px solid;
    border-color: var(--themeOngletBorder);
}