/********************
Colors and Fonts ATMO Theme
*********************/
/*
Bleu foncé : #0056a3
Bleu Air : #2CBDEB
Rouge Energie : #E00637
Vert Climat : #B9CE00
*/
/*@import url('fonts.css');*/
:root {
  --color-dark-blue: #0056a3;
  --color-air: #2CBDEB;
  --color-energie: #E00637;
  --color-climat: #B9CE00;
  --color-link-active: #ff9000;
  --color-bg-header-table: #CDCEE9;
  --color-bg-form: #ECE8E7;
  --font-main: "Barlow",sans-serif;
}

.polluants-container {
  flex: 1;
  color: #0056a3;
  padding: 20px;
  padding-left: 0px;
}

#div-pas-temps, #div-valeur-ref, #div-dates {
  padding: 10px;
}

.btn-afficher-donnees {
  margin-left: 40%;
}

.btn-afficher-donnees:hover {
  background-color: #0056a3;
  font-weight: bolder;
  color: whitesmoke;
}

#btn-afficher-donnees-station:disabled, #btn-afficher-donnees-polluant:disabled, #btn-afficher-donnees-capteur:disabled,
#btn-telecharger-donnees-station:disabled, #btn-telecharger-donnees-polluant:disabled, #btn-telecharger-donnees-polluant-dif:disabled, #btn-telecharger-donnees-capteur:disabled {
  pointer-events: none;
  cursor: not-allowed;
  border-color: #979fa8;
  color: #979fa8;
}

#btn-afficher-donnees-station:disabled:hover, #btn-afficher-donnees-polluant:disabled:hover, #btn-afficher-donnees-capteur:disabled:hover,
#btn-telecharger-donnees-station:disabled:hover, #btn-telecharger-donnees-polluant:disabled:hover,
#btn-telecharger-donnees-polluant-dif:disabled:hover, #btn-telecharger-donnees-capteur:disabled:hover {
  background-color: initial;
  color: initial;
}

#default-polluant-option, #default-station-option {
  color: #0056a3;
  font-weight: bolder;
}

.active {
  background-color: #0056a3;
  font-weight: bolder;
  color: whitesmoke;
}

.carto {
  display: flex;
}

#form-carto {
  margin-left: 40%;
}

.typo-carto-container h6, .mesures-carto h6 {
  color: #0056a3;
}

.mesure {
  color: #0056a3;
  margin: 5px;
  width: 180px;
}

.mesure:hover {
  background-color: #0056a3;
  font-weight: bolder;
  color: whitesmoke;
}

.option-polluant:hover {
  background-color: #0056a3;
  font-weight: bolder;
  color: whitesmoke;
}

/* .commune-pollens, .commune-alerte-pollution {*/
/*  display: flex;*/
/*  table-layout: fixed;*/
/*  width: 100%; !* Assurez-vous que la table prend 100% de la largeur de son contenant *!*/
/*  justify-content: center;*/
/*  align-items: start;*/
/*}*/

/*.commune-aqi > div, .commune-pollens > div, .commune-alerte-pollution > div {*/
/*  display: table-cell;*/
/*  width: 33.33%; !* Chaque div aura une largeur égale *!*/
/*  padding: 5px;*/
/*  border-right: 1px;*/
/*  border-color: #0056a3;*/
/*}*/

.commune-aqi > div:last-child{
  border-right: none;
}

.commune-modelisation > div{
  display: table-cell;
  padding: 5px;
}
.commune-modelisation div:first-child{
  width: 150%;
}


/* Apply styles to the container */
.carto-button-container {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-bottom: 1rem;
}

/* Apply styles to each button */
.carto-button-container button {
  border: solid 1px var(--color-dark-blue);
  color: var(--color-dark-blue);
  background-color: rgba(0, 0, 0, 0);
  /* width: 100%; */
  text-align: center;
  font-family: var(--font-main);
  font-weight: bold;
  font-size: 1em;
  letter-spacing: normal;
  cursor: pointer;
  flex: 1 35%;
}
.carto-button-container ._indice_carto.indicateur-selected{
  color: white;
  background-color: #1fc1ed;
}
.indice-pollen-semaine-actu,
.indice-pollen-semaine-pro{
  font-weight: 700;
  /*color: var(--color-dark-blue) !important;*/
}
.carto-button-container button:hover {
  color: white;
  background-color: #1fc1ed;
}
.indice-pollen-semaine-actu:hover{
  text-decoration: underline;
}
.pollens-en-cours{
  margin-top: 2rem;
}
/*#fenetre-popup-pollen{*/
/*  top: 10rem;*/
/*  right: 5rem;*/
/*}*/
#popup-sous-indices-air{
  left: 13rem !important;
}
#fenetre-popup-pollen,
#popup-sous-indices-air {
  position: absolute;
  width: 300px;
  height: 420px;
  background: white;
  border: 1px solid;
  padding: 10px;
  margin: auto;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0 !important;
  z-index: 10;
  display: none;
}
.carto-button-container button._commune_carto{
  cursor: pointer
}

