.twitter-typeahead{
   width: 100%;
}
.typeahead, .tt-query, .tt-hint {
   height: 34px;
   line-height: 30px;
   outline: medium none;
   padding: 8px 10px;
   width: 100%!important;
}
.typeahead {
   background-color: #FFFFFF;
}
.tt-query {
   box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset;
}
.tt-hint {
   color: #999999;
}
.tt-menu {
   background-color: #FFFFFF;
   border: 1px solid rgba(0, 0, 0, 0.2);
   box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
   width: 100%;
}
.tt-suggestion {
   padding: 5px 10px;
   border-bottom: 1px solid #dee2e6;
}
.tt-suggestion:hover {
   cursor: pointer;
   background-color: #0097CF;
   color: #FFFFFF;
}
.tt-suggestion p {
   margin: 0;
}
.tt-open{
   max-height: 250px;
   overflow-y: scroll;
   line-height: 16px;
   font-size: 13px;
   width: 445px!important;
}

@media (max-width: 575.98px) {
   .tt-open{
       width: 100%!important;
   }
}

@media (min-width: 576px) and (max-width: 767.98px) {
   .tt-open{
       width: 500px!important;
   }
}
@media (min-width: 768px) and (max-width: 820.98px) {
   .tt-open{
       width: 250px!important;
   }
}
@media (min-width: 821px) and (max-width: 991.98px) {
   .tt-open{
       width: 280px!important;
   }
}
@media (min-width: 992px) and (max-width: 1199.98px) {
   .tt-open{
       width: 250px!important;
   }
}