万朱浩 / Venue-Ops

Go to a project
Toggle navigation Toggle navigation pinning
戒酒的李白
bc669ec3 1 parent ba807a47

【Datum_UImodel】后台组件模板

Inline Side-by-side
Showing 15 changed files with 4199 additions and 0 deletions

Too many changes to show.
Reload with full diff Plain diff Email patch

To preserve performance only 15 of 15+ files are displayed.

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Datum | CRM Admin Dashboard Template</title>
<link rel="stylesheet" href="static/css/backend-plugin.min.css">
<link rel="stylesheet" href="static/css/backend.css"> </head>
<body class=" ">
<!-- loader Start -->
<div id="loading">
<div id="loading-center">
</div>
</div>
<!-- loader END -->
<div class="wrapper">
<section class="login-content">
<div class="container-fluid h-100">
<div class="row align-items-center justify-content-center h-100">
<div class="col-md-5">
<div class="card">
<div class="card-body">
<div class="row align-items-center">
<div class="col-lg-12 text-center">
<img src="static/picture/logo.png" class="img-fluid rounded-normal darkmode-logo" width="80" alt="logo">
<img src="static/picture/logo-dark.png" class="img-fluid rounded-normal light-logo" width="80" alt="logo">
<h2 class="mt-3 mb-0">Success !</h2>
<p class="mb-1">A email has been send to <a href="javascript:;" class="__cf_email__" data-cfemail="2e57415b5c4b434f47426e4a41434f4740004d414300">[email&#160;protected]</a> Please check for an
email from company and click
on the included link to reset your password.</p>
<div class="d-inline-block w-100">
<a href="index.html" class="btn btn-primary mt-3">
<svg width="20" xmlns="http://www.w3.org/2000/svg" fill="none" viewbox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"></path>
</svg>
<span>Back to Home</span>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
</div>
<!-- Backend Bundle JavaScript -->
<script data-cfasync="false" src="https://www.17sucai.com/cdn-cgi/scripts/5c5dd728/cloudflare-static/email-decode.min.js"></script><script src="static/js/backend-bundle.min.js"></script>
<!-- Chart Custom JavaScript -->
<script src="static/js/customizer.js"></script>
<script src="static/js/sidebar.js"></script>
<!-- Flextree Javascript-->
<script src="static/js/flex-tree.min.js"></script>
<script src="static/js/tree.js"></script>
<!-- Table Treeview JavaScript -->
<script src="static/js/table-treeview.js"></script>
<!-- SweetAlert JavaScript -->
<script src="static/js/sweetalert.js"></script>
<!-- Vectoe Map JavaScript -->
<script src="static/js/vector-map-custom.js"></script>
<!-- Chart Custom JavaScript -->
<script src="static/js/chart-custom.js"></script>
<script src="static/js/01.js"></script>
<script src="static/js/02.js"></script>
<!-- slider JavaScript -->
<script src="static/js/slider.js"></script>
<!-- Emoji picker -->
<script src="static/js/index.js" type="module"></script>
<!-- app JavaScript -->
<script src="static/js/app.js"></script> </body>
</html>
\ No newline at end of file
... ...
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Datum | CRM Admin Dashboard Template</title>
<link rel="stylesheet" href="static/css/backend-plugin.min.css">
<link rel="stylesheet" href="static/css/backend.css"> </head>
<body class=" ">
<!-- loader Start -->
<div id="loading">
<div id="loading-center">
</div>
</div>
<!-- loader END -->
<div class="wrapper">
<section class="login-content">
<div class="container h-100">
<div class="row align-items-center justify-content-center h-100">
<div class="col-md-5">
<div class="card">
<div class="card-body">
<div class="row align-items-center">
<div class="col-lg-12">
<div class="auth-logo">
<img src="static/picture/logo.png" class="img-fluid rounded-normal darkmode-logo" alt="logo">
<img src="static/picture/logo-dark.png" alt="user-icon" class="img-fluid rounded-normal light-logo">
</div>
<div class="text-center">
<h2 class="mb-2">Hi ! Barry Tech</h2>
<p>Enter your password to access the admin.</p>
</div>
<form>
<div class="row">
<div class="col-lg-12">
<div class="form-group">
<label>Password</label>
<input class="form-control" type="password" placeholder="********">
</div>
</div>
</div>
<button type="submit" class="btn btn-primary btn-block">Login</button>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
</div>
<!-- Backend Bundle JavaScript -->
<script src="static/js/backend-bundle.min.js"></script>
<!-- Chart Custom JavaScript -->
<script src="static/js/customizer.js"></script>
<script src="static/js/sidebar.js"></script>
<!-- Flextree Javascript-->
<script src="static/js/flex-tree.min.js"></script>
<script src="static/js/tree.js"></script>
<!-- Table Treeview JavaScript -->
<script src="static/js/table-treeview.js"></script>
<!-- SweetAlert JavaScript -->
<script src="static/js/sweetalert.js"></script>
<!-- Vectoe Map JavaScript -->
<script src="static/js/vector-map-custom.js"></script>
<!-- Chart Custom JavaScript -->
<script src="static/js/chart-custom.js"></script>
<script src="static/js/01.js"></script>
<script src="static/js/02.js"></script>
<!-- slider JavaScript -->
<script src="static/js/slider.js"></script>
<!-- Emoji picker -->
<script src="static/js/index.js" type="module"></script>
<!-- app JavaScript -->
<script src="static/js/app.js"></script> </body>
</html>
\ No newline at end of file
... ...
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Datum | CRM Admin Dashboard Template</title>
<link rel="stylesheet" href="static/css/backend-plugin.min.css">
<link rel="stylesheet" href="static/css/backend.css"> </head>
<body class=" ">
<!-- loader Start -->
<div id="loading">
<div id="loading-center">
</div>
</div>
<!-- loader END -->
<div class="wrapper">
<section class="login-content">
<div class="container h-100">
<div class="row align-items-center justify-content-center h-100">
<div class="col-md-5">
<div class="card p-3">
<div class="card-body">
<div class="auth-logo">
<img src="static/picture/logo.png" class="img-fluid rounded-normal darkmode-logo" alt="logo">
<img src="static/picture/logo-dark.png" class="img-fluid rounded-normal light-logo" alt="logo">
</div>
<h3 class="mb-3 font-weight-bold text-center">Sign In</h3>
<p class="text-center text-secondary mb-4">Log in to your account to continue</p>
<div class="social-btn d-flex justify-content-around align-items-center mb-4">
<button class="btn btn-outline-light">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewbox="88.428 12.828 107.543 207.085">
<path d="M158.232 219.912v-94.461h31.707l4.747-36.813h-36.454V65.134c0-10.658 2.96-17.922 18.245-17.922l19.494-.009V14.278c-3.373-.447-14.944-1.449-28.406-1.449-28.106 0-47.348 17.155-47.348 48.661v27.149H88.428v36.813h31.788v94.461l38.016-.001z" fill="#3c5a9a"></path>
</svg>
</button>
<button class="btn btn-outline-light">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewbox="0 0 256 262" preserveaspectratio="xMidYMid">
<path d="M255.878 133.451c0-10.734-.871-18.567-2.756-26.69H130.55v48.448h71.947c-1.45 12.04-9.283 30.172-26.69 42.356l-.244 1.622 38.755 30.023 2.685.268c24.659-22.774 38.875-56.282 38.875-96.027" fill="#4285F4"></path>
<path d="M130.55 261.1c35.248 0 64.839-11.605 86.453-31.622l-41.196-31.913c-11.024 7.688-25.82 13.055-45.257 13.055-34.523 0-63.824-22.773-74.269-54.25l-1.531.13-40.298 31.187-.527 1.465C35.393 231.798 79.49 261.1 130.55 261.1" fill="#34A853"></path>
<path d="M56.281 156.37c-2.756-8.123-4.351-16.827-4.351-25.82 0-8.994 1.595-17.697 4.206-25.82l-.073-1.73L15.26 71.312l-1.335.635C5.077 89.644 0 109.517 0 130.55s5.077 40.905 13.925 58.602l42.356-32.782" fill="#FBBC05"></path>
<path d="M130.55 50.479c24.514 0 41.05 10.589 50.479 19.438l36.844-35.974C195.245 12.91 165.798 0 130.55 0 79.49 0 35.393 29.301 13.925 71.947l42.211 32.783c10.59-31.477 39.891-54.251 74.414-54.251" fill="#EB4335"></path>
</svg>
</button>
<button class="btn btn-outline-light">
<svg width="20" height="20" viewbox="328 355 335 276" xmlns="http://www.w3.org/2000/svg">
<path d="M 630, 425 A 195, 195 0 0 1 331, 600 A 142, 142 0 0 0 428, 570A 70, 70 0 0 1 370, 523A 70, 70 0 0 0 401, 521A 70, 70 0 0 1 344, 455A 70, 70 0 0 0 372, 460A 70, 70 0 0 1 354, 370A 195, 195 0 0 0 495, 442A 67, 67 0 0 1 611, 380A 117, 117 0 0 0 654, 363A 65, 65 0 0 1 623, 401A 117, 117 0 0 0 662, 390A 65, 65 0 0 1 630, 425Z" style="fill:#3BA9EE;"></path>
</svg>
</button>
</div>
<div class="mb-5">
<p class="line-around text-secondary mb-0"><span class="line-around-1">or login with email</span></p>
</div>
<form>
<div class="row">
<div class="col-lg-12">
<div class="form-group">
<label class="text-secondary">Email</label>
<input class="form-control" type="email" placeholder="Enter Email">
</div>
</div>
<div class="col-lg-12 mt-2">
<div class="form-group">
<div class="d-flex justify-content-between align-items-center">
<label class="text-secondary">Password</label>
<label><a href="auth-recover-pwd.html">Forgot Password?</a></label>
</div>
<input class="form-control" type="password" placeholder="Enter Password">
</div>
</div>
</div>
<button type="submit" class="btn btn-primary btn-block mt-2">Log In</button>
<div class="col-lg-12 mt-3">
<p class="mb-0 text-center">Don't have an account? <a href="auth-sign-up.html">Sign Up</a></p>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</section>
</div>
<!-- Backend Bundle JavaScript -->
<script src="static/js/backend-bundle.min.js"></script>
<!-- Chart Custom JavaScript -->
<script src="static/js/customizer.js"></script>
<script src="static/js/sidebar.js"></script>
<!-- Flextree Javascript-->
<script src="static/js/flex-tree.min.js"></script>
<script src="static/js/tree.js"></script>
<!-- Table Treeview JavaScript -->
<script src="static/js/table-treeview.js"></script>
<!-- SweetAlert JavaScript -->
<script src="static/js/sweetalert.js"></script>
<!-- Vectoe Map JavaScript -->
<script src="static/js/vector-map-custom.js"></script>
<!-- Chart Custom JavaScript -->
<script src="static/js/chart-custom.js"></script>
<script src="static/js/01.js"></script>
<script src="static/js/02.js"></script>
<!-- slider JavaScript -->
<script src="static/js/slider.js"></script>
<!-- Emoji picker -->
<script src="static/js/index.js" type="module"></script>
<!-- app JavaScript -->
<script src="static/js/app.js"></script> </body>
</html>
\ No newline at end of file
... ...
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Datum | CRM Admin Dashboard Template</title>
<link rel="stylesheet" href="static/css/backend-plugin.min.css">
<link rel="stylesheet" href="static/css/backend.css"> </head>
<body class=" ">
<!-- loader Start -->
<div id="loading">
<div id="loading-center">
</div>
</div>
<!-- loader END -->
<div class="wrapper">
<section class="login-content">
<div class="container h-100">
<div class="row align-items-center justify-content-center h-100">
<div class="col-md-5">
<div class="card p-5">
<div class="card-body">
<div class="auth-logo">
<img src="static/picture/logo.png" class="img-fluid rounded-normal darkmode-logo" alt="logo">
<img src="static/picture/logo-dark.png" class="img-fluid rounded-normal light-logo" alt="logo">
</div>
<h3 class="mb-3 text-center">Reset Password</h3>
<p class="text-center small text-secondary mb-3">You can reset your password here</p>
<form>
<div class="row">
<div class="col-lg-12">
<div class="form-group">
<label class="text-secondary">Email</label>
<input class="form-control" type="email" placeholder="Enter Email">
</div>
</div>
</div>
<button type="submit" class="btn btn-primary btn-block">Reset Password</button>
</form>
</div>
</div>
</div>
</div>
</div>
</section>
</div>
<!-- Backend Bundle JavaScript -->
<script src="static/js/backend-bundle.min.js"></script>
<!-- Chart Custom JavaScript -->
<script src="static/js/customizer.js"></script>
<script src="static/js/sidebar.js"></script>
<!-- Flextree Javascript-->
<script src="static/js/flex-tree.min.js"></script>
<script src="static/js/tree.js"></script>
<!-- Table Treeview JavaScript -->
<script src="static/js/table-treeview.js"></script>
<!-- SweetAlert JavaScript -->
<script src="static/js/sweetalert.js"></script>
<!-- Vectoe Map JavaScript -->
<script src="static/js/vector-map-custom.js"></script>
<!-- Chart Custom JavaScript -->
<script src="static/js/chart-custom.js"></script>
<script src="static/js/01.js"></script>
<script src="static/js/02.js"></script>
<!-- slider JavaScript -->
<script src="static/js/slider.js"></script>
<!-- Emoji picker -->
<script src="static/js/index.js" type="module"></script>
<!-- app JavaScript -->
<script src="static/js/app.js"></script> </body>
</html>
\ No newline at end of file
... ...
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Datum | CRM Admin Dashboard Template</title>
<link rel="stylesheet" href="static/css/backend-plugin.min.css">
<link rel="stylesheet" href="static/css/backend.css"> </head>
<body class=" ">
<!-- loader Start -->
<div id="loading">
<div id="loading-center">
</div>
</div>
<!-- loader END -->
<div class="wrapper">
<section class="login-content">
<div class="container h-100">
<div class="row align-items-center justify-content-center h-100">
<div class="col-md-5">
<div class="card">
<div class="card-body">
<div class="auth-logo">
<img src="static/picture/logo.png" class="img-fluid rounded-normal" alt="logo">
</div>
<h2 class="mb-2 text-center">Reset Password</h2>
<p>Enter your email address and we'll send you an email with instructions to reset your password.</p>
<form>
<div class="row">
<div class="col-lg-12">
<div class="form-group">
<label>Email</label>
<input class="form-control" type="email" placeholder=" ">
</div>
</div>
</div>
<button type="submit" class="btn btn-primary btn-block">Reset</button>
</form>
</div>
</div>
</div>
</div>
</div>
</section>
</div>
<!-- Backend Bundle JavaScript -->
<script src="static/js/backend-bundle.min.js"></script>
<!-- Chart Custom JavaScript -->
<script src="static/js/customizer.js"></script>
<script src="static/js/sidebar.js"></script>
<!-- Flextree Javascript-->
<script src="static/js/flex-tree.min.js"></script>
<script src="static/js/tree.js"></script>
<!-- Table Treeview JavaScript -->
<script src="static/js/table-treeview.js"></script>
<!-- SweetAlert JavaScript -->
<script src="static/js/sweetalert.js"></script>
<!-- Vectoe Map JavaScript -->
<script src="static/js/vector-map-custom.js"></script>
<!-- Chart Custom JavaScript -->
<script src="static/js/chart-custom.js"></script>
<script src="static/js/01.js"></script>
<script src="static/js/02.js"></script>
<!-- slider JavaScript -->
<script src="static/js/slider.js"></script>
<!-- Emoji picker -->
<script src="static/js/index.js" type="module"></script>
<!-- app JavaScript -->
<script src="static/js/app.js"></script> </body>
</html>
\ No newline at end of file
... ...
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Datum | CRM Admin Dashboard Template</title>
<link rel="stylesheet" href="static/css/backend-plugin.min.css">
<link rel="stylesheet" href="static/css/backend.css"> </head>
<body class=" ">
<!-- loader Start -->
<div id="loading">
<div id="loading-center">
</div>
</div>
<!-- loader END -->
<div class="wrapper">
<section class="login-content">
<div class="container h-100">
<div class="row align-items-center justify-content-center h-100">
<div class="col-md-5">
<div class="card">
<div class="card-body">
<div class="auth-logo">
<img src="static/picture/logo.png" class="img-fluid rounded-normal" alt="logo">
</div>
<h2 class="mb-2 text-center">Sign In</h2>
<p class="text-center">To Keep connected with us please login with your personal info.</p>
<form>
<div class="row">
<div class="col-lg-12">
<div class="form-group">
<label>Email</label>
<input class="form-control" type="email" placeholder="admin@example.com">
</div>
</div>
<div class="col-lg-12">
<div class="form-group">
<label>Password</label>
<input class="form-control" type="password" placeholder="********">
</div>
</div>
<div class="col-lg-6">
<div class="custom-control custom-checkbox mb-3">
<input type="checkbox" class="custom-control-input" id="customCheck1">
<label class="custom-control-label" for="customCheck1">Remember Me</label>
</div>
</div>
<div class="col-lg-6">
<a href="auth-recoverpw.html" class="text-primary float-right">Forgot Password?</a>
</div>
</div>
<div class="d-flex justify-content-between align-items-center">
<span>Create an Account <a href="auth-sign-up.html" class="text-primary">Sign Up</a></span>
<button type="submit" class="btn btn-primary">Sign In</button>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</section>
</div>
<!-- Backend Bundle JavaScript -->
<script src="static/js/backend-bundle.min.js"></script>
<!-- Chart Custom JavaScript -->
<script src="static/js/customizer.js"></script>
<script src="static/js/sidebar.js"></script>
<!-- Flextree Javascript-->
<script src="static/js/flex-tree.min.js"></script>
<script src="static/js/tree.js"></script>
<!-- Table Treeview JavaScript -->
<script src="static/js/table-treeview.js"></script>
<!-- SweetAlert JavaScript -->
<script src="static/js/sweetalert.js"></script>
<!-- Vectoe Map JavaScript -->
<script src="static/js/vector-map-custom.js"></script>
<!-- Chart Custom JavaScript -->
<script src="static/js/chart-custom.js"></script>
<script src="static/js/01.js"></script>
<script src="static/js/02.js"></script>
<!-- slider JavaScript -->
<script src="static/js/slider.js"></script>
<!-- Emoji picker -->
<script src="static/js/index.js" type="module"></script>
<!-- app JavaScript -->
<script src="static/js/app.js"></script> </body>
</html>
\ No newline at end of file
... ...
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Datum | CRM Admin Dashboard Template</title>
<link rel="stylesheet" href="static/css/backend-plugin.min.css">
<link rel="stylesheet" href="static/css/backend.css"> </head>
<body class=" ">
<!-- loader Start -->
<div id="loading">
<div id="loading-center">
</div>
</div>
<!-- loader END -->
<div class="wrapper">
<section class="login-content">
<div class="container h-100">
<div class="row align-items-center justify-content-center h-100">
<div class="col-md-5">
<div class="card p-3">
<div class="card-body">
<div class="auth-logo">
<img src="static/picture/logo.png" class="img-fluid rounded-normal darkmode-logo" alt="logo">
<img src="static/picture/logo-dark.png" class="img-fluid rounded-normal light-logo" alt="logo">
</div>
<h3 class="mb-3 font-weight-bold text-center">Getting Started</h3>
<p class="text-center text-secondary mb-4">Choose your social media to create account</p>
<div class="social-btn d-flex justify-content-around align-items-center mb-4">
<button class="btn btn-outline-light">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewbox="88.428 12.828 107.543 207.085">
<path d="M158.232 219.912v-94.461h31.707l4.747-36.813h-36.454V65.134c0-10.658 2.96-17.922 18.245-17.922l19.494-.009V14.278c-3.373-.447-14.944-1.449-28.406-1.449-28.106 0-47.348 17.155-47.348 48.661v27.149H88.428v36.813h31.788v94.461l38.016-.001z" fill="#3c5a9a"></path>
</svg>
</button>
<button class="btn btn-outline-light">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewbox="0 0 256 262" preserveaspectratio="xMidYMid">
<path d="M255.878 133.451c0-10.734-.871-18.567-2.756-26.69H130.55v48.448h71.947c-1.45 12.04-9.283 30.172-26.69 42.356l-.244 1.622 38.755 30.023 2.685.268c24.659-22.774 38.875-56.282 38.875-96.027" fill="#4285F4"></path>
<path d="M130.55 261.1c35.248 0 64.839-11.605 86.453-31.622l-41.196-31.913c-11.024 7.688-25.82 13.055-45.257 13.055-34.523 0-63.824-22.773-74.269-54.25l-1.531.13-40.298 31.187-.527 1.465C35.393 231.798 79.49 261.1 130.55 261.1" fill="#34A853"></path>
<path d="M56.281 156.37c-2.756-8.123-4.351-16.827-4.351-25.82 0-8.994 1.595-17.697 4.206-25.82l-.073-1.73L15.26 71.312l-1.335.635C5.077 89.644 0 109.517 0 130.55s5.077 40.905 13.925 58.602l42.356-32.782" fill="#FBBC05"></path>
<path d="M130.55 50.479c24.514 0 41.05 10.589 50.479 19.438l36.844-35.974C195.245 12.91 165.798 0 130.55 0 79.49 0 35.393 29.301 13.925 71.947l42.211 32.783c10.59-31.477 39.891-54.251 74.414-54.251" fill="#EB4335"></path>
</svg>
</button>
<button class="btn btn-outline-light">
<svg width="20" height="20" viewbox="328 355 335 276" xmlns="http://www.w3.org/2000/svg">
<path d="M 630, 425 A 195, 195 0 0 1 331, 600 A 142, 142 0 0 0 428, 570A 70, 70 0 0 1 370, 523A 70, 70 0 0 0 401, 521A 70, 70 0 0 1 344, 455A 70, 70 0 0 0 372, 460A 70, 70 0 0 1 354, 370A 195, 195 0 0 0 495, 442A 67, 67 0 0 1 611, 380A 117, 117 0 0 0 654, 363A 65, 65 0 0 1 623, 401A 117, 117 0 0 0 662, 390A 65, 65 0 0 1 630, 425Z" style="fill:#3BA9EE;"></path>
</svg>
</button>
</div>
<div class="mb-5">
<p class="line-around text-secondary mb-0"><span class="line-around-1">or register with email</span></p>
</div>
<form>
<div class="row">
<div class="col-lg-12">
<div class="form-group">
<label class="text-secondary">Email</label>
<input class="form-control" type="email" placeholder="Enter Email">
</div>
</div>
<div class="col-lg-12 mt-2">
<div class="form-group">
<label class="text-secondary">Password</label>
<input class="form-control" type="password" placeholder="Enter Password">
</div>
</div>
<div class="col-lg-12 mt-2">
<div class="form-check form-check-inline">
<div class="custom-control custom-checkbox custom-control-inline mb-3">
<input type="checkbox" class="custom-control-input m-0" id="inlineCheckbox1">
<label class="custom-control-label pl-2" for="inlineCheckbox1">I agree to the <a href="terms-of-service.html">Terms of Service </a> and <a href="privacy-policy.html">Privacy Policy</a></label>
</div>
</div>
</div>
</div>
<button type="submit" class="btn btn-primary btn-block mt-2">Create Account</button>
<div class="col-lg-12 mt-3">
<p class="mb-0 text-center">Do you have an account? <a href="auth-login.html">Sign In</a></p>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</section>
</div>
<!-- Backend Bundle JavaScript -->
<script src="static/js/backend-bundle.min.js"></script>
<!-- Chart Custom JavaScript -->
<script src="static/js/customizer.js"></script>
<script src="static/js/sidebar.js"></script>
<!-- Flextree Javascript-->
<script src="static/js/flex-tree.min.js"></script>
<script src="static/js/tree.js"></script>
<!-- Table Treeview JavaScript -->
<script src="static/js/table-treeview.js"></script>
<!-- SweetAlert JavaScript -->
<script src="static/js/sweetalert.js"></script>
<!-- Vectoe Map JavaScript -->
<script src="static/js/vector-map-custom.js"></script>
<!-- Chart Custom JavaScript -->
<script src="static/js/chart-custom.js"></script>
<script src="static/js/01.js"></script>
<script src="static/js/02.js"></script>
<!-- slider JavaScript -->
<script src="static/js/slider.js"></script>
<!-- Emoji picker -->
<script src="static/js/index.js" type="module"></script>
<!-- app JavaScript -->
<script src="static/js/app.js"></script> </body>
</html>
\ No newline at end of file
... ...
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Datum | CRM Admin Dashboard Template</title>
<link rel='stylesheet' href='static/css/main.css'>
<link rel='stylesheet' href='static/css/main1.css'>
<link rel='stylesheet' href='static/css/main2.css'>
<link rel='stylesheet' href='static/css/main3.css'>
<link rel="stylesheet" href="static/css/backend-plugin.min.css">
<link rel="stylesheet" href="static/css/backend.css"> </head>
<body class=" ">
<!-- loader Start -->
<div id="loading">
<div id="loading-center">
</div>
</div>
<!-- loader END -->
<!-- Wrapper Start -->
<div class="wrapper">
<div class="iq-sidebar sidebar-default ">
<div class="iq-sidebar-logo d-flex align-items-end justify-content-between">
<a href="index.html" class="header-logo">
<img src="static/picture/logo.png" class="img-fluid rounded-normal light-logo" alt="logo">
<img src="static/picture/logo-dark.png" class="img-fluid rounded-normal d-none sidebar-light-img" alt="logo">
<span>Datum</span>
</a>
<div class="side-menu-bt-sidebar-1">
<svg xmlns="http://www.w3.org/2000/svg" class="text-light wrapper-menu" width="30" fill="none" viewbox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
</svg>
</div>
</div>
<div class="data-scrollbar" data-scroll="1">
<nav class="iq-sidebar-menu">
<ul id="iq-sidebar-toggle" class="side-menu">
<li class=" sidebar-layout">
<a href="index.html" class="svg-icon">
<i class="">
<svg xmlns="http://www.w3.org/2000/svg" width="18" fill="none" viewbox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"></path>
</svg>
</i>
<span class="ml-2">Dashboard</span>
<p class="mb-0 w-10 badge badge-pill badge-primary">6</p>
</a>
</li>
<li class="px-3 pt-3 pb-2 ">
<span class="text-uppercase small font-weight-bold">Application</span>
</li>
<li class=" sidebar-layout">
<a href="customer.html" class="svg-icon ">
<i class="">
<svg xmlns="http://www.w3.org/2000/svg" width="18" fill="none" viewbox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"></path>
</svg>
</i>
<span class="ml-2">Customer</span>
</a>
</li>
<li class=" sidebar-layout">
<a href="product.html" class="svg-icon">
<i class="">
<svg xmlns="http://www.w3.org/2000/svg" width="18" fill="none" viewbox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l7 7a2 2 0 010 2.828l-7 7a2 2 0 01-2.828 0l-7-7A1.994 1.994 0 013 12V7a4 4 0 014-4z"></path>
</svg>
</i>
<span class="ml-2">Product</span>
</a>
</li>
<li class=" sidebar-layout">
<a href="order.html" class="svg-icon">
<i class="">
<svg xmlns="http://www.w3.org/2000/svg" width="18" fill="none" viewbox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 2a2 2 0 11-4 0 2 2 0 014 0z"></path>
</svg>
</i>
<span class="ml-2">Order</span>
</a>
</li>
<li class=" sidebar-layout">
<a href="invoice.html" class="svg-icon">
<i class="">
<svg class="icon line" width="18" id="receipt" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" stroke="currentColor">
<path d="M17,16V3L13,5,10,3,7,5,3,3V17.83A3.13,3.13,0,0,0,5.84,21,3,3,0,0,0,9,18V17a1,1,0,0,1,1-1H20a1,1,0,0,1,1,1v1a3,3,0,0,1-3,3H6" style="fill: none; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2;"></path>
<line x1="8" y1="10" x2="12" y2="10" style="fill: none; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2;"></line>
</svg>
</i>
<span class="ml-2">Invoice</span>
</a>
</li>
<li class=" sidebar-layout">
<a href="todo.html" class="svg-icon">
<i class="">
<svg xmlns="http://www.w3.org/2000/svg" width="18" fill="none" viewbox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4"></path>
</svg>
</i><span class="ml-2">Todo</span>
</a>
</li>
<li class="active sidebar-layout">
<a href="" class="svg-icon">
<i class="">
<svg xmlns="http://www.w3.org/2000/svg" width="18" fill="none" viewbox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"></path>
</svg>
</i>
<span class="ml-2">Calendar</span>
<p class="mb-0 px-2 badge badge-pill badge-success">New</p>
</a>
</li>
<li class="px-3 pt-3 pb-2">
<span class="text-uppercase small font-weight-bold">Pages</span>
</li>
<li class=" sidebar-layout">
<a href="chat.html" class="svg-icon">
<i class="">
<svg xmlns="http://www.w3.org/2000/svg" width="18" fill="none" viewbox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"></path>
</svg>
</i><span class="ml-2">Chat</span>
</a>
</li>
<li class=" sidebar-layout">
<a href="user-profile.html" class="svg-icon">
<i class="">
<svg class="svg-icon" id="iq-user-1-1" xmlns="http://www.w3.org/2000/svg" fill="none" viewbox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5.121 17.804A13.937 13.937 0 0112 16c2.5 0 4.847.655 6.879 1.804M15 10a3 3 0 11-6 0 3 3 0 016 0zm6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
</svg>
</i><span class="ml-2">User Profile</span>
</a>
</li>
<li class="sidebar-layout">
<a href="#app1" class="collapsed svg-icon" data-toggle="collapse" aria-expanded="false">
<i>
<svg xmlns="http://www.w3.org/2000/svg" width="18" fill="none" viewbox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"></path>
</svg>
</i>
<span class="ml-2">Authentication</span>
<svg xmlns="http://www.w3.org/2000/svg" class="svg-icon iq-arrow-right arrow-active" width="15" fill="none" viewbox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
</svg>
</a>
<ul id="app1" class="submenu collapse" data-parent="#iq-sidebar-toggle">
<li class=" sidebar-layout">
<a href="auth-login.html" class="svg-icon">
<i class=""><svg xmlns="http://www.w3.org/2000/svg" width="18" fill="none" viewbox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 11c0 3.517-1.009 6.799-2.753 9.571m-3.44-2.04l.054-.09A13.916 13.916 0 008 11a4 4 0 118 0c0 1.017-.07 2.019-.203 3m-2.118 6.844A21.88 21.88 0 0015.171 17m3.839 1.132c.645-2.266.99-4.659.99-7.132A8 8 0 008 4.07M3 15.364c.64-1.319 1-2.8 1-4.364 0-1.457.39-2.823 1.07-4"></path>
</svg>
</i><span class="">Login</span>
</a>
</li>
<li class=" sidebar-layout">
<a href="auth-sign-up.html" class="svg-icon">
<i class="">
<svg xmlns="http://www.w3.org/2000/svg" width="18" fill="none" viewbox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4"></path>
</svg>
</i><span class="">Register</span>
</a>
</li>
<li class=" sidebar-layout">
<a href="auth-recover-pwd.html" class="svg-icon">
<i class="">
<svg xmlns="http://www.w3.org/2000/svg" width="18" fill="none" viewbox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z"></path>
</svg>
</i><span class="">Reset Password</span>
</a>
</li>
<li class=" sidebar-layout">
<a href="auth-confirm-mail.html" class="svg-icon">
<i class="">
<svg xmlns="http://www.w3.org/2000/svg" width="18" fill="none" viewbox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
</svg>
</i><span class="">Confirm Mail</span>
</a>
</li>
<li class=" sidebar-layout">
<a href="auth-lock-screen.html" class="svg-icon">
<i class="">
<svg xmlns="http://www.w3.org/2000/svg" width="18" fill="none" viewbox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"></path>
</svg>
</i><span class="">Lock Screen</span>
</a>
</li>
</ul>
</li>
<li class="sidebar-layout">
<a href="#app6" class="collapsed svg-icon" data-toggle="collapse" aria-expanded="false">
<i>
<svg xmlns="http://www.w3.org/2000/svg" width="18" fill="none" viewbox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"></path>
</svg>
</i>
<span class="ml-2">Error</span>
<svg xmlns="http://www.w3.org/2000/svg" class="svg-icon iq-arrow-right arrow-active" width="15" fill="none" viewbox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
</svg>
</a>
<ul id="app6" class="submenu collapse" data-parent="#iq-sidebar-toggle">
<li class=" sidebar-layout">
<a href="pages-error.html" class="svg-icon">
<i class="">
<svg xmlns="http://www.w3.org/2000/svg" width="18" fill="none" viewbox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 9v6m4-6v6m7-3a9 9 0 11-18 0 9 9 0 0118 0z"></path>
</svg>
</i>
<span class="ml-2">Error 404</span>
</a>
</li>
<li class=" sidebar-layout">
<a href="pages-error-500.html" class="svg-icon">
<i class="">
<svg xmlns="http://www.w3.org/2000/svg" width="18" fill="none" viewbox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M18.364 5.636a9 9 0 010 12.728m0 0l-2.829-2.829m2.829 2.829L21 21M15.536 8.464a5 5 0 010 7.072m0 0l-2.829-2.829m-4.243 2.829a4.978 4.978 0 01-1.414-2.83m-1.414 5.658a9 9 0 01-2.167-9.238m7.824 2.167a1 1 0 111.414 1.414m-1.414-1.414L3 3m8.293 8.293l1.414 1.414"></path>
</svg>
</i>
<span class="ml-2">Error 500</span>
</a>
</li>
</ul>
</li>
<li class=" sidebar-layout">
<a href="pages-comingsoon.html" class="svg-icon">
<i class="">
<svg xmlns="http://www.w3.org/2000/svg" width="18" fill="none" viewbox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19.428 15.428a2 2 0 00-1.022-.547l-2.387-.477a6 6 0 00-3.86.517l-.318.158a6 6 0 01-3.86.517L6.05 15.21a2 2 0 00-1.806.547M8 4h8l-1 1v5.172a2 2 0 00.586 1.414l5 5c1.26 1.26.367 3.414-1.415 3.414H4.828c-1.782 0-2.674-2.154-1.414-3.414l5-5A2 2 0 009 10.172V5L8 4z"></path>
</svg>
</i><span class="ml-2">Comingsoon</span>
</a>
</li>
<li class=" sidebar-layout">
<a href="pages-maintenance.html" class="svg-icon">
<i class="">
<svg xmlns="http://www.w3.org/2000/svg" width="18" fill="none" viewbox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6V4m0 2a2 2 0 100 4m0-4a2 2 0 110 4m-6 8a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4m6 6v10m6-2a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4"></path>
</svg>
</i><span class="ml-2">Maintenance</span>
</a>
</li>
<li class=" sidebar-layout">
<a href="pages-blank-page.html" class="svg-icon">
<i class="">
<svg xmlns="http://www.w3.org/2000/svg" width="18" fill="none" viewbox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"></path>
</svg>
</i><span class="ml-2">Blank Page</span>
</a>
</li>
<li class=" sidebar-layout">
<a href="pages-faq.html" class="svg-icon">
<i class="">
<svg xmlns="http://www.w3.org/2000/svg" width="18" fill="none" viewbox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H5a2 2 0 00-2 2v9a2 2 0 002 2h14a2 2 0 002-2V8a2 2 0 00-2-2h-5m-4 0V5a2 2 0 114 0v1m-4 0a2 2 0 104 0m-5 8a2 2 0 100-4 2 2 0 000 4zm0 0c1.306 0 2.417.835 2.83 2M9 14a3.001 3.001 0 00-2.83 2M15 11h3m-3 4h2"></path>
</svg>
</i><span class="ml-2">Faq</span>
</a>
</li>
<li class=" sidebar-layout">
<a href="pricing.html" class="svg-icon">
<i class="">
<svg xmlns="http://www.w3.org/2000/svg" width="18" fill="none" viewbox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
</svg>
</i><span class="ml-2">Pricing</span>
</a>
</li>
<li class=" sidebar-layout">
<a href="timeline.html" class="svg-icon">
<i class="">
<svg xmlns="http://www.w3.org/2000/svg" width="18" fill="none" viewbox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path>
</svg>
</i><span class="ml-2">Timeline</span>
</a>
</li>
<li class="px-3 pt-3 pb-2">
<span class="text-uppercase small font-weight-bold">Components</span>
</li>
<li class="sidebar-layout">
<a href="#app2" class="collapsed svg-icon" data-toggle="collapse" aria-expanded="false">
<i>
<svg class="svg-icon" id="iq-ui-1" width="18" xmlns="http://www.w3.org/2000/svg" fill="none" viewbox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 21a4 4 0 01-4-4V5a2 2 0 012-2h4a2 2 0 012 2v12a4 4 0 01-4 4zm0 0h12a2 2 0 002-2v-4a2 2 0 00-2-2h-2.343M11 7.343l1.657-1.657a2 2 0 012.828 0l2.829 2.829a2 2 0 010 2.828l-8.486 8.485M7 17h.01" style="stroke-dasharray: 97, 117; stroke-dashoffset: 0;"></path>
</svg>
</i>
<span class="ml-2">UI Elements</span>
<svg xmlns="http://www.w3.org/2000/svg" class="svg-icon iq-arrow-right arrow-active" width="15" fill="none" viewbox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
</svg>
</a>
<ul id="app2" class="submenu collapse" data-parent="#iq-sidebar-toggle">
<li class=" sidebar-layout">
<a href="ui-avatars.html" class="svg-icon">
<i class="">
<svg class="svg-icon" id="iq-ui-1-0" xmlns="http://www.w3.org/2000/svg" fill="none" viewbox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5.121 17.804A13.937 13.937 0 0112 16c2.5 0 4.847.655 6.879 1.804M15 10a3 3 0 11-6 0 3 3 0 016 0zm6 2a9 9 0 11-18 0 9 9 0 0118 0z" style="stroke-dasharray: 90, 110; stroke-dashoffset: 0;"></path>
</svg>
</i><span class="">Avatars</span>
</a>
</li>
<li class=" sidebar-layout">
<a href="ui-alerts.html" class="svg-icon">
<i class="">
<svg class="svg-icon" width="18" id="iq-ui-1-1" xmlns="http://www.w3.org/2000/svg" fill="none" viewbox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l7 7a2 2 0 010 2.828l-7 7a2 2 0 01-2.828 0l-7-7A1.994 1.994 0 013 12V7a4 4 0 014-4z" style="stroke-dasharray: 56, 76; stroke-dashoffset: 0;"></path>
</svg>
</i><span class="">Alerts</span>
</a>
</li>
<li class=" sidebar-layout">
<a href="ui-badges.html" class="svg-icon">
<i class="">
<svg class="svg-icon" width="18" id="iq-ui-1-2" xmlns="http://www.w3.org/2000/svg" fill="none" viewbox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-3 7h3m-3 4h3m-6-4h.01M9 16h.01" style="stroke-dasharray: 74, 94; stroke-dashoffset: 0;"></path>
</svg>
</i><span class="">Badges</span>
</a>
</li>
<li class=" sidebar-layout">
<a href="ui-breadcrumb.html" class="svg-icon">
<i class="">
<svg class="svg-icon" width="18" id="iq-ui-1-3" xmlns="http://www.w3.org/2000/svg" fill="none" viewbox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" style="stroke-dasharray: 48, 68; stroke-dashoffset: 0;"></path>
</svg>
</i><span class="">Breadcrumb</span>
</a>
</li>
<li class=" sidebar-layout">
<a href="ui-buttons.html" class="svg-icon">
<i class="">
<svg class="svg-icon" width="18" id="iq-ui-1-4" xmlns="http://www.w3.org/2000/svg" fill="none" viewbox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="{2}" d="M15 5v2m0 4v2m0 4v2M5 5a2 2 0 00-2 2v3a2 2 0 110 4v3a2 2 0 002 2h14a2 2 0 002-2v-3a2 2 0 110-4V7a2 2 0 00-2-2H5z" style="stroke-dasharray: 72, 92; stroke-dashoffset: 0;"></path>
</svg>
</i><span class="">Buttons</span>
</a>
</li>
<li class=" sidebar-layout">
<a href="ui-buttons-group.html" class="svg-icon">
<i class="">
<svg class="svg-icon" id="iq-ui-1-5" width="20" xmlns="http://www.w3.org/2000/svg" fill="none" viewbox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10" style="stroke-dasharray: 90, 110; stroke-dashoffset: 0;"></path>
</svg>
</i><span class="">Buttons Group</span>
</a>
</li>
<li class=" sidebar-layout">
<a href="ui-boxshadow.html" class="svg-icon">
<i class="">
<svg class="svg-icon" width="18" id="iq-ui-1-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewbox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4" style="stroke-dasharray: 84, 104; stroke-dashoffset: 0;"></path>
</svg>
</i><span class="">Box Shadow</span>
</a>
</li>
<li class=" sidebar-layout">
<a href="ui-colors.html" class="svg-icon">
<i class="">
<svg class="svg-icon" width="18" id="iq-ui-1-7" xmlns="http://www.w3.org/2000/svg" fill="none" viewbox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 21a4 4 0 01-4-4V5a2 2 0 012-2h4a2 2 0 012 2v12a4 4 0 01-4 4zm0 0h12a2 2 0 002-2v-4a2 2 0 00-2-2h-2.343M11 7.343l1.657-1.657a2 2 0 012.828 0l2.829 2.829a2 2 0 010 2.828l-8.486 8.485M7 17h.01" style="stroke-dasharray: 97, 117; stroke-dashoffset: 0;"></path>
</svg>
</i><span class="">Colors</span>
</a>
</li>
<li class=" sidebar-layout">
<a href="ui-cards.html" class="svg-icon">
<i class="">
<svg class="svg-icon" width="18" id="iq-ui-1-8" xmlns="http://www.w3.org/2000/svg" fill="none" viewbox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z" style="stroke-dasharray: 79, 99; stroke-dashoffset: 0;"></path>
</svg>
</i><span class="">Cards</span>
</a>
</li>
<li class=" sidebar-layout">
<a href="ui-carousel.html" class="svg-icon">
<i class="">
<svg class="svg-icon" width="18" id="iq-ui-1-9" xmlns="http://www.w3.org/2000/svg" fill="none" viewbox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 4v16M17 4v16M3 8h4m10 0h4M3 12h18M3 16h4m10 0h4M4 20h16a1 1 0 001-1V5a1 1 0 00-1-1H4a1 1 0 00-1 1v14a1 1 0 001 1z" style="stroke-dasharray: 133, 153; stroke-dashoffset: 0;"></path>
</svg>
</i><span class="">Carousel</span>
</a>
</li>
<li class=" sidebar-layout">
<a href="ui-grid.html" class="svg-icon">
<i class="">
<svg class="svg-icon" width="18" id="iq-ui-1-10" xmlns="http://www.w3.org/2000/svg" fill="none" viewbox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2V6zM14 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2V6zM4 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2v-2zM14 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2v-2z" style="stroke-dasharray: 83, 103; stroke-dashoffset: 0;"></path>
</svg>
</i><span class="">Grid</span>
</a>
</li>
<li class=" sidebar-layout">
<a href="ui-images.html" class="svg-icon">
<i class="">
<svg class="svg-icon" width="18" id="iq-ui-1-12" xmlns="http://www.w3.org/2000/svg" fill="none" viewbox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" style="stroke-dasharray: 85, 105; stroke-dashoffset: 0;"></path>
</svg>
</i><span class="">Images</span>
</a>
</li>
<li class=" sidebar-layout">
<a href="ui-list-group.html" class="svg-icon">
<i class="">
<svg xmlns="http://www.w3.org/2000/svg" width="18" fill="none" viewbox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 10h16M4 14h16M4 18h16"></path>
</svg>
</i><span class="">list Group</span>
</a>
</li>
<li class=" sidebar-layout">
<a href="ui-media-object.html" class="svg-icon">
<i class="">
<svg class="svg-icon" width="18" id="iq-ui-1-14" xmlns="http://www.w3.org/2000/svg" fill="none" viewbox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10" style="stroke-dasharray: 90, 110; stroke-dashoffset: 0;"></path>
</svg>
</i><span class="">Media</span>
</a>
</li>
<li class=" sidebar-layout">
<a href="ui-modal.html" class="svg-icon">
<i class="">
<svg class="svg-icon" width="18" id="iq-ui-1-15" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M12 3h7a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2h-7m0-18H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h7m0-18v18" style="stroke-dasharray: 87, 107; stroke-dashoffset: 0;">
</path>
</svg>
</i><span class="">Modal</span>
</a>
</li>
<li class=" sidebar-layout">
<a href="ui-notifications.html" class="svg-icon">
<i class="">
<svg class="svg-icon" width="18" id="iq-ui-1-16" xmlns="http://www.w3.org/2000/svg" fill="none" viewbox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9" style="stroke-dasharray: 63, 83; stroke-dashoffset: 0;"></path>
</svg>
</i><span class="">Notifications</span>
</a>
</li>
<li class=" sidebar-layout">
<a href="ui-pagination.html" class="svg-icon">
<i class="">
<svg class="svg-icon" width="18" id="iq-ui-1-17" xmlns="http://www.w3.org/2000/svg" fill="none" viewbox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 12h.01M12 12h.01M19 12h.01M6 12a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0z" style="stroke-dasharray: 19, 39; stroke-dashoffset: 0;"></path>
</svg>
</i><span class="">Pagination</span>
</a>
</li>
<li class=" sidebar-layout">
<a href="ui-popovers.html" class="svg-icon">
<i class="">
<svg xmlns="http://www.w3.org/2000/svg" width="18" fill="none" viewbox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 11l3-3m0 0l3 3m-3-3v8m0-13a9 9 0 110 18 9 9 0 010-18z"></path>
</svg>
</i><span class="">Popovers</span>
</a>
</li>
<li class=" sidebar-layout">
<a href="ui-progressbars.html" class="svg-icon">
<i class="">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" width="18" viewbox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10"></path>
</svg>
</i><span class="">Progressbars</span>
</a>
</li>
<li class=" sidebar-layout">
<a href="ui-typography.html" class="svg-icon">
<i class="">
<svg class="svg-icon" id="iq-ui-1-20" xmlns="http://www.w3.org/2000/svg" fill="none" width="18" viewbox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v1m6 11h2m-6 0h-2v4m0-11v3m0 0h.01M12 12h4.01M16 20h4M4 12h4m12 0h.01M5 8h2a1 1 0 001-1V5a1 1 0 00-1-1H5a1 1 0 00-1 1v2a1 1 0 001 1zm12 0h2a1 1 0 001-1V5a1 1 0 00-1-1h-2a1 1 0 00-1 1v2a1 1 0 001 1zM5 20h2a1 1 0 001-1v-2a1 1 0 00-1-1H5a1 1 0 00-1 1v2a1 1 0 001 1z" style="stroke-dasharray: 67, 87; stroke-dashoffset: 0;"></path>
</svg>
</i><span class="">Typography</span>
</a>
</li>
<li class=" sidebar-layout">
<a href="ui-tabs.html" class="svg-icon">
<i class="">
<svg class="svg-icon" id="iq-ui-1-21" xmlns="http://www.w3.org/2000/svg" fill="none" width="18" viewbox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 7v10c0 2.21 3.582 4 8 4s8-1.79 8-4V7M4 7c0 2.21 3.582 4 8 4s8-1.79 8-4M4 7c0-2.21 3.582-4 8-4s8 1.79 8 4m0 5c0 2.21-3.582 4-8 4s-8-1.79-8-4" style="stroke-dasharray: 98, 118; stroke-dashoffset: 0;"></path>
</svg>
</i><span class="">Tabs</span>
</a>
</li>
<li class=" sidebar-layout">
<a href="ui-tooltips.html" class="svg-icon">
<i class="">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" width="18" viewbox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 13h6m2 8H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path>
</svg>
</i><span class="">Tooltips</span>
</a>
</li>
<li class=" sidebar-layout">
<a href="ui-embed-video.html" class="svg-icon">
<i class="">
<svg class="svg-icon" id="iq-ui-1-23" xmlns="http://www.w3.org/2000/svg" fill="none" width="18" viewbox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 10l4.553-2.276A1 1 0 0121 8.618v6.764a1 1 0 01-1.447.894L15 14M5 18h8a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v8a2 2 0 002 2z" style="stroke-dasharray: 66, 86; stroke-dashoffset: 0;"></path>
</svg>
</i><span class="">Video</span>
</a>
</li>
</ul>
</li>
<li class="sidebar-layout">
<a href="#app3" class="collapsed svg-icon" data-toggle="collapse" aria-expanded="false">
<i>
<svg class="svg-icon" id="iq-form-1" width="18" xmlns="http://www.w3.org/2000/svg" fill="none" viewbox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-3 7h3m-3 4h3m-6-4h.01M9 16h.01" style="stroke-dasharray: 74, 94; stroke-dashoffset: 0;"></path>
</svg>
</i>
<span class="ml-2">Forms</span>
<svg xmlns="http://www.w3.org/2000/svg" class="svg-icon iq-arrow-right arrow-active" width="15" fill="none" viewbox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
</svg>
</a>
<ul id="app3" class="submenu collapse" data-parent="#iq-sidebar-toggle">
<li class="sidebar-layout">
<a href="#form1" class="collapsed svg-icon" data-toggle="collapse" aria-expanded="false">
<i class="">
<svg class="svg-icon" width="18" id="iq-form-1-1" xmlns="http://www.w3.org/2000/svg" fill="none" viewbox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 18h.01M7 21h10a2 2 0 002-2V5a2 2 0 00-2-2H7a2 2 0 00-2 2v14a2 2 0 002 2z" style="stroke-dasharray: 61, 81; stroke-dashoffset: 0;"></path>
</svg>
</i>
<span class="">Form Control</span>
<svg xmlns="http://www.w3.org/2000/svg" class="svg-icon iq-arrow-right arrow-active" width="15" fill="none" viewbox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
</svg>
</a>
<ul id="form1" class="submenu collapse" data-parent="#app3">
<li class=" sidebar-layout">
<a href="form-layout.html" class="svg-icon">
<i class="">
<svg xmlns="http://www.w3.org/2000/svg" width="18" fill="none" viewbox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4"></path>
</svg>
</i><span class="">Form Elements</span>
</a>
</li>
<li class=" sidebar-layout">
<a href="form-input-group.html" class="svg-icon">
<i class="">
<svg xmlns="http://www.w3.org/2000/svg" width="18" fill="none" viewbox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 13h6M3 17V7a2 2 0 012-2h6l2 2h6a2 2 0 012 2v8a2 2 0 01-2 2H5a2 2 0 01-2-2z"></path>
</svg>
</i><span class="">Form Input</span>
</a>
</li>
<li class=" sidebar-layout">
<a href="form-validation.html" class="svg-icon">
<i class="">
<svg xmlns="http://www.w3.org/2000/svg" width="18" fill="none" viewbox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"></path>
</svg>
</i><span class="">Form Validation</span>
</a>
</li>
<li class=" sidebar-layout">
<a href="form-switch.html" class="svg-icon">
<i class="">
<svg xmlns="http://www.w3.org/2000/svg" width="18" fill="none" viewbox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7h12m0 0l-4-4m4 4l-4 4m0 6H4m0 0l4 4m-4-4l4-4"></path>
</svg>
</i><span class="">Form Switch</span>
</a>
</li>
<li class=" sidebar-layout">
<a href="form-chechbox.html" class="svg-icon">
<i class="">
<svg xmlns="http://www.w3.org/2000/svg" width="18" fill="none" viewbox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
</svg>
</i><span class="">Form Checkbox</span>
</a>
</li>
<li class=" sidebar-layout">
<a href="form-radio.html" class="svg-icon">
<i class="">
<svg xmlns="http://www.w3.org/2000/svg" width="18" fill="none" viewbox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
</svg>
</i><span class="">Form Radio</span>
</a>
</li>
<li class=" sidebar-layout">
<a href="form-textarea.html" class="svg-icon">
<i class="">
<svg xmlns="http://www.w3.org/2000/svg" width="18" fill="none" viewbox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path>
</svg>
</i><span class="">Form Textarea</span>
</a>
</li>
</ul>
</li>
<li class="sidebar-layout">
<a href="#form2" class="collapsed svg-icon" data-toggle="collapse" aria-expanded="false">
<i class="">
<svg class="svg-icon" width="18" id="iq-user-1" xmlns="http://www.w3.org/2000/svg" fill="none" viewbox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"></path>
</svg>
</i>
<span class="">Form Widget</span>
<svg xmlns="http://www.w3.org/2000/svg" class="svg-icon iq-arrow-right arrow-active" width="15" fill="none" viewbox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
</svg>
</a>
<ul id="form2" class="submenu collapse" data-parent="#app3">
<li class=" sidebar-layout">
<a href="form-datepicker.html" class="svg-icon">
<i class="">
<svg xmlns="http://www.w3.org/2000/svg" width="18" fill="none" viewbox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"></path>
</svg>
</i><span class="">Datepicker</span>
</a>
</li>
<li class=" sidebar-layout">
<a href="form-select.html" class="svg-icon">
<i class="">
<svg xmlns="http://www.w3.org/2000/svg" width="18" fill="none" viewbox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 15l-2 5L9 9l11 4-5 2zm0 0l5 5M7.188 2.239l.777 2.897M5.136 7.965l-2.898-.777M13.95 4.05l-2.122 2.122m-5.657 5.656l-2.12 2.122"></path>
</svg>
</i><span class="">Select2</span>
</a>
</li>
<li class=" sidebar-layout">
<a href="form-file-uploader.html" class="svg-icon">
<i class="">
<svg xmlns="http://www.w3.org/2000/svg" width="18" fill="none" viewbox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12"></path>
</svg>
</i><span class="">File Upload</span>
</a>
</li>
<li class=" sidebar-layout">
<a href="form-quill.html" class="svg-icon">
<i class="">
<svg xmlns="http://www.w3.org/2000/svg" width="18" fill="none" viewbox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path>
</svg>
</i><span class="">Form quill</span>
</a>
</li>
</ul>
</li>
</ul>
</li>
<li class="sidebar-layout">
<a href="#app5" class="collapsed svg-icon" data-toggle="collapse" aria-expanded="false">
<i>
<svg xmlns="http://www.w3.org/2000/svg" width="18" fill="none" viewbox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 10h18M3 14h18m-9-4v8m-7 0h14a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v8a2 2 0 002 2z"></path>
</svg>
</i>
<span class="ml-2">Table</span>
<svg xmlns="http://www.w3.org/2000/svg" class="svg-icon iq-arrow-right arrow-active" width="15" fill="none" viewbox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
</svg>
</a>
<ul id="app5" class="submenu collapse" data-parent="#iq-sidebar-toggle">
<li class=" sidebar-layout">
<a href="tables-basic.html" class="svg-icon">
<i class="">
<svg xmlns="http://www.w3.org/2000/svg" width="18" fill="none" viewbox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 17V7m0 10a2 2 0 01-2 2H5a2 2 0 01-2-2V7a2 2 0 012-2h2a2 2 0 012 2m0 10a2 2 0 002 2h2a2 2 0 002-2M9 7a2 2 0 012-2h2a2 2 0 012 2m0 10V7m0 10a2 2 0 002 2h2a2 2 0 002-2V7a2 2 0 00-2-2h-2a2 2 0 00-2 2"></path>
</svg>
</i>
<span class="ml-2">Basic Tables</span>
</a>
</li>
<li class=" sidebar-layout">
<a href="table-data.html" class="svg-icon">
<i class="">
<svg xmlns="http://www.w3.org/2000/svg" width="18" fill="none" viewbox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 7v10c0 2.21 3.582 4 8 4s8-1.79 8-4V7M4 7c0 2.21 3.582 4 8 4s8-1.79 8-4M4 7c0-2.21 3.582-4 8-4s8 1.79 8 4m0 5c0 2.21-3.582 4-8 4s-8-1.79-8-4"></path>
</svg>
</i>
<span class="ml-2">Data Table</span>
</a>
</li>
<li class=" sidebar-layout">
<a href="table-editable.html" class="svg-icon">
<i class="">
<svg xmlns="http://www.w3.org/2000/svg" width="18" fill="none" viewbox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7v8a2 2 0 002 2h6M8 7V5a2 2 0 012-2h4.586a1 1 0 01.707.293l4.414 4.414a1 1 0 01.293.707V15a2 2 0 01-2 2h-2M8 7H6a2 2 0 00-2 2v10a2 2 0 002 2h8a2 2 0 002-2v-2"></path>
</svg>
</i>
<span class="ml-2">Editable Table</span>
</a>
</li>
</ul>
</li>
<li class=" sidebar-layout">
<a href="chart-apex.html" class="svg-icon">
<i class="">
<svg class="svg-icon" id="iq-chart-1" width="18" xmlns="http://www.w3.org/2000/svg" fill="none" viewbox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 13v-1m4 1v-3m4 3V8M8 21l4-4 4 4M3 4h18M4 4h16v12a1 1 0 01-1 1H5a1 1 0 01-1-1V4z" style="stroke-dasharray: 96, 116; stroke-dashoffset: 0;"></path>
</svg>
</i>
<span class="ml-2">Chart</span>
</a>
</li>
<li class=" sidebar-layout">
<a href="icon-heroicon.html" class="svg-icon">
<i class="">
<svg xmlns="http://www.w3.org/2000/svg" width="18" fill="none" viewbox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 10l-2 1m0 0l-2-1m2 1v2.5M20 7l-2 1m2-1l-2-1m2 1v2.5M14 4l-2-1-2 1M4 7l2-1M4 7l2 1M4 7v2.5M12 21l-2-1m2 1l2-1m-2 1v-2.5M6 18l-2-1v-2.5M18 18l2-1v-2.5"></path>
</svg>
</i>
<span class="ml-2">Icon</span>
</a>
</li>
</ul>
</nav>
<div class="pt-5 pb-5"></div>
</div>
</div>
<div class="iq-top-navbar">
<div class="iq-navbar-custom">
<nav class="navbar navbar-expand-lg navbar-light p-0">
<div class="side-menu-bt-sidebar">
<svg xmlns="http://www.w3.org/2000/svg" class="text-secondary wrapper-menu" width="30" fill="none" viewbox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path>
</svg>
</div>
<div class="d-flex align-items-center">
<div class="change-mode">
<div class="custom-control custom-switch custom-switch-icon custom-control-inline">
<div class="custom-switch-inner">
<p class="mb-0"> </p>
<input type="checkbox" class="custom-control-input" id="dark-mode" data-active="true">
<label class="custom-control-label" for="dark-mode" data-mode="toggle">
<span class="switch-icon-right">
<svg xmlns="http://www.w3.org/2000/svg" id="h-moon" height="20" width="20" class="h-6 w-6" fill="none" viewbox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z"></path>
</svg>
</span>
<span class="switch-icon-left">
<svg xmlns="http://www.w3.org/2000/svg" id="h-sun" height="20" width="20" class="h-6 w-6" fill="none" viewbox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z"></path>
</svg>
</span>
</label>
</div>
</div>
</div>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-label="Toggle navigation">
<svg xmlns="http://www.w3.org/2000/svg" class="text-secondary" width="30" fill="none" viewbox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16m-7 6h7"></path>
</svg>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav ml-auto navbar-list align-items-center">
<li class="nav-item nav-icon dropdown">
<a href="#" class="search-toggle dropdown-toggle" id="notification-dropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" class="h-6 w-6 text-secondary" fill="none" viewbox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9"></path>
</svg>
<span class="bg-primary"></span>
</a>
<div class="iq-sub-dropdown dropdown-menu" aria-labelledby="notification-dropdown">
<div class="card shadow-none m-0 border-0">
<div class="p-3 card-header-border">
<h6 class="text-center">
Notifications
</h6>
</div>
<div class="card-body overflow-auto card-header-border p-0 card-body-list" style="max-height: 500px;">
<ul class="dropdown-menu-1 overflow-auto list-style-1 mb-0">
<li class="dropdown-item-1 float-none p-3">
<div class="list-item d-flex justify-content-start align-items-start">
<div class="avatar">
<div class="avatar-img avatar-danger avatar-20">
<span>
<svg class="icon line" width="30" height="30" id="cart-alt1" stroke="white" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24"><path d="M3,3H5.32a1,1,0,0,1,.93.63L10,13,8.72,15.55A1,1,0,0,0,9.62,17H19" style="fill: none;stroke-linecap: round; stroke-linejoin: round; stroke-width: 2;"></path><polyline points="10 13 18.2 13 21 6" style="fill: none;stroke-linecap: round; stroke-linejoin: round; stroke-width: 2;"></polyline><line x1="20.8" y1="6" x2="7.2" y2="6" style="fill: none;stroke-linecap: round; stroke-linejoin: round; stroke-width: 2;"></line><circle cx="10.5" cy="20.5" r="0.5" style="fill: none;stroke-miterlimit: 10; stroke-width: 2;"></circle><circle cx="16.5" cy="20.5" r="0.5" style="fill: none;stroke-miterlimit: 10; stroke-width: 2;"></circle></svg>
</span>
</div>
</div>
<div class="list-style-detail ml-2 mr-2">
<h6 class="font-weight-bold">Your order is placed</h6>
<p class="m-0">
<small class="text-secondary">If several languages coalesce</small>
</p>
<p class="m-0">
<small class="text-secondary">
<svg xmlns="http://www.w3.org/2000/svg" class="text-secondary mr-1" width="15" fill="none" viewbox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path>
</svg>
3 hours ago</small>
</p>
</div>
</div>
</li>
<li class="dropdown-item-1 float-none p-3">
<div class="list-item d-flex justify-content-start align-items-start">
<div class="avatar">
<div class="avatar-img avatar-success avatar-20">
<span><img class="avatar is-squared rounded-circle" src="static/picture/2.jpg" alt="2.jpg"></span>
</div>
</div>
<div class="list-style-detail ml-2 mr-2">
<h6 class="font-weight-bold">New message form cate</h6>
<p class="m-0">
<small class="text-secondary">You have 3 unreded messages</small>
</p>
<p class="m-0">
<small class="text-secondary">
<svg xmlns="http://www.w3.org/2000/svg" class="text-secondary mr-1" width="15" fill="none" viewbox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path>
</svg>
5 hours ago</small>
</p>
</div>
</div>
</li>
<li class="dropdown-item-1 float-none p-3">
<div class="list-item d-flex justify-content-start align-items-start">
<div class="avatar">
<div class="avatar-img avatar-warning avatar-20">
<span>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="30" height="30" stroke="white" id="Capa_1" x="0px" y="0px" viewbox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">
<g>
<g>
<path d="M386.689,304.403c-35.587,0-64.538,28.951-64.538,64.538s28.951,64.538,64.538,64.538 c35.593,0,64.538-28.951,64.538-64.538S422.276,304.403,386.689,304.403z M386.689,401.21c-17.796,0-32.269-14.473-32.269-32.269 c0-17.796,14.473-32.269,32.269-32.269c17.796,0,32.269,14.473,32.269,32.269C418.958,386.738,404.485,401.21,386.689,401.21z"></path>
</g>
</g>
<g>
<g>
<path d="M166.185,304.403c-35.587,0-64.538,28.951-64.538,64.538s28.951,64.538,64.538,64.538s64.538-28.951,64.538-64.538 S201.772,304.403,166.185,304.403z M166.185,401.21c-17.796,0-32.269-14.473-32.269-32.269c0-17.796,14.473-32.269,32.269-32.269 c17.791,0,32.269,14.473,32.269,32.269C198.454,386.738,183.981,401.21,166.185,401.21z"></path>
</g>
</g>
<g>
<g>
<path d="M430.15,119.675c-2.743-5.448-8.32-8.885-14.419-8.885h-84.975v32.269h75.025l43.934,87.384l28.838-14.5L430.15,119.675z"></path>
</g>
</g>
<g>
<g>
<rect x="216.202" y="353.345" width="122.084" height="32.269"></rect>
</g>
</g>
<g>
<g>
<path d="M117.781,353.345H61.849c-8.912,0-16.134,7.223-16.134,16.134c0,8.912,7.223,16.134,16.134,16.134h55.933 c8.912,0,16.134-7.223,16.134-16.134C133.916,360.567,126.693,353.345,117.781,353.345z"></path>
</g>
</g>
<g>
<g>
<path d="M508.612,254.709l-31.736-40.874c-3.049-3.937-7.755-6.239-12.741-6.239H346.891V94.655 c0-8.912-7.223-16.134-16.134-16.134H61.849c-8.912,0-16.134,7.223-16.134,16.134s7.223,16.134,16.134,16.134h252.773v112.941 c0,8.912,7.223,16.134,16.134,16.134h125.478l23.497,30.268v83.211h-44.639c-8.912,0-16.134,7.223-16.134,16.134 c0,8.912,7.223,16.134,16.134,16.134h60.773c8.912,0,16.134-7.223,16.135-16.134V264.605 C512,261.023,510.806,257.538,508.612,254.709z"></path>
</g>
</g>
<g>
<g>
<path d="M116.706,271.597H42.487c-8.912,0-16.134,7.223-16.134,16.134c0,8.912,7.223,16.134,16.134,16.134h74.218 c8.912,0,16.134-7.223,16.134-16.134C132.84,278.82,125.617,271.597,116.706,271.597z"></path>
</g>
</g>
<g>
<g>
<path d="M153.815,208.134H16.134C7.223,208.134,0,215.357,0,224.269s7.223,16.134,16.134,16.134h137.681 c8.912,0,16.134-7.223,16.134-16.134S162.727,208.134,153.815,208.134z"></path>
</g>
</g>
<g>
<g>
<path d="M180.168,144.672H42.487c-8.912,0-16.134,7.223-16.134,16.134c0,8.912,7.223,16.134,16.134,16.134h137.681 c8.912,0,16.134-7.223,16.134-16.134C196.303,151.895,189.08,144.672,180.168,144.672z"></path>
</g>
</g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g> </svg>
</span>
</div>
</div>
<div class="list-style-detail ml-2 mr-2">
<h6 class="font-weight-bold">Your item is shipped</h6>
<p class="m-0">
<small class="text-secondary">You got new order of goods</small>
</p>
<p class="m-0">
<small class="text-secondary">
<svg xmlns="http://www.w3.org/2000/svg" class="text-secondary mr-1" width="15" fill="none" viewbox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path>
</svg>
5 hours ago</small>
</p>
</div>
</div>
</li>
</ul>
</div>
<div class="card-footer text-muted p-3">
<p class="mb-0 text-primary text-center font-weight-bold">Show all notifications</p>
</div>
</div>
</div>
</li>
<li class="nav-item nav-icon dropdown">
<a href="#" class="search-toggle dropdown-toggle" id="dropdownMenuButton2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<img src="static/picture/flag001.png" class="img-fluid rounded-circle" alt="user" style="height: 30px; min-width: 30px; width: 30px;">
<span class="bg-primary"></span>
</a>
<div class="iq-sub-dropdown dropdown-menu" aria-labelledby="dropdownMenuButton2">
<div class="card shadow-none m-0 border-0">
<div class=" p-0 ">
<ul class="dropdown-menu-1 list-group list-group-flush">
<li class="dropdown-item-1 list-group-item px-2"><a class="p-0" href="#"><img src="static/picture/flag-03.png" alt="img-flaf" class="img-fluid mr-2" style="width: 15px;height: 15px;min-width: 15px;">Spanish</a></li>
<li class="dropdown-item-1 list-group-item px-2"><a class="p-0" href="#"><img src="static/picture/flag-04.png" alt="img-flaf" class="img-fluid mr-2" style="width: 15px;height: 15px;min-width: 15px;">Italian</a></li>
<li class="dropdown-item-1 list-group-item px-2"><a class="p-0" href="#"><img src="static/picture/flag-02.png" alt="img-flaf" class="img-fluid mr-2" style="width: 15px;height: 15px;min-width: 15px;">French</a></li>
<li class="dropdown-item-1 list-group-item px-2"><a class="p-0" href="#"><img src="static/picture/flag-05.png" alt="img-flaf" class="img-fluid mr-2" style="width: 15px;height: 15px;min-width: 15px;">German</a></li>
<li class="dropdown-item-1 list-group-item px-2"><a class="p-0" href="#"><img src="static/picture/flag-06.png" alt="img-flaf" class="img-fluid mr-2" style="width: 15px;height: 15px;min-width: 15px;">Japanese</a></li>
</ul>
</div>
</div>
</div>
</li>
<li class="nav-item nav-icon search-content">
<a href="#" class="search-toggle rounded" id="dropdownSearch" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<svg class="svg-icon text-secondary" id="h-suns" height="25" width="25" xmlns="http://www.w3.org/2000/svg" fill="none" viewbox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
</svg>
</a>
<div class="iq-search-bar iq-sub-dropdown dropdown-menu" aria-labelledby="dropdownSearch">
<form action="#" class="searchbox p-2">
<div class="form-group mb-0 position-relative">
<input type="text" class="text search-input font-size-12" placeholder="type here to search...">
<a href="#" class="search-link">
<svg xmlns="http://www.w3.org/2000/svg" class="" width="20" fill="none" viewbox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
</svg>
</a>
</div>
</form>
</div>
</li>
<li class="nav-item nav-icon dropdown">
<a href="#" class="nav-item nav-icon dropdown-toggle pr-0 search-toggle" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<img src="static/picture/1.jpg" class="img-fluid avatar-rounded" alt="user">
<span class="mb-0 ml-2 user-name">John Doe</span>
</a>
<ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownMenuButton">
<li class="dropdown-item d-flex svg-icon">
<svg class="svg-icon mr-0 text-secondary" id="h-01-p" width="20" xmlns="http://www.w3.org/2000/svg" fill="none" viewbox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5.121 17.804A13.937 13.937 0 0112 16c2.5 0 4.847.655 6.879 1.804M15 10a3 3 0 11-6 0 3 3 0 016 0zm6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
</svg>
<a href="user-profile.html">My Profile</a>
</li>
<li class="dropdown-item d-flex svg-icon">
<svg class="svg-icon mr-0 text-secondary" id="h-02-p" width="20" xmlns="http://www.w3.org/2000/svg" fill="none" viewbox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"></path>
</svg>
<a href="user-profile-edit.html">Edit Profile</a>
</li>
<li class="dropdown-item d-flex svg-icon">
<svg class="svg-icon mr-0 text-secondary" id="h-03-p" width="20" xmlns="http://www.w3.org/2000/svg" fill="none" viewbox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"></path>
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path>
</svg>
<a href="user-account-setting.html">Account Settings</a>
</li>
<li class="dropdown-item d-flex svg-icon">
<svg class="svg-icon mr-0 text-secondary" id="h-04-p" width="20" xmlns="http://www.w3.org/2000/svg" fill="none" viewbox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"></path>
</svg>
<a href="user-privacy-setting.html">Privacy Settings</a>
</li>
<li class="dropdown-item d-flex svg-icon border-top">
<svg class="svg-icon mr-0 text-secondary" id="h-05-p" width="20" xmlns="http://www.w3.org/2000/svg" fill="none" viewbox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1"></path>
</svg>
<a href="auth-sign-in.html">Logout</a>
</li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
</div>
</div>
<div class="content-page">
<div class="container-fluid">
<div class="row">
<div class="col-lg-12">
<div class="d-flex flex-wrap align-items-center justify-content-between my-schedule mb-4">
<div class="d-flex align-items-center justify-content-between">
<h4>Set Your weekly hours</h4>
</div>
<div class="create-workform">
<button type="button" class="btn btn-primary position-relative d-flex align-items-center justify-content-between" data-toggle="modal" data-target="#exampleModal">
<svg xmlns="http://www.w3.org/2000/svg" class="mr-2" width="20" fill="none" viewbox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6"></path>
</svg>
Add New Event
</button>
</div>
</div>
<div class="row">
<div class="col-lg-12">
<div class="card card-block card-stretch">
<div class="card-body">
<div id="calendar1" class="calendar-s"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-body">
<div class="d-flex justify-content-between align-items-center pb-3">
<h5 class="modal-title" id="exampleModalLabel">Add New Event</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="row">
<div class="col-md-12 mb-3">
<label for="Text1" class="form-label font-weight-bold text-muted text-uppercase">Event Title</label>
<input type="text" class="form-control" id="Text1" placeholder="Enter Event Title">
</div>
<div class="col-md-12">
<label class="form-label font-weight-bold text-muted text-uppercase">Date & Time</label>
</div>
<div class="col-md-6 mb-3">
<div class="input-group">
<input type="text" class="form-control vanila-datepicker" name="range-start" placeholder="Start Date">
<div class="input-group-append">
<span class="input-group-text">
<svg xmlns="http://www.w3.org/2000/svg" class="" width="18" fill="none" viewbox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"></path>
</svg>
</span>
</div>
</div>
</div>
<div class="col-md-6 mb-3">
<div class="input-group">
<input type="text" class="form-control vanila-datepicker" name="range-end" placeholder="End Date">
<div class="input-group-append">
<span class="input-group-text">
<svg xmlns="http://www.w3.org/2000/svg" class="" width="18" fill="none" viewbox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"></path>
</svg>
</span>
</div>
</div>
</div>
<div class="col-md-12 mb-3">
<div class="form-check form-check-inline">
<div class="custom-control custom-checkbox custom-control-inline">
<input type="checkbox" class="custom-control-input m-0" id="inlineCheckbox1">
<label class="custom-control-label" for="inlineCheckbox1">All Day</label>
</div>
</div>
<div class="form-check form-check-inline">
<div class="custom-control custom-checkbox custom-control-inline">
<input type="checkbox" class="custom-control-input m-0" id="inlineCheckbox2" checked="">
<label class="custom-control-label" for="inlineCheckbox2">Does not repeat</label>
</div>
</div>
</div>
<div class="col-md-12 mb-3">
<label for="inputState" class="form-label font-weight-bold text-muted text-uppercase">Category</label>
<select id="inputState" class="form-select form-control choicesjs">
<option selected="">Select Category</option>
<option>
Appointments
</option>
<option>Birthday</option>
<option>Meetings</option>
<option>Tour</option>
<option>Anniversary</option>
</select>
</div>
<div class="col-md-12 mb-3">
<label for="Text9" class="form-label font-weight-bold text-muted text-uppercase">Description</label>
<textarea class="form-control" id="Text9" rows="2" placeholder="Enter Description"></textarea>
</div>
</div>
<div class="d-flex justify-content-end">
<button type="button" class="btn btn-primary">Add Event</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Wrapper End-->
<footer class="iq-footer">
<div class="container-fluid">
<div class="row">
<div class="col-lg-6">
<ul class="list-inline mb-0">
<li class="list-inline-item"><a href="privacy-policy.html">Privacy Policy</a></li>
<li class="list-inline-item"><a href="terms-of-service.html">Terms of Use</a></li>
</ul>
</div>
<div class="col-lg-6 text-right">
<span class="mr-1">Copyright &copy; 2021.Company name All rights reserved.<a target="_blank" href="https://sc.chinaz.com/moban/">&#x7F51;&#x9875;&#x6A21;&#x677F;</a></span>
</div>
</div>
</div>
</footer> <!-- Backend Bundle JavaScript -->
<script src="static/js/backend-bundle.min.js"></script>
<!-- Chart Custom JavaScript -->
<script src="static/js/customizer.js"></script>
<script src="static/js/sidebar.js"></script>
<!-- Flextree Javascript-->
<script src="static/js/flex-tree.min.js"></script>
<script src="static/js/tree.js"></script>
<!-- Table Treeview JavaScript -->
<script src="static/js/table-treeview.js"></script>
<!-- SweetAlert JavaScript -->
<script src="static/js/sweetalert.js"></script>
<!-- Vectoe Map JavaScript -->
<script src="static/js/vector-map-custom.js"></script>
<!-- Chart Custom JavaScript -->
<script src="static/js/chart-custom.js"></script>
<script src="static/js/01.js"></script>
<script src="static/js/02.js"></script>
<!-- slider JavaScript -->
<script src="static/js/slider.js"></script>
<!-- Emoji picker -->
<script src="static/js/index.js" type="module"></script>
<!-- Fullcalender Javascript -->
<script src='static/js/main.js'></script>
<script src='static/js/main1.js'></script>
<script src='static/js/main2.js'></script>
<script src='static/js/main3.js'></script>
<!-- app JavaScript -->
<script src="static/js/app.js"></script> </body>
</html>
\ No newline at end of file
... ...
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Datum | CRM Admin Dashboard Template</title>
<link rel="stylesheet" href="static/css/backend-plugin.min.css">
<link rel="stylesheet" href="static/css/backend.css"> </head>
<body class=" color-light ">
<!-- loader Start -->
<div id="loading">
<div id="loading-center">
</div>
</div>
<!-- loader END -->
<!-- Wrapper Start -->
<div class="wrapper">
<div class="iq-sidebar sidebar-default ">
<div class="iq-sidebar-logo d-flex align-items-end justify-content-between">
<a href="index.html" class="header-logo">
<img src="static/picture/logo.png" class="img-fluid rounded-normal light-logo" alt="logo">
<img src="static/picture/logo-dark.png" class="img-fluid rounded-normal d-none sidebar-light-img" alt="logo">
<span>Datum</span>
</a>
<div class="side-menu-bt-sidebar-1">
<svg xmlns="http://www.w3.org/2000/svg" class="text-light wrapper-menu" width="30" fill="none" viewbox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
</svg>
</div>
</div>
<div class="data-scrollbar" data-scroll="1">
<nav class="iq-sidebar-menu">
<ul id="iq-sidebar-toggle" class="side-menu">
<li class=" sidebar-layout">
<a href="index.html" class="svg-icon">
<i class="">
<svg xmlns="http://www.w3.org/2000/svg" width="18" fill="none" viewbox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"></path>
</svg>
</i>
<span class="ml-2">Dashboard</span>
<p class="mb-0 w-10 badge badge-pill badge-primary">6</p>
</a>
</li>
<li class="px-3 pt-3 pb-2 ">
<span class="text-uppercase small font-weight-bold">Application</span>
</li>
<li class=" sidebar-layout">
<a href="customer.html" class="svg-icon ">
<i class="">
<svg xmlns="http://www.w3.org/2000/svg" width="18" fill="none" viewbox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"></path>
</svg>
</i>
<span class="ml-2">Customer</span>
</a>
</li>
<li class=" sidebar-layout">
<a href="product.html" class="svg-icon">
<i class="">
<svg xmlns="http://www.w3.org/2000/svg" width="18" fill="none" viewbox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l7 7a2 2 0 010 2.828l-7 7a2 2 0 01-2.828 0l-7-7A1.994 1.994 0 013 12V7a4 4 0 014-4z"></path>
</svg>
</i>
<span class="ml-2">Product</span>
</a>
</li>
<li class=" sidebar-layout">
<a href="order.html" class="svg-icon">
<i class="">
<svg xmlns="http://www.w3.org/2000/svg" width="18" fill="none" viewbox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 2a2 2 0 11-4 0 2 2 0 014 0z"></path>
</svg>
</i>
<span class="ml-2">Order</span>
</a>
</li>
<li class=" sidebar-layout">
<a href="invoice.html" class="svg-icon">
<i class="">
<svg class="icon line" width="18" id="receipt" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" stroke="currentColor">
<path d="M17,16V3L13,5,10,3,7,5,3,3V17.83A3.13,3.13,0,0,0,5.84,21,3,3,0,0,0,9,18V17a1,1,0,0,1,1-1H20a1,1,0,0,1,1,1v1a3,3,0,0,1-3,3H6" style="fill: none; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2;"></path>
<line x1="8" y1="10" x2="12" y2="10" style="fill: none; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2;"></line>
</svg>
</i>
<span class="ml-2">Invoice</span>
</a>
</li>
<li class=" sidebar-layout">
<a href="todo.html" class="svg-icon">
<i class="">
<svg xmlns="http://www.w3.org/2000/svg" width="18" fill="none" viewbox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4"></path>
</svg>
</i><span class="ml-2">Todo</span>
</a>
</li>
<li class=" sidebar-layout">
<a href="calendar.html" class="svg-icon">
<i class="">
<svg xmlns="http://www.w3.org/2000/svg" width="18" fill="none" viewbox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"></path>
</svg>
</i>
<span class="ml-2">Calendar</span>
<p class="mb-0 px-2 badge badge-pill badge-success">New</p>
</a>
</li>
<li class="px-3 pt-3 pb-2">
<span class="text-uppercase small font-weight-bold">Pages</span>
</li>
<li class=" sidebar-layout">
<a href="chat.html" class="svg-icon">
<i class="">
<svg xmlns="http://www.w3.org/2000/svg" width="18" fill="none" viewbox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"></path>
</svg>
</i><span class="ml-2">Chat</span>
</a>
</li>
<li class=" sidebar-layout">
<a href="user-profile.html" class="svg-icon">
<i class="">
<svg class="svg-icon" id="iq-user-1-1" xmlns="http://www.w3.org/2000/svg" fill="none" viewbox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5.121 17.804A13.937 13.937 0 0112 16c2.5 0 4.847.655 6.879 1.804M15 10a3 3 0 11-6 0 3 3 0 016 0zm6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
</svg>
</i><span class="ml-2">User Profile</span>
</a>
</li>
<li class="sidebar-layout">
<a href="#app1" class="collapsed svg-icon" data-toggle="collapse" aria-expanded="false">
<i>
<svg xmlns="http://www.w3.org/2000/svg" width="18" fill="none" viewbox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"></path>
</svg>
</i>
<span class="ml-2">Authentication</span>
<svg xmlns="http://www.w3.org/2000/svg" class="svg-icon iq-arrow-right arrow-active" width="15" fill="none" viewbox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
</svg>
</a>
<ul id="app1" class="submenu collapse" data-parent="#iq-sidebar-toggle">
<li class=" sidebar-layout">
<a href="auth-login.html" class="svg-icon">
<i class=""><svg xmlns="http://www.w3.org/2000/svg" width="18" fill="none" viewbox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 11c0 3.517-1.009 6.799-2.753 9.571m-3.44-2.04l.054-.09A13.916 13.916 0 008 11a4 4 0 118 0c0 1.017-.07 2.019-.203 3m-2.118 6.844A21.88 21.88 0 0015.171 17m3.839 1.132c.645-2.266.99-4.659.99-7.132A8 8 0 008 4.07M3 15.364c.64-1.319 1-2.8 1-4.364 0-1.457.39-2.823 1.07-4"></path>
</svg>
</i><span class="">Login</span>
</a>
</li>
<li class=" sidebar-layout">
<a href="auth-sign-up.html" class="svg-icon">
<i class="">
<svg xmlns="http://www.w3.org/2000/svg" width="18" fill="none" viewbox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4"></path>
</svg>
</i><span class="">Register</span>
</a>
</li>
<li class=" sidebar-layout">
<a href="auth-recover-pwd.html" class="svg-icon">
<i class="">
<svg xmlns="http://www.w3.org/2000/svg" width="18" fill="none" viewbox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z"></path>
</svg>
</i><span class="">Reset Password</span>
</a>
</li>
<li class=" sidebar-layout">
<a href="auth-confirm-mail.html" class="svg-icon">
<i class="">
<svg xmlns="http://www.w3.org/2000/svg" width="18" fill="none" viewbox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
</svg>
</i><span class="">Confirm Mail</span>
</a>
</li>
<li class=" sidebar-layout">
<a href="auth-lock-screen.html" class="svg-icon">
<i class="">
<svg xmlns="http://www.w3.org/2000/svg" width="18" fill="none" viewbox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"></path>
</svg>
</i><span class="">Lock Screen</span>
</a>
</li>
</ul>
</li>
<li class="sidebar-layout">
<a href="#app6" class="collapsed svg-icon" data-toggle="collapse" aria-expanded="false">
<i>
<svg xmlns="http://www.w3.org/2000/svg" width="18" fill="none" viewbox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"></path>
</svg>
</i>
<span class="ml-2">Error</span>
<svg xmlns="http://www.w3.org/2000/svg" class="svg-icon iq-arrow-right arrow-active" width="15" fill="none" viewbox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
</svg>
</a>
<ul id="app6" class="submenu collapse" data-parent="#iq-sidebar-toggle">
<li class=" sidebar-layout">
<a href="pages-error.html" class="svg-icon">
<i class="">
<svg xmlns="http://www.w3.org/2000/svg" width="18" fill="none" viewbox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 9v6m4-6v6m7-3a9 9 0 11-18 0 9 9 0 0118 0z"></path>
</svg>
</i>
<span class="ml-2">Error 404</span>
</a>
</li>
<li class=" sidebar-layout">
<a href="pages-error-500.html" class="svg-icon">
<i class="">
<svg xmlns="http://www.w3.org/2000/svg" width="18" fill="none" viewbox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M18.364 5.636a9 9 0 010 12.728m0 0l-2.829-2.829m2.829 2.829L21 21M15.536 8.464a5 5 0 010 7.072m0 0l-2.829-2.829m-4.243 2.829a4.978 4.978 0 01-1.414-2.83m-1.414 5.658a9 9 0 01-2.167-9.238m7.824 2.167a1 1 0 111.414 1.414m-1.414-1.414L3 3m8.293 8.293l1.414 1.414"></path>
</svg>
</i>
<span class="ml-2">Error 500</span>
</a>
</li>
</ul>
</li>
<li class=" sidebar-layout">
<a href="pages-comingsoon.html" class="svg-icon">
<i class="">
<svg xmlns="http://www.w3.org/2000/svg" width="18" fill="none" viewbox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19.428 15.428a2 2 0 00-1.022-.547l-2.387-.477a6 6 0 00-3.86.517l-.318.158a6 6 0 01-3.86.517L6.05 15.21a2 2 0 00-1.806.547M8 4h8l-1 1v5.172a2 2 0 00.586 1.414l5 5c1.26 1.26.367 3.414-1.415 3.414H4.828c-1.782 0-2.674-2.154-1.414-3.414l5-5A2 2 0 009 10.172V5L8 4z"></path>
</svg>
</i><span class="ml-2">Comingsoon</span>
</a>
</li>
<li class=" sidebar-layout">
<a href="pages-maintenance.html" class="svg-icon">
<i class="">
<svg xmlns="http://www.w3.org/2000/svg" width="18" fill="none" viewbox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6V4m0 2a2 2 0 100 4m0-4a2 2 0 110 4m-6 8a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4m6 6v10m6-2a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4"></path>
</svg>
</i><span class="ml-2">Maintenance</span>
</a>
</li>
<li class=" sidebar-layout">
<a href="pages-blank-page.html" class="svg-icon">
<i class="">
<svg xmlns="http://www.w3.org/2000/svg" width="18" fill="none" viewbox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"></path>
</svg>
</i><span class="ml-2">Blank Page</span>
</a>
</li>
<li class=" sidebar-layout">
<a href="pages-faq.html" class="svg-icon">
<i class="">
<svg xmlns="http://www.w3.org/2000/svg" width="18" fill="none" viewbox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H5a2 2 0 00-2 2v9a2 2 0 002 2h14a2 2 0 002-2V8a2 2 0 00-2-2h-5m-4 0V5a2 2 0 114 0v1m-4 0a2 2 0 104 0m-5 8a2 2 0 100-4 2 2 0 000 4zm0 0c1.306 0 2.417.835 2.83 2M9 14a3.001 3.001 0 00-2.83 2M15 11h3m-3 4h2"></path>
</svg>
</i><span class="ml-2">Faq</span>
</a>
</li>
<li class=" sidebar-layout">
<a href="pricing.html" class="svg-icon">
<i class="">
<svg xmlns="http://www.w3.org/2000/svg" width="18" fill="none" viewbox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
</svg>
</i><span class="ml-2">Pricing</span>
</a>
</li>
<li class=" sidebar-layout">
<a href="timeline.html" class="svg-icon">
<i class="">
<svg xmlns="http://www.w3.org/2000/svg" width="18" fill="none" viewbox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path>
</svg>
</i><span class="ml-2">Timeline</span>
</a>
</li>
<li class="px-3 pt-3 pb-2">
<span class="text-uppercase small font-weight-bold">Components</span>
</li>
<li class="sidebar-layout">
<a href="#app2" class="collapsed svg-icon" data-toggle="collapse" aria-expanded="false">
<i>
<svg class="svg-icon" id="iq-ui-1" width="18" xmlns="http://www.w3.org/2000/svg" fill="none" viewbox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 21a4 4 0 01-4-4V5a2 2 0 012-2h4a2 2 0 012 2v12a4 4 0 01-4 4zm0 0h12a2 2 0 002-2v-4a2 2 0 00-2-2h-2.343M11 7.343l1.657-1.657a2 2 0 012.828 0l2.829 2.829a2 2 0 010 2.828l-8.486 8.485M7 17h.01" style="stroke-dasharray: 97, 117; stroke-dashoffset: 0;"></path>
</svg>
</i>
<span class="ml-2">UI Elements</span>
<svg xmlns="http://www.w3.org/2000/svg" class="svg-icon iq-arrow-right arrow-active" width="15" fill="none" viewbox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
</svg>
</a>
<ul id="app2" class="submenu collapse" data-parent="#iq-sidebar-toggle">
<li class=" sidebar-layout">
<a href="ui-avatars.html" class="svg-icon">
<i class="">
<svg class="svg-icon" id="iq-ui-1-0" xmlns="http://www.w3.org/2000/svg" fill="none" viewbox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5.121 17.804A13.937 13.937 0 0112 16c2.5 0 4.847.655 6.879 1.804M15 10a3 3 0 11-6 0 3 3 0 016 0zm6 2a9 9 0 11-18 0 9 9 0 0118 0z" style="stroke-dasharray: 90, 110; stroke-dashoffset: 0;"></path>
</svg>
</i><span class="">Avatars</span>
</a>
</li>
<li class=" sidebar-layout">
<a href="ui-alerts.html" class="svg-icon">
<i class="">
<svg class="svg-icon" width="18" id="iq-ui-1-1" xmlns="http://www.w3.org/2000/svg" fill="none" viewbox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l7 7a2 2 0 010 2.828l-7 7a2 2 0 01-2.828 0l-7-7A1.994 1.994 0 013 12V7a4 4 0 014-4z" style="stroke-dasharray: 56, 76; stroke-dashoffset: 0;"></path>
</svg>
</i><span class="">Alerts</span>
</a>
</li>
<li class=" sidebar-layout">
<a href="ui-badges.html" class="svg-icon">
<i class="">
<svg class="svg-icon" width="18" id="iq-ui-1-2" xmlns="http://www.w3.org/2000/svg" fill="none" viewbox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-3 7h3m-3 4h3m-6-4h.01M9 16h.01" style="stroke-dasharray: 74, 94; stroke-dashoffset: 0;"></path>
</svg>
</i><span class="">Badges</span>
</a>
</li>
<li class=" sidebar-layout">
<a href="ui-breadcrumb.html" class="svg-icon">
<i class="">
<svg class="svg-icon" width="18" id="iq-ui-1-3" xmlns="http://www.w3.org/2000/svg" fill="none" viewbox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" style="stroke-dasharray: 48, 68; stroke-dashoffset: 0;"></path>
</svg>
</i><span class="">Breadcrumb</span>
</a>
</li>
<li class=" sidebar-layout">
<a href="ui-buttons.html" class="svg-icon">
<i class="">
<svg class="svg-icon" width="18" id="iq-ui-1-4" xmlns="http://www.w3.org/2000/svg" fill="none" viewbox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="{2}" d="M15 5v2m0 4v2m0 4v2M5 5a2 2 0 00-2 2v3a2 2 0 110 4v3a2 2 0 002 2h14a2 2 0 002-2v-3a2 2 0 110-4V7a2 2 0 00-2-2H5z" style="stroke-dasharray: 72, 92; stroke-dashoffset: 0;"></path>
</svg>
</i><span class="">Buttons</span>
</a>
</li>
<li class=" sidebar-layout">
<a href="ui-buttons-group.html" class="svg-icon">
<i class="">
<svg class="svg-icon" id="iq-ui-1-5" width="20" xmlns="http://www.w3.org/2000/svg" fill="none" viewbox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10" style="stroke-dasharray: 90, 110; stroke-dashoffset: 0;"></path>
</svg>
</i><span class="">Buttons Group</span>
</a>
</li>
<li class=" sidebar-layout">
<a href="ui-boxshadow.html" class="svg-icon">
<i class="">
<svg class="svg-icon" width="18" id="iq-ui-1-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewbox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4" style="stroke-dasharray: 84, 104; stroke-dashoffset: 0;"></path>
</svg>
</i><span class="">Box Shadow</span>
</a>
</li>
<li class=" sidebar-layout">
<a href="ui-colors.html" class="svg-icon">
<i class="">
<svg class="svg-icon" width="18" id="iq-ui-1-7" xmlns="http://www.w3.org/2000/svg" fill="none" viewbox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 21a4 4 0 01-4-4V5a2 2 0 012-2h4a2 2 0 012 2v12a4 4 0 01-4 4zm0 0h12a2 2 0 002-2v-4a2 2 0 00-2-2h-2.343M11 7.343l1.657-1.657a2 2 0 012.828 0l2.829 2.829a2 2 0 010 2.828l-8.486 8.485M7 17h.01" style="stroke-dasharray: 97, 117; stroke-dashoffset: 0;"></path>
</svg>
</i><span class="">Colors</span>
</a>
</li>
<li class=" sidebar-layout">
<a href="ui-cards.html" class="svg-icon">
<i class="">
<svg class="svg-icon" width="18" id="iq-ui-1-8" xmlns="http://www.w3.org/2000/svg" fill="none" viewbox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z" style="stroke-dasharray: 79, 99; stroke-dashoffset: 0;"></path>
</svg>
</i><span class="">Cards</span>
</a>
</li>
<li class=" sidebar-layout">
<a href="ui-carousel.html" class="svg-icon">
<i class="">
<svg class="svg-icon" width="18" id="iq-ui-1-9" xmlns="http://www.w3.org/2000/svg" fill="none" viewbox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 4v16M17 4v16M3 8h4m10 0h4M3 12h18M3 16h4m10 0h4M4 20h16a1 1 0 001-1V5a1 1 0 00-1-1H4a1 1 0 00-1 1v14a1 1 0 001 1z" style="stroke-dasharray: 133, 153; stroke-dashoffset: 0;"></path>
</svg>
</i><span class="">Carousel</span>
</a>
</li>
<li class=" sidebar-layout">
<a href="ui-grid.html" class="svg-icon">
<i class="">
<svg class="svg-icon" width="18" id="iq-ui-1-10" xmlns="http://www.w3.org/2000/svg" fill="none" viewbox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2V6zM14 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2V6zM4 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2v-2zM14 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2v-2z" style="stroke-dasharray: 83, 103; stroke-dashoffset: 0;"></path>
</svg>
</i><span class="">Grid</span>
</a>
</li>
<li class=" sidebar-layout">
<a href="ui-images.html" class="svg-icon">
<i class="">
<svg class="svg-icon" width="18" id="iq-ui-1-12" xmlns="http://www.w3.org/2000/svg" fill="none" viewbox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" style="stroke-dasharray: 85, 105; stroke-dashoffset: 0;"></path>
</svg>
</i><span class="">Images</span>
</a>
</li>
<li class=" sidebar-layout">
<a href="ui-list-group.html" class="svg-icon">
<i class="">
<svg xmlns="http://www.w3.org/2000/svg" width="18" fill="none" viewbox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 10h16M4 14h16M4 18h16"></path>
</svg>
</i><span class="">list Group</span>
</a>
</li>
<li class=" sidebar-layout">
<a href="ui-media-object.html" class="svg-icon">
<i class="">
<svg class="svg-icon" width="18" id="iq-ui-1-14" xmlns="http://www.w3.org/2000/svg" fill="none" viewbox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10" style="stroke-dasharray: 90, 110; stroke-dashoffset: 0;"></path>
</svg>
</i><span class="">Media</span>
</a>
</li>
<li class=" sidebar-layout">
<a href="ui-modal.html" class="svg-icon">
<i class="">
<svg class="svg-icon" width="18" id="iq-ui-1-15" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M12 3h7a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2h-7m0-18H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h7m0-18v18" style="stroke-dasharray: 87, 107; stroke-dashoffset: 0;">
</path>
</svg>
</i><span class="">Modal</span>
</a>
</li>
<li class=" sidebar-layout">
<a href="ui-notifications.html" class="svg-icon">
<i class="">
<svg class="svg-icon" width="18" id="iq-ui-1-16" xmlns="http://www.w3.org/2000/svg" fill="none" viewbox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9" style="stroke-dasharray: 63, 83; stroke-dashoffset: 0;"></path>
</svg>
</i><span class="">Notifications</span>
</a>
</li>
<li class=" sidebar-layout">
<a href="ui-pagination.html" class="svg-icon">
<i class="">
<svg class="svg-icon" width="18" id="iq-ui-1-17" xmlns="http://www.w3.org/2000/svg" fill="none" viewbox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 12h.01M12 12h.01M19 12h.01M6 12a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0z" style="stroke-dasharray: 19, 39; stroke-dashoffset: 0;"></path>
</svg>
</i><span class="">Pagination</span>
</a>
</li>
<li class=" sidebar-layout">
<a href="ui-popovers.html" class="svg-icon">
<i class="">
<svg xmlns="http://www.w3.org/2000/svg" width="18" fill="none" viewbox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 11l3-3m0 0l3 3m-3-3v8m0-13a9 9 0 110 18 9 9 0 010-18z"></path>
</svg>
</i><span class="">Popovers</span>
</a>
</li>
<li class=" sidebar-layout">
<a href="ui-progressbars.html" class="svg-icon">
<i class="">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" width="18" viewbox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10"></path>
</svg>
</i><span class="">Progressbars</span>
</a>
</li>
<li class=" sidebar-layout">
<a href="ui-typography.html" class="svg-icon">
<i class="">
<svg class="svg-icon" id="iq-ui-1-20" xmlns="http://www.w3.org/2000/svg" fill="none" width="18" viewbox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v1m6 11h2m-6 0h-2v4m0-11v3m0 0h.01M12 12h4.01M16 20h4M4 12h4m12 0h.01M5 8h2a1 1 0 001-1V5a1 1 0 00-1-1H5a1 1 0 00-1 1v2a1 1 0 001 1zm12 0h2a1 1 0 001-1V5a1 1 0 00-1-1h-2a1 1 0 00-1 1v2a1 1 0 001 1zM5 20h2a1 1 0 001-1v-2a1 1 0 00-1-1H5a1 1 0 00-1 1v2a1 1 0 001 1z" style="stroke-dasharray: 67, 87; stroke-dashoffset: 0;"></path>
</svg>
</i><span class="">Typography</span>
</a>
</li>
<li class=" sidebar-layout">
<a href="ui-tabs.html" class="svg-icon">
<i class="">
<svg class="svg-icon" id="iq-ui-1-21" xmlns="http://www.w3.org/2000/svg" fill="none" width="18" viewbox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 7v10c0 2.21 3.582 4 8 4s8-1.79 8-4V7M4 7c0 2.21 3.582 4 8 4s8-1.79 8-4M4 7c0-2.21 3.582-4 8-4s8 1.79 8 4m0 5c0 2.21-3.582 4-8 4s-8-1.79-8-4" style="stroke-dasharray: 98, 118; stroke-dashoffset: 0;"></path>
</svg>
</i><span class="">Tabs</span>
</a>
</li>
<li class=" sidebar-layout">
<a href="ui-tooltips.html" class="svg-icon">
<i class="">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" width="18" viewbox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 13h6m2 8H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path>
</svg>
</i><span class="">Tooltips</span>
</a>
</li>
<li class=" sidebar-layout">
<a href="ui-embed-video.html" class="svg-icon">
<i class="">
<svg class="svg-icon" id="iq-ui-1-23" xmlns="http://www.w3.org/2000/svg" fill="none" width="18" viewbox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 10l4.553-2.276A1 1 0 0121 8.618v6.764a1 1 0 01-1.447.894L15 14M5 18h8a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v8a2 2 0 002 2z" style="stroke-dasharray: 66, 86; stroke-dashoffset: 0;"></path>
</svg>
</i><span class="">Video</span>
</a>
</li>
</ul>
</li>
<li class="sidebar-layout">
<a href="#app3" class="collapsed svg-icon" data-toggle="collapse" aria-expanded="false">
<i>
<svg class="svg-icon" id="iq-form-1" width="18" xmlns="http://www.w3.org/2000/svg" fill="none" viewbox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-3 7h3m-3 4h3m-6-4h.01M9 16h.01" style="stroke-dasharray: 74, 94; stroke-dashoffset: 0;"></path>
</svg>
</i>
<span class="ml-2">Forms</span>
<svg xmlns="http://www.w3.org/2000/svg" class="svg-icon iq-arrow-right arrow-active" width="15" fill="none" viewbox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
</svg>
</a>
<ul id="app3" class="submenu collapse" data-parent="#iq-sidebar-toggle">
<li class="sidebar-layout">
<a href="#form1" class="collapsed svg-icon" data-toggle="collapse" aria-expanded="false">
<i class="">
<svg class="svg-icon" width="18" id="iq-form-1-1" xmlns="http://www.w3.org/2000/svg" fill="none" viewbox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 18h.01M7 21h10a2 2 0 002-2V5a2 2 0 00-2-2H7a2 2 0 00-2 2v14a2 2 0 002 2z" style="stroke-dasharray: 61, 81; stroke-dashoffset: 0;"></path>
</svg>
</i>
<span class="">Form Control</span>
<svg xmlns="http://www.w3.org/2000/svg" class="svg-icon iq-arrow-right arrow-active" width="15" fill="none" viewbox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
</svg>
</a>
<ul id="form1" class="submenu collapse" data-parent="#app3">
<li class=" sidebar-layout">
<a href="form-layout.html" class="svg-icon">
<i class="">
<svg xmlns="http://www.w3.org/2000/svg" width="18" fill="none" viewbox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4"></path>
</svg>
</i><span class="">Form Elements</span>
</a>
</li>
<li class=" sidebar-layout">
<a href="form-input-group.html" class="svg-icon">
<i class="">
<svg xmlns="http://www.w3.org/2000/svg" width="18" fill="none" viewbox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 13h6M3 17V7a2 2 0 012-2h6l2 2h6a2 2 0 012 2v8a2 2 0 01-2 2H5a2 2 0 01-2-2z"></path>
</svg>
</i><span class="">Form Input</span>
</a>
</li>
<li class=" sidebar-layout">
<a href="form-validation.html" class="svg-icon">
<i class="">
<svg xmlns="http://www.w3.org/2000/svg" width="18" fill="none" viewbox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"></path>
</svg>
</i><span class="">Form Validation</span>
</a>
</li>
<li class=" sidebar-layout">
<a href="form-switch.html" class="svg-icon">
<i class="">
<svg xmlns="http://www.w3.org/2000/svg" width="18" fill="none" viewbox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7h12m0 0l-4-4m4 4l-4 4m0 6H4m0 0l4 4m-4-4l4-4"></path>
</svg>
</i><span class="">Form Switch</span>
</a>
</li>
<li class=" sidebar-layout">
<a href="form-chechbox.html" class="svg-icon">
<i class="">
<svg xmlns="http://www.w3.org/2000/svg" width="18" fill="none" viewbox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
</svg>
</i><span class="">Form Checkbox</span>
</a>
</li>
<li class=" sidebar-layout">
<a href="form-radio.html" class="svg-icon">
<i class="">
<svg xmlns="http://www.w3.org/2000/svg" width="18" fill="none" viewbox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
</svg>
</i><span class="">Form Radio</span>
</a>
</li>
<li class=" sidebar-layout">
<a href="form-textarea.html" class="svg-icon">
<i class="">
<svg xmlns="http://www.w3.org/2000/svg" width="18" fill="none" viewbox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path>
</svg>
</i><span class="">Form Textarea</span>
</a>
</li>
</ul>
</li>
<li class="sidebar-layout">
<a href="#form2" class="collapsed svg-icon" data-toggle="collapse" aria-expanded="false">
<i class="">
<svg class="svg-icon" width="18" id="iq-user-1" xmlns="http://www.w3.org/2000/svg" fill="none" viewbox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"></path>
</svg>
</i>
<span class="">Form Widget</span>
<svg xmlns="http://www.w3.org/2000/svg" class="svg-icon iq-arrow-right arrow-active" width="15" fill="none" viewbox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
</svg>
</a>
<ul id="form2" class="submenu collapse" data-parent="#app3">
<li class=" sidebar-layout">
<a href="form-datepicker.html" class="svg-icon">
<i class="">
<svg xmlns="http://www.w3.org/2000/svg" width="18" fill="none" viewbox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"></path>
</svg>
</i><span class="">Datepicker</span>
</a>
</li>
<li class=" sidebar-layout">
<a href="form-select.html" class="svg-icon">
<i class="">
<svg xmlns="http://www.w3.org/2000/svg" width="18" fill="none" viewbox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 15l-2 5L9 9l11 4-5 2zm0 0l5 5M7.188 2.239l.777 2.897M5.136 7.965l-2.898-.777M13.95 4.05l-2.122 2.122m-5.657 5.656l-2.12 2.122"></path>
</svg>
</i><span class="">Select2</span>
</a>
</li>
<li class=" sidebar-layout">
<a href="form-file-uploader.html" class="svg-icon">
<i class="">
<svg xmlns="http://www.w3.org/2000/svg" width="18" fill="none" viewbox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12"></path>
</svg>
</i><span class="">File Upload</span>
</a>
</li>
<li class=" sidebar-layout">
<a href="form-quill.html" class="svg-icon">
<i class="">
<svg xmlns="http://www.w3.org/2000/svg" width="18" fill="none" viewbox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path>
</svg>
</i><span class="">Form quill</span>
</a>
</li>
</ul>
</li>
</ul>
</li>
<li class="sidebar-layout">
<a href="#app5" class="collapsed svg-icon" data-toggle="collapse" aria-expanded="false">
<i>
<svg xmlns="http://www.w3.org/2000/svg" width="18" fill="none" viewbox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 10h18M3 14h18m-9-4v8m-7 0h14a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v8a2 2 0 002 2z"></path>
</svg>
</i>
<span class="ml-2">Table</span>
<svg xmlns="http://www.w3.org/2000/svg" class="svg-icon iq-arrow-right arrow-active" width="15" fill="none" viewbox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
</svg>
</a>
<ul id="app5" class="submenu collapse" data-parent="#iq-sidebar-toggle">
<li class=" sidebar-layout">
<a href="tables-basic.html" class="svg-icon">
<i class="">
<svg xmlns="http://www.w3.org/2000/svg" width="18" fill="none" viewbox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 17V7m0 10a2 2 0 01-2 2H5a2 2 0 01-2-2V7a2 2 0 012-2h2a2 2 0 012 2m0 10a2 2 0 002 2h2a2 2 0 002-2M9 7a2 2 0 012-2h2a2 2 0 012 2m0 10V7m0 10a2 2 0 002 2h2a2 2 0 002-2V7a2 2 0 00-2-2h-2a2 2 0 00-2 2"></path>
</svg>
</i>
<span class="ml-2">Basic Tables</span>
</a>
</li>
<li class=" sidebar-layout">
<a href="table-data.html" class="svg-icon">
<i class="">
<svg xmlns="http://www.w3.org/2000/svg" width="18" fill="none" viewbox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 7v10c0 2.21 3.582 4 8 4s8-1.79 8-4V7M4 7c0 2.21 3.582 4 8 4s8-1.79 8-4M4 7c0-2.21 3.582-4 8-4s8 1.79 8 4m0 5c0 2.21-3.582 4-8 4s-8-1.79-8-4"></path>
</svg>
</i>
<span class="ml-2">Data Table</span>
</a>
</li>
<li class=" sidebar-layout">
<a href="table-editable.html" class="svg-icon">
<i class="">
<svg xmlns="http://www.w3.org/2000/svg" width="18" fill="none" viewbox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7v8a2 2 0 002 2h6M8 7V5a2 2 0 012-2h4.586a1 1 0 01.707.293l4.414 4.414a1 1 0 01.293.707V15a2 2 0 01-2 2h-2M8 7H6a2 2 0 00-2 2v10a2 2 0 002 2h8a2 2 0 002-2v-2"></path>
</svg>
</i>
<span class="ml-2">Editable Table</span>
</a>
</li>
</ul>
</li>
<li class="active sidebar-layout">
<a href="" class="svg-icon">
<i class="">
<svg class="svg-icon" id="iq-chart-1" width="18" xmlns="http://www.w3.org/2000/svg" fill="none" viewbox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 13v-1m4 1v-3m4 3V8M8 21l4-4 4 4M3 4h18M4 4h16v12a1 1 0 01-1 1H5a1 1 0 01-1-1V4z" style="stroke-dasharray: 96, 116; stroke-dashoffset: 0;"></path>
</svg>
</i>
<span class="ml-2">Chart</span>
</a>
</li>
<li class=" sidebar-layout">
<a href="icon-heroicon.html" class="svg-icon">
<i class="">
<svg xmlns="http://www.w3.org/2000/svg" width="18" fill="none" viewbox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 10l-2 1m0 0l-2-1m2 1v2.5M20 7l-2 1m2-1l-2-1m2 1v2.5M14 4l-2-1-2 1M4 7l2-1M4 7l2 1M4 7v2.5M12 21l-2-1m2 1l2-1m-2 1v-2.5M6 18l-2-1v-2.5M18 18l2-1v-2.5"></path>
</svg>
</i>
<span class="ml-2">Icon</span>
</a>
</li>
</ul>
</nav>
<div class="pt-5 pb-5"></div>
</div>
</div>
<div class="iq-top-navbar">
<div class="iq-navbar-custom">
<nav class="navbar navbar-expand-lg navbar-light p-0">
<div class="side-menu-bt-sidebar">
<svg xmlns="http://www.w3.org/2000/svg" class="text-secondary wrapper-menu" width="30" fill="none" viewbox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path>
</svg>
</div>
<div class="d-flex align-items-center">
<div class="change-mode">
<div class="custom-control custom-switch custom-switch-icon custom-control-inline">
<div class="custom-switch-inner">
<p class="mb-0"> </p>
<input type="checkbox" class="custom-control-input" id="dark-mode" data-active="true">
<label class="custom-control-label" for="dark-mode" data-mode="toggle">
<span class="switch-icon-right">
<svg xmlns="http://www.w3.org/2000/svg" id="h-moon" height="20" width="20" class="h-6 w-6" fill="none" viewbox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z"></path>
</svg>
</span>
<span class="switch-icon-left">
<svg xmlns="http://www.w3.org/2000/svg" id="h-sun" height="20" width="20" class="h-6 w-6" fill="none" viewbox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z"></path>
</svg>
</span>
</label>
</div>
</div>
</div>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-label="Toggle navigation">
<svg xmlns="http://www.w3.org/2000/svg" class="text-secondary" width="30" fill="none" viewbox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16m-7 6h7"></path>
</svg>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav ml-auto navbar-list align-items-center">
<li class="nav-item nav-icon dropdown">
<a href="#" class="search-toggle dropdown-toggle" id="notification-dropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" class="h-6 w-6 text-secondary" fill="none" viewbox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9"></path>
</svg>
<span class="bg-primary"></span>
</a>
<div class="iq-sub-dropdown dropdown-menu" aria-labelledby="notification-dropdown">
<div class="card shadow-none m-0 border-0">
<div class="p-3 card-header-border">
<h6 class="text-center">
Notifications
</h6>
</div>
<div class="card-body overflow-auto card-header-border p-0 card-body-list" style="max-height: 500px;">
<ul class="dropdown-menu-1 overflow-auto list-style-1 mb-0">
<li class="dropdown-item-1 float-none p-3">
<div class="list-item d-flex justify-content-start align-items-start">
<div class="avatar">
<div class="avatar-img avatar-danger avatar-20">
<span>
<svg class="icon line" width="30" height="30" id="cart-alt1" stroke="white" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24"><path d="M3,3H5.32a1,1,0,0,1,.93.63L10,13,8.72,15.55A1,1,0,0,0,9.62,17H19" style="fill: none;stroke-linecap: round; stroke-linejoin: round; stroke-width: 2;"></path><polyline points="10 13 18.2 13 21 6" style="fill: none;stroke-linecap: round; stroke-linejoin: round; stroke-width: 2;"></polyline><line x1="20.8" y1="6" x2="7.2" y2="6" style="fill: none;stroke-linecap: round; stroke-linejoin: round; stroke-width: 2;"></line><circle cx="10.5" cy="20.5" r="0.5" style="fill: none;stroke-miterlimit: 10; stroke-width: 2;"></circle><circle cx="16.5" cy="20.5" r="0.5" style="fill: none;stroke-miterlimit: 10; stroke-width: 2;"></circle></svg>
</span>
</div>
</div>
<div class="list-style-detail ml-2 mr-2">
<h6 class="font-weight-bold">Your order is placed</h6>
<p class="m-0">
<small class="text-secondary">If several languages coalesce</small>
</p>
<p class="m-0">
<small class="text-secondary">
<svg xmlns="http://www.w3.org/2000/svg" class="text-secondary mr-1" width="15" fill="none" viewbox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path>
</svg>
3 hours ago</small>
</p>
</div>
</div>
</li>
<li class="dropdown-item-1 float-none p-3">
<div class="list-item d-flex justify-content-start align-items-start">
<div class="avatar">
<div class="avatar-img avatar-success avatar-20">
<span><img class="avatar is-squared rounded-circle" src="static/picture/2.jpg" alt="2.jpg"></span>
</div>
</div>
<div class="list-style-detail ml-2 mr-2">
<h6 class="font-weight-bold">New message form cate</h6>
<p class="m-0">
<small class="text-secondary">You have 3 unreded messages</small>
</p>
<p class="m-0">
<small class="text-secondary">
<svg xmlns="http://www.w3.org/2000/svg" class="text-secondary mr-1" width="15" fill="none" viewbox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path>
</svg>
5 hours ago</small>
</p>
</div>
</div>
</li>
<li class="dropdown-item-1 float-none p-3">
<div class="list-item d-flex justify-content-start align-items-start">
<div class="avatar">
<div class="avatar-img avatar-warning avatar-20">
<span>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="30" height="30" stroke="white" id="Capa_1" x="0px" y="0px" viewbox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">
<g>
<g>
<path d="M386.689,304.403c-35.587,0-64.538,28.951-64.538,64.538s28.951,64.538,64.538,64.538 c35.593,0,64.538-28.951,64.538-64.538S422.276,304.403,386.689,304.403z M386.689,401.21c-17.796,0-32.269-14.473-32.269-32.269 c0-17.796,14.473-32.269,32.269-32.269c17.796,0,32.269,14.473,32.269,32.269C418.958,386.738,404.485,401.21,386.689,401.21z"></path>
</g>
</g>
<g>
<g>
<path d="M166.185,304.403c-35.587,0-64.538,28.951-64.538,64.538s28.951,64.538,64.538,64.538s64.538-28.951,64.538-64.538 S201.772,304.403,166.185,304.403z M166.185,401.21c-17.796,0-32.269-14.473-32.269-32.269c0-17.796,14.473-32.269,32.269-32.269 c17.791,0,32.269,14.473,32.269,32.269C198.454,386.738,183.981,401.21,166.185,401.21z"></path>
</g>
</g>
<g>
<g>
<path d="M430.15,119.675c-2.743-5.448-8.32-8.885-14.419-8.885h-84.975v32.269h75.025l43.934,87.384l28.838-14.5L430.15,119.675z"></path>
</g>
</g>
<g>
<g>
<rect x="216.202" y="353.345" width="122.084" height="32.269"></rect>
</g>
</g>
<g>
<g>
<path d="M117.781,353.345H61.849c-8.912,0-16.134,7.223-16.134,16.134c0,8.912,7.223,16.134,16.134,16.134h55.933 c8.912,0,16.134-7.223,16.134-16.134C133.916,360.567,126.693,353.345,117.781,353.345z"></path>
</g>
</g>
<g>
<g>
<path d="M508.612,254.709l-31.736-40.874c-3.049-3.937-7.755-6.239-12.741-6.239H346.891V94.655 c0-8.912-7.223-16.134-16.134-16.134H61.849c-8.912,0-16.134,7.223-16.134,16.134s7.223,16.134,16.134,16.134h252.773v112.941 c0,8.912,7.223,16.134,16.134,16.134h125.478l23.497,30.268v83.211h-44.639c-8.912,0-16.134,7.223-16.134,16.134 c0,8.912,7.223,16.134,16.134,16.134h60.773c8.912,0,16.134-7.223,16.135-16.134V264.605 C512,261.023,510.806,257.538,508.612,254.709z"></path>
</g>
</g>
<g>
<g>
<path d="M116.706,271.597H42.487c-8.912,0-16.134,7.223-16.134,16.134c0,8.912,7.223,16.134,16.134,16.134h74.218 c8.912,0,16.134-7.223,16.134-16.134C132.84,278.82,125.617,271.597,116.706,271.597z"></path>
</g>
</g>
<g>
<g>
<path d="M153.815,208.134H16.134C7.223,208.134,0,215.357,0,224.269s7.223,16.134,16.134,16.134h137.681 c8.912,0,16.134-7.223,16.134-16.134S162.727,208.134,153.815,208.134z"></path>
</g>
</g>
<g>
<g>
<path d="M180.168,144.672H42.487c-8.912,0-16.134,7.223-16.134,16.134c0,8.912,7.223,16.134,16.134,16.134h137.681 c8.912,0,16.134-7.223,16.134-16.134C196.303,151.895,189.08,144.672,180.168,144.672z"></path>
</g>
</g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g> </svg>
</span>
</div>
</div>
<div class="list-style-detail ml-2 mr-2">
<h6 class="font-weight-bold">Your item is shipped</h6>
<p class="m-0">
<small class="text-secondary">You got new order of goods</small>
</p>
<p class="m-0">
<small class="text-secondary">
<svg xmlns="http://www.w3.org/2000/svg" class="text-secondary mr-1" width="15" fill="none" viewbox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path>
</svg>
5 hours ago</small>
</p>
</div>
</div>
</li>
</ul>
</div>
<div class="card-footer text-muted p-3">
<p class="mb-0 text-primary text-center font-weight-bold">Show all notifications</p>
</div>
</div>
</div>
</li>
<li class="nav-item nav-icon dropdown">
<a href="#" class="search-toggle dropdown-toggle" id="dropdownMenuButton2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<img src="static/picture/flag001.png" class="img-fluid rounded-circle" alt="user" style="height: 30px; min-width: 30px; width: 30px;">
<span class="bg-primary"></span>
</a>
<div class="iq-sub-dropdown dropdown-menu" aria-labelledby="dropdownMenuButton2">
<div class="card shadow-none m-0 border-0">
<div class=" p-0 ">
<ul class="dropdown-menu-1 list-group list-group-flush">
<li class="dropdown-item-1 list-group-item px-2"><a class="p-0" href="#"><img src="static/picture/flag-03.png" alt="img-flaf" class="img-fluid mr-2" style="width: 15px;height: 15px;min-width: 15px;">Spanish</a></li>
<li class="dropdown-item-1 list-group-item px-2"><a class="p-0" href="#"><img src="static/picture/flag-04.png" alt="img-flaf" class="img-fluid mr-2" style="width: 15px;height: 15px;min-width: 15px;">Italian</a></li>
<li class="dropdown-item-1 list-group-item px-2"><a class="p-0" href="#"><img src="static/picture/flag-02.png" alt="img-flaf" class="img-fluid mr-2" style="width: 15px;height: 15px;min-width: 15px;">French</a></li>
<li class="dropdown-item-1 list-group-item px-2"><a class="p-0" href="#"><img src="static/picture/flag-05.png" alt="img-flaf" class="img-fluid mr-2" style="width: 15px;height: 15px;min-width: 15px;">German</a></li>
<li class="dropdown-item-1 list-group-item px-2"><a class="p-0" href="#"><img src="static/picture/flag-06.png" alt="img-flaf" class="img-fluid mr-2" style="width: 15px;height: 15px;min-width: 15px;">Japanese</a></li>
</ul>
</div>
</div>
</div>
</li>
<li class="nav-item nav-icon search-content">
<a href="#" class="search-toggle rounded" id="dropdownSearch" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<svg class="svg-icon text-secondary" id="h-suns" height="25" width="25" xmlns="http://www.w3.org/2000/svg" fill="none" viewbox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
</svg>
</a>
<div class="iq-search-bar iq-sub-dropdown dropdown-menu" aria-labelledby="dropdownSearch">
<form action="#" class="searchbox p-2">
<div class="form-group mb-0 position-relative">
<input type="text" class="text search-input font-size-12" placeholder="type here to search...">
<a href="#" class="search-link">
<svg xmlns="http://www.w3.org/2000/svg" class="" width="20" fill="none" viewbox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
</svg>
</a>
</div>
</form>
</div>
</li>
<li class="nav-item nav-icon dropdown">
<a href="#" class="nav-item nav-icon dropdown-toggle pr-0 search-toggle" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<img src="static/picture/1.jpg" class="img-fluid avatar-rounded" alt="user">
<span class="mb-0 ml-2 user-name">John Doe</span>
</a>
<ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownMenuButton">
<li class="dropdown-item d-flex svg-icon">
<svg class="svg-icon mr-0 text-secondary" id="h-01-p" width="20" xmlns="http://www.w3.org/2000/svg" fill="none" viewbox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5.121 17.804A13.937 13.937 0 0112 16c2.5 0 4.847.655 6.879 1.804M15 10a3 3 0 11-6 0 3 3 0 016 0zm6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
</svg>
<a href="user-profile.html">My Profile</a>
</li>
<li class="dropdown-item d-flex svg-icon">
<svg class="svg-icon mr-0 text-secondary" id="h-02-p" width="20" xmlns="http://www.w3.org/2000/svg" fill="none" viewbox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"></path>
</svg>
<a href="user-profile-edit.html">Edit Profile</a>
</li>
<li class="dropdown-item d-flex svg-icon">
<svg class="svg-icon mr-0 text-secondary" id="h-03-p" width="20" xmlns="http://www.w3.org/2000/svg" fill="none" viewbox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"></path>
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path>
</svg>
<a href="user-account-setting.html">Account Settings</a>
</li>
<li class="dropdown-item d-flex svg-icon">
<svg class="svg-icon mr-0 text-secondary" id="h-04-p" width="20" xmlns="http://www.w3.org/2000/svg" fill="none" viewbox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"></path>
</svg>
<a href="user-privacy-setting.html">Privacy Settings</a>
</li>
<li class="dropdown-item d-flex svg-icon border-top">
<svg class="svg-icon mr-0 text-secondary" id="h-05-p" width="20" xmlns="http://www.w3.org/2000/svg" fill="none" viewbox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1"></path>
</svg>
<a href="auth-sign-in.html">Logout</a>
</li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
</div>
</div>
<div class="content-page">
<div class="container-fluid">
<div class="row">
<div class="col-sm-12 col-lg-6">
<div class="card">
<div class="card-header d-flex justify-content-between">
<div class="header-title">
<h4 class="card-title">Line Chart</h4>
</div>
</div>
<div class="card-body">
<div id="apex-basic"></div>
</div>
</div>
<div class="card">
<div class="card-header d-flex justify-content-between">
<div class="header-title">
<h4 class="card-title">Column Chart</h4>
</div>
</div>
<div class="card-body">
<div id="apex-column"></div>
</div>
</div>
<div class="card">
<div class="card-header d-flex justify-content-between">
<div class="header-title">
<h4 class="card-title">Mixes Chart</h4>
</div>
</div>
<div class="card-body">
<div id="apex-mixed-chart"></div>
</div>
</div>
<div class="card">
<div class="card-header d-flex justify-content-between">
<div class="header-title">
<h4 class="card-title"> Bubble Charts</h4>
</div>
</div>
<div class="card-body">
<div id="apex-bubble-chart"></div>
</div>
</div>
<div class="card">
<div class="card-header d-flex justify-content-between">
<div class="header-title">
<h4 class="card-title"> Pie Charts</h4>
</div>
</div>
<div class="card-body">
<div id="apex-pie-chart"></div>
</div>
</div>
</div>
<div class="col-sm-12 col-lg-6">
<div class="card">
<div class="card-header d-flex justify-content-between">
<div class="header-title">
<h4 class="card-title">Line Area Chart</h4>
</div>
</div>
<div class="card-body">
<div id="apex-line-area"></div>
</div>
</div>
<div class="card">
<div class="card-header d-flex justify-content-between">
<div class="header-title">
<h4 class="card-title">Bar Chart</h4>
</div>
</div>
<div class="card-body">
<div id="apex-bar"></div>
</div>
</div>
<div class="card">
<div class="card-header d-flex justify-content-between">
<div class="header-title">
<h4 class="card-title"> Candlestick Charts</h4>
</div>
</div>
<div class="card-body">
<div id="apex-candlestick-chart"></div>
</div>
</div>
<div class="card">
<div class="card-header d-flex justify-content-between">
<div class="header-title">
<h4 class="card-title"> Scatter Charts</h4>
</div>
</div>
<div class="card-body">
<div id="apex-scatter-chart"></div>
</div>
</div>
<div class="card">
<div class="card-header d-flex justify-content-between">
<div class="header-title">
<h4 class="card-title">Radial Bar Charts</h4>
</div>
</div>
<div class="card-body">
<div id="apex-radialbar-chart"></div>
</div>
</div>
</div>
<div class="d-flex align-items-center w-100">
<div class="col-lg-6">
<div class="card">
<div class="card-header d-flex justify-content-between">
<div class="header-title">
<h4 class="card-title">Advanced Charts</h4>
</div>
</div>
<div class="card-body">
<div id="advanced-chart"></div>
</div>
</div>
</div>
<div class="col-lg-6">
<div class="card">
<div class="card-header d-flex justify-content-between">
<div class="header-title">
<h4 class="card-title">Radar Multiple Charts</h4>
</div>
</div>
<div class="card-body">
<div id="radar-multiple-chart"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Wrapper End-->
<footer class="iq-footer">
<div class="container-fluid">
<div class="row">
<div class="col-lg-6">
<ul class="list-inline mb-0">
<li class="list-inline-item"><a href="privacy-policy.html">Privacy Policy</a></li>
<li class="list-inline-item"><a href="terms-of-service.html">Terms of Use</a></li>
</ul>
</div>
<div class="col-lg-6 text-right">
<span class="mr-1">Copyright &copy; 2021.Company name All rights reserved.<a target="_blank" href="https://sc.chinaz.com/moban/">&#x7F51;&#x9875;&#x6A21;&#x677F;</a></span>
</div>
</div>
</div>
</footer> <!-- Backend Bundle JavaScript -->
<script src="static/js/backend-bundle.min.js"></script>
<!-- Chart Custom JavaScript -->
<script src="static/js/customizer.js"></script>
<script src="static/js/sidebar.js"></script>
<!-- Flextree Javascript-->
<script src="static/js/flex-tree.min.js"></script>
<script src="static/js/tree.js"></script>
<!-- Table Treeview JavaScript -->
<script src="static/js/table-treeview.js"></script>
<!-- SweetAlert JavaScript -->
<script src="static/js/sweetalert.js"></script>
<!-- Vectoe Map JavaScript -->
<script src="static/js/vector-map-custom.js"></script>
<!-- Chart Custom JavaScript -->
<script src="static/js/chart-custom.js"></script>
<script src="static/js/01.js"></script>
<script src="static/js/02.js"></script>
<!-- slider JavaScript -->
<script src="static/js/slider.js"></script>
<!-- Emoji picker -->
<script src="static/js/index.js" type="module"></script>
<!-- app JavaScript -->
<script src="static/js/app.js"></script> </body>
</html>
\ No newline at end of file
... ...
This diff could not be displayed because it is too large.
This diff could not be displayed because it is too large.
This diff could not be displayed because it is too large.
This diff could not be displayed because it is too large.
This diff could not be displayed because it is too large.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Datum | CRM Admin Dashboard Template</title>
<link rel="stylesheet" href="static/css/backend-plugin.min.css">
<link rel="stylesheet" href="static/css/backend.css"> </head>
<body class=" color-light ">
<!-- loader Start -->
<div id="loading">
<div id="loading-center">
</div>
</div>
<!-- loader END -->
<!-- Wrapper Start -->
<div class="wrapper">
<div class="iq-sidebar sidebar-default ">
<div class="iq-sidebar-logo d-flex align-items-end justify-content-between">
<a href="index.html" class="header-logo">
<img src="static/picture/logo.png" class="img-fluid rounded-normal light-logo" alt="logo">
<img src="static/picture/logo-dark.png" class="img-fluid rounded-normal d-none sidebar-light-img" alt="logo">
<span>Datum</span>
</a>
<div class="side-menu-bt-sidebar-1">
<svg xmlns="http://www.w3.org/2000/svg" class="text-light wrapper-menu" width="30" fill="none" viewbox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
</svg>
</div>
</div>
<div class="data-scrollbar" data-scroll="1">
<nav class="iq-sidebar-menu">
<ul id="iq-sidebar-toggle" class="side-menu">
<li class=" sidebar-layout">
<a href="index.html" class="svg-icon">
<i class="">
<svg xmlns="http://www.w3.org/2000/svg" width="18" fill="none" viewbox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"></path>
</svg>
</i>
<span class="ml-2">Dashboard</span>
<p class="mb-0 w-10 badge badge-pill badge-primary">6</p>
</a>
</li>
<li class="px-3 pt-3 pb-2 ">
<span class="text-uppercase small font-weight-bold">Application</span>
</li>
<li class=" sidebar-layout">
<a href="customer.html" class="svg-icon ">
<i class="">
<svg xmlns="http://www.w3.org/2000/svg" width="18" fill="none" viewbox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"></path>
</svg>
</i>
<span class="ml-2">Customer</span>
</a>
</li>
<li class=" sidebar-layout">
<a href="product.html" class="svg-icon">
<i class="">
<svg xmlns="http://www.w3.org/2000/svg" width="18" fill="none" viewbox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l7 7a2 2 0 010 2.828l-7 7a2 2 0 01-2.828 0l-7-7A1.994 1.994 0 013 12V7a4 4 0 014-4z"></path>
</svg>
</i>
<span class="ml-2">Product</span>
</a>
</li>
<li class=" sidebar-layout">
<a href="order.html" class="svg-icon">
<i class="">
<svg xmlns="http://www.w3.org/2000/svg" width="18" fill="none" viewbox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 2a2 2 0 11-4 0 2 2 0 014 0z"></path>
</svg>
</i>
<span class="ml-2">Order</span>
</a>
</li>
<li class=" sidebar-layout">
<a href="invoice.html" class="svg-icon">
<i class="">
<svg class="icon line" width="18" id="receipt" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" stroke="currentColor">
<path d="M17,16V3L13,5,10,3,7,5,3,3V17.83A3.13,3.13,0,0,0,5.84,21,3,3,0,0,0,9,18V17a1,1,0,0,1,1-1H20a1,1,0,0,1,1,1v1a3,3,0,0,1-3,3H6" style="fill: none; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2;"></path>
<line x1="8" y1="10" x2="12" y2="10" style="fill: none; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2;"></line>
</svg>
</i>
<span class="ml-2">Invoice</span>
</a>
</li>
<li class=" sidebar-layout">
<a href="todo.html" class="svg-icon">
<i class="">
<svg xmlns="http://www.w3.org/2000/svg" width="18" fill="none" viewbox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4"></path>
</svg>
</i><span class="ml-2">Todo</span>
</a>
</li>
<li class=" sidebar-layout">
<a href="calendar.html" class="svg-icon">
<i class="">
<svg xmlns="http://www.w3.org/2000/svg" width="18" fill="none" viewbox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"></path>
</svg>
</i>
<span class="ml-2">Calendar</span>
<p class="mb-0 px-2 badge badge-pill badge-success">New</p>
</a>
</li>
<li class="px-3 pt-3 pb-2">
<span class="text-uppercase small font-weight-bold">Pages</span>
</li>
<li class=" sidebar-layout">
<a href="chat.html" class="svg-icon">
<i class="">
<svg xmlns="http://www.w3.org/2000/svg" width="18" fill="none" viewbox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"></path>
</svg>
</i><span class="ml-2">Chat</span>
</a>
</li>
<li class=" sidebar-layout">
<a href="user-profile.html" class="svg-icon">
<i class="">
<svg class="svg-icon" id="iq-user-1-1" xmlns="http://www.w3.org/2000/svg" fill="none" viewbox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5.121 17.804A13.937 13.937 0 0112 16c2.5 0 4.847.655 6.879 1.804M15 10a3 3 0 11-6 0 3 3 0 016 0zm6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
</svg>
</i><span class="ml-2">User Profile</span>
</a>
</li>
<li class="sidebar-layout">
<a href="#app1" class="collapsed svg-icon" data-toggle="collapse" aria-expanded="false">
<i>
<svg xmlns="http://www.w3.org/2000/svg" width="18" fill="none" viewbox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"></path>
</svg>
</i>
<span class="ml-2">Authentication</span>
<svg xmlns="http://www.w3.org/2000/svg" class="svg-icon iq-arrow-right arrow-active" width="15" fill="none" viewbox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
</svg>
</a>
<ul id="app1" class="submenu collapse" data-parent="#iq-sidebar-toggle">
<li class=" sidebar-layout">
<a href="auth-login.html" class="svg-icon">
<i class=""><svg xmlns="http://www.w3.org/2000/svg" width="18" fill="none" viewbox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 11c0 3.517-1.009 6.799-2.753 9.571m-3.44-2.04l.054-.09A13.916 13.916 0 008 11a4 4 0 118 0c0 1.017-.07 2.019-.203 3m-2.118 6.844A21.88 21.88 0 0015.171 17m3.839 1.132c.645-2.266.99-4.659.99-7.132A8 8 0 008 4.07M3 15.364c.64-1.319 1-2.8 1-4.364 0-1.457.39-2.823 1.07-4"></path>
</svg>
</i><span class="">Login</span>
</a>
</li>
<li class=" sidebar-layout">
<a href="auth-sign-up.html" class="svg-icon">
<i class="">
<svg xmlns="http://www.w3.org/2000/svg" width="18" fill="none" viewbox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4"></path>
</svg>
</i><span class="">Register</span>
</a>
</li>
<li class=" sidebar-layout">
<a href="auth-recover-pwd.html" class="svg-icon">
<i class="">
<svg xmlns="http://www.w3.org/2000/svg" width="18" fill="none" viewbox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z"></path>
</svg>
</i><span class="">Reset Password</span>
</a>
</li>
<li class=" sidebar-layout">
<a href="auth-confirm-mail.html" class="svg-icon">
<i class="">
<svg xmlns="http://www.w3.org/2000/svg" width="18" fill="none" viewbox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
</svg>
</i><span class="">Confirm Mail</span>
</a>
</li>
<li class=" sidebar-layout">
<a href="auth-lock-screen.html" class="svg-icon">
<i class="">
<svg xmlns="http://www.w3.org/2000/svg" width="18" fill="none" viewbox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"></path>
</svg>
</i><span class="">Lock Screen</span>
</a>
</li>
</ul>
</li>
<li class="sidebar-layout">
<a href="#app6" class="collapsed svg-icon" data-toggle="collapse" aria-expanded="false">
<i>
<svg xmlns="http://www.w3.org/2000/svg" width="18" fill="none" viewbox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"></path>
</svg>
</i>
<span class="ml-2">Error</span>
<svg xmlns="http://www.w3.org/2000/svg" class="svg-icon iq-arrow-right arrow-active" width="15" fill="none" viewbox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
</svg>
</a>
<ul id="app6" class="submenu collapse" data-parent="#iq-sidebar-toggle">
<li class=" sidebar-layout">
<a href="pages-error.html" class="svg-icon">
<i class="">
<svg xmlns="http://www.w3.org/2000/svg" width="18" fill="none" viewbox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 9v6m4-6v6m7-3a9 9 0 11-18 0 9 9 0 0118 0z"></path>
</svg>
</i>
<span class="ml-2">Error 404</span>
</a>
</li>
<li class=" sidebar-layout">
<a href="pages-error-500.html" class="svg-icon">
<i class="">
<svg xmlns="http://www.w3.org/2000/svg" width="18" fill="none" viewbox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M18.364 5.636a9 9 0 010 12.728m0 0l-2.829-2.829m2.829 2.829L21 21M15.536 8.464a5 5 0 010 7.072m0 0l-2.829-2.829m-4.243 2.829a4.978 4.978 0 01-1.414-2.83m-1.414 5.658a9 9 0 01-2.167-9.238m7.824 2.167a1 1 0 111.414 1.414m-1.414-1.414L3 3m8.293 8.293l1.414 1.414"></path>
</svg>
</i>
<span class="ml-2">Error 500</span>
</a>
</li>
</ul>
</li>
<li class=" sidebar-layout">
<a href="pages-comingsoon.html" class="svg-icon">
<i class="">
<svg xmlns="http://www.w3.org/2000/svg" width="18" fill="none" viewbox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19.428 15.428a2 2 0 00-1.022-.547l-2.387-.477a6 6 0 00-3.86.517l-.318.158a6 6 0 01-3.86.517L6.05 15.21a2 2 0 00-1.806.547M8 4h8l-1 1v5.172a2 2 0 00.586 1.414l5 5c1.26 1.26.367 3.414-1.415 3.414H4.828c-1.782 0-2.674-2.154-1.414-3.414l5-5A2 2 0 009 10.172V5L8 4z"></path>
</svg>
</i><span class="ml-2">Comingsoon</span>
</a>
</li>
<li class=" sidebar-layout">
<a href="pages-maintenance.html" class="svg-icon">
<i class="">
<svg xmlns="http://www.w3.org/2000/svg" width="18" fill="none" viewbox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6V4m0 2a2 2 0 100 4m0-4a2 2 0 110 4m-6 8a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4m6 6v10m6-2a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4"></path>
</svg>
</i><span class="ml-2">Maintenance</span>
</a>
</li>
<li class=" sidebar-layout">
<a href="pages-blank-page.html" class="svg-icon">
<i class="">
<svg xmlns="http://www.w3.org/2000/svg" width="18" fill="none" viewbox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"></path>
</svg>
</i><span class="ml-2">Blank Page</span>
</a>
</li>
<li class=" sidebar-layout">
<a href="pages-faq.html" class="svg-icon">
<i class="">
<svg xmlns="http://www.w3.org/2000/svg" width="18" fill="none" viewbox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H5a2 2 0 00-2 2v9a2 2 0 002 2h14a2 2 0 002-2V8a2 2 0 00-2-2h-5m-4 0V5a2 2 0 114 0v1m-4 0a2 2 0 104 0m-5 8a2 2 0 100-4 2 2 0 000 4zm0 0c1.306 0 2.417.835 2.83 2M9 14a3.001 3.001 0 00-2.83 2M15 11h3m-3 4h2"></path>
</svg>
</i><span class="ml-2">Faq</span>
</a>
</li>
<li class=" sidebar-layout">
<a href="pricing.html" class="svg-icon">
<i class="">
<svg xmlns="http://www.w3.org/2000/svg" width="18" fill="none" viewbox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
</svg>
</i><span class="ml-2">Pricing</span>
</a>
</li>
<li class=" sidebar-layout">
<a href="timeline.html" class="svg-icon">
<i class="">
<svg xmlns="http://www.w3.org/2000/svg" width="18" fill="none" viewbox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path>
</svg>
</i><span class="ml-2">Timeline</span>
</a>
</li>
<li class="px-3 pt-3 pb-2">
<span class="text-uppercase small font-weight-bold">Components</span>
</li>
<li class="sidebar-layout">
<a href="#app2" class="collapsed svg-icon" data-toggle="collapse" aria-expanded="false">
<i>
<svg class="svg-icon" id="iq-ui-1" width="18" xmlns="http://www.w3.org/2000/svg" fill="none" viewbox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 21a4 4 0 01-4-4V5a2 2 0 012-2h4a2 2 0 012 2v12a4 4 0 01-4 4zm0 0h12a2 2 0 002-2v-4a2 2 0 00-2-2h-2.343M11 7.343l1.657-1.657a2 2 0 012.828 0l2.829 2.829a2 2 0 010 2.828l-8.486 8.485M7 17h.01" style="stroke-dasharray: 97, 117; stroke-dashoffset: 0;"></path>
</svg>
</i>
<span class="ml-2">UI Elements</span>
<svg xmlns="http://www.w3.org/2000/svg" class="svg-icon iq-arrow-right arrow-active" width="15" fill="none" viewbox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
</svg>
</a>
<ul id="app2" class="submenu collapse" data-parent="#iq-sidebar-toggle">
<li class=" sidebar-layout">
<a href="ui-avatars.html" class="svg-icon">
<i class="">
<svg class="svg-icon" id="iq-ui-1-0" xmlns="http://www.w3.org/2000/svg" fill="none" viewbox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5.121 17.804A13.937 13.937 0 0112 16c2.5 0 4.847.655 6.879 1.804M15 10a3 3 0 11-6 0 3 3 0 016 0zm6 2a9 9 0 11-18 0 9 9 0 0118 0z" style="stroke-dasharray: 90, 110; stroke-dashoffset: 0;"></path>
</svg>
</i><span class="">Avatars</span>
</a>
</li>
<li class=" sidebar-layout">
<a href="ui-alerts.html" class="svg-icon">
<i class="">
<svg class="svg-icon" width="18" id="iq-ui-1-1" xmlns="http://www.w3.org/2000/svg" fill="none" viewbox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l7 7a2 2 0 010 2.828l-7 7a2 2 0 01-2.828 0l-7-7A1.994 1.994 0 013 12V7a4 4 0 014-4z" style="stroke-dasharray: 56, 76; stroke-dashoffset: 0;"></path>
</svg>
</i><span class="">Alerts</span>
</a>
</li>
<li class=" sidebar-layout">
<a href="ui-badges.html" class="svg-icon">
<i class="">
<svg class="svg-icon" width="18" id="iq-ui-1-2" xmlns="http://www.w3.org/2000/svg" fill="none" viewbox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-3 7h3m-3 4h3m-6-4h.01M9 16h.01" style="stroke-dasharray: 74, 94; stroke-dashoffset: 0;"></path>
</svg>
</i><span class="">Badges</span>
</a>
</li>
<li class=" sidebar-layout">
<a href="ui-breadcrumb.html" class="svg-icon">
<i class="">
<svg class="svg-icon" width="18" id="iq-ui-1-3" xmlns="http://www.w3.org/2000/svg" fill="none" viewbox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" style="stroke-dasharray: 48, 68; stroke-dashoffset: 0;"></path>
</svg>
</i><span class="">Breadcrumb</span>
</a>
</li>
<li class=" sidebar-layout">
<a href="ui-buttons.html" class="svg-icon">
<i class="">
<svg class="svg-icon" width="18" id="iq-ui-1-4" xmlns="http://www.w3.org/2000/svg" fill="none" viewbox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="{2}" d="M15 5v2m0 4v2m0 4v2M5 5a2 2 0 00-2 2v3a2 2 0 110 4v3a2 2 0 002 2h14a2 2 0 002-2v-3a2 2 0 110-4V7a2 2 0 00-2-2H5z" style="stroke-dasharray: 72, 92; stroke-dashoffset: 0;"></path>
</svg>
</i><span class="">Buttons</span>
</a>
</li>
<li class=" sidebar-layout">
<a href="ui-buttons-group.html" class="svg-icon">
<i class="">
<svg class="svg-icon" id="iq-ui-1-5" width="20" xmlns="http://www.w3.org/2000/svg" fill="none" viewbox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10" style="stroke-dasharray: 90, 110; stroke-dashoffset: 0;"></path>
</svg>
</i><span class="">Buttons Group</span>
</a>
</li>
<li class=" sidebar-layout">
<a href="ui-boxshadow.html" class="svg-icon">
<i class="">
<svg class="svg-icon" width="18" id="iq-ui-1-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewbox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4" style="stroke-dasharray: 84, 104; stroke-dashoffset: 0;"></path>
</svg>
</i><span class="">Box Shadow</span>
</a>
</li>
<li class=" sidebar-layout">
<a href="ui-colors.html" class="svg-icon">
<i class="">
<svg class="svg-icon" width="18" id="iq-ui-1-7" xmlns="http://www.w3.org/2000/svg" fill="none" viewbox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 21a4 4 0 01-4-4V5a2 2 0 012-2h4a2 2 0 012 2v12a4 4 0 01-4 4zm0 0h12a2 2 0 002-2v-4a2 2 0 00-2-2h-2.343M11 7.343l1.657-1.657a2 2 0 012.828 0l2.829 2.829a2 2 0 010 2.828l-8.486 8.485M7 17h.01" style="stroke-dasharray: 97, 117; stroke-dashoffset: 0;"></path>
</svg>
</i><span class="">Colors</span>
</a>
</li>
<li class=" sidebar-layout">
<a href="ui-cards.html" class="svg-icon">
<i class="">
<svg class="svg-icon" width="18" id="iq-ui-1-8" xmlns="http://www.w3.org/2000/svg" fill="none" viewbox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z" style="stroke-dasharray: 79, 99; stroke-dashoffset: 0;"></path>
</svg>
</i><span class="">Cards</span>
</a>
</li>
<li class=" sidebar-layout">
<a href="ui-carousel.html" class="svg-icon">
<i class="">
<svg class="svg-icon" width="18" id="iq-ui-1-9" xmlns="http://www.w3.org/2000/svg" fill="none" viewbox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 4v16M17 4v16M3 8h4m10 0h4M3 12h18M3 16h4m10 0h4M4 20h16a1 1 0 001-1V5a1 1 0 00-1-1H4a1 1 0 00-1 1v14a1 1 0 001 1z" style="stroke-dasharray: 133, 153; stroke-dashoffset: 0;"></path>
</svg>
</i><span class="">Carousel</span>
</a>
</li>
<li class=" sidebar-layout">
<a href="ui-grid.html" class="svg-icon">
<i class="">
<svg class="svg-icon" width="18" id="iq-ui-1-10" xmlns="http://www.w3.org/2000/svg" fill="none" viewbox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2V6zM14 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2V6zM4 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2v-2zM14 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2v-2z" style="stroke-dasharray: 83, 103; stroke-dashoffset: 0;"></path>
</svg>
</i><span class="">Grid</span>
</a>
</li>
<li class=" sidebar-layout">
<a href="ui-images.html" class="svg-icon">
<i class="">
<svg class="svg-icon" width="18" id="iq-ui-1-12" xmlns="http://www.w3.org/2000/svg" fill="none" viewbox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" style="stroke-dasharray: 85, 105; stroke-dashoffset: 0;"></path>
</svg>
</i><span class="">Images</span>
</a>
</li>
<li class=" sidebar-layout">
<a href="ui-list-group.html" class="svg-icon">
<i class="">
<svg xmlns="http://www.w3.org/2000/svg" width="18" fill="none" viewbox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 10h16M4 14h16M4 18h16"></path>
</svg>
</i><span class="">list Group</span>
</a>
</li>
<li class=" sidebar-layout">
<a href="ui-media-object.html" class="svg-icon">
<i class="">
<svg class="svg-icon" width="18" id="iq-ui-1-14" xmlns="http://www.w3.org/2000/svg" fill="none" viewbox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10" style="stroke-dasharray: 90, 110; stroke-dashoffset: 0;"></path>
</svg>
</i><span class="">Media</span>
</a>
</li>
<li class=" sidebar-layout">
<a href="ui-modal.html" class="svg-icon">
<i class="">
<svg class="svg-icon" width="18" id="iq-ui-1-15" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M12 3h7a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2h-7m0-18H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h7m0-18v18" style="stroke-dasharray: 87, 107; stroke-dashoffset: 0;">
</path>
</svg>
</i><span class="">Modal</span>
</a>
</li>
<li class=" sidebar-layout">
<a href="ui-notifications.html" class="svg-icon">
<i class="">
<svg class="svg-icon" width="18" id="iq-ui-1-16" xmlns="http://www.w3.org/2000/svg" fill="none" viewbox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9" style="stroke-dasharray: 63, 83; stroke-dashoffset: 0;"></path>
</svg>
</i><span class="">Notifications</span>
</a>
</li>
<li class=" sidebar-layout">
<a href="ui-pagination.html" class="svg-icon">
<i class="">
<svg class="svg-icon" width="18" id="iq-ui-1-17" xmlns="http://www.w3.org/2000/svg" fill="none" viewbox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 12h.01M12 12h.01M19 12h.01M6 12a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0z" style="stroke-dasharray: 19, 39; stroke-dashoffset: 0;"></path>
</svg>
</i><span class="">Pagination</span>
</a>
</li>
<li class=" sidebar-layout">
<a href="ui-popovers.html" class="svg-icon">
<i class="">
<svg xmlns="http://www.w3.org/2000/svg" width="18" fill="none" viewbox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 11l3-3m0 0l3 3m-3-3v8m0-13a9 9 0 110 18 9 9 0 010-18z"></path>
</svg>
</i><span class="">Popovers</span>
</a>
</li>
<li class=" sidebar-layout">
<a href="ui-progressbars.html" class="svg-icon">
<i class="">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" width="18" viewbox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10"></path>
</svg>
</i><span class="">Progressbars</span>
</a>
</li>
<li class=" sidebar-layout">
<a href="ui-typography.html" class="svg-icon">
<i class="">
<svg class="svg-icon" id="iq-ui-1-20" xmlns="http://www.w3.org/2000/svg" fill="none" width="18" viewbox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v1m6 11h2m-6 0h-2v4m0-11v3m0 0h.01M12 12h4.01M16 20h4M4 12h4m12 0h.01M5 8h2a1 1 0 001-1V5a1 1 0 00-1-1H5a1 1 0 00-1 1v2a1 1 0 001 1zm12 0h2a1 1 0 001-1V5a1 1 0 00-1-1h-2a1 1 0 00-1 1v2a1 1 0 001 1zM5 20h2a1 1 0 001-1v-2a1 1 0 00-1-1H5a1 1 0 00-1 1v2a1 1 0 001 1z" style="stroke-dasharray: 67, 87; stroke-dashoffset: 0;"></path>
</svg>
</i><span class="">Typography</span>
</a>
</li>
<li class=" sidebar-layout">
<a href="ui-tabs.html" class="svg-icon">
<i class="">
<svg class="svg-icon" id="iq-ui-1-21" xmlns="http://www.w3.org/2000/svg" fill="none" width="18" viewbox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 7v10c0 2.21 3.582 4 8 4s8-1.79 8-4V7M4 7c0 2.21 3.582 4 8 4s8-1.79 8-4M4 7c0-2.21 3.582-4 8-4s8 1.79 8 4m0 5c0 2.21-3.582 4-8 4s-8-1.79-8-4" style="stroke-dasharray: 98, 118; stroke-dashoffset: 0;"></path>
</svg>
</i><span class="">Tabs</span>
</a>
</li>
<li class=" sidebar-layout">
<a href="ui-tooltips.html" class="svg-icon">
<i class="">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" width="18" viewbox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 13h6m2 8H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path>
</svg>
</i><span class="">Tooltips</span>
</a>
</li>
<li class=" sidebar-layout">
<a href="ui-embed-video.html" class="svg-icon">
<i class="">
<svg class="svg-icon" id="iq-ui-1-23" xmlns="http://www.w3.org/2000/svg" fill="none" width="18" viewbox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 10l4.553-2.276A1 1 0 0121 8.618v6.764a1 1 0 01-1.447.894L15 14M5 18h8a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v8a2 2 0 002 2z" style="stroke-dasharray: 66, 86; stroke-dashoffset: 0;"></path>
</svg>
</i><span class="">Video</span>
</a>
</li>
</ul>
</li>
<li class="sidebar-layout">
<a href="#app3" class="collapsed svg-icon" data-toggle="collapse" aria-expanded="false">
<i>
<svg class="svg-icon" id="iq-form-1" width="18" xmlns="http://www.w3.org/2000/svg" fill="none" viewbox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-3 7h3m-3 4h3m-6-4h.01M9 16h.01" style="stroke-dasharray: 74, 94; stroke-dashoffset: 0;"></path>
</svg>
</i>
<span class="ml-2">Forms</span>
<svg xmlns="http://www.w3.org/2000/svg" class="svg-icon iq-arrow-right arrow-active" width="15" fill="none" viewbox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
</svg>
</a>
<ul id="app3" class="submenu collapse" data-parent="#iq-sidebar-toggle">
<li class="sidebar-layout">
<a href="#form1" class="collapsed svg-icon" data-toggle="collapse" aria-expanded="false">
<i class="">
<svg class="svg-icon" width="18" id="iq-form-1-1" xmlns="http://www.w3.org/2000/svg" fill="none" viewbox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 18h.01M7 21h10a2 2 0 002-2V5a2 2 0 00-2-2H7a2 2 0 00-2 2v14a2 2 0 002 2z" style="stroke-dasharray: 61, 81; stroke-dashoffset: 0;"></path>
</svg>
</i>
<span class="">Form Control</span>
<svg xmlns="http://www.w3.org/2000/svg" class="svg-icon iq-arrow-right arrow-active" width="15" fill="none" viewbox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
</svg>
</a>
<ul id="form1" class="submenu collapse" data-parent="#app3">
<li class=" sidebar-layout">
<a href="form-layout.html" class="svg-icon">
<i class="">
<svg xmlns="http://www.w3.org/2000/svg" width="18" fill="none" viewbox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4"></path>
</svg>
</i><span class="">Form Elements</span>
</a>
</li>
<li class=" sidebar-layout">
<a href="form-input-group.html" class="svg-icon">
<i class="">
<svg xmlns="http://www.w3.org/2000/svg" width="18" fill="none" viewbox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 13h6M3 17V7a2 2 0 012-2h6l2 2h6a2 2 0 012 2v8a2 2 0 01-2 2H5a2 2 0 01-2-2z"></path>
</svg>
</i><span class="">Form Input</span>
</a>
</li>
<li class=" sidebar-layout">
<a href="form-validation.html" class="svg-icon">
<i class="">
<svg xmlns="http://www.w3.org/2000/svg" width="18" fill="none" viewbox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"></path>
</svg>
</i><span class="">Form Validation</span>
</a>
</li>
<li class=" sidebar-layout">
<a href="form-switch.html" class="svg-icon">
<i class="">
<svg xmlns="http://www.w3.org/2000/svg" width="18" fill="none" viewbox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7h12m0 0l-4-4m4 4l-4 4m0 6H4m0 0l4 4m-4-4l4-4"></path>
</svg>
</i><span class="">Form Switch</span>
</a>
</li>
<li class=" sidebar-layout">
<a href="form-chechbox.html" class="svg-icon">
<i class="">
<svg xmlns="http://www.w3.org/2000/svg" width="18" fill="none" viewbox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
</svg>
</i><span class="">Form Checkbox</span>
</a>
</li>
<li class=" sidebar-layout">
<a href="form-radio.html" class="svg-icon">
<i class="">
<svg xmlns="http://www.w3.org/2000/svg" width="18" fill="none" viewbox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
</svg>
</i><span class="">Form Radio</span>
</a>
</li>
<li class=" sidebar-layout">
<a href="form-textarea.html" class="svg-icon">
<i class="">
<svg xmlns="http://www.w3.org/2000/svg" width="18" fill="none" viewbox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path>
</svg>
</i><span class="">Form Textarea</span>
</a>
</li>
</ul>
</li>
<li class="sidebar-layout">
<a href="#form2" class="collapsed svg-icon" data-toggle="collapse" aria-expanded="false">
<i class="">
<svg class="svg-icon" width="18" id="iq-user-1" xmlns="http://www.w3.org/2000/svg" fill="none" viewbox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"></path>
</svg>
</i>
<span class="">Form Widget</span>
<svg xmlns="http://www.w3.org/2000/svg" class="svg-icon iq-arrow-right arrow-active" width="15" fill="none" viewbox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
</svg>
</a>
<ul id="form2" class="submenu collapse" data-parent="#app3">
<li class="active sidebar-layout">
<a href="" class="svg-icon">
<i class="">
<svg xmlns="http://www.w3.org/2000/svg" width="18" fill="none" viewbox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"></path>
</svg>
</i><span class="">Datepicker</span>
</a>
</li>
<li class=" sidebar-layout">
<a href="form-select.html" class="svg-icon">
<i class="">
<svg xmlns="http://www.w3.org/2000/svg" width="18" fill="none" viewbox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 15l-2 5L9 9l11 4-5 2zm0 0l5 5M7.188 2.239l.777 2.897M5.136 7.965l-2.898-.777M13.95 4.05l-2.122 2.122m-5.657 5.656l-2.12 2.122"></path>
</svg>
</i><span class="">Select2</span>
</a>
</li>
<li class=" sidebar-layout">
<a href="form-file-uploader.html" class="svg-icon">
<i class="">
<svg xmlns="http://www.w3.org/2000/svg" width="18" fill="none" viewbox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12"></path>
</svg>
</i><span class="">File Upload</span>
</a>
</li>
<li class=" sidebar-layout">
<a href="form-quill.html" class="svg-icon">
<i class="">
<svg xmlns="http://www.w3.org/2000/svg" width="18" fill="none" viewbox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path>
</svg>
</i><span class="">Form quill</span>
</a>
</li>
</ul>
</li>
</ul>
</li>
<li class="sidebar-layout">
<a href="#app5" class="collapsed svg-icon" data-toggle="collapse" aria-expanded="false">
<i>
<svg xmlns="http://www.w3.org/2000/svg" width="18" fill="none" viewbox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 10h18M3 14h18m-9-4v8m-7 0h14a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v8a2 2 0 002 2z"></path>
</svg>
</i>
<span class="ml-2">Table</span>
<svg xmlns="http://www.w3.org/2000/svg" class="svg-icon iq-arrow-right arrow-active" width="15" fill="none" viewbox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
</svg>
</a>
<ul id="app5" class="submenu collapse" data-parent="#iq-sidebar-toggle">
<li class=" sidebar-layout">
<a href="tables-basic.html" class="svg-icon">
<i class="">
<svg xmlns="http://www.w3.org/2000/svg" width="18" fill="none" viewbox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 17V7m0 10a2 2 0 01-2 2H5a2 2 0 01-2-2V7a2 2 0 012-2h2a2 2 0 012 2m0 10a2 2 0 002 2h2a2 2 0 002-2M9 7a2 2 0 012-2h2a2 2 0 012 2m0 10V7m0 10a2 2 0 002 2h2a2 2 0 002-2V7a2 2 0 00-2-2h-2a2 2 0 00-2 2"></path>
</svg>
</i>
<span class="ml-2">Basic Tables</span>
</a>
</li>
<li class=" sidebar-layout">
<a href="table-data.html" class="svg-icon">
<i class="">
<svg xmlns="http://www.w3.org/2000/svg" width="18" fill="none" viewbox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 7v10c0 2.21 3.582 4 8 4s8-1.79 8-4V7M4 7c0 2.21 3.582 4 8 4s8-1.79 8-4M4 7c0-2.21 3.582-4 8-4s8 1.79 8 4m0 5c0 2.21-3.582 4-8 4s-8-1.79-8-4"></path>
</svg>
</i>
<span class="ml-2">Data Table</span>
</a>
</li>
<li class=" sidebar-layout">
<a href="table-editable.html" class="svg-icon">
<i class="">
<svg xmlns="http://www.w3.org/2000/svg" width="18" fill="none" viewbox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7v8a2 2 0 002 2h6M8 7V5a2 2 0 012-2h4.586a1 1 0 01.707.293l4.414 4.414a1 1 0 01.293.707V15a2 2 0 01-2 2h-2M8 7H6a2 2 0 00-2 2v10a2 2 0 002 2h8a2 2 0 002-2v-2"></path>
</svg>
</i>
<span class="ml-2">Editable Table</span>
</a>
</li>
</ul>
</li>
<li class=" sidebar-layout">
<a href="chart-apex.html" class="svg-icon">
<i class="">
<svg class="svg-icon" id="iq-chart-1" width="18" xmlns="http://www.w3.org/2000/svg" fill="none" viewbox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 13v-1m4 1v-3m4 3V8M8 21l4-4 4 4M3 4h18M4 4h16v12a1 1 0 01-1 1H5a1 1 0 01-1-1V4z" style="stroke-dasharray: 96, 116; stroke-dashoffset: 0;"></path>
</svg>
</i>
<span class="ml-2">Chart</span>
</a>
</li>
<li class=" sidebar-layout">
<a href="icon-heroicon.html" class="svg-icon">
<i class="">
<svg xmlns="http://www.w3.org/2000/svg" width="18" fill="none" viewbox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 10l-2 1m0 0l-2-1m2 1v2.5M20 7l-2 1m2-1l-2-1m2 1v2.5M14 4l-2-1-2 1M4 7l2-1M4 7l2 1M4 7v2.5M12 21l-2-1m2 1l2-1m-2 1v-2.5M6 18l-2-1v-2.5M18 18l2-1v-2.5"></path>
</svg>
</i>
<span class="ml-2">Icon</span>
</a>
</li>
</ul>
</nav>
<div class="pt-5 pb-5"></div>
</div>
</div>
<div class="iq-top-navbar">
<div class="iq-navbar-custom">
<nav class="navbar navbar-expand-lg navbar-light p-0">
<div class="side-menu-bt-sidebar">
<svg xmlns="http://www.w3.org/2000/svg" class="text-secondary wrapper-menu" width="30" fill="none" viewbox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path>
</svg>
</div>
<div class="d-flex align-items-center">
<div class="change-mode">
<div class="custom-control custom-switch custom-switch-icon custom-control-inline">
<div class="custom-switch-inner">
<p class="mb-0"> </p>
<input type="checkbox" class="custom-control-input" id="dark-mode" data-active="true">
<label class="custom-control-label" for="dark-mode" data-mode="toggle">
<span class="switch-icon-right">
<svg xmlns="http://www.w3.org/2000/svg" id="h-moon" height="20" width="20" class="h-6 w-6" fill="none" viewbox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z"></path>
</svg>
</span>
<span class="switch-icon-left">
<svg xmlns="http://www.w3.org/2000/svg" id="h-sun" height="20" width="20" class="h-6 w-6" fill="none" viewbox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z"></path>
</svg>
</span>
</label>
</div>
</div>
</div>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-label="Toggle navigation">
<svg xmlns="http://www.w3.org/2000/svg" class="text-secondary" width="30" fill="none" viewbox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16m-7 6h7"></path>
</svg>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav ml-auto navbar-list align-items-center">
<li class="nav-item nav-icon dropdown">
<a href="#" class="search-toggle dropdown-toggle" id="notification-dropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" class="h-6 w-6 text-secondary" fill="none" viewbox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9"></path>
</svg>
<span class="bg-primary"></span>
</a>
<div class="iq-sub-dropdown dropdown-menu" aria-labelledby="notification-dropdown">
<div class="card shadow-none m-0 border-0">
<div class="p-3 card-header-border">
<h6 class="text-center">
Notifications
</h6>
</div>
<div class="card-body overflow-auto card-header-border p-0 card-body-list" style="max-height: 500px;">
<ul class="dropdown-menu-1 overflow-auto list-style-1 mb-0">
<li class="dropdown-item-1 float-none p-3">
<div class="list-item d-flex justify-content-start align-items-start">
<div class="avatar">
<div class="avatar-img avatar-danger avatar-20">
<span>
<svg class="icon line" width="30" height="30" id="cart-alt1" stroke="white" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24"><path d="M3,3H5.32a1,1,0,0,1,.93.63L10,13,8.72,15.55A1,1,0,0,0,9.62,17H19" style="fill: none;stroke-linecap: round; stroke-linejoin: round; stroke-width: 2;"></path><polyline points="10 13 18.2 13 21 6" style="fill: none;stroke-linecap: round; stroke-linejoin: round; stroke-width: 2;"></polyline><line x1="20.8" y1="6" x2="7.2" y2="6" style="fill: none;stroke-linecap: round; stroke-linejoin: round; stroke-width: 2;"></line><circle cx="10.5" cy="20.5" r="0.5" style="fill: none;stroke-miterlimit: 10; stroke-width: 2;"></circle><circle cx="16.5" cy="20.5" r="0.5" style="fill: none;stroke-miterlimit: 10; stroke-width: 2;"></circle></svg>
</span>
</div>
</div>
<div class="list-style-detail ml-2 mr-2">
<h6 class="font-weight-bold">Your order is placed</h6>
<p class="m-0">
<small class="text-secondary">If several languages coalesce</small>
</p>
<p class="m-0">
<small class="text-secondary">
<svg xmlns="http://www.w3.org/2000/svg" class="text-secondary mr-1" width="15" fill="none" viewbox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path>
</svg>
3 hours ago</small>
</p>
</div>
</div>
</li>
<li class="dropdown-item-1 float-none p-3">
<div class="list-item d-flex justify-content-start align-items-start">
<div class="avatar">
<div class="avatar-img avatar-success avatar-20">
<span><img class="avatar is-squared rounded-circle" src="static/picture/2.jpg" alt="2.jpg"></span>
</div>
</div>
<div class="list-style-detail ml-2 mr-2">
<h6 class="font-weight-bold">New message form cate</h6>
<p class="m-0">
<small class="text-secondary">You have 3 unreded messages</small>
</p>
<p class="m-0">
<small class="text-secondary">
<svg xmlns="http://www.w3.org/2000/svg" class="text-secondary mr-1" width="15" fill="none" viewbox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path>
</svg>
5 hours ago</small>
</p>
</div>
</div>
</li>
<li class="dropdown-item-1 float-none p-3">
<div class="list-item d-flex justify-content-start align-items-start">
<div class="avatar">
<div class="avatar-img avatar-warning avatar-20">
<span>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="30" height="30" stroke="white" id="Capa_1" x="0px" y="0px" viewbox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">
<g>
<g>
<path d="M386.689,304.403c-35.587,0-64.538,28.951-64.538,64.538s28.951,64.538,64.538,64.538 c35.593,0,64.538-28.951,64.538-64.538S422.276,304.403,386.689,304.403z M386.689,401.21c-17.796,0-32.269-14.473-32.269-32.269 c0-17.796,14.473-32.269,32.269-32.269c17.796,0,32.269,14.473,32.269,32.269C418.958,386.738,404.485,401.21,386.689,401.21z"></path>
</g>
</g>
<g>
<g>
<path d="M166.185,304.403c-35.587,0-64.538,28.951-64.538,64.538s28.951,64.538,64.538,64.538s64.538-28.951,64.538-64.538 S201.772,304.403,166.185,304.403z M166.185,401.21c-17.796,0-32.269-14.473-32.269-32.269c0-17.796,14.473-32.269,32.269-32.269 c17.791,0,32.269,14.473,32.269,32.269C198.454,386.738,183.981,401.21,166.185,401.21z"></path>
</g>
</g>
<g>
<g>
<path d="M430.15,119.675c-2.743-5.448-8.32-8.885-14.419-8.885h-84.975v32.269h75.025l43.934,87.384l28.838-14.5L430.15,119.675z"></path>
</g>
</g>
<g>
<g>
<rect x="216.202" y="353.345" width="122.084" height="32.269"></rect>
</g>
</g>
<g>
<g>
<path d="M117.781,353.345H61.849c-8.912,0-16.134,7.223-16.134,16.134c0,8.912,7.223,16.134,16.134,16.134h55.933 c8.912,0,16.134-7.223,16.134-16.134C133.916,360.567,126.693,353.345,117.781,353.345z"></path>
</g>
</g>
<g>
<g>
<path d="M508.612,254.709l-31.736-40.874c-3.049-3.937-7.755-6.239-12.741-6.239H346.891V94.655 c0-8.912-7.223-16.134-16.134-16.134H61.849c-8.912,0-16.134,7.223-16.134,16.134s7.223,16.134,16.134,16.134h252.773v112.941 c0,8.912,7.223,16.134,16.134,16.134h125.478l23.497,30.268v83.211h-44.639c-8.912,0-16.134,7.223-16.134,16.134 c0,8.912,7.223,16.134,16.134,16.134h60.773c8.912,0,16.134-7.223,16.135-16.134V264.605 C512,261.023,510.806,257.538,508.612,254.709z"></path>
</g>
</g>
<g>
<g>
<path d="M116.706,271.597H42.487c-8.912,0-16.134,7.223-16.134,16.134c0,8.912,7.223,16.134,16.134,16.134h74.218 c8.912,0,16.134-7.223,16.134-16.134C132.84,278.82,125.617,271.597,116.706,271.597z"></path>
</g>
</g>
<g>
<g>
<path d="M153.815,208.134H16.134C7.223,208.134,0,215.357,0,224.269s7.223,16.134,16.134,16.134h137.681 c8.912,0,16.134-7.223,16.134-16.134S162.727,208.134,153.815,208.134z"></path>
</g>
</g>
<g>
<g>
<path d="M180.168,144.672H42.487c-8.912,0-16.134,7.223-16.134,16.134c0,8.912,7.223,16.134,16.134,16.134h137.681 c8.912,0,16.134-7.223,16.134-16.134C196.303,151.895,189.08,144.672,180.168,144.672z"></path>
</g>
</g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g> </svg>
</span>
</div>
</div>
<div class="list-style-detail ml-2 mr-2">
<h6 class="font-weight-bold">Your item is shipped</h6>
<p class="m-0">
<small class="text-secondary">You got new order of goods</small>
</p>
<p class="m-0">
<small class="text-secondary">
<svg xmlns="http://www.w3.org/2000/svg" class="text-secondary mr-1" width="15" fill="none" viewbox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path>
</svg>
5 hours ago</small>
</p>
</div>
</div>
</li>
</ul>
</div>
<div class="card-footer text-muted p-3">
<p class="mb-0 text-primary text-center font-weight-bold">Show all notifications</p>
</div>
</div>
</div>
</li>
<li class="nav-item nav-icon dropdown">
<a href="#" class="search-toggle dropdown-toggle" id="dropdownMenuButton2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<img src="static/picture/flag001.png" class="img-fluid rounded-circle" alt="user" style="height: 30px; min-width: 30px; width: 30px;">
<span class="bg-primary"></span>
</a>
<div class="iq-sub-dropdown dropdown-menu" aria-labelledby="dropdownMenuButton2">
<div class="card shadow-none m-0 border-0">
<div class=" p-0 ">
<ul class="dropdown-menu-1 list-group list-group-flush">
<li class="dropdown-item-1 list-group-item px-2"><a class="p-0" href="#"><img src="static/picture/flag-03.png" alt="img-flaf" class="img-fluid mr-2" style="width: 15px;height: 15px;min-width: 15px;">Spanish</a></li>
<li class="dropdown-item-1 list-group-item px-2"><a class="p-0" href="#"><img src="static/picture/flag-04.png" alt="img-flaf" class="img-fluid mr-2" style="width: 15px;height: 15px;min-width: 15px;">Italian</a></li>
<li class="dropdown-item-1 list-group-item px-2"><a class="p-0" href="#"><img src="static/picture/flag-02.png" alt="img-flaf" class="img-fluid mr-2" style="width: 15px;height: 15px;min-width: 15px;">French</a></li>
<li class="dropdown-item-1 list-group-item px-2"><a class="p-0" href="#"><img src="static/picture/flag-05.png" alt="img-flaf" class="img-fluid mr-2" style="width: 15px;height: 15px;min-width: 15px;">German</a></li>
<li class="dropdown-item-1 list-group-item px-2"><a class="p-0" href="#"><img src="static/picture/flag-06.png" alt="img-flaf" class="img-fluid mr-2" style="width: 15px;height: 15px;min-width: 15px;">Japanese</a></li>
</ul>
</div>
</div>
</div>
</li>
<li class="nav-item nav-icon search-content">
<a href="#" class="search-toggle rounded" id="dropdownSearch" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<svg class="svg-icon text-secondary" id="h-suns" height="25" width="25" xmlns="http://www.w3.org/2000/svg" fill="none" viewbox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
</svg>
</a>
<div class="iq-search-bar iq-sub-dropdown dropdown-menu" aria-labelledby="dropdownSearch">
<form action="#" class="searchbox p-2">
<div class="form-group mb-0 position-relative">
<input type="text" class="text search-input font-size-12" placeholder="type here to search...">
<a href="#" class="search-link">
<svg xmlns="http://www.w3.org/2000/svg" class="" width="20" fill="none" viewbox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
</svg>
</a>
</div>
</form>
</div>
</li>
<li class="nav-item nav-icon dropdown">
<a href="#" class="nav-item nav-icon dropdown-toggle pr-0 search-toggle" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<img src="static/picture/1.jpg" class="img-fluid avatar-rounded" alt="user">
<span class="mb-0 ml-2 user-name">John Doe</span>
</a>
<ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownMenuButton">
<li class="dropdown-item d-flex svg-icon">
<svg class="svg-icon mr-0 text-secondary" id="h-01-p" width="20" xmlns="http://www.w3.org/2000/svg" fill="none" viewbox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5.121 17.804A13.937 13.937 0 0112 16c2.5 0 4.847.655 6.879 1.804M15 10a3 3 0 11-6 0 3 3 0 016 0zm6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
</svg>
<a href="user-profile.html">My Profile</a>
</li>
<li class="dropdown-item d-flex svg-icon">
<svg class="svg-icon mr-0 text-secondary" id="h-02-p" width="20" xmlns="http://www.w3.org/2000/svg" fill="none" viewbox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"></path>
</svg>
<a href="user-profile-edit.html">Edit Profile</a>
</li>
<li class="dropdown-item d-flex svg-icon">
<svg class="svg-icon mr-0 text-secondary" id="h-03-p" width="20" xmlns="http://www.w3.org/2000/svg" fill="none" viewbox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"></path>
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path>
</svg>
<a href="user-account-setting.html">Account Settings</a>
</li>
<li class="dropdown-item d-flex svg-icon">
<svg class="svg-icon mr-0 text-secondary" id="h-04-p" width="20" xmlns="http://www.w3.org/2000/svg" fill="none" viewbox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"></path>
</svg>
<a href="user-privacy-setting.html">Privacy Settings</a>
</li>
<li class="dropdown-item d-flex svg-icon border-top">
<svg class="svg-icon mr-0 text-secondary" id="h-05-p" width="20" xmlns="http://www.w3.org/2000/svg" fill="none" viewbox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1"></path>
</svg>
<a href="auth-sign-in.html">Logout</a>
</li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
</div>
</div>
<div class="content-page">
<div class="container-fluid">
<div class="row">
<div class="col-lg-12">
<div class="card">
<div class="card-header d-flex justify-content-between">
<div class="header-title">
<h4 class="card-title">Basic</h4>
</div>
<div class="header-action">
<i data-toggle="collapse" data-target="#datepicker-1" aria-expanded="false">
<svg width="20" xmlns="http://www.w3.org/2000/svg" fill="none" viewbox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4"></path>
</svg>
</i>
</div>
</div>
<div class="card-body">
<div class="collapse" id="datepicker-1">
<div class="card"><kbd class="bg-dark"><pre id="datepicker-basic" class="text-white"><code>
&#x3C;div class=&#x22;form-group&#x22;&#x3E;
&#x3C;label for=&#x22;exampleInputdate&#x22;&#x3E;Date Input&#x3C;/label&#x3E;
&#x3C;input type=&#x22;date&#x22; class=&#x22;form-control&#x22; id=&#x22;exampleInputdate&#x22; value=&#x22;2019-12-18&#x22;&#x3E;
&#x3C;/div&#x3E;
</code></pre></kbd></div>
</div>
<div class="form-group">
<label for="exampleInputdate">Date Input</label>
<input type="date" class="form-control" id="exampleInputdate" value="2019-12-18">
</div>
</div>
</div>
<div class="card">
<div class="card-header d-flex justify-content-between">
<div class="header-title">
<h4 class="card-title">Month Date</h4>
</div>
<div class="header-action">
<i data-toggle="collapse" data-target="#datepicker-2" aria-expanded="false">
<svg width="20" xmlns="http://www.w3.org/2000/svg" fill="none" viewbox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4"></path>
</svg>
</i>
</div>
</div>
<div class="card-body">
<div class="collapse" id="datepicker-2">
<div class="card"><kbd class="bg-dark"><pre id="datepicker-month-date" class="text-white"><code>
&#x3C;div class=&#x22;form-group&#x22;&#x3E;
&#x3C;label for=&#x22;exampleInputmonth&#x22;&#x3E;Month Input&#x3C;/label&#x3E;
&#x3C;input type=&#x22;month&#x22; class=&#x22;form-control&#x22; id=&#x22;exampleInputmonth&#x22; value=&#x22;2019-12&#x22;&#x3E;
&#x3C;/div&#x3E;
</code></pre></kbd></div>
</div>
<div class="form-group">
<label for="exampleInputmonth">Month Input</label>
<input type="month" class="form-control" id="exampleInputmonth" value="2019-12">
</div>
</div>
</div>
<div class="card">
<div class="card-header d-flex justify-content-between">
<div class="header-title">
<h4 class="card-title">Time</h4>
</div>
<div class="header-action">
<i data-toggle="collapse" data-target="#datepicker-3" aria-expanded="false">
<svg width="20" xmlns="http://www.w3.org/2000/svg" fill="none" viewbox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4"></path>
</svg>
</i>
</div>
</div>
<div class="card-body">
<div class="collapse" id="datepicker-3">
<div class="card"><kbd class="bg-dark"><pre id="datepicker-time" class="text-white"><code>
&#x3C;div class=&#x22;form-group&#x22;&#x3E;
&#x3C;label for=&#x22;exampleInputtime&#x22;&#x3E;Time Input&#x3C;/label&#x3E;
&#x3C;input type=&#x22;time&#x22; class=&#x22;form-control&#x22; id=&#x22;exampleInputtime&#x22; value=&#x22;13:45&#x22;&#x3E;
&#x3C;/div&#x3E;
</code></pre></kbd></div>
</div>
<div class="form-group">
<label for="exampleInputtime">Time Input</label>
<input type="time" class="form-control" id="exampleInputtime" value="13:45">
</div>
</div>
</div>
<div class="card">
<div class="card-header d-flex justify-content-between">
<div class="header-title">
<h4 class="card-title">Week</h4>
</div>
<div class="header-action">
<i data-toggle="collapse" data-target="#datepicker-4" aria-expanded="false">
<svg width="20" xmlns="http://www.w3.org/2000/svg" fill="none" viewbox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4"></path>
</svg>
</i>
</div>
</div>
<div class="card-body">
<div class="collapse" id="datepicker-4">
<div class="card"><kbd class="bg-dark"><pre id="datepicker-week" class="text-white"><code>
&#x3C;div class=&#x22;form-group&#x22;&#x3E;
&#x3C;label for=&#x22;exampleInputweek&#x22;&#x3E;Week Input&#x3C;/label&#x3E;
&#x3C;input type=&#x22;week&#x22; class=&#x22;form-control&#x22; id=&#x22;exampleInputweek&#x22; value=&#x22;2019-W46&#x22;&#x3E;
&#x3C;/div&#x3E;
</code></pre></kbd></div>
</div>
<div class="form-group">
<label for="exampleInputweek">Week Input</label>
<input type="week" class="form-control" id="exampleInputweek" value="2019-W46">
</div>
</div>
</div>
<div class="card">
<div class="card-header d-flex justify-content-between">
<div class="header-title">
<h4 class="card-title">Date and Time</h4>
</div>
<div class="header-action">
<i data-toggle="collapse" data-target="#datepicker-5" aria-expanded="false">
<svg width="20" xmlns="http://www.w3.org/2000/svg" fill="none" viewbox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4"></path>
</svg>
</i>
</div>
</div>
<div class="card-body">
<div class="collapse" id="datepicker-5">
<div class="card"><kbd class="bg-dark"><pre id="datepicker-date-time" class="text-white"><code>
&#x3C;div class=&#x22;form-group&#x22;&#x3E;
&#x3C;label for=&#x22;exampleInputdatetime&#x22;&#x3E;Date and Time Input&#x3C;/label&#x3E;
&#x3C;input type=&#x22;datetime-local&#x22; class=&#x22;form-control&#x22; id=&#x22;exampleInputdatetime&#x22; value=&#x22;2019-12-19T13:45:00&#x22;&#x3E;
&#x3C;/div&#x3E;
</code></pre></kbd></div>
</div>
<div class="form-group">
<label for="exampleInputdatetime">Date and Time Input</label>
<input type="datetime-local" class="form-control" id="exampleInputdatetime" value="2019-12-19T13:45:00">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Wrapper End-->
<footer class="iq-footer">
<div class="container-fluid">
<div class="row">
<div class="col-lg-6">
<ul class="list-inline mb-0">
<li class="list-inline-item"><a href="privacy-policy.html">Privacy Policy</a></li>
<li class="list-inline-item"><a href="terms-of-service.html">Terms of Use</a></li>
</ul>
</div>
<div class="col-lg-6 text-right">
<span class="mr-1">Copyright &copy; 2021.Company name All rights reserved.<a target="_blank" href="https://sc.chinaz.com/moban/">&#x7F51;&#x9875;&#x6A21;&#x677F;</a></span>
</div>
</div>
</div>
</footer> <!-- Backend Bundle JavaScript -->
<script src="static/js/backend-bundle.min.js"></script>
<!-- Chart Custom JavaScript -->
<script src="static/js/customizer.js"></script>
<script src="static/js/sidebar.js"></script>
<!-- Flextree Javascript-->
<script src="static/js/flex-tree.min.js"></script>
<script src="static/js/tree.js"></script>
<!-- Table Treeview JavaScript -->
<script src="static/js/table-treeview.js"></script>
<!-- SweetAlert JavaScript -->
<script src="static/js/sweetalert.js"></script>
<!-- Vectoe Map JavaScript -->
<script src="static/js/vector-map-custom.js"></script>
<!-- Chart Custom JavaScript -->
<script src="static/js/chart-custom.js"></script>
<script src="static/js/01.js"></script>
<script src="static/js/02.js"></script>
<!-- slider JavaScript -->
<script src="static/js/slider.js"></script>
<!-- Emoji picker -->
<script src="static/js/index.js" type="module"></script>
<!-- app JavaScript -->
<script src="static/js/app.js"></script> </body>
</html>
\ No newline at end of file
... ...