.aqi-demain{
  display: flex;
  table-layout: fixed;
  width: 100%; /* Assurez-vous que la table prend 100% de la largeur de son contenant */
  justify-content: space-between;
  align-items: start;
}
.indice-aqi-demain{
  font-family: var(--font-main);
}
.indice-qualité-air .line-chart{

}
.container-aqi-historique{
  margin-top: 26px;
}
.aqi-demain > span{
  color: var(--color-dark-blue);
  margin-left: 20%;
}

.aqi-historique h5, .aqi-historique h6, .line-chart h6, .gauge-chart h6, .indice-qualité-air h5, .indice-qualité-air h6,
.modelisation-qualite-air h5{
  color: var(--color-dark-blue);
}
.commune-pollens{
  display: flex;
  justify-content: space-evenly;
}
.container-info-ellergo,
.commune-pollens .line-chart,
.indice-qualité-air .line-chart
{
  width: 100%;
}

.typo-carto-legende-container {
  display: flex;
  table-layout: fixed;
  width: 100%; /* Assurez-vous que la table prend 100% de la largeur de son contenant */
  justify-content: start;
  align-items: start;
}

.typo-carto-legende-container div {
  display: table-cell;
  width: 33.33%; /* Chaque div aura une largeur égale */
  padding: 5px;
  border-right: 1px;
  border-color: #0056a3;
}

.typo-carto-legende {
  display: flex;
  table-layout: fixed;
  width: 100%; /* Assurez-vous que la table prend 100% de la largeur de son contenant */
  justify-content: start;
  align-items: start;
}

.typo-carto-legende div:first-child {
  display: table-cell;
  width: 30%; /* Chaque div aura une largeur égale */
}

.typo-carto-legende div {
  display: table-cell;
  width: 70%; /* Chaque div aura une largeur égale */
}

/*div.geotiff-carte{*/
/*  width: 300px;*/
/*  height: 300px;*/
/*}*/

/*.typo-carto-legende span {*/
/*  text-align: ;*/
/*}*/
/*.typo-carto{*/
/*  display: flex;*/
/*  flex-wrap: wrap;*/
/*  gap: 5px;*/
/*  width: 150%;*/
/*  margin-right: 0px;*/
/*}*/

/*.typo-carto div{*/
/*  width: 28%; !* 48% to leave space between buttons *!*/
/*  margin: 5px;*/
/*  font-size: 20px;*/
/*  font-style: normal;*/
/*  padding: 5px;*/
/*  color: #1fc1ed;*/
/*}*/

/*.typo-carto-legende {*/
/*  display: flex;*/
/*  flex-wrap: wrap;*/
/*  gap: 2px;*/
/*  width: 100%;*/
/*  margin-right: 0px;*/
/*}*/

/*.typo-carto-legende {*/
/*  width: 10%; !* 48% to leave space between buttons *!*/
/*  margin: 5px;*/
/*  font-size: 20px;*/
/*  font-style: normal;*/
/*  padding: 5px;*/
/*  color: #1fc1ed;*/
/*}*/

/*.typo-carto-legende div:first-child {*/
/*  width: 100px;*/
/*  height: 100px;*/
/*}*/

/*.vertical-separator{*/
/*  border-left: 2px;*/
/*  height: 100px;*/
/*}*/

/*.typo-carto-legende img, .typo-carto-legende span{*/
/*  display: inline;*/
/*}*/

/*PL*/
.aqi-historique-valeur{
  font-weight: bold;
}
.aqi-demain {
  margin-top: 1rem;
  border-top: dashed 1px;
  padding-top: 1rem;
}
.aqi-demain .indice-aqi-demain{
  padding: 5px 40px !important;
}
.indice-qualité-air h3,
.indice-pollens h3,
.alerte-pollution h3,
.alerte-pollution h3,
.modelisation-qualite-air h3{
  font-size: 1.2em;
  font-weight: bold;
}

.commune-carto-legend{
  margin-top: 1rem;
}
.container-commune-alerte-pollution,
.container-nb-episodes-depassement{
  display: flex;
  justify-content: space-evenly;
}
.container-commune-alerte-pollution .div-border,
.container-nb-episodes-depassement .div-border

{
  height: 8rem !important;
  position: relative;
  top: 0;
  left: 1rem;
}
.nb-episodes-depassement-data{
  width: 100%;
}
.nb-episodes-depassement{
  font-size: 1.9em;
  color: var(--color-air);
}
.container-nb-episodes-depassement .depassement{
  text-align: center;
  font-size: 1.3em;
}
.container-nb-episodes-depassement .depassement p {
  margin-bottom: 0;
}
.commentaire-alerte-pollution{
  padding-right: 1rem;
}

div.saisie-email{
  width:300px;
  height:300px;
  background-color:yellow;
  border:1px solid black;
}

