/*
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
*/
/* 
    Created on : 11-Nov-2021, 11:01:47 AM
    Author     : mtoromani
*/



.cutom_autocomplete {
  position: relative;
  display: inline-block;
}

.autocomplete-items {
  position: absolute;
  border: 1px solid #d4d4d4;
  border-bottom: none;
  border-top: none;
  z-index: 99;
  overflow: auto;
  /*position the autocomplete items to be the same width as the container:*/
  top: 100%;
  left: 0;
  right: 0;
}

.autocomplete-items div {
  padding: 10px;
  cursor: pointer;
  background-color: #fff; 
  border-bottom: 1px solid #d4d4d4; 
}


.autocomplete-items div:hover {
  background-color: #e9e9e9; 
}

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


input.cutom_autocomplete {
  background-image: url(/sites/default/files/address_autocomplete/arrow-clockwise.svg) !important;
  background-repeat: no-repeat !important;
  background-position: 100% center !important; 
  background-size: 24px 24px !important;
  
}


input.cutom_autocomplete.cutom_autocomplete-loading {
  animation: changeicon .35s infinite;
  background-position: 100% center;
  background-repeat: no-repeat;
  background-size: 24px 24px;
 
 

}
@keyframes changeicon{
   0%,100%  {background-image: url(/sites/default/files/address_autocomplete/arrow-clockwise1.svg);}
   25% {background-image: url(/sites/default/files/address_autocomplete/arrow-clockwise2.svg);}
   50% {background-image: url(/sites/default/files/address_autocomplete/arrow-clockwise3.svg);}
   75% {background-image: url(/sites/default/files/address_autocomplete/arrow-clockwise4.svg);}
   
}