.bl-supplies-container{
    position: relative;
    padding: 30px 0 30px 20px;
    /* height: 400px; */
}
.bl-supplies-container .bl-supplies-high {
    position: relative;
    float: left;
    margin: 0 20px 20px 0;
    width: 100px;
    height: 2px;
    background: #ffc000;
}
.bl-supplies-container .bl-supplies-low {
    position: relative;
    float: left;
    width: 100px;
    height: 2px;
    background: #6dcff6;
}
.bl-supplies-container .bl-supplies-high span, .bl-supplies-container .bl-supplies-low span{
    position: absolute;
    top: -20px;
    font-size: 11px;
}
.bl-group{
    float: left;
    position: relative;
    margin: 30px 15px;
}
.bl-group .bl-type{
    position: absolute;
    top: -20px;
    left: 14px;
    width: 32px;
    font-size: 12px;
    text-align: center;
    color: #000;
}
.bl-upper, .bl-lower{
    position: absolute;
    left: -5px;
    width: 20px;
    height: 2px;
    z-index: 3;
}
.bl-upper{
    background: #ffc000;
}
.bl-lower{
    background: #6dcff6;
}
.bl-bag{
    position: absolute;
    top: 0;
    left: -1px;
    width: 60px;
    height: 101px;
    background: url('../../assets/bag.png');
    z-index: 2;
}
.bl-bag:after{
    content: "";
    position: absolute;
    bottom: -18px;
    left: 0;
    width: 50px;
    height: 18px;
    background: url('../../assets/bag-bottom.png');
}
.bl-level{
    position: relative;
    bottom: 0;
    width: 58px;
    height: 100px;
    overflow: hidden;
}
.bl-level-image{
    position: absolute;
    bottom: 0;
    width: 100%;
    background: url('../../assets/fill.png');
    overflow: hidden;
}

@media (max-width: 1200px) {
    .bl-supplies-container{
        /* height: 450px; */
    }
}

@media (max-width: 768px) {
    .bl-supplies-container{
        /* height: 550px; */
        padding-left: 0;
    }
}

.bl-amount { display: flex; flex-wrap: wrap }
.bl-group { flex: 0 0 15%; max-width: 13% }
@media (min-width: 440px) and (max-width: 768px) {
    .bl-group { max-width: 15% }
}
@media (min-width: 769px) and (max-width: 992px) {
    .bl-group {  flex: 0 0 25%; max-width: 20% }
}
@media (min-width: 993px) and (max-width: 1600px) {
    .bl-group {  flex: 0 0 25%; max-width: 15% }
}
@media (min-width: 1600px) {
    .bl-group {max-width: 7% }
}