/* 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:after {
  left: auto;
  right: 0;
  opacity: 1;
  margin: -13px 0.3125em 0;
  top: 50%;
  border-radius: 1em 1em 1em 1em;
  height: 18px;
  padding: 0;
  width: 18px;
  webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
  border-style: solid;
  border-width: 4px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
  border-color: white /*#D5D5D5*/;
  -moz-user-select: none;
  cursor: pointer;
  border-style: solid;
  border-width: 4px;
  border-radius: 1em;
  background-position: -611px -1px;
  background-color: rgba(0, 0, 0, 0.4);
  background-image: url("../../img/jquery-mobile/icons-18-white.png");
  background-repeat: no-repeat;
}
.searchbar_wrap .ui-input-search .ui-input-clear {
  right: 2em;
}
.searchbar_wrap .ui-filter {
  margin: 0;
}
/* Responsive CSS */
@media (max-width: 40em) {
  .searchbar_wrap {
    width: 100%;
  }
}