.box-chart-bar-custom {
    display: flex;
    justify-content: space-between;
}
.chart-bar-custom {
    width: 45px !important;
    background: transparent;
    position: relative;
    display: inline-block;
    margin: 10px 10px;
    height: 150px;
}

.chart-bar-custom > .bar {
    height: 150px;
    border-radius: 15px 15px 0 0;
    background: #f1f1f1;
    border: 1px solid #ccc;
    width: 45px;
    overflow: hidden;
    position: relative;
}

.chart-bar-custom > .bar .fill {
    position: absolute;
    width: 100%;
    bottom: 0;
    right: 0px;
}

.chart-bar-custom .iconbar {
    position: relative;
    height: 52px;
    background: white;
    position: absolute;
    bottom: -51px;
    right: 50%;
    text-align: center;
    width: 60px;
    border-radius: 5px;

    padding: 4px;
    transform: translateX(50%);
}
.chart-bar-custom .iconbar i {
    font-size: 40px;
    color: #666;
}
.chart-bar-custom .iconbar .percent {
    position: absolute;
    bottom: -25px;
    display: block;
    width: 100%;
    text-align: center;
    font-weight: 800;
    right: 0;
}
.chart-bar-custom .iconbar .title {
    position: absolute;
    top: 75px;
    display: block;
    width: 100%;
    text-align: center;
    font-weight: 800;
    right: 0;
    font-size: 12px;
    /*overflow: hidden;*/
    /*text-overflow: ellipsis;*/
    /*white-space: nowrap;*/
    color: #666;
}

/* Color */
/* blue-light*/
.chart-bar-custom.blue-light > .bar .fill {
    background: #5ec0de;
}
.chart-bar-custom.blue-light .iconbar {
    border: 1px solid #5ec0de;
}
.chart-bar-custom.blue-light .iconbar .percent {
    color: #5ec0de;
}
/* blue */
.chart-bar-custom.blue > .bar .fill {
    background: #3ea4c4;
}
.chart-bar-custom.blue .iconbar {
    border: 1px solid #3ea4c4;
}
.chart-bar-custom.blue .iconbar .percent {
    color: #3ea4c4;
}
/* red */
.chart-bar-custom.red > .bar .fill {
    background: #ff5a3c;
}
.chart-bar-custom.red .iconbar {
    border: 1px solid #ff5a3c;
}
.chart-bar-custom.red .iconbar .percent {
    color: #ff5a3c;
}
/* orange */
.chart-bar-custom.orange > .bar .fill {
    background: #e3835c;
}
.chart-bar-custom.orange .iconbar {
    border: 1px solid #e3835c;
}
.chart-bar-custom.orange .iconbar .percent {
    color: #e3835c;
}
/* green-light */
.chart-bar-custom.green-light > .bar .fill {
    background: #6cff4a;
}
.chart-bar-custom.green-light .iconbar {
    border: 1px solid #6cff4a;
}
.chart-bar-custom.green-light .iconbar .percent {
    color: #6cff4a;
}
/* green */
.chart-bar-custom.green > .bar .fill {
    background: #87d975;
}
.chart-bar-custom.green .iconbar {
    border: 1px solid #87d975;
}
.chart-bar-custom.green .iconbar .percent {
    color: #87d975;
}
/* yellow-light */
.chart-bar-custom.yellow-light > .bar .fill {
    background: #d6d975;
}
.chart-bar-custom.yellow-light .iconbar {
    border: 1px solid #d6d975;
}
.chart-bar-custom.yellow-light .iconbar .percent {
    color: #d6d975;
}
/* yellow */
.chart-bar-custom.yellow > .bar .fill {
    background: #e9cd4a;
}
.chart-bar-custom.yellow .iconbar {
    border: 1px solid #e9cd4a;
}
.chart-bar-custom.yellow .iconbar .percent {
    color: #e9cd4a;
}



@media only screen and (max-width: 768px) {
    .box-chart-bar-custom {
        display: flex;
        /*justify-content: space-between;*/
        justify-content: space-around;
        flex-wrap: wrap;
    }
    .chart-bar-custom:nth-child(1) , .chart-bar-custom:nth-child(2),  .chart-bar-custom:nth-child(3) , .chart-bar-custom:nth-child(4) {
        width: 45px !important;
        background: transparent;
        position: relative;
        display: inline-block;
        margin: 10px 15px;
        margin-bottom: 10px;
        margin-bottom: 120px;

    }
}