/* *************************************** */
/********   Commun toutes Pages    *********/
/* *************************************** */

@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@400;500;600;700&display=swap');

html, body
{ 
    margin: 0 auto; 
    font-family: 'Quicksand', sans-serif;
 }

 .spinner-wrapper
 {
    background: rgba(0, 0, 0, 0.5);
    position: fixed;
    display: none;
    top: 0%;
    left: 0%;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    z-index: 9999;
 }

 .spinner-border 
 {
    height: 15rem;
    width: 15rem;
 }

 /* Sous titre card sous map */
 .siteNameSubtitle
 {
    font-size: 20px;
 }
/* *************************************** */
/******  Commun toutes Pages  listes *******/
/* *************************************** */
h2 .listTitle
{
    text-align: center;
}

.minHeightPage
{
    min-height: 570px;
    width: auto;
    
}

#listeIcon
{
    width: 60px;
}

/* ====== */
/* header */
/* ====== */

.mainHeader
{
    color:rgb(251, 250, 248);
    background-color: black !important; 
    height: 10vh;
    display: flex;
    align-items: center; /* Centre verticalement */
    justify-content: center; /* Centre horizontalement (optionnel) */
    padding-top: 4px;
}

.headerPaleoclimate
{
    text-align: center;
    background-image: url("../images/photos/headerRoche.png");
    background-size: 100%;
    height: 10vh;
    background-repeat: no-repeat;
    display: flex;
    align-items: center; /* Centre verticalement */
    justify-content: center; /* Centre horizontalement (optionnel) */

}
.headerArcheology
{
    text-align: center;
    background-image: url("../images/photos/headerRoche.png");
    background-size: 100%;
    height: 10vh;
    background-repeat: no-repeat;
    display: flex;
    align-items: center; /* Centre verticalement */
    justify-content: center; /* Centre horizontalement (optionnel) */

}
.headerMonitoring
{
    text-align: center;
    background-image: url("../images/photos/headerRoche.png");
    background-size: 100%;
    height: 10vh;
    background-repeat: no-repeat;
    display: flex;
    align-items: center; /* Centre verticalement */
    justify-content: center; /* Centre horizontalement (optionnel) */

}

/* ====== */
/* navbar */
/* ====== */

#colorText
{
    color:rgb(218, 206, 174) !important;
}

.iconUser
{
    margin-left: 50px;
}
/* Positionnement de l'icon User - espacé des Items du menu */
.iconHome
{
    padding-right: 10px;
    margin-right: 45px;
}

/* Espacement des items de la navbar + taille police menu */
.itemmenu
{
    margin: auto;
    font-size: 25px;
}

/*  Couleur de la police de la navbar */
.navbar-brand, .nav-link, .navbar-toggler-icon, .dropdown-item
{
    color:rgb(218, 206, 174) !important;
    
}

/*  Changement de couleur de l'icon sandwich dans la navbar pour qu'il se voit  */
.navbar-toggler-icon
{
 background-color: #a4a39d;
}
.navbar-toggler
{
    background-color: rgb(218, 206, 174);
}


.dropdown-menu, .dropdown-item
{
    background-color: #2a2c2a;
    font-size: 18px;
}


/* ====== */
/* footer */
/* ====== */

.footer
{
    height: 105px;
    background-color: #212529;
    text-align: center;
    color: rgb(218, 206, 174);
   
}

.footer a
{
    text-decoration: none;
    color:rgb(218, 206, 174);   
}

.footer a i
{
    width: 30px;
    margin-bottom: 1px;
}

/* ========= */
/* Page home */
/* ========= */

.homeClass
{
    background-image: url("../images/photos/backgHome.jpg");
}

.homeText 
{
    color:black;
    font-size: x-large;
    text-indent: 2rem;
    text-align: justify;
    margin-left: auto;
    margin-right: auto;
    border-radius: 20px;
    opacity: 0.70;
    padding: 3%;
    max-width: 100%; /* Div text de Meme largeur que "mapdiv" */
    background-color:rgb(243, 242, 237);
}
.homeAccordion
{
    background-color:rgb(243, 242, 237);
}
.accordionHomeTitle
{
    font-size:25px ;
}

.accordion-button{
    text-align: center !important;
}

.homeDiv
{
    /* reglage de la largeur de la div de la map dans "home" */
    width:70%;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    border-radius: 20px;
    background-color:rgb(216, 205, 175);
}

