$color_yellow: #FED11E;

.ingredients_box{
    text-align: center;
    width: 82px;
    height: 128px;
    margin: 4%;

    .onion{
        background: url('/assets/img/onion.png') 100% 100% no-repeat;
    }

    .bacon{
        background: url('/assets/img/bacon.png') 100% 100% no-repeat;
    }

    .cheese{
        background: url('/assets/img/cheese.png') 100% 100% no-repeat;
    }

    .jalapeno{
        background: url('/assets/img/jalapeno.png') 100% 100% no-repeat;
    }

    .mushroom{
        background: url('/assets/img/mushroom.png') 100% 100% no-repeat;
    }

    .pickles{
        background: url('/assets/img/pickles.png') 100% 100% no-repeat;
    }

    .pineapple{
        background: url('/assets/img/pineapple.png') 100% 100% no-repeat;
    }

    .tomato{
        background: url('/assets/img/tomato.png') 100% 100% no-repeat;
    }

    .ingredients_img{
        color: rgb(0, 0, 0);
        height: 52px;
        width: 52px;
        margin: 0 auto;
        border-radius: 50%;
        background-color: #fff;
    }

    .ingredients_text_box{
        border-radius: 30%;
        height: 128px;
    }

    .ingredients_name{
        color: rgb(0, 0, 0);
        font-size: 12px;
    }

    .ingredients_price{
        color: rgb(0, 0, 0);
        font-size: 12px;
    }

    .ingredients_button{
        background-color: #fff;
        display: inline-block;
       
        -webkit-border-radius: 12px;
        -moz-border-radius: 50%;
        border-radius: 50%;
        -khtml-border-radius: 50%;;
        
        width: 18px;
        height: 28px;
        font-size: 24px;
        border: aliceblue;
    }

    .yellow{
        background-color: $color_yellow;
    }

    .none{
        background-color: #F5F1E1;
    }
}

.IngredientsBox{
    overflow-y: scroll;
    height: 250px;
}