<div class="container pt-3 pb-5" data-aos="fade-up">
<div class="container loan-dept-chart align-content-center">
<div class="container m-0 p-0 d-flex flex-row justify-content-between align-items-center">
<h3 class="text-start" style="color: #83C5BE;">Performance</h3>
<select class="custom-dropdown" id="dropdown" name="options">
<option value="{{decodedValPercent10 | json_encode()}}" selected>10 days</option>
<option value="{{decodedValPercent20 | json_encode()}}">10-20 days</option>
<option value="{{decodedValPercent30 | json_encode()}}">>20 days</option>
</select>
</div>
<div style="padding: 10px;"></div>
<div class="chart">
<div class="bar-width">
<div class="bar_dte" style="height: 0%;"></div>
</div>
<div class="bar-width">
<div class="bar_dpi" style="height: 0%;"></div>
</div>
<div class="bar-width">
<div class="bar_dce" style="height: 0%;"></div>
</div>
<div class="bar-width">
<div class="bar_kottackal" style="height: 0%;"></div>
</div>
<div class="bar-width">
<div class="bar_panchayat" style="height: 0%;"></div>
</div>
<div class="bar-width">
<div class="bar_vaidya" style="height: 0%;"></div>
</div>
<div class="bar-width">
<div class="bar_dhse" style="height: 0%;"></div>
</div>
<div class="bar-width">
<div class="bar_vhse" style="height: 0%;"></div>
</div>
<div class="bar-width">
<div class="bar_farm" style="height: 0%;"></div>
</div>
<div class="bar-width">
<div class="bar_homeo" style="height: 0%;"></div>
</div>
</div>
<div class="label-container">
<div class="bar-label">DTE</div>
<div class="bar-label">DPI</div>
<div class="bar-label">DCE</div>
<div class="bar-label">Kottackal</div>
<div class="bar-label">Panchayat</div>
<div class="bar-label">Vaidya</div>
<div class="bar-label">DHSE</div>
<div class="bar-label">VHSE</div>
<div class="bar-label">FARM</div>
<div class="bar-label">HOMEO</div>
</div>
</div>
</div>