#filtre-graphique {
  position: relative;
}
#bordure-gauche-filtre-station, #bordure-gauche-filtre-polluant {
  position: absolute;
  width: 0px;
  padding-left: 4px;
  height: 65%;
  left: 0;
  background-color: rgba(240, 240, 240, 0.5);
  /*z-index: 10;*/
  /*margin-right: -10px;*/
}
#bordure-droite-filtre-station, #bordure-droite-filtre-polluant {
  position: absolute;
  width: 0px;
  padding-left: 4px;
  height: 65%;
  right: 0;
  background-color: rgba(240, 240, 240, 0.5);
}
#curseur-gauche-filtre-station, #curseur-gauche-filtre-polluant {
  background-color: #ccc;
  position: absolute;
  right: 0;
  width: 4px;
  height: 100%;
  cursor: w-resize;
}
#curseur-droite-filtre-station, #curseur-droite-filtre-polluant {
  background-color: #ccc;
  position: absolute;
  left: 0;
  width: 4px;
  height: 100%;
  cursor: w-resize;
}


.widget-choix-na{
  background-color: #ccc;
  border:1px solid black;
  cursor: pointer;
  width: 150px;
  height: 30px;
  float: left;
  position:relative;
}

.widget-territoire{
  width: 300px;
  margin-left: 20px;
  /*border: 1px solid black;*/
}
/*.body-page input[type="text"].widget-territoire{*/
/*  border: 1px solid black;*/
/*}*/

#les-iframes{
  padding-top:20px;
}

iframe{
  margin-top: 20px
}

.indice-pollen-semaine-actu{
  cursor: help;
}
/**/
@media (max-width: 991.98px) {

  /*#fenetre-popup-pollen {*/
  /*  top: 16rem !important;*/
  /*}*/
}

/* Styles for Pollen Alert Form */
#activation-alerte-pollen {
  max-width: 800px;
  margin: 2rem auto;
  padding: 2rem;
  background-color: var(--color-bg-form);
  border-radius: 4px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

#activation-alerte-pollen h2 {
  color: var(--color-dark-blue);
  margin-bottom: 2rem;
  text-align: center;
  font-size: 1.5rem;
  font-weight: bold;
  position: relative;
  padding-bottom: 1rem;
}

#activation-alerte-pollen h2::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 50px;
  height: 3px;
  background-color: var(--color-dark-blue);
}

#alerte-pollen-status {
  margin-bottom: 2rem;
  padding: 1.5rem;
  border: 1px solid #e0e0e0;
  border-radius: 4px;
  background-color: white;
}

#alerte-pollen-status legend {
  color: var(--color-dark-blue);
  font-weight: bold;
  padding: 0 0.5rem;
  font-size: 1.1rem;
}

#alerte-pollen-status label {
  display: inline-flex;
  align-items: center;
  margin-right: 2rem;
  cursor: pointer;
  color: var(--color-dark-blue);
  font-weight: 500;
}

#alerte-pollen-status input[type="checkbox"] {
  margin-right: 0.5rem;
  width: 18px;
  height: 18px;
  cursor: pointer;
  margin-left: 10px;
}

#taxons-pollens-container,
#alerte-pollen-zone {
  margin-bottom: 2rem;
  padding: 1.5rem;
  border: 1px solid #e0e0e0;
  border-radius: 4px;
  background-color: white;
}
#alerte-pollen-status >div:first-child,
#taxons-pollens-container > div:first-child,
#alerte-pollen-zone > div:first-child {
  margin-bottom: 1.5rem;
  color: var(--color-dark-blue);
  font-weight: bold;
  font-size: 1.1rem;
}

#taxons-pollens-items,
#zone-items {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 1rem;
}

.items-taxons-container,
.items-zones-container {
  display: flex;
  align-items: center;
  padding: 0.75rem;
  background-color: white;
  border-radius: 4px;
  border: 1px solid #e0e0e0;
  transition: all 0.3s ease;
}

.items-taxons-container:hover,
.items-zones-container:hover {
  background-color: #f8f9fa;
  border-color: var(--color-dark-blue);
}

.items-taxons-container label,
.items-zones-container label {
  flex: 1;
  margin: 0;
  cursor: pointer;
  color: var(--color-dark-blue);
  font-weight: 500;
}

#submit-alerte-status {
  display: block;
  width: 200px;
  margin: 2rem auto;
  padding: 0.75rem 1.5rem;
  background-color: var(--color-dark-blue);
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.3s ease;
  font-family: var(--font-main);
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

#submit-alerte-status:hover {
  background-color: #004080;
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.info-submit-alerte {
  max-width: 800px;
  margin: 1rem auto;
  text-align: center;
  background-color: #d4edda;
  color: #155724;
  padding: 1rem;
  border-radius: 4px;
  border: 1px solid #c3e6cb;
  font-weight: 500;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  #activation-alerte-pollen {
    margin: 1rem;
    padding: 1rem;
  }

  #taxons-pollens-items,
  #zone-items {
    grid-template-columns: 1fr;
  }

  #alerte-pollen-status,
  #taxons-pollens-container,
  #alerte-pollen-zone {
    padding: 1rem;
  }
}