#filter { max-width: 1024px; text-align: center; margin: 3em auto .5em; display: flex; justify-content: center;}
#filter > div { display: flex; justify-content: space-between;     font-size: 1rem;
    align-items: center;}
#filter > .filtres > * { margin: 0 .5em;}
#filter span { white-space: nowrap; display: flex; align-items: center;}
.filtres span.du, .filtres span.haut {
        background-color: var(--bleuclair);
    border-radius: 100px;
    padding: .5em .6em;
    color: var(--blanc);
    font-weight: 700;
}
#filter select, input[type="date"] { font-size: 1.6rem; padding: 1rem 1.8rem; border: 0; border-bottom: thin solid var(--bleufonce);-webkit-appearance: none; border-radius: 0; }

#filter .actions { min-width: 160px;}
#filter > .actions > button{ margin: 0 .5em;}
#filter > .actions > button#reset { background-color: var(--bleuclair2);}
#filter > .actions > button#reset:hover { background-color: var(--bleuclair);}
/* #filter input, #filter select, #filter textarea { color: #000; background-color: #fff; border: thin solid #000; padding: .7em 1em; border-radius: 3px!important; font-size: 1.5rem;} */
#filter button { padding: .7em 1em; /* border-radius: 3px!important; */ font-size: 1.4rem; min-width:49px}
#filter button:hover { text-decoration: none}
#misha_loadmore {display: block; text-align: center; margin: 3em auto}

@media (max-width: 1040px) {
	
	#filter { display: block}
	#filter .actions {display: inline-block; margin-top: 3em;}

}


@media (max-width: 900px) {

	#filter, #filter > div { flex-wrap: wrap; justify-content: center; flex-direction: column;}
	#filter .filtres { display: flex; padding: 1em; max-width: 400px; width: 100%; margin: auto;}
	#filter .filtres > * { width: 100%; margin: 1em 0;}
	#filter .filtres span { margin: 0;}
	#filter .filtres span.du, #filter .filtres span.haut {display: block; width: auto;}
	#filter .actions { max-width: 400px; width: 100%; margin: auto; padding: .5em; flex-direction: column;}
	#filter > .actions > button { margin: .5em;}

}

/* Loading spinner */

.loadspin { height: 3em; display: flex; justify-content: center; align-items: center;}
.spinner { width: 40px; text-align: center;}
.spinner > div { width: 10px; height: 10px; background-color: #6a1d18; border-radius: 100%; display: inline-block; -webkit-animation: sk-bouncedelay 1.4s infinite ease-in-out both; animation: sk-bouncedelay 1.4s infinite ease-in-out both;}
.spinner .bounce1 { -webkit-animation-delay: -0.32s; animation-delay: -0.32s;}
.spinner .bounce2 { -webkit-animation-delay: -0.16s; animation-delay: -0.16s;}
@-webkit-keyframes sk-bouncedelay {
	0%, 80%, 100% { -webkit-transform: scale(0) }
	40% { -webkit-transform: scale(1.0) }
}
@keyframes sk-bouncedelay {
	0%, 80%, 100% { -webkit-transform: scale(0); transform: scale(0); }
	40% { -webkit-transform: scale(1.0); transform: scale(1.0); }
}

/* Input Date */

date-input-polyfill {
  background: #fff;
  color: #000;
  text-shadow: none;
  border: 0;
  padding: 0;
  height: auto;
  width: auto;
  line-height: normal;
  font-family: sans-serif;
  font-size: 14px;
  position: absolute !important;
  text-align: center;
  box-shadow: 0px 3px 10px 1px rgba(0, 0, 0, 0.22);
  cursor: default;
  z-index: 1;
  border-radius: 5px;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  overflow: hidden;
  display: block;
}
date-input-polyfill[data-open="false"] {
  visibility: hidden;
  z-index: -100 !important;
  top: 0;
}
date-input-polyfill[data-open="true"] {
  visibility: visible;
}
date-input-polyfill select, date-input-polyfill table, date-input-polyfill th, date-input-polyfill td {
  background: #fff;
  color: #000;
  text-shadow: none;
  border: 0;
  padding: 0;
  height: auto;
  width: auto;
  line-height: normal;
  font-family: sans-serif;
  font-size: 14px;
  box-shadow: none;
  font-family: 'Lato', Helvetica, Arial, sans-serif;
}
date-input-polyfill select, date-input-polyfill button {
  border: 0;
  border-radius: 0;
  border-bottom: 1px solid #DADFE1;
  height: 24px;
  vertical-align: top;
  -webkit-appearance: none;
  -moz-appearance: none;
}
date-input-polyfill .monthSelect-wrapper {
  width: 55%;
  display: inline-block;
}
date-input-polyfill .yearSelect-wrapper {
  width: 25%;
  display: inline-block;
}
date-input-polyfill select {
  width: 100%;
}
date-input-polyfill select:first-of-type {
  border-right: 1px solid #DADFE1;
  border-radius: 5px 0 0 0;
  -moz-border-radius: 5px 0 0 0;
  -webkit-border-radius: 5px 0 0 0;
}
date-input-polyfill button {
  width: 20%;
  background: #DADFE1;
  border-radius: 0 5px 0 0;
  -moz-border-radius: 0 5px 0 0;
  -webkit-border-radius: 0 5px 0 0;
}
date-input-polyfill button:hover {
  background: #eee;
}
date-input-polyfill table {
  border-collapse: separate !important;
  border-radius: 0 0 5px 5px;
  -moz-border-radius: 0 0 5px 5px;
  -webkit-border-radius: 0 0 5px 5px;
  overflow: hidden;
  max-width: 280px;
  width: 280px;
}
date-input-polyfill th, date-input-polyfill td {
  width: 32px;
  padding: 4px;
  text-align: center;
  box-sizing: content-box;
}
date-input-polyfill td[data-day] {
  cursor: pointer;
}
date-input-polyfill td[data-day]:hover {
  background: #DADFE1;
}
date-input-polyfill [data-selected] {
  font-weight: bold;
  background: #D8EAF6;
}