/* scope CSS? */
/* this CSS should be not be prefixed, but JQM does not allow
 * to access the wrapping element (<input> => <div.ui-search><input></div>)
 * yet, so we leave it here instead of creating a wrapper to access a
 * wrapper...
 * TODO: relocate once working
 */

.searchbar_wrap {
  width: 74%;
  margin: 0 auto;
}
.searchbar_wrap .ui-input-search input {
  padding-left: 0.25em;
  padding-right: 4.5em;
}
.searchbar_wrap .ui-input-search .ui-input-clear {
  right: 2em !important;
}
.searchbar_wrap .ui-filter {
  margin: 0;
}
/* Responsive CSS */
@media (max-width: 40em) {
  .searchbar_wrap {
    width: 80% /* need to fit buttons left and right */;
    min-width: 80px /* display placeholder */;
  }
}