input::-webkit-search-decoration,
input::-webkit-search-cancel-button
{
  display: none;
}

input[type=search]
{
  background: #ededed url(/images/search-loc-rtl.png) no-repeat 12px center;
  padding: 9px 10px 9px 32px;
  background-size: 20px;
  -webkit-border-radius: 10em !important;
  -moz-border-radius: 10em !important;
  border-radius: 10em !important;
  -webkit-transition: all .5s !important;
  -moz-transition: all .5s !important;
  transition: all .5s !important;
}

 

input:-moz-placeholder
{
  color: #999;
}

input::-webkit-input-placeholder
{
  color: #999;
}

#weather-location input[type=search]
{
  text-align: right;
  direction: rtl;
  width: 42px;
  border: 0;
  line-height: 42px;
  height: 42px;
  color: transparent;
  cursor: pointer;
  margin: 0 2px 0px 8px;
}
/*
#weather-location input[type=search]:hover
{
  -webkit-box-shadow: 0 3px 3px 0 rgba(0,0,0,0.14), 0 1px 7px 0 rgba(0,0,0,0.12), 0 3px 1px -1px rgba(0,0,0,0.2);
  box-shadow: 0 3px 3px 0 rgba(0,0,0,0.14), 0 1px 7px 0 rgba(0,0,0,0.12), 0 3px 1px -1px rgba(0,0,0,0.2);
}
*/
#weather-location input[type=search]:focus
{
  width: 165px;
  padding-left: 32px;
  color: #000;
  background-color: #fff;
  cursor: auto;
  padding-right: 15px;
  /*border: 1px solid #66CC75!important;*/
  -webkit-box-shadow: 0 0 5px rgba(109, 207, 246, .5) !important;
  -moz-box-shadow: 0 0 5px rgba(109, 207, 246, .5) !important;
  box-shadow: 0 0 5px rgba(109, 207, 246, .5) !important;
}

#weather-location input:-moz-placeholder
{
  color: #888;
}

#weather-location input::-webkit-input-placeholder
{
  color: #888;
}

.autocomplete
{
  /*the container must be positioned relative:*/
  position: relative;
  display: inline-block;
}

.autocomplete-items
{
  position: absolute;
  border-bottom: none;
  border-top: none;
  z-index: 99;
  /*position the autocomplete items to be the same width as the container:*/
  top: 100%;
  left: 0;
  right: 0;
  max-height: 280px;
  overflow-y: scroll;
}

.autocomplete-items div
{
  padding: 0 10px;
  text-align: right;

  cursor: pointer;
  background-color: #fff;
  border-bottom: 1px solid #d4d4d4;
}

.autocomplete-items div:hover
{
  /*when hovering an item:*/
  background-color: #e9e9e9;
}

.autocomplete-active
{
  /*when navigating through the items using the arrow keys:*/
  background-color: DodgerBlue !important;
  color: #ffffff;
}