<div class="card card-rounded">
    <div class="card-content">
        <div class="card-body">
            <div class="nav-tabs-boxed">
                <ul class="nav nav-tabs" role="tablist">
                    <li class="nav-item">
                        <a href="#" id="btn_tabs_target" onclick="load_tab_sub_content('target')" class="sub_tab nav-link px-2 text-dark">
                            Planning KPI
                        </a>
                    </li>
                    <li class="nav-item">
                        <a href="#" id="btn_tabs_aktual" onclick="load_tab_sub_content('aktual')" class="sub_tab nav-link px-2 text-dark">
                            Actual KPI
                        </a>
                    </li>
                    <li class="nav-item">
                        <a href="#" id="btn_tabs_approval" onclick="load_tab_sub_content('approval')" class="sub_tab nav-link px-2 text-dark">
                            Approval KPI
                        </a>
                    </li>
                </ul>
            </div>
            <div class="row mt-2">
            <div class="modal-body" id="loading_tab_sub_content" style="display: none;"><div class="text-center"><div class="custom-lds-ring"><div></div><div></div><div></div></div></div></div>
                <div id="tab_content_periode" class="col-md-12"></div>
            </div>
        </div>
    </div>
</div>