.ingredient-list {

}

.ingredient-list-item {
    border: none;
    background-color: #fff;
    margin-bottom: 10px;
    margin-right: 10px;
    padding: 0.5rem 1.1rem 0.5rem 1.1rem;
}

.ingredient-list-item:before {
    display: inline-block;
    margin-right: 10px;
    color: #fff;
    font-family: var( --font-awesome );
    font-weight: var( --font-awesome-weight-solid );
}

.ingredient-list-item.allergy {
    background-color: var( --color-allergy );
    color: #fff;
}

.ingredient-list-item.allergy:before {
    content: "\f071"; /* triangle exclamation icon */
}

.ingredient-list-item.favorite {
    background-color: var( --color-favorite );
    color: #fff;
}

.ingredient-list-item.favorite:before {
    content: "\f004"; /* heart icon */
}

.ingredient-list-item.avoid {
    background-color: var( --color-avoid );
    color: #fff; 
}

.ingredient-list-item.avoid:before {
    content: "\f05e";  /* ban icon */
}

/* Tooltips */
.fa-circle + .fa-exclamation-triangle {
    top: -1px; /* this icon needs a little manual tweaking when inside a circle */
}

.fa-stack.active i+i {
    color: #fff;
}


/* Ingredient Alert */

.ingredient-alert {
    width: 75px;
    height: 75px;
    border-radius: 100%;
    margin-right: 5px;
}

.ingredient-alert:before {
    content: '';
    display: block;
    font-size: 1.2rem;
    color: #ffffff;
    line-height: 70px;
    text-align: center;
}

.ingredient-alert.avoid {
    background-color: var( --color-avoid );
}

.ingredient-alert.allergy {
    background-color: var( --color-allergy );
}

.ingredient-alert.avoid.allergy {
    background-color: var( --color-avoidallergy );
}

.ingredient-alert.avoid:before, .ingredient-alert.avoid.allergy:before {
    content: '\f05e';
    line-height: 78px;
}

.ingredient-alert.allergy:before {
    content: '\f071';
    line-height: 78px;
}

.ingredient-alert-small {
    width: 30px;
    height: 30px;
}

.ingredient-alert-small:before {
    line-height: 29px;
    font-size: 0.8rem;
}

.ingredient-alert.avoid:before, .ingredient-alert.avoid.allergy:before {
    line-height: 33px;
}

.ingredient-alert.allergy:before {
    line-height: 30px;
}



/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) { }

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) { }

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) { }

/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) { }

/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1600px) { }

/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1900px) { }