/**
 * All of the CSS for your public-facing functionality should be
 * included in this file.
 */

.autocomplete {
    background: white;
    z-index: 1000;
    font: 14px/22px "-apple-system", BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    overflow: auto;
    box-sizing: border-box;
    border: 1px solid rgba(50, 50, 50, 0.6);
    width: 85% !important;
}
@media (min-width: 576px) {
    .autocomplete{width:75% !important}
}
@media (min-width: 768px) {
    .autocomplete{width:50% !important}
}
@media (min-width: 1200px) { 
    .autocomplete{width:30% !important}
}

.autocomplete * {
    font: inherit;
    font-size:1.5rem;
}

.autocomplete > div {
    padding: 0 4px;
}

.autocomplete .group {
    background: #eee;
}

.autocomplete > div:hover:not(.group),
.autocomplete > div.selected {
    background: #f0f4f8;
    cursor: pointer;
}

.autocomplete .suggestions-item {
    display: flex;
}
.autocomplete .suggestions-item div.img {
    flex: 1;
    padding: 20px;
}
.autocomplete .suggestions-item div.img img {
	max-width:80%;
}
.autocomplete .suggestions-item div.description {
    flex: 3;
    padding:10px;
}
#list-coupons table td:last-child {
	word-wrap:anywhere;
}