.chart-progress-vertical-all {
    min-height: 300px;
    height: 300px;
    /*background: #f1f1f1;*/
    margin-left: 10px;
    border-bottom: 1px solid #cccc;
    border-left: 1px solid #ccc;
    display: flex;
    position: relative;
    justify-content: space-evenly;
    width: calc(100% - 10px);
    align-items: flex-end;
    flex-direction: row-reverse;
    margin-bottom: 125px;
}

.chart-progress-vertical-all .chart {
    width: calc(100% / 20);
    height: 100%;
    bottom: 0px !important;
    padding: 0 10px;
    position: relative;
}
.chart-progress-vertical-all .chart::before {
    content: attr(data-title);
    top: calc(100% + 60px);
    position: absolute;
    width: 128px;
    font-family: iranyekan;
    color: #666;
    font-size: 12px;
    right: calc(-50% + -5px);
    transform: rotate(-75deg) translateY(50%);
    text-align: right;
}
.number-vertical {
    position: absolute;
    left: -19px;
    height: 100%;
    display: flex;
    flex-direction: column-reverse;
    justify-content: space-between;
    font-family: iranyekan;
    bottom: -9px;
    width: 10px;
}
.number-vertical div{
    position: relative;
}
.number-vertical div::before {
    content: '';
    position: absolute;
    width: 6px;
    height: 1px;
    right: -8px;
    top: 11px;
    background: #aaa;
}


.chart-progress-vertical-all .chart.orange {
    background: orange;
}

.chart-progress-vertical-all .chart.orange-dark{
    background: #ff7350;
}

.chart-progress-vertical-all .chart.yellow{
    background: #ffcf27;
}

.chart-progress-vertical-all .chart.blue{
    background: #3ea6e3;
}

.chart-progress-vertical-all .chart.brown{
    background: #c27a79;
}

.chart-progress-vertical-all .chart.crimson{
    background: crimson;
}

.chart-progress-vertical-all .chart.green{
    background: #4fc465;
}

.chart-progress-vertical-all .chart.purple{
    background: #a750af;
}

.chart-progress-vertical-all .chart.blue-light {
    background: #72e2f0;
}




@media only screen and (max-width: 768px) {

    .chart-progress-vertical-all .chart::before {
        right: calc(-100% + -5px);
    }

}