<ul
	id="side-nav"
	class="side-nav">

    <li class="category-wrap" style="padding-top: 40px;">
		<span   class="category-label"
                id="sidebar_menu_system">
			<i class="fa fa-cubes"></i>
			System
		</span>
        <ul id="system_elements_collapse">
            <li class=""
                id="sidebar_menu_system_info">
                <a href="/backoffice/template.html?page=systemInfo">System Info</a>
            </li>
            <li class=""
                id="sidebar_menu_system_billing">
                <a href="/backoffice/template.html?page=invoiceBilling">Invoice Billing</a>
            </li>
            <li class=""
                id="sidebar_menu_system_logging">
                <a href="/backoffice/template.html?page=auditLogging">Audit Logging</a>
            </li>
        </ul>
    </li>

    <li class="category-wrap" style="padding-top: 10px;">
		<span   class="category-label"
                id="sidebar_menu_config">
			<i class="fa fa-cubes"></i>
			Config
		</span>
        <ul id="system_elements_collapse">
            <li class=""
                id="sidebar_menu_config_language">
                <a href="/backoffice/template.html?page=languageConfig">Language Config</a>
            </li>
            <li class=""
                id="sidebar_menu_config_schedule">
                <a href="/backoffice/template.html?page=scheduleConfig">Schedule Config</a>
            </li>
            <li class=""
                id="sidebar_menu_config_dynamic">
                <a href="/backoffice/template.html?page=dynamicConfig">Dynamic Config</a>
            </li>
			<li class=""
				id="sidebar_menu_config_mailReport">
				<a href="/backoffice/template.html?page=mailReportConfig">Mail Report Config</a>
			</li>
        </ul>
    </li>

    <li class="category-wrap" style="padding-top: 10px;">
		<span   class="category-label"
                id="sidebar_menu_security">
			<i class="fa fa-cubes"></i>
			Security
		</span>
        <ul id="security_elements_collapse">
            <li class=""
                id="sidebar_menu_security_user">
                <a href="/backoffice/template.html?page=securityUser">User</a>
            </li>
            <li class=""
                id="sidebar_menu_security_group">
                <a href="/backoffice/template.html?page=securityGroup">Group</a>
            </li>
            <li class=""
                id="sidebar_menu_security_role">
                <a href="/backoffice/template.html?page=securityRole">Role</a>
            </li>
            <li class=""
                id="sidebar_menu_security_permission">
                <a href="/backoffice/template.html?page=accessControl">Access Control</a>
            </li>
        </ul>
    </li>

</ul>

<h5 class="sidebar-nav-title">
	Labels
	<a
		class="action-link"
		href="#">
		<i class="glyphicon glyphicon-plus"></i>
	</a>
</h5>
<!-- some styled links in sidebar. ready to use as links to email folders, projects, groups, etc -->
<ul class="sidebar-labels">
	<li>
		<a href="#">
			<!-- yep, .circle again -->
			<i class="fa fa-circle" style="color: #a4c6ff;"></i>
			<span class="label-name font11">�곗씠�� ( data )</span>
		</a>
	</li>
	<li>
		<a href="#">
			<!-- yep, .circle again -->
			<i class="fa fa-circle" style="color: #e5603b;"></i>
			<span class="label-name font11">�좏깮�� ( select )</span>
		</a>
	</li>
	<li>
		<a href="#">
			<!-- yep, .circle again -->
			<i class="fa fa-circle" style="color: #E49400;"></i>
			<span class="label-name font11">�좏떥 ( util )</span>
		</a>
	</li>
	<li>
		<a href="#">
			<i class="fa fa-circle text-primary"></i>
			<span class="label-name font11">�좉퇋 ( insert )</span>
		</a>
	</li>
	<li>
		<a href="#">
			<!-- yep, .circle again -->
			<i class="fa fa-circle text-success"></i>
			<span class="label-name font11">�섏젙 ( update )</span>
		</a>
	</li>
	<li>
		<a href="#">
			<i class="fa fa-circle text-danger"></i>
			<span class="label-name font11">��젣 ( delete )</span>
		</a>
	</li>
</ul>

<h5 class="sidebar-nav-title">Projects</h5>
<!-- A place for sidebar notifications & alerts -->
<div class="sidebar-alerts">
	<div class="alert fade in">
		<a  href="#"
			class="close"
			data-dismiss="alert"
			aria-hidden="true">
			&times;
		</a>
		<span class="text-white fw-semi-bold">Sales Report</span>
		<br />
		<div class="progress progress-xs mt-xs mb-0">
			<div
				class="progress-bar progress-bar-gray-light"
				style="width: 16%"></div>
		</div>
		<small>Calculating x-axis bias... 65%</small>
	</div>
</div>