#Archeology, .archeology, #checkbox_archeology, .underground, #underground
{
    background-color: rgb(215, 197, 147);
    margin: 2;
    padding: 2;
    font-size: 10;
    color: rgb(41, 41, 39);
    width: 135px;
}

#Paleoclimate, .paleoclimate, #checkbox_paleoclimate, .outside, #outside
{
    background-color: rgb(189, 227, 200) ;
    color: rgb(41, 41, 39);
    text-align: center;
    font-size: 10;
    width: 135px;
    padding: 3px;
}


#Monitoring, .monitoring, #checkbox_monitoring
{
    background-color: rgb(173, 213, 237);
    color: rgb(41, 41, 39);
    text-align: center;
    font-size: 10;
    width: 135px;
}

#ModernCalibration, .modernCalibration, #checkbox_modernCalibration
{
    background-color: rgb(236, 237, 173) ;
    color: rgb(41, 41, 39);
    text-align: center;
    font-size: 10;
    width: 135px;
}
#inside, .inside
{
    background-color:rgb(120, 87, 42);
    color: rgb(218, 218, 183);
    text-align: center;
    font-size: 10;
    width: 135px;
}


.btn-warning 
{
    background-color:rgb(215, 197, 147) !important;
    border-color :#8d8e50
}


span .badge 
{
    margin: 2px;
    vertical-align: top ;
}


/* Couleur du cercle i en entete de tableaux + icon download */
th a i, i.fa.fa-download::before, td a i.fa-eye
{
    margin: 4px;
    color: rgb(160, 132, 98) !important;
}

/* Force les textes très longs à un retour à la ligne  */
/*  pour les support media petits */

table.dataTable
{
    vertical-align: top;
    
}

table.datatableSites, table.datatableSites thead tr 
{
    width: 92%;  
    text-align: center;
    padding: 20px;   
}

/*  Taille de la div contenant la datatable page Home */
.outer
{
    padding: 10px 20px 5px 20px;
    
}
#datatableSites_wrapper
{
    background-color:rgb(218, 206, 174);
    border-radius: 1%;
    padding: 30px;
    margin: 10px 10px 10px 10px;
    margin: 0 auto;
    overflow: scroll;
}
.marker-cluster {
    background-color: rgba(35, 30, 30, 0.6);
    background-color: rgba(248, 235, 5, 0.6);
}

table.dataTable tbody tr.selected {
    font-size: 21px;
}

#datatableSites tbody tr 
{ 
    cursor: pointer; 
}

/* ========== */
/* Page Sites */
/* ========== */

.sitesClass
{
    background-image: url("../images/photos/backgHome.jpg");
}

.sitesDiv
{
    width: 90%;
    min-height: 20% !important;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    border-radius: 20px;
    background-color:rgb(218, 206, 174);

}
.listSites
{
    background-color:rgb(218, 206, 174);
}

.cac
{
    margin-right: 5px;
    padding-right: 7px;
}
/* Gestion de la largeur du datatable des sites page home et liste site */
#datatableSites_wrapper {
    max-width: 100%; 
    overflow: hidden; /*Pas de défilement */
 } 

 table.dataTable#datatableSites{
  table-layout: fixed; /* Colonnes avec des largeurs fixes */
    width: 100%;  /*Force l'ajustement au conteneur */
 } 

table.dataTable th input {
    width: 90%;
    box-sizing: border-box;
} 

/* ========= */
/* Page Site */
/* ========= */

.siteHeader
{
    background-color:rgb(158, 132, 101);
    font-size: 25px;
    color: rgb(15, 15, 15);
    text-align: center;
    padding: 2px;
}

/* Map sur la page "Site" */
#siteMap
{
    width: auto;
    min-height: 700px;
}
/* Card sur la page "home" */
#map
{
    margin: 0;
    margin-left: auto;
    margin-right: auto;
    height: 400px;
    width: 100%;
    border: 2px solid rgb(200, 150, 13);
    position : relative;
    display: inline-block;
}


.siteClass
{
    background-image: url("../images/photos/backgHome.jpg");
}

.siteErrorClass
{
    background-color:white;
}

/* La card à droite de la map meme hauteur que #siteMap */
.siteCard 
{
    margin-left: 3vw;
    border-radius: 15px;
    width: auto;
    background-color: antiquewhite;
    min-height: 700px;
}

#siteTitleCard 
{
    background-color: rgb(160, 132, 98);
    color: white;
    padding: 1vw;
}

