@media (max-width:768px) {
  footer {
    display: none;
  }
}

#infos-filtres {
  display: none;
  position: absolute;
}

#infos-labels {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  margin-left: calc(100vw - var(--zone-image) - var(--gouttiere));
  /*width: calc(var(--zone-image) + var(--gouttiere));*/
  width: 100%;
}

#infos-labels .filters {
  margin: 0;
  padding: 0;
  width: 100%;
  list-style: none;
  position: absolute;
  bottom: 100%;
  left: -1px;
  background: var(--background-color);
  border: solid 1px black;
  border-bottom: none;
  transition: padding 1s;
}

.info-section {
  max-height: 9vh;
  overflow: hidden;
  padding-left: 0.8vw;
  padding-right: 0.8vw;
}

#infos-labels .titre-label {
  font-size: 1.1rem;
  margin: 0;
  font-weight: normal;
  display: inline-block;
  margin-right: 1rem;
  line-height: calc(var(--font-size-labeur) + 0.3rem);
  /*overflow: hidden;*/
  white-space: pre;
  z-index: 2;
  position: relative;
}

#interface-cycle .titre-label {
  margin-right: 1.7rem;
}

.info-selected-project {
  display: inline;
  font-size: var(--font-size-labeur);
  font-family: "GT America mono";
  overflow: hidden;
  text-overflow: ellipsis;
  margin: 0;
  vertical-align: top;
  padding: 0;
}

.info-selected-project li {
  display: inline-block;
}

.info-selected-project li::after {
  content: ", ";
  white-space: pre;
}

.info-selected-project li:last-child::after {
  content: "";
}

#infos p, #infos form {
  margin: 0;
  background-color: var(--background-color);
  border: solid black 1px;
  padding: 0.5rem;
  align-self: baseline;
  width: 100%;
  margin: 0.5vw;
  margin-top: 1vw;
}

#infos-labels .value-slider {
  display: none;
  margin: 0;
}

#infos-labels .value-slider::before {
  content: "";
  color: grey;
  position: absolute;
  left: 0.5rem;
  font-style: normal;
}

#infos-labels .range-active {
  font-family: "GT America mono";
  display: inline-block;
}

.interface-info {
  background: var(--background-color);
  width: 20%;
  border: solid 1px black;
  position: relative;
  padding: 0.5em;
  height: max-content;
}

/*interface tags*/
.interface-tags .filters label {
  display: block;
  height: 0rem;
  transition: height 1000ms;
  overflow: hidden;
  font-size: var(--font-size-labeur);
  ;
  font-family: "GT America mono";
  margin-left: calc(1rem);
}

/*
.interface-tags #label-medium label{
  transition: height 2s;
}
*/
.interface-tags .filters .label-hidden label {
  height: 0 !important;
}

.interface-tags .label-selected {
  /*display: block;*/
  /*height: 18px;
  padding: 0.2rem;*/
  font-family: "GT America mono italic" !important;
}

.interface-tags .filters {
  max-height: 45vh;
  overflow-y: scroll;
  scrollbar-width: none;
}

.interface-tags .filters::-webkit-scrollbar {
  display: none;
}

.interface-tags:hover .filters label, .interface-tags:active .filters label, .touched .filters label {
  /*display: block;*/
  height: calc(var(--font-size-labeur) * 1.5);
  /*padding-top: 0.2rem;
  padding-bottom: 0.2rem;*/
  font-size: var(--font-size-labeur);
}

#infos-labels .interface-tags:hover ol, #infos-label .interface-tags:active ol, #infos-label .touched ol {
  padding-bottom: 0.5rem;
  padding-top: 0.5rem;
}

form select {
  width: 100%;
}

/*
.filters [for="milieux-Rural"]{
  color: red;
}
*/
/* interface range */
.interface-range .nouislider {
  transition: height 500ms, margin 500ms;
  margin: 0px;
  margin-left: calc(0.5rem + 1vw);
  margin-right: calc(0.5rem + 1vw);
}

.interface-range .noUi-horizontal {
  height: 0px;
}

/*
.interface-range .noUi-horizontal{
  width: 0px;
}
*/
.interface-range li, .filters label {
  display: none;
}

.interface-range:hover .nouislider, .interface-range:active .nouislider, .touched .nouislider {
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
}

.interface-range:hover .noUi-horizontal, .interface-range:active .noUi-horizontal, .touched .noUi-horizontal {
  height: 15px;
  margin-top: 1rem;
  margin-bottom: 1.5rem;
}

.interface-range .noUi-handle {
  display: none;
}

.interface-range:hover .noUi-handle, .interface-range:active .noUi-handle, .touched .noUi-handle {
  display: block;
}

.noUi-vertical {
  width: 15px;
}

.noUi-vertical .noUi-base {
  border-left: solid 6px var(--background-color);
  border-right: solid 6px var(--background-color);
}

.noUi-pips-horizontal {
  padding: 4px 0px;
}

.interface-range .noUi-horizontal .noUi-base {
  border-top: none;
  border-bottom: none;
}

.interface-range .noUi-horizontal .noUi-base {
  border-top: solid 7px var(--background-color);
  border-bottom: solid 6.8px var(--background-color);
}

.noUi-handle {
  background: black;
  border: none;
  box-shadow: none;
  border-radius: 0px;
}

.noUi-vertical .noUi-handle {
  width: 28px;
  height: 4px;
  right: -10px;
  top: -2px;
}

.noUi-horizontal .noUi-handle {
  width: 2px;
  height: 21px;
  right: -1px;
  top: -9px;
}

.noUi-handle:before,
.noUi-handle:after {
  content: none;
}

.noUi-active {
  background-color: grey;
}

.interface-range:hover .noUi-connects, .interface-range:active .noUi-connects, .touched .noUi-connects {
  overflow: visible;
}

.noUi-connect {
  background: black;
}

.noUi-vertical .noUi-connect {
  width: 14px;
  left: -5px;
}

.noUi-horizontal .noUi-connect {
  height: 7px;
  top: -2px;
}

.noUi-target {
  background: black;
  border-radius: 0px;
  border: none;
  box-shadow: none;
}

.noUi-horizontal .noUi-touch-area {
  border: solid transparent 5px;
  margin-left: -5px;
}

.noUi-value, .noUi-tooltip {
  font-family: "GT America mono";
  font-size: 0.8rem;
}

.noUi-vertical .noUi-tooltip {
  left: 140%;
  right: auto;
}

.noUi-vertical .noUi-handle-upper {
  cursor: n-resize;
}

.noUi-vertical .noUi-handle-lower {
  cursor: s-resize;
}

.noUi-horizontal .noUi-handle-upper {
  cursor: e-resize;
}

.noUi-horizontal .noUi-handle-lower {
  cursor: w-resize;
}

.noUi-pips {
  display: none;
}

.interface-range:hover .noUi-pips, .interface-range:active .noUi-pips, .touched .noUi-pips {
  display: block;
}

.noUi-marker.noUi-marker-horizontal.noUi-marker-large {
  display: none;
}

.noUi-value.noUi-value-horizontal.noUi-value-large {
  left: 0 !important;
}

.interface-range:hover .noUi-pips, .interface-range:active .noUi-pips, .touched .noUi-pips {
  display: flex;
  width: 100%;
  justify-content: space-between;
}

.noUi-value {
  position: relative;
}

.noUi-value-horizontal {
  -webkit-transform: none;
  transform: none;
}