:root {
   --color-ac-border: green;
   --color-ac-highlight: rgb(209, 111, 0);
   --color-ac-summary: purple;
   --color-ac-summary-bg: rgb(206, 235, 255);
   
   

 }


.autocomplete_wrapper{

   display:block;
   position:relative;
   padding:0;
   margin:0;
   
   border:solid 2px;
   border-color:var(--color-ac-border); 



}





.autocomplete_wrapper > ul {
   display:block;
   position:absolute;
   top: auto !important;
   left:-2px; /*match border size*/
   bottom: 100% !important;
   width:100%;

   
   background-color:white;
   z-index:1000;
  
   padding:0px;
   margin:0px;


   border:solid 2px;
   border-color:var(--color-ac-border);  
   border-bottom:0px;

   max-height:200px;
   overflow-y:scroll;
   
}


.autocomplete_wrapper > ul > li {
   list-style-type: none;
   padding:.4rem .5rem;
   margin:0;

   text-align:left;
   font-size:1rem;

   white-space:nowrap;
   overflow:hidden;
   text-overflow:ellipsis;
   transition:all .2s ease;
   border-bottom:dashed 1px rgb(97, 97, 97);

}

.autocomplete_wrapper > ul > li:hover{
   cursor:pointer;
   background-color:var(--color-ac-highlight);
}

/* info list item */
.autocomplete_wrapper > ul > div {
   padding:.1rem .5rem;
   margin:0;
   background-color:var(--color-ac-summary-bg);
   color:var(--color-ac-summary);
}


.autocomplete_wrapper>input[type=search]{

   box-sizing:border-box;
   -moz-box-sizing:border-box;
   -webkit-box-sizing:border-box;
   
   -webkit-appearance: none; /*remove magnifying glass on safari*/


   text-overflow:ellipsis;

   outline:0;
   border-radius:0rem;

   border:0px !important;
   /*border:.05rem solid rgba(255,122,122,.5);*/
   background-image:url(../images/search.svg);
   background-size:1.4rem;
   background-position:left 0.6rem top .8rem;
   background-repeat:no-repeat;
   background-origin:border-box;
   background-color:#fff;
   transition:all .4s ease;
   -webkit-transition:all -webkit-transform .4s ease;

}


.autocomplete_wrapper input {
  
}


.autocomplete_wrapper input[type=search]:focus{


}

.autoComplete_wrapper input:hover{
}

/*
.autoComplete_wrapper>input:focus::placeholder{
   padding:0rem 0rem;
   font-size:.95rem;
   color:rgba(255,122,122,.4)
*/

/*    
.autoComplete_wrapper>input{
   height:3rem;
   width:100%;
   margin:0;
   padding:0rem 2.2rem;
   box-sizing:border-box;
   -moz-box-sizing:border-box;
   -webkit-box-sizing:border-box;
   font-size:1rem;
   text-overflow:ellipsis;
   color:rgba(255,122,122,.3);
   outline:0;
   border-radius:0rem;
   border:.05rem solid rgba(255,122,122,.5);
   background-image:url(../images/search.svg);
   background-size:1.4rem;
   background-position:left 0.6rem top .8rem;
   background-repeat:no-repeat;
   background-origin:border-box;
   background-color:#fff;
   transition:all .4s ease;
   -webkit-transition:all -webkit-transform .4s ease
}
.autoComplete_wrapper>input::placeholder{
   color:rgba(255,122,122,.5);
   transition:all .3s ease;
   -webkit-transition:all -webkit-transform .3s ease
}
.autoComplete_wrapper>input:hover::placeholder{
   color:rgba(255,122,122,.6);
   transition:all .3s ease;
   -webkit-transition:all -webkit-transform .3s ease
}
.autoComplete_wrapper>input:focus::placeholder{
   padding:0rem 0rem;
   font-size:.95rem;
   color:rgba(255,122,122,.4)
}
.autoComplete_wrapper>input:focus::selection{
   background-color:rgba(255,122,122,.15)
}
.autoComplete_wrapper>input::selection{
   background-color:rgba(255,122,122,.15)
}
.autoComplete_wrapper>input:hover{
   color:rgba(255,122,122,.8);
   transition:all .3s ease;
   -webkit-transition:all -webkit-transform .3s ease
}
.autoComplete_wrapper>input:focus{
   color:#ff7a7a;
   border:.06rem solid rgba(255,122,122,.8)
}
.autoComplete_wrapper>ul{
   position:absolute;
   max-height:226px;
   overflow-y:scroll;
   box-sizing:border-box;
   left:0;
   right:0;
   margin:.5rem 0 0 0;
   padding:0;
   z-index:1;
   list-style:none;
   border-radius:.6rem;
   background-color:#fff;
   border:1px solid rgba(33,33,33,.07);
   box-shadow:0 3px 6px rgba(149,157,165,.15);
   outline:0;
   transition:opacity .15s ease-in-out;
   -moz-transition:opacity .15s ease-in-out;
   -webkit-transition:opacity .15s ease-in-out
}
.autoComplete_wrapper>ul:empty,.autoComplete_wrapper>ul[hidden]{
   display:block;
   opacity:0;
   transform:scale(0)
}
.autoComplete_wrapper>ul>li{
   margin:.3rem;
   padding:.3rem .5rem;
   text-align:left;
   font-size:1rem;
   color:#212121;
   border-radius:.35rem;
   background-color:#fff;
   white-space:nowrap;
   overflow:hidden;
   text-overflow:ellipsis;
   transition:all .2s ease
}
.autoComplete_wrapper>ul>li mark{
   background-color:transparent;
   color:#ff7a7a;
   font-weight:700
}
.autoComplete_wrapper>ul>li:hover{
   cursor:pointer;
   background-color:rgba(255,122,122,.15)
}
.autoComplete_wrapper>ul>li[aria-selected=true]{
   background-color:rgba(255,122,122,.15)
}
@media only screen and (max-width:600px){
   .autoComplete_wrapper>input{
       width:18rem
   }
}
*/