/* Div contenant l'image du site */
#DivSiteImg
{text-align: center; 
    height: 450px;
    width: 100%;
}

/* L'image du site */
#siteImgCard
{
    padding-top: 10px;
    padding-right: 10px;
    padding-left: 10px;
    height: 98%;
    width: auto;  
}

.localityDescription-wrapper
{
   overflow-y: auto;
   padding: 10px; 
}

.accordion-button
{
    background-color: rgb(231, 207, 177) !important;
    color: rgb(158, 142, 106) !important;
    padding: 1vw;
}
.accordion-button:focus, .accordion-button .accordion-header
{
    background-color: antiquewhite;
    color: rgb(119, 86, 15) !important;

}

#accordion-item
{
    background-color: antiquewhite;  
}

.badgeAccordion{
    background-color: rgb(160, 132, 98);
 } 

 #divBadge
 {  
    flex-wrap: wrap;
 }

/* ============ */
/* Page Samples */
/* ============ */

.samplesClass
{
    background-image: url("../images/photos/backgHome.jpg");
}

.samplesDiv
{
    width: 90%;
    min-height: 20% !important;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    border-radius: 20px;
    background-color:rgb(218, 206, 174);
}

/* ============ */
/* Page Sample */
/* ============ */

/* css pour la page d'un sample */
.sampleClass
{
    background-color: white ;
}

.card text-dark bg-light
{
   background-color: white ;
   min-width: 50%;
   max-width: auto;
}

/* Dimensionne l'image représentative de l'échantillon */
.sampleRepresentativeImage
{
    max-height: 350px;
    min-width: 200px;
}

/*  Taille modale diaporama  photos */
.carouselSample
{
    max-width: 400px ;
    height: auto;
}
/*  Fond noir modale diaporama photos sample */
.modal-body
{
    background-color: #000;
    
}
/* CSS pour gallery photos */
#gallerybackg
{
    background-repeat: no-repeat;
    color: #000;
    overflow-x: hidden;
    border-radius: 2%;
}

.lightbox-gallery p
{
    color:#fff;
}
.lightbox-gallery h2
{
    font-weight:bold;
    margin-bottom:30px;
    padding-top:30px;
    color:#fff;
}
@media (max-width:500)
{
    .lightbox-gallery h2
    {
        margin-bottom:25px;
        padding-top:25px;
        font-size:24px;
    }
}
.lightbox-gallery .intro
{
    font-size:16px;
    max-width:700px;
    margin:0 auto 40px;
}
.lightbox-gallery .intro p
{
    margin-bottom:0;
}

.lightbox-gallery .photos
{
    padding-bottom:20px;
}

.lightbox-gallery .item
{
    padding-bottom:30px;
}

/* Dimention de la div contenant les accordéons */
#accordionSection
{
    min-height: 300px;
    border-radius: 2%;
}

/* Force l'affichage du contenu du datatable Existing Analyses en noir sinon se met en blanc sur blanc */
.dtr-data,  #monitoringSampleAccordion .dtr-title
{
    overflow-x: auto;
    color: black !important;
}
#datatableSampleAnalyses, #datatableSamplePublications
{
    overflow: auto;
}
.dt-container
{
    table-layout: fixed;
}

.accordion-button
{
   background-color: rgb(223, 213, 188) !important;
}


a i, i.fa.fa-info-circle::before
{
    margin: 4px;
    color: rgb(227, 179, 34) !important;
}

/* Gestion des couleurs des informations dans les cards page "sample" */
p span a.nav-item:hover
{
    color: rgb(235, 178, 9) !important;
}

span a.nav-item
{
    color:rgb(126, 89, 43) !important;
    font-weight: bold;
}

/* Paramètrage Couleur Bootstrap "text-primary" en marron au lieu de bleu */
span.text-primary, .infoCard
{
    color:rgb(126, 89, 43) !important;
    font-weight: bold;
}

#titleCardSample, #titleCardMoreInformation
{
    background-color: rgb(223, 213, 188) ;
}

/* *************************************** */
/****   Commun Pages intermediaires   ******/
/* *************************************** */

.textIntermediatePages
{
  color: rgb(218, 206, 174);
  font-size: 22px !important;
}

/*  background des cards */
.bkgroundIntermediatePage, .bkgrCardTextPGIntermediaire
{
  background-color: black;
  /* background-color: rgb(30, 27, 27); */
}

