/*
 * 
 *Les deux couleurs de la charte graphique 
 * 
 */
:root {
  --TLKDB: #3C3C3C;
  --TLKSB: #0D628F;
}
/*  
 
 */

/*
 Partie commune à toutes les pages
 */
body{ 
    margin:0;
    font-size:15px;
} 

a{
  text-decoration: none;
  color: #0D628F;
}

a:visited{
  text-decoration: none;
  color: #0D628F
}


nav .flex{
    justify-content:space-between;
}
nav .flex a:visited{
    color:whitesmoke
}
nav .flex a {
    text-decoration:none;
    color:whitesmoke
}

.description{
    justify-content:right;
}

header img {
    max-width:200px;
}

h1 {
    font-size: 28px;
    color: #3C3C3C;
    font-weight: bold;
    margin-bottom: 10px;
    border: 1px solid #ccc;
    background-color: #f5f5f5;
    padding: 8px;
  }
  
  h2 {
    font-size: 24px;
    font-weight: bold;
    color: #3C3C3C;
    margin-bottom: 8px;
    padding: 6px;
  }
  
  h3 {
    font-size: 20px;
    font-weight: bold;
    color: #3C3C3C;
    margin-bottom: 6px;
    border: 1px solid #ccc;
    background-color: #f5f5f5;
    padding: 4px;
  }


ul{
    list-style:none;
}

header ul{
    display:flex;
    justify-content: space-between;
    flex-wrap:wrap;
}

header ul a, header ul p{
    color:white;
    margin:20px;
    text-decoration:none;
    
}



header {
    background-color:var(--TLKDB);
    padding: 5px;
    font-weight: 900;
    font-size: large;
}


/*
 * 
 * 
 */

.csv label{
    color:whitesmoke;
}
.csv input{
    color:#8a7707;
}

/* Css propre à certaines pages
 * 
 * 
 * 
 */
.error{
    text-align:center;
}

#loginForm{
    text-align:center;   
    height:10%
}

#loginForm input{
    width:80%;
    text-align:center;
}

.form{
    padding-top:2%;
    padding-bottom:2%;
    background-color:var(--TLKSB);
    border:solid 1px black;
    height:50%;
    margin:2% 5% 2% 5%;
}

.loginform{
    padding-top:10%;
    padding-bottom:10%;
    background-color:var(--TLKSB);
    border:solid 1px black;
    height:50%;
    margin:2% 5% 2% 5%;
}

/*
 * 
 * Les hubs (espace tickets et admin) 
 * 
 */

.hub nav{
    background-color:whitesmoke;
}
.hub a {
    color:whitesmoke;
    border:2px black solid;
    text-decoration:none;
    padding:5px;
    background-color:var(--TLKSB);
}


 
/*
 *
 *Changer utilisateur
 *
 *
 */ 
 
.ontlkdb {
    color:whitesmoke;
}

.ontlkdb a {
    text-decoration : none;
    color:whitesmoke;
}
 

/*Générique
 * 
*/

.flex{
    display:flex;
    justify-content:space-around
}

table, tr, td ,th{
    border:1px solid #0b1a57;
    border-collapse: collapse;
}

.center {
    text-align:center;
    margin:1%;
    padding-bottom:5px;
    margin-bottom:5px
}

.center a{
    text-decoration:none;
    margin:2px;
    padding:2px;
}

.button-styling {
    text-decoration: none;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 200px; 
    height: 60px;
    font-size: 18px;
    font-weight: bold;
    color: #0D628F;
    background-color: #d1e7e5; /* Couleur de fond du bouton  anciennement DDD*/
    border-radius: 5px;
    cursor: pointer;
    margin: 2%;
  }

  .button-styling:hover {
    background-color: #decad1; /* Couleur de fond au survol du bouton anciennement CCC*/
  }
  
  .button-styling a {
      color:#0D628F;
      text-decoration:none;
      
}

  .button-styling a:visited {
      color:#0D628F
      
}
  
