html, body {
	overflow-x:hidden;
}

.title-chart {
	width:100%;
	text-align:center;
}


td.details-control {
    text-align: center;
    cursor: pointer;
    font-size: 1.2rem;
}
.dataTable.collapsed td.details-control {
}

td.details-control:before {
    content: '▼';
    color: #000;
}

tr.parent td.details-control:before {
    content: '▲';
}

tr.child, td.child {
	border: none !important;
    padding: 0 !important;
}

td.child table {
    margin-block-end: 0 !important;
}

table.dataTable td.details-control {
    width: 30px;
}

.dataTable {
    border-collapse: collapse; /* Évite les doublons de bordures */
}

/* Style des cellules de la DataTables */
.dataTable tbody tr.odd td {
    background-color: rgba(255, 255, 255, 0.1) !important;
}

.dataTable tbody tr.even td {
    background-color: rgba(255, 255, 255, 0.2) !important;
}

.dataTable tbody tr td.child {
    background-color: rgba(255, 255, 255, 0.1) !important;
}
.dataTable tbody tr td.child tr:hover > td {
    background-color: transparent !important;
}

.dataTable tbody tr td.column-date {
    background-color: rgba(255, 255, 255, 0.4) !important;
}

/* Style des en-têtes de colonnes */
.dataTable thead tr th {
    background-color: rgba(255, 255, 255, 0.5); 
    color: var(--e-global-color-71c0998); /* Texte blanc pour les en-têtes */
    font-size:12px;
    font-weight:900;
    border-bottom: 4px solid var(--e-global-color-98bb0ec) !important;
    height: 60px;
    vertical-align: middle;
    text-align: center;
    text-transform: uppercase;
    border-top: none;
    border-right: none;
    border-left: none;
    border-block-start:none !important;
}

/* Optionnel : Styles pour les lignes survolées */
.dataTable tbody tr:hover {
    background-color: rgba(255, 255, 255, 0.2); /* Fond légèrement transparent au survol */
/*     background-color: rgba(255, 255, 255, 0.5); */
}
.dataTable tbody td {
	text-align: center;
    vertical-align: middle;
}


/* Optionnel : Styles pour les lignes sélectionnées */
.dataTable tbody tr.selected {
    background-color: rgba(255, 255, 255, 0.3); /* Fond transparent pour la ligne sélectionnée */
}

.dataTable tbody tr {
    background-color: rgba(255, 255, 255, .1) !important;
}

table.dataTable.display tbody td {
    border-color: var(--e-global-color-71c0998) !important;
    border-color: var(--e-global-color-98bb0ec) !important;
    font-size:14px;
    color:var(--e-global-color-71c0998);
    font-weight:700;
    padding: 0px 10px;
    height:60px;
}
table.dataTable.display tbody td {
   border-width: 8px 1px;
}

td.column-meteo , td.column-vent {
    text-align: center; /* Centrer le contenu horizontalement dans la cellule */
    vertical-align: middle; /* Centrer verticalement dans la cellule */
    padding: 0px;
    width:150px;
}
td.column-date {
    width:70px;
}

.flex-container {
    display: flex;
    justify-content: center; /* Centrer horizontalement les pictogrammes */
    align-items: center; /* Centrer verticalement les pictogrammes */
    gap: 5px; /* Espacement entre les pictogrammes */
}


#suiviTab {
	margin-bottom:30px;
}

#noDataTabMessage {
	background-color: rgba(255, 255, 255, 0.1);
	padding:40px;
	text-align:center;
}

table.dataTable.no-footer {
    border-bottom: none;
}

.select-container select {
    appearance: none; /* Supprime le style par défaut du select */
    -webkit-appearance: none; /* Pour Safari */
    -moz-appearance: none; /* Pour Firefox */
    font-size: 16px; /* Taille de la police */
    border-radius: 30px;
    cursor: pointer; /* Change le curseur pour indiquer qu'il est cliquable */
    transition: background-color 0.3s, color 0.3s; /* Transition douce pour les changements */
    padding: 10px 40px 10px 30px !important;
}

.darkForm select {
    background-color: var(--e-global-color-98bb0ec); /* Fond transparent */
    color: var(--e-global-color-71c0998); /* Texte blanc */
    border: 1px solid var(--e-global-color-71c0998); /* Pas de bordure */
}

.lightForm select {
    background-color: var(--e-global-color-71c0998); /* Fond transparent */
    color: var(--e-global-color-98bb0ec); /* Texte blanc */
    border: 1px solid var(--e-global-color-98bb0ec); /* Pas de bordure */
}

/* Style pour le focus sur le select */
.darkForm select:focus {
    outline: 1px solid var(--e-global-color-71c0998);
    background-color: var(--e-global-color-98bb0ec); /* Fond légèrement plus clair au focus */
}

.lightForm select:focus {
 	outline: 1px solid var(--e-global-color-98bb0ec);
    background-color: var(--e-global-color-71c0998); /* Fond légèrement plus clair au focus */
}

/* Ajouter une flèche personnalisée */
.select-container {
    position: relative; /* Positionner relativement pour les éléments enfants */
}

.select-container::after {
    content: '▼';
    position: absolute;
    right: 15px;
    top: 50%;
    color: white;
    pointer-events: none;
    margin-top: -7px;
    font-size: 13px;
}

.darkForm .select-container::after {
    color: var(--e-global-color-71c0998); /* Couleur de la flèche */
}
.lightForm .select-container::after {
    color: var(--e-global-color-98bb0ec); /* Couleur de la flèche */
}

.select-container label {
    font-size: 16px; /* Taille de la police */
    margin-bottom: 5px; /* Espace sous le label */
    display: block; /* Permet d'avoir un saut de ligne */
    font-weight:700;
    text-transform:uppercase;
}

.darkForm label {
    color: var(--e-global-color-71c0998); /* Couleur du texte */
}

.lightForm label {
    color: var(--e-global-color-98bb0ec); /* Couleur du texte */
}

/* Optionnel : Styles pour le select dans les écrans mobiles */
@media (max-width: 768px) {
    select {
        width: 100%; /* Largeur complète sur mobile */
    }
}



#tableForm, #graphiqueEvolutionForm, #graphiqueBilanForm, #barGraphiqueDates {
	display: flex;
    flex-direction: row;
    justify-content: center;
    gap: 19px;
    align-items: center;
    padding:20px;
    flex-wrap: wrap;
}
.select-container {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
}
a.info-icon {
	cursor: pointer;
    margin-left: 5px;
    display: inline-block;
    color: #000 !important;
    border: 1px solid #000;
    height: 20px;
    width: 20px;
    border-radius: 50%;
}

#reset-zoom-poste {
	    margin: 30px auto;
    display: block;
}