li .pointIntermediatePages
{
  font-style: italic;
  color: rgb(199, 151, 130 )!important;

}

.titleIntermediatePage, li.menu a.nav-link
{
  color: rgb(218, 206, 174);
}


a.nav-link.textIntermediatePages:hover 
{
  color:rgb(218, 206, 174) !important;
}

/*  Floutage de l'image paleo et monitoring*/
.blurring::before {
    content: "";
    position: absolute;
    top: -20px;
    left: -20px;
    right: -20px;
    bottom: -20px;
    background: radial-gradient(circle, rgba(153, 56, 17, 0.8) 20%, rgba(172, 97, 46, 0.1) 70%, rgba(126, 106, 92, 0) 100%);
    filter: blur(15px);
    z-index: -1;
    border-radius:40%;
}

.blurring
{
    border-image-outset: 0 ;
    background: radial-gradient(circle, rgba(215, 103, 17, 0.892) 10%, rgba(172, 89, 44, 0.1) 70%, rgba(209, 152, 53, 0) 85%); 
    border-radius:12%;
}


/* Background du body entier */
.archeologyClass, .monitoringClass, .modernCalibrationClass, .paleoclimateClass
{
    background-color: black;
    min-height: 66vh;
} 


/*  Floutage de l'image modernCalibration */
.blurringModernCalib::before {
    content: "";
    position: absolute;
    top: -20px;
    left: -20px;
    right: -20px;
    bottom: -20px;
    background: radial-gradient(ellipse, rgba(23, 23, 22, 0.978) 10%, rgba(30, 29, 29, 0.1) 60%, rgba(4, 4, 4, 0) 60%);
    filter: blur(30px);
    z-index: -1;
    border-radius:40%;
}
.blurringModernCalib
{
    border-image-outset: 0 ;
    background: radial-gradient(ellipse, rgba(46, 46, 42, 0.892) 10%, rgba(36, 35, 34, 0.1) 60%, rgba(20, 20, 20, 0) 60%); 
    border-radius:10%;
    filter: drop-shadow(5px 4px 6px rgba(170, 151, 98, 0.892)) ;
}

/* ======================= */
/* Page Monoitorings list  */
/* ======================= */

.monitoringsClass
{
    background-color: rgb(253, 250, 235);
}

.parameter
{
    color: #121111;
}

/* ======================= */
/* Page STATIONS list  */
/* ======================= */
#stationsList
{
    min-height: 600px;
    width: auto;
}

.stationsClass, .sensorsClass
{
    background-color: rgb(253, 250, 235);

}
.listTitle
{
    text-align: center;
}


/* ======================= */
/* Page STATIONS détails  */
/* ======================= */

.bkgroundColor
{
  background-color: rgb(253, 250, 235);

} 


/* couleur header cards */
.titleCardMonitoring, .titleCardStation, .titleCardSensor
{
    background-color: rgb(223, 213, 188) ;
    color: rgb(119, 86, 15) !important;
}

/*  Pour le bouton hors toile avec la map */
.canvaBtnMapMonitoring
{
  border-color: rgb(221, 190, 105) ;
  border-width: 2px;
}

/* Texte des puces parameters */ 
.textLiStation
{
    color: #40403e;
}

/*  Titres des accordéons page "STATION" */
#sensorAccordionBtn, #publicationAccordionBtn, #documentAccordionBtn
{
    font-size: 30px !important;
    color: rgb(119, 86, 15) !important;
    font-weight: 500 !important;
}

/* Centrage des titres  */
.sensorAccordionBtn, #publicationAccordionBtn, .documentAccordionBtn
{
    display: block;
}

/* Dimension de la div contenant l'image et la map */
.imageStation, .mapStation
{
    min-height: 370px;
}

/* Dimensionne l'image représentative de la station */
.stationRepresentativeImage, .stationRepresentativePlan, .prelevementDefaultImage
{

    max-height: 370px;
}

/* Dimensions parties information sous map et photo */
.stationDivInfo, .siteDivInfo
{
    display: flex;
    align-items: center;
    min-height: 300px;
}

#sensor
{
    background-color: #fff;
}


#prelevementCardHeight
{
    min-height: 400px;
}

#prelevementTitleCard
{
    /* background-color: rgb(223, 213, 188) ; */

}

#prelevementsInfoCard
{
    min-height: 1170px;
   
}

#document
{
    background-color:  rgb(248,249,250);
}