<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Syntrans - Bootstrap4 Admin Template</title>
<!--favicon-->
<!--plugins-->
<link href="static/css/simplebar.css" rel="stylesheet">
<link href="static/css/perfect-scrollbar.css" rel="stylesheet">
<link href="static/css/metisMenu.min.css" rel="stylesheet">
<!-- loader-->
<link href="static/css/pace.min.css" rel="stylesheet">
<script src="static/js/pace.min.js"></script>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="static/css/bootstrap.min.css">
<!-- Icons CSS -->
<link rel="stylesheet" href="static/css/icons.css">
<!-- App CSS -->
<link rel="stylesheet" href="static/css/app.css">
</head>
<body class="bg-theme bg-theme1">
<!-- wrapper -->
<div class="wrapper">
<!--sidebar-wrapper-->
<div class="sidebar-wrapper" data-simplebar="true">
<div class="sidebar-header">
<div class="">
<img src="static/picture/logo-icon.png" class="logo-icon-2" alt="">
</div>
<div>
<h4 class="logo-text">Syntrans</h4>
</div>
<a href="javascript:;" class="toggle-btn ml-auto"> <i class="bx bx-menu"></i>
</a>
</div>
<!--navigation-->
<ul class="metismenu" id="menu">
<li>
<a href="javascript:;" class="has-arrow">
<div class="parent-icon"><i class="bx bx-home-alt"></i>
</div>
<div class="menu-title">Dashboard</div>
</a>
<ul>
<li> <a href="index.html"><i class="bx bx-right-arrow-alt"></i>Analytics</a>
</li>
<li> <a href="index2.html"><i class="bx bx-right-arrow-alt"></i>Sales</a>
</li>
</ul>
</li>
<li class="menu-label">Web Apps</li>
<li>
<a href="emailbox.html">
<div class="parent-icon"><i class="bx bx-envelope"></i>
</div>
<div class="menu-title">Email</div>
</a>
</li>
<li>
<a href="chat-box.html">
<div class="parent-icon"> <i class="bx bx-conversation"></i>
</div>
<div class="menu-title">Chat Box</div>
</a>
</li>
<li>
<a href="file-manager.html">
<div class="parent-icon"><i class="bx bx-archive"></i>
</div>
<div class="menu-title">File Manager</div>
</a>
</li>
<li>
<a href="contact-list.html">
<div class="parent-icon"><i class="bx bx-group"></i>
</div>
<div class="menu-title">Contatcs</div>
</a>
</li>
<li>
<a href="to-do.html">
<div class="parent-icon"><i class="bx bx-task"></i>
</div>
<div class="menu-title">Todo List</div>
</a>
</li>
<li>
<a href="invoice.html">
<div class="parent-icon"><i class="bx bx-file"></i>
</div>
<div class="menu-title">Invoice</div>
</a>
</li>
<li>
<a href="fullcalender.html">
<div class="parent-icon"> <i class="bx bx-calendar-check"></i>
</div>
<div class="menu-title">Calendar</div>
</a>
</li>
<li class="menu-label">UI Elements</li>
<li>
<a href="widgets.html">
<div class="parent-icon"><i class="bx bx-ghost"></i>
</div>
<div class="menu-title">Widgets</div>
</a>
</li>
<li>
<a class="has-arrow" href="javascript:;">
<div class="parent-icon"><i class="bx bx-spa"></i>
</div>
<div class="menu-title">Components</div>
</a>
<ul>
<li> <a href="component-alerts.html"><i class="bx bx-right-arrow-alt"></i>Alerts</a>
</li>
<li> <a href="component-bedges.html"><i class="bx bx-right-arrow-alt"></i>Badge</a>
</li>
<li> <a href="component-buttons.html"><i class="bx bx-right-arrow-alt"></i>Buttons</a>
</li>
<li> <a href="component-cards.html"><i class="bx bx-right-arrow-alt"></i>Cards</a>
</li>
<li> <a href="component-carousels.html"><i class="bx bx-right-arrow-alt"></i>Carousel</a>
</li>
<li> <a href="component-acordians.html"><i class="bx bx-right-arrow-alt"></i>Acordians</a>
</li>
<li> <a href="component-list-groups.html"><i class="bx bx-right-arrow-alt"></i>List Groups</a>
</li>
<li> <a href="component-media-object.html"><i class="bx bx-right-arrow-alt"></i>Media Objects</a>
</li>
<li> <a href="component-modals.html"><i class="bx bx-right-arrow-alt"></i>Modal</a>
</li>
<li> <a href="component-navs.html"><i class="bx bx-right-arrow-alt"></i>Navs</a>
</li>
<li> <a href="components-navbar.html"><i class="bx bx-right-arrow-alt"></i>Navbar</a>
</li>
<li> <a href="component-paginations.html"><i class="bx bx-right-arrow-alt"></i>Pagination</a>
</li>
<li> <a href="component-popovers-tooltips.html"><i class="bx bx-right-arrow-alt"></i>Popovers & Tooltips</a>
</li>
<li> <a href="component-progress-bars.html"><i class="bx bx-right-arrow-alt"></i>Progress</a>
</li>
<li> <a href="component-spinners.html"><i class="bx bx-right-arrow-alt"></i>Spinners</a>
</li>
<li> <a href="component-notifications.html"><i class="bx bx-right-arrow-alt"></i>Notifications</a>
</li>
<li> <a href="components-avtars-chips.html"><i class="bx bx-right-arrow-alt"></i>Avatrs & Chips</a>
</li>
</ul>
</li>
<li>
<a class="has-arrow" href="javascript:;">
<div class="parent-icon"><i class="bx bx-repeat"></i>
</div>
<div class="menu-title">Content</div>
</a>
<ul>
<li> <a href="content-grid-system.html"><i class="bx bx-right-arrow-alt"></i>Grid System</a>
</li>
<li> <a href="content-typography.html"><i class="bx bx-right-arrow-alt"></i>Typography</a>
</li>
<li> <a href="content-text-utilities.html"><i class="bx bx-right-arrow-alt"></i>Text Utilities</a>
</li>
</ul>
</li>
<li>
<a class="has-arrow" href="javascript:;">
<div class="parent-icon"> <i class="bx bx-donate-blood"></i>
</div>
<div class="menu-title">Icons</div>
</a>
<ul>
<li> <a href="icons-line-icons.html"><i class="bx bx-right-arrow-alt"></i>Line Icons</a>
</li>
<li> <a href=""><i class="bx bx-right-arrow-alt"></i>Boxicons</a>
</li>
<li> <a href="icons-feather-icons.html"><i class="bx bx-right-arrow-alt"></i>Feather Icons</a>
</li>
</ul>
</li>
<li class="menu-label">Forms & Tables</li>
<li>
<a class="has-arrow" href="javascript:;">
<div class="parent-icon"> <i class="bx bx-comment-edit"></i>
</div>
<div class="menu-title">Forms</div>
</a>
<ul>
<li> <a href="form-elements.html"><i class="bx bx-right-arrow-alt"></i>Form Elements</a>
</li>
<li> <a href="form-input-group.html"><i class="bx bx-right-arrow-alt"></i>Input Groups</a>
</li>
<li> <a href="form-layouts.html"><i class="bx bx-right-arrow-alt"></i>Forms Layouts</a>
</li>
<li> <a href="form-validations.html"><i class="bx bx-right-arrow-alt"></i>Form Validation</a>
</li>
<li> <a href="form-wizard.html"><i class="bx bx-right-arrow-alt"></i>Form Wizard</a>
</li>
<li> <a href="form-text-editor.html"><i class="bx bx-right-arrow-alt"></i>Text Editor</a>
</li>
<li> <a href="form-file-upload.html"><i class="bx bx-right-arrow-alt"></i>File Upload</a>
</li>
<li> <a href="form-date-time-pickes.html"><i class="bx bx-right-arrow-alt"></i>Date Pickers</a>
</li>
<li> <a href="form-select2.html"><i class="bx bx-right-arrow-alt"></i>Select2</a>
</li>
</ul>
</li>
<li>
<a class="has-arrow" href="javascript:;">
<div class="parent-icon"><i class="bx bx-grid-alt"></i>
</div>
<div class="menu-title">Tables</div>
</a>
<ul>
<li> <a href="table-basic-table.html"><i class="bx bx-right-arrow-alt"></i>Basic Table</a>
</li>
<li> <a href="table-datatable.html"><i class="bx bx-right-arrow-alt"><