h1 {
	font-size: 1.8em;
	margin-top: 5px;
}

h2 {
	color: darkblue;
	font-size: 1.5em;
	font-weight: bold;
	margin-top: 10px;
}

h3 {
	color: crimson;
	font-size: 1.3em;
	font-weight: bold;
	margin-top: 10px;
}

h4 {
	font-size: 1.1em;
	text-decoration: underline;
}

body > div.container-fluid > nav.navbar {
  margin-left: -15px;
  margin-right: -15px;
  margin-bottom: 5px;
}

a[name="grand-secteur"] + table tbody > tr:last-child {
	font-weight: bold;
}
a[name="secteurs-agreges"] + table tbody > tr:last-child {
	font-weight: bold;
}
a[name="secteurs-agreges"] + table tbody > tr:nth-last-child(3) {
	font-weight: bold;
}
a[name="empreinte"] + table tbody > tr:nth-last-child(2) {
	font-weight: bold;
}

div.tableau-evo table > tbody > tr > td:last-child {
	text-align: right;
}

div.complements {
  margin-bottom: 1em;
}

div.complements > table td,  div.complements > table th {
  border: 1px solid #ddd;
  padding: 8px;
}

div.complements > table th {
  text-align: center;
  background-color: darkcyan;
  color: white;
}

div.complements > table tr:nth-child(even) {background-color: #f2f2f2;}
div.complements > table tr:hover {background-color: #ddd;}

div[id$="-snbc"] tbody tr:last-child > td:last-child {
  font-weight: bold;
}

div#namea-affichage-champ {display: none;}

footer {
	bottom: 5px;
	text-align: right;
  float: right;
}

footer > a:hover {
  text-decoration: none;
}

/* https://github.com/plotly/plotly.js/issues/5320 */
/*svg g.infolayer text, svg g.xtick text, svg g.ytick text {*/
svg g:is(.infolayer, .xtick, .ytick) text, text.annotation-text {
  user-select: text;
  pointer-events: auto;
  cursor: auto;
}

div.inline > div > label {
  float: left;
  margin-right: 10px;
}

div.inline div.shiny-options-group {
  float: left;
}

div.inline input.shiny-input-number {
  width: 5em;
}

div.flexible {
  width: 100%;
}

.configuration {
  position: relative;
  width: fit-content;
  height: fit-content;
  padding: 10px;
  margin-right: 10px;
  flex-shrink: 0;
}

div.ajuste {
  flex: 1;
  float: left;
  width: 100%;
}

@media only screen and (min-width: 768px) {
  footer {
  	position: fixed;
  	right: 10px;
  }
  
  div.flexible {
  	display: flex;
  }
  
  .configuration {
    max-width: 50%;
  }
  
  .largeur-300 {
    width: 300px;
  }
  
  .cache {display: none;}
  
  div.telechargement {
    display: flex;
    flex-direction: column;
  }
  
  div.telechargement > a {
    width: fit-content;
  }
  
  span.navbar-brand {display: none;}
}

@media only screen and (max-width: 767px) {
  h2 {
    font-size: 1.2em;
  }
  
  span.navbar-brand > h1 {
    font-size: 2rem;
    color: darkgreen;
	  font-weight: bold;
    margin: 0;
  }
  
  h2:not(.multiple) {
    display: none;
  }
  
  h3 {
  	font-size: 1.1em;
  }
  .affiche {display: none;}
  /*.modebar {display: none;}*/
  text.gtitle > tspan {
    /* https://css-tricks.com/snippets/css/fluid-typography/ */
    font-size: calc(10px + (15 - 10) * ((100vw - 360px) / (768 - 360)));
  }
  
  body > div.container-fluid {
    padding-left: 5px;
    padding-right: 5px;
  }
  
  /*nav.navbar {
  	float: right;
  	border: none;
  	background-color: white;
  }
  
  button.navbar-toggle {
    background-color: #f8f8f8;
  }
  
  div.navbar-collapse {
    background-color: #f8f8f8;
  }*/

}

a.ouvrir-config {
  width: fit-content;
  height: fit-content;
}

a.ouvrir-config:hover {
  color: orange;
}

.flexible a.fermer-config {
  position: absolute;
  right: -8px;
  top: -9px;
  z-index: 1000;
}

.flexible a.fermer-config:hover {
  color: orange;
}

div#temperature-donnees table.dataTable {
  width: auto;
  margin: 0;
}

div#temperature-donnees div.dataTables_paginate {
  float: left;
  text-align: left;
}

span.irs-grid-pol.small {
  display: none;
}

div.shinybusy-startup-content {
  font-size: 1.5em;
}