.inactif{
    display:none;
}

.active{
    display:block;
}

.hidden{
    visibility: hidden;
}

.recapTicket{
    
    text-align:center;
    border:solid 1px black;
    background-color:var(--TLKSB);
    color:whitesmoke;
    margin:10% 5% 10% 5%;
    padding: 10px;
}

.ticket-details {
    margin: 2%;
  }
.ticket-info {
    list-style: none;
    padding: 0;
  }
  
  .ticket-info li {
    margin-bottom: 10px;
  }
  
  .info-label {
    font-weight: bold;
  }
.container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 10px;
    justify-items: center;
    align-items: center;
    overflow: hidden;
  }
  .formtri{
    margin: 2%;
  }
  .table-styling {
    border-spacing: 5px;
    margin: 2%;
  }
  
  .table-styling tr:nth-child(even) {
    background-color: #edf2f7;
  }
  
  .table-styling td {
    padding: 10px;
    border: 1px solid black;
  }
  
  .table-styling tr td a {
      text-decoration:none;
      color:#0D628F
}

.table-styling tr td a:visited {
      text-decoration:none;
      color:#0D628F
}
  

  .box {
    width: 100%;
    height: 100%;
    display: grid;
    grid-template-rows: auto;
    padding: 20px;
  }

  .title {
    font-size: 24px;
    font-weight: bold;
    margin-bottom: 10px;
    text-align: center;
  }

  .inner-box {
    justify-content: center;
    align-items: center;
    margin-bottom: 10px;
    padding: 15px;
  }

  .label {
    font-weight: bold;
    margin-bottom: 5px;
  }

  .value {
    font-style: italic;
  }
   .value::before {
    content: "\a";
    white-space: pre;
  }

  .inner-box.day {
    background-color: #e6f7ff; /* Teinte bleutée */
  }

  .inner-box.month {
    background-color: #e6e6fa; /* Teinte violette */
  }

  .personal_info_list li {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
  }
  
  .personal_info_list li .label {
    font-weight: bold;
    width: 120px;
  }
  
  .personal_info_list li .value {
    margin-left: 10px;
    font-style: italic;
  }
  
  

.detail_link{
  text-decoration: none;
  color:#0D628F
}

.detail_link:visited{
  text-decoration: none;
  color:#0D628F
}

a button{
	color:#0d628f
}

/*
 * 
 * Permet de mettre en blanc les liens comme ceux du header par exemple
 * 
 */
.whitetxt{
  color: whitesmoke;
}
a.whitetxt:visited{
    color:whitesmoke;
}

/*
 * 
 *Les différentes couleurs de text du find ticket,  
 * 
 *redtxt est un peu spécial car on a envie de le rendre facile à distinguer parmi ses pairs
 * 
 * Les tickets qui possèdent le tag '(E)' auront normalement toujours la classe redtext 
 * 
 */
.redtxt, .redtxt button {
    font-family:serif;
    text-shadow:1px 0 whitesmoke;
    color:red;
}
  
.orangetxt, .orangetxt button{
    color:#de7a15; /*delais*/
}
.greytxt, .greytxt button{
    color:#5a151e; /*saisie*/ /*les autres mots médicaux ne donnent pas de bonnes couleurs (d1e7e5) trop claire, (d01675) trop rose, (5c0710) trop marron*/
}
.browntxt, .browntxt button{
    color:#a11e1e; /*allèle*/
    font-family:serif;
    text-shadow:1px 0 whitesmoke;
}
.greentxt, .greentxt button{
    color:#15a715  /*isatis*/ /*#17ea7e, #10da15; /*iléale, iodais*/
}
.purpletxt, .purpletxt button{
    color:#8017a1; /*boitai*/ /*stlibs (577185) marchait aussi mais étais plus scientifique que médical*/
}


/*
 * 
 * 
 * 
 */

.copy:hover{
    cursor:copy;
}  
.copy-styling{
        background-color:whitesmoke;
}