#filter { max-width: 1000px; text-align: center; margin: 2em auto; display: flex; justify-content: center;}
#filter > div { display: flex; justify-content: space-between; font-size: 1rem; align-items: center;flex-basis: 75%;}
#filter > .filtres > * { margin: 0 .5em;}
#filter span { white-space: nowrap; display: flex; align-items: center;}
.filtres span.du, .filtres span.haut { /* background-color: var(--gris); border-radius: 100px; padding: 0.6em 0.5em 0.7em; */ font-weight: 700;}
#filter select { font-size: 1.6rem; padding: 1.5rem 1.8rem;}
#filter select#orderselect { max-width: 120px;}
#filter input { font-size: 1.6rem; padding: 1.5rem 1.8rem 1.6rem;}
#filter .actions { max-width: 400px; width: 100%; margin: auto; padding: .5em; flex-direction: row; display: flex; flex-wrap: wrap;flex-basis: 25%;flex-wrap: nowrap;}
#filter > .actions > button{ margin: 0 1%; min-width: 80px;}
#filter > .actions > button#reset { background-color: var(--color3);}
#filter > .actions > button#reset:hover { background-color: var(--color2);}
/* #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}
.filtres > * { margin: 0 1%;}


@media (max-width: 1040px) {
	
	#filter { display: flex}
	#filter .actions {display: flex; /*margin-top: 3em;*/ margin: 0 1%;}

}

@media (max-width: 700px) {

	#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: row; display: flex; }
	#filter > .actions > button { margin: .5em;}

}

/* Loading spinner */

.loadspin { height: auto; display: flex; justify-content: center; align-items: center;}
.spinner { width: auto; 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;
}
