/*
** vert clair #3FD83D
** vert fonce #016630
** vert pale fond de cas #F3FFF3
** gris clair : #DDE0DF
** gris fonce #666666
** bordure de case #COCOCO
** ombrager :  box-shadow: 0 0 10px rgba(0,0,0,0.1);
**
*/

body {
    font-family: "trebuchet ms",sans-serif;        /* police des textes */
    font-size: 12px;                               /* taille des textes */
    background-color: #DDE0DF;                        /* Font des pages */
    margin: 0;                                   /* 0 marge sur le cote */
    padding: 0;                                  /* 0 padding sur le cote */
}

h1,h2,h3,h4 {                                      /* tous les h centres en vert fonce */
    text-align: center;
    color: #016630;
}

h1 {                                               /* h1 taille 21 avec 20 de marge */
    font-size: 21px;
    margin-top: 20px;
}

h2 {                                               /* h2 taille 19 avec 16 de marge */
    font-size: 18px;
    margin-top: 16px;
}

form {                                             /* formulaires 80% de la largeur, 0 marge, 0 padding */
    max-width: 80%;
    margin: 0 auto;
    padding: 0;
}

/*
** l'encart specifique de la page de connexion / gestion des utilisateurs
*/
.connection {                                       /* formulaire de connexion et de gestion des utilisateur 300 px de large */
    max-width: 300px;
}

input, textarea, select {
    padding: 2px;
    border-radius: 5px;
    box-shadow: 1px 1px 1px 2px #DDE0DF inset;
}

input, textarea, select, option {
    float: left;
    background-color: #F3FFF3;
}

form input[type="text"],
form input[type="email"],
form input[type="password"],
form input[type="date"],
form input[type="number"],
form textarea,
form select {
    width: 100%;
    margin: 0;
    border: 1px solid #666;
    border-radius: 4px;
}

form button {
    background-color: #016630;
    color: white;
    padding: 5px 10px;
    border: 0;
    border-radius: 50px;
    cursor: pointer;
}

form button.btnlien {                                /* Bouton qui ressemblent au lien : couleur comme le body, souligne */
    padding: 0;
    border-radius: 0;

/* inutile ?    box-shadow: 0px 0px 0px 0px #FF0000 inset; */
    color: #016630;
    background-color: #DDE0DF;
    text-decoration: underline;
}

/*
** Table pour le tableau de centralisation d'essai uniquement
*/
table {
    width: 90%;
    margin: 20px auto;
    border-collapse: collapse;
    box-shadow: 0 0 5px rgb(0 0 0 / 10%);
}

th, td {                                            /* toutes les cases des tableaux : bord gris, texte centre sans padding */
    border: 1px solid #DDE0DF;                      /* couleur des lignes des tableaux a utiliser si bg en blanc */
    border: 1px solid #ffff;                      /* couleur des lignes des tableaux a utiliser si bg en gris */
    padding: 0;
    text-align: center;
}

th {                                                /* premiere ligne des tableaux : background vert texte gris souris transformee en main */
    background-color: #016630;
    color: #DDE0DF;
    cursor: pointer;
}

tr:nth-child(even) {                                 /* une ligne sur deux dans le tableau est coloree en vert l autre herite du gris */
    background-color: #F3FFF3;
}

form button.btnlientable {
    padding: 0;
    color: #016630;
    background-color: transparent;
    border-radius: 0; 
    text-decoration: none;
}

a {                                                  /* lien en vert, centre, avec 10px de marge */
    display: inline-block;
    margin: 10px auto;
    text-align: center;
    color: #016630;
    text-decoration: none;
}

fieldset {
 width : 100%;
 padding: 0 20px 10px 10px;
 margin-bottom: 10px;
 border: 1px solid #016630;
}

.myfieldset {
 width : 100%;
}

.myfieldset fieldset {
    width : 45%;
}

.myfieldset fieldset.gauche {
    float : left;
}

.myfieldset fieldset.droit {
    float : right;
}

.myfieldsetbas {
 width : 100%;
 padding: 0;
}

.myfieldsetbas fieldset {
    width : 97%;
}

legend {
 color:#016630;
 font-weight:bold
 }

.icon {
 position: relative;
 width: 20px;
 height: 20px;
 border: 0;
 top: 0;
 right: 0;
}

label {
 float: left;
 display: block;
 }

label.inline {
 display: inline;
 margin-right: 50px;
}

input:read-only,
textarea:read-only {
  background-color: #DDE0DF;
}

a, a:visited, a:active
{
 color: #3FD83DFF;
 text-decoration: none;

}

a:hover
{
 text-decoration: underline;

}

.dataTables_filter label {
    display: inline-flex;
    align-items: center;
}

#essais-table thead input {
    padding: 20px;
    border: 1px solid #666;
    border-radius: 5px;
}

.image-clignote  {                             /* permet de faire clignoter class="image-clignote" */
   animation-duration: .8s;
   animation-name: clignoter;
   animation-iteration-count: infinite;
   animation-iteration-count: 5;
   transition: none;
}

@keyframes clignoter {
  0%   { opacity:1; }
  40%   {opacity:0; }
  100% { opacity:1; }
}

.drag-and-drop {
   border:2px dashed #888;
   background:#F3FFF3;
   padding:10px;
   text-align:center;
   border-radius:8px;
   cursor:pointer;
   margin: 15px 0;
   display: inline-block;
   width: 97%;
   clear: both;
}

/* Conteneur général */
.imagesupprimer {
    position: relative;
    display: inline-block;
    margin: 10px;
    text-align: center;
    cursor: pointer;
    vertical-align: top;
    transition: opacity 0.3s ease;
}

.imagesupprimer.hidden {
    opacity: 0;
}

.imagesupprimer img.image-fichier {
    max-width: 300px;
    max-height: 300px;
    width: auto;
    height: auto;
    display: block;
}

.imagesupprimertexte {
    position: absolute;
    bottom: 10px;
    left: 0;
    width: 100%;
    text-align: center;
    font-weight: bold;
    background: rgba(0, 0, 0, 0.6);
    color: white;
    padding: 5px 0;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.imagesupprimer:hover .imagesupprimertexte {
    opacity: 1;
}

.imagesupprimer.fichier {
    width: 120px;
}

.imagesupprimer.fichier img.icone {
    width: 64px;
    display: block;
    margin: 0 auto 5px auto;
}

.imagesupprimer.fichier .nom-fichier {
    margin-top: 5px;
    font-size: 14px;
    word-wrap: break-word;
}

.imagesupprimer.fichier img.corbeille {
    width: 24px;
    margin-top: 5px;
}

/* passage au dessus d une image */
.imagesupprimertexte {
    position: absolute;
    inset: 0;
    background: rgb(0 0 0 / 60%);
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    transition: 0.3s;
}

.imagesupprimer:hover .imagesupprimertexte {
    opacity: 1;
}

/* Carte : affichage satelite ou normal */
.leaflet-control.custom-control {
    background: white;
    padding: 6px 10px;
    cursor: pointer;
    border-radius: 4px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.3);
    font-size: 14px;
}