jungil commited on
Commit
02dc0ee
1 Parent(s): 45d5d8a

Upload 892 files

Browse files
This view is limited to 50 files because it contains too many changes.   See raw diff
.gitattributes CHANGED
@@ -34,3 +34,4 @@ saved_model/**/* filter=lfs diff=lfs merge=lfs -text
34
  *.zst filter=lfs diff=lfs merge=lfs -text
35
  *tfevents* filter=lfs diff=lfs merge=lfs -text
36
  theme/images/github/sleek.gif filter=lfs diff=lfs merge=lfs -text
 
 
34
  *.zst filter=lfs diff=lfs merge=lfs -text
35
  *tfevents* filter=lfs diff=lfs merge=lfs -text
36
  theme/images/github/sleek.gif filter=lfs diff=lfs merge=lfs -text
37
+ images/github/sleek.gif filter=lfs diff=lfs merge=lfs -text
404.html ADDED
@@ -0,0 +1,63 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+
3
+ <!--
4
+ // WEBSITE: https://themefisher.com
5
+ // TWITTER: https://twitter.com/themefisher
6
+ // FACEBOOK: https://www.facebook.com/themefisher
7
+ // GITHUB: https://github.com/themefisher/
8
+ -->
9
+
10
+ <html lang="en">
11
+ <head>
12
+ <head>
13
+ <meta charset="utf-8" />
14
+ <meta http-equiv="X-UA-Compatible" content="IE=edge" />
15
+ <meta name="viewport" content="width=device-width, initial-scale=1" />
16
+
17
+ <title>Mono - Responsive Admin & Dashboard Template</title>
18
+
19
+ <!-- GOOGLE FONTS -->
20
+ <link href="https://fonts.googleapis.com/css?family=Karla:400,700|Roboto" rel="stylesheet">
21
+ <link href="plugins/material/css/materialdesignicons.min.css" rel="stylesheet" />
22
+ <link href="plugins/simplebar/simplebar.css" rel="stylesheet" />
23
+
24
+ <!-- PLUGINS CSS STYLE -->
25
+ <link href="plugins/nprogress/nprogress.css" rel="stylesheet" />
26
+
27
+ <!-- MONO CSS -->
28
+ <link id="main-css-href" rel="stylesheet" href="css/style.css" />
29
+
30
+
31
+
32
+
33
+ <!-- FAVICON -->
34
+ <link href="images/favicon.png" rel="shortcut icon" />
35
+
36
+ <!--
37
+ HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries
38
+ -->
39
+ <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
40
+ <!--[if lt IE 9]>
41
+ <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
42
+ <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
43
+ <![endif]-->
44
+ <script src="plugins/nprogress/nprogress.js"></script>
45
+ </head>
46
+
47
+ </head>
48
+ <body class="bg-light-gray" id="body">
49
+ <div class="container d-flex align-items-center justify-content-center" style="min-height: 100vh">
50
+ <div class="d-flex flex-column justify-content-between">
51
+ <div class="row justify-content-center mt-5">
52
+ <div class="text-center page-404">
53
+ <h1 class="error-title">404</h1>
54
+ <p class="pt-4 pb-5 error-subtitle">Looks like something went wrong.</p>
55
+ <a href="index.html" class="btn btn-primary btn-pill">Back to Home</a>
56
+ </div>
57
+ </div>
58
+ </div>
59
+ </div>
60
+
61
+
62
+ </body>
63
+ </html>
alert.html ADDED
@@ -0,0 +1,1822 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+
3
+ <!--
4
+ // WEBSITE: https://themefisher.com
5
+ // TWITTER: https://twitter.com/themefisher
6
+ // FACEBOOK: https://www.facebook.com/themefisher
7
+ // GITHUB: https://github.com/themefisher/
8
+ -->
9
+
10
+ <html lang="en" dir="ltr">
11
+ <head>
12
+ <meta charset="utf-8" />
13
+ <meta http-equiv="X-UA-Compatible" content="IE=edge" />
14
+ <meta name="viewport" content="width=device-width, initial-scale=1" />
15
+
16
+ <title>Mono - Responsive Admin & Dashboard Template</title>
17
+
18
+ <!-- GOOGLE FONTS -->
19
+ <link href="https://fonts.googleapis.com/css?family=Karla:400,700|Roboto" rel="stylesheet">
20
+ <link href="plugins/material/css/materialdesignicons.min.css" rel="stylesheet" />
21
+ <link href="plugins/simplebar/simplebar.css" rel="stylesheet" />
22
+
23
+ <!-- PLUGINS CSS STYLE -->
24
+ <link href="plugins/nprogress/nprogress.css" rel="stylesheet" />
25
+
26
+
27
+ <link href="plugins/prism/prism.css" rel="stylesheet" />
28
+
29
+
30
+ <!-- MONO CSS -->
31
+ <link id="main-css-href" rel="stylesheet" href="css/style.css" />
32
+
33
+
34
+
35
+
36
+ <!-- FAVICON -->
37
+ <link href="images/favicon.png" rel="shortcut icon" />
38
+
39
+ <!--
40
+ HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries
41
+ -->
42
+ <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
43
+ <!--[if lt IE 9]>
44
+ <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
45
+ <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
46
+ <![endif]-->
47
+ <script src="plugins/nprogress/nprogress.js"></script>
48
+ </head>
49
+
50
+
51
+ <body class="navbar-fixed sidebar-fixed" id="body">
52
+ <script>
53
+ NProgress.configure({ showSpinner: false });
54
+ NProgress.start();
55
+ </script>
56
+
57
+
58
+
59
+ <!-- ====================================
60
+ ——— WRAPPER
61
+ ===================================== -->
62
+ <div class="wrapper">
63
+
64
+
65
+ <!-- ====================================
66
+ ——— LEFT SIDEBAR WITH OUT FOOTER
67
+ ===================================== -->
68
+ <aside class="left-sidebar sidebar-dark" id="left-sidebar">
69
+ <div id="sidebar" class="sidebar sidebar-with-footer">
70
+ <!-- Aplication Brand -->
71
+ <div class="app-brand">
72
+ <a href="/index.html">
73
+ <img src="images/logo.png" alt="Mono">
74
+ <span class="brand-name">MONO</span>
75
+ </a>
76
+ </div>
77
+ <!-- begin sidebar scrollbar -->
78
+ <div class="sidebar-left" data-simplebar style="height: 100%;">
79
+ <!-- sidebar menu -->
80
+ <ul class="nav sidebar-inner" id="sidebar-menu">
81
+
82
+
83
+
84
+ <li
85
+ >
86
+ <a class="sidenav-item-link" href="index.html">
87
+ <i class="mdi mdi-briefcase-account-outline"></i>
88
+ <span class="nav-text">Business Dashboard</span>
89
+ </a>
90
+ </li>
91
+
92
+
93
+
94
+
95
+
96
+ <li
97
+ >
98
+ <a class="sidenav-item-link" href="analytics.html">
99
+ <i class="mdi mdi-chart-line"></i>
100
+ <span class="nav-text">Analytics Dashboard</span>
101
+ </a>
102
+ </li>
103
+
104
+
105
+
106
+
107
+
108
+ <li class="section-title">
109
+ Apps
110
+ </li>
111
+
112
+
113
+
114
+
115
+
116
+ <li
117
+ >
118
+ <a class="sidenav-item-link" href="chat.html">
119
+ <i class="mdi mdi-wechat"></i>
120
+ <span class="nav-text">Chat</span>
121
+ </a>
122
+ </li>
123
+
124
+
125
+
126
+
127
+
128
+ <li
129
+ >
130
+ <a class="sidenav-item-link" href="contacts.html">
131
+ <i class="mdi mdi-phone"></i>
132
+ <span class="nav-text">Contacts</span>
133
+ </a>
134
+ </li>
135
+
136
+
137
+
138
+
139
+
140
+ <li
141
+ >
142
+ <a class="sidenav-item-link" href="team.html">
143
+ <i class="mdi mdi-account-group"></i>
144
+ <span class="nav-text">Team</span>
145
+ </a>
146
+ </li>
147
+
148
+
149
+
150
+
151
+
152
+ <li
153
+ >
154
+ <a class="sidenav-item-link" href="calendar.html">
155
+ <i class="mdi mdi-calendar-check"></i>
156
+ <span class="nav-text">Calendar</span>
157
+ </a>
158
+ </li>
159
+
160
+
161
+
162
+
163
+
164
+ <li class="has-sub" >
165
+ <a class="sidenav-item-link" href="javascript:void(0)" data-toggle="collapse" data-target="#email"
166
+ aria-expanded="false" aria-controls="email">
167
+ <i class="mdi mdi-email"></i>
168
+ <span class="nav-text">email</span> <b class="caret"></b>
169
+ </a>
170
+ <ul class="collapse" id="email"
171
+ data-parent="#sidebar-menu">
172
+ <div class="sub-menu">
173
+
174
+
175
+
176
+ <li >
177
+ <a class="sidenav-item-link" href="email-inbox.html">
178
+ <span class="nav-text">Email Inbox</span>
179
+
180
+ </a>
181
+ </li>
182
+
183
+
184
+
185
+
186
+
187
+
188
+ <li >
189
+ <a class="sidenav-item-link" href="email-details.html">
190
+ <span class="nav-text">Email Details</span>
191
+
192
+ </a>
193
+ </li>
194
+
195
+
196
+
197
+
198
+
199
+
200
+ <li >
201
+ <a class="sidenav-item-link" href="email-compose.html">
202
+ <span class="nav-text">Email Compose</span>
203
+
204
+ </a>
205
+ </li>
206
+
207
+
208
+
209
+
210
+ </div>
211
+ </ul>
212
+ </li>
213
+
214
+
215
+
216
+
217
+
218
+ <li class="section-title">
219
+ UI Elements
220
+ </li>
221
+
222
+
223
+
224
+
225
+
226
+ <li class="has-sub active expand" >
227
+ <a class="sidenav-item-link" href="javascript:void(0)" data-toggle="collapse" data-target="#ui-elements"
228
+ aria-expanded="false" aria-controls="ui-elements">
229
+ <i class="mdi mdi-folder-outline"></i>
230
+ <span class="nav-text">UI Components</span> <b class="caret"></b>
231
+ </a>
232
+ <ul class="collapse show" id="ui-elements"
233
+ data-parent="#sidebar-menu">
234
+ <div class="sub-menu">
235
+
236
+
237
+
238
+ <li class="active" >
239
+ <a class="sidenav-item-link" href="alert.html">
240
+ <span class="nav-text">Alert</span>
241
+
242
+ </a>
243
+ </li>
244
+
245
+
246
+
247
+
248
+
249
+
250
+ <li >
251
+ <a class="sidenav-item-link" href="badge.html">
252
+ <span class="nav-text">Badge</span>
253
+
254
+ </a>
255
+ </li>
256
+
257
+
258
+
259
+
260
+
261
+
262
+ <li >
263
+ <a class="sidenav-item-link" href="breadcrumb.html">
264
+ <span class="nav-text">Breadcrumb</span>
265
+
266
+ </a>
267
+ </li>
268
+
269
+
270
+
271
+
272
+
273
+ <li class="has-sub" >
274
+ <a class="sidenav-item-link" href="javascript:void(0)" data-toggle="collapse" data-target="#buttons"
275
+ aria-expanded="false" aria-controls="buttons">
276
+ <span class="nav-text">Buttons</span> <b class="caret"></b>
277
+ </a>
278
+ <ul class="collapse" id="buttons">
279
+ <div class="sub-menu">
280
+
281
+ <li >
282
+ <a href="button-default.html">Button Default</a>
283
+ </li>
284
+
285
+ <li >
286
+ <a href="button-dropdown.html">Button Dropdown</a>
287
+ </li>
288
+
289
+ <li >
290
+ <a href="button-group.html">Button Group</a>
291
+ </li>
292
+
293
+ <li >
294
+ <a href="button-social.html">Button Social</a>
295
+ </li>
296
+
297
+ <li >
298
+ <a href="button-loading.html">Button Loading</a>
299
+ </li>
300
+
301
+ </div>
302
+ </ul>
303
+ </li>
304
+
305
+
306
+
307
+
308
+
309
+ <li >
310
+ <a class="sidenav-item-link" href="card.html">
311
+ <span class="nav-text">Card</span>
312
+
313
+ </a>
314
+ </li>
315
+
316
+
317
+
318
+
319
+
320
+
321
+ <li >
322
+ <a class="sidenav-item-link" href="carousel.html">
323
+ <span class="nav-text">Carousel</span>
324
+
325
+ </a>
326
+ </li>
327
+
328
+
329
+
330
+
331
+
332
+
333
+ <li >
334
+ <a class="sidenav-item-link" href="collapse.html">
335
+ <span class="nav-text">Collapse</span>
336
+
337
+ </a>
338
+ </li>
339
+
340
+
341
+
342
+
343
+
344
+
345
+ <li >
346
+ <a class="sidenav-item-link" href="editor.html">
347
+ <span class="nav-text">Editor</span>
348
+
349
+ </a>
350
+ </li>
351
+
352
+
353
+
354
+
355
+
356
+
357
+ <li >
358
+ <a class="sidenav-item-link" href="list-group.html">
359
+ <span class="nav-text">List Group</span>
360
+
361
+ </a>
362
+ </li>
363
+
364
+
365
+
366
+
367
+
368
+
369
+ <li >
370
+ <a class="sidenav-item-link" href="modal.html">
371
+ <span class="nav-text">Modal</span>
372
+
373
+ </a>
374
+ </li>
375
+
376
+
377
+
378
+
379
+
380
+
381
+ <li >
382
+ <a class="sidenav-item-link" href="pagination.html">
383
+ <span class="nav-text">Pagination</span>
384
+
385
+ </a>
386
+ </li>
387
+
388
+
389
+
390
+
391
+
392
+
393
+ <li >
394
+ <a class="sidenav-item-link" href="popover-tooltip.html">
395
+ <span class="nav-text">Popover & Tooltip</span>
396
+
397
+ </a>
398
+ </li>
399
+
400
+
401
+
402
+
403
+
404
+
405
+ <li >
406
+ <a class="sidenav-item-link" href="progress-bar.html">
407
+ <span class="nav-text">Progress Bar</span>
408
+
409
+ </a>
410
+ </li>
411
+
412
+
413
+
414
+
415
+
416
+
417
+ <li >
418
+ <a class="sidenav-item-link" href="spinner.html">
419
+ <span class="nav-text">Spinner</span>
420
+
421
+ </a>
422
+ </li>
423
+
424
+
425
+
426
+
427
+
428
+
429
+ <li >
430
+ <a class="sidenav-item-link" href="switches.html">
431
+ <span class="nav-text">Switches</span>
432
+
433
+ </a>
434
+ </li>
435
+
436
+
437
+
438
+
439
+
440
+ <li class="has-sub" >
441
+ <a class="sidenav-item-link" href="javascript:void(0)" data-toggle="collapse" data-target="#tables"
442
+ aria-expanded="false" aria-controls="tables">
443
+ <span class="nav-text">Tables</span> <b class="caret"></b>
444
+ </a>
445
+ <ul class="collapse" id="tables">
446
+ <div class="sub-menu">
447
+
448
+ <li >
449
+ <a href="bootstarp-tables.html">Bootstrap Tables</a>
450
+ </li>
451
+
452
+ <li >
453
+ <a href="data-tables.html">Data Tables</a>
454
+ </li>
455
+
456
+ </div>
457
+ </ul>
458
+ </li>
459
+
460
+
461
+
462
+
463
+
464
+ <li >
465
+ <a class="sidenav-item-link" href="tab.html">
466
+ <span class="nav-text">Tab</span>
467
+
468
+ </a>
469
+ </li>
470
+
471
+
472
+
473
+
474
+
475
+
476
+ <li >
477
+ <a class="sidenav-item-link" href="toaster.html">
478
+ <span class="nav-text">Toaster</span>
479
+
480
+ </a>
481
+ </li>
482
+
483
+
484
+
485
+
486
+
487
+ <li class="has-sub" >
488
+ <a class="sidenav-item-link" href="javascript:void(0)" data-toggle="collapse" data-target="#icons"
489
+ aria-expanded="false" aria-controls="icons">
490
+ <span class="nav-text">Icons</span> <b class="caret"></b>
491
+ </a>
492
+ <ul class="collapse" id="icons">
493
+ <div class="sub-menu">
494
+
495
+ <li >
496
+ <a href="material-icons.html">Material Icon</a>
497
+ </li>
498
+
499
+ <li >
500
+ <a href="flag-icons.html">Flag Icon</a>
501
+ </li>
502
+
503
+ </div>
504
+ </ul>
505
+ </li>
506
+
507
+
508
+
509
+
510
+ <li class="has-sub" >
511
+ <a class="sidenav-item-link" href="javascript:void(0)" data-toggle="collapse" data-target="#forms"
512
+ aria-expanded="false" aria-controls="forms">
513
+ <span class="nav-text">Forms</span> <b class="caret"></b>
514
+ </a>
515
+ <ul class="collapse" id="forms">
516
+ <div class="sub-menu">
517
+
518
+ <li >
519
+ <a href="basic-input.html">Basic Input</a>
520
+ </li>
521
+
522
+ <li >
523
+ <a href="input-group.html">Input Group</a>
524
+ </li>
525
+
526
+ <li >
527
+ <a href="checkbox-radio.html">Checkbox & Radio</a>
528
+ </li>
529
+
530
+ <li >
531
+ <a href="form-validation.html">Form Validation</a>
532
+ </li>
533
+
534
+ <li >
535
+ <a href="form-advance.html">Form Advance</a>
536
+ </li>
537
+
538
+ </div>
539
+ </ul>
540
+ </li>
541
+
542
+
543
+
544
+
545
+ <li class="has-sub" >
546
+ <a class="sidenav-item-link" href="javascript:void(0)" data-toggle="collapse" data-target="#maps"
547
+ aria-expanded="false" aria-controls="maps">
548
+ <span class="nav-text">Maps</span> <b class="caret"></b>
549
+ </a>
550
+ <ul class="collapse" id="maps">
551
+ <div class="sub-menu">
552
+
553
+ <li >
554
+ <a href="google-maps.html">Google Map</a>
555
+ </li>
556
+
557
+ <li >
558
+ <a href="vector-maps.html">Vector Map</a>
559
+ </li>
560
+
561
+ </div>
562
+ </ul>
563
+ </li>
564
+
565
+
566
+
567
+
568
+ <li class="has-sub" >
569
+ <a class="sidenav-item-link" href="javascript:void(0)" data-toggle="collapse" data-target="#widgets"
570
+ aria-expanded="false" aria-controls="widgets">
571
+ <span class="nav-text">Widgets</span> <b class="caret"></b>
572
+ </a>
573
+ <ul class="collapse" id="widgets">
574
+ <div class="sub-menu">
575
+
576
+ <li >
577
+ <a href="widgets-general.html">General Widget</a>
578
+ </li>
579
+
580
+ <li >
581
+ <a href="widgets-chart.html">Chart Widget</a>
582
+ </li>
583
+
584
+ </div>
585
+ </ul>
586
+ </li>
587
+
588
+
589
+
590
+ </div>
591
+ </ul>
592
+ </li>
593
+
594
+
595
+
596
+
597
+
598
+ <li class="has-sub" >
599
+ <a class="sidenav-item-link" href="javascript:void(0)" data-toggle="collapse" data-target="#charts"
600
+ aria-expanded="false" aria-controls="charts">
601
+ <i class="mdi mdi-chart-pie"></i>
602
+ <span class="nav-text">Charts</span> <b class="caret"></b>
603
+ </a>
604
+ <ul class="collapse" id="charts"
605
+ data-parent="#sidebar-menu">
606
+ <div class="sub-menu">
607
+
608
+
609
+
610
+ <li >
611
+ <a class="sidenav-item-link" href="apex-charts.html">
612
+ <span class="nav-text">Apex Charts</span>
613
+
614
+ </a>
615
+ </li>
616
+
617
+
618
+
619
+
620
+ </div>
621
+ </ul>
622
+ </li>
623
+
624
+
625
+
626
+
627
+
628
+ <li class="section-title">
629
+ Pages
630
+ </li>
631
+
632
+
633
+
634
+
635
+
636
+ <li class="has-sub" >
637
+ <a class="sidenav-item-link" href="javascript:void(0)" data-toggle="collapse" data-target="#users"
638
+ aria-expanded="false" aria-controls="users">
639
+ <i class="mdi mdi-image-filter-none"></i>
640
+ <span class="nav-text">User</span> <b class="caret"></b>
641
+ </a>
642
+ <ul class="collapse" id="users"
643
+ data-parent="#sidebar-menu">
644
+ <div class="sub-menu">
645
+
646
+
647
+
648
+ <li >
649
+ <a class="sidenav-item-link" href="user-profile.html">
650
+ <span class="nav-text">User Profile</span>
651
+
652
+ </a>
653
+ </li>
654
+
655
+
656
+
657
+
658
+
659
+
660
+ <li >
661
+ <a class="sidenav-item-link" href="user-activities.html">
662
+ <span class="nav-text">User Activities</span>
663
+
664
+ </a>
665
+ </li>
666
+
667
+
668
+
669
+
670
+
671
+
672
+ <li >
673
+ <a class="sidenav-item-link" href="user-profile-settings.html">
674
+ <span class="nav-text">User Profile Settings</span>
675
+
676
+ </a>
677
+ </li>
678
+
679
+
680
+
681
+
682
+
683
+
684
+ <li >
685
+ <a class="sidenav-item-link" href="user-account-settings.html">
686
+ <span class="nav-text">User Account Settings</span>
687
+
688
+ </a>
689
+ </li>
690
+
691
+
692
+
693
+
694
+
695
+
696
+ <li >
697
+ <a class="sidenav-item-link" href="user-planing-settings.html">
698
+ <span class="nav-text">User Planing Settings</span>
699
+
700
+ </a>
701
+ </li>
702
+
703
+
704
+
705
+
706
+
707
+
708
+ <li >
709
+ <a class="sidenav-item-link" href="user-billing.html">
710
+ <span class="nav-text">User billing</span>
711
+
712
+ </a>
713
+ </li>
714
+
715
+
716
+
717
+
718
+
719
+
720
+ <li >
721
+ <a class="sidenav-item-link" href="user-notify-settings.html">
722
+ <span class="nav-text">User Notify Settings</span>
723
+
724
+ </a>
725
+ </li>
726
+
727
+
728
+
729
+
730
+ </div>
731
+ </ul>
732
+ </li>
733
+
734
+
735
+
736
+
737
+
738
+ <li class="has-sub" >
739
+ <a class="sidenav-item-link" href="javascript:void(0)" data-toggle="collapse" data-target="#authentication"
740
+ aria-expanded="false" aria-controls="authentication">
741
+ <i class="mdi mdi-account"></i>
742
+ <span class="nav-text">Authentication</span> <b class="caret"></b>
743
+ </a>
744
+ <ul class="collapse" id="authentication"
745
+ data-parent="#sidebar-menu">
746
+ <div class="sub-menu">
747
+
748
+
749
+
750
+ <li >
751
+ <a class="sidenav-item-link" href="sign-in.html">
752
+ <span class="nav-text">Sign In</span>
753
+
754
+ </a>
755
+ </li>
756
+
757
+
758
+
759
+
760
+
761
+
762
+ <li >
763
+ <a class="sidenav-item-link" href="sign-up.html">
764
+ <span class="nav-text">Sign Up</span>
765
+
766
+ </a>
767
+ </li>
768
+
769
+
770
+
771
+
772
+
773
+
774
+ <li >
775
+ <a class="sidenav-item-link" href="reset-password.html">
776
+ <span class="nav-text">Reset Password</span>
777
+
778
+ </a>
779
+ </li>
780
+
781
+
782
+
783
+
784
+ </div>
785
+ </ul>
786
+ </li>
787
+
788
+
789
+
790
+
791
+
792
+ <li class="has-sub" >
793
+ <a class="sidenav-item-link" href="javascript:void(0)" data-toggle="collapse" data-target="#other-page"
794
+ aria-expanded="false" aria-controls="other-page">
795
+ <i class="mdi mdi-file-multiple"></i>
796
+ <span class="nav-text">Other pages</span> <b class="caret"></b>
797
+ </a>
798
+ <ul class="collapse" id="other-page"
799
+ data-parent="#sidebar-menu">
800
+ <div class="sub-menu">
801
+
802
+
803
+
804
+ <li >
805
+ <a class="sidenav-item-link" href="invoice.html">
806
+ <span class="nav-text">Invoice</span>
807
+
808
+ </a>
809
+ </li>
810
+
811
+
812
+
813
+
814
+
815
+
816
+ <li >
817
+ <a class="sidenav-item-link" href="404.html">
818
+ <span class="nav-text">404 page</span>
819
+
820
+ </a>
821
+ </li>
822
+
823
+
824
+
825
+
826
+
827
+
828
+ <li >
829
+ <a class="sidenav-item-link" href="page-comingsoon.html">
830
+ <span class="nav-text">Coming Soon</span>
831
+
832
+ </a>
833
+ </li>
834
+
835
+
836
+
837
+
838
+
839
+
840
+ <li >
841
+ <a class="sidenav-item-link" href="page-maintenance.html">
842
+ <span class="nav-text">Maintenance</span>
843
+
844
+ </a>
845
+ </li>
846
+
847
+
848
+
849
+
850
+ </div>
851
+ </ul>
852
+ </li>
853
+
854
+
855
+
856
+
857
+
858
+ <li class="section-title">
859
+ Documentation
860
+ </li>
861
+
862
+
863
+
864
+
865
+
866
+ <li
867
+ >
868
+ <a class="sidenav-item-link" href="getting-started.html">
869
+ <i class="mdi mdi-airplane"></i>
870
+ <span class="nav-text">Getting Started</span>
871
+ </a>
872
+ </li>
873
+
874
+
875
+
876
+
877
+
878
+ <li class="has-sub" >
879
+ <a class="sidenav-item-link" href="javascript:void(0)" data-toggle="collapse" data-target="#customization"
880
+ aria-expanded="false" aria-controls="customization">
881
+ <i class="mdi mdi-square-edit-outline"></i>
882
+ <span class="nav-text">Customization</span> <b class="caret"></b>
883
+ </a>
884
+ <ul class="collapse" id="customization"
885
+ data-parent="#sidebar-menu">
886
+ <div class="sub-menu">
887
+
888
+
889
+
890
+ <li >
891
+ <a class="sidenav-item-link" href="navbar-customization.html">
892
+ <span class="nav-text">Navbar</span>
893
+
894
+ </a>
895
+ </li>
896
+
897
+
898
+
899
+
900
+
901
+
902
+ <li >
903
+ <a class="sidenav-item-link" href="sidebar-customization.html">
904
+ <span class="nav-text">Sidebar</span>
905
+
906
+ </a>
907
+ </li>
908
+
909
+
910
+
911
+
912
+
913
+
914
+ <li >
915
+ <a class="sidenav-item-link" href="styling.html">
916
+ <span class="nav-text">Styling</span>
917
+
918
+ </a>
919
+ </li>
920
+
921
+
922
+
923
+
924
+ </div>
925
+ </ul>
926
+ </li>
927
+
928
+
929
+
930
+ </ul>
931
+
932
+ </div>
933
+
934
+ <div class="sidebar-footer">
935
+ <div class="sidebar-footer-content">
936
+ <ul class="d-flex">
937
+ <li>
938
+ <a href="user-account-settings.html" data-toggle="tooltip" title="Profile settings"><i class="mdi mdi-settings"></i></a></li>
939
+ <li>
940
+ <a href="#" data-toggle="tooltip" title="No chat messages"><i class="mdi mdi-chat-processing"></i></a>
941
+ </li>
942
+ </ul>
943
+ </div>
944
+ </div>
945
+ </div>
946
+ </aside>
947
+
948
+
949
+
950
+ <!-- ====================================
951
+ ——— PAGE WRAPPER
952
+ ===================================== -->
953
+ <div class="page-wrapper">
954
+
955
+ <!-- Header -->
956
+ <header class="main-header" id="header">
957
+ <nav class="navbar navbar-expand-lg navbar-light" id="navbar">
958
+ <!-- Sidebar toggle button -->
959
+ <button id="sidebar-toggler" class="sidebar-toggle">
960
+ <span class="sr-only">Toggle navigation</span>
961
+ </button>
962
+
963
+ <span class="page-title">alerts</span>
964
+
965
+ <div class="navbar-right ">
966
+
967
+ <!-- search form -->
968
+ <div class="search-form">
969
+ <form action="index.html" method="get">
970
+ <div class="input-group input-group-sm" id="input-group-search">
971
+ <input type="text" autocomplete="off" name="query" id="search-input" class="form-control" placeholder="Search..." />
972
+ <div class="input-group-append">
973
+ <button class="btn" type="button">/</button>
974
+ </div>
975
+ </div>
976
+ </form>
977
+ <ul class="dropdown-menu dropdown-menu-search">
978
+
979
+ <li class="nav-item">
980
+ <a class="nav-link" href="index.html">Morbi leo risus</a>
981
+ </li>
982
+ <li class="nav-item">
983
+ <a class="nav-link" href="index.html">Dapibus ac facilisis in</a>
984
+ </li>
985
+ <li class="nav-item">
986
+ <a class="nav-link" href="index.html">Porta ac consectetur ac</a>
987
+ </li>
988
+ <li class="nav-item">
989
+ <a class="nav-link" href="index.html">Vestibulum at eros</a>
990
+ </li>
991
+
992
+ </ul>
993
+
994
+ </div>
995
+
996
+ <ul class="nav navbar-nav">
997
+ <!-- Offcanvas -->
998
+ <li class="custom-dropdown">
999
+ <a class="offcanvas-toggler active custom-dropdown-toggler" data-offcanvas="contact-off" href="javascript:" >
1000
+ <i class="mdi mdi-contacts icon"></i>
1001
+ </a>
1002
+ </li>
1003
+ <li class="custom-dropdown">
1004
+ <button class="notify-toggler custom-dropdown-toggler">
1005
+ <i class="mdi mdi-bell-outline icon"></i>
1006
+ <span class="badge badge-xs rounded-circle">21</span>
1007
+ </button>
1008
+ <div class="dropdown-notify">
1009
+
1010
+ <header>
1011
+ <div class="nav nav-underline" id="nav-tab" role="tablist">
1012
+ <a class="nav-item nav-link active" id="all-tabs" data-toggle="tab" href="#all" role="tab" aria-controls="nav-home"
1013
+ aria-selected="true">All (5)</a>
1014
+ <a class="nav-item nav-link" id="message-tab" data-toggle="tab" href="#message" role="tab" aria-controls="nav-profile"
1015
+ aria-selected="false">Msgs (4)</a>
1016
+ <a class="nav-item nav-link" id="other-tab" data-toggle="tab" href="#other" role="tab" aria-controls="nav-contact"
1017
+ aria-selected="false">Others (3)</a>
1018
+ </div>
1019
+ </header>
1020
+
1021
+ <div class="" data-simplebar style="height: 325px;">
1022
+ <div class="tab-content" id="myTabContent">
1023
+
1024
+ <div class="tab-pane fade show active" id="all" role="tabpanel" aria-labelledby="all-tabs">
1025
+
1026
+ <div class="media media-sm bg-warning-10 p-4 mb-0">
1027
+ <div class="media-sm-wrapper">
1028
+ <a href="user-profile.html">
1029
+ <img src="images/user/user-sm-02.jpg" alt="User Image">
1030
+ </a>
1031
+ </div>
1032
+ <div class="media-body">
1033
+ <a href="user-profile.html">
1034
+ <span class="title mb-0">John Doe</span>
1035
+ <span class="discribe">Extremity sweetness difficult behaviour he of. On disposal of as landlord horrible. Afraid at highly months do things on at.</span>
1036
+ <span class="time">
1037
+ <time>Just now</time>...
1038
+ </span>
1039
+ </a>
1040
+ </div>
1041
+ </div>
1042
+
1043
+ <div class="media media-sm p-4 bg-light mb-0">
1044
+ <div class="media-sm-wrapper bg-primary">
1045
+ <a href="user-profile.html">
1046
+ <i class="mdi mdi-calendar-check-outline"></i>
1047
+ </a>
1048
+ </div>
1049
+ <div class="media-body">
1050
+ <a href="user-profile.html">
1051
+ <span class="title mb-0">New event added</span>
1052
+ <span class="discribe">1/3/2014 (1pm - 2pm)</span>
1053
+ <span class="time">
1054
+ <time>10 min ago...</time>...
1055
+ </span>
1056
+ </a>
1057
+ </div>
1058
+ </div>
1059
+
1060
+ <div class="media media-sm p-4 mb-0">
1061
+ <div class="media-sm-wrapper">
1062
+ <a href="user-profile.html">
1063
+ <img src="images/user/user-sm-03.jpg" alt="User Image">
1064
+ </a>
1065
+ </div>
1066
+ <div class="media-body">
1067
+ <a href="user-profile.html">
1068
+ <span class="title mb-0">Sagge Hudson</span>
1069
+ <span class="discribe">On disposal of as landlord Afraid at highly months do things on at.</span>
1070
+ <span class="time">
1071
+ <time>1 hrs ago</time>...
1072
+ </span>
1073
+ </a>
1074
+ </div>
1075
+ </div>
1076
+
1077
+ <div class="media media-sm p-4 mb-0">
1078
+ <div class="media-sm-wrapper bg-info-dark">
1079
+ <a href="user-profile.html">
1080
+ <i class="mdi mdi-account-multiple-check"></i>
1081
+ </a>
1082
+ </div>
1083
+ <div class="media-body">
1084
+ <a href="user-profile.html">
1085
+ <span class="title mb-0">Add request</span>
1086
+ <span class="discribe">Add Dany Jones as your contact.</span>
1087
+ <div class="buttons">
1088
+ <a href="#" class="btn btn-sm btn-success shadow-none text-white">accept</a>
1089
+ <a href="#" class="btn btn-sm shadow-none">delete</a>
1090
+ </div>
1091
+ <span class="time">
1092
+ <time>6 hrs ago</time>...
1093
+ </span>
1094
+ </a>
1095
+ </div>
1096
+ </div>
1097
+
1098
+ <div class="media media-sm p-4 mb-0">
1099
+ <div class="media-sm-wrapper bg-info">
1100
+ <a href="user-profile.html">
1101
+ <i class="mdi mdi-playlist-check"></i>
1102
+ </a>
1103
+ </div>
1104
+ <div class="media-body">
1105
+ <a href="user-profile.html">
1106
+ <span class="title mb-0">Task complete</span>
1107
+ <span class="discribe">Afraid at highly months do things on at.</span>
1108
+ <span class="time">
1109
+ <time>1 hrs ago</time>...
1110
+ </span>
1111
+ </a>
1112
+ </div>
1113
+ </div>
1114
+
1115
+ </div>
1116
+
1117
+ <div class="tab-pane fade" id="message" role="tabpanel" aria-labelledby="message-tab">
1118
+
1119
+ <div class="media media-sm p-4 mb-0">
1120
+ <div class="media-sm-wrapper">
1121
+ <a href="user-profile.html">
1122
+ <img src="images/user/user-sm-01.jpg" alt="User Image">
1123
+ </a>
1124
+ </div>
1125
+ <div class="media-body">
1126
+ <a href="user-profile.html">
1127
+ <span class="title mb-0">Selena Wagner</span>
1128
+ <span class="discribe">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</span>
1129
+ <span class="time">
1130
+ <time>15 min ago</time>...
1131
+ </span>
1132
+ </a>
1133
+ </div>
1134
+ </div>
1135
+
1136
+ <div class="media media-sm p-4 mb-0">
1137
+ <div class="media-sm-wrapper">
1138
+ <a href="user-profile.html">
1139
+ <img src="images/user/user-sm-03.jpg" alt="User Image">
1140
+ </a>
1141
+ </div>
1142
+ <div class="media-body">
1143
+ <a href="user-profile.html">
1144
+ <span class="title mb-0">Sagge Hudson</span>
1145
+ <span class="discribe">On disposal of as landlord Afraid at highly months do things on at.</span>
1146
+ <span class="time">
1147
+ <time>1 hrs ago</time>...
1148
+ </span>
1149
+ </a>
1150
+ </div>
1151
+ </div>
1152
+
1153
+ <div class="media media-sm bg-warning-10 p-4 mb-0">
1154
+ <div class="media-sm-wrapper">
1155
+ <a href="user-profile.html">
1156
+ <img src="images/user/user-sm-02.jpg" alt="User Image">
1157
+ </a>
1158
+ </div>
1159
+ <div class="media-body">
1160
+ <a href="user-profile.html">
1161
+ <span class="title mb-0">John Doe</span>
1162
+ <span class="discribe">Extremity sweetness difficult behaviour he of. On disposal of as landlord horrible. Afraid
1163
+ at highly months do things on at.</span>
1164
+ <span class="time">
1165
+ <time>Just now</time>...
1166
+ </span>
1167
+ </a>
1168
+ </div>
1169
+ </div>
1170
+
1171
+ <div class="media media-sm p-4 mb-0">
1172
+ <div class="media-sm-wrapper">
1173
+ <a href="user-profile.html">
1174
+ <img src="images/user/user-sm-04.jpg" alt="User Image">
1175
+ </a>
1176
+ </div>
1177
+ <div class="media-body">
1178
+ <a href="user-profile.html">
1179
+ <span class="title mb-0">Albrecht Straub</span>
1180
+ <span class="discribe"> Beatae quia natus assumenda laboriosam, nisi perferendis aliquid consectetur expedita non tenetur.</span>
1181
+ <span class="time">
1182
+ <time>Just now</time>...
1183
+ </span>
1184
+ </a>
1185
+ </div>
1186
+ </div>
1187
+
1188
+ </div>
1189
+ <div class="tab-pane fade" id="other" role="tabpanel" aria-labelledby="contact-tab">
1190
+
1191
+ <div class="media media-sm p-4 bg-light mb-0">
1192
+ <div class="media-sm-wrapper bg-primary">
1193
+ <a href="user-profile.html">
1194
+ <i class="mdi mdi-calendar-check-outline"></i>
1195
+ </a>
1196
+ </div>
1197
+ <div class="media-body">
1198
+ <a href="user-profile.html">
1199
+ <span class="title mb-0">New event added</span>
1200
+ <span class="discribe">1/3/2014 (1pm - 2pm)</span>
1201
+ <span class="time">
1202
+ <time>10 min ago...</time>...
1203
+ </span>
1204
+ </a>
1205
+ </div>
1206
+ </div>
1207
+
1208
+ <div class="media media-sm p-4 mb-0">
1209
+ <div class="media-sm-wrapper bg-info-dark">
1210
+ <a href="user-profile.html">
1211
+ <i class="mdi mdi-account-multiple-check"></i>
1212
+ </a>
1213
+ </div>
1214
+ <div class="media-body">
1215
+ <a href="user-profile.html">
1216
+ <span class="title mb-0">Add request</span>
1217
+ <span class="discribe">Add Dany Jones as your contact.</span>
1218
+ <div class="buttons">
1219
+ <a href="#" class="btn btn-sm btn-success shadow-none text-white">accept</a>
1220
+ <a href="#" class="btn btn-sm shadow-none">delete</a>
1221
+ </div>
1222
+ <span class="time">
1223
+ <time>6 hrs ago</time>...
1224
+ </span>
1225
+ </a>
1226
+ </div>
1227
+ </div>
1228
+
1229
+ <div class="media media-sm p-4 mb-0">
1230
+ <div class="media-sm-wrapper bg-info">
1231
+ <a href="user-profile.html">
1232
+ <i class="mdi mdi-playlist-check"></i>
1233
+ </a>
1234
+ </div>
1235
+ <div class="media-body">
1236
+ <a href="user-profile.html">
1237
+ <span class="title mb-0">Task complete</span>
1238
+ <span class="discribe">Afraid at highly months do things on at.</span>
1239
+ <span class="time">
1240
+ <time>1 hrs ago</time>...
1241
+ </span>
1242
+ </a>
1243
+ </div>
1244
+ </div>
1245
+
1246
+ </div>
1247
+ </div>
1248
+ </div>
1249
+
1250
+ <footer class="border-top dropdown-notify-footer">
1251
+ <div class="d-flex justify-content-between align-items-center py-2 px-4">
1252
+ <span>Last updated 3 min ago</span>
1253
+ <a id="refress-button" href="javascript:" class="btn mdi mdi-cached btn-refress"></a>
1254
+ </div>
1255
+ </footer>
1256
+ </div>
1257
+ </li>
1258
+ <!-- User Account -->
1259
+ <li class="dropdown user-menu">
1260
+ <button class="dropdown-toggle nav-link" data-toggle="dropdown">
1261
+ <img src="images/user/user-xs-01.jpg" class="user-image rounded-circle" alt="User Image" />
1262
+ <span class="d-none d-lg-inline-block">John Doe</span>
1263
+ </button>
1264
+ <ul class="dropdown-menu dropdown-menu-right">
1265
+ <li>
1266
+ <a class="dropdown-link-item" href="user-profile.html">
1267
+ <i class="mdi mdi-account-outline"></i>
1268
+ <span class="nav-text">My Profile</span>
1269
+ </a>
1270
+ </li>
1271
+ <li>
1272
+ <a class="dropdown-link-item" href="email-inbox.html">
1273
+ <i class="mdi mdi-email-outline"></i>
1274
+ <span class="nav-text">Message</span>
1275
+ <span class="badge badge-pill badge-primary">24</span>
1276
+ </a>
1277
+ </li>
1278
+ <li>
1279
+ <a class="dropdown-link-item" href="user-activities.html">
1280
+ <i class="mdi mdi-diamond-stone"></i>
1281
+ <span class="nav-text">Activitise</span></a>
1282
+ </li>
1283
+ <li>
1284
+ <a class="dropdown-link-item" href="user-account-settings.html">
1285
+ <i class="mdi mdi-settings"></i>
1286
+ <span class="nav-text">Account Setting</span>
1287
+ </a>
1288
+ </li>
1289
+
1290
+ <li class="dropdown-footer">
1291
+ <a class="dropdown-link-item" href="sign-in.html"> <i class="mdi mdi-logout"></i> Log Out </a>
1292
+ </li>
1293
+ </ul>
1294
+ </li>
1295
+ </ul>
1296
+ </div>
1297
+ </nav>
1298
+
1299
+
1300
+ </header>
1301
+
1302
+ <!-- ====================================
1303
+ ——— CONTENT WRAPPER
1304
+ ===================================== -->
1305
+ <div class="content-wrapper">
1306
+ <div class="content"> <!-- For Components documentaion -->
1307
+ <div class="card card-default">
1308
+ <div class="px-6 py-4">
1309
+ <p>Mono provides a variety of <span class="text-secondary text-capitalize">Bootstrap Alert</span> components with a little customization that suits its design standards. For more information, please see the official <a class="font-weight-bold" href="https://getbootstrap.com/docs/4.3/components/alerts/" target="_blank"> Bootstrap documentation.</a></p>
1310
+ </div>
1311
+ </div>
1312
+
1313
+ <!-- Default Alerts -->
1314
+ <div class="card card-default">
1315
+ <div class="card-header">
1316
+ <h2>Default Alerts</h2>
1317
+
1318
+ <a class="btn mdi mdi-code-tags" data-toggle="collapse" href="#collapse-alert-1" role="button" aria-expanded="false" ria-controls="collapse-alert-1"></a>
1319
+
1320
+ </div>
1321
+ <div class="card-body">
1322
+ <div class="collapse" id="collapse-alert-1">
1323
+ <pre class="language-html mb-4">
1324
+ <code >
1325
+ &lt;div class="alert alert-primary" role="alert">
1326
+ A simple primary alert—check it out!
1327
+ &lt;/div&gt;
1328
+
1329
+ &lt;div class="alert alert-secondary" role="alert"&gt;
1330
+ A simple secondary alert—check it out!
1331
+ &lt;/div&gt;
1332
+
1333
+ &lt;div class="alert alert-success" role="alert"&gt;
1334
+ A simple success alert—check it out!
1335
+ &lt;/div&gt;
1336
+
1337
+ &lt;div class="alert alert-danger" role="alert"&gt;
1338
+ A simple danger alert—check it out!
1339
+ &lt;/div&gt;
1340
+
1341
+ &lt;div class="alert alert-warning" role="alert"&gt;
1342
+ A simple warning alert—check it out!
1343
+ &lt;/div&gt;
1344
+
1345
+ &lt;div class="alert alert-info" role="alert"&gt;
1346
+ A simple info alert—check it out!
1347
+ &lt;/div&gt;
1348
+
1349
+ &lt;div class="alert alert-light" role="alert"&gt;
1350
+ A simple light alert—check it out!
1351
+ &lt;/div&gt;
1352
+
1353
+ &lt;div class="alert alert-dark" role="alert"&gt;
1354
+ A simple dark alert—check it out!
1355
+ &lt;/div&gt;
1356
+ </code>
1357
+ </pre>
1358
+ </div>
1359
+ <div>
1360
+ <div class="alert alert-primary" role="alert">
1361
+ A simple primary alert—check it out!
1362
+ </div>
1363
+ <div class="alert alert-secondary" role="alert">
1364
+ A simple secondary alert—check it out!
1365
+ </div>
1366
+ <div class="alert alert-success" role="alert">
1367
+ A simple success alert—check it out!
1368
+ </div>
1369
+ <div class="alert alert-danger" role="alert">
1370
+ A simple danger alert—check it out!
1371
+ </div>
1372
+ <div class="alert alert-warning" role="alert">
1373
+ A simple warning alert—check it out!
1374
+ </div>
1375
+ <div class="alert alert-info" role="alert">
1376
+ A simple info alert—check it out!
1377
+ </div>
1378
+ <div class="alert alert-light" role="alert">
1379
+ A simple light alert—check it out!
1380
+ </div>
1381
+ <div class="alert alert-dark" role="alert">
1382
+ A simple dark alert—check it out!
1383
+ </div>
1384
+ </div>
1385
+ </div>
1386
+ </div>
1387
+
1388
+ <!-- Outline Alerts -->
1389
+ <div class="card card-default">
1390
+ <div class="card-header">
1391
+ <h2>Outline Alerts</h2>
1392
+
1393
+ <a class="btn mdi mdi-code-tags" data-toggle="collapse" href="#collapse-alert-2" role="button"
1394
+ aria-expanded="false" aria-controls="collapse-alert-2"> </a>
1395
+
1396
+
1397
+ </div>
1398
+ <div class="card-body">
1399
+ <div class="collapse" id="collapse-alert-2">
1400
+ <pre class="language-html mb-4">
1401
+ <code >
1402
+ &lt;div class="alert alert-primary alert-outlined" role="alert">
1403
+ A simple primary alert—check it out!
1404
+ &lt;/div&gt;
1405
+
1406
+ &lt;div class="alert alert-secondary alert-outlined" role="alert"&gt;
1407
+ A simple secondary alert—check it out!
1408
+ &lt;/div&gt;
1409
+
1410
+ &lt;div class="alert alert-success alert-outlined" role="alert"&gt;
1411
+ A simple success alert—check it out!
1412
+ &lt;/div&gt;
1413
+
1414
+ &lt;div class="alert alert-danger alert-outlined" role="alert"&gt;
1415
+ A simple danger alert—check it out!
1416
+ &lt;/div&gt;
1417
+
1418
+ &lt;div class="alert alert-warning alert-outlined" role="alert"&gt;
1419
+ A simple warning alert—check it out!
1420
+ &lt;/div&gt;
1421
+
1422
+ &lt;div class="alert alert-info alert-outlined" role="alert"&gt;
1423
+ A simple info alert—check it out!
1424
+ &lt;/div&gt;
1425
+
1426
+ &lt;div class="alert alert-light alert-outlined" role="alert"&gt;
1427
+ A simple light alert—check it out!
1428
+ &lt;/div&gt;
1429
+
1430
+ &lt;div class="alert alert-dark alert-outlined" role="alert"&gt;
1431
+ A simple dark alert—check it out!
1432
+ &lt;/div&gt;
1433
+ </code>
1434
+ </pre>
1435
+ </div>
1436
+ <div>
1437
+ <div class="alert alert-primary alert-outlined" role="alert">
1438
+ A simple primary alert—check it out!
1439
+ </div>
1440
+ <div class="alert alert-secondary alert-outlined" role="alert">
1441
+ A simple secondary alert—check it out!
1442
+ </div>
1443
+ <div class="alert alert-success alert-outlined" role="alert">
1444
+ A simple success alert—check it out!
1445
+ </div>
1446
+ <div class="alert alert-danger alert-outlined" role="alert">
1447
+ A simple danger alert—check it out!
1448
+ </div>
1449
+ <div class="alert alert-warning alert-outlined" role="alert">
1450
+ A simple warning alert—check it out!
1451
+ </div>
1452
+ <div class="alert alert-info alert-outlined" role="alert">
1453
+ A simple info alert—check it out!
1454
+ </div>
1455
+ <div class="alert alert-light alert-outlined" role="alert">
1456
+ A simple light alert—check it out!
1457
+ </div>
1458
+ <div class="alert alert-dark alert-outlined" role="alert">
1459
+ A simple dark alert—check it out!
1460
+ </div>
1461
+ </div>
1462
+ </div>
1463
+ </div>
1464
+
1465
+ <!-- Dismissible Alerts -->
1466
+ <div class="card card-default">
1467
+ <div class="card-header">
1468
+ <h2>Dismissible Alerts</h2>
1469
+
1470
+ <a class="btn mdi mdi-code-tags" data-toggle="collapse" href="#collapse-alert-3" role="button"
1471
+ aria-expanded="false" aria-controls="collapse-alert-3"> </a>
1472
+
1473
+
1474
+ </div>
1475
+ <div class="card-body">
1476
+ <div class="collapse " id="collapse-alert-3">
1477
+ <pre class="language-html mb-4">
1478
+ <code >
1479
+ &lt;div class="alert alert-primary alert-dismissible fade show" role="alert"&gt;
1480
+ &lt;strong&gt;Holy guacamole!&lt;/strong&gt; You should check in on some of those fields below.
1481
+ &lt;button type="button" class="close" data-dismiss="alert" aria-label="Close"&gt;
1482
+ &lt;span aria-hidden="true"&gt;&times;&lt;/span&gt;
1483
+ &lt;/button&gt;
1484
+ &lt;/div&gt;
1485
+
1486
+ &lt;div class="alert alert-secondary alert-dismissible fade show" role="alert"&gt;
1487
+ &lt;strong&gt;Holy guacamole!&lt;/strong&gt; You should check in on some of those fields below.
1488
+ &lt;button type="button" class="close" data-dismiss="alert" aria-label="Close"&gt;
1489
+ &lt;span aria-hidden="true"&gt;&times;&lt;/span&gt;
1490
+ &lt;/button&gt;
1491
+ &lt;/div&gt;
1492
+
1493
+ &lt;div class="alert alert-success alert-dismissible fade show" role="alert"&gt;
1494
+ &lt;strong&gt;Holy guacamole!&lt;/strong&gt; You should check in on some of those fields below.
1495
+ &lt;button type="button" class="close" data-dismiss="alert" aria-label="Close"&gt;
1496
+ &lt;span aria-hidden="true"&gt;&times;&lt;/span&gt;
1497
+ &lt;/button&gt;
1498
+ &lt;/div&gt;
1499
+
1500
+ &lt;div class="alert alert-danger alert-dismissible fade show" role="alert"&gt;
1501
+ &lt;strong&gt;Holy guacamole!&lt;/strong&gt; You should check in on some of those fields below.
1502
+ &lt;button type="button" class="close" data-dismiss="alert" aria-label="Close"&gt;
1503
+ &lt;span aria-hidden="true"&gt;&times;&lt;/span&gt;
1504
+ &lt;/button&gt;
1505
+ &lt;/div&gt;
1506
+ &lt;div class="alert alert-warning alert-dismissible fade show" role="alert"&gt;
1507
+ &lt;strong&gt;Holy guacamole!&lt;/strong&gt; You should check in on some of those fields below.
1508
+ &lt;button type="button" class="close" data-dismiss="alert" aria-label="Close"&gt;
1509
+ &lt;span aria-hidden="true"&gt;&times;&lt;/span&gt;
1510
+ &lt;/button&gt;
1511
+ &lt;/div&gt;
1512
+
1513
+ &lt;div class="alert alert-info alert-dismissible fade show" role="alert"&gt;
1514
+ &lt;strong&gt;Holy guacamole!&lt;/strong&gt; You should check in on some of those fields below.
1515
+ &lt;button type="button" class="close" data-dismiss="alert" aria-label="Close"&gt;
1516
+ &lt;span aria-hidden="true"&gt;&times;&lt;/span&gt;
1517
+ &lt;/button&gt;
1518
+ &lt;/div&gt;
1519
+
1520
+ &lt;div class="alert alert-light alert-dismissible fade show" role="alert"&gt;
1521
+ &lt;strong&gt;Holy guacamole!&lt;/strong&gt; You should check in on some of those fields below.
1522
+ &lt;button type="button" class="close" data-dismiss="alert" aria-label="Close"&gt;
1523
+ &lt;span aria-hidden="true"&gt;&times;&lt;/span&gt;
1524
+ &lt;/button&gt;
1525
+ &lt;/div&gt;
1526
+
1527
+ &lt;div class="alert alert-dark alert-dismissible fade show" role="alert"&gt;
1528
+ &lt;strong&gt;Holy guacamole!&lt;/strong&gt; You should check in on some of those fields below.
1529
+ &lt;button type="button" class="close" data-dismiss="alert" aria-label="Close"&gt;
1530
+ &lt;span aria-hidden="true"&gt;&times;&lt;/span&gt;
1531
+ &lt;/button&gt;
1532
+ &lt;/div&gt;
1533
+ </code>
1534
+ </pre>
1535
+ </div>
1536
+ <div>
1537
+
1538
+ <div class="alert alert-primary alert-dismissible fade show" role="alert">
1539
+ <strong>Holy guacamole!</strong> You should check in on some of those fields below.
1540
+ <button type="button" class="close" data-dismiss="alert" aria-label="Close">
1541
+ <span aria-hidden="true">&times;</span>
1542
+ </button>
1543
+ </div>
1544
+ <div class="alert alert-secondary alert-dismissible fade show" role="alert">
1545
+ <strong>Holy guacamole!</strong> You should check in on some of those fields below.
1546
+ <button type="button" class="close" data-dismiss="alert" aria-label="Close">
1547
+ <span aria-hidden="true">&times;</span>
1548
+ </button>
1549
+ </div>
1550
+ <div class="alert alert-success alert-dismissible fade show" role="alert">
1551
+ <strong>Holy guacamole!</strong> You should check in on some of those fields below.
1552
+ <button type="button" class="close" data-dismiss="alert" aria-label="Close">
1553
+ <span aria-hidden="true">&times;</span>
1554
+ </button>
1555
+ </div>
1556
+ <div class="alert alert-danger alert-dismissible fade show" role="alert">
1557
+ <strong>Holy guacamole!</strong> You should check in on some of those fields below.
1558
+ <button type="button" class="close" data-dismiss="alert" aria-label="Close">
1559
+ <span aria-hidden="true">&times;</span>
1560
+ </button>
1561
+ </div>
1562
+ <div class="alert alert-warning alert-dismissible fade show" role="alert">
1563
+ <strong>Holy guacamole!</strong> You should check in on some of those fields below.
1564
+ <button type="button" class="close" data-dismiss="alert" aria-label="Close">
1565
+ <span aria-hidden="true">&times;</span>
1566
+ </button>
1567
+ </div>
1568
+ <div class="alert alert-info alert-dismissible fade show" role="alert">
1569
+ <strong>Holy guacamole!</strong> You should check in on some of those fields below.
1570
+ <button type="button" class="close" data-dismiss="alert" aria-label="Close">
1571
+ <span aria-hidden="true">&times;</span>
1572
+ </button>
1573
+ </div>
1574
+ <div class="alert alert-light alert-dismissible fade show" role="alert">
1575
+ <strong>Holy guacamole!</strong> You should check in on some of those fields below.
1576
+ <button type="button" class="close" data-dismiss="alert" aria-label="Close">
1577
+ <span aria-hidden="true">&times;</span>
1578
+ </button>
1579
+ </div>
1580
+ <div class="alert alert-dark alert-dismissible fade show" role="alert">
1581
+ <strong>Holy guacamole!</strong> You should check in on some of those fields below.
1582
+ <button type="button" class="close" data-dismiss="alert" aria-label="Close">
1583
+ <span aria-hidden="true">&times;</span>
1584
+ </button>
1585
+ </div>
1586
+
1587
+ </div>
1588
+ </div>
1589
+ </div>
1590
+
1591
+
1592
+ <!-- Alerts with icons -->
1593
+ <div class="card card-default">
1594
+ <div class="card-header">
1595
+ <h2>Alerts with icons</h2>
1596
+
1597
+ <a class="btn mdi mdi-code-tags" data-toggle="collapse" href="#collapse-alert-4" role="button"
1598
+ aria-expanded="false" aria-controls="collapse-alert-4"> </a>
1599
+
1600
+
1601
+ </div>
1602
+ <div class="card-body">
1603
+ <div class="collapse " id="collapse-alert-4">
1604
+ <pre class="language-html mb-4">
1605
+ <code >
1606
+ &lt;div class="alert alert-primary alert-icon" role="alert"&gt;
1607
+ &lt;i class="mdi mdi-bell-outline"&gt;&lt;/i&gt; A simple primary alert—check it out!
1608
+ &lt;/div&gt;
1609
+
1610
+ &lt;div class="alert alert-secondary alert-icon" role="alert"&gt;
1611
+ &lt;i class="mdi mdi-alert"&gt;&lt;/i&gt; A simple secondary alert—check it out!
1612
+ &lt;/div&gt;
1613
+
1614
+ &lt;div class="alert alert-success alert-icon" role="alert"&gt;
1615
+ &lt;i class="mdi mdi-checkbox-marked-outline"&gt;&lt;/i&gt; A simple success alert—check it out!
1616
+ &lt;/div&gt;
1617
+
1618
+ &lt;div class="alert alert-danger alert-icon" role="alert"&gt;
1619
+ &lt;i class="mdi mdi-diameter-variant"&gt;&lt;/i&gt; A simple danger alert—check it out!
1620
+ &lt;/div&gt;
1621
+
1622
+ &lt;div class="alert alert-warning alert-icon" role="alert"&gt;
1623
+ &lt;i class="mdi mdi-alert-decagram-outline"&gt;&lt;/i&gt; A simple warning alert—check it out!
1624
+ &lt;/div&gt;
1625
+
1626
+ &lt;div class="alert alert-info alert-icon" role="alert"&gt;
1627
+ &lt;i class="mdi mdi-alert-circle-outline"&gt;&lt;/i&gt; A simple info alert—check it out!
1628
+ &lt;/div&gt;
1629
+
1630
+ &lt;div class="alert alert-light alert-icon" role="alert"&gt;
1631
+ &lt;i class="mdi mdi-account-edit"&gt;&lt;/i&gt; A simple light alert—check it out!
1632
+ &lt;/div&gt;
1633
+
1634
+ &lt;div class="alert alert-dark alert-icon" role="alert"&gt;
1635
+ &lt;i class="mdi mdi-crosshairs-gps"&gt;&lt;/i&gt; A simple dark alert—check it out!
1636
+ &lt;/div&gt;
1637
+ </code>
1638
+ </pre>
1639
+ </div>
1640
+ <div>
1641
+
1642
+ <div class="alert alert-primary alert-icon" role="alert">
1643
+ <i class="mdi mdi-bell-outline"></i> A simple primary alert—check it out!
1644
+ </div>
1645
+ <div class="alert alert-secondary alert-icon" role="alert">
1646
+ <i class="mdi mdi-alert"></i> A simple secondary alert—check it out!
1647
+ </div>
1648
+ <div class="alert alert-success alert-icon" role="alert">
1649
+ <i class="mdi mdi-checkbox-marked-outline"></i> A simple success alert—check it out!
1650
+ </div>
1651
+ <div class="alert alert-danger alert-icon" role="alert">
1652
+ <i class="mdi mdi-diameter-variant"></i> A simple danger alert—check it out!
1653
+ </div>
1654
+ <div class="alert alert-warning alert-icon" role="alert">
1655
+ <i class="mdi mdi-alert-decagram-outline"></i> A simple warning alert—check it out!
1656
+ </div>
1657
+ <div class="alert alert-info alert-icon" role="alert">
1658
+ <i class="mdi mdi-alert-circle-outline"></i> A simple info alert—check it out!
1659
+ </div>
1660
+ <div class="alert alert-light alert-icon" role="alert">
1661
+ <i class="mdi mdi-account-edit"></i> A simple light alert—check it out!
1662
+ </div>
1663
+ <div class="alert alert-dark alert-icon" role="alert">
1664
+ <i class="mdi mdi-crosshairs-gps"></i> A simple dark alert—check it out!
1665
+ </div>
1666
+
1667
+ </div>
1668
+ </div>
1669
+ </div>
1670
+
1671
+
1672
+ </div>
1673
+
1674
+ </div>
1675
+
1676
+ <!-- Footer -->
1677
+ <footer class="footer mt-auto">
1678
+ <div class="copyright bg-white">
1679
+ <p>
1680
+ &copy; <span id="copy-year"></span> Copyright Mono Dashboard Bootstrap Template by <a class="text-primary" href="http://www.iamabdus.com/" target="_blank" >Abdus</a>.
1681
+ </p>
1682
+ </div>
1683
+ <script>
1684
+ var d = new Date();
1685
+ var year = d.getFullYear();
1686
+ document.getElementById("copy-year").innerHTML = year;
1687
+ </script>
1688
+ </footer>
1689
+
1690
+ </div>
1691
+ </div>
1692
+
1693
+ <!-- Card Offcanvas -->
1694
+ <div class="card card-offcanvas" id="contact-off" >
1695
+ <div class="card-header">
1696
+ <h2>Contacts</h2>
1697
+ <a href="#" class="btn btn-primary btn-pill px-4">Add New</a>
1698
+ </div>
1699
+ <div class="card-body">
1700
+
1701
+ <div class="mb-4">
1702
+ <input type="text" class="form-control form-control-lg form-control-secondary rounded-0" placeholder="Search contacts...">
1703
+ </div>
1704
+
1705
+ <div class="media media-sm">
1706
+ <div class="media-sm-wrapper">
1707
+ <a href="user-profile.html">
1708
+ <img src="images/user/user-sm-01.jpg" alt="User Image">
1709
+ <span class="active bg-primary"></span>
1710
+ </a>
1711
+ </div>
1712
+ <div class="media-body">
1713
+ <a href="user-profile.html">
1714
+ <span class="title">Selena Wagner</span>
1715
+ <span class="discribe">Designer</span>
1716
+ </a>
1717
+ </div>
1718
+ </div>
1719
+
1720
+ <div class="media media-sm">
1721
+ <div class="media-sm-wrapper">
1722
+ <a href="user-profile.html">
1723
+ <img src="images/user/user-sm-02.jpg" alt="User Image">
1724
+ <span class="active bg-primary"></span>
1725
+ </a>
1726
+ </div>
1727
+ <div class="media-body">
1728
+ <a href="user-profile.html">
1729
+ <span class="title">Walter Reuter</span>
1730
+ <span>Developer</span>
1731
+ </a>
1732
+ </div>
1733
+ </div>
1734
+
1735
+ <div class="media media-sm">
1736
+ <div class="media-sm-wrapper">
1737
+ <a href="user-profile.html">
1738
+ <img src="images/user/user-sm-03.jpg" alt="User Image">
1739
+ </a>
1740
+ </div>
1741
+ <div class="media-body">
1742
+ <a href="user-profile.html">
1743
+ <span class="title">Larissa Gebhardt</span>
1744
+ <span>Cyber Punk</span>
1745
+ </a>
1746
+ </div>
1747
+ </div>
1748
+
1749
+ <div class="media media-sm">
1750
+ <div class="media-sm-wrapper">
1751
+ <a href="user-profile.html">
1752
+ <img src="images/user/user-sm-04.jpg" alt="User Image">
1753
+ </a>
1754
+
1755
+ </div>
1756
+ <div class="media-body">
1757
+ <a href="user-profile.html">
1758
+ <span class="title">Albrecht Straub</span>
1759
+ <span>Photographer</span>
1760
+ </a>
1761
+ </div>
1762
+ </div>
1763
+
1764
+ <div class="media media-sm">
1765
+ <div class="media-sm-wrapper">
1766
+ <a href="user-profile.html">
1767
+ <img src="images/user/user-sm-05.jpg" alt="User Image">
1768
+ <span class="active bg-danger"></span>
1769
+ </a>
1770
+ </div>
1771
+ <div class="media-body">
1772
+ <a href="user-profile.html">
1773
+ <span class="title">Leopold Ebert</span>
1774
+ <span>Fashion Designer</span>
1775
+ </a>
1776
+ </div>
1777
+ </div>
1778
+
1779
+ <div class="media media-sm">
1780
+ <div class="media-sm-wrapper">
1781
+ <a href="user-profile.html">
1782
+ <img src="images/user/user-sm-06.jpg" alt="User Image">
1783
+ <span class="active bg-primary"></span>
1784
+ </a>
1785
+ </div>
1786
+ <div class="media-body">
1787
+ <a href="user-profile.html">
1788
+ <span class="title">Selena Wagner</span>
1789
+ <span>Photographer</span>
1790
+ </a>
1791
+ </div>
1792
+ </div>
1793
+
1794
+ </div>
1795
+ </div>
1796
+
1797
+
1798
+
1799
+
1800
+ <script src="plugins/jquery/jquery.min.js"></script>
1801
+ <script src="plugins/bootstrap/js/bootstrap.bundle.min.js"></script>
1802
+ <script src="plugins/simplebar/simplebar.min.js"></script>
1803
+ <script src="https://unpkg.com/hotkeys-js/dist/hotkeys.min.js"></script>
1804
+
1805
+
1806
+
1807
+ <script src="plugins/prism/prism.js"></script>
1808
+
1809
+
1810
+ <script src="js/mono.js"></script>
1811
+ <script src="js/chart.js"></script>
1812
+ <script src="js/map.js"></script>
1813
+ <script src="js/custom.js"></script>
1814
+
1815
+
1816
+
1817
+
1818
+ <!-- -->
1819
+
1820
+
1821
+ </body>
1822
+ </html>
analytics.html ADDED
@@ -0,0 +1,1812 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+
3
+ <!--
4
+ // WEBSITE: https://themefisher.com
5
+ // TWITTER: https://twitter.com/themefisher
6
+ // FACEBOOK: https://www.facebook.com/themefisher
7
+ // GITHUB: https://github.com/themefisher/
8
+ -->
9
+
10
+ <html lang="en" dir="ltr">
11
+ <head>
12
+ <meta charset="utf-8" />
13
+ <meta http-equiv="X-UA-Compatible" content="IE=edge" />
14
+ <meta name="viewport" content="width=device-width, initial-scale=1" />
15
+
16
+ <title>Mono - Responsive Admin & Dashboard Template</title>
17
+
18
+ <!-- GOOGLE FONTS -->
19
+ <link href="https://fonts.googleapis.com/css?family=Karla:400,700|Roboto" rel="stylesheet">
20
+ <link href="plugins/material/css/materialdesignicons.min.css" rel="stylesheet" />
21
+ <link href="plugins/simplebar/simplebar.css" rel="stylesheet" />
22
+
23
+ <!-- PLUGINS CSS STYLE -->
24
+ <link href="plugins/nprogress/nprogress.css" rel="stylesheet" />
25
+
26
+
27
+
28
+
29
+ <link href="plugins/jvectormap/jquery-jvectormap-2.0.3.css" rel="stylesheet" />
30
+
31
+
32
+
33
+
34
+
35
+ <link href="plugins/daterangepicker/daterangepicker.css" rel="stylesheet" />
36
+
37
+
38
+ <!-- MONO CSS -->
39
+ <link id="main-css-href" rel="stylesheet" href="css/style.css" />
40
+
41
+
42
+
43
+
44
+ <!-- FAVICON -->
45
+ <link href="images/favicon.png" rel="shortcut icon" />
46
+
47
+ <!--
48
+ HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries
49
+ -->
50
+ <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
51
+ <!--[if lt IE 9]>
52
+ <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
53
+ <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
54
+ <![endif]-->
55
+ <script src="plugins/nprogress/nprogress.js"></script>
56
+ </head>
57
+
58
+
59
+ <body class="navbar-fixed sidebar-fixed" id="body">
60
+ <script>
61
+ NProgress.configure({ showSpinner: false });
62
+ NProgress.start();
63
+ </script>
64
+
65
+
66
+
67
+ <!-- ====================================
68
+ ——— WRAPPER
69
+ ===================================== -->
70
+ <div class="wrapper">
71
+
72
+
73
+ <!-- ====================================
74
+ ——— LEFT SIDEBAR WITH OUT FOOTER
75
+ ===================================== -->
76
+ <aside class="left-sidebar sidebar-dark" id="left-sidebar">
77
+ <div id="sidebar" class="sidebar sidebar-with-footer">
78
+ <!-- Aplication Brand -->
79
+ <div class="app-brand">
80
+ <a href="/index.html">
81
+ <img src="images/logo.png" alt="Mono">
82
+ <span class="brand-name">MONO</span>
83
+ </a>
84
+ </div>
85
+ <!-- begin sidebar scrollbar -->
86
+ <div class="sidebar-left" data-simplebar style="height: 100%;">
87
+ <!-- sidebar menu -->
88
+ <ul class="nav sidebar-inner" id="sidebar-menu">
89
+
90
+
91
+
92
+ <li
93
+ >
94
+ <a class="sidenav-item-link" href="index.html">
95
+ <i class="mdi mdi-briefcase-account-outline"></i>
96
+ <span class="nav-text">Business Dashboard</span>
97
+ </a>
98
+ </li>
99
+
100
+
101
+
102
+
103
+
104
+ <li
105
+ class="active"
106
+ >
107
+ <a class="sidenav-item-link" href="analytics.html">
108
+ <i class="mdi mdi-chart-line"></i>
109
+ <span class="nav-text">Analytics Dashboard</span>
110
+ </a>
111
+ </li>
112
+
113
+
114
+
115
+
116
+
117
+ <li class="section-title">
118
+ Apps
119
+ </li>
120
+
121
+
122
+
123
+
124
+
125
+ <li
126
+ >
127
+ <a class="sidenav-item-link" href="chat.html">
128
+ <i class="mdi mdi-wechat"></i>
129
+ <span class="nav-text">Chat</span>
130
+ </a>
131
+ </li>
132
+
133
+
134
+
135
+
136
+
137
+ <li
138
+ >
139
+ <a class="sidenav-item-link" href="contacts.html">
140
+ <i class="mdi mdi-phone"></i>
141
+ <span class="nav-text">Contacts</span>
142
+ </a>
143
+ </li>
144
+
145
+
146
+
147
+
148
+
149
+ <li
150
+ >
151
+ <a class="sidenav-item-link" href="team.html">
152
+ <i class="mdi mdi-account-group"></i>
153
+ <span class="nav-text">Team</span>
154
+ </a>
155
+ </li>
156
+
157
+
158
+
159
+
160
+
161
+ <li
162
+ >
163
+ <a class="sidenav-item-link" href="calendar.html">
164
+ <i class="mdi mdi-calendar-check"></i>
165
+ <span class="nav-text">Calendar</span>
166
+ </a>
167
+ </li>
168
+
169
+
170
+
171
+
172
+
173
+ <li class="has-sub" >
174
+ <a class="sidenav-item-link" href="javascript:void(0)" data-toggle="collapse" data-target="#email"
175
+ aria-expanded="false" aria-controls="email">
176
+ <i class="mdi mdi-email"></i>
177
+ <span class="nav-text">email</span> <b class="caret"></b>
178
+ </a>
179
+ <ul class="collapse" id="email"
180
+ data-parent="#sidebar-menu">
181
+ <div class="sub-menu">
182
+
183
+
184
+
185
+ <li >
186
+ <a class="sidenav-item-link" href="email-inbox.html">
187
+ <span class="nav-text">Email Inbox</span>
188
+
189
+ </a>
190
+ </li>
191
+
192
+
193
+
194
+
195
+
196
+
197
+ <li >
198
+ <a class="sidenav-item-link" href="email-details.html">
199
+ <span class="nav-text">Email Details</span>
200
+
201
+ </a>
202
+ </li>
203
+
204
+
205
+
206
+
207
+
208
+
209
+ <li >
210
+ <a class="sidenav-item-link" href="email-compose.html">
211
+ <span class="nav-text">Email Compose</span>
212
+
213
+ </a>
214
+ </li>
215
+
216
+
217
+
218
+
219
+ </div>
220
+ </ul>
221
+ </li>
222
+
223
+
224
+
225
+
226
+
227
+ <li class="section-title">
228
+ UI Elements
229
+ </li>
230
+
231
+
232
+
233
+
234
+
235
+ <li class="has-sub" >
236
+ <a class="sidenav-item-link" href="javascript:void(0)" data-toggle="collapse" data-target="#ui-elements"
237
+ aria-expanded="false" aria-controls="ui-elements">
238
+ <i class="mdi mdi-folder-outline"></i>
239
+ <span class="nav-text">UI Components</span> <b class="caret"></b>
240
+ </a>
241
+ <ul class="collapse" id="ui-elements"
242
+ data-parent="#sidebar-menu">
243
+ <div class="sub-menu">
244
+
245
+
246
+
247
+ <li >
248
+ <a class="sidenav-item-link" href="alert.html">
249
+ <span class="nav-text">Alert</span>
250
+
251
+ </a>
252
+ </li>
253
+
254
+
255
+
256
+
257
+
258
+
259
+ <li >
260
+ <a class="sidenav-item-link" href="badge.html">
261
+ <span class="nav-text">Badge</span>
262
+
263
+ </a>
264
+ </li>
265
+
266
+
267
+
268
+
269
+
270
+
271
+ <li >
272
+ <a class="sidenav-item-link" href="breadcrumb.html">
273
+ <span class="nav-text">Breadcrumb</span>
274
+
275
+ </a>
276
+ </li>
277
+
278
+
279
+
280
+
281
+
282
+ <li class="has-sub" >
283
+ <a class="sidenav-item-link" href="javascript:void(0)" data-toggle="collapse" data-target="#buttons"
284
+ aria-expanded="false" aria-controls="buttons">
285
+ <span class="nav-text">Buttons</span> <b class="caret"></b>
286
+ </a>
287
+ <ul class="collapse" id="buttons">
288
+ <div class="sub-menu">
289
+
290
+ <li >
291
+ <a href="button-default.html">Button Default</a>
292
+ </li>
293
+
294
+ <li >
295
+ <a href="button-dropdown.html">Button Dropdown</a>
296
+ </li>
297
+
298
+ <li >
299
+ <a href="button-group.html">Button Group</a>
300
+ </li>
301
+
302
+ <li >
303
+ <a href="button-social.html">Button Social</a>
304
+ </li>
305
+
306
+ <li >
307
+ <a href="button-loading.html">Button Loading</a>
308
+ </li>
309
+
310
+ </div>
311
+ </ul>
312
+ </li>
313
+
314
+
315
+
316
+
317
+
318
+ <li >
319
+ <a class="sidenav-item-link" href="card.html">
320
+ <span class="nav-text">Card</span>
321
+
322
+ </a>
323
+ </li>
324
+
325
+
326
+
327
+
328
+
329
+
330
+ <li >
331
+ <a class="sidenav-item-link" href="carousel.html">
332
+ <span class="nav-text">Carousel</span>
333
+
334
+ </a>
335
+ </li>
336
+
337
+
338
+
339
+
340
+
341
+
342
+ <li >
343
+ <a class="sidenav-item-link" href="collapse.html">
344
+ <span class="nav-text">Collapse</span>
345
+
346
+ </a>
347
+ </li>
348
+
349
+
350
+
351
+
352
+
353
+
354
+ <li >
355
+ <a class="sidenav-item-link" href="editor.html">
356
+ <span class="nav-text">Editor</span>
357
+
358
+ </a>
359
+ </li>
360
+
361
+
362
+
363
+
364
+
365
+
366
+ <li >
367
+ <a class="sidenav-item-link" href="list-group.html">
368
+ <span class="nav-text">List Group</span>
369
+
370
+ </a>
371
+ </li>
372
+
373
+
374
+
375
+
376
+
377
+
378
+ <li >
379
+ <a class="sidenav-item-link" href="modal.html">
380
+ <span class="nav-text">Modal</span>
381
+
382
+ </a>
383
+ </li>
384
+
385
+
386
+
387
+
388
+
389
+
390
+ <li >
391
+ <a class="sidenav-item-link" href="pagination.html">
392
+ <span class="nav-text">Pagination</span>
393
+
394
+ </a>
395
+ </li>
396
+
397
+
398
+
399
+
400
+
401
+
402
+ <li >
403
+ <a class="sidenav-item-link" href="popover-tooltip.html">
404
+ <span class="nav-text">Popover & Tooltip</span>
405
+
406
+ </a>
407
+ </li>
408
+
409
+
410
+
411
+
412
+
413
+
414
+ <li >
415
+ <a class="sidenav-item-link" href="progress-bar.html">
416
+ <span class="nav-text">Progress Bar</span>
417
+
418
+ </a>
419
+ </li>
420
+
421
+
422
+
423
+
424
+
425
+
426
+ <li >
427
+ <a class="sidenav-item-link" href="spinner.html">
428
+ <span class="nav-text">Spinner</span>
429
+
430
+ </a>
431
+ </li>
432
+
433
+
434
+
435
+
436
+
437
+
438
+ <li >
439
+ <a class="sidenav-item-link" href="switches.html">
440
+ <span class="nav-text">Switches</span>
441
+
442
+ </a>
443
+ </li>
444
+
445
+
446
+
447
+
448
+
449
+ <li class="has-sub" >
450
+ <a class="sidenav-item-link" href="javascript:void(0)" data-toggle="collapse" data-target="#tables"
451
+ aria-expanded="false" aria-controls="tables">
452
+ <span class="nav-text">Tables</span> <b class="caret"></b>
453
+ </a>
454
+ <ul class="collapse" id="tables">
455
+ <div class="sub-menu">
456
+
457
+ <li >
458
+ <a href="bootstarp-tables.html">Bootstrap Tables</a>
459
+ </li>
460
+
461
+ <li >
462
+ <a href="data-tables.html">Data Tables</a>
463
+ </li>
464
+
465
+ </div>
466
+ </ul>
467
+ </li>
468
+
469
+
470
+
471
+
472
+
473
+ <li >
474
+ <a class="sidenav-item-link" href="tab.html">
475
+ <span class="nav-text">Tab</span>
476
+
477
+ </a>
478
+ </li>
479
+
480
+
481
+
482
+
483
+
484
+
485
+ <li >
486
+ <a class="sidenav-item-link" href="toaster.html">
487
+ <span class="nav-text">Toaster</span>
488
+
489
+ </a>
490
+ </li>
491
+
492
+
493
+
494
+
495
+
496
+ <li class="has-sub" >
497
+ <a class="sidenav-item-link" href="javascript:void(0)" data-toggle="collapse" data-target="#icons"
498
+ aria-expanded="false" aria-controls="icons">
499
+ <span class="nav-text">Icons</span> <b class="caret"></b>
500
+ </a>
501
+ <ul class="collapse" id="icons">
502
+ <div class="sub-menu">
503
+
504
+ <li >
505
+ <a href="material-icons.html">Material Icon</a>
506
+ </li>
507
+
508
+ <li >
509
+ <a href="flag-icons.html">Flag Icon</a>
510
+ </li>
511
+
512
+ </div>
513
+ </ul>
514
+ </li>
515
+
516
+
517
+
518
+
519
+ <li class="has-sub" >
520
+ <a class="sidenav-item-link" href="javascript:void(0)" data-toggle="collapse" data-target="#forms"
521
+ aria-expanded="false" aria-controls="forms">
522
+ <span class="nav-text">Forms</span> <b class="caret"></b>
523
+ </a>
524
+ <ul class="collapse" id="forms">
525
+ <div class="sub-menu">
526
+
527
+ <li >
528
+ <a href="basic-input.html">Basic Input</a>
529
+ </li>
530
+
531
+ <li >
532
+ <a href="input-group.html">Input Group</a>
533
+ </li>
534
+
535
+ <li >
536
+ <a href="checkbox-radio.html">Checkbox & Radio</a>
537
+ </li>
538
+
539
+ <li >
540
+ <a href="form-validation.html">Form Validation</a>
541
+ </li>
542
+
543
+ <li >
544
+ <a href="form-advance.html">Form Advance</a>
545
+ </li>
546
+
547
+ </div>
548
+ </ul>
549
+ </li>
550
+
551
+
552
+
553
+
554
+ <li class="has-sub" >
555
+ <a class="sidenav-item-link" href="javascript:void(0)" data-toggle="collapse" data-target="#maps"
556
+ aria-expanded="false" aria-controls="maps">
557
+ <span class="nav-text">Maps</span> <b class="caret"></b>
558
+ </a>
559
+ <ul class="collapse" id="maps">
560
+ <div class="sub-menu">
561
+
562
+ <li >
563
+ <a href="google-maps.html">Google Map</a>
564
+ </li>
565
+
566
+ <li >
567
+ <a href="vector-maps.html">Vector Map</a>
568
+ </li>
569
+
570
+ </div>
571
+ </ul>
572
+ </li>
573
+
574
+
575
+
576
+
577
+ <li class="has-sub" >
578
+ <a class="sidenav-item-link" href="javascript:void(0)" data-toggle="collapse" data-target="#widgets"
579
+ aria-expanded="false" aria-controls="widgets">
580
+ <span class="nav-text">Widgets</span> <b class="caret"></b>
581
+ </a>
582
+ <ul class="collapse" id="widgets">
583
+ <div class="sub-menu">
584
+
585
+ <li >
586
+ <a href="widgets-general.html">General Widget</a>
587
+ </li>
588
+
589
+ <li >
590
+ <a href="widgets-chart.html">Chart Widget</a>
591
+ </li>
592
+
593
+ </div>
594
+ </ul>
595
+ </li>
596
+
597
+
598
+
599
+ </div>
600
+ </ul>
601
+ </li>
602
+
603
+
604
+
605
+
606
+
607
+ <li class="has-sub" >
608
+ <a class="sidenav-item-link" href="javascript:void(0)" data-toggle="collapse" data-target="#charts"
609
+ aria-expanded="false" aria-controls="charts">
610
+ <i class="mdi mdi-chart-pie"></i>
611
+ <span class="nav-text">Charts</span> <b class="caret"></b>
612
+ </a>
613
+ <ul class="collapse" id="charts"
614
+ data-parent="#sidebar-menu">
615
+ <div class="sub-menu">
616
+
617
+
618
+
619
+ <li >
620
+ <a class="sidenav-item-link" href="apex-charts.html">
621
+ <span class="nav-text">Apex Charts</span>
622
+
623
+ </a>
624
+ </li>
625
+
626
+
627
+
628
+
629
+ </div>
630
+ </ul>
631
+ </li>
632
+
633
+
634
+
635
+
636
+
637
+ <li class="section-title">
638
+ Pages
639
+ </li>
640
+
641
+
642
+
643
+
644
+
645
+ <li class="has-sub" >
646
+ <a class="sidenav-item-link" href="javascript:void(0)" data-toggle="collapse" data-target="#users"
647
+ aria-expanded="false" aria-controls="users">
648
+ <i class="mdi mdi-image-filter-none"></i>
649
+ <span class="nav-text">User</span> <b class="caret"></b>
650
+ </a>
651
+ <ul class="collapse" id="users"
652
+ data-parent="#sidebar-menu">
653
+ <div class="sub-menu">
654
+
655
+
656
+
657
+ <li >
658
+ <a class="sidenav-item-link" href="user-profile.html">
659
+ <span class="nav-text">User Profile</span>
660
+
661
+ </a>
662
+ </li>
663
+
664
+
665
+
666
+
667
+
668
+
669
+ <li >
670
+ <a class="sidenav-item-link" href="user-activities.html">
671
+ <span class="nav-text">User Activities</span>
672
+
673
+ </a>
674
+ </li>
675
+
676
+
677
+
678
+
679
+
680
+
681
+ <li >
682
+ <a class="sidenav-item-link" href="user-profile-settings.html">
683
+ <span class="nav-text">User Profile Settings</span>
684
+
685
+ </a>
686
+ </li>
687
+
688
+
689
+
690
+
691
+
692
+
693
+ <li >
694
+ <a class="sidenav-item-link" href="user-account-settings.html">
695
+ <span class="nav-text">User Account Settings</span>
696
+
697
+ </a>
698
+ </li>
699
+
700
+
701
+
702
+
703
+
704
+
705
+ <li >
706
+ <a class="sidenav-item-link" href="user-planing-settings.html">
707
+ <span class="nav-text">User Planing Settings</span>
708
+
709
+ </a>
710
+ </li>
711
+
712
+
713
+
714
+
715
+
716
+
717
+ <li >
718
+ <a class="sidenav-item-link" href="user-billing.html">
719
+ <span class="nav-text">User billing</span>
720
+
721
+ </a>
722
+ </li>
723
+
724
+
725
+
726
+
727
+
728
+
729
+ <li >
730
+ <a class="sidenav-item-link" href="user-notify-settings.html">
731
+ <span class="nav-text">User Notify Settings</span>
732
+
733
+ </a>
734
+ </li>
735
+
736
+
737
+
738
+
739
+ </div>
740
+ </ul>
741
+ </li>
742
+
743
+
744
+
745
+
746
+
747
+ <li class="has-sub" >
748
+ <a class="sidenav-item-link" href="javascript:void(0)" data-toggle="collapse" data-target="#authentication"
749
+ aria-expanded="false" aria-controls="authentication">
750
+ <i class="mdi mdi-account"></i>
751
+ <span class="nav-text">Authentication</span> <b class="caret"></b>
752
+ </a>
753
+ <ul class="collapse" id="authentication"
754
+ data-parent="#sidebar-menu">
755
+ <div class="sub-menu">
756
+
757
+
758
+
759
+ <li >
760
+ <a class="sidenav-item-link" href="sign-in.html">
761
+ <span class="nav-text">Sign In</span>
762
+
763
+ </a>
764
+ </li>
765
+
766
+
767
+
768
+
769
+
770
+
771
+ <li >
772
+ <a class="sidenav-item-link" href="sign-up.html">
773
+ <span class="nav-text">Sign Up</span>
774
+
775
+ </a>
776
+ </li>
777
+
778
+
779
+
780
+
781
+
782
+
783
+ <li >
784
+ <a class="sidenav-item-link" href="reset-password.html">
785
+ <span class="nav-text">Reset Password</span>
786
+
787
+ </a>
788
+ </li>
789
+
790
+
791
+
792
+
793
+ </div>
794
+ </ul>
795
+ </li>
796
+
797
+
798
+
799
+
800
+
801
+ <li class="has-sub" >
802
+ <a class="sidenav-item-link" href="javascript:void(0)" data-toggle="collapse" data-target="#other-page"
803
+ aria-expanded="false" aria-controls="other-page">
804
+ <i class="mdi mdi-file-multiple"></i>
805
+ <span class="nav-text">Other pages</span> <b class="caret"></b>
806
+ </a>
807
+ <ul class="collapse" id="other-page"
808
+ data-parent="#sidebar-menu">
809
+ <div class="sub-menu">
810
+
811
+
812
+
813
+ <li >
814
+ <a class="sidenav-item-link" href="invoice.html">
815
+ <span class="nav-text">Invoice</span>
816
+
817
+ </a>
818
+ </li>
819
+
820
+
821
+
822
+
823
+
824
+
825
+ <li >
826
+ <a class="sidenav-item-link" href="404.html">
827
+ <span class="nav-text">404 page</span>
828
+
829
+ </a>
830
+ </li>
831
+
832
+
833
+
834
+
835
+
836
+
837
+ <li >
838
+ <a class="sidenav-item-link" href="page-comingsoon.html">
839
+ <span class="nav-text">Coming Soon</span>
840
+
841
+ </a>
842
+ </li>
843
+
844
+
845
+
846
+
847
+
848
+
849
+ <li >
850
+ <a class="sidenav-item-link" href="page-maintenance.html">
851
+ <span class="nav-text">Maintenance</span>
852
+
853
+ </a>
854
+ </li>
855
+
856
+
857
+
858
+
859
+ </div>
860
+ </ul>
861
+ </li>
862
+
863
+
864
+
865
+
866
+
867
+ <li class="section-title">
868
+ Documentation
869
+ </li>
870
+
871
+
872
+
873
+
874
+
875
+ <li
876
+ >
877
+ <a class="sidenav-item-link" href="getting-started.html">
878
+ <i class="mdi mdi-airplane"></i>
879
+ <span class="nav-text">Getting Started</span>
880
+ </a>
881
+ </li>
882
+
883
+
884
+
885
+
886
+
887
+ <li class="has-sub" >
888
+ <a class="sidenav-item-link" href="javascript:void(0)" data-toggle="collapse" data-target="#customization"
889
+ aria-expanded="false" aria-controls="customization">
890
+ <i class="mdi mdi-square-edit-outline"></i>
891
+ <span class="nav-text">Customization</span> <b class="caret"></b>
892
+ </a>
893
+ <ul class="collapse" id="customization"
894
+ data-parent="#sidebar-menu">
895
+ <div class="sub-menu">
896
+
897
+
898
+
899
+ <li >
900
+ <a class="sidenav-item-link" href="navbar-customization.html">
901
+ <span class="nav-text">Navbar</span>
902
+
903
+ </a>
904
+ </li>
905
+
906
+
907
+
908
+
909
+
910
+
911
+ <li >
912
+ <a class="sidenav-item-link" href="sidebar-customization.html">
913
+ <span class="nav-text">Sidebar</span>
914
+
915
+ </a>
916
+ </li>
917
+
918
+
919
+
920
+
921
+
922
+
923
+ <li >
924
+ <a class="sidenav-item-link" href="styling.html">
925
+ <span class="nav-text">Styling</span>
926
+
927
+ </a>
928
+ </li>
929
+
930
+
931
+
932
+
933
+ </div>
934
+ </ul>
935
+ </li>
936
+
937
+
938
+
939
+ </ul>
940
+
941
+ </div>
942
+
943
+ <div class="sidebar-footer">
944
+ <div class="sidebar-footer-content">
945
+ <ul class="d-flex">
946
+ <li>
947
+ <a href="user-account-settings.html" data-toggle="tooltip" title="Profile settings"><i class="mdi mdi-settings"></i></a></li>
948
+ <li>
949
+ <a href="#" data-toggle="tooltip" title="No chat messages"><i class="mdi mdi-chat-processing"></i></a>
950
+ </li>
951
+ </ul>
952
+ </div>
953
+ </div>
954
+ </div>
955
+ </aside>
956
+
957
+
958
+
959
+ <!-- ====================================
960
+ ——— PAGE WRAPPER
961
+ ===================================== -->
962
+ <div class="page-wrapper">
963
+
964
+ <!-- Header -->
965
+ <header class="main-header" id="header">
966
+ <nav class="navbar navbar-expand-lg navbar-light" id="navbar">
967
+ <!-- Sidebar toggle button -->
968
+ <button id="sidebar-toggler" class="sidebar-toggle">
969
+ <span class="sr-only">Toggle navigation</span>
970
+ </button>
971
+
972
+ <span class="page-title">analytics</span>
973
+
974
+ <div class="navbar-right ">
975
+
976
+ <!-- search form -->
977
+ <div class="search-form">
978
+ <form action="index.html" method="get">
979
+ <div class="input-group input-group-sm" id="input-group-search">
980
+ <input type="text" autocomplete="off" name="query" id="search-input" class="form-control" placeholder="Search..." />
981
+ <div class="input-group-append">
982
+ <button class="btn" type="button">/</button>
983
+ </div>
984
+ </div>
985
+ </form>
986
+ <ul class="dropdown-menu dropdown-menu-search">
987
+
988
+ <li class="nav-item">
989
+ <a class="nav-link" href="index.html">Morbi leo risus</a>
990
+ </li>
991
+ <li class="nav-item">
992
+ <a class="nav-link" href="index.html">Dapibus ac facilisis in</a>
993
+ </li>
994
+ <li class="nav-item">
995
+ <a class="nav-link" href="index.html">Porta ac consectetur ac</a>
996
+ </li>
997
+ <li class="nav-item">
998
+ <a class="nav-link" href="index.html">Vestibulum at eros</a>
999
+ </li>
1000
+
1001
+ </ul>
1002
+
1003
+ </div>
1004
+
1005
+ <ul class="nav navbar-nav">
1006
+ <!-- Offcanvas -->
1007
+ <li class="custom-dropdown">
1008
+ <a class="offcanvas-toggler active custom-dropdown-toggler" data-offcanvas="contact-off" href="javascript:" >
1009
+ <i class="mdi mdi-contacts icon"></i>
1010
+ </a>
1011
+ </li>
1012
+ <li class="custom-dropdown">
1013
+ <button class="notify-toggler custom-dropdown-toggler">
1014
+ <i class="mdi mdi-bell-outline icon"></i>
1015
+ <span class="badge badge-xs rounded-circle">21</span>
1016
+ </button>
1017
+ <div class="dropdown-notify">
1018
+
1019
+ <header>
1020
+ <div class="nav nav-underline" id="nav-tab" role="tablist">
1021
+ <a class="nav-item nav-link active" id="all-tabs" data-toggle="tab" href="#all" role="tab" aria-controls="nav-home"
1022
+ aria-selected="true">All (5)</a>
1023
+ <a class="nav-item nav-link" id="message-tab" data-toggle="tab" href="#message" role="tab" aria-controls="nav-profile"
1024
+ aria-selected="false">Msgs (4)</a>
1025
+ <a class="nav-item nav-link" id="other-tab" data-toggle="tab" href="#other" role="tab" aria-controls="nav-contact"
1026
+ aria-selected="false">Others (3)</a>
1027
+ </div>
1028
+ </header>
1029
+
1030
+ <div class="" data-simplebar style="height: 325px;">
1031
+ <div class="tab-content" id="myTabContent">
1032
+
1033
+ <div class="tab-pane fade show active" id="all" role="tabpanel" aria-labelledby="all-tabs">
1034
+
1035
+ <div class="media media-sm bg-warning-10 p-4 mb-0">
1036
+ <div class="media-sm-wrapper">
1037
+ <a href="user-profile.html">
1038
+ <img src="images/user/user-sm-02.jpg" alt="User Image">
1039
+ </a>
1040
+ </div>
1041
+ <div class="media-body">
1042
+ <a href="user-profile.html">
1043
+ <span class="title mb-0">John Doe</span>
1044
+ <span class="discribe">Extremity sweetness difficult behaviour he of. On disposal of as landlord horrible. Afraid at highly months do things on at.</span>
1045
+ <span class="time">
1046
+ <time>Just now</time>...
1047
+ </span>
1048
+ </a>
1049
+ </div>
1050
+ </div>
1051
+
1052
+ <div class="media media-sm p-4 bg-light mb-0">
1053
+ <div class="media-sm-wrapper bg-primary">
1054
+ <a href="user-profile.html">
1055
+ <i class="mdi mdi-calendar-check-outline"></i>
1056
+ </a>
1057
+ </div>
1058
+ <div class="media-body">
1059
+ <a href="user-profile.html">
1060
+ <span class="title mb-0">New event added</span>
1061
+ <span class="discribe">1/3/2014 (1pm - 2pm)</span>
1062
+ <span class="time">
1063
+ <time>10 min ago...</time>...
1064
+ </span>
1065
+ </a>
1066
+ </div>
1067
+ </div>
1068
+
1069
+ <div class="media media-sm p-4 mb-0">
1070
+ <div class="media-sm-wrapper">
1071
+ <a href="user-profile.html">
1072
+ <img src="images/user/user-sm-03.jpg" alt="User Image">
1073
+ </a>
1074
+ </div>
1075
+ <div class="media-body">
1076
+ <a href="user-profile.html">
1077
+ <span class="title mb-0">Sagge Hudson</span>
1078
+ <span class="discribe">On disposal of as landlord Afraid at highly months do things on at.</span>
1079
+ <span class="time">
1080
+ <time>1 hrs ago</time>...
1081
+ </span>
1082
+ </a>
1083
+ </div>
1084
+ </div>
1085
+
1086
+ <div class="media media-sm p-4 mb-0">
1087
+ <div class="media-sm-wrapper bg-info-dark">
1088
+ <a href="user-profile.html">
1089
+ <i class="mdi mdi-account-multiple-check"></i>
1090
+ </a>
1091
+ </div>
1092
+ <div class="media-body">
1093
+ <a href="user-profile.html">
1094
+ <span class="title mb-0">Add request</span>
1095
+ <span class="discribe">Add Dany Jones as your contact.</span>
1096
+ <div class="buttons">
1097
+ <a href="#" class="btn btn-sm btn-success shadow-none text-white">accept</a>
1098
+ <a href="#" class="btn btn-sm shadow-none">delete</a>
1099
+ </div>
1100
+ <span class="time">
1101
+ <time>6 hrs ago</time>...
1102
+ </span>
1103
+ </a>
1104
+ </div>
1105
+ </div>
1106
+
1107
+ <div class="media media-sm p-4 mb-0">
1108
+ <div class="media-sm-wrapper bg-info">
1109
+ <a href="user-profile.html">
1110
+ <i class="mdi mdi-playlist-check"></i>
1111
+ </a>
1112
+ </div>
1113
+ <div class="media-body">
1114
+ <a href="user-profile.html">
1115
+ <span class="title mb-0">Task complete</span>
1116
+ <span class="discribe">Afraid at highly months do things on at.</span>
1117
+ <span class="time">
1118
+ <time>1 hrs ago</time>...
1119
+ </span>
1120
+ </a>
1121
+ </div>
1122
+ </div>
1123
+
1124
+ </div>
1125
+
1126
+ <div class="tab-pane fade" id="message" role="tabpanel" aria-labelledby="message-tab">
1127
+
1128
+ <div class="media media-sm p-4 mb-0">
1129
+ <div class="media-sm-wrapper">
1130
+ <a href="user-profile.html">
1131
+ <img src="images/user/user-sm-01.jpg" alt="User Image">
1132
+ </a>
1133
+ </div>
1134
+ <div class="media-body">
1135
+ <a href="user-profile.html">
1136
+ <span class="title mb-0">Selena Wagner</span>
1137
+ <span class="discribe">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</span>
1138
+ <span class="time">
1139
+ <time>15 min ago</time>...
1140
+ </span>
1141
+ </a>
1142
+ </div>
1143
+ </div>
1144
+
1145
+ <div class="media media-sm p-4 mb-0">
1146
+ <div class="media-sm-wrapper">
1147
+ <a href="user-profile.html">
1148
+ <img src="images/user/user-sm-03.jpg" alt="User Image">
1149
+ </a>
1150
+ </div>
1151
+ <div class="media-body">
1152
+ <a href="user-profile.html">
1153
+ <span class="title mb-0">Sagge Hudson</span>
1154
+ <span class="discribe">On disposal of as landlord Afraid at highly months do things on at.</span>
1155
+ <span class="time">
1156
+ <time>1 hrs ago</time>...
1157
+ </span>
1158
+ </a>
1159
+ </div>
1160
+ </div>
1161
+
1162
+ <div class="media media-sm bg-warning-10 p-4 mb-0">
1163
+ <div class="media-sm-wrapper">
1164
+ <a href="user-profile.html">
1165
+ <img src="images/user/user-sm-02.jpg" alt="User Image">
1166
+ </a>
1167
+ </div>
1168
+ <div class="media-body">
1169
+ <a href="user-profile.html">
1170
+ <span class="title mb-0">John Doe</span>
1171
+ <span class="discribe">Extremity sweetness difficult behaviour he of. On disposal of as landlord horrible. Afraid
1172
+ at highly months do things on at.</span>
1173
+ <span class="time">
1174
+ <time>Just now</time>...
1175
+ </span>
1176
+ </a>
1177
+ </div>
1178
+ </div>
1179
+
1180
+ <div class="media media-sm p-4 mb-0">
1181
+ <div class="media-sm-wrapper">
1182
+ <a href="user-profile.html">
1183
+ <img src="images/user/user-sm-04.jpg" alt="User Image">
1184
+ </a>
1185
+ </div>
1186
+ <div class="media-body">
1187
+ <a href="user-profile.html">
1188
+ <span class="title mb-0">Albrecht Straub</span>
1189
+ <span class="discribe"> Beatae quia natus assumenda laboriosam, nisi perferendis aliquid consectetur expedita non tenetur.</span>
1190
+ <span class="time">
1191
+ <time>Just now</time>...
1192
+ </span>
1193
+ </a>
1194
+ </div>
1195
+ </div>
1196
+
1197
+ </div>
1198
+ <div class="tab-pane fade" id="other" role="tabpanel" aria-labelledby="contact-tab">
1199
+
1200
+ <div class="media media-sm p-4 bg-light mb-0">
1201
+ <div class="media-sm-wrapper bg-primary">
1202
+ <a href="user-profile.html">
1203
+ <i class="mdi mdi-calendar-check-outline"></i>
1204
+ </a>
1205
+ </div>
1206
+ <div class="media-body">
1207
+ <a href="user-profile.html">
1208
+ <span class="title mb-0">New event added</span>
1209
+ <span class="discribe">1/3/2014 (1pm - 2pm)</span>
1210
+ <span class="time">
1211
+ <time>10 min ago...</time>...
1212
+ </span>
1213
+ </a>
1214
+ </div>
1215
+ </div>
1216
+
1217
+ <div class="media media-sm p-4 mb-0">
1218
+ <div class="media-sm-wrapper bg-info-dark">
1219
+ <a href="user-profile.html">
1220
+ <i class="mdi mdi-account-multiple-check"></i>
1221
+ </a>
1222
+ </div>
1223
+ <div class="media-body">
1224
+ <a href="user-profile.html">
1225
+ <span class="title mb-0">Add request</span>
1226
+ <span class="discribe">Add Dany Jones as your contact.</span>
1227
+ <div class="buttons">
1228
+ <a href="#" class="btn btn-sm btn-success shadow-none text-white">accept</a>
1229
+ <a href="#" class="btn btn-sm shadow-none">delete</a>
1230
+ </div>
1231
+ <span class="time">
1232
+ <time>6 hrs ago</time>...
1233
+ </span>
1234
+ </a>
1235
+ </div>
1236
+ </div>
1237
+
1238
+ <div class="media media-sm p-4 mb-0">
1239
+ <div class="media-sm-wrapper bg-info">
1240
+ <a href="user-profile.html">
1241
+ <i class="mdi mdi-playlist-check"></i>
1242
+ </a>
1243
+ </div>
1244
+ <div class="media-body">
1245
+ <a href="user-profile.html">
1246
+ <span class="title mb-0">Task complete</span>
1247
+ <span class="discribe">Afraid at highly months do things on at.</span>
1248
+ <span class="time">
1249
+ <time>1 hrs ago</time>...
1250
+ </span>
1251
+ </a>
1252
+ </div>
1253
+ </div>
1254
+
1255
+ </div>
1256
+ </div>
1257
+ </div>
1258
+
1259
+ <footer class="border-top dropdown-notify-footer">
1260
+ <div class="d-flex justify-content-between align-items-center py-2 px-4">
1261
+ <span>Last updated 3 min ago</span>
1262
+ <a id="refress-button" href="javascript:" class="btn mdi mdi-cached btn-refress"></a>
1263
+ </div>
1264
+ </footer>
1265
+ </div>
1266
+ </li>
1267
+ <!-- User Account -->
1268
+ <li class="dropdown user-menu">
1269
+ <button class="dropdown-toggle nav-link" data-toggle="dropdown">
1270
+ <img src="images/user/user-xs-01.jpg" class="user-image rounded-circle" alt="User Image" />
1271
+ <span class="d-none d-lg-inline-block">John Doe</span>
1272
+ </button>
1273
+ <ul class="dropdown-menu dropdown-menu-right">
1274
+ <li>
1275
+ <a class="dropdown-link-item" href="user-profile.html">
1276
+ <i class="mdi mdi-account-outline"></i>
1277
+ <span class="nav-text">My Profile</span>
1278
+ </a>
1279
+ </li>
1280
+ <li>
1281
+ <a class="dropdown-link-item" href="email-inbox.html">
1282
+ <i class="mdi mdi-email-outline"></i>
1283
+ <span class="nav-text">Message</span>
1284
+ <span class="badge badge-pill badge-primary">24</span>
1285
+ </a>
1286
+ </li>
1287
+ <li>
1288
+ <a class="dropdown-link-item" href="user-activities.html">
1289
+ <i class="mdi mdi-diamond-stone"></i>
1290
+ <span class="nav-text">Activitise</span></a>
1291
+ </li>
1292
+ <li>
1293
+ <a class="dropdown-link-item" href="user-account-settings.html">
1294
+ <i class="mdi mdi-settings"></i>
1295
+ <span class="nav-text">Account Setting</span>
1296
+ </a>
1297
+ </li>
1298
+
1299
+ <li class="dropdown-footer">
1300
+ <a class="dropdown-link-item" href="sign-in.html"> <i class="mdi mdi-logout"></i> Log Out </a>
1301
+ </li>
1302
+ </ul>
1303
+ </li>
1304
+ </ul>
1305
+ </div>
1306
+ </nav>
1307
+
1308
+
1309
+ </header>
1310
+
1311
+ <!-- ====================================
1312
+ ——— CONTENT WRAPPER
1313
+ ===================================== -->
1314
+ <div class="content-wrapper">
1315
+ <div class="content"> <!-- Analytics Status -->
1316
+ <div class="row justify-content-between mb-5 ">
1317
+ <div class="col-lg-6">
1318
+ <div class="row">
1319
+ <div class="col-md-4">
1320
+ <div class="mini-status">
1321
+ <div class="text-content">
1322
+ <span class="title">my income</span>
1323
+ <span class="status text-primary"><i class="mdi mdi-currency-usd"></i>47,171</span>
1324
+ </div>
1325
+ <div class="chart-content">
1326
+ <div id="status-sm-chart-01"></div>
1327
+ </div>
1328
+ </div>
1329
+ </div>
1330
+ <div class="col-md-4">
1331
+ <div class="mini-status">
1332
+ <div class="text-content ">
1333
+ <span class="title">site traffic</span>
1334
+ <span class="status text-success"><i class="mdi mdi-progress-upload"></i>45%</span>
1335
+ </div>
1336
+ <div class="chart-content">
1337
+ <div id="status-sm-chart-02"></div>
1338
+ </div>
1339
+ </div>
1340
+ </div>
1341
+ <div class="col-md-4">
1342
+ <div class="mini-status">
1343
+ <div class="text-content">
1344
+ <span class="title">site orders</span>
1345
+ <span class="status text-info"><i class="mdi mdi-cart"></i>2447</span>
1346
+ </div>
1347
+ <div class="chart-content">
1348
+ <div id="status-sm-chart-03"></div>
1349
+ </div>
1350
+ </div>
1351
+ </div>
1352
+ </div>
1353
+ </div>
1354
+ <div class="col-lg-6 d-flex justify-content-xl-end flex-column flex-wrap align-items-lg-end">
1355
+ <div id="mini-status-range" class="date-range date-range-lg bg-white">
1356
+ <span class="date-holder text-dark"></span>
1357
+ <i class="mdi mdi-menu-down"></i>
1358
+ </div>
1359
+ <span class="time-zone">Timezone: (+06:00) Asia - Dhaka</span>
1360
+ </div>
1361
+ </div>
1362
+
1363
+
1364
+ <!-- User Sessions Bounce -->
1365
+ <div class="row">
1366
+ <div class="col-xl-4">
1367
+
1368
+ <!-- User -->
1369
+ <div class="card card-default">
1370
+ <div class="card-header">
1371
+ <h2>Users</h2>
1372
+ </div>
1373
+ <div class="card-body">
1374
+ <div class="bg-primary d-flex justify-content-between flex-wrap p-5 text-white align-items-lg-end">
1375
+ <div class="d-flex flex-column">
1376
+ <span class="h3 text-white">325,980</span>
1377
+ <span>vs 275,900 (prev)</span>
1378
+ </div>
1379
+ <div>
1380
+ <span>45%</span>
1381
+ <i class="mdi mdi-arrow-up-bold"></i>
1382
+ </div>
1383
+ </div>
1384
+ <div id="line-chart-1"></div>
1385
+ </div>
1386
+ </div>
1387
+
1388
+ </div>
1389
+ <div class="col-xl-4">
1390
+
1391
+ <!-- Session -->
1392
+ <div class="card card-default">
1393
+ <div class="card-header">
1394
+ <h2>Sessions</h2>
1395
+ </div>
1396
+ <div class="card-body">
1397
+ <div class="bg-success d-flex justify-content-between flex-wrap p-5 text-white align-items-lg-end">
1398
+ <div class="d-flex flex-column">
1399
+ <span class="h3 text-white">7,833</span>
1400
+ <span>vs 7,012 (prev)</span>
1401
+ </div>
1402
+ <div>
1403
+ <span>55%</span>
1404
+ <i class="mdi mdi-arrow-up-bold"></i>
1405
+ </div>
1406
+ </div>
1407
+ <div id="line-chart-2"></div>
1408
+ </div>
1409
+ </div>
1410
+
1411
+ </div>
1412
+ <div class="col-xl-4">
1413
+
1414
+ <!-- Bounce Rate -->
1415
+ <div class="card card-default">
1416
+ <div class="card-header">
1417
+ <h2>Bounce Rate</h2>
1418
+ </div>
1419
+ <div class="card-body">
1420
+ <div class="bg-danger d-flex justify-content-between flex-wrap p-5 text-white align-items-lg-end">
1421
+ <div class="d-flex flex-column">
1422
+ <span class="h3 text-white">67.0%</span>
1423
+ <span>vs 65.21% (prev)</span>
1424
+ </div>
1425
+ <div>
1426
+ <span>7%</span>
1427
+ <i class="mdi mdi-arrow-down-bold"></i>
1428
+ </div>
1429
+ </div>
1430
+ <div id="line-chart-3"></div>
1431
+ </div>
1432
+ </div>
1433
+
1434
+ </div>
1435
+ </div>
1436
+
1437
+ <div class="row">
1438
+ <div class="col-xl-6">
1439
+
1440
+ <!-- User Acquisition Statistics -->
1441
+ <div class="card card-default" id="user-acquisition">
1442
+ <div class="card-header border-bottom pb-0">
1443
+ <h2>User Acquisition</h2>
1444
+ <ul class="nav nav-underline-active-primary" role="tablist">
1445
+ <li class="nav-item">
1446
+ <a class="nav-link active" data-toggle="tab" href="#traffic-channel" role="tab" aria-selected="true">Traffic
1447
+ Channel</a>
1448
+ </li>
1449
+ <li class="nav-item">
1450
+ <a class="nav-link" data-toggle="tab" href="#source-medium" role="tab" aria-selected="false">Source / Medium </a>
1451
+ </li>
1452
+ <li class="nav-item">
1453
+ <a class="nav-link" data-toggle="tab" href="#referrals" role="tab" aria-selected="false">Referrals</a>
1454
+ </li>
1455
+ </ul>
1456
+ </div>
1457
+
1458
+ <div class="tab-content" id="myTabContent">
1459
+ <div id="barchartlg1"></div>
1460
+ </div>
1461
+ <div class="card-footer d-flex flex-wrap bg-white">
1462
+ <a href="#" class="text-uppercase py-3">Acquisition Report</a>
1463
+ </div>
1464
+ </div>
1465
+
1466
+ </div>
1467
+
1468
+ <!-- Sessions by Device -->
1469
+ <div class="col-xl-6">
1470
+
1471
+ <!-- Sessions By Device -->
1472
+ <div class="card card-default">
1473
+ <div class="card-header border-bottom">
1474
+ <h2 class="mdi mdi-desktop-mac">Sessions by Device</h2>
1475
+ </div>
1476
+ <div class="card-body pt-6">
1477
+ <div class="row">
1478
+ <div class="col-lg-6">
1479
+ <div id="donut-chart-1"></div>
1480
+ </div>
1481
+ <div class="col-lg-6">
1482
+ <div class="media mb-4">
1483
+ <i class="display-4 mdi mdi-remote-desktop text-primary mr-3"></i>
1484
+ <div class="media-body">
1485
+ <p>Desktop</p>
1486
+ <p class="h4 my-1 text-dark">45% <span class="text-success">23.5% <i
1487
+ class="mdi mdi-arrow-up-bold small"></i></span>
1488
+ </p>
1489
+ <p>vs 155,900 (prev)</p>
1490
+ </div>
1491
+ </div>
1492
+
1493
+ <div class="media mb-4">
1494
+ <i class="display-4 mdi mdi-tablet-android text-primary mr-3"></i>
1495
+ <div class="media-body">
1496
+ <p>Tablet</p>
1497
+ <p class="h4 my-1 text-dark">30% <span class="text-success">13.5% <i
1498
+ class="mdi mdi-arrow-up-bold small"></i></span>
1499
+ </p>
1500
+ <p>vs 187,900 (prev)</p>
1501
+ </div>
1502
+ </div>
1503
+
1504
+ <div class="media mb-4">
1505
+ <i class="display-4 mdi mdi-cellphone-iphone text-primary mr-3"></i>
1506
+ <div class="media-body">
1507
+ <p>Mobile</p>
1508
+ <p class="h4 my-1 text-dark">25% <span class="text-success">35.5% <i
1509
+ class="mdi mdi-arrow-up-bold small"></i></span>
1510
+ </p>
1511
+ <p>vs 309,900 (prev)</p>
1512
+ </div>
1513
+ </div>
1514
+ </div>
1515
+ </div>
1516
+ </div>
1517
+ </div>
1518
+
1519
+ </div>
1520
+ </div>
1521
+
1522
+ <div class="row">
1523
+ <div class="col-xl-4">
1524
+
1525
+ <!-- Us Vector Map -->
1526
+ <div class="card card-default">
1527
+ <div class="card-header">
1528
+ <h2>User Map</h2>
1529
+ </div>
1530
+ <div class="card-body">
1531
+ <div id="us-vector-map-marker"></div>
1532
+ <ul class="list-unstyled mt-4">
1533
+ <li class="d-flex flex-wrap justify-content-between border-top py-2 text-dark">
1534
+ Oregon
1535
+ <span class="text-primary">35</span>
1536
+ </li>
1537
+ <li class="d-flex flex-wrap justify-content-between border-top py-2 text-dark">
1538
+ Indiana
1539
+ <span class="text-success">10</span>
1540
+ </li>
1541
+ <li class="d-flex flex-wrap justify-content-between border-top py-2 text-dark">
1542
+ Colorado
1543
+ <span class="text-danger">25</span>
1544
+ </li>
1545
+ </ul>
1546
+ </div>
1547
+ </div>
1548
+
1549
+ </div>
1550
+ <div class="col-xl-4">
1551
+
1552
+ <!-- Page Views -->
1553
+ <div class="card card-default" id="page-views">
1554
+ <div class="card-header">
1555
+ <h2>Page Views</h2>
1556
+ </div>
1557
+ <div class="card-body py-0" data-simplebar style="height: 392px;">
1558
+ <table class="table table-borderless table-thead-border">
1559
+ <thead>
1560
+ <tr>
1561
+ <th>Page</th>
1562
+ <th class="text-right px-3">Page Views</th>
1563
+ <th class="text-right">Avg Time</th>
1564
+ </tr>
1565
+ </thead>
1566
+ <tbody>
1567
+ <tr>
1568
+ <td class="text-primary"><a class="link" href="analytics.html">/analytics.html</a></td>
1569
+ <td class="text-right px-3">521</td>
1570
+ <td class="text-right">2m:14s</td>
1571
+ </tr>
1572
+ <tr>
1573
+ <td class="text-primary"><a class="link" href="email-inbox.html">/email-inbox.html</a></td>
1574
+ <td class="text-right px-3">356</td>
1575
+ <td class="text-right">2m:23s</td>
1576
+ </tr>
1577
+ <tr>
1578
+ <td class="text-primary"><a class="link" href="email-compose.html">/email-compose.html</a></td>
1579
+ <td class="text-right px-3">254</td>
1580
+ <td class="text-right">2m:2s</td>
1581
+ </tr>
1582
+ <tr>
1583
+ <td class="text-primary"><a class="link" href="charts-chartjs.html">/charts-chartjs.html</a></td>
1584
+ <td class="text-right px-3">126</td>
1585
+ <td class="text-right">1m:15s</td>
1586
+ </tr>
1587
+ <tr>
1588
+ <td class="text-primary"><a class="link" href="profile.html">/profile.html</a></td>
1589
+ <td class="text-right px-3">50</td>
1590
+ <td class="text-right">1m:7s</td>
1591
+ </tr>
1592
+ <tr>
1593
+ <td class="text-primary"><a class="link" href="general-widgets.html">/general-widgets.html</a></td>
1594
+ <td class="text-right px-3">50</td>
1595
+ <td class="text-right">2m:35s</td>
1596
+ </tr>
1597
+ <tr>
1598
+ <td class="text-primary"><a class="link" href="card.html">/card.html</a></td>
1599
+ <td class="text-right px-3">590</td>
1600
+ <td class="text-right">5m:55s</td>
1601
+ </tr>
1602
+ <tr>
1603
+ <td class="text-primary"><a class="link" href="email-inbox.html">/email-inbox.html</a></td>
1604
+ <td class="text-right px-3">29</td>
1605
+ <td class="text-right">8m:5s</td>
1606
+ </tr>
1607
+ </tbody>
1608
+ </table>
1609
+ </div>
1610
+ <div class="card-footer bg-white py-4">
1611
+ <a href="#" class="text-uppercase">Audience Overview</a>
1612
+ </div>
1613
+ </div>
1614
+
1615
+ </div>
1616
+ <div class="col-xl-4">
1617
+ <!-- Current Users -->
1618
+ <div class="card card-default">
1619
+ <div class="card-header">
1620
+ <h2>Current Users</h2>
1621
+ <span>Realtime</span>
1622
+ </div>
1623
+ <div class="card-body">
1624
+ <div id="barchartlg2"></div>
1625
+ </div>
1626
+ <div class="card-footer bg-white py-4">
1627
+ <a href="#" class="text-uppercase">Current Users Overview</a>
1628
+ </div>
1629
+ </div>
1630
+ </div>
1631
+ </div>
1632
+ </div>
1633
+
1634
+ </div>
1635
+
1636
+ <!-- Footer -->
1637
+ <footer class="footer mt-auto">
1638
+ <div class="copyright bg-white">
1639
+ <p>
1640
+ &copy; <span id="copy-year"></span> Copyright Mono Dashboard Bootstrap Template by <a class="text-primary" href="http://www.iamabdus.com/" target="_blank" >Abdus</a>.
1641
+ </p>
1642
+ </div>
1643
+ <script>
1644
+ var d = new Date();
1645
+ var year = d.getFullYear();
1646
+ document.getElementById("copy-year").innerHTML = year;
1647
+ </script>
1648
+ </footer>
1649
+
1650
+ </div>
1651
+ </div>
1652
+
1653
+ <!-- Card Offcanvas -->
1654
+ <div class="card card-offcanvas" id="contact-off" >
1655
+ <div class="card-header">
1656
+ <h2>Contacts</h2>
1657
+ <a href="#" class="btn btn-primary btn-pill px-4">Add New</a>
1658
+ </div>
1659
+ <div class="card-body">
1660
+
1661
+ <div class="mb-4">
1662
+ <input type="text" class="form-control form-control-lg form-control-secondary rounded-0" placeholder="Search contacts...">
1663
+ </div>
1664
+
1665
+ <div class="media media-sm">
1666
+ <div class="media-sm-wrapper">
1667
+ <a href="user-profile.html">
1668
+ <img src="images/user/user-sm-01.jpg" alt="User Image">
1669
+ <span class="active bg-primary"></span>
1670
+ </a>
1671
+ </div>
1672
+ <div class="media-body">
1673
+ <a href="user-profile.html">
1674
+ <span class="title">Selena Wagner</span>
1675
+ <span class="discribe">Designer</span>
1676
+ </a>
1677
+ </div>
1678
+ </div>
1679
+
1680
+ <div class="media media-sm">
1681
+ <div class="media-sm-wrapper">
1682
+ <a href="user-profile.html">
1683
+ <img src="images/user/user-sm-02.jpg" alt="User Image">
1684
+ <span class="active bg-primary"></span>
1685
+ </a>
1686
+ </div>
1687
+ <div class="media-body">
1688
+ <a href="user-profile.html">
1689
+ <span class="title">Walter Reuter</span>
1690
+ <span>Developer</span>
1691
+ </a>
1692
+ </div>
1693
+ </div>
1694
+
1695
+ <div class="media media-sm">
1696
+ <div class="media-sm-wrapper">
1697
+ <a href="user-profile.html">
1698
+ <img src="images/user/user-sm-03.jpg" alt="User Image">
1699
+ </a>
1700
+ </div>
1701
+ <div class="media-body">
1702
+ <a href="user-profile.html">
1703
+ <span class="title">Larissa Gebhardt</span>
1704
+ <span>Cyber Punk</span>
1705
+ </a>
1706
+ </div>
1707
+ </div>
1708
+
1709
+ <div class="media media-sm">
1710
+ <div class="media-sm-wrapper">
1711
+ <a href="user-profile.html">
1712
+ <img src="images/user/user-sm-04.jpg" alt="User Image">
1713
+ </a>
1714
+
1715
+ </div>
1716
+ <div class="media-body">
1717
+ <a href="user-profile.html">
1718
+ <span class="title">Albrecht Straub</span>
1719
+ <span>Photographer</span>
1720
+ </a>
1721
+ </div>
1722
+ </div>
1723
+
1724
+ <div class="media media-sm">
1725
+ <div class="media-sm-wrapper">
1726
+ <a href="user-profile.html">
1727
+ <img src="images/user/user-sm-05.jpg" alt="User Image">
1728
+ <span class="active bg-danger"></span>
1729
+ </a>
1730
+ </div>
1731
+ <div class="media-body">
1732
+ <a href="user-profile.html">
1733
+ <span class="title">Leopold Ebert</span>
1734
+ <span>Fashion Designer</span>
1735
+ </a>
1736
+ </div>
1737
+ </div>
1738
+
1739
+ <div class="media media-sm">
1740
+ <div class="media-sm-wrapper">
1741
+ <a href="user-profile.html">
1742
+ <img src="images/user/user-sm-06.jpg" alt="User Image">
1743
+ <span class="active bg-primary"></span>
1744
+ </a>
1745
+ </div>
1746
+ <div class="media-body">
1747
+ <a href="user-profile.html">
1748
+ <span class="title">Selena Wagner</span>
1749
+ <span>Photographer</span>
1750
+ </a>
1751
+ </div>
1752
+ </div>
1753
+
1754
+ </div>
1755
+ </div>
1756
+
1757
+
1758
+
1759
+
1760
+ <script src="plugins/jquery/jquery.min.js"></script>
1761
+ <script src="plugins/bootstrap/js/bootstrap.bundle.min.js"></script>
1762
+ <script src="plugins/simplebar/simplebar.min.js"></script>
1763
+ <script src="https://unpkg.com/hotkeys-js/dist/hotkeys.min.js"></script>
1764
+
1765
+
1766
+
1767
+ <script src="plugins/apexcharts/apexcharts.js"></script>
1768
+
1769
+
1770
+
1771
+ <script src="plugins/jvectormap/jquery-jvectormap-2.0.3.min.js"></script>
1772
+ <script src="plugins/jvectormap/jquery-jvectormap-world-mill.js"></script>
1773
+ <script src="plugins/jvectormap/jquery-jvectormap-us-aea.js"></script>
1774
+
1775
+
1776
+
1777
+
1778
+
1779
+ <script src="plugins/daterangepicker/moment.min.js"></script>
1780
+ <script src="plugins/daterangepicker/daterangepicker.js"></script>
1781
+ <script>
1782
+ jQuery(document).ready(function() {
1783
+ jQuery('input[name="dateRange"]').daterangepicker({
1784
+ autoUpdateInput: false,
1785
+ singleDatePicker: true,
1786
+ locale: {
1787
+ cancelLabel: 'Clear'
1788
+ }
1789
+ });
1790
+ jQuery('input[name="dateRange"]').on('apply.daterangepicker', function (ev, picker) {
1791
+ jQuery(this).val(picker.startDate.format('MM/DD/YYYY'));
1792
+ });
1793
+ jQuery('input[name="dateRange"]').on('cancel.daterangepicker', function (ev, picker) {
1794
+ jQuery(this).val('');
1795
+ });
1796
+ });
1797
+ </script>
1798
+
1799
+
1800
+ <script src="js/mono.js"></script>
1801
+ <script src="js/chart.js"></script>
1802
+ <script src="js/map.js"></script>
1803
+ <script src="js/custom.js"></script>
1804
+
1805
+
1806
+
1807
+
1808
+ <!-- -->
1809
+
1810
+
1811
+ </body>
1812
+ </html>
apex-charts.html ADDED
@@ -0,0 +1,1668 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+
3
+ <!--
4
+ // WEBSITE: https://themefisher.com
5
+ // TWITTER: https://twitter.com/themefisher
6
+ // FACEBOOK: https://www.facebook.com/themefisher
7
+ // GITHUB: https://github.com/themefisher/
8
+ -->
9
+
10
+ <html lang="en" dir="ltr">
11
+ <head>
12
+ <meta charset="utf-8" />
13
+ <meta http-equiv="X-UA-Compatible" content="IE=edge" />
14
+ <meta name="viewport" content="width=device-width, initial-scale=1" />
15
+
16
+ <title>Mono - Responsive Admin & Dashboard Template</title>
17
+
18
+ <!-- GOOGLE FONTS -->
19
+ <link href="https://fonts.googleapis.com/css?family=Karla:400,700|Roboto" rel="stylesheet">
20
+ <link href="plugins/material/css/materialdesignicons.min.css" rel="stylesheet" />
21
+ <link href="plugins/simplebar/simplebar.css" rel="stylesheet" />
22
+
23
+ <!-- PLUGINS CSS STYLE -->
24
+ <link href="plugins/nprogress/nprogress.css" rel="stylesheet" />
25
+
26
+
27
+
28
+ <!-- MONO CSS -->
29
+ <link id="main-css-href" rel="stylesheet" href="css/style.css" />
30
+
31
+
32
+
33
+
34
+ <!-- FAVICON -->
35
+ <link href="images/favicon.png" rel="shortcut icon" />
36
+
37
+ <!--
38
+ HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries
39
+ -->
40
+ <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
41
+ <!--[if lt IE 9]>
42
+ <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
43
+ <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
44
+ <![endif]-->
45
+ <script src="plugins/nprogress/nprogress.js"></script>
46
+ </head>
47
+
48
+
49
+ <body class="navbar-fixed sidebar-fixed" id="body">
50
+ <script>
51
+ NProgress.configure({ showSpinner: false });
52
+ NProgress.start();
53
+ </script>
54
+
55
+
56
+
57
+ <!-- ====================================
58
+ ——— WRAPPER
59
+ ===================================== -->
60
+ <div class="wrapper">
61
+
62
+
63
+ <!-- ====================================
64
+ ——— LEFT SIDEBAR WITH OUT FOOTER
65
+ ===================================== -->
66
+ <aside class="left-sidebar sidebar-dark" id="left-sidebar">
67
+ <div id="sidebar" class="sidebar sidebar-with-footer">
68
+ <!-- Aplication Brand -->
69
+ <div class="app-brand">
70
+ <a href="/index.html">
71
+ <img src="images/logo.png" alt="Mono">
72
+ <span class="brand-name">MONO</span>
73
+ </a>
74
+ </div>
75
+ <!-- begin sidebar scrollbar -->
76
+ <div class="sidebar-left" data-simplebar style="height: 100%;">
77
+ <!-- sidebar menu -->
78
+ <ul class="nav sidebar-inner" id="sidebar-menu">
79
+
80
+
81
+
82
+ <li
83
+ >
84
+ <a class="sidenav-item-link" href="index.html">
85
+ <i class="mdi mdi-briefcase-account-outline"></i>
86
+ <span class="nav-text">Business Dashboard</span>
87
+ </a>
88
+ </li>
89
+
90
+
91
+
92
+
93
+
94
+ <li
95
+ >
96
+ <a class="sidenav-item-link" href="analytics.html">
97
+ <i class="mdi mdi-chart-line"></i>
98
+ <span class="nav-text">Analytics Dashboard</span>
99
+ </a>
100
+ </li>
101
+
102
+
103
+
104
+
105
+
106
+ <li class="section-title">
107
+ Apps
108
+ </li>
109
+
110
+
111
+
112
+
113
+
114
+ <li
115
+ >
116
+ <a class="sidenav-item-link" href="chat.html">
117
+ <i class="mdi mdi-wechat"></i>
118
+ <span class="nav-text">Chat</span>
119
+ </a>
120
+ </li>
121
+
122
+
123
+
124
+
125
+
126
+ <li
127
+ >
128
+ <a class="sidenav-item-link" href="contacts.html">
129
+ <i class="mdi mdi-phone"></i>
130
+ <span class="nav-text">Contacts</span>
131
+ </a>
132
+ </li>
133
+
134
+
135
+
136
+
137
+
138
+ <li
139
+ >
140
+ <a class="sidenav-item-link" href="team.html">
141
+ <i class="mdi mdi-account-group"></i>
142
+ <span class="nav-text">Team</span>
143
+ </a>
144
+ </li>
145
+
146
+
147
+
148
+
149
+
150
+ <li
151
+ >
152
+ <a class="sidenav-item-link" href="calendar.html">
153
+ <i class="mdi mdi-calendar-check"></i>
154
+ <span class="nav-text">Calendar</span>
155
+ </a>
156
+ </li>
157
+
158
+
159
+
160
+
161
+
162
+ <li class="has-sub" >
163
+ <a class="sidenav-item-link" href="javascript:void(0)" data-toggle="collapse" data-target="#email"
164
+ aria-expanded="false" aria-controls="email">
165
+ <i class="mdi mdi-email"></i>
166
+ <span class="nav-text">email</span> <b class="caret"></b>
167
+ </a>
168
+ <ul class="collapse" id="email"
169
+ data-parent="#sidebar-menu">
170
+ <div class="sub-menu">
171
+
172
+
173
+
174
+ <li >
175
+ <a class="sidenav-item-link" href="email-inbox.html">
176
+ <span class="nav-text">Email Inbox</span>
177
+
178
+ </a>
179
+ </li>
180
+
181
+
182
+
183
+
184
+
185
+
186
+ <li >
187
+ <a class="sidenav-item-link" href="email-details.html">
188
+ <span class="nav-text">Email Details</span>
189
+
190
+ </a>
191
+ </li>
192
+
193
+
194
+
195
+
196
+
197
+
198
+ <li >
199
+ <a class="sidenav-item-link" href="email-compose.html">
200
+ <span class="nav-text">Email Compose</span>
201
+
202
+ </a>
203
+ </li>
204
+
205
+
206
+
207
+
208
+ </div>
209
+ </ul>
210
+ </li>
211
+
212
+
213
+
214
+
215
+
216
+ <li class="section-title">
217
+ UI Elements
218
+ </li>
219
+
220
+
221
+
222
+
223
+
224
+ <li class="has-sub" >
225
+ <a class="sidenav-item-link" href="javascript:void(0)" data-toggle="collapse" data-target="#ui-elements"
226
+ aria-expanded="false" aria-controls="ui-elements">
227
+ <i class="mdi mdi-folder-outline"></i>
228
+ <span class="nav-text">UI Components</span> <b class="caret"></b>
229
+ </a>
230
+ <ul class="collapse" id="ui-elements"
231
+ data-parent="#sidebar-menu">
232
+ <div class="sub-menu">
233
+
234
+
235
+
236
+ <li >
237
+ <a class="sidenav-item-link" href="alert.html">
238
+ <span class="nav-text">Alert</span>
239
+
240
+ </a>
241
+ </li>
242
+
243
+
244
+
245
+
246
+
247
+
248
+ <li >
249
+ <a class="sidenav-item-link" href="badge.html">
250
+ <span class="nav-text">Badge</span>
251
+
252
+ </a>
253
+ </li>
254
+
255
+
256
+
257
+
258
+
259
+
260
+ <li >
261
+ <a class="sidenav-item-link" href="breadcrumb.html">
262
+ <span class="nav-text">Breadcrumb</span>
263
+
264
+ </a>
265
+ </li>
266
+
267
+
268
+
269
+
270
+
271
+ <li class="has-sub" >
272
+ <a class="sidenav-item-link" href="javascript:void(0)" data-toggle="collapse" data-target="#buttons"
273
+ aria-expanded="false" aria-controls="buttons">
274
+ <span class="nav-text">Buttons</span> <b class="caret"></b>
275
+ </a>
276
+ <ul class="collapse" id="buttons">
277
+ <div class="sub-menu">
278
+
279
+ <li >
280
+ <a href="button-default.html">Button Default</a>
281
+ </li>
282
+
283
+ <li >
284
+ <a href="button-dropdown.html">Button Dropdown</a>
285
+ </li>
286
+
287
+ <li >
288
+ <a href="button-group.html">Button Group</a>
289
+ </li>
290
+
291
+ <li >
292
+ <a href="button-social.html">Button Social</a>
293
+ </li>
294
+
295
+ <li >
296
+ <a href="button-loading.html">Button Loading</a>
297
+ </li>
298
+
299
+ </div>
300
+ </ul>
301
+ </li>
302
+
303
+
304
+
305
+
306
+
307
+ <li >
308
+ <a class="sidenav-item-link" href="card.html">
309
+ <span class="nav-text">Card</span>
310
+
311
+ </a>
312
+ </li>
313
+
314
+
315
+
316
+
317
+
318
+
319
+ <li >
320
+ <a class="sidenav-item-link" href="carousel.html">
321
+ <span class="nav-text">Carousel</span>
322
+
323
+ </a>
324
+ </li>
325
+
326
+
327
+
328
+
329
+
330
+
331
+ <li >
332
+ <a class="sidenav-item-link" href="collapse.html">
333
+ <span class="nav-text">Collapse</span>
334
+
335
+ </a>
336
+ </li>
337
+
338
+
339
+
340
+
341
+
342
+
343
+ <li >
344
+ <a class="sidenav-item-link" href="editor.html">
345
+ <span class="nav-text">Editor</span>
346
+
347
+ </a>
348
+ </li>
349
+
350
+
351
+
352
+
353
+
354
+
355
+ <li >
356
+ <a class="sidenav-item-link" href="list-group.html">
357
+ <span class="nav-text">List Group</span>
358
+
359
+ </a>
360
+ </li>
361
+
362
+
363
+
364
+
365
+
366
+
367
+ <li >
368
+ <a class="sidenav-item-link" href="modal.html">
369
+ <span class="nav-text">Modal</span>
370
+
371
+ </a>
372
+ </li>
373
+
374
+
375
+
376
+
377
+
378
+
379
+ <li >
380
+ <a class="sidenav-item-link" href="pagination.html">
381
+ <span class="nav-text">Pagination</span>
382
+
383
+ </a>
384
+ </li>
385
+
386
+
387
+
388
+
389
+
390
+
391
+ <li >
392
+ <a class="sidenav-item-link" href="popover-tooltip.html">
393
+ <span class="nav-text">Popover & Tooltip</span>
394
+
395
+ </a>
396
+ </li>
397
+
398
+
399
+
400
+
401
+
402
+
403
+ <li >
404
+ <a class="sidenav-item-link" href="progress-bar.html">
405
+ <span class="nav-text">Progress Bar</span>
406
+
407
+ </a>
408
+ </li>
409
+
410
+
411
+
412
+
413
+
414
+
415
+ <li >
416
+ <a class="sidenav-item-link" href="spinner.html">
417
+ <span class="nav-text">Spinner</span>
418
+
419
+ </a>
420
+ </li>
421
+
422
+
423
+
424
+
425
+
426
+
427
+ <li >
428
+ <a class="sidenav-item-link" href="switches.html">
429
+ <span class="nav-text">Switches</span>
430
+
431
+ </a>
432
+ </li>
433
+
434
+
435
+
436
+
437
+
438
+ <li class="has-sub" >
439
+ <a class="sidenav-item-link" href="javascript:void(0)" data-toggle="collapse" data-target="#tables"
440
+ aria-expanded="false" aria-controls="tables">
441
+ <span class="nav-text">Tables</span> <b class="caret"></b>
442
+ </a>
443
+ <ul class="collapse" id="tables">
444
+ <div class="sub-menu">
445
+
446
+ <li >
447
+ <a href="bootstarp-tables.html">Bootstrap Tables</a>
448
+ </li>
449
+
450
+ <li >
451
+ <a href="data-tables.html">Data Tables</a>
452
+ </li>
453
+
454
+ </div>
455
+ </ul>
456
+ </li>
457
+
458
+
459
+
460
+
461
+
462
+ <li >
463
+ <a class="sidenav-item-link" href="tab.html">
464
+ <span class="nav-text">Tab</span>
465
+
466
+ </a>
467
+ </li>
468
+
469
+
470
+
471
+
472
+
473
+
474
+ <li >
475
+ <a class="sidenav-item-link" href="toaster.html">
476
+ <span class="nav-text">Toaster</span>
477
+
478
+ </a>
479
+ </li>
480
+
481
+
482
+
483
+
484
+
485
+ <li class="has-sub" >
486
+ <a class="sidenav-item-link" href="javascript:void(0)" data-toggle="collapse" data-target="#icons"
487
+ aria-expanded="false" aria-controls="icons">
488
+ <span class="nav-text">Icons</span> <b class="caret"></b>
489
+ </a>
490
+ <ul class="collapse" id="icons">
491
+ <div class="sub-menu">
492
+
493
+ <li >
494
+ <a href="material-icons.html">Material Icon</a>
495
+ </li>
496
+
497
+ <li >
498
+ <a href="flag-icons.html">Flag Icon</a>
499
+ </li>
500
+
501
+ </div>
502
+ </ul>
503
+ </li>
504
+
505
+
506
+
507
+
508
+ <li class="has-sub" >
509
+ <a class="sidenav-item-link" href="javascript:void(0)" data-toggle="collapse" data-target="#forms"
510
+ aria-expanded="false" aria-controls="forms">
511
+ <span class="nav-text">Forms</span> <b class="caret"></b>
512
+ </a>
513
+ <ul class="collapse" id="forms">
514
+ <div class="sub-menu">
515
+
516
+ <li >
517
+ <a href="basic-input.html">Basic Input</a>
518
+ </li>
519
+
520
+ <li >
521
+ <a href="input-group.html">Input Group</a>
522
+ </li>
523
+
524
+ <li >
525
+ <a href="checkbox-radio.html">Checkbox & Radio</a>
526
+ </li>
527
+
528
+ <li >
529
+ <a href="form-validation.html">Form Validation</a>
530
+ </li>
531
+
532
+ <li >
533
+ <a href="form-advance.html">Form Advance</a>
534
+ </li>
535
+
536
+ </div>
537
+ </ul>
538
+ </li>
539
+
540
+
541
+
542
+
543
+ <li class="has-sub" >
544
+ <a class="sidenav-item-link" href="javascript:void(0)" data-toggle="collapse" data-target="#maps"
545
+ aria-expanded="false" aria-controls="maps">
546
+ <span class="nav-text">Maps</span> <b class="caret"></b>
547
+ </a>
548
+ <ul class="collapse" id="maps">
549
+ <div class="sub-menu">
550
+
551
+ <li >
552
+ <a href="google-maps.html">Google Map</a>
553
+ </li>
554
+
555
+ <li >
556
+ <a href="vector-maps.html">Vector Map</a>
557
+ </li>
558
+
559
+ </div>
560
+ </ul>
561
+ </li>
562
+
563
+
564
+
565
+
566
+ <li class="has-sub" >
567
+ <a class="sidenav-item-link" href="javascript:void(0)" data-toggle="collapse" data-target="#widgets"
568
+ aria-expanded="false" aria-controls="widgets">
569
+ <span class="nav-text">Widgets</span> <b class="caret"></b>
570
+ </a>
571
+ <ul class="collapse" id="widgets">
572
+ <div class="sub-menu">
573
+
574
+ <li >
575
+ <a href="widgets-general.html">General Widget</a>
576
+ </li>
577
+
578
+ <li >
579
+ <a href="widgets-chart.html">Chart Widget</a>
580
+ </li>
581
+
582
+ </div>
583
+ </ul>
584
+ </li>
585
+
586
+
587
+
588
+ </div>
589
+ </ul>
590
+ </li>
591
+
592
+
593
+
594
+
595
+
596
+ <li class="has-sub active expand" >
597
+ <a class="sidenav-item-link" href="javascript:void(0)" data-toggle="collapse" data-target="#charts"
598
+ aria-expanded="false" aria-controls="charts">
599
+ <i class="mdi mdi-chart-pie"></i>
600
+ <span class="nav-text">Charts</span> <b class="caret"></b>
601
+ </a>
602
+ <ul class="collapse show" id="charts"
603
+ data-parent="#sidebar-menu">
604
+ <div class="sub-menu">
605
+
606
+
607
+
608
+ <li class="active" >
609
+ <a class="sidenav-item-link" href="apex-charts.html">
610
+ <span class="nav-text">Apex Charts</span>
611
+
612
+ </a>
613
+ </li>
614
+
615
+
616
+
617
+
618
+ </div>
619
+ </ul>
620
+ </li>
621
+
622
+
623
+
624
+
625
+
626
+ <li class="section-title">
627
+ Pages
628
+ </li>
629
+
630
+
631
+
632
+
633
+
634
+ <li class="has-sub" >
635
+ <a class="sidenav-item-link" href="javascript:void(0)" data-toggle="collapse" data-target="#users"
636
+ aria-expanded="false" aria-controls="users">
637
+ <i class="mdi mdi-image-filter-none"></i>
638
+ <span class="nav-text">User</span> <b class="caret"></b>
639
+ </a>
640
+ <ul class="collapse" id="users"
641
+ data-parent="#sidebar-menu">
642
+ <div class="sub-menu">
643
+
644
+
645
+
646
+ <li >
647
+ <a class="sidenav-item-link" href="user-profile.html">
648
+ <span class="nav-text">User Profile</span>
649
+
650
+ </a>
651
+ </li>
652
+
653
+
654
+
655
+
656
+
657
+
658
+ <li >
659
+ <a class="sidenav-item-link" href="user-activities.html">
660
+ <span class="nav-text">User Activities</span>
661
+
662
+ </a>
663
+ </li>
664
+
665
+
666
+
667
+
668
+
669
+
670
+ <li >
671
+ <a class="sidenav-item-link" href="user-profile-settings.html">
672
+ <span class="nav-text">User Profile Settings</span>
673
+
674
+ </a>
675
+ </li>
676
+
677
+
678
+
679
+
680
+
681
+
682
+ <li >
683
+ <a class="sidenav-item-link" href="user-account-settings.html">
684
+ <span class="nav-text">User Account Settings</span>
685
+
686
+ </a>
687
+ </li>
688
+
689
+
690
+
691
+
692
+
693
+
694
+ <li >
695
+ <a class="sidenav-item-link" href="user-planing-settings.html">
696
+ <span class="nav-text">User Planing Settings</span>
697
+
698
+ </a>
699
+ </li>
700
+
701
+
702
+
703
+
704
+
705
+
706
+ <li >
707
+ <a class="sidenav-item-link" href="user-billing.html">
708
+ <span class="nav-text">User billing</span>
709
+
710
+ </a>
711
+ </li>
712
+
713
+
714
+
715
+
716
+
717
+
718
+ <li >
719
+ <a class="sidenav-item-link" href="user-notify-settings.html">
720
+ <span class="nav-text">User Notify Settings</span>
721
+
722
+ </a>
723
+ </li>
724
+
725
+
726
+
727
+
728
+ </div>
729
+ </ul>
730
+ </li>
731
+
732
+
733
+
734
+
735
+
736
+ <li class="has-sub" >
737
+ <a class="sidenav-item-link" href="javascript:void(0)" data-toggle="collapse" data-target="#authentication"
738
+ aria-expanded="false" aria-controls="authentication">
739
+ <i class="mdi mdi-account"></i>
740
+ <span class="nav-text">Authentication</span> <b class="caret"></b>
741
+ </a>
742
+ <ul class="collapse" id="authentication"
743
+ data-parent="#sidebar-menu">
744
+ <div class="sub-menu">
745
+
746
+
747
+
748
+ <li >
749
+ <a class="sidenav-item-link" href="sign-in.html">
750
+ <span class="nav-text">Sign In</span>
751
+
752
+ </a>
753
+ </li>
754
+
755
+
756
+
757
+
758
+
759
+
760
+ <li >
761
+ <a class="sidenav-item-link" href="sign-up.html">
762
+ <span class="nav-text">Sign Up</span>
763
+
764
+ </a>
765
+ </li>
766
+
767
+
768
+
769
+
770
+
771
+
772
+ <li >
773
+ <a class="sidenav-item-link" href="reset-password.html">
774
+ <span class="nav-text">Reset Password</span>
775
+
776
+ </a>
777
+ </li>
778
+
779
+
780
+
781
+
782
+ </div>
783
+ </ul>
784
+ </li>
785
+
786
+
787
+
788
+
789
+
790
+ <li class="has-sub" >
791
+ <a class="sidenav-item-link" href="javascript:void(0)" data-toggle="collapse" data-target="#other-page"
792
+ aria-expanded="false" aria-controls="other-page">
793
+ <i class="mdi mdi-file-multiple"></i>
794
+ <span class="nav-text">Other pages</span> <b class="caret"></b>
795
+ </a>
796
+ <ul class="collapse" id="other-page"
797
+ data-parent="#sidebar-menu">
798
+ <div class="sub-menu">
799
+
800
+
801
+
802
+ <li >
803
+ <a class="sidenav-item-link" href="invoice.html">
804
+ <span class="nav-text">Invoice</span>
805
+
806
+ </a>
807
+ </li>
808
+
809
+
810
+
811
+
812
+
813
+
814
+ <li >
815
+ <a class="sidenav-item-link" href="404.html">
816
+ <span class="nav-text">404 page</span>
817
+
818
+ </a>
819
+ </li>
820
+
821
+
822
+
823
+
824
+
825
+
826
+ <li >
827
+ <a class="sidenav-item-link" href="page-comingsoon.html">
828
+ <span class="nav-text">Coming Soon</span>
829
+
830
+ </a>
831
+ </li>
832
+
833
+
834
+
835
+
836
+
837
+
838
+ <li >
839
+ <a class="sidenav-item-link" href="page-maintenance.html">
840
+ <span class="nav-text">Maintenance</span>
841
+
842
+ </a>
843
+ </li>
844
+
845
+
846
+
847
+
848
+ </div>
849
+ </ul>
850
+ </li>
851
+
852
+
853
+
854
+
855
+
856
+ <li class="section-title">
857
+ Documentation
858
+ </li>
859
+
860
+
861
+
862
+
863
+
864
+ <li
865
+ >
866
+ <a class="sidenav-item-link" href="getting-started.html">
867
+ <i class="mdi mdi-airplane"></i>
868
+ <span class="nav-text">Getting Started</span>
869
+ </a>
870
+ </li>
871
+
872
+
873
+
874
+
875
+
876
+ <li class="has-sub" >
877
+ <a class="sidenav-item-link" href="javascript:void(0)" data-toggle="collapse" data-target="#customization"
878
+ aria-expanded="false" aria-controls="customization">
879
+ <i class="mdi mdi-square-edit-outline"></i>
880
+ <span class="nav-text">Customization</span> <b class="caret"></b>
881
+ </a>
882
+ <ul class="collapse" id="customization"
883
+ data-parent="#sidebar-menu">
884
+ <div class="sub-menu">
885
+
886
+
887
+
888
+ <li >
889
+ <a class="sidenav-item-link" href="navbar-customization.html">
890
+ <span class="nav-text">Navbar</span>
891
+
892
+ </a>
893
+ </li>
894
+
895
+
896
+
897
+
898
+
899
+
900
+ <li >
901
+ <a class="sidenav-item-link" href="sidebar-customization.html">
902
+ <span class="nav-text">Sidebar</span>
903
+
904
+ </a>
905
+ </li>
906
+
907
+
908
+
909
+
910
+
911
+
912
+ <li >
913
+ <a class="sidenav-item-link" href="styling.html">
914
+ <span class="nav-text">Styling</span>
915
+
916
+ </a>
917
+ </li>
918
+
919
+
920
+
921
+
922
+ </div>
923
+ </ul>
924
+ </li>
925
+
926
+
927
+
928
+ </ul>
929
+
930
+ </div>
931
+
932
+ <div class="sidebar-footer">
933
+ <div class="sidebar-footer-content">
934
+ <ul class="d-flex">
935
+ <li>
936
+ <a href="user-account-settings.html" data-toggle="tooltip" title="Profile settings"><i class="mdi mdi-settings"></i></a></li>
937
+ <li>
938
+ <a href="#" data-toggle="tooltip" title="No chat messages"><i class="mdi mdi-chat-processing"></i></a>
939
+ </li>
940
+ </ul>
941
+ </div>
942
+ </div>
943
+ </div>
944
+ </aside>
945
+
946
+
947
+
948
+ <!-- ====================================
949
+ ——— PAGE WRAPPER
950
+ ===================================== -->
951
+ <div class="page-wrapper">
952
+
953
+ <!-- Header -->
954
+ <header class="main-header" id="header">
955
+ <nav class="navbar navbar-expand-lg navbar-light" id="navbar">
956
+ <!-- Sidebar toggle button -->
957
+ <button id="sidebar-toggler" class="sidebar-toggle">
958
+ <span class="sr-only">Toggle navigation</span>
959
+ </button>
960
+
961
+ <span class="page-title">apexcharts</span>
962
+
963
+ <div class="navbar-right ">
964
+
965
+ <!-- search form -->
966
+ <div class="search-form">
967
+ <form action="index.html" method="get">
968
+ <div class="input-group input-group-sm" id="input-group-search">
969
+ <input type="text" autocomplete="off" name="query" id="search-input" class="form-control" placeholder="Search..." />
970
+ <div class="input-group-append">
971
+ <button class="btn" type="button">/</button>
972
+ </div>
973
+ </div>
974
+ </form>
975
+ <ul class="dropdown-menu dropdown-menu-search">
976
+
977
+ <li class="nav-item">
978
+ <a class="nav-link" href="index.html">Morbi leo risus</a>
979
+ </li>
980
+ <li class="nav-item">
981
+ <a class="nav-link" href="index.html">Dapibus ac facilisis in</a>
982
+ </li>
983
+ <li class="nav-item">
984
+ <a class="nav-link" href="index.html">Porta ac consectetur ac</a>
985
+ </li>
986
+ <li class="nav-item">
987
+ <a class="nav-link" href="index.html">Vestibulum at eros</a>
988
+ </li>
989
+
990
+ </ul>
991
+
992
+ </div>
993
+
994
+ <ul class="nav navbar-nav">
995
+ <!-- Offcanvas -->
996
+ <li class="custom-dropdown">
997
+ <a class="offcanvas-toggler active custom-dropdown-toggler" data-offcanvas="contact-off" href="javascript:" >
998
+ <i class="mdi mdi-contacts icon"></i>
999
+ </a>
1000
+ </li>
1001
+ <li class="custom-dropdown">
1002
+ <button class="notify-toggler custom-dropdown-toggler">
1003
+ <i class="mdi mdi-bell-outline icon"></i>
1004
+ <span class="badge badge-xs rounded-circle">21</span>
1005
+ </button>
1006
+ <div class="dropdown-notify">
1007
+
1008
+ <header>
1009
+ <div class="nav nav-underline" id="nav-tab" role="tablist">
1010
+ <a class="nav-item nav-link active" id="all-tabs" data-toggle="tab" href="#all" role="tab" aria-controls="nav-home"
1011
+ aria-selected="true">All (5)</a>
1012
+ <a class="nav-item nav-link" id="message-tab" data-toggle="tab" href="#message" role="tab" aria-controls="nav-profile"
1013
+ aria-selected="false">Msgs (4)</a>
1014
+ <a class="nav-item nav-link" id="other-tab" data-toggle="tab" href="#other" role="tab" aria-controls="nav-contact"
1015
+ aria-selected="false">Others (3)</a>
1016
+ </div>
1017
+ </header>
1018
+
1019
+ <div class="" data-simplebar style="height: 325px;">
1020
+ <div class="tab-content" id="myTabContent">
1021
+
1022
+ <div class="tab-pane fade show active" id="all" role="tabpanel" aria-labelledby="all-tabs">
1023
+
1024
+ <div class="media media-sm bg-warning-10 p-4 mb-0">
1025
+ <div class="media-sm-wrapper">
1026
+ <a href="user-profile.html">
1027
+ <img src="images/user/user-sm-02.jpg" alt="User Image">
1028
+ </a>
1029
+ </div>
1030
+ <div class="media-body">
1031
+ <a href="user-profile.html">
1032
+ <span class="title mb-0">John Doe</span>
1033
+ <span class="discribe">Extremity sweetness difficult behaviour he of. On disposal of as landlord horrible. Afraid at highly months do things on at.</span>
1034
+ <span class="time">
1035
+ <time>Just now</time>...
1036
+ </span>
1037
+ </a>
1038
+ </div>
1039
+ </div>
1040
+
1041
+ <div class="media media-sm p-4 bg-light mb-0">
1042
+ <div class="media-sm-wrapper bg-primary">
1043
+ <a href="user-profile.html">
1044
+ <i class="mdi mdi-calendar-check-outline"></i>
1045
+ </a>
1046
+ </div>
1047
+ <div class="media-body">
1048
+ <a href="user-profile.html">
1049
+ <span class="title mb-0">New event added</span>
1050
+ <span class="discribe">1/3/2014 (1pm - 2pm)</span>
1051
+ <span class="time">
1052
+ <time>10 min ago...</time>...
1053
+ </span>
1054
+ </a>
1055
+ </div>
1056
+ </div>
1057
+
1058
+ <div class="media media-sm p-4 mb-0">
1059
+ <div class="media-sm-wrapper">
1060
+ <a href="user-profile.html">
1061
+ <img src="images/user/user-sm-03.jpg" alt="User Image">
1062
+ </a>
1063
+ </div>
1064
+ <div class="media-body">
1065
+ <a href="user-profile.html">
1066
+ <span class="title mb-0">Sagge Hudson</span>
1067
+ <span class="discribe">On disposal of as landlord Afraid at highly months do things on at.</span>
1068
+ <span class="time">
1069
+ <time>1 hrs ago</time>...
1070
+ </span>
1071
+ </a>
1072
+ </div>
1073
+ </div>
1074
+
1075
+ <div class="media media-sm p-4 mb-0">
1076
+ <div class="media-sm-wrapper bg-info-dark">
1077
+ <a href="user-profile.html">
1078
+ <i class="mdi mdi-account-multiple-check"></i>
1079
+ </a>
1080
+ </div>
1081
+ <div class="media-body">
1082
+ <a href="user-profile.html">
1083
+ <span class="title mb-0">Add request</span>
1084
+ <span class="discribe">Add Dany Jones as your contact.</span>
1085
+ <div class="buttons">
1086
+ <a href="#" class="btn btn-sm btn-success shadow-none text-white">accept</a>
1087
+ <a href="#" class="btn btn-sm shadow-none">delete</a>
1088
+ </div>
1089
+ <span class="time">
1090
+ <time>6 hrs ago</time>...
1091
+ </span>
1092
+ </a>
1093
+ </div>
1094
+ </div>
1095
+
1096
+ <div class="media media-sm p-4 mb-0">
1097
+ <div class="media-sm-wrapper bg-info">
1098
+ <a href="user-profile.html">
1099
+ <i class="mdi mdi-playlist-check"></i>
1100
+ </a>
1101
+ </div>
1102
+ <div class="media-body">
1103
+ <a href="user-profile.html">
1104
+ <span class="title mb-0">Task complete</span>
1105
+ <span class="discribe">Afraid at highly months do things on at.</span>
1106
+ <span class="time">
1107
+ <time>1 hrs ago</time>...
1108
+ </span>
1109
+ </a>
1110
+ </div>
1111
+ </div>
1112
+
1113
+ </div>
1114
+
1115
+ <div class="tab-pane fade" id="message" role="tabpanel" aria-labelledby="message-tab">
1116
+
1117
+ <div class="media media-sm p-4 mb-0">
1118
+ <div class="media-sm-wrapper">
1119
+ <a href="user-profile.html">
1120
+ <img src="images/user/user-sm-01.jpg" alt="User Image">
1121
+ </a>
1122
+ </div>
1123
+ <div class="media-body">
1124
+ <a href="user-profile.html">
1125
+ <span class="title mb-0">Selena Wagner</span>
1126
+ <span class="discribe">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</span>
1127
+ <span class="time">
1128
+ <time>15 min ago</time>...
1129
+ </span>
1130
+ </a>
1131
+ </div>
1132
+ </div>
1133
+
1134
+ <div class="media media-sm p-4 mb-0">
1135
+ <div class="media-sm-wrapper">
1136
+ <a href="user-profile.html">
1137
+ <img src="images/user/user-sm-03.jpg" alt="User Image">
1138
+ </a>
1139
+ </div>
1140
+ <div class="media-body">
1141
+ <a href="user-profile.html">
1142
+ <span class="title mb-0">Sagge Hudson</span>
1143
+ <span class="discribe">On disposal of as landlord Afraid at highly months do things on at.</span>
1144
+ <span class="time">
1145
+ <time>1 hrs ago</time>...
1146
+ </span>
1147
+ </a>
1148
+ </div>
1149
+ </div>
1150
+
1151
+ <div class="media media-sm bg-warning-10 p-4 mb-0">
1152
+ <div class="media-sm-wrapper">
1153
+ <a href="user-profile.html">
1154
+ <img src="images/user/user-sm-02.jpg" alt="User Image">
1155
+ </a>
1156
+ </div>
1157
+ <div class="media-body">
1158
+ <a href="user-profile.html">
1159
+ <span class="title mb-0">John Doe</span>
1160
+ <span class="discribe">Extremity sweetness difficult behaviour he of. On disposal of as landlord horrible. Afraid
1161
+ at highly months do things on at.</span>
1162
+ <span class="time">
1163
+ <time>Just now</time>...
1164
+ </span>
1165
+ </a>
1166
+ </div>
1167
+ </div>
1168
+
1169
+ <div class="media media-sm p-4 mb-0">
1170
+ <div class="media-sm-wrapper">
1171
+ <a href="user-profile.html">
1172
+ <img src="images/user/user-sm-04.jpg" alt="User Image">
1173
+ </a>
1174
+ </div>
1175
+ <div class="media-body">
1176
+ <a href="user-profile.html">
1177
+ <span class="title mb-0">Albrecht Straub</span>
1178
+ <span class="discribe"> Beatae quia natus assumenda laboriosam, nisi perferendis aliquid consectetur expedita non tenetur.</span>
1179
+ <span class="time">
1180
+ <time>Just now</time>...
1181
+ </span>
1182
+ </a>
1183
+ </div>
1184
+ </div>
1185
+
1186
+ </div>
1187
+ <div class="tab-pane fade" id="other" role="tabpanel" aria-labelledby="contact-tab">
1188
+
1189
+ <div class="media media-sm p-4 bg-light mb-0">
1190
+ <div class="media-sm-wrapper bg-primary">
1191
+ <a href="user-profile.html">
1192
+ <i class="mdi mdi-calendar-check-outline"></i>
1193
+ </a>
1194
+ </div>
1195
+ <div class="media-body">
1196
+ <a href="user-profile.html">
1197
+ <span class="title mb-0">New event added</span>
1198
+ <span class="discribe">1/3/2014 (1pm - 2pm)</span>
1199
+ <span class="time">
1200
+ <time>10 min ago...</time>...
1201
+ </span>
1202
+ </a>
1203
+ </div>
1204
+ </div>
1205
+
1206
+ <div class="media media-sm p-4 mb-0">
1207
+ <div class="media-sm-wrapper bg-info-dark">
1208
+ <a href="user-profile.html">
1209
+ <i class="mdi mdi-account-multiple-check"></i>
1210
+ </a>
1211
+ </div>
1212
+ <div class="media-body">
1213
+ <a href="user-profile.html">
1214
+ <span class="title mb-0">Add request</span>
1215
+ <span class="discribe">Add Dany Jones as your contact.</span>
1216
+ <div class="buttons">
1217
+ <a href="#" class="btn btn-sm btn-success shadow-none text-white">accept</a>
1218
+ <a href="#" class="btn btn-sm shadow-none">delete</a>
1219
+ </div>
1220
+ <span class="time">
1221
+ <time>6 hrs ago</time>...
1222
+ </span>
1223
+ </a>
1224
+ </div>
1225
+ </div>
1226
+
1227
+ <div class="media media-sm p-4 mb-0">
1228
+ <div class="media-sm-wrapper bg-info">
1229
+ <a href="user-profile.html">
1230
+ <i class="mdi mdi-playlist-check"></i>
1231
+ </a>
1232
+ </div>
1233
+ <div class="media-body">
1234
+ <a href="user-profile.html">
1235
+ <span class="title mb-0">Task complete</span>
1236
+ <span class="discribe">Afraid at highly months do things on at.</span>
1237
+ <span class="time">
1238
+ <time>1 hrs ago</time>...
1239
+ </span>
1240
+ </a>
1241
+ </div>
1242
+ </div>
1243
+
1244
+ </div>
1245
+ </div>
1246
+ </div>
1247
+
1248
+ <footer class="border-top dropdown-notify-footer">
1249
+ <div class="d-flex justify-content-between align-items-center py-2 px-4">
1250
+ <span>Last updated 3 min ago</span>
1251
+ <a id="refress-button" href="javascript:" class="btn mdi mdi-cached btn-refress"></a>
1252
+ </div>
1253
+ </footer>
1254
+ </div>
1255
+ </li>
1256
+ <!-- User Account -->
1257
+ <li class="dropdown user-menu">
1258
+ <button class="dropdown-toggle nav-link" data-toggle="dropdown">
1259
+ <img src="images/user/user-xs-01.jpg" class="user-image rounded-circle" alt="User Image" />
1260
+ <span class="d-none d-lg-inline-block">John Doe</span>
1261
+ </button>
1262
+ <ul class="dropdown-menu dropdown-menu-right">
1263
+ <li>
1264
+ <a class="dropdown-link-item" href="user-profile.html">
1265
+ <i class="mdi mdi-account-outline"></i>
1266
+ <span class="nav-text">My Profile</span>
1267
+ </a>
1268
+ </li>
1269
+ <li>
1270
+ <a class="dropdown-link-item" href="email-inbox.html">
1271
+ <i class="mdi mdi-email-outline"></i>
1272
+ <span class="nav-text">Message</span>
1273
+ <span class="badge badge-pill badge-primary">24</span>
1274
+ </a>
1275
+ </li>
1276
+ <li>
1277
+ <a class="dropdown-link-item" href="user-activities.html">
1278
+ <i class="mdi mdi-diamond-stone"></i>
1279
+ <span class="nav-text">Activitise</span></a>
1280
+ </li>
1281
+ <li>
1282
+ <a class="dropdown-link-item" href="user-account-settings.html">
1283
+ <i class="mdi mdi-settings"></i>
1284
+ <span class="nav-text">Account Setting</span>
1285
+ </a>
1286
+ </li>
1287
+
1288
+ <li class="dropdown-footer">
1289
+ <a class="dropdown-link-item" href="sign-in.html"> <i class="mdi mdi-logout"></i> Log Out </a>
1290
+ </li>
1291
+ </ul>
1292
+ </li>
1293
+ </ul>
1294
+ </div>
1295
+ </nav>
1296
+
1297
+
1298
+ </header>
1299
+
1300
+ <!-- ====================================
1301
+ ——— CONTENT WRAPPER
1302
+ ===================================== -->
1303
+ <div class="content-wrapper">
1304
+ <div class="content"><div class="row">
1305
+ <div class="col-xl-8">
1306
+ <!-- Income and Express -->
1307
+ <div class="card card-default">
1308
+ <div class="card-header">
1309
+ <h2>Income And Expenses</h2>
1310
+ <div class="dropdown">
1311
+ <a class="dropdown-toggle icon-burger-mini" href="#" role="button" id="dropdownMenuLink" data-toggle="dropdown"
1312
+ aria-haspopup="true" aria-expanded="false" data-display="static">
1313
+ </a>
1314
+
1315
+ <div class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownMenuLink">
1316
+ <a class="dropdown-item" href="#">Action</a>
1317
+ <a class="dropdown-item" href="#">Another action</a>
1318
+ <a class="dropdown-item" href="#">Something else here</a>
1319
+ </div>
1320
+ </div>
1321
+
1322
+ </div>
1323
+ <div class="card-body">
1324
+ <div class="chart-wrapper">
1325
+ <div id="mixed-chart-1"></div>
1326
+ </div>
1327
+ </div>
1328
+
1329
+ </div>
1330
+ </div>
1331
+ <div class="col-xl-4">
1332
+ <!-- Revenue -->
1333
+ <div class="card card-default">
1334
+ <div class="card-header justify-content-center">
1335
+ <h2>Progress Donut Chart</h2>
1336
+ </div>
1337
+ <div class="card-body pt-0">
1338
+ <div class="chart-wrapper">
1339
+ <div id="radial-bar-chart-1"></div>
1340
+ </div>
1341
+ <div class="radial-bar-chart-footer">
1342
+ <div class="title-large">$25,350 <i class="mdi mdi-arrow-up text-success"></i></div>
1343
+ <div class="title-small">vs $12,600 (prev)</div>
1344
+ </div>
1345
+ </div>
1346
+ </div>
1347
+ </div>
1348
+ </div>
1349
+
1350
+ <div class="row">
1351
+ <div class="col-xl-6">
1352
+ <!-- User Acquisition Statistics -->
1353
+ <div class="card card-default" id="user-acquisition">
1354
+ <div class="card-header border-bottom pb-0">
1355
+ <h2>User Acquisition</h2>
1356
+ <ul class="nav nav-underline-active-primary" role="tablist">
1357
+ <li class="nav-item">
1358
+ <a class="nav-link active" data-toggle="tab" href="#traffic-channel" role="tab" aria-selected="true">Traffic
1359
+ Channel</a>
1360
+ </li>
1361
+ <li class="nav-item">
1362
+ <a class="nav-link" data-toggle="tab" href="#source-medium" role="tab" aria-selected="false">Source / Medium </a>
1363
+ </li>
1364
+ <li class="nav-item">
1365
+ <a class="nav-link" data-toggle="tab" href="#referrals" role="tab" aria-selected="false">Referrals</a>
1366
+ </li>
1367
+ </ul>
1368
+ </div>
1369
+
1370
+ <div class="tab-content" id="myTabContent">
1371
+ <div id="barchartlg1"></div>
1372
+ </div>
1373
+ <div class="card-footer d-flex flex-wrap bg-white">
1374
+ <a href="#" class="text-uppercase py-3">Acquisition Report</a>
1375
+ </div>
1376
+ </div>
1377
+ </div>
1378
+
1379
+ <!-- Sessions by Device -->
1380
+ <div class="col-xl-6">
1381
+ <!-- Sessions By Device -->
1382
+ <div class="card card-default">
1383
+ <div class="card-header border-bottom">
1384
+ <h2 class="mdi mdi-desktop-mac">Sessions by Device</h2>
1385
+ </div>
1386
+ <div class="card-body pt-6">
1387
+ <div class="row">
1388
+ <div class="col-lg-6">
1389
+ <div id="donut-chart-1"></div>
1390
+ </div>
1391
+ <div class="col-lg-6">
1392
+ <div class="media mb-4">
1393
+ <i class="display-4 mdi mdi-remote-desktop text-primary mr-3"></i>
1394
+ <div class="media-body">
1395
+ <p>Desktop</p>
1396
+ <p class="h4 my-1 text-dark">45% <span class="text-success">23.5% <i
1397
+ class="mdi mdi-arrow-up-bold small"></i></span>
1398
+ </p>
1399
+ <p>vs 155,900 (prev)</p>
1400
+ </div>
1401
+ </div>
1402
+
1403
+ <div class="media mb-4">
1404
+ <i class="display-4 mdi mdi-tablet-android text-primary mr-3"></i>
1405
+ <div class="media-body">
1406
+ <p>Tablet</p>
1407
+ <p class="h4 my-1 text-dark">30% <span class="text-success">13.5% <i
1408
+ class="mdi mdi-arrow-up-bold small"></i></span>
1409
+ </p>
1410
+ <p>vs 187,900 (prev)</p>
1411
+ </div>
1412
+ </div>
1413
+
1414
+ <div class="media mb-4">
1415
+ <i class="display-4 mdi mdi-cellphone-iphone text-primary mr-3"></i>
1416
+ <div class="media-body">
1417
+ <p>Mobile</p>
1418
+ <p class="h4 my-1 text-dark">25% <span class="text-success">35.5% <i
1419
+ class="mdi mdi-arrow-up-bold small"></i></span>
1420
+ </p>
1421
+ <p>vs 309,900 (prev)</p>
1422
+ </div>
1423
+ </div>
1424
+ </div>
1425
+ </div>
1426
+ </div>
1427
+ </div>
1428
+ </div>
1429
+ </div>
1430
+
1431
+ <div class="row">
1432
+ <div class="col-xl-4">
1433
+ <!-- Current Users -->
1434
+ <div class="card card-default">
1435
+ <div class="card-header">
1436
+ <h2>Current Users</h2>
1437
+ <span>Realtime</span>
1438
+ </div>
1439
+ <div class="card-body ">
1440
+ <div id="barchartlg2"></div>
1441
+ </div>
1442
+ <div class="card-footer bg-white py-4">
1443
+ <a href="#" class="text-uppercase">Current Users Overview</a>
1444
+ </div>
1445
+ </div>
1446
+ </div>
1447
+ <div class="col-xl-4">
1448
+ <!-- Pie Chart -->
1449
+ <div class="card card-default">
1450
+ <div class="card-header">
1451
+ <h2>Pie Chart</h2>
1452
+ </div>
1453
+ <div class="card-body p-xl-7">
1454
+ <div id="simple-pie-chart" class="d-flex justify-content-center"></div>
1455
+ </div>
1456
+
1457
+ </div>
1458
+ </div>
1459
+ <div class="col-xl-4">
1460
+ <!-- User -->
1461
+ <div class="card card-default">
1462
+ <div class="card-header">
1463
+ <h2>Users</h2>
1464
+ </div>
1465
+ <div class="card-body pb-0">
1466
+ <div class="bg-primary d-flex justify-content-between flex-wrap p-5 text-white align-items-lg-end">
1467
+ <div class="d-flex flex-column">
1468
+ <span class="h3 text-white">325,980</span>
1469
+ <span>vs 275,900 (prev)</span>
1470
+ </div>
1471
+ <div>
1472
+ <span>45%</span>
1473
+ <i class="mdi mdi-arrow-up-bold"></i>
1474
+ </div>
1475
+ </div>
1476
+ <div id="line-chart-1"></div>
1477
+ </div>
1478
+ </div>
1479
+ </div>
1480
+ </div>
1481
+
1482
+ <div class="row">
1483
+ <div class="col-xl-4">
1484
+ <!-- Radar Chart -->
1485
+ <div class="card card-default">
1486
+ <div class="card-header">
1487
+ <h2>Radar Chart</h2>
1488
+ </div>
1489
+ <div class="card-body pb-0">
1490
+ <div id="simple-rader-chart"></div>
1491
+ </div>
1492
+ </div>
1493
+ </div>
1494
+ <div class="col-xl-4">
1495
+ <!-- Horizontal Bar Chart -->
1496
+ <div class="card card-default">
1497
+ <div class="card-header">
1498
+ <h2>Horizontal Bar Chart</h2>
1499
+ </div>
1500
+ <div class="card-body pb-0">
1501
+ <div id="horizontal-bar-chart"></div>
1502
+ </div>
1503
+ </div>
1504
+ </div>
1505
+ <div class="col-xl-4">
1506
+ <!-- Aria Chart -->
1507
+ <div class="card card-default">
1508
+ <div class="card-header">
1509
+ <h2>Aria Chart</h2>
1510
+ </div>
1511
+ <div class="card-body pb-0">
1512
+ <div id="aria-chart"></div>
1513
+ </div>
1514
+ </div>
1515
+ </div>
1516
+
1517
+ </div>
1518
+ </div>
1519
+
1520
+ </div>
1521
+
1522
+ <!-- Footer -->
1523
+ <footer class="footer mt-auto">
1524
+ <div class="copyright bg-white">
1525
+ <p>
1526
+ &copy; <span id="copy-year"></span> Copyright Mono Dashboard Bootstrap Template by <a class="text-primary" href="http://www.iamabdus.com/" target="_blank" >Abdus</a>.
1527
+ </p>
1528
+ </div>
1529
+ <script>
1530
+ var d = new Date();
1531
+ var year = d.getFullYear();
1532
+ document.getElementById("copy-year").innerHTML = year;
1533
+ </script>
1534
+ </footer>
1535
+
1536
+ </div>
1537
+ </div>
1538
+
1539
+ <!-- Card Offcanvas -->
1540
+ <div class="card card-offcanvas" id="contact-off" >
1541
+ <div class="card-header">
1542
+ <h2>Contacts</h2>
1543
+ <a href="#" class="btn btn-primary btn-pill px-4">Add New</a>
1544
+ </div>
1545
+ <div class="card-body">
1546
+
1547
+ <div class="mb-4">
1548
+ <input type="text" class="form-control form-control-lg form-control-secondary rounded-0" placeholder="Search contacts...">
1549
+ </div>
1550
+
1551
+ <div class="media media-sm">
1552
+ <div class="media-sm-wrapper">
1553
+ <a href="user-profile.html">
1554
+ <img src="images/user/user-sm-01.jpg" alt="User Image">
1555
+ <span class="active bg-primary"></span>
1556
+ </a>
1557
+ </div>
1558
+ <div class="media-body">
1559
+ <a href="user-profile.html">
1560
+ <span class="title">Selena Wagner</span>
1561
+ <span class="discribe">Designer</span>
1562
+ </a>
1563
+ </div>
1564
+ </div>
1565
+
1566
+ <div class="media media-sm">
1567
+ <div class="media-sm-wrapper">
1568
+ <a href="user-profile.html">
1569
+ <img src="images/user/user-sm-02.jpg" alt="User Image">
1570
+ <span class="active bg-primary"></span>
1571
+ </a>
1572
+ </div>
1573
+ <div class="media-body">
1574
+ <a href="user-profile.html">
1575
+ <span class="title">Walter Reuter</span>
1576
+ <span>Developer</span>
1577
+ </a>
1578
+ </div>
1579
+ </div>
1580
+
1581
+ <div class="media media-sm">
1582
+ <div class="media-sm-wrapper">
1583
+ <a href="user-profile.html">
1584
+ <img src="images/user/user-sm-03.jpg" alt="User Image">
1585
+ </a>
1586
+ </div>
1587
+ <div class="media-body">
1588
+ <a href="user-profile.html">
1589
+ <span class="title">Larissa Gebhardt</span>
1590
+ <span>Cyber Punk</span>
1591
+ </a>
1592
+ </div>
1593
+ </div>
1594
+
1595
+ <div class="media media-sm">
1596
+ <div class="media-sm-wrapper">
1597
+ <a href="user-profile.html">
1598
+ <img src="images/user/user-sm-04.jpg" alt="User Image">
1599
+ </a>
1600
+
1601
+ </div>
1602
+ <div class="media-body">
1603
+ <a href="user-profile.html">
1604
+ <span class="title">Albrecht Straub</span>
1605
+ <span>Photographer</span>
1606
+ </a>
1607
+ </div>
1608
+ </div>
1609
+
1610
+ <div class="media media-sm">
1611
+ <div class="media-sm-wrapper">
1612
+ <a href="user-profile.html">
1613
+ <img src="images/user/user-sm-05.jpg" alt="User Image">
1614
+ <span class="active bg-danger"></span>
1615
+ </a>
1616
+ </div>
1617
+ <div class="media-body">
1618
+ <a href="user-profile.html">
1619
+ <span class="title">Leopold Ebert</span>
1620
+ <span>Fashion Designer</span>
1621
+ </a>
1622
+ </div>
1623
+ </div>
1624
+
1625
+ <div class="media media-sm">
1626
+ <div class="media-sm-wrapper">
1627
+ <a href="user-profile.html">
1628
+ <img src="images/user/user-sm-06.jpg" alt="User Image">
1629
+ <span class="active bg-primary"></span>
1630
+ </a>
1631
+ </div>
1632
+ <div class="media-body">
1633
+ <a href="user-profile.html">
1634
+ <span class="title">Selena Wagner</span>
1635
+ <span>Photographer</span>
1636
+ </a>
1637
+ </div>
1638
+ </div>
1639
+
1640
+ </div>
1641
+ </div>
1642
+
1643
+
1644
+
1645
+
1646
+ <script src="plugins/jquery/jquery.min.js"></script>
1647
+ <script src="plugins/bootstrap/js/bootstrap.bundle.min.js"></script>
1648
+ <script src="plugins/simplebar/simplebar.min.js"></script>
1649
+ <script src="https://unpkg.com/hotkeys-js/dist/hotkeys.min.js"></script>
1650
+
1651
+
1652
+
1653
+ <script src="plugins/apexcharts/apexcharts.js"></script>
1654
+
1655
+
1656
+ <script src="js/mono.js"></script>
1657
+ <script src="js/chart.js"></script>
1658
+ <script src="js/map.js"></script>
1659
+ <script src="js/custom.js"></script>
1660
+
1661
+
1662
+
1663
+
1664
+ <!-- -->
1665
+
1666
+
1667
+ </body>
1668
+ </html>
badge.html ADDED
@@ -0,0 +1,1688 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+
3
+ <!--
4
+ // WEBSITE: https://themefisher.com
5
+ // TWITTER: https://twitter.com/themefisher
6
+ // FACEBOOK: https://www.facebook.com/themefisher
7
+ // GITHUB: https://github.com/themefisher/
8
+ -->
9
+
10
+ <html lang="en" dir="ltr">
11
+ <head>
12
+ <meta charset="utf-8" />
13
+ <meta http-equiv="X-UA-Compatible" content="IE=edge" />
14
+ <meta name="viewport" content="width=device-width, initial-scale=1" />
15
+
16
+ <title>Mono - Responsive Admin & Dashboard Template</title>
17
+
18
+ <!-- GOOGLE FONTS -->
19
+ <link href="https://fonts.googleapis.com/css?family=Karla:400,700|Roboto" rel="stylesheet">
20
+ <link href="plugins/material/css/materialdesignicons.min.css" rel="stylesheet" />
21
+ <link href="plugins/simplebar/simplebar.css" rel="stylesheet" />
22
+
23
+ <!-- PLUGINS CSS STYLE -->
24
+ <link href="plugins/nprogress/nprogress.css" rel="stylesheet" />
25
+
26
+
27
+ <link href="plugins/prism/prism.css" rel="stylesheet" />
28
+
29
+
30
+ <!-- MONO CSS -->
31
+ <link id="main-css-href" rel="stylesheet" href="css/style.css" />
32
+
33
+
34
+
35
+
36
+ <!-- FAVICON -->
37
+ <link href="images/favicon.png" rel="shortcut icon" />
38
+
39
+ <!--
40
+ HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries
41
+ -->
42
+ <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
43
+ <!--[if lt IE 9]>
44
+ <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
45
+ <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
46
+ <![endif]-->
47
+ <script src="plugins/nprogress/nprogress.js"></script>
48
+ </head>
49
+
50
+
51
+ <body class="navbar-fixed sidebar-fixed" id="body">
52
+ <script>
53
+ NProgress.configure({ showSpinner: false });
54
+ NProgress.start();
55
+ </script>
56
+
57
+
58
+
59
+ <!-- ====================================
60
+ ——— WRAPPER
61
+ ===================================== -->
62
+ <div class="wrapper">
63
+
64
+
65
+ <!-- ====================================
66
+ ——— LEFT SIDEBAR WITH OUT FOOTER
67
+ ===================================== -->
68
+ <aside class="left-sidebar sidebar-dark" id="left-sidebar">
69
+ <div id="sidebar" class="sidebar sidebar-with-footer">
70
+ <!-- Aplication Brand -->
71
+ <div class="app-brand">
72
+ <a href="/index.html">
73
+ <img src="images/logo.png" alt="Mono">
74
+ <span class="brand-name">MONO</span>
75
+ </a>
76
+ </div>
77
+ <!-- begin sidebar scrollbar -->
78
+ <div class="sidebar-left" data-simplebar style="height: 100%;">
79
+ <!-- sidebar menu -->
80
+ <ul class="nav sidebar-inner" id="sidebar-menu">
81
+
82
+
83
+
84
+ <li
85
+ >
86
+ <a class="sidenav-item-link" href="index.html">
87
+ <i class="mdi mdi-briefcase-account-outline"></i>
88
+ <span class="nav-text">Business Dashboard</span>
89
+ </a>
90
+ </li>
91
+
92
+
93
+
94
+
95
+
96
+ <li
97
+ >
98
+ <a class="sidenav-item-link" href="analytics.html">
99
+ <i class="mdi mdi-chart-line"></i>
100
+ <span class="nav-text">Analytics Dashboard</span>
101
+ </a>
102
+ </li>
103
+
104
+
105
+
106
+
107
+
108
+ <li class="section-title">
109
+ Apps
110
+ </li>
111
+
112
+
113
+
114
+
115
+
116
+ <li
117
+ >
118
+ <a class="sidenav-item-link" href="chat.html">
119
+ <i class="mdi mdi-wechat"></i>
120
+ <span class="nav-text">Chat</span>
121
+ </a>
122
+ </li>
123
+
124
+
125
+
126
+
127
+
128
+ <li
129
+ >
130
+ <a class="sidenav-item-link" href="contacts.html">
131
+ <i class="mdi mdi-phone"></i>
132
+ <span class="nav-text">Contacts</span>
133
+ </a>
134
+ </li>
135
+
136
+
137
+
138
+
139
+
140
+ <li
141
+ >
142
+ <a class="sidenav-item-link" href="team.html">
143
+ <i class="mdi mdi-account-group"></i>
144
+ <span class="nav-text">Team</span>
145
+ </a>
146
+ </li>
147
+
148
+
149
+
150
+
151
+
152
+ <li
153
+ >
154
+ <a class="sidenav-item-link" href="calendar.html">
155
+ <i class="mdi mdi-calendar-check"></i>
156
+ <span class="nav-text">Calendar</span>
157
+ </a>
158
+ </li>
159
+
160
+
161
+
162
+
163
+
164
+ <li class="has-sub" >
165
+ <a class="sidenav-item-link" href="javascript:void(0)" data-toggle="collapse" data-target="#email"
166
+ aria-expanded="false" aria-controls="email">
167
+ <i class="mdi mdi-email"></i>
168
+ <span class="nav-text">email</span> <b class="caret"></b>
169
+ </a>
170
+ <ul class="collapse" id="email"
171
+ data-parent="#sidebar-menu">
172
+ <div class="sub-menu">
173
+
174
+
175
+
176
+ <li >
177
+ <a class="sidenav-item-link" href="email-inbox.html">
178
+ <span class="nav-text">Email Inbox</span>
179
+
180
+ </a>
181
+ </li>
182
+
183
+
184
+
185
+
186
+
187
+
188
+ <li >
189
+ <a class="sidenav-item-link" href="email-details.html">
190
+ <span class="nav-text">Email Details</span>
191
+
192
+ </a>
193
+ </li>
194
+
195
+
196
+
197
+
198
+
199
+
200
+ <li >
201
+ <a class="sidenav-item-link" href="email-compose.html">
202
+ <span class="nav-text">Email Compose</span>
203
+
204
+ </a>
205
+ </li>
206
+
207
+
208
+
209
+
210
+ </div>
211
+ </ul>
212
+ </li>
213
+
214
+
215
+
216
+
217
+
218
+ <li class="section-title">
219
+ UI Elements
220
+ </li>
221
+
222
+
223
+
224
+
225
+
226
+ <li class="has-sub active expand" >
227
+ <a class="sidenav-item-link" href="javascript:void(0)" data-toggle="collapse" data-target="#ui-elements"
228
+ aria-expanded="false" aria-controls="ui-elements">
229
+ <i class="mdi mdi-folder-outline"></i>
230
+ <span class="nav-text">UI Components</span> <b class="caret"></b>
231
+ </a>
232
+ <ul class="collapse show" id="ui-elements"
233
+ data-parent="#sidebar-menu">
234
+ <div class="sub-menu">
235
+
236
+
237
+
238
+ <li >
239
+ <a class="sidenav-item-link" href="alert.html">
240
+ <span class="nav-text">Alert</span>
241
+
242
+ </a>
243
+ </li>
244
+
245
+
246
+
247
+
248
+
249
+
250
+ <li class="active" >
251
+ <a class="sidenav-item-link" href="badge.html">
252
+ <span class="nav-text">Badge</span>
253
+
254
+ </a>
255
+ </li>
256
+
257
+
258
+
259
+
260
+
261
+
262
+ <li >
263
+ <a class="sidenav-item-link" href="breadcrumb.html">
264
+ <span class="nav-text">Breadcrumb</span>
265
+
266
+ </a>
267
+ </li>
268
+
269
+
270
+
271
+
272
+
273
+ <li class="has-sub" >
274
+ <a class="sidenav-item-link" href="javascript:void(0)" data-toggle="collapse" data-target="#buttons"
275
+ aria-expanded="false" aria-controls="buttons">
276
+ <span class="nav-text">Buttons</span> <b class="caret"></b>
277
+ </a>
278
+ <ul class="collapse" id="buttons">
279
+ <div class="sub-menu">
280
+
281
+ <li >
282
+ <a href="button-default.html">Button Default</a>
283
+ </li>
284
+
285
+ <li >
286
+ <a href="button-dropdown.html">Button Dropdown</a>
287
+ </li>
288
+
289
+ <li >
290
+ <a href="button-group.html">Button Group</a>
291
+ </li>
292
+
293
+ <li >
294
+ <a href="button-social.html">Button Social</a>
295
+ </li>
296
+
297
+ <li >
298
+ <a href="button-loading.html">Button Loading</a>
299
+ </li>
300
+
301
+ </div>
302
+ </ul>
303
+ </li>
304
+
305
+
306
+
307
+
308
+
309
+ <li >
310
+ <a class="sidenav-item-link" href="card.html">
311
+ <span class="nav-text">Card</span>
312
+
313
+ </a>
314
+ </li>
315
+
316
+
317
+
318
+
319
+
320
+
321
+ <li >
322
+ <a class="sidenav-item-link" href="carousel.html">
323
+ <span class="nav-text">Carousel</span>
324
+
325
+ </a>
326
+ </li>
327
+
328
+
329
+
330
+
331
+
332
+
333
+ <li >
334
+ <a class="sidenav-item-link" href="collapse.html">
335
+ <span class="nav-text">Collapse</span>
336
+
337
+ </a>
338
+ </li>
339
+
340
+
341
+
342
+
343
+
344
+
345
+ <li >
346
+ <a class="sidenav-item-link" href="editor.html">
347
+ <span class="nav-text">Editor</span>
348
+
349
+ </a>
350
+ </li>
351
+
352
+
353
+
354
+
355
+
356
+
357
+ <li >
358
+ <a class="sidenav-item-link" href="list-group.html">
359
+ <span class="nav-text">List Group</span>
360
+
361
+ </a>
362
+ </li>
363
+
364
+
365
+
366
+
367
+
368
+
369
+ <li >
370
+ <a class="sidenav-item-link" href="modal.html">
371
+ <span class="nav-text">Modal</span>
372
+
373
+ </a>
374
+ </li>
375
+
376
+
377
+
378
+
379
+
380
+
381
+ <li >
382
+ <a class="sidenav-item-link" href="pagination.html">
383
+ <span class="nav-text">Pagination</span>
384
+
385
+ </a>
386
+ </li>
387
+
388
+
389
+
390
+
391
+
392
+
393
+ <li >
394
+ <a class="sidenav-item-link" href="popover-tooltip.html">
395
+ <span class="nav-text">Popover & Tooltip</span>
396
+
397
+ </a>
398
+ </li>
399
+
400
+
401
+
402
+
403
+
404
+
405
+ <li >
406
+ <a class="sidenav-item-link" href="progress-bar.html">
407
+ <span class="nav-text">Progress Bar</span>
408
+
409
+ </a>
410
+ </li>
411
+
412
+
413
+
414
+
415
+
416
+
417
+ <li >
418
+ <a class="sidenav-item-link" href="spinner.html">
419
+ <span class="nav-text">Spinner</span>
420
+
421
+ </a>
422
+ </li>
423
+
424
+
425
+
426
+
427
+
428
+
429
+ <li >
430
+ <a class="sidenav-item-link" href="switches.html">
431
+ <span class="nav-text">Switches</span>
432
+
433
+ </a>
434
+ </li>
435
+
436
+
437
+
438
+
439
+
440
+ <li class="has-sub" >
441
+ <a class="sidenav-item-link" href="javascript:void(0)" data-toggle="collapse" data-target="#tables"
442
+ aria-expanded="false" aria-controls="tables">
443
+ <span class="nav-text">Tables</span> <b class="caret"></b>
444
+ </a>
445
+ <ul class="collapse" id="tables">
446
+ <div class="sub-menu">
447
+
448
+ <li >
449
+ <a href="bootstarp-tables.html">Bootstrap Tables</a>
450
+ </li>
451
+
452
+ <li >
453
+ <a href="data-tables.html">Data Tables</a>
454
+ </li>
455
+
456
+ </div>
457
+ </ul>
458
+ </li>
459
+
460
+
461
+
462
+
463
+
464
+ <li >
465
+ <a class="sidenav-item-link" href="tab.html">
466
+ <span class="nav-text">Tab</span>
467
+
468
+ </a>
469
+ </li>
470
+
471
+
472
+
473
+
474
+
475
+
476
+ <li >
477
+ <a class="sidenav-item-link" href="toaster.html">
478
+ <span class="nav-text">Toaster</span>
479
+
480
+ </a>
481
+ </li>
482
+
483
+
484
+
485
+
486
+
487
+ <li class="has-sub" >
488
+ <a class="sidenav-item-link" href="javascript:void(0)" data-toggle="collapse" data-target="#icons"
489
+ aria-expanded="false" aria-controls="icons">
490
+ <span class="nav-text">Icons</span> <b class="caret"></b>
491
+ </a>
492
+ <ul class="collapse" id="icons">
493
+ <div class="sub-menu">
494
+
495
+ <li >
496
+ <a href="material-icons.html">Material Icon</a>
497
+ </li>
498
+
499
+ <li >
500
+ <a href="flag-icons.html">Flag Icon</a>
501
+ </li>
502
+
503
+ </div>
504
+ </ul>
505
+ </li>
506
+
507
+
508
+
509
+
510
+ <li class="has-sub" >
511
+ <a class="sidenav-item-link" href="javascript:void(0)" data-toggle="collapse" data-target="#forms"
512
+ aria-expanded="false" aria-controls="forms">
513
+ <span class="nav-text">Forms</span> <b class="caret"></b>
514
+ </a>
515
+ <ul class="collapse" id="forms">
516
+ <div class="sub-menu">
517
+
518
+ <li >
519
+ <a href="basic-input.html">Basic Input</a>
520
+ </li>
521
+
522
+ <li >
523
+ <a href="input-group.html">Input Group</a>
524
+ </li>
525
+
526
+ <li >
527
+ <a href="checkbox-radio.html">Checkbox & Radio</a>
528
+ </li>
529
+
530
+ <li >
531
+ <a href="form-validation.html">Form Validation</a>
532
+ </li>
533
+
534
+ <li >
535
+ <a href="form-advance.html">Form Advance</a>
536
+ </li>
537
+
538
+ </div>
539
+ </ul>
540
+ </li>
541
+
542
+
543
+
544
+
545
+ <li class="has-sub" >
546
+ <a class="sidenav-item-link" href="javascript:void(0)" data-toggle="collapse" data-target="#maps"
547
+ aria-expanded="false" aria-controls="maps">
548
+ <span class="nav-text">Maps</span> <b class="caret"></b>
549
+ </a>
550
+ <ul class="collapse" id="maps">
551
+ <div class="sub-menu">
552
+
553
+ <li >
554
+ <a href="google-maps.html">Google Map</a>
555
+ </li>
556
+
557
+ <li >
558
+ <a href="vector-maps.html">Vector Map</a>
559
+ </li>
560
+
561
+ </div>
562
+ </ul>
563
+ </li>
564
+
565
+
566
+
567
+
568
+ <li class="has-sub" >
569
+ <a class="sidenav-item-link" href="javascript:void(0)" data-toggle="collapse" data-target="#widgets"
570
+ aria-expanded="false" aria-controls="widgets">
571
+ <span class="nav-text">Widgets</span> <b class="caret"></b>
572
+ </a>
573
+ <ul class="collapse" id="widgets">
574
+ <div class="sub-menu">
575
+
576
+ <li >
577
+ <a href="widgets-general.html">General Widget</a>
578
+ </li>
579
+
580
+ <li >
581
+ <a href="widgets-chart.html">Chart Widget</a>
582
+ </li>
583
+
584
+ </div>
585
+ </ul>
586
+ </li>
587
+
588
+
589
+
590
+ </div>
591
+ </ul>
592
+ </li>
593
+
594
+
595
+
596
+
597
+
598
+ <li class="has-sub" >
599
+ <a class="sidenav-item-link" href="javascript:void(0)" data-toggle="collapse" data-target="#charts"
600
+ aria-expanded="false" aria-controls="charts">
601
+ <i class="mdi mdi-chart-pie"></i>
602
+ <span class="nav-text">Charts</span> <b class="caret"></b>
603
+ </a>
604
+ <ul class="collapse" id="charts"
605
+ data-parent="#sidebar-menu">
606
+ <div class="sub-menu">
607
+
608
+
609
+
610
+ <li >
611
+ <a class="sidenav-item-link" href="apex-charts.html">
612
+ <span class="nav-text">Apex Charts</span>
613
+
614
+ </a>
615
+ </li>
616
+
617
+
618
+
619
+
620
+ </div>
621
+ </ul>
622
+ </li>
623
+
624
+
625
+
626
+
627
+
628
+ <li class="section-title">
629
+ Pages
630
+ </li>
631
+
632
+
633
+
634
+
635
+
636
+ <li class="has-sub" >
637
+ <a class="sidenav-item-link" href="javascript:void(0)" data-toggle="collapse" data-target="#users"
638
+ aria-expanded="false" aria-controls="users">
639
+ <i class="mdi mdi-image-filter-none"></i>
640
+ <span class="nav-text">User</span> <b class="caret"></b>
641
+ </a>
642
+ <ul class="collapse" id="users"
643
+ data-parent="#sidebar-menu">
644
+ <div class="sub-menu">
645
+
646
+
647
+
648
+ <li >
649
+ <a class="sidenav-item-link" href="user-profile.html">
650
+ <span class="nav-text">User Profile</span>
651
+
652
+ </a>
653
+ </li>
654
+
655
+
656
+
657
+
658
+
659
+
660
+ <li >
661
+ <a class="sidenav-item-link" href="user-activities.html">
662
+ <span class="nav-text">User Activities</span>
663
+
664
+ </a>
665
+ </li>
666
+
667
+
668
+
669
+
670
+
671
+
672
+ <li >
673
+ <a class="sidenav-item-link" href="user-profile-settings.html">
674
+ <span class="nav-text">User Profile Settings</span>
675
+
676
+ </a>
677
+ </li>
678
+
679
+
680
+
681
+
682
+
683
+
684
+ <li >
685
+ <a class="sidenav-item-link" href="user-account-settings.html">
686
+ <span class="nav-text">User Account Settings</span>
687
+
688
+ </a>
689
+ </li>
690
+
691
+
692
+
693
+
694
+
695
+
696
+ <li >
697
+ <a class="sidenav-item-link" href="user-planing-settings.html">
698
+ <span class="nav-text">User Planing Settings</span>
699
+
700
+ </a>
701
+ </li>
702
+
703
+
704
+
705
+
706
+
707
+
708
+ <li >
709
+ <a class="sidenav-item-link" href="user-billing.html">
710
+ <span class="nav-text">User billing</span>
711
+
712
+ </a>
713
+ </li>
714
+
715
+
716
+
717
+
718
+
719
+
720
+ <li >
721
+ <a class="sidenav-item-link" href="user-notify-settings.html">
722
+ <span class="nav-text">User Notify Settings</span>
723
+
724
+ </a>
725
+ </li>
726
+
727
+
728
+
729
+
730
+ </div>
731
+ </ul>
732
+ </li>
733
+
734
+
735
+
736
+
737
+
738
+ <li class="has-sub" >
739
+ <a class="sidenav-item-link" href="javascript:void(0)" data-toggle="collapse" data-target="#authentication"
740
+ aria-expanded="false" aria-controls="authentication">
741
+ <i class="mdi mdi-account"></i>
742
+ <span class="nav-text">Authentication</span> <b class="caret"></b>
743
+ </a>
744
+ <ul class="collapse" id="authentication"
745
+ data-parent="#sidebar-menu">
746
+ <div class="sub-menu">
747
+
748
+
749
+
750
+ <li >
751
+ <a class="sidenav-item-link" href="sign-in.html">
752
+ <span class="nav-text">Sign In</span>
753
+
754
+ </a>
755
+ </li>
756
+
757
+
758
+
759
+
760
+
761
+
762
+ <li >
763
+ <a class="sidenav-item-link" href="sign-up.html">
764
+ <span class="nav-text">Sign Up</span>
765
+
766
+ </a>
767
+ </li>
768
+
769
+
770
+
771
+
772
+
773
+
774
+ <li >
775
+ <a class="sidenav-item-link" href="reset-password.html">
776
+ <span class="nav-text">Reset Password</span>
777
+
778
+ </a>
779
+ </li>
780
+
781
+
782
+
783
+
784
+ </div>
785
+ </ul>
786
+ </li>
787
+
788
+
789
+
790
+
791
+
792
+ <li class="has-sub" >
793
+ <a class="sidenav-item-link" href="javascript:void(0)" data-toggle="collapse" data-target="#other-page"
794
+ aria-expanded="false" aria-controls="other-page">
795
+ <i class="mdi mdi-file-multiple"></i>
796
+ <span class="nav-text">Other pages</span> <b class="caret"></b>
797
+ </a>
798
+ <ul class="collapse" id="other-page"
799
+ data-parent="#sidebar-menu">
800
+ <div class="sub-menu">
801
+
802
+
803
+
804
+ <li >
805
+ <a class="sidenav-item-link" href="invoice.html">
806
+ <span class="nav-text">Invoice</span>
807
+
808
+ </a>
809
+ </li>
810
+
811
+
812
+
813
+
814
+
815
+
816
+ <li >
817
+ <a class="sidenav-item-link" href="404.html">
818
+ <span class="nav-text">404 page</span>
819
+
820
+ </a>
821
+ </li>
822
+
823
+
824
+
825
+
826
+
827
+
828
+ <li >
829
+ <a class="sidenav-item-link" href="page-comingsoon.html">
830
+ <span class="nav-text">Coming Soon</span>
831
+
832
+ </a>
833
+ </li>
834
+
835
+
836
+
837
+
838
+
839
+
840
+ <li >
841
+ <a class="sidenav-item-link" href="page-maintenance.html">
842
+ <span class="nav-text">Maintenance</span>
843
+
844
+ </a>
845
+ </li>
846
+
847
+
848
+
849
+
850
+ </div>
851
+ </ul>
852
+ </li>
853
+
854
+
855
+
856
+
857
+
858
+ <li class="section-title">
859
+ Documentation
860
+ </li>
861
+
862
+
863
+
864
+
865
+
866
+ <li
867
+ >
868
+ <a class="sidenav-item-link" href="getting-started.html">
869
+ <i class="mdi mdi-airplane"></i>
870
+ <span class="nav-text">Getting Started</span>
871
+ </a>
872
+ </li>
873
+
874
+
875
+
876
+
877
+
878
+ <li class="has-sub" >
879
+ <a class="sidenav-item-link" href="javascript:void(0)" data-toggle="collapse" data-target="#customization"
880
+ aria-expanded="false" aria-controls="customization">
881
+ <i class="mdi mdi-square-edit-outline"></i>
882
+ <span class="nav-text">Customization</span> <b class="caret"></b>
883
+ </a>
884
+ <ul class="collapse" id="customization"
885
+ data-parent="#sidebar-menu">
886
+ <div class="sub-menu">
887
+
888
+
889
+
890
+ <li >
891
+ <a class="sidenav-item-link" href="navbar-customization.html">
892
+ <span class="nav-text">Navbar</span>
893
+
894
+ </a>
895
+ </li>
896
+
897
+
898
+
899
+
900
+
901
+
902
+ <li >
903
+ <a class="sidenav-item-link" href="sidebar-customization.html">
904
+ <span class="nav-text">Sidebar</span>
905
+
906
+ </a>
907
+ </li>
908
+
909
+
910
+
911
+
912
+
913
+
914
+ <li >
915
+ <a class="sidenav-item-link" href="styling.html">
916
+ <span class="nav-text">Styling</span>
917
+
918
+ </a>
919
+ </li>
920
+
921
+
922
+
923
+
924
+ </div>
925
+ </ul>
926
+ </li>
927
+
928
+
929
+
930
+ </ul>
931
+
932
+ </div>
933
+
934
+ <div class="sidebar-footer">
935
+ <div class="sidebar-footer-content">
936
+ <ul class="d-flex">
937
+ <li>
938
+ <a href="user-account-settings.html" data-toggle="tooltip" title="Profile settings"><i class="mdi mdi-settings"></i></a></li>
939
+ <li>
940
+ <a href="#" data-toggle="tooltip" title="No chat messages"><i class="mdi mdi-chat-processing"></i></a>
941
+ </li>
942
+ </ul>
943
+ </div>
944
+ </div>
945
+ </div>
946
+ </aside>
947
+
948
+
949
+
950
+ <!-- ====================================
951
+ ——— PAGE WRAPPER
952
+ ===================================== -->
953
+ <div class="page-wrapper">
954
+
955
+ <!-- Header -->
956
+ <header class="main-header" id="header">
957
+ <nav class="navbar navbar-expand-lg navbar-light" id="navbar">
958
+ <!-- Sidebar toggle button -->
959
+ <button id="sidebar-toggler" class="sidebar-toggle">
960
+ <span class="sr-only">Toggle navigation</span>
961
+ </button>
962
+
963
+ <span class="page-title">Badges</span>
964
+
965
+ <div class="navbar-right ">
966
+
967
+ <!-- search form -->
968
+ <div class="search-form">
969
+ <form action="index.html" method="get">
970
+ <div class="input-group input-group-sm" id="input-group-search">
971
+ <input type="text" autocomplete="off" name="query" id="search-input" class="form-control" placeholder="Search..." />
972
+ <div class="input-group-append">
973
+ <button class="btn" type="button">/</button>
974
+ </div>
975
+ </div>
976
+ </form>
977
+ <ul class="dropdown-menu dropdown-menu-search">
978
+
979
+ <li class="nav-item">
980
+ <a class="nav-link" href="index.html">Morbi leo risus</a>
981
+ </li>
982
+ <li class="nav-item">
983
+ <a class="nav-link" href="index.html">Dapibus ac facilisis in</a>
984
+ </li>
985
+ <li class="nav-item">
986
+ <a class="nav-link" href="index.html">Porta ac consectetur ac</a>
987
+ </li>
988
+ <li class="nav-item">
989
+ <a class="nav-link" href="index.html">Vestibulum at eros</a>
990
+ </li>
991
+
992
+ </ul>
993
+
994
+ </div>
995
+
996
+ <ul class="nav navbar-nav">
997
+ <!-- Offcanvas -->
998
+ <li class="custom-dropdown">
999
+ <a class="offcanvas-toggler active custom-dropdown-toggler" data-offcanvas="contact-off" href="javascript:" >
1000
+ <i class="mdi mdi-contacts icon"></i>
1001
+ </a>
1002
+ </li>
1003
+ <li class="custom-dropdown">
1004
+ <button class="notify-toggler custom-dropdown-toggler">
1005
+ <i class="mdi mdi-bell-outline icon"></i>
1006
+ <span class="badge badge-xs rounded-circle">21</span>
1007
+ </button>
1008
+ <div class="dropdown-notify">
1009
+
1010
+ <header>
1011
+ <div class="nav nav-underline" id="nav-tab" role="tablist">
1012
+ <a class="nav-item nav-link active" id="all-tabs" data-toggle="tab" href="#all" role="tab" aria-controls="nav-home"
1013
+ aria-selected="true">All (5)</a>
1014
+ <a class="nav-item nav-link" id="message-tab" data-toggle="tab" href="#message" role="tab" aria-controls="nav-profile"
1015
+ aria-selected="false">Msgs (4)</a>
1016
+ <a class="nav-item nav-link" id="other-tab" data-toggle="tab" href="#other" role="tab" aria-controls="nav-contact"
1017
+ aria-selected="false">Others (3)</a>
1018
+ </div>
1019
+ </header>
1020
+
1021
+ <div class="" data-simplebar style="height: 325px;">
1022
+ <div class="tab-content" id="myTabContent">
1023
+
1024
+ <div class="tab-pane fade show active" id="all" role="tabpanel" aria-labelledby="all-tabs">
1025
+
1026
+ <div class="media media-sm bg-warning-10 p-4 mb-0">
1027
+ <div class="media-sm-wrapper">
1028
+ <a href="user-profile.html">
1029
+ <img src="images/user/user-sm-02.jpg" alt="User Image">
1030
+ </a>
1031
+ </div>
1032
+ <div class="media-body">
1033
+ <a href="user-profile.html">
1034
+ <span class="title mb-0">John Doe</span>
1035
+ <span class="discribe">Extremity sweetness difficult behaviour he of. On disposal of as landlord horrible. Afraid at highly months do things on at.</span>
1036
+ <span class="time">
1037
+ <time>Just now</time>...
1038
+ </span>
1039
+ </a>
1040
+ </div>
1041
+ </div>
1042
+
1043
+ <div class="media media-sm p-4 bg-light mb-0">
1044
+ <div class="media-sm-wrapper bg-primary">
1045
+ <a href="user-profile.html">
1046
+ <i class="mdi mdi-calendar-check-outline"></i>
1047
+ </a>
1048
+ </div>
1049
+ <div class="media-body">
1050
+ <a href="user-profile.html">
1051
+ <span class="title mb-0">New event added</span>
1052
+ <span class="discribe">1/3/2014 (1pm - 2pm)</span>
1053
+ <span class="time">
1054
+ <time>10 min ago...</time>...
1055
+ </span>
1056
+ </a>
1057
+ </div>
1058
+ </div>
1059
+
1060
+ <div class="media media-sm p-4 mb-0">
1061
+ <div class="media-sm-wrapper">
1062
+ <a href="user-profile.html">
1063
+ <img src="images/user/user-sm-03.jpg" alt="User Image">
1064
+ </a>
1065
+ </div>
1066
+ <div class="media-body">
1067
+ <a href="user-profile.html">
1068
+ <span class="title mb-0">Sagge Hudson</span>
1069
+ <span class="discribe">On disposal of as landlord Afraid at highly months do things on at.</span>
1070
+ <span class="time">
1071
+ <time>1 hrs ago</time>...
1072
+ </span>
1073
+ </a>
1074
+ </div>
1075
+ </div>
1076
+
1077
+ <div class="media media-sm p-4 mb-0">
1078
+ <div class="media-sm-wrapper bg-info-dark">
1079
+ <a href="user-profile.html">
1080
+ <i class="mdi mdi-account-multiple-check"></i>
1081
+ </a>
1082
+ </div>
1083
+ <div class="media-body">
1084
+ <a href="user-profile.html">
1085
+ <span class="title mb-0">Add request</span>
1086
+ <span class="discribe">Add Dany Jones as your contact.</span>
1087
+ <div class="buttons">
1088
+ <a href="#" class="btn btn-sm btn-success shadow-none text-white">accept</a>
1089
+ <a href="#" class="btn btn-sm shadow-none">delete</a>
1090
+ </div>
1091
+ <span class="time">
1092
+ <time>6 hrs ago</time>...
1093
+ </span>
1094
+ </a>
1095
+ </div>
1096
+ </div>
1097
+
1098
+ <div class="media media-sm p-4 mb-0">
1099
+ <div class="media-sm-wrapper bg-info">
1100
+ <a href="user-profile.html">
1101
+ <i class="mdi mdi-playlist-check"></i>
1102
+ </a>
1103
+ </div>
1104
+ <div class="media-body">
1105
+ <a href="user-profile.html">
1106
+ <span class="title mb-0">Task complete</span>
1107
+ <span class="discribe">Afraid at highly months do things on at.</span>
1108
+ <span class="time">
1109
+ <time>1 hrs ago</time>...
1110
+ </span>
1111
+ </a>
1112
+ </div>
1113
+ </div>
1114
+
1115
+ </div>
1116
+
1117
+ <div class="tab-pane fade" id="message" role="tabpanel" aria-labelledby="message-tab">
1118
+
1119
+ <div class="media media-sm p-4 mb-0">
1120
+ <div class="media-sm-wrapper">
1121
+ <a href="user-profile.html">
1122
+ <img src="images/user/user-sm-01.jpg" alt="User Image">
1123
+ </a>
1124
+ </div>
1125
+ <div class="media-body">
1126
+ <a href="user-profile.html">
1127
+ <span class="title mb-0">Selena Wagner</span>
1128
+ <span class="discribe">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</span>
1129
+ <span class="time">
1130
+ <time>15 min ago</time>...
1131
+ </span>
1132
+ </a>
1133
+ </div>
1134
+ </div>
1135
+
1136
+ <div class="media media-sm p-4 mb-0">
1137
+ <div class="media-sm-wrapper">
1138
+ <a href="user-profile.html">
1139
+ <img src="images/user/user-sm-03.jpg" alt="User Image">
1140
+ </a>
1141
+ </div>
1142
+ <div class="media-body">
1143
+ <a href="user-profile.html">
1144
+ <span class="title mb-0">Sagge Hudson</span>
1145
+ <span class="discribe">On disposal of as landlord Afraid at highly months do things on at.</span>
1146
+ <span class="time">
1147
+ <time>1 hrs ago</time>...
1148
+ </span>
1149
+ </a>
1150
+ </div>
1151
+ </div>
1152
+
1153
+ <div class="media media-sm bg-warning-10 p-4 mb-0">
1154
+ <div class="media-sm-wrapper">
1155
+ <a href="user-profile.html">
1156
+ <img src="images/user/user-sm-02.jpg" alt="User Image">
1157
+ </a>
1158
+ </div>
1159
+ <div class="media-body">
1160
+ <a href="user-profile.html">
1161
+ <span class="title mb-0">John Doe</span>
1162
+ <span class="discribe">Extremity sweetness difficult behaviour he of. On disposal of as landlord horrible. Afraid
1163
+ at highly months do things on at.</span>
1164
+ <span class="time">
1165
+ <time>Just now</time>...
1166
+ </span>
1167
+ </a>
1168
+ </div>
1169
+ </div>
1170
+
1171
+ <div class="media media-sm p-4 mb-0">
1172
+ <div class="media-sm-wrapper">
1173
+ <a href="user-profile.html">
1174
+ <img src="images/user/user-sm-04.jpg" alt="User Image">
1175
+ </a>
1176
+ </div>
1177
+ <div class="media-body">
1178
+ <a href="user-profile.html">
1179
+ <span class="title mb-0">Albrecht Straub</span>
1180
+ <span class="discribe"> Beatae quia natus assumenda laboriosam, nisi perferendis aliquid consectetur expedita non tenetur.</span>
1181
+ <span class="time">
1182
+ <time>Just now</time>...
1183
+ </span>
1184
+ </a>
1185
+ </div>
1186
+ </div>
1187
+
1188
+ </div>
1189
+ <div class="tab-pane fade" id="other" role="tabpanel" aria-labelledby="contact-tab">
1190
+
1191
+ <div class="media media-sm p-4 bg-light mb-0">
1192
+ <div class="media-sm-wrapper bg-primary">
1193
+ <a href="user-profile.html">
1194
+ <i class="mdi mdi-calendar-check-outline"></i>
1195
+ </a>
1196
+ </div>
1197
+ <div class="media-body">
1198
+ <a href="user-profile.html">
1199
+ <span class="title mb-0">New event added</span>
1200
+ <span class="discribe">1/3/2014 (1pm - 2pm)</span>
1201
+ <span class="time">
1202
+ <time>10 min ago...</time>...
1203
+ </span>
1204
+ </a>
1205
+ </div>
1206
+ </div>
1207
+
1208
+ <div class="media media-sm p-4 mb-0">
1209
+ <div class="media-sm-wrapper bg-info-dark">
1210
+ <a href="user-profile.html">
1211
+ <i class="mdi mdi-account-multiple-check"></i>
1212
+ </a>
1213
+ </div>
1214
+ <div class="media-body">
1215
+ <a href="user-profile.html">
1216
+ <span class="title mb-0">Add request</span>
1217
+ <span class="discribe">Add Dany Jones as your contact.</span>
1218
+ <div class="buttons">
1219
+ <a href="#" class="btn btn-sm btn-success shadow-none text-white">accept</a>
1220
+ <a href="#" class="btn btn-sm shadow-none">delete</a>
1221
+ </div>
1222
+ <span class="time">
1223
+ <time>6 hrs ago</time>...
1224
+ </span>
1225
+ </a>
1226
+ </div>
1227
+ </div>
1228
+
1229
+ <div class="media media-sm p-4 mb-0">
1230
+ <div class="media-sm-wrapper bg-info">
1231
+ <a href="user-profile.html">
1232
+ <i class="mdi mdi-playlist-check"></i>
1233
+ </a>
1234
+ </div>
1235
+ <div class="media-body">
1236
+ <a href="user-profile.html">
1237
+ <span class="title mb-0">Task complete</span>
1238
+ <span class="discribe">Afraid at highly months do things on at.</span>
1239
+ <span class="time">
1240
+ <time>1 hrs ago</time>...
1241
+ </span>
1242
+ </a>
1243
+ </div>
1244
+ </div>
1245
+
1246
+ </div>
1247
+ </div>
1248
+ </div>
1249
+
1250
+ <footer class="border-top dropdown-notify-footer">
1251
+ <div class="d-flex justify-content-between align-items-center py-2 px-4">
1252
+ <span>Last updated 3 min ago</span>
1253
+ <a id="refress-button" href="javascript:" class="btn mdi mdi-cached btn-refress"></a>
1254
+ </div>
1255
+ </footer>
1256
+ </div>
1257
+ </li>
1258
+ <!-- User Account -->
1259
+ <li class="dropdown user-menu">
1260
+ <button class="dropdown-toggle nav-link" data-toggle="dropdown">
1261
+ <img src="images/user/user-xs-01.jpg" class="user-image rounded-circle" alt="User Image" />
1262
+ <span class="d-none d-lg-inline-block">John Doe</span>
1263
+ </button>
1264
+ <ul class="dropdown-menu dropdown-menu-right">
1265
+ <li>
1266
+ <a class="dropdown-link-item" href="user-profile.html">
1267
+ <i class="mdi mdi-account-outline"></i>
1268
+ <span class="nav-text">My Profile</span>
1269
+ </a>
1270
+ </li>
1271
+ <li>
1272
+ <a class="dropdown-link-item" href="email-inbox.html">
1273
+ <i class="mdi mdi-email-outline"></i>
1274
+ <span class="nav-text">Message</span>
1275
+ <span class="badge badge-pill badge-primary">24</span>
1276
+ </a>
1277
+ </li>
1278
+ <li>
1279
+ <a class="dropdown-link-item" href="user-activities.html">
1280
+ <i class="mdi mdi-diamond-stone"></i>
1281
+ <span class="nav-text">Activitise</span></a>
1282
+ </li>
1283
+ <li>
1284
+ <a class="dropdown-link-item" href="user-account-settings.html">
1285
+ <i class="mdi mdi-settings"></i>
1286
+ <span class="nav-text">Account Setting</span>
1287
+ </a>
1288
+ </li>
1289
+
1290
+ <li class="dropdown-footer">
1291
+ <a class="dropdown-link-item" href="sign-in.html"> <i class="mdi mdi-logout"></i> Log Out </a>
1292
+ </li>
1293
+ </ul>
1294
+ </li>
1295
+ </ul>
1296
+ </div>
1297
+ </nav>
1298
+
1299
+
1300
+ </header>
1301
+
1302
+ <!-- ====================================
1303
+ ——— CONTENT WRAPPER
1304
+ ===================================== -->
1305
+ <div class="content-wrapper">
1306
+ <div class="content"> <!-- For Components documentaion -->
1307
+ <div class="card card-default">
1308
+ <div class="px-6 py-4">
1309
+ <p>Mono provides a variety of <span class="text-secondary text-capitalize">Bootstrap Badge</span> components with a little customization that suits its design standards. For more information, please see the official <a
1310
+ class="font-weight-bold" href="https://getbootstrap.com/docs/4.3/components/badge/" target="_blank"> Bootstrap
1311
+ documentation.</a></p>
1312
+ </div>
1313
+ </div>
1314
+
1315
+ <!-- Badge -->
1316
+ <div class="card card-default">
1317
+ <div class="card-header">
1318
+ <h2>Badge</h2>
1319
+
1320
+ <a class="btn mdi mdi-code-tags" data-toggle="collapse" href="#collapse-badge-1" role="button"
1321
+ aria-expanded="false" aria-controls="collapse-badge-1"> </a>
1322
+
1323
+
1324
+ </div>
1325
+ <div class="card-body">
1326
+ <div class="collapse" id="collapse-badge-1">
1327
+ <pre class="language-html mb-4">
1328
+ <code >
1329
+ &lt;h1&gt;Example heading &lt;span class="badge badge-primary badge-pill"&gt;New&lt;/span&gt;&lt;/h1&gt;
1330
+
1331
+ &lt;h2&gt;Example heading &lt;span class="badge badge-primary badge-pill"&gt;New&lt;/span&gt;&lt;/h2&gt;
1332
+
1333
+ &lt;h3&gt;Example heading &lt;span class="badge badge-primary badge-pill"&gt;New&lt;/span&gt;&lt;/h3&gt;
1334
+
1335
+ &lt;h4&gt;Example heading &lt;span class="badge badge-primary badge-pill"&gt;New&lt;/span&gt;&lt;/h4&gt;
1336
+
1337
+ &lt;h5&gt;Example heading &lt;span class="badge badge-primary badge-pill"&gt;New&lt;/span&gt;&lt;/h5&gt;
1338
+
1339
+ &lt;h6&gt;Example heading &lt;span class="badge badge-primary badge-pill"&gt;New&lt;/span&gt;&lt;/h6&gt;
1340
+ </code>
1341
+ </pre>
1342
+ </div>
1343
+ <div>
1344
+ <h1 class="mb-3">Example heading <span class="badge badge-primary badge-pill">New</span></h1>
1345
+ <h2 class="mb-3">Example heading <span class="badge badge-primary badge-pill">New</span></h2>
1346
+ <h3 class="mb-3">Example heading <span class="badge badge-primary badge-pill">New</span></h3>
1347
+ <h4 class="mb-3">Example heading <span class="badge badge-primary badge-pill">New</span></h4>
1348
+ <h5 class="mb-3">Example heading <span class="badge badge-primary badge-pill">New</span></h5>
1349
+ <h6 class="mb-3">Example heading <span class="badge badge-primary badge-pill">New</span></h6>
1350
+ </div>
1351
+ </div>
1352
+ </div>
1353
+
1354
+ <!-- Contextual Variations -->
1355
+ <div class="card card-default">
1356
+ <div class="card-header">
1357
+ <h2>Contextual Variations</h2>
1358
+
1359
+ <a class="btn mdi mdi-code-tags" data-toggle="collapse" href="#collapse-badge-2" role="button"
1360
+ aria-expanded="false" aria-controls="collapse-badge-2"> </a>
1361
+
1362
+
1363
+ </div>
1364
+ <div class="card-body">
1365
+ <div class="collapse" id="collapse-badge-2">
1366
+ <pre class="language-html mb-4">
1367
+ <code >
1368
+ &lt;span class="badge badge-primary"&gt;Primary&lt;/span&gt;
1369
+
1370
+ &lt;span class="badge badge-secondary"&gt;Secondary&lt;/span&gt;
1371
+
1372
+ &lt;span class="badge badge-success"&gt;Success&lt;/span&gt;
1373
+
1374
+ &lt;span class="badge badge-danger"&gt;Danger&lt;/span&gt;
1375
+
1376
+ &lt;span class="badge badge-warning"&gt;Warning&lt;/span&gt;
1377
+
1378
+ &lt;span class="badge badge-info"&gt;Info&lt;/span&gt;
1379
+
1380
+ &lt;span class="badge badge-light"&gt;Light&lt;/span&gt;
1381
+
1382
+ &lt;span class="badge badge-dark"&gt;Dark&lt;/span&gt;
1383
+
1384
+ </code>
1385
+ </pre>
1386
+ </div>
1387
+ <div>
1388
+ <span class="badge badge-primary">Primary</span>
1389
+ <span class="badge badge-secondary">Secondary</span>
1390
+ <span class="badge badge-success">Success</span>
1391
+ <span class="badge badge-danger">Danger</span>
1392
+ <span class="badge badge-warning">Warning</span>
1393
+ <span class="badge badge-info">Info</span>
1394
+ <span class="badge badge-light">Light</span>
1395
+ <span class="badge badge-dark">Dark</span>
1396
+ </div>
1397
+ </div>
1398
+ </div>
1399
+
1400
+ <!-- Pill badges -->
1401
+ <div class="card card-default">
1402
+ <div class="card-header">
1403
+ <h2>Pill badges With Link</h2>
1404
+
1405
+ <a class="btn mdi mdi-code-tags" data-toggle="collapse" href="#collapse-badge-3" role="button"
1406
+ aria-expanded="false" aria-controls="collapse-badge-3"> </a>
1407
+
1408
+
1409
+ </div>
1410
+ <div class="card-body">
1411
+ <div class="collapse" id="collapse-badge-3">
1412
+ <pre class="language-html mb-4">
1413
+ <code >
1414
+ &lt;a href="#" class="badge badge-pill badge-primary"&gt;Primary&lt;/a&gt;
1415
+
1416
+ &lt;a href="#" class="badge badge-pill badge-secondary"&gt;Secondary&lt;/a&gt;
1417
+
1418
+ &lt;a href="#" class="badge badge-pill badge-success"&gt;Success&lt;/a&gt;
1419
+
1420
+ &lt;a href="#" class="badge badge-pill badge-danger"&gt;Danger&lt;/a&gt;
1421
+
1422
+ &lt;a href="#" class="badge badge-pill badge-warning"&gt;Warning&lt;/a&gt;
1423
+
1424
+ &lt;a href="#" class="badge badge-pill badge-info"&gt;Info&lt;/a&gt;
1425
+
1426
+ &lt;a href="#" class="badge badge-pill badge-light"&gt;Light&lt;/a&gt;
1427
+
1428
+ &lt;a href="#" class="badge badge-pill badge-dark"&gt;Dark&lt;/a&gt;
1429
+
1430
+ </code>
1431
+ </pre>
1432
+ </div>
1433
+ <div>
1434
+ <a href="#" class="badge badge-pill badge-primary">Primary</a>
1435
+ <a href="#" class="badge badge-pill badge-secondary">Secondary</a>
1436
+ <a href="#" class="badge badge-pill badge-success">Success</a>
1437
+ <a href="#" class="badge badge-pill badge-danger">Danger</a>
1438
+ <a href="#" class="badge badge-pill badge-warning">Warning</a>
1439
+ <a href="#" class="badge badge-pill badge-info">Info</a>
1440
+ <a href="#" class="badge badge-pill badge-light">Light</a>
1441
+ <a href="#" class="badge badge-pill badge-dark">Dark</a>
1442
+ </div>
1443
+ </div>
1444
+ </div>
1445
+
1446
+ <!-- Square Badges -->
1447
+ <div class="card card-default">
1448
+ <div class="card-header">
1449
+ <h2>Square Badges</h2>
1450
+
1451
+ <a class="btn mdi mdi-code-tags" data-toggle="collapse" href="#collapse-badge-4" role="button"
1452
+ aria-expanded="false" aria-controls="collapse-badge-4"> </a>
1453
+
1454
+
1455
+ </div>
1456
+ <div class="card-body">
1457
+ <div class="collapse" id="collapse-badge-4">
1458
+ <pre class="language-html mb-4">
1459
+ <code >
1460
+ &lt;span class="badge badge-square badge-primary"&gt;Primary&lt;/span&gt;
1461
+
1462
+ &lt;span class="badge badge-square badge-secondary"&gt;Secondary&lt;/span&gt;
1463
+
1464
+ &lt;span class="badge badge-square badge-success"&gt;Success&lt;/span&gt;
1465
+
1466
+ &lt;span class="badge badge-square badge-danger"&gt;Danger&lt;/span&gt;
1467
+
1468
+ &lt;span class="badge badge-square badge-warning"&gt;Warning&lt;/span&gt;
1469
+
1470
+ &lt;span class="badge badge-square badge-info"&gt;Info&lt;/span&gt;
1471
+
1472
+ &lt;span class="badge badge-square badge-light"&gt;Light&lt;/span&gt;
1473
+
1474
+ &lt;span class="badge badge-square badge-dark"&gt;Dark&lt;/span&gt;
1475
+
1476
+ </code>
1477
+ </pre>
1478
+ </div>
1479
+ <div>
1480
+ <span class="badge badge-square badge-primary">Primary</span>
1481
+ <span class="badge badge-square badge-secondary">Secondary</span>
1482
+ <span class="badge badge-square badge-success">Success</span>
1483
+ <span class="badge badge-square badge-danger">Danger</span>
1484
+ <span class="badge badge-square badge-warning">Warning</span>
1485
+ <span class="badge badge-square badge-info">Info</span>
1486
+ <span class="badge badge-square badge-light">Light</span>
1487
+ <span class="badge badge-square badge-dark">Dark</span>
1488
+ </div>
1489
+ </div>
1490
+ </div>
1491
+
1492
+ <!--Outline Badges -->
1493
+ <div class="card card-default">
1494
+ <div class="card-header">
1495
+ <h2>Outline Badges</h2>
1496
+
1497
+ <a class="btn mdi mdi-code-tags" data-toggle="collapse" href="#collapse-badge-5" role="button"
1498
+ aria-expanded="false" aria-controls="collapse-badge-5"> </a>
1499
+
1500
+
1501
+ </div>
1502
+ <div class="card-body">
1503
+ <div class="collapse" id="collapse-badge-5">
1504
+ <pre class="language-html mb-4">
1505
+ <code >
1506
+ &lt;span class="badge badge-square badge-outline-primary"&gt;Primary&lt;/span&gt;
1507
+
1508
+ &lt;span class="badge badge-square badge-outline-secondary"&gt;Secondary&lt;/span&gt;
1509
+
1510
+ &lt;span class="badge badge-square badge-outline-success"&gt;Success&lt;/span&gt;
1511
+
1512
+ &lt;span class="badge badge-square badge-outline-danger"&gt;Danger&lt;/span&gt;
1513
+
1514
+ &lt;span class="badge badge-square badge-outline-warning"&gt;Warning&lt;/span&gt;
1515
+
1516
+ &lt;span class="badge badge-square badge-outline-info"&gt;Info&lt;/span&gt;
1517
+
1518
+ &lt;span class="badge badge-square badge-outline-light"&gt;Light&lt;/span&gt;
1519
+
1520
+ &lt;span class="badge badge-square badge-outline-dark"&gt;Dark&lt;/span&gt;
1521
+
1522
+ </code>
1523
+ </pre>
1524
+ </div>
1525
+ <div>
1526
+ <span class="badge badge-square badge-outline-primary">Primary</span>
1527
+ <span class="badge badge-square badge-outline-secondary">Secondary</span>
1528
+ <span class="badge badge-square badge-outline-success">Success</span>
1529
+ <span class="badge badge-square badge-outline-danger">Danger</span>
1530
+ <span class="badge badge-square badge-outline-warning">Warning</span>
1531
+ <span class="badge badge-square badge-outline-info">Info</span>
1532
+ <span class="badge badge-square badge-outline-light">Light</span>
1533
+ <span class="badge badge-square badge-outline-dark">Dark</span>
1534
+ </div>
1535
+ </div>
1536
+ </div>
1537
+
1538
+ </div>
1539
+
1540
+ </div>
1541
+
1542
+ <!-- Footer -->
1543
+ <footer class="footer mt-auto">
1544
+ <div class="copyright bg-white">
1545
+ <p>
1546
+ &copy; <span id="copy-year"></span> Copyright Mono Dashboard Bootstrap Template by <a class="text-primary" href="http://www.iamabdus.com/" target="_blank" >Abdus</a>.
1547
+ </p>
1548
+ </div>
1549
+ <script>
1550
+ var d = new Date();
1551
+ var year = d.getFullYear();
1552
+ document.getElementById("copy-year").innerHTML = year;
1553
+ </script>
1554
+ </footer>
1555
+
1556
+ </div>
1557
+ </div>
1558
+
1559
+ <!-- Card Offcanvas -->
1560
+ <div class="card card-offcanvas" id="contact-off" >
1561
+ <div class="card-header">
1562
+ <h2>Contacts</h2>
1563
+ <a href="#" class="btn btn-primary btn-pill px-4">Add New</a>
1564
+ </div>
1565
+ <div class="card-body">
1566
+
1567
+ <div class="mb-4">
1568
+ <input type="text" class="form-control form-control-lg form-control-secondary rounded-0" placeholder="Search contacts...">
1569
+ </div>
1570
+
1571
+ <div class="media media-sm">
1572
+ <div class="media-sm-wrapper">
1573
+ <a href="user-profile.html">
1574
+ <img src="images/user/user-sm-01.jpg" alt="User Image">
1575
+ <span class="active bg-primary"></span>
1576
+ </a>
1577
+ </div>
1578
+ <div class="media-body">
1579
+ <a href="user-profile.html">
1580
+ <span class="title">Selena Wagner</span>
1581
+ <span class="discribe">Designer</span>
1582
+ </a>
1583
+ </div>
1584
+ </div>
1585
+
1586
+ <div class="media media-sm">
1587
+ <div class="media-sm-wrapper">
1588
+ <a href="user-profile.html">
1589
+ <img src="images/user/user-sm-02.jpg" alt="User Image">
1590
+ <span class="active bg-primary"></span>
1591
+ </a>
1592
+ </div>
1593
+ <div class="media-body">
1594
+ <a href="user-profile.html">
1595
+ <span class="title">Walter Reuter</span>
1596
+ <span>Developer</span>
1597
+ </a>
1598
+ </div>
1599
+ </div>
1600
+
1601
+ <div class="media media-sm">
1602
+ <div class="media-sm-wrapper">
1603
+ <a href="user-profile.html">
1604
+ <img src="images/user/user-sm-03.jpg" alt="User Image">
1605
+ </a>
1606
+ </div>
1607
+ <div class="media-body">
1608
+ <a href="user-profile.html">
1609
+ <span class="title">Larissa Gebhardt</span>
1610
+ <span>Cyber Punk</span>
1611
+ </a>
1612
+ </div>
1613
+ </div>
1614
+
1615
+ <div class="media media-sm">
1616
+ <div class="media-sm-wrapper">
1617
+ <a href="user-profile.html">
1618
+ <img src="images/user/user-sm-04.jpg" alt="User Image">
1619
+ </a>
1620
+
1621
+ </div>
1622
+ <div class="media-body">
1623
+ <a href="user-profile.html">
1624
+ <span class="title">Albrecht Straub</span>
1625
+ <span>Photographer</span>
1626
+ </a>
1627
+ </div>
1628
+ </div>
1629
+
1630
+ <div class="media media-sm">
1631
+ <div class="media-sm-wrapper">
1632
+ <a href="user-profile.html">
1633
+ <img src="images/user/user-sm-05.jpg" alt="User Image">
1634
+ <span class="active bg-danger"></span>
1635
+ </a>
1636
+ </div>
1637
+ <div class="media-body">
1638
+ <a href="user-profile.html">
1639
+ <span class="title">Leopold Ebert</span>
1640
+ <span>Fashion Designer</span>
1641
+ </a>
1642
+ </div>
1643
+ </div>
1644
+
1645
+ <div class="media media-sm">
1646
+ <div class="media-sm-wrapper">
1647
+ <a href="user-profile.html">
1648
+ <img src="images/user/user-sm-06.jpg" alt="User Image">
1649
+ <span class="active bg-primary"></span>
1650
+ </a>
1651
+ </div>
1652
+ <div class="media-body">
1653
+ <a href="user-profile.html">
1654
+ <span class="title">Selena Wagner</span>
1655
+ <span>Photographer</span>
1656
+ </a>
1657
+ </div>
1658
+ </div>
1659
+
1660
+ </div>
1661
+ </div>
1662
+
1663
+
1664
+
1665
+
1666
+ <script src="plugins/jquery/jquery.min.js"></script>
1667
+ <script src="plugins/bootstrap/js/bootstrap.bundle.min.js"></script>
1668
+ <script src="plugins/simplebar/simplebar.min.js"></script>
1669
+ <script src="https://unpkg.com/hotkeys-js/dist/hotkeys.min.js"></script>
1670
+
1671
+
1672
+
1673
+ <script src="plugins/prism/prism.js"></script>
1674
+
1675
+
1676
+ <script src="js/mono.js"></script>
1677
+ <script src="js/chart.js"></script>
1678
+ <script src="js/map.js"></script>
1679
+ <script src="js/custom.js"></script>
1680
+
1681
+
1682
+
1683
+
1684
+ <!-- -->
1685
+
1686
+
1687
+ </body>
1688
+ </html>
basic-input.html ADDED
@@ -0,0 +1,2135 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+
3
+ <!--
4
+ // WEBSITE: https://themefisher.com
5
+ // TWITTER: https://twitter.com/themefisher
6
+ // FACEBOOK: https://www.facebook.com/themefisher
7
+ // GITHUB: https://github.com/themefisher/
8
+ -->
9
+
10
+ <html lang="en" dir="ltr">
11
+ <head>
12
+ <meta charset="utf-8" />
13
+ <meta http-equiv="X-UA-Compatible" content="IE=edge" />
14
+ <meta name="viewport" content="width=device-width, initial-scale=1" />
15
+
16
+ <title>Mono - Responsive Admin & Dashboard Template</title>
17
+
18
+ <!-- GOOGLE FONTS -->
19
+ <link href="https://fonts.googleapis.com/css?family=Karla:400,700|Roboto" rel="stylesheet">
20
+ <link href="plugins/material/css/materialdesignicons.min.css" rel="stylesheet" />
21
+ <link href="plugins/simplebar/simplebar.css" rel="stylesheet" />
22
+
23
+ <!-- PLUGINS CSS STYLE -->
24
+ <link href="plugins/nprogress/nprogress.css" rel="stylesheet" />
25
+
26
+
27
+ <link href="plugins/prism/prism.css" rel="stylesheet" />
28
+
29
+
30
+ <!-- MONO CSS -->
31
+ <link id="main-css-href" rel="stylesheet" href="css/style.css" />
32
+
33
+
34
+
35
+
36
+ <!-- FAVICON -->
37
+ <link href="images/favicon.png" rel="shortcut icon" />
38
+
39
+ <!--
40
+ HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries
41
+ -->
42
+ <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
43
+ <!--[if lt IE 9]>
44
+ <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
45
+ <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
46
+ <![endif]-->
47
+ <script src="plugins/nprogress/nprogress.js"></script>
48
+ </head>
49
+
50
+
51
+ <body class="navbar-fixed sidebar-fixed" id="body">
52
+ <script>
53
+ NProgress.configure({ showSpinner: false });
54
+ NProgress.start();
55
+ </script>
56
+
57
+
58
+
59
+ <!-- ====================================
60
+ ——— WRAPPER
61
+ ===================================== -->
62
+ <div class="wrapper">
63
+
64
+
65
+ <!-- ====================================
66
+ ——— LEFT SIDEBAR WITH OUT FOOTER
67
+ ===================================== -->
68
+ <aside class="left-sidebar sidebar-dark" id="left-sidebar">
69
+ <div id="sidebar" class="sidebar sidebar-with-footer">
70
+ <!-- Aplication Brand -->
71
+ <div class="app-brand">
72
+ <a href="/index.html">
73
+ <img src="images/logo.png" alt="Mono">
74
+ <span class="brand-name">MONO</span>
75
+ </a>
76
+ </div>
77
+ <!-- begin sidebar scrollbar -->
78
+ <div class="sidebar-left" data-simplebar style="height: 100%;">
79
+ <!-- sidebar menu -->
80
+ <ul class="nav sidebar-inner" id="sidebar-menu">
81
+
82
+
83
+
84
+ <li
85
+ >
86
+ <a class="sidenav-item-link" href="index.html">
87
+ <i class="mdi mdi-briefcase-account-outline"></i>
88
+ <span class="nav-text">Business Dashboard</span>
89
+ </a>
90
+ </li>
91
+
92
+
93
+
94
+
95
+
96
+ <li
97
+ >
98
+ <a class="sidenav-item-link" href="analytics.html">
99
+ <i class="mdi mdi-chart-line"></i>
100
+ <span class="nav-text">Analytics Dashboard</span>
101
+ </a>
102
+ </li>
103
+
104
+
105
+
106
+
107
+
108
+ <li class="section-title">
109
+ Apps
110
+ </li>
111
+
112
+
113
+
114
+
115
+
116
+ <li
117
+ >
118
+ <a class="sidenav-item-link" href="chat.html">
119
+ <i class="mdi mdi-wechat"></i>
120
+ <span class="nav-text">Chat</span>
121
+ </a>
122
+ </li>
123
+
124
+
125
+
126
+
127
+
128
+ <li
129
+ >
130
+ <a class="sidenav-item-link" href="contacts.html">
131
+ <i class="mdi mdi-phone"></i>
132
+ <span class="nav-text">Contacts</span>
133
+ </a>
134
+ </li>
135
+
136
+
137
+
138
+
139
+
140
+ <li
141
+ >
142
+ <a class="sidenav-item-link" href="team.html">
143
+ <i class="mdi mdi-account-group"></i>
144
+ <span class="nav-text">Team</span>
145
+ </a>
146
+ </li>
147
+
148
+
149
+
150
+
151
+
152
+ <li
153
+ >
154
+ <a class="sidenav-item-link" href="calendar.html">
155
+ <i class="mdi mdi-calendar-check"></i>
156
+ <span class="nav-text">Calendar</span>
157
+ </a>
158
+ </li>
159
+
160
+
161
+
162
+
163
+
164
+ <li class="has-sub" >
165
+ <a class="sidenav-item-link" href="javascript:void(0)" data-toggle="collapse" data-target="#email"
166
+ aria-expanded="false" aria-controls="email">
167
+ <i class="mdi mdi-email"></i>
168
+ <span class="nav-text">email</span> <b class="caret"></b>
169
+ </a>
170
+ <ul class="collapse" id="email"
171
+ data-parent="#sidebar-menu">
172
+ <div class="sub-menu">
173
+
174
+
175
+
176
+ <li >
177
+ <a class="sidenav-item-link" href="email-inbox.html">
178
+ <span class="nav-text">Email Inbox</span>
179
+
180
+ </a>
181
+ </li>
182
+
183
+
184
+
185
+
186
+
187
+
188
+ <li >
189
+ <a class="sidenav-item-link" href="email-details.html">
190
+ <span class="nav-text">Email Details</span>
191
+
192
+ </a>
193
+ </li>
194
+
195
+
196
+
197
+
198
+
199
+
200
+ <li >
201
+ <a class="sidenav-item-link" href="email-compose.html">
202
+ <span class="nav-text">Email Compose</span>
203
+
204
+ </a>
205
+ </li>
206
+
207
+
208
+
209
+
210
+ </div>
211
+ </ul>
212
+ </li>
213
+
214
+
215
+
216
+
217
+
218
+ <li class="section-title">
219
+ UI Elements
220
+ </li>
221
+
222
+
223
+
224
+
225
+
226
+ <li class="has-sub active expand" >
227
+ <a class="sidenav-item-link" href="javascript:void(0)" data-toggle="collapse" data-target="#ui-elements"
228
+ aria-expanded="false" aria-controls="ui-elements">
229
+ <i class="mdi mdi-folder-outline"></i>
230
+ <span class="nav-text">UI Components</span> <b class="caret"></b>
231
+ </a>
232
+ <ul class="collapse show" id="ui-elements"
233
+ data-parent="#sidebar-menu">
234
+ <div class="sub-menu">
235
+
236
+
237
+
238
+ <li >
239
+ <a class="sidenav-item-link" href="alert.html">
240
+ <span class="nav-text">Alert</span>
241
+
242
+ </a>
243
+ </li>
244
+
245
+
246
+
247
+
248
+
249
+
250
+ <li >
251
+ <a class="sidenav-item-link" href="badge.html">
252
+ <span class="nav-text">Badge</span>
253
+
254
+ </a>
255
+ </li>
256
+
257
+
258
+
259
+
260
+
261
+
262
+ <li >
263
+ <a class="sidenav-item-link" href="breadcrumb.html">
264
+ <span class="nav-text">Breadcrumb</span>
265
+
266
+ </a>
267
+ </li>
268
+
269
+
270
+
271
+
272
+
273
+ <li class="has-sub" >
274
+ <a class="sidenav-item-link" href="javascript:void(0)" data-toggle="collapse" data-target="#buttons"
275
+ aria-expanded="false" aria-controls="buttons">
276
+ <span class="nav-text">Buttons</span> <b class="caret"></b>
277
+ </a>
278
+ <ul class="collapse" id="buttons">
279
+ <div class="sub-menu">
280
+
281
+ <li >
282
+ <a href="button-default.html">Button Default</a>
283
+ </li>
284
+
285
+ <li >
286
+ <a href="button-dropdown.html">Button Dropdown</a>
287
+ </li>
288
+
289
+ <li >
290
+ <a href="button-group.html">Button Group</a>
291
+ </li>
292
+
293
+ <li >
294
+ <a href="button-social.html">Button Social</a>
295
+ </li>
296
+
297
+ <li >
298
+ <a href="button-loading.html">Button Loading</a>
299
+ </li>
300
+
301
+ </div>
302
+ </ul>
303
+ </li>
304
+
305
+
306
+
307
+
308
+
309
+ <li >
310
+ <a class="sidenav-item-link" href="card.html">
311
+ <span class="nav-text">Card</span>
312
+
313
+ </a>
314
+ </li>
315
+
316
+
317
+
318
+
319
+
320
+
321
+ <li >
322
+ <a class="sidenav-item-link" href="carousel.html">
323
+ <span class="nav-text">Carousel</span>
324
+
325
+ </a>
326
+ </li>
327
+
328
+
329
+
330
+
331
+
332
+
333
+ <li >
334
+ <a class="sidenav-item-link" href="collapse.html">
335
+ <span class="nav-text">Collapse</span>
336
+
337
+ </a>
338
+ </li>
339
+
340
+
341
+
342
+
343
+
344
+
345
+ <li >
346
+ <a class="sidenav-item-link" href="editor.html">
347
+ <span class="nav-text">Editor</span>
348
+
349
+ </a>
350
+ </li>
351
+
352
+
353
+
354
+
355
+
356
+
357
+ <li >
358
+ <a class="sidenav-item-link" href="list-group.html">
359
+ <span class="nav-text">List Group</span>
360
+
361
+ </a>
362
+ </li>
363
+
364
+
365
+
366
+
367
+
368
+
369
+ <li >
370
+ <a class="sidenav-item-link" href="modal.html">
371
+ <span class="nav-text">Modal</span>
372
+
373
+ </a>
374
+ </li>
375
+
376
+
377
+
378
+
379
+
380
+
381
+ <li >
382
+ <a class="sidenav-item-link" href="pagination.html">
383
+ <span class="nav-text">Pagination</span>
384
+
385
+ </a>
386
+ </li>
387
+
388
+
389
+
390
+
391
+
392
+
393
+ <li >
394
+ <a class="sidenav-item-link" href="popover-tooltip.html">
395
+ <span class="nav-text">Popover & Tooltip</span>
396
+
397
+ </a>
398
+ </li>
399
+
400
+
401
+
402
+
403
+
404
+
405
+ <li >
406
+ <a class="sidenav-item-link" href="progress-bar.html">
407
+ <span class="nav-text">Progress Bar</span>
408
+
409
+ </a>
410
+ </li>
411
+
412
+
413
+
414
+
415
+
416
+
417
+ <li >
418
+ <a class="sidenav-item-link" href="spinner.html">
419
+ <span class="nav-text">Spinner</span>
420
+
421
+ </a>
422
+ </li>
423
+
424
+
425
+
426
+
427
+
428
+
429
+ <li >
430
+ <a class="sidenav-item-link" href="switches.html">
431
+ <span class="nav-text">Switches</span>
432
+
433
+ </a>
434
+ </li>
435
+
436
+
437
+
438
+
439
+
440
+ <li class="has-sub" >
441
+ <a class="sidenav-item-link" href="javascript:void(0)" data-toggle="collapse" data-target="#tables"
442
+ aria-expanded="false" aria-controls="tables">
443
+ <span class="nav-text">Tables</span> <b class="caret"></b>
444
+ </a>
445
+ <ul class="collapse" id="tables">
446
+ <div class="sub-menu">
447
+
448
+ <li >
449
+ <a href="bootstarp-tables.html">Bootstrap Tables</a>
450
+ </li>
451
+
452
+ <li >
453
+ <a href="data-tables.html">Data Tables</a>
454
+ </li>
455
+
456
+ </div>
457
+ </ul>
458
+ </li>
459
+
460
+
461
+
462
+
463
+
464
+ <li >
465
+ <a class="sidenav-item-link" href="tab.html">
466
+ <span class="nav-text">Tab</span>
467
+
468
+ </a>
469
+ </li>
470
+
471
+
472
+
473
+
474
+
475
+
476
+ <li >
477
+ <a class="sidenav-item-link" href="toaster.html">
478
+ <span class="nav-text">Toaster</span>
479
+
480
+ </a>
481
+ </li>
482
+
483
+
484
+
485
+
486
+
487
+ <li class="has-sub" >
488
+ <a class="sidenav-item-link" href="javascript:void(0)" data-toggle="collapse" data-target="#icons"
489
+ aria-expanded="false" aria-controls="icons">
490
+ <span class="nav-text">Icons</span> <b class="caret"></b>
491
+ </a>
492
+ <ul class="collapse" id="icons">
493
+ <div class="sub-menu">
494
+
495
+ <li >
496
+ <a href="material-icons.html">Material Icon</a>
497
+ </li>
498
+
499
+ <li >
500
+ <a href="flag-icons.html">Flag Icon</a>
501
+ </li>
502
+
503
+ </div>
504
+ </ul>
505
+ </li>
506
+
507
+
508
+
509
+
510
+ <li class="has-sub active expand" >
511
+ <a class="sidenav-item-link" href="javascript:void(0)" data-toggle="collapse" data-target="#forms"
512
+ aria-expanded="false" aria-controls="forms">
513
+ <span class="nav-text">Forms</span> <b class="caret"></b>
514
+ </a>
515
+ <ul class="collapse show" id="forms">
516
+ <div class="sub-menu">
517
+
518
+ <li class="active" >
519
+ <a href="basic-input.html">Basic Input</a>
520
+ </li>
521
+
522
+ <li >
523
+ <a href="input-group.html">Input Group</a>
524
+ </li>
525
+
526
+ <li >
527
+ <a href="checkbox-radio.html">Checkbox & Radio</a>
528
+ </li>
529
+
530
+ <li >
531
+ <a href="form-validation.html">Form Validation</a>
532
+ </li>
533
+
534
+ <li >
535
+ <a href="form-advance.html">Form Advance</a>
536
+ </li>
537
+
538
+ </div>
539
+ </ul>
540
+ </li>
541
+
542
+
543
+
544
+
545
+ <li class="has-sub" >
546
+ <a class="sidenav-item-link" href="javascript:void(0)" data-toggle="collapse" data-target="#maps"
547
+ aria-expanded="false" aria-controls="maps">
548
+ <span class="nav-text">Maps</span> <b class="caret"></b>
549
+ </a>
550
+ <ul class="collapse" id="maps">
551
+ <div class="sub-menu">
552
+
553
+ <li >
554
+ <a href="google-maps.html">Google Map</a>
555
+ </li>
556
+
557
+ <li >
558
+ <a href="vector-maps.html">Vector Map</a>
559
+ </li>
560
+
561
+ </div>
562
+ </ul>
563
+ </li>
564
+
565
+
566
+
567
+
568
+ <li class="has-sub" >
569
+ <a class="sidenav-item-link" href="javascript:void(0)" data-toggle="collapse" data-target="#widgets"
570
+ aria-expanded="false" aria-controls="widgets">
571
+ <span class="nav-text">Widgets</span> <b class="caret"></b>
572
+ </a>
573
+ <ul class="collapse" id="widgets">
574
+ <div class="sub-menu">
575
+
576
+ <li >
577
+ <a href="widgets-general.html">General Widget</a>
578
+ </li>
579
+
580
+ <li >
581
+ <a href="widgets-chart.html">Chart Widget</a>
582
+ </li>
583
+
584
+ </div>
585
+ </ul>
586
+ </li>
587
+
588
+
589
+
590
+ </div>
591
+ </ul>
592
+ </li>
593
+
594
+
595
+
596
+
597
+
598
+ <li class="has-sub" >
599
+ <a class="sidenav-item-link" href="javascript:void(0)" data-toggle="collapse" data-target="#charts"
600
+ aria-expanded="false" aria-controls="charts">
601
+ <i class="mdi mdi-chart-pie"></i>
602
+ <span class="nav-text">Charts</span> <b class="caret"></b>
603
+ </a>
604
+ <ul class="collapse" id="charts"
605
+ data-parent="#sidebar-menu">
606
+ <div class="sub-menu">
607
+
608
+
609
+
610
+ <li >
611
+ <a class="sidenav-item-link" href="apex-charts.html">
612
+ <span class="nav-text">Apex Charts</span>
613
+
614
+ </a>
615
+ </li>
616
+
617
+
618
+
619
+
620
+ </div>
621
+ </ul>
622
+ </li>
623
+
624
+
625
+
626
+
627
+
628
+ <li class="section-title">
629
+ Pages
630
+ </li>
631
+
632
+
633
+
634
+
635
+
636
+ <li class="has-sub" >
637
+ <a class="sidenav-item-link" href="javascript:void(0)" data-toggle="collapse" data-target="#users"
638
+ aria-expanded="false" aria-controls="users">
639
+ <i class="mdi mdi-image-filter-none"></i>
640
+ <span class="nav-text">User</span> <b class="caret"></b>
641
+ </a>
642
+ <ul class="collapse" id="users"
643
+ data-parent="#sidebar-menu">
644
+ <div class="sub-menu">
645
+
646
+
647
+
648
+ <li >
649
+ <a class="sidenav-item-link" href="user-profile.html">
650
+ <span class="nav-text">User Profile</span>
651
+
652
+ </a>
653
+ </li>
654
+
655
+
656
+
657
+
658
+
659
+
660
+ <li >
661
+ <a class="sidenav-item-link" href="user-activities.html">
662
+ <span class="nav-text">User Activities</span>
663
+
664
+ </a>
665
+ </li>
666
+
667
+
668
+
669
+
670
+
671
+
672
+ <li >
673
+ <a class="sidenav-item-link" href="user-profile-settings.html">
674
+ <span class="nav-text">User Profile Settings</span>
675
+
676
+ </a>
677
+ </li>
678
+
679
+
680
+
681
+
682
+
683
+
684
+ <li >
685
+ <a class="sidenav-item-link" href="user-account-settings.html">
686
+ <span class="nav-text">User Account Settings</span>
687
+
688
+ </a>
689
+ </li>
690
+
691
+
692
+
693
+
694
+
695
+
696
+ <li >
697
+ <a class="sidenav-item-link" href="user-planing-settings.html">
698
+ <span class="nav-text">User Planing Settings</span>
699
+
700
+ </a>
701
+ </li>
702
+
703
+
704
+
705
+
706
+
707
+
708
+ <li >
709
+ <a class="sidenav-item-link" href="user-billing.html">
710
+ <span class="nav-text">User billing</span>
711
+
712
+ </a>
713
+ </li>
714
+
715
+
716
+
717
+
718
+
719
+
720
+ <li >
721
+ <a class="sidenav-item-link" href="user-notify-settings.html">
722
+ <span class="nav-text">User Notify Settings</span>
723
+
724
+ </a>
725
+ </li>
726
+
727
+
728
+
729
+
730
+ </div>
731
+ </ul>
732
+ </li>
733
+
734
+
735
+
736
+
737
+
738
+ <li class="has-sub" >
739
+ <a class="sidenav-item-link" href="javascript:void(0)" data-toggle="collapse" data-target="#authentication"
740
+ aria-expanded="false" aria-controls="authentication">
741
+ <i class="mdi mdi-account"></i>
742
+ <span class="nav-text">Authentication</span> <b class="caret"></b>
743
+ </a>
744
+ <ul class="collapse" id="authentication"
745
+ data-parent="#sidebar-menu">
746
+ <div class="sub-menu">
747
+
748
+
749
+
750
+ <li >
751
+ <a class="sidenav-item-link" href="sign-in.html">
752
+ <span class="nav-text">Sign In</span>
753
+
754
+ </a>
755
+ </li>
756
+
757
+
758
+
759
+
760
+
761
+
762
+ <li >
763
+ <a class="sidenav-item-link" href="sign-up.html">
764
+ <span class="nav-text">Sign Up</span>
765
+
766
+ </a>
767
+ </li>
768
+
769
+
770
+
771
+
772
+
773
+
774
+ <li >
775
+ <a class="sidenav-item-link" href="reset-password.html">
776
+ <span class="nav-text">Reset Password</span>
777
+
778
+ </a>
779
+ </li>
780
+
781
+
782
+
783
+
784
+ </div>
785
+ </ul>
786
+ </li>
787
+
788
+
789
+
790
+
791
+
792
+ <li class="has-sub" >
793
+ <a class="sidenav-item-link" href="javascript:void(0)" data-toggle="collapse" data-target="#other-page"
794
+ aria-expanded="false" aria-controls="other-page">
795
+ <i class="mdi mdi-file-multiple"></i>
796
+ <span class="nav-text">Other pages</span> <b class="caret"></b>
797
+ </a>
798
+ <ul class="collapse" id="other-page"
799
+ data-parent="#sidebar-menu">
800
+ <div class="sub-menu">
801
+
802
+
803
+
804
+ <li >
805
+ <a class="sidenav-item-link" href="invoice.html">
806
+ <span class="nav-text">Invoice</span>
807
+
808
+ </a>
809
+ </li>
810
+
811
+
812
+
813
+
814
+
815
+
816
+ <li >
817
+ <a class="sidenav-item-link" href="404.html">
818
+ <span class="nav-text">404 page</span>
819
+
820
+ </a>
821
+ </li>
822
+
823
+
824
+
825
+
826
+
827
+
828
+ <li >
829
+ <a class="sidenav-item-link" href="page-comingsoon.html">
830
+ <span class="nav-text">Coming Soon</span>
831
+
832
+ </a>
833
+ </li>
834
+
835
+
836
+
837
+
838
+
839
+
840
+ <li >
841
+ <a class="sidenav-item-link" href="page-maintenance.html">
842
+ <span class="nav-text">Maintenance</span>
843
+
844
+ </a>
845
+ </li>
846
+
847
+
848
+
849
+
850
+ </div>
851
+ </ul>
852
+ </li>
853
+
854
+
855
+
856
+
857
+
858
+ <li class="section-title">
859
+ Documentation
860
+ </li>
861
+
862
+
863
+
864
+
865
+
866
+ <li
867
+ >
868
+ <a class="sidenav-item-link" href="getting-started.html">
869
+ <i class="mdi mdi-airplane"></i>
870
+ <span class="nav-text">Getting Started</span>
871
+ </a>
872
+ </li>
873
+
874
+
875
+
876
+
877
+
878
+ <li class="has-sub" >
879
+ <a class="sidenav-item-link" href="javascript:void(0)" data-toggle="collapse" data-target="#customization"
880
+ aria-expanded="false" aria-controls="customization">
881
+ <i class="mdi mdi-square-edit-outline"></i>
882
+ <span class="nav-text">Customization</span> <b class="caret"></b>
883
+ </a>
884
+ <ul class="collapse" id="customization"
885
+ data-parent="#sidebar-menu">
886
+ <div class="sub-menu">
887
+
888
+
889
+
890
+ <li >
891
+ <a class="sidenav-item-link" href="navbar-customization.html">
892
+ <span class="nav-text">Navbar</span>
893
+
894
+ </a>
895
+ </li>
896
+
897
+
898
+
899
+
900
+
901
+
902
+ <li >
903
+ <a class="sidenav-item-link" href="sidebar-customization.html">
904
+ <span class="nav-text">Sidebar</span>
905
+
906
+ </a>
907
+ </li>
908
+
909
+
910
+
911
+
912
+
913
+
914
+ <li >
915
+ <a class="sidenav-item-link" href="styling.html">
916
+ <span class="nav-text">Styling</span>
917
+
918
+ </a>
919
+ </li>
920
+
921
+
922
+
923
+
924
+ </div>
925
+ </ul>
926
+ </li>
927
+
928
+
929
+
930
+ </ul>
931
+
932
+ </div>
933
+
934
+ <div class="sidebar-footer">
935
+ <div class="sidebar-footer-content">
936
+ <ul class="d-flex">
937
+ <li>
938
+ <a href="user-account-settings.html" data-toggle="tooltip" title="Profile settings"><i class="mdi mdi-settings"></i></a></li>
939
+ <li>
940
+ <a href="#" data-toggle="tooltip" title="No chat messages"><i class="mdi mdi-chat-processing"></i></a>
941
+ </li>
942
+ </ul>
943
+ </div>
944
+ </div>
945
+ </div>
946
+ </aside>
947
+
948
+
949
+
950
+ <!-- ====================================
951
+ ——— PAGE WRAPPER
952
+ ===================================== -->
953
+ <div class="page-wrapper">
954
+
955
+ <!-- Header -->
956
+ <header class="main-header" id="header">
957
+ <nav class="navbar navbar-expand-lg navbar-light" id="navbar">
958
+ <!-- Sidebar toggle button -->
959
+ <button id="sidebar-toggler" class="sidebar-toggle">
960
+ <span class="sr-only">Toggle navigation</span>
961
+ </button>
962
+
963
+ <span class="page-title">basic input</span>
964
+
965
+ <div class="navbar-right ">
966
+
967
+ <!-- search form -->
968
+ <div class="search-form">
969
+ <form action="index.html" method="get">
970
+ <div class="input-group input-group-sm" id="input-group-search">
971
+ <input type="text" autocomplete="off" name="query" id="search-input" class="form-control" placeholder="Search..." />
972
+ <div class="input-group-append">
973
+ <button class="btn" type="button">/</button>
974
+ </div>
975
+ </div>
976
+ </form>
977
+ <ul class="dropdown-menu dropdown-menu-search">
978
+
979
+ <li class="nav-item">
980
+ <a class="nav-link" href="index.html">Morbi leo risus</a>
981
+ </li>
982
+ <li class="nav-item">
983
+ <a class="nav-link" href="index.html">Dapibus ac facilisis in</a>
984
+ </li>
985
+ <li class="nav-item">
986
+ <a class="nav-link" href="index.html">Porta ac consectetur ac</a>
987
+ </li>
988
+ <li class="nav-item">
989
+ <a class="nav-link" href="index.html">Vestibulum at eros</a>
990
+ </li>
991
+
992
+ </ul>
993
+
994
+ </div>
995
+
996
+ <ul class="nav navbar-nav">
997
+ <!-- Offcanvas -->
998
+ <li class="custom-dropdown">
999
+ <a class="offcanvas-toggler active custom-dropdown-toggler" data-offcanvas="contact-off" href="javascript:" >
1000
+ <i class="mdi mdi-contacts icon"></i>
1001
+ </a>
1002
+ </li>
1003
+ <li class="custom-dropdown">
1004
+ <button class="notify-toggler custom-dropdown-toggler">
1005
+ <i class="mdi mdi-bell-outline icon"></i>
1006
+ <span class="badge badge-xs rounded-circle">21</span>
1007
+ </button>
1008
+ <div class="dropdown-notify">
1009
+
1010
+ <header>
1011
+ <div class="nav nav-underline" id="nav-tab" role="tablist">
1012
+ <a class="nav-item nav-link active" id="all-tabs" data-toggle="tab" href="#all" role="tab" aria-controls="nav-home"
1013
+ aria-selected="true">All (5)</a>
1014
+ <a class="nav-item nav-link" id="message-tab" data-toggle="tab" href="#message" role="tab" aria-controls="nav-profile"
1015
+ aria-selected="false">Msgs (4)</a>
1016
+ <a class="nav-item nav-link" id="other-tab" data-toggle="tab" href="#other" role="tab" aria-controls="nav-contact"
1017
+ aria-selected="false">Others (3)</a>
1018
+ </div>
1019
+ </header>
1020
+
1021
+ <div class="" data-simplebar style="height: 325px;">
1022
+ <div class="tab-content" id="myTabContent">
1023
+
1024
+ <div class="tab-pane fade show active" id="all" role="tabpanel" aria-labelledby="all-tabs">
1025
+
1026
+ <div class="media media-sm bg-warning-10 p-4 mb-0">
1027
+ <div class="media-sm-wrapper">
1028
+ <a href="user-profile.html">
1029
+ <img src="images/user/user-sm-02.jpg" alt="User Image">
1030
+ </a>
1031
+ </div>
1032
+ <div class="media-body">
1033
+ <a href="user-profile.html">
1034
+ <span class="title mb-0">John Doe</span>
1035
+ <span class="discribe">Extremity sweetness difficult behaviour he of. On disposal of as landlord horrible. Afraid at highly months do things on at.</span>
1036
+ <span class="time">
1037
+ <time>Just now</time>...
1038
+ </span>
1039
+ </a>
1040
+ </div>
1041
+ </div>
1042
+
1043
+ <div class="media media-sm p-4 bg-light mb-0">
1044
+ <div class="media-sm-wrapper bg-primary">
1045
+ <a href="user-profile.html">
1046
+ <i class="mdi mdi-calendar-check-outline"></i>
1047
+ </a>
1048
+ </div>
1049
+ <div class="media-body">
1050
+ <a href="user-profile.html">
1051
+ <span class="title mb-0">New event added</span>
1052
+ <span class="discribe">1/3/2014 (1pm - 2pm)</span>
1053
+ <span class="time">
1054
+ <time>10 min ago...</time>...
1055
+ </span>
1056
+ </a>
1057
+ </div>
1058
+ </div>
1059
+
1060
+ <div class="media media-sm p-4 mb-0">
1061
+ <div class="media-sm-wrapper">
1062
+ <a href="user-profile.html">
1063
+ <img src="images/user/user-sm-03.jpg" alt="User Image">
1064
+ </a>
1065
+ </div>
1066
+ <div class="media-body">
1067
+ <a href="user-profile.html">
1068
+ <span class="title mb-0">Sagge Hudson</span>
1069
+ <span class="discribe">On disposal of as landlord Afraid at highly months do things on at.</span>
1070
+ <span class="time">
1071
+ <time>1 hrs ago</time>...
1072
+ </span>
1073
+ </a>
1074
+ </div>
1075
+ </div>
1076
+
1077
+ <div class="media media-sm p-4 mb-0">
1078
+ <div class="media-sm-wrapper bg-info-dark">
1079
+ <a href="user-profile.html">
1080
+ <i class="mdi mdi-account-multiple-check"></i>
1081
+ </a>
1082
+ </div>
1083
+ <div class="media-body">
1084
+ <a href="user-profile.html">
1085
+ <span class="title mb-0">Add request</span>
1086
+ <span class="discribe">Add Dany Jones as your contact.</span>
1087
+ <div class="buttons">
1088
+ <a href="#" class="btn btn-sm btn-success shadow-none text-white">accept</a>
1089
+ <a href="#" class="btn btn-sm shadow-none">delete</a>
1090
+ </div>
1091
+ <span class="time">
1092
+ <time>6 hrs ago</time>...
1093
+ </span>
1094
+ </a>
1095
+ </div>
1096
+ </div>
1097
+
1098
+ <div class="media media-sm p-4 mb-0">
1099
+ <div class="media-sm-wrapper bg-info">
1100
+ <a href="user-profile.html">
1101
+ <i class="mdi mdi-playlist-check"></i>
1102
+ </a>
1103
+ </div>
1104
+ <div class="media-body">
1105
+ <a href="user-profile.html">
1106
+ <span class="title mb-0">Task complete</span>
1107
+ <span class="discribe">Afraid at highly months do things on at.</span>
1108
+ <span class="time">
1109
+ <time>1 hrs ago</time>...
1110
+ </span>
1111
+ </a>
1112
+ </div>
1113
+ </div>
1114
+
1115
+ </div>
1116
+
1117
+ <div class="tab-pane fade" id="message" role="tabpanel" aria-labelledby="message-tab">
1118
+
1119
+ <div class="media media-sm p-4 mb-0">
1120
+ <div class="media-sm-wrapper">
1121
+ <a href="user-profile.html">
1122
+ <img src="images/user/user-sm-01.jpg" alt="User Image">
1123
+ </a>
1124
+ </div>
1125
+ <div class="media-body">
1126
+ <a href="user-profile.html">
1127
+ <span class="title mb-0">Selena Wagner</span>
1128
+ <span class="discribe">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</span>
1129
+ <span class="time">
1130
+ <time>15 min ago</time>...
1131
+ </span>
1132
+ </a>
1133
+ </div>
1134
+ </div>
1135
+
1136
+ <div class="media media-sm p-4 mb-0">
1137
+ <div class="media-sm-wrapper">
1138
+ <a href="user-profile.html">
1139
+ <img src="images/user/user-sm-03.jpg" alt="User Image">
1140
+ </a>
1141
+ </div>
1142
+ <div class="media-body">
1143
+ <a href="user-profile.html">
1144
+ <span class="title mb-0">Sagge Hudson</span>
1145
+ <span class="discribe">On disposal of as landlord Afraid at highly months do things on at.</span>
1146
+ <span class="time">
1147
+ <time>1 hrs ago</time>...
1148
+ </span>
1149
+ </a>
1150
+ </div>
1151
+ </div>
1152
+
1153
+ <div class="media media-sm bg-warning-10 p-4 mb-0">
1154
+ <div class="media-sm-wrapper">
1155
+ <a href="user-profile.html">
1156
+ <img src="images/user/user-sm-02.jpg" alt="User Image">
1157
+ </a>
1158
+ </div>
1159
+ <div class="media-body">
1160
+ <a href="user-profile.html">
1161
+ <span class="title mb-0">John Doe</span>
1162
+ <span class="discribe">Extremity sweetness difficult behaviour he of. On disposal of as landlord horrible. Afraid
1163
+ at highly months do things on at.</span>
1164
+ <span class="time">
1165
+ <time>Just now</time>...
1166
+ </span>
1167
+ </a>
1168
+ </div>
1169
+ </div>
1170
+
1171
+ <div class="media media-sm p-4 mb-0">
1172
+ <div class="media-sm-wrapper">
1173
+ <a href="user-profile.html">
1174
+ <img src="images/user/user-sm-04.jpg" alt="User Image">
1175
+ </a>
1176
+ </div>
1177
+ <div class="media-body">
1178
+ <a href="user-profile.html">
1179
+ <span class="title mb-0">Albrecht Straub</span>
1180
+ <span class="discribe"> Beatae quia natus assumenda laboriosam, nisi perferendis aliquid consectetur expedita non tenetur.</span>
1181
+ <span class="time">
1182
+ <time>Just now</time>...
1183
+ </span>
1184
+ </a>
1185
+ </div>
1186
+ </div>
1187
+
1188
+ </div>
1189
+ <div class="tab-pane fade" id="other" role="tabpanel" aria-labelledby="contact-tab">
1190
+
1191
+ <div class="media media-sm p-4 bg-light mb-0">
1192
+ <div class="media-sm-wrapper bg-primary">
1193
+ <a href="user-profile.html">
1194
+ <i class="mdi mdi-calendar-check-outline"></i>
1195
+ </a>
1196
+ </div>
1197
+ <div class="media-body">
1198
+ <a href="user-profile.html">
1199
+ <span class="title mb-0">New event added</span>
1200
+ <span class="discribe">1/3/2014 (1pm - 2pm)</span>
1201
+ <span class="time">
1202
+ <time>10 min ago...</time>...
1203
+ </span>
1204
+ </a>
1205
+ </div>
1206
+ </div>
1207
+
1208
+ <div class="media media-sm p-4 mb-0">
1209
+ <div class="media-sm-wrapper bg-info-dark">
1210
+ <a href="user-profile.html">
1211
+ <i class="mdi mdi-account-multiple-check"></i>
1212
+ </a>
1213
+ </div>
1214
+ <div class="media-body">
1215
+ <a href="user-profile.html">
1216
+ <span class="title mb-0">Add request</span>
1217
+ <span class="discribe">Add Dany Jones as your contact.</span>
1218
+ <div class="buttons">
1219
+ <a href="#" class="btn btn-sm btn-success shadow-none text-white">accept</a>
1220
+ <a href="#" class="btn btn-sm shadow-none">delete</a>
1221
+ </div>
1222
+ <span class="time">
1223
+ <time>6 hrs ago</time>...
1224
+ </span>
1225
+ </a>
1226
+ </div>
1227
+ </div>
1228
+
1229
+ <div class="media media-sm p-4 mb-0">
1230
+ <div class="media-sm-wrapper bg-info">
1231
+ <a href="user-profile.html">
1232
+ <i class="mdi mdi-playlist-check"></i>
1233
+ </a>
1234
+ </div>
1235
+ <div class="media-body">
1236
+ <a href="user-profile.html">
1237
+ <span class="title mb-0">Task complete</span>
1238
+ <span class="discribe">Afraid at highly months do things on at.</span>
1239
+ <span class="time">
1240
+ <time>1 hrs ago</time>...
1241
+ </span>
1242
+ </a>
1243
+ </div>
1244
+ </div>
1245
+
1246
+ </div>
1247
+ </div>
1248
+ </div>
1249
+
1250
+ <footer class="border-top dropdown-notify-footer">
1251
+ <div class="d-flex justify-content-between align-items-center py-2 px-4">
1252
+ <span>Last updated 3 min ago</span>
1253
+ <a id="refress-button" href="javascript:" class="btn mdi mdi-cached btn-refress"></a>
1254
+ </div>
1255
+ </footer>
1256
+ </div>
1257
+ </li>
1258
+ <!-- User Account -->
1259
+ <li class="dropdown user-menu">
1260
+ <button class="dropdown-toggle nav-link" data-toggle="dropdown">
1261
+ <img src="images/user/user-xs-01.jpg" class="user-image rounded-circle" alt="User Image" />
1262
+ <span class="d-none d-lg-inline-block">John Doe</span>
1263
+ </button>
1264
+ <ul class="dropdown-menu dropdown-menu-right">
1265
+ <li>
1266
+ <a class="dropdown-link-item" href="user-profile.html">
1267
+ <i class="mdi mdi-account-outline"></i>
1268
+ <span class="nav-text">My Profile</span>
1269
+ </a>
1270
+ </li>
1271
+ <li>
1272
+ <a class="dropdown-link-item" href="email-inbox.html">
1273
+ <i class="mdi mdi-email-outline"></i>
1274
+ <span class="nav-text">Message</span>
1275
+ <span class="badge badge-pill badge-primary">24</span>
1276
+ </a>
1277
+ </li>
1278
+ <li>
1279
+ <a class="dropdown-link-item" href="user-activities.html">
1280
+ <i class="mdi mdi-diamond-stone"></i>
1281
+ <span class="nav-text">Activitise</span></a>
1282
+ </li>
1283
+ <li>
1284
+ <a class="dropdown-link-item" href="user-account-settings.html">
1285
+ <i class="mdi mdi-settings"></i>
1286
+ <span class="nav-text">Account Setting</span>
1287
+ </a>
1288
+ </li>
1289
+
1290
+ <li class="dropdown-footer">
1291
+ <a class="dropdown-link-item" href="sign-in.html"> <i class="mdi mdi-logout"></i> Log Out </a>
1292
+ </li>
1293
+ </ul>
1294
+ </li>
1295
+ </ul>
1296
+ </div>
1297
+ </nav>
1298
+
1299
+
1300
+ </header>
1301
+
1302
+ <!-- ====================================
1303
+ ——— CONTENT WRAPPER
1304
+ ===================================== -->
1305
+ <div class="content-wrapper">
1306
+ <div class="content"><!-- For Components documentaion -->
1307
+ <div class="card card-default">
1308
+ <div class="px-6 py-4">
1309
+ <p>Mono provides a variety of <span class="text-secondary text-capitalize"> Bootstrap Basic inputs </span> components with a
1310
+ little customization that suits its design standards. For more information, please see the official <a class="font-weight-bold" href="https://getbootstrap.com/docs/4.3/components/forms/" target="_blank"> Bootstrap documentation.</a></p>
1311
+ </div>
1312
+ </div>
1313
+
1314
+ <div class="row">
1315
+ <div class="col-xl-6">
1316
+ <!-- Basic Examples -->
1317
+ <div class="card card-default">
1318
+ <div class="card-header">
1319
+ <h2>Basic Examples</h2>
1320
+ <a class="btn mdi mdi-code-tags" data-toggle="collapse" href="#collapse-basic-input" role="button"
1321
+ aria-expanded="false" aria-controls="collapse-basic-input"> </a>
1322
+
1323
+
1324
+ </div>
1325
+ <div class="card-body">
1326
+ <div class="collapse" id="collapse-basic-input">
1327
+ <pre class="language-html mb-4">
1328
+ <code >
1329
+ &lt;form&gt;
1330
+ &lt;div class="form-group"&gt;
1331
+ &lt;label for="exampleFormControlInput1"&gt;Email address&lt;/label&gt;
1332
+ &lt;input type="email" class="form-control" id="exampleFormControlInput1" placeholder="Enter Email"&gt;
1333
+ &lt;span class="mt-2 d-block"&gt;We'll never share your email with anyone else.&lt;/span&gt;
1334
+ &lt;/div&gt;
1335
+ &lt;div class="form-group"&gt;
1336
+ &lt;label for="exampleFormControlPassword"&gt;Password&lt;/label&gt;
1337
+ &lt;input type="password" class="form-control" id="exampleFormControlPassword" placeholder="Password"&gt;
1338
+ &lt;/div&gt;
1339
+ &lt;div class="form-group"&gt;
1340
+ &lt;label for="exampleFormControlSelect12"&gt;Example select&lt;/label&gt;
1341
+ &lt;select class="form-control" id="exampleFormControlSelect12"&gt;
1342
+ &lt;option&gt;1&lt;/option&gt;
1343
+ &lt;option&gt;2&lt;/option&gt;
1344
+ &lt;option&gt;3&lt;/option&gt;
1345
+ &lt;option&gt;4&lt;/option&gt;
1346
+ &lt;option&gt;5&lt;/option&gt;
1347
+ &lt;/select&gt;
1348
+ &lt;/div&gt;
1349
+ &lt;div class="form-group"&gt;
1350
+ &lt;label for="exampleFormControl2"&gt;Example multiple select&lt;/label&gt;
1351
+ &lt;select multiple class="form-control" id="exampleFormControl2"&gt;
1352
+ &lt;option&gt;1&lt;/option&gt;
1353
+ &lt;option&gt;2&lt;/option&gt;
1354
+ &lt;option&gt;3&lt;/option&gt;
1355
+ &lt;option&gt;4&lt;/option&gt;
1356
+ &lt;option&gt;5&lt;/option&gt;
1357
+ &lt;/select&gt;
1358
+ &lt;/div&gt;
1359
+ &lt;div class="form-group"&gt;
1360
+ &lt;label for="exampleFormControlTextarea1"&gt;Example textarea&lt;/label&gt;
1361
+ &lt;textarea class="form-control" id="exampleFormControlTextarea1" rows="3"&gt;&lt;/textarea&gt;
1362
+ &lt;/div&gt;
1363
+ &lt;div class="form-group"&gt;
1364
+ &lt;label for="exampleFormControlFile1"&gt;Example file input&lt;/label&gt;
1365
+ &lt;input type="file" class="form-control-file" id="exampleFormControlFile1"&gt;
1366
+ &lt;/div&gt;
1367
+ &lt;div class="form-footer mt-6"&gt;
1368
+ &lt;button type="submit" class="btn btn-primary btn-pill"&gt;Submit&lt;/button&gt;
1369
+ &lt;button type="submit" class="btn btn-light btn-pill"&gt;Cancel&lt;/button&gt;
1370
+ &lt;/div&gt;
1371
+ &lt;/form&gt;
1372
+
1373
+ </code>
1374
+ </pre>
1375
+ </div>
1376
+ <form>
1377
+ <div class="form-group">
1378
+ <label for="exampleFormControlInput2">Email address</label>
1379
+ <input type="email" class="form-control" id="exampleFormControlInput2" placeholder="Enter Email">
1380
+ <span class="mt-2 d-block">We'll never share your email with anyone else.</span>
1381
+ </div>
1382
+ <div class="form-group">
1383
+ <label for="exampleFormControlPassword">Password</label>
1384
+ <input type="password" class="form-control" id="exampleFormControlPassword" placeholder="Password">
1385
+ </div>
1386
+ <div class="form-group">
1387
+ <label for="exampleFormControlSelect12">Example select</label>
1388
+ <select class="form-control" id="exampleFormControlSelect12">
1389
+ <option>1</option>
1390
+ <option>2</option>
1391
+ <option>3</option>
1392
+ <option>4</option>
1393
+ <option>5</option>
1394
+ </select>
1395
+ </div>
1396
+ <div class="form-group">
1397
+ <label for="exampleFormControl2">Example multiple select</label>
1398
+ <select multiple class="form-control" id="exampleFormControl2">
1399
+ <option>1</option>
1400
+ <option>2</option>
1401
+ <option>3</option>
1402
+ <option>4</option>
1403
+ <option>5</option>
1404
+ </select>
1405
+ </div>
1406
+ <div class="form-group">
1407
+ <label for="exampleFormControlTextarea1">Example textarea</label>
1408
+ <textarea class="form-control" id="exampleFormControlTextarea1" rows="3"></textarea>
1409
+ </div>
1410
+ <div class="form-group">
1411
+ <label for="exampleFormControlFile1">Example file input</label>
1412
+ <input type="file" class="form-control-file" id="exampleFormControlFile1">
1413
+ </div>
1414
+ <div class="form-footer mt-6">
1415
+ <button type="submit" class="btn btn-primary btn-pill">Submit</button>
1416
+ <button type="submit" class="btn btn-light btn-pill">Cancel</button>
1417
+ </div>
1418
+ </form>
1419
+
1420
+ </div>
1421
+ </div>
1422
+
1423
+ <!-- Custom Styles -->
1424
+ <div class="card card-default">
1425
+ <div class="card-header">
1426
+ <h2>Custom Styles</h2>
1427
+ <a class="btn mdi mdi-code-tags" data-toggle="collapse" href="#collapse-custom-input" role="button"
1428
+ aria-expanded="false" aria-controls="collapse-custom-input"> </a>
1429
+
1430
+
1431
+ </div>
1432
+ <div class="card-body">
1433
+ <div class="collapse" id="collapse-custom-input">
1434
+ <pre class="language-html mb-4">
1435
+ <code >
1436
+ &lt;form&gt;
1437
+ &lt;div class="row"&gt;
1438
+ &lt;div class="col-sm-6"&gt;
1439
+ &lt;div class="form-group"&gt;
1440
+ &lt;label for="fname"&gt;First name&lt;/label&gt;
1441
+ &lt;input type="text" class="form-control" placeholder="John"&gt;
1442
+ &lt;/div&gt;
1443
+ &lt;/div&gt;
1444
+ &lt;div class="col-sm-6"&gt;
1445
+ &lt;div class="form-group"&gt;
1446
+ &lt;label for="lname"&gt;Last name&lt;/label&gt;
1447
+ &lt;input type="text" class="form-control" placeholder="Smith"&gt;
1448
+ &lt;/div&gt;
1449
+ &lt;/div&gt;
1450
+ &lt;div class="col-sm-6"&gt;
1451
+ &lt;div class="form-group"&gt;
1452
+ &lt;label for="city"&gt;City&lt;/label&gt;
1453
+ &lt;input type="text" class="form-control" placeholder="City Name"&gt;
1454
+ &lt;/div&gt;
1455
+ &lt;/div&gt;
1456
+ &lt;div class="col-sm-6"&gt;
1457
+ &lt;div class="row"&gt;
1458
+ &lt;div class="col-6"&gt;
1459
+ &lt;div class="form-group"&gt;
1460
+ &lt;label for="State"&gt;State&lt;/label&gt;
1461
+ &lt;input type="text" class="form-control" placeholder="State"&gt;
1462
+ &lt;/div&gt;
1463
+ &lt;/div&gt;
1464
+ &lt;div class="col-6"&gt;
1465
+ &lt;div class="form-group"&gt;
1466
+ &lt;label for="Zip"&gt;Zip&lt;/label&gt;
1467
+ &lt;input type="text" class="form-control" placeholder="Zip"&gt;
1468
+ &lt;/div&gt;
1469
+ &lt;/div&gt;
1470
+ &lt;/div&gt;
1471
+ &lt;/div&gt;
1472
+ &lt;/div&gt;
1473
+ &lt;div class="form-footer pt-5 border-top"&gt;
1474
+ &lt;button type="submit" class="btn btn-primary btn-pill"&gt;Submit&lt;/button&gt;
1475
+ &lt;/div&gt;
1476
+ </form>
1477
+
1478
+ </code>
1479
+ </pre>
1480
+ </div>
1481
+ <form>
1482
+ <div class="row">
1483
+ <div class="col-sm-6">
1484
+ <div class="form-group">
1485
+ <label for="fname">First name</label>
1486
+ <input type="text" class="form-control" placeholder="John">
1487
+ </div>
1488
+ </div>
1489
+ <div class="col-sm-6">
1490
+ <div class="form-group">
1491
+ <label for="lname">Last name</label>
1492
+ <input type="text" class="form-control" placeholder="Smith">
1493
+ </div>
1494
+ </div>
1495
+ <div class="col-sm-6">
1496
+ <div class="form-group">
1497
+ <label for="city">City</label>
1498
+ <input type="text" class="form-control" placeholder="City Name">
1499
+ </div>
1500
+ </div>
1501
+ <div class="col-sm-6">
1502
+ <div class="row">
1503
+ <div class="col-6">
1504
+ <div class="form-group">
1505
+ <label for="State">State</label>
1506
+ <input type="text" class="form-control" placeholder="State">
1507
+ </div>
1508
+ </div>
1509
+ <div class="col-6">
1510
+ <div class="form-group">
1511
+ <label for="Zip">Zip</label>
1512
+ <input type="text" class="form-control" placeholder="Zip">
1513
+ </div>
1514
+ </div>
1515
+ </div>
1516
+ </div>
1517
+ </div>
1518
+ <div class="form-footer pt-5 border-top">
1519
+ <button type="submit" class="btn btn-primary btn-pill">Submit</button>
1520
+ </div>
1521
+ </form>
1522
+ </div>
1523
+ </div>
1524
+
1525
+ <!-- Inline Form -->
1526
+ <div class="card card-default">
1527
+ <div class="card-header">
1528
+ <h2>Inline Form</h2>
1529
+ <a class="btn mdi mdi-code-tags" data-toggle="collapse" href="#collapse-inline-input" role="button"
1530
+ aria-expanded="false" aria-controls="collapse-inline-input"> </a>
1531
+
1532
+
1533
+ </div>
1534
+ <div class="card-body">
1535
+ <div class="collapse" id="collapse-inline-input">
1536
+ <pre class="language-html mb-4">
1537
+ <code >
1538
+ &lt;form class="form-inline"&gt;
1539
+ &lt;label class="sr-only" for="inlineFormInputName2"&gt;Name&lt;/label&gt;
1540
+ &lt;input type="text" class="form-control mb-2 mr-sm-2" id="inlineFormInputName2" placeholder="Jane Doe"&gt;
1541
+ &lt;label class="sr-only" for="inlineFormInputGroupUsername2"&gt;Username&lt;/label&gt;
1542
+ &lt;div class="input-group mb-2 mr-sm-2"&gt;
1543
+ &lt;div class="input-group-prepend"&gt;
1544
+ &lt;div class="input-group-text"&gt;@&lt;/div&gt;
1545
+ &lt;/div&gt;
1546
+ &lt;input type="text" class="form-control" id="inlineFormInputGroupUsername2" placeholder="Username"&gt;
1547
+ &lt;/div&gt;
1548
+ &lt;button type="submit" class="btn btn-primary btn-pill mb-2"&gt;Submit&lt;/button&gt;
1549
+ &lt;/form&gt;
1550
+ &lt;form&gt;
1551
+ &lt;p class="text-dark mb-4"&gt;Custom form controls and selects are also supported.&lt;/p&gt;
1552
+ &lt;label class="text-dark"&gt;Preference&lt;/label&gt;
1553
+ &lt;select class="custom-select my-1 mr-sm-2 w-auto" id="inlineFormCustomSelectPref"&gt;
1554
+ &lt;option selected&gt;Choose...&lt;/option&gt;
1555
+ &lt;option value="1"&gt;One&lt;/option&gt;
1556
+ &lt;option value="2"&gt;Two&lt;/option&gt;
1557
+ &lt;option value="3"&gt;Three&lt;/option&gt;
1558
+ &lt;/select&gt;
1559
+ &lt;label class="control control-checkbox d-inline-block"&gt;Remember my preference
1560
+ &lt;input type="checkbox" name="checkbox1" /&gt;
1561
+ &lt;div class="control-indicator"&gt;&lt;/div&gt;
1562
+ &lt;/label&gt;
1563
+ &lt;button type="submit" class="btn btn-primary btn-pill ml-2"&gt;Submit&lt;/button&gt;
1564
+ &lt;/form&gt;
1565
+ </code>
1566
+ </pre>
1567
+ </div>
1568
+ <p class="text-dark mb-3">Auto-sizing</p>
1569
+ <form class="form-inline">
1570
+ <label class="sr-only" for="inlineFormInputName2">Name</label>
1571
+ <input type="text" class="form-control mb-2 mr-sm-2" id="inlineFormInputName2" placeholder="Jane Doe">
1572
+ <label class="sr-only" for="inlineFormInputGroupUsername2">Username</label>
1573
+ <div class="input-group mb-2 mr-sm-2">
1574
+ <div class="input-group-prepend">
1575
+ <div class="input-group-text">@</div>
1576
+ </div>
1577
+ <input type="text" class="form-control" id="inlineFormInputGroupUsername2" placeholder="Username">
1578
+ </div>
1579
+ <button type="submit" class="btn btn-primary btn-pill mb-2">Submit</button>
1580
+ </form>
1581
+ <hr>
1582
+ <form>
1583
+ <p class="text-dark mb-4">Custom form controls and selects are also supported.</p>
1584
+ <label class="text-dark">Preference</label>
1585
+ <select class="custom-select my-1 mr-sm-2 w-auto" id="inlineFormCustomSelectPref">
1586
+ <option selected>Choose...</option>
1587
+ <option value="1">One</option>
1588
+ <option value="2">Two</option>
1589
+ <option value="3">Three</option>
1590
+ </select>
1591
+ <label class="control control-checkbox d-inline-block">Remember my preference
1592
+ <input type="checkbox" name="checkbox1" />
1593
+ <div class="control-indicator"></div>
1594
+ </label>
1595
+ <button type="submit" class="btn btn-primary btn-pill ml-2">Submit</button>
1596
+ </form>
1597
+ </div>
1598
+ </div>
1599
+
1600
+ <!-- Form Pill -->
1601
+ <div class="card card-default">
1602
+ <div class="card-header">
1603
+ <h2>Form Pill</h2>
1604
+ <a class="btn mdi mdi-code-tags" data-toggle="collapse" href="#collapse-input-pill" role="button"
1605
+ aria-expanded="false" aria-controls="collapse-input-pill"> </a>
1606
+
1607
+
1608
+ </div>
1609
+ <div class="card-body">
1610
+ <div class="collapse" id="collapse-input-pill">
1611
+ <pre class="language-html mb-4">
1612
+ <code >
1613
+ &lt;form&gt;
1614
+ &lt;div class="form-group"&gt;
1615
+ &lt;label for="exampleFormControlInput3"&gt;Email address&lt;/label&gt;
1616
+ &lt;input type="email" class="form-control rounded-pill" id="exampleFormControlInput3" placeholder="Enter Email"&gt;
1617
+ &lt;span class="mt-2 d-block"&gt;We'll never share your email with anyone else.&lt;/span&gt;
1618
+ &lt;/div&gt;
1619
+ &lt;div class="form-group"&gt;
1620
+ &lt;label for="exampleFormControlPassword31"&gt;Password&lt;/label&gt;
1621
+ &lt;input type="password" class="form-control rounded-pill" id="exampleFormControlPassword31" placeholder="Password"&gt;
1622
+ &lt;/div&gt;
1623
+ &lt;div class="form-group"&gt;
1624
+ &lt;label for="exampleFormControlSelect13"&gt;Example select&lt;/label&gt;
1625
+ &lt;select class="form-control rounded-pill" id="exampleFormControlSelect13"&gt;
1626
+ &lt;option&gt;1&lt;/option&gt;
1627
+ &lt;option&gt;2&lt;/option&gt;
1628
+ &lt;option&gt;3&lt;/option&gt;
1629
+ &lt;option&gt;4&lt;/option&gt;
1630
+ &lt;option&gt;5&lt;/option&gt;
1631
+ &lt;/select&gt;
1632
+ &lt;/div&gt;
1633
+ &lt;div class="form-footer mt-4"&gt;
1634
+ &lt;button type="submit" class="btn btn-primary btn-pill"&gt;Submit&lt;/button&gt;
1635
+ &lt;button type="submit" class="btn btn-light btn-pill"&gt;Cancel&lt;/button&gt;
1636
+ &lt;/div&gt;
1637
+ &lt;/form&gt;
1638
+
1639
+ </code>
1640
+ </pre>
1641
+ </div>
1642
+ <form>
1643
+ <div class="form-group">
1644
+ <label for="exampleFormControlInput3">Email address</label>
1645
+ <input type="email" class="form-control rounded-pill" id="exampleFormControlInput3" placeholder="Enter Email">
1646
+ <span class="mt-2 d-block">We'll never share your email with anyone else.</span>
1647
+ </div>
1648
+ <div class="form-group">
1649
+ <label for="exampleFormControlPassword12">Password</label>
1650
+ <input type="password" class="form-control rounded-pill" id="exampleFormControlPassword12" placeholder="Password">
1651
+ </div>
1652
+ <div class="form-group">
1653
+ <label for="exampleFormControlSelect13">Example select</label>
1654
+ <select class="form-control rounded-pill" id="exampleFormControlSelect13">
1655
+ <option>1</option>
1656
+ <option>2</option>
1657
+ <option>3</option>
1658
+ <option>4</option>
1659
+ <option>5</option>
1660
+ </select>
1661
+ </div>
1662
+ <div class="form-footer mt-4">
1663
+ <button type="submit" class="btn btn-primary btn-pill">Submit</button>
1664
+ <button type="submit" class="btn btn-light btn-pill">Cancel</button>
1665
+ </div>
1666
+ </form>
1667
+ </div>
1668
+ </div>
1669
+
1670
+
1671
+
1672
+ </div>
1673
+ <div class="col-xl-6">
1674
+ <!-- Form Square -->
1675
+ <div class="card card-default">
1676
+ <div class="card-header">
1677
+ <h2>Form Square</h2>
1678
+ <a class="btn mdi mdi-code-tags" data-toggle="collapse" href="#collapse-input-square" role="button"
1679
+ aria-expanded="false" aria-controls="collapse-input-square"> </a>
1680
+
1681
+
1682
+ </div>
1683
+ <div class="card-body">
1684
+ <div class="collapse" id="collapse-input-square">
1685
+ <pre class="language-html mb-4">
1686
+ <code >
1687
+ &lt;form&gt;
1688
+ &lt;div class="form-group"&gt;
1689
+ &lt;label for="exampleFormControlInput4"&gt;Email address&lt;/label&gt;
1690
+ &lt;input type="email" class="form-control rounded-0" id="exampleFormControlInput4" placeholder="Enter Email"&gt;
1691
+ &lt;span class="mt-2 d-block"&gt;We'll never share your email with anyone else.&lt;/span&gt;
1692
+ &lt;/div&gt;
1693
+ &lt;div class="form-group"&gt;
1694
+ &lt;label for="exampleFormControlPasswor3"&gt;Password&lt;/label&gt;
1695
+ &lt;input type="password" class="form-control rounded-0" id="exampleFormControlPasswor3" placeholder="Password"&gt;
1696
+ &lt;/div&gt;
1697
+ &lt;div class="form-group"&gt;
1698
+ &lt;label for="exampleFormControlSelect14"&gt;Example select&lt;/label&gt;
1699
+ &lt;select class="form-control rounded-0" id="exampleFormControlSelect14"&gt;
1700
+ &lt;option&gt;1&lt;/option&gt;
1701
+ &lt;option&gt;2&lt;/option&gt;
1702
+ &lt;option&gt;3&lt;/option&gt;
1703
+ &lt;option&gt;4&lt;/option&gt;
1704
+ &lt;option&gt;5&lt;/option&gt;
1705
+ &lt;/select&gt;
1706
+ &lt;/div&gt;
1707
+ &lt;div class="form-footer"&gt;
1708
+ &lt;button type="submit" class="btn btn-secondary btn-pill"&gt;Submit&lt;/button&gt;
1709
+ &lt;button type="submit" class="btn btn-light btn-pill"&gt;Cancel&lt;/button&gt;
1710
+ &lt;/div&gt;
1711
+
1712
+ &lt;/form&gt;
1713
+
1714
+ </code>
1715
+ </pre>
1716
+ </div>
1717
+ <form>
1718
+ <div class="form-group">
1719
+ <label for="exampleFormControlInput44">Email address</label>
1720
+ <input type="email" class="form-control rounded-0" id="exampleFormControlInput4" placeholder="Enter Email">
1721
+ <span class="mt-2 d-block">We'll never share your email with anyone else.</span>
1722
+ </div>
1723
+ <div class="form-group">
1724
+ <label for="exampleFormControlPasswor3">Password</label>
1725
+ <input type="password" class="form-control rounded-0" id="exampleFormControlPasswor3" placeholder="Password">
1726
+ </div>
1727
+ <div class="form-group">
1728
+ <label for="exampleFormControlSelect14">Example select</label>
1729
+ <select class="form-control rounded-0" id="exampleFormControlSelect14">
1730
+ <option>1</option>
1731
+ <option>2</option>
1732
+ <option>3</option>
1733
+ <option>4</option>
1734
+ <option>5</option>
1735
+ </select>
1736
+ </div>
1737
+ <div class="form-footer">
1738
+ <button type="submit" class="btn btn-secondary btn-pill">Submit</button>
1739
+ <button type="submit" class="btn btn-light btn-pill">Cancel</button>
1740
+ </div>
1741
+
1742
+ </form>
1743
+
1744
+ </div>
1745
+ </div>
1746
+
1747
+ <!-- Solid Style Input -->
1748
+ <div class="card card-default">
1749
+ <div class="card-header">
1750
+ <h2>Solid Style Input</h2>
1751
+ <a class="btn mdi mdi-code-tags" data-toggle="collapse" href="#collapse-input-light-bg" role="button"
1752
+ aria-expanded="false" aria-controls="collapse-input-light-bg"> </a>
1753
+
1754
+
1755
+ </div>
1756
+ <div class="card-body">
1757
+ <div class="collapse" id="collapse-input-light-bg">
1758
+ <pre class="language-html mb-4">
1759
+ <code >
1760
+ &lt;form&gt;
1761
+ &lt;div class="form-group"&gt;
1762
+ &lt;label for="exampleFormControlInput5"&gt;Email address&lt;/label&gt;
1763
+ &lt;input type="email" class="form-control rounded-0 bg-light" id="exampleFormControlInput5" placeholder="Enter Email"&gt;
1764
+ &lt;span class="mt-2 d-block"&gt;We'll never share your email with anyone else.&lt;/span&gt;
1765
+ &lt;/div&gt;
1766
+ &lt;div class="form-group"&gt;
1767
+ &lt;label for="exampleFormControlPassword4"&gt;Password&lt;/label&gt;
1768
+ &lt;input type="password" class="form-control rounded-0 bg-light" id="exampleFormControlPassword4"
1769
+ placeholder="Password"&gt;
1770
+ &lt;/div&gt;
1771
+ &lt;div class="form-group"&gt;
1772
+ &lt;label for="exampleFormControlSelect15"&gt;Example select&lt;/label&gt;
1773
+ &lt;select class="form-control rounded-0 bg-light" id="exampleFormControlSelect15"&gt;
1774
+ &lt;option&gt;1&lt;/option&gt;
1775
+ &lt;option&gt;2&lt;/option&gt;
1776
+ &lt;option&gt;3&lt;/option&gt;
1777
+ &lt;option&gt;4&lt;/option&gt;
1778
+ &lt;option&gt;5&lt;/option&gt;
1779
+ &lt;/select&gt;
1780
+ &lt;/div&gt;
1781
+ &lt;div class="form-footer"&gt;
1782
+ &lt;button type="submit" class="btn btn-secondary btn-pill"&gt;Submit&lt;/button&gt;
1783
+ &lt;button type="submit" class="btn btn-light btn-pill"&gt;Cancel&lt;/button&gt;
1784
+ &lt;/div&gt;
1785
+ &lt;/form&gt;
1786
+
1787
+ </code>
1788
+ </pre>
1789
+ </div>
1790
+ <form>
1791
+ <div class="form-group">
1792
+ <label for="exampleFormControlInput5">Email address</label>
1793
+ <input type="email" class="form-control rounded-0 bg-light" id="exampleFormControlInput5" placeholder="Enter Email">
1794
+ <span class="mt-2 d-block">We'll never share your email with anyone else.</span>
1795
+ </div>
1796
+ <div class="form-group">
1797
+ <label for="exampleFormControlPassword4">Password</label>
1798
+ <input type="password" class="form-control rounded-0 bg-light" id="exampleFormControlPassword4" placeholder="Password">
1799
+ </div>
1800
+ <div class="form-group">
1801
+ <label for="exampleFormControlSelect16">Example select</label>
1802
+ <select class="form-control rounded-0 bg-light" id="exampleFormControlSelect16">
1803
+ <option>1</option>
1804
+ <option>2</option>
1805
+ <option>3</option>
1806
+ <option>4</option>
1807
+ <option>5</option>
1808
+ </select>
1809
+ </div>
1810
+ <div class="form-footer">
1811
+ <button type="submit" class="btn btn-secondary btn-pill">Submit</button>
1812
+ <button type="submit" class="btn btn-light btn-pill">Cancel</button>
1813
+ </div>
1814
+ </form>
1815
+
1816
+ </div>
1817
+ </div>
1818
+
1819
+ <!-- Disabled Form -->
1820
+ <div class="card card-default">
1821
+ <div class="card-header">
1822
+ <h2>Disabled Form</h2>
1823
+ <a class="btn mdi mdi-code-tags" data-toggle="collapse" href="#collapse-input-disabled" role="button"
1824
+ aria-expanded="false" aria-controls="collapse-input-disabled"> </a>
1825
+
1826
+
1827
+ </div>
1828
+ <div class="card-body">
1829
+ <div class="collapse" id="collapse-input-disabled">
1830
+ <pre class="language-html mb-4">
1831
+ <code >
1832
+ &lt;form&gt;
1833
+ &lt;fieldset disabled&gt;
1834
+ &lt;div class="form-group"&gt;
1835
+ &lt;label for="disabledTextInput"&gt;Disabled input&lt;/label&gt;
1836
+ &lt;input type="text" id="disabledTextInput" class="form-control" placeholder="Disabled input"&gt;
1837
+ &lt;/div&gt;
1838
+ &lt;div class="form-group"&gt;
1839
+ &lt;label for="disabledSelect"&gt;Disabled select menu&lt;/label&gt;
1840
+ &lt;select id="disabledSelect" class="form-control"&gt;
1841
+ &lt;option&gt;Disabled select&lt;/option&gt;
1842
+ &lt;/select&gt;
1843
+ &lt;/div&gt;
1844
+ &lt;div class="form-group"&gt;
1845
+ &lt;div class="form-check"&gt;
1846
+ &lt;input class="form-check-input" type="checkbox" id="disabledFieldsetCheck" disabled&gt;
1847
+ &lt;label class="form-check-label" for="disabledFieldsetCheck"&gt;
1848
+ Can't check this
1849
+ &lt;/label&gt;
1850
+ &lt;/div&gt;
1851
+ &lt;/div&gt;
1852
+ &lt;button type="submit" class="btn btn-primary"&gt;Submit&lt;/button&gt;
1853
+ &lt;/fieldset&gt;
1854
+ &lt;/form&gt;
1855
+
1856
+ </code>
1857
+ </pre>
1858
+ </div>
1859
+ <form>
1860
+ <fieldset disabled>
1861
+ <div class="form-group">
1862
+ <label for="disabledTextInput">Disabled input</label>
1863
+ <input type="text" id="disabledTextInput" class="form-control" placeholder="Disabled input">
1864
+ </div>
1865
+ <div class="form-group">
1866
+ <label for="disabledSelect">Disabled select menu</label>
1867
+ <select id="disabledSelect" class="form-control">
1868
+ <option>Disabled select</option>
1869
+ </select>
1870
+ </div>
1871
+ <div class="form-group">
1872
+ <div class="form-check">
1873
+ <input class="form-check-input" type="checkbox" id="disabledFieldsetCheck" disabled>
1874
+ <label class="form-check-label" for="disabledFieldsetCheck">
1875
+ Can't check this
1876
+ </label>
1877
+ </div>
1878
+ </div>
1879
+ <button type="submit" class="btn btn-primary">Submit</button>
1880
+ </fieldset>
1881
+ </form>
1882
+
1883
+ </div>
1884
+ </div>
1885
+
1886
+ <!-- Form Sizing -->
1887
+ <div class="card card-default">
1888
+ <div class="card-header">
1889
+ <h2>Form Sizing</h2>
1890
+ <a class="btn mdi mdi-code-tags" data-toggle="collapse" href="#collapse-input-sizing" role="button"
1891
+ aria-expanded="false" aria-controls="collapse-input-sizing"> </a>
1892
+
1893
+
1894
+ </div>
1895
+ <div class="card-body">
1896
+ <div class="collapse" id="collapse-input-sizing">
1897
+ <pre class="language-html mb-4">
1898
+ <code >
1899
+ &lt;form&gt;
1900
+ &lt;div class="form-group"&gt;
1901
+ &lt;label for="exampleFormControlInput6"&gt;Large input&lt;/label&gt;
1902
+ &lt;input class="form-control form-control-lg" type="text" placeholder="Large input"&gt;
1903
+ &lt;/div&gt;
1904
+ &lt;div class="form-group"&gt;
1905
+ &lt;label for="exampleFormControlInput7"&gt;Default input&lt;/label&gt;
1906
+ &lt;input class="form-control" type="text" placeholder="Default input"&gt;
1907
+ &lt;/div&gt;
1908
+ &lt;div class="form-group"&gt;
1909
+ &lt;label for="exampleFormControlInput8"&gt;Small input&lt;/label&gt;
1910
+ &lt;input class="form-control form-control-sm" type="text" placeholder="Small input"&gt;
1911
+ &lt;/div&gt;
1912
+ &lt;/form&gt;
1913
+
1914
+ </code>
1915
+ </pre>
1916
+ </div>
1917
+ <form>
1918
+ <div class="form-group">
1919
+ <label for="exampleFormControlInput6">Large input</label>
1920
+ <input class="form-control form-control-lg" type="text" placeholder="Large input">
1921
+ </div>
1922
+ <div class="form-group">
1923
+ <label for="exampleFormControlInput7">Default input</label>
1924
+ <input class="form-control" type="text" placeholder="Default input">
1925
+ </div>
1926
+ <div class="form-group">
1927
+ <label for="exampleFormControlInput8">Small input</label>
1928
+ <input class="form-control form-control-sm" type="text" placeholder="Small input">
1929
+ </div>
1930
+ </form>
1931
+
1932
+ </div>
1933
+ </div>
1934
+
1935
+ <!-- Column Sizing -->
1936
+ <div class="card card-default">
1937
+ <div class="card-header">
1938
+ <h2>Column Sizing</h2>
1939
+ <a class="btn mdi mdi-code-tags" data-toggle="collapse" href="#collapse-colum-sizing" role="button"
1940
+ aria-expanded="false" aria-controls="collapse-colum-sizing"> </a>
1941
+
1942
+
1943
+ </div>
1944
+ <div class="card-body">
1945
+ <div class="collapse" id="collapse-colum-sizing">
1946
+ <pre class="language-html mb-4">
1947
+ <code >
1948
+ &lt;form&gt;
1949
+ &lt;div class="form-row"&gt;
1950
+ &lt;div class="col-6"&gt;
1951
+ &lt;input type="text" class="form-control" placeholder="col-6"&gt;
1952
+ &lt;/div&gt;
1953
+ &lt;div class="col-3"&gt;
1954
+ &lt;input type="text" class="form-control" placeholder="col-3"&gt;
1955
+ &lt;/div&gt;
1956
+ &lt;div class="col-3"&gt;
1957
+ &lt;input type="text" class="form-control" placeholder="col-3"&gt;
1958
+ &lt;/div&gt;
1959
+ &lt;/div&gt;
1960
+ &lt;/form&gt;
1961
+
1962
+ </code>
1963
+ </pre>
1964
+ </div>
1965
+ <form>
1966
+ <div class="form-row">
1967
+ <div class="col-6">
1968
+ <input type="text" class="form-control" placeholder="col-6">
1969
+ </div>
1970
+ <div class="col-3">
1971
+ <input type="text" class="form-control" placeholder="col-3">
1972
+ </div>
1973
+ <div class="col-3">
1974
+ <input type="text" class="form-control" placeholder="col-3">
1975
+ </div>
1976
+ </div>
1977
+ </form>
1978
+
1979
+ </div>
1980
+ </div>
1981
+
1982
+ </div>
1983
+ </div>
1984
+
1985
+ </div>
1986
+
1987
+ </div>
1988
+
1989
+ <!-- Footer -->
1990
+ <footer class="footer mt-auto">
1991
+ <div class="copyright bg-white">
1992
+ <p>
1993
+ &copy; <span id="copy-year"></span> Copyright Mono Dashboard Bootstrap Template by <a class="text-primary" href="http://www.iamabdus.com/" target="_blank" >Abdus</a>.
1994
+ </p>
1995
+ </div>
1996
+ <script>
1997
+ var d = new Date();
1998
+ var year = d.getFullYear();
1999
+ document.getElementById("copy-year").innerHTML = year;
2000
+ </script>
2001
+ </footer>
2002
+
2003
+ </div>
2004
+ </div>
2005
+
2006
+ <!-- Card Offcanvas -->
2007
+ <div class="card card-offcanvas" id="contact-off" >
2008
+ <div class="card-header">
2009
+ <h2>Contacts</h2>
2010
+ <a href="#" class="btn btn-primary btn-pill px-4">Add New</a>
2011
+ </div>
2012
+ <div class="card-body">
2013
+
2014
+ <div class="mb-4">
2015
+ <input type="text" class="form-control form-control-lg form-control-secondary rounded-0" placeholder="Search contacts...">
2016
+ </div>
2017
+
2018
+ <div class="media media-sm">
2019
+ <div class="media-sm-wrapper">
2020
+ <a href="user-profile.html">
2021
+ <img src="images/user/user-sm-01.jpg" alt="User Image">
2022
+ <span class="active bg-primary"></span>
2023
+ </a>
2024
+ </div>
2025
+ <div class="media-body">
2026
+ <a href="user-profile.html">
2027
+ <span class="title">Selena Wagner</span>
2028
+ <span class="discribe">Designer</span>
2029
+ </a>
2030
+ </div>
2031
+ </div>
2032
+
2033
+ <div class="media media-sm">
2034
+ <div class="media-sm-wrapper">
2035
+ <a href="user-profile.html">
2036
+ <img src="images/user/user-sm-02.jpg" alt="User Image">
2037
+ <span class="active bg-primary"></span>
2038
+ </a>
2039
+ </div>
2040
+ <div class="media-body">
2041
+ <a href="user-profile.html">
2042
+ <span class="title">Walter Reuter</span>
2043
+ <span>Developer</span>
2044
+ </a>
2045
+ </div>
2046
+ </div>
2047
+
2048
+ <div class="media media-sm">
2049
+ <div class="media-sm-wrapper">
2050
+ <a href="user-profile.html">
2051
+ <img src="images/user/user-sm-03.jpg" alt="User Image">
2052
+ </a>
2053
+ </div>
2054
+ <div class="media-body">
2055
+ <a href="user-profile.html">
2056
+ <span class="title">Larissa Gebhardt</span>
2057
+ <span>Cyber Punk</span>
2058
+ </a>
2059
+ </div>
2060
+ </div>
2061
+
2062
+ <div class="media media-sm">
2063
+ <div class="media-sm-wrapper">
2064
+ <a href="user-profile.html">
2065
+ <img src="images/user/user-sm-04.jpg" alt="User Image">
2066
+ </a>
2067
+
2068
+ </div>
2069
+ <div class="media-body">
2070
+ <a href="user-profile.html">
2071
+ <span class="title">Albrecht Straub</span>
2072
+ <span>Photographer</span>
2073
+ </a>
2074
+ </div>
2075
+ </div>
2076
+
2077
+ <div class="media media-sm">
2078
+ <div class="media-sm-wrapper">
2079
+ <a href="user-profile.html">
2080
+ <img src="images/user/user-sm-05.jpg" alt="User Image">
2081
+ <span class="active bg-danger"></span>
2082
+ </a>
2083
+ </div>
2084
+ <div class="media-body">
2085
+ <a href="user-profile.html">
2086
+ <span class="title">Leopold Ebert</span>
2087
+ <span>Fashion Designer</span>
2088
+ </a>
2089
+ </div>
2090
+ </div>
2091
+
2092
+ <div class="media media-sm">
2093
+ <div class="media-sm-wrapper">
2094
+ <a href="user-profile.html">
2095
+ <img src="images/user/user-sm-06.jpg" alt="User Image">
2096
+ <span class="active bg-primary"></span>
2097
+ </a>
2098
+ </div>
2099
+ <div class="media-body">
2100
+ <a href="user-profile.html">
2101
+ <span class="title">Selena Wagner</span>
2102
+ <span>Photographer</span>
2103
+ </a>
2104
+ </div>
2105
+ </div>
2106
+
2107
+ </div>
2108
+ </div>
2109
+
2110
+
2111
+
2112
+
2113
+ <script src="plugins/jquery/jquery.min.js"></script>
2114
+ <script src="plugins/bootstrap/js/bootstrap.bundle.min.js"></script>
2115
+ <script src="plugins/simplebar/simplebar.min.js"></script>
2116
+ <script src="https://unpkg.com/hotkeys-js/dist/hotkeys.min.js"></script>
2117
+
2118
+
2119
+
2120
+ <script src="plugins/prism/prism.js"></script>
2121
+
2122
+
2123
+ <script src="js/mono.js"></script>
2124
+ <script src="js/chart.js"></script>
2125
+ <script src="js/map.js"></script>
2126
+ <script src="js/custom.js"></script>
2127
+
2128
+
2129
+
2130
+
2131
+ <!-- -->
2132
+
2133
+
2134
+ </body>
2135
+ </html>
bootstarp-tables.html ADDED
@@ -0,0 +1,2375 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+
3
+ <!--
4
+ // WEBSITE: https://themefisher.com
5
+ // TWITTER: https://twitter.com/themefisher
6
+ // FACEBOOK: https://www.facebook.com/themefisher
7
+ // GITHUB: https://github.com/themefisher/
8
+ -->
9
+
10
+ <html lang="en" dir="ltr">
11
+ <head>
12
+ <meta charset="utf-8" />
13
+ <meta http-equiv="X-UA-Compatible" content="IE=edge" />
14
+ <meta name="viewport" content="width=device-width, initial-scale=1" />
15
+
16
+ <title>Mono - Responsive Admin & Dashboard Template</title>
17
+
18
+ <!-- GOOGLE FONTS -->
19
+ <link href="https://fonts.googleapis.com/css?family=Karla:400,700|Roboto" rel="stylesheet">
20
+ <link href="plugins/material/css/materialdesignicons.min.css" rel="stylesheet" />
21
+ <link href="plugins/simplebar/simplebar.css" rel="stylesheet" />
22
+
23
+ <!-- PLUGINS CSS STYLE -->
24
+ <link href="plugins/nprogress/nprogress.css" rel="stylesheet" />
25
+
26
+
27
+ <link href="plugins/prism/prism.css" rel="stylesheet" />
28
+
29
+
30
+
31
+ <link href="plugins/DataTables/DataTables-1.10.18/css/jquery.dataTables.min.css" rel="stylesheet" />
32
+
33
+
34
+
35
+
36
+ <!-- MONO CSS -->
37
+ <link id="main-css-href" rel="stylesheet" href="css/style.css" />
38
+
39
+
40
+
41
+
42
+ <!-- FAVICON -->
43
+ <link href="images/favicon.png" rel="shortcut icon" />
44
+
45
+ <!--
46
+ HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries
47
+ -->
48
+ <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
49
+ <!--[if lt IE 9]>
50
+ <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
51
+ <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
52
+ <![endif]-->
53
+ <script src="plugins/nprogress/nprogress.js"></script>
54
+ </head>
55
+
56
+
57
+ <body class="navbar-fixed sidebar-fixed" id="body">
58
+ <script>
59
+ NProgress.configure({ showSpinner: false });
60
+ NProgress.start();
61
+ </script>
62
+
63
+
64
+
65
+ <!-- ====================================
66
+ ——— WRAPPER
67
+ ===================================== -->
68
+ <div class="wrapper">
69
+
70
+
71
+ <!-- ====================================
72
+ ——— LEFT SIDEBAR WITH OUT FOOTER
73
+ ===================================== -->
74
+ <aside class="left-sidebar sidebar-dark" id="left-sidebar">
75
+ <div id="sidebar" class="sidebar sidebar-with-footer">
76
+ <!-- Aplication Brand -->
77
+ <div class="app-brand">
78
+ <a href="/index.html">
79
+ <img src="images/logo.png" alt="Mono">
80
+ <span class="brand-name">MONO</span>
81
+ </a>
82
+ </div>
83
+ <!-- begin sidebar scrollbar -->
84
+ <div class="sidebar-left" data-simplebar style="height: 100%;">
85
+ <!-- sidebar menu -->
86
+ <ul class="nav sidebar-inner" id="sidebar-menu">
87
+
88
+
89
+
90
+ <li
91
+ >
92
+ <a class="sidenav-item-link" href="index.html">
93
+ <i class="mdi mdi-briefcase-account-outline"></i>
94
+ <span class="nav-text">Business Dashboard</span>
95
+ </a>
96
+ </li>
97
+
98
+
99
+
100
+
101
+
102
+ <li
103
+ >
104
+ <a class="sidenav-item-link" href="analytics.html">
105
+ <i class="mdi mdi-chart-line"></i>
106
+ <span class="nav-text">Analytics Dashboard</span>
107
+ </a>
108
+ </li>
109
+
110
+
111
+
112
+
113
+
114
+ <li class="section-title">
115
+ Apps
116
+ </li>
117
+
118
+
119
+
120
+
121
+
122
+ <li
123
+ >
124
+ <a class="sidenav-item-link" href="chat.html">
125
+ <i class="mdi mdi-wechat"></i>
126
+ <span class="nav-text">Chat</span>
127
+ </a>
128
+ </li>
129
+
130
+
131
+
132
+
133
+
134
+ <li
135
+ >
136
+ <a class="sidenav-item-link" href="contacts.html">
137
+ <i class="mdi mdi-phone"></i>
138
+ <span class="nav-text">Contacts</span>
139
+ </a>
140
+ </li>
141
+
142
+
143
+
144
+
145
+
146
+ <li
147
+ >
148
+ <a class="sidenav-item-link" href="team.html">
149
+ <i class="mdi mdi-account-group"></i>
150
+ <span class="nav-text">Team</span>
151
+ </a>
152
+ </li>
153
+
154
+
155
+
156
+
157
+
158
+ <li
159
+ >
160
+ <a class="sidenav-item-link" href="calendar.html">
161
+ <i class="mdi mdi-calendar-check"></i>
162
+ <span class="nav-text">Calendar</span>
163
+ </a>
164
+ </li>
165
+
166
+
167
+
168
+
169
+
170
+ <li class="has-sub" >
171
+ <a class="sidenav-item-link" href="javascript:void(0)" data-toggle="collapse" data-target="#email"
172
+ aria-expanded="false" aria-controls="email">
173
+ <i class="mdi mdi-email"></i>
174
+ <span class="nav-text">email</span> <b class="caret"></b>
175
+ </a>
176
+ <ul class="collapse" id="email"
177
+ data-parent="#sidebar-menu">
178
+ <div class="sub-menu">
179
+
180
+
181
+
182
+ <li >
183
+ <a class="sidenav-item-link" href="email-inbox.html">
184
+ <span class="nav-text">Email Inbox</span>
185
+
186
+ </a>
187
+ </li>
188
+
189
+
190
+
191
+
192
+
193
+
194
+ <li >
195
+ <a class="sidenav-item-link" href="email-details.html">
196
+ <span class="nav-text">Email Details</span>
197
+
198
+ </a>
199
+ </li>
200
+
201
+
202
+
203
+
204
+
205
+
206
+ <li >
207
+ <a class="sidenav-item-link" href="email-compose.html">
208
+ <span class="nav-text">Email Compose</span>
209
+
210
+ </a>
211
+ </li>
212
+
213
+
214
+
215
+
216
+ </div>
217
+ </ul>
218
+ </li>
219
+
220
+
221
+
222
+
223
+
224
+ <li class="section-title">
225
+ UI Elements
226
+ </li>
227
+
228
+
229
+
230
+
231
+
232
+ <li class="has-sub active expand" >
233
+ <a class="sidenav-item-link" href="javascript:void(0)" data-toggle="collapse" data-target="#ui-elements"
234
+ aria-expanded="false" aria-controls="ui-elements">
235
+ <i class="mdi mdi-folder-outline"></i>
236
+ <span class="nav-text">UI Components</span> <b class="caret"></b>
237
+ </a>
238
+ <ul class="collapse show" id="ui-elements"
239
+ data-parent="#sidebar-menu">
240
+ <div class="sub-menu">
241
+
242
+
243
+
244
+ <li >
245
+ <a class="sidenav-item-link" href="alert.html">
246
+ <span class="nav-text">Alert</span>
247
+
248
+ </a>
249
+ </li>
250
+
251
+
252
+
253
+
254
+
255
+
256
+ <li >
257
+ <a class="sidenav-item-link" href="badge.html">
258
+ <span class="nav-text">Badge</span>
259
+
260
+ </a>
261
+ </li>
262
+
263
+
264
+
265
+
266
+
267
+
268
+ <li >
269
+ <a class="sidenav-item-link" href="breadcrumb.html">
270
+ <span class="nav-text">Breadcrumb</span>
271
+
272
+ </a>
273
+ </li>
274
+
275
+
276
+
277
+
278
+
279
+ <li class="has-sub" >
280
+ <a class="sidenav-item-link" href="javascript:void(0)" data-toggle="collapse" data-target="#buttons"
281
+ aria-expanded="false" aria-controls="buttons">
282
+ <span class="nav-text">Buttons</span> <b class="caret"></b>
283
+ </a>
284
+ <ul class="collapse" id="buttons">
285
+ <div class="sub-menu">
286
+
287
+ <li >
288
+ <a href="button-default.html">Button Default</a>
289
+ </li>
290
+
291
+ <li >
292
+ <a href="button-dropdown.html">Button Dropdown</a>
293
+ </li>
294
+
295
+ <li >
296
+ <a href="button-group.html">Button Group</a>
297
+ </li>
298
+
299
+ <li >
300
+ <a href="button-social.html">Button Social</a>
301
+ </li>
302
+
303
+ <li >
304
+ <a href="button-loading.html">Button Loading</a>
305
+ </li>
306
+
307
+ </div>
308
+ </ul>
309
+ </li>
310
+
311
+
312
+
313
+
314
+
315
+ <li >
316
+ <a class="sidenav-item-link" href="card.html">
317
+ <span class="nav-text">Card</span>
318
+
319
+ </a>
320
+ </li>
321
+
322
+
323
+
324
+
325
+
326
+
327
+ <li >
328
+ <a class="sidenav-item-link" href="carousel.html">
329
+ <span class="nav-text">Carousel</span>
330
+
331
+ </a>
332
+ </li>
333
+
334
+
335
+
336
+
337
+
338
+
339
+ <li >
340
+ <a class="sidenav-item-link" href="collapse.html">
341
+ <span class="nav-text">Collapse</span>
342
+
343
+ </a>
344
+ </li>
345
+
346
+
347
+
348
+
349
+
350
+
351
+ <li >
352
+ <a class="sidenav-item-link" href="editor.html">
353
+ <span class="nav-text">Editor</span>
354
+
355
+ </a>
356
+ </li>
357
+
358
+
359
+
360
+
361
+
362
+
363
+ <li >
364
+ <a class="sidenav-item-link" href="list-group.html">
365
+ <span class="nav-text">List Group</span>
366
+
367
+ </a>
368
+ </li>
369
+
370
+
371
+
372
+
373
+
374
+
375
+ <li >
376
+ <a class="sidenav-item-link" href="modal.html">
377
+ <span class="nav-text">Modal</span>
378
+
379
+ </a>
380
+ </li>
381
+
382
+
383
+
384
+
385
+
386
+
387
+ <li >
388
+ <a class="sidenav-item-link" href="pagination.html">
389
+ <span class="nav-text">Pagination</span>
390
+
391
+ </a>
392
+ </li>
393
+
394
+
395
+
396
+
397
+
398
+
399
+ <li >
400
+ <a class="sidenav-item-link" href="popover-tooltip.html">
401
+ <span class="nav-text">Popover & Tooltip</span>
402
+
403
+ </a>
404
+ </li>
405
+
406
+
407
+
408
+
409
+
410
+
411
+ <li >
412
+ <a class="sidenav-item-link" href="progress-bar.html">
413
+ <span class="nav-text">Progress Bar</span>
414
+
415
+ </a>
416
+ </li>
417
+
418
+
419
+
420
+
421
+
422
+
423
+ <li >
424
+ <a class="sidenav-item-link" href="spinner.html">
425
+ <span class="nav-text">Spinner</span>
426
+
427
+ </a>
428
+ </li>
429
+
430
+
431
+
432
+
433
+
434
+
435
+ <li >
436
+ <a class="sidenav-item-link" href="switches.html">
437
+ <span class="nav-text">Switches</span>
438
+
439
+ </a>
440
+ </li>
441
+
442
+
443
+
444
+
445
+
446
+ <li class="has-sub active expand" >
447
+ <a class="sidenav-item-link" href="javascript:void(0)" data-toggle="collapse" data-target="#tables"
448
+ aria-expanded="false" aria-controls="tables">
449
+ <span class="nav-text">Tables</span> <b class="caret"></b>
450
+ </a>
451
+ <ul class="collapse show" id="tables">
452
+ <div class="sub-menu">
453
+
454
+ <li class="active" >
455
+ <a href="bootstarp-tables.html">Bootstrap Tables</a>
456
+ </li>
457
+
458
+ <li >
459
+ <a href="data-tables.html">Data Tables</a>
460
+ </li>
461
+
462
+ </div>
463
+ </ul>
464
+ </li>
465
+
466
+
467
+
468
+
469
+
470
+ <li >
471
+ <a class="sidenav-item-link" href="tab.html">
472
+ <span class="nav-text">Tab</span>
473
+
474
+ </a>
475
+ </li>
476
+
477
+
478
+
479
+
480
+
481
+
482
+ <li >
483
+ <a class="sidenav-item-link" href="toaster.html">
484
+ <span class="nav-text">Toaster</span>
485
+
486
+ </a>
487
+ </li>
488
+
489
+
490
+
491
+
492
+
493
+ <li class="has-sub" >
494
+ <a class="sidenav-item-link" href="javascript:void(0)" data-toggle="collapse" data-target="#icons"
495
+ aria-expanded="false" aria-controls="icons">
496
+ <span class="nav-text">Icons</span> <b class="caret"></b>
497
+ </a>
498
+ <ul class="collapse" id="icons">
499
+ <div class="sub-menu">
500
+
501
+ <li >
502
+ <a href="material-icons.html">Material Icon</a>
503
+ </li>
504
+
505
+ <li >
506
+ <a href="flag-icons.html">Flag Icon</a>
507
+ </li>
508
+
509
+ </div>
510
+ </ul>
511
+ </li>
512
+
513
+
514
+
515
+
516
+ <li class="has-sub" >
517
+ <a class="sidenav-item-link" href="javascript:void(0)" data-toggle="collapse" data-target="#forms"
518
+ aria-expanded="false" aria-controls="forms">
519
+ <span class="nav-text">Forms</span> <b class="caret"></b>
520
+ </a>
521
+ <ul class="collapse" id="forms">
522
+ <div class="sub-menu">
523
+
524
+ <li >
525
+ <a href="basic-input.html">Basic Input</a>
526
+ </li>
527
+
528
+ <li >
529
+ <a href="input-group.html">Input Group</a>
530
+ </li>
531
+
532
+ <li >
533
+ <a href="checkbox-radio.html">Checkbox & Radio</a>
534
+ </li>
535
+
536
+ <li >
537
+ <a href="form-validation.html">Form Validation</a>
538
+ </li>
539
+
540
+ <li >
541
+ <a href="form-advance.html">Form Advance</a>
542
+ </li>
543
+
544
+ </div>
545
+ </ul>
546
+ </li>
547
+
548
+
549
+
550
+
551
+ <li class="has-sub" >
552
+ <a class="sidenav-item-link" href="javascript:void(0)" data-toggle="collapse" data-target="#maps"
553
+ aria-expanded="false" aria-controls="maps">
554
+ <span class="nav-text">Maps</span> <b class="caret"></b>
555
+ </a>
556
+ <ul class="collapse" id="maps">
557
+ <div class="sub-menu">
558
+
559
+ <li >
560
+ <a href="google-maps.html">Google Map</a>
561
+ </li>
562
+
563
+ <li >
564
+ <a href="vector-maps.html">Vector Map</a>
565
+ </li>
566
+
567
+ </div>
568
+ </ul>
569
+ </li>
570
+
571
+
572
+
573
+
574
+ <li class="has-sub" >
575
+ <a class="sidenav-item-link" href="javascript:void(0)" data-toggle="collapse" data-target="#widgets"
576
+ aria-expanded="false" aria-controls="widgets">
577
+ <span class="nav-text">Widgets</span> <b class="caret"></b>
578
+ </a>
579
+ <ul class="collapse" id="widgets">
580
+ <div class="sub-menu">
581
+
582
+ <li >
583
+ <a href="widgets-general.html">General Widget</a>
584
+ </li>
585
+
586
+ <li >
587
+ <a href="widgets-chart.html">Chart Widget</a>
588
+ </li>
589
+
590
+ </div>
591
+ </ul>
592
+ </li>
593
+
594
+
595
+
596
+ </div>
597
+ </ul>
598
+ </li>
599
+
600
+
601
+
602
+
603
+
604
+ <li class="has-sub" >
605
+ <a class="sidenav-item-link" href="javascript:void(0)" data-toggle="collapse" data-target="#charts"
606
+ aria-expanded="false" aria-controls="charts">
607
+ <i class="mdi mdi-chart-pie"></i>
608
+ <span class="nav-text">Charts</span> <b class="caret"></b>
609
+ </a>
610
+ <ul class="collapse" id="charts"
611
+ data-parent="#sidebar-menu">
612
+ <div class="sub-menu">
613
+
614
+
615
+
616
+ <li >
617
+ <a class="sidenav-item-link" href="apex-charts.html">
618
+ <span class="nav-text">Apex Charts</span>
619
+
620
+ </a>
621
+ </li>
622
+
623
+
624
+
625
+
626
+ </div>
627
+ </ul>
628
+ </li>
629
+
630
+
631
+
632
+
633
+
634
+ <li class="section-title">
635
+ Pages
636
+ </li>
637
+
638
+
639
+
640
+
641
+
642
+ <li class="has-sub" >
643
+ <a class="sidenav-item-link" href="javascript:void(0)" data-toggle="collapse" data-target="#users"
644
+ aria-expanded="false" aria-controls="users">
645
+ <i class="mdi mdi-image-filter-none"></i>
646
+ <span class="nav-text">User</span> <b class="caret"></b>
647
+ </a>
648
+ <ul class="collapse" id="users"
649
+ data-parent="#sidebar-menu">
650
+ <div class="sub-menu">
651
+
652
+
653
+
654
+ <li >
655
+ <a class="sidenav-item-link" href="user-profile.html">
656
+ <span class="nav-text">User Profile</span>
657
+
658
+ </a>
659
+ </li>
660
+
661
+
662
+
663
+
664
+
665
+
666
+ <li >
667
+ <a class="sidenav-item-link" href="user-activities.html">
668
+ <span class="nav-text">User Activities</span>
669
+
670
+ </a>
671
+ </li>
672
+
673
+
674
+
675
+
676
+
677
+
678
+ <li >
679
+ <a class="sidenav-item-link" href="user-profile-settings.html">
680
+ <span class="nav-text">User Profile Settings</span>
681
+
682
+ </a>
683
+ </li>
684
+
685
+
686
+
687
+
688
+
689
+
690
+ <li >
691
+ <a class="sidenav-item-link" href="user-account-settings.html">
692
+ <span class="nav-text">User Account Settings</span>
693
+
694
+ </a>
695
+ </li>
696
+
697
+
698
+
699
+
700
+
701
+
702
+ <li >
703
+ <a class="sidenav-item-link" href="user-planing-settings.html">
704
+ <span class="nav-text">User Planing Settings</span>
705
+
706
+ </a>
707
+ </li>
708
+
709
+
710
+
711
+
712
+
713
+
714
+ <li >
715
+ <a class="sidenav-item-link" href="user-billing.html">
716
+ <span class="nav-text">User billing</span>
717
+
718
+ </a>
719
+ </li>
720
+
721
+
722
+
723
+
724
+
725
+
726
+ <li >
727
+ <a class="sidenav-item-link" href="user-notify-settings.html">
728
+ <span class="nav-text">User Notify Settings</span>
729
+
730
+ </a>
731
+ </li>
732
+
733
+
734
+
735
+
736
+ </div>
737
+ </ul>
738
+ </li>
739
+
740
+
741
+
742
+
743
+
744
+ <li class="has-sub" >
745
+ <a class="sidenav-item-link" href="javascript:void(0)" data-toggle="collapse" data-target="#authentication"
746
+ aria-expanded="false" aria-controls="authentication">
747
+ <i class="mdi mdi-account"></i>
748
+ <span class="nav-text">Authentication</span> <b class="caret"></b>
749
+ </a>
750
+ <ul class="collapse" id="authentication"
751
+ data-parent="#sidebar-menu">
752
+ <div class="sub-menu">
753
+
754
+
755
+
756
+ <li >
757
+ <a class="sidenav-item-link" href="sign-in.html">
758
+ <span class="nav-text">Sign In</span>
759
+
760
+ </a>
761
+ </li>
762
+
763
+
764
+
765
+
766
+
767
+
768
+ <li >
769
+ <a class="sidenav-item-link" href="sign-up.html">
770
+ <span class="nav-text">Sign Up</span>
771
+
772
+ </a>
773
+ </li>
774
+
775
+
776
+
777
+
778
+
779
+
780
+ <li >
781
+ <a class="sidenav-item-link" href="reset-password.html">
782
+ <span class="nav-text">Reset Password</span>
783
+
784
+ </a>
785
+ </li>
786
+
787
+
788
+
789
+
790
+ </div>
791
+ </ul>
792
+ </li>
793
+
794
+
795
+
796
+
797
+
798
+ <li class="has-sub" >
799
+ <a class="sidenav-item-link" href="javascript:void(0)" data-toggle="collapse" data-target="#other-page"
800
+ aria-expanded="false" aria-controls="other-page">
801
+ <i class="mdi mdi-file-multiple"></i>
802
+ <span class="nav-text">Other pages</span> <b class="caret"></b>
803
+ </a>
804
+ <ul class="collapse" id="other-page"
805
+ data-parent="#sidebar-menu">
806
+ <div class="sub-menu">
807
+
808
+
809
+
810
+ <li >
811
+ <a class="sidenav-item-link" href="invoice.html">
812
+ <span class="nav-text">Invoice</span>
813
+
814
+ </a>
815
+ </li>
816
+
817
+
818
+
819
+
820
+
821
+
822
+ <li >
823
+ <a class="sidenav-item-link" href="404.html">
824
+ <span class="nav-text">404 page</span>
825
+
826
+ </a>
827
+ </li>
828
+
829
+
830
+
831
+
832
+
833
+
834
+ <li >
835
+ <a class="sidenav-item-link" href="page-comingsoon.html">
836
+ <span class="nav-text">Coming Soon</span>
837
+
838
+ </a>
839
+ </li>
840
+
841
+
842
+
843
+
844
+
845
+
846
+ <li >
847
+ <a class="sidenav-item-link" href="page-maintenance.html">
848
+ <span class="nav-text">Maintenance</span>
849
+
850
+ </a>
851
+ </li>
852
+
853
+
854
+
855
+
856
+ </div>
857
+ </ul>
858
+ </li>
859
+
860
+
861
+
862
+
863
+
864
+ <li class="section-title">
865
+ Documentation
866
+ </li>
867
+
868
+
869
+
870
+
871
+
872
+ <li
873
+ >
874
+ <a class="sidenav-item-link" href="getting-started.html">
875
+ <i class="mdi mdi-airplane"></i>
876
+ <span class="nav-text">Getting Started</span>
877
+ </a>
878
+ </li>
879
+
880
+
881
+
882
+
883
+
884
+ <li class="has-sub" >
885
+ <a class="sidenav-item-link" href="javascript:void(0)" data-toggle="collapse" data-target="#customization"
886
+ aria-expanded="false" aria-controls="customization">
887
+ <i class="mdi mdi-square-edit-outline"></i>
888
+ <span class="nav-text">Customization</span> <b class="caret"></b>
889
+ </a>
890
+ <ul class="collapse" id="customization"
891
+ data-parent="#sidebar-menu">
892
+ <div class="sub-menu">
893
+
894
+
895
+
896
+ <li >
897
+ <a class="sidenav-item-link" href="navbar-customization.html">
898
+ <span class="nav-text">Navbar</span>
899
+
900
+ </a>
901
+ </li>
902
+
903
+
904
+
905
+
906
+
907
+
908
+ <li >
909
+ <a class="sidenav-item-link" href="sidebar-customization.html">
910
+ <span class="nav-text">Sidebar</span>
911
+
912
+ </a>
913
+ </li>
914
+
915
+
916
+
917
+
918
+
919
+
920
+ <li >
921
+ <a class="sidenav-item-link" href="styling.html">
922
+ <span class="nav-text">Styling</span>
923
+
924
+ </a>
925
+ </li>
926
+
927
+
928
+
929
+
930
+ </div>
931
+ </ul>
932
+ </li>
933
+
934
+
935
+
936
+ </ul>
937
+
938
+ </div>
939
+
940
+ <div class="sidebar-footer">
941
+ <div class="sidebar-footer-content">
942
+ <ul class="d-flex">
943
+ <li>
944
+ <a href="user-account-settings.html" data-toggle="tooltip" title="Profile settings"><i class="mdi mdi-settings"></i></a></li>
945
+ <li>
946
+ <a href="#" data-toggle="tooltip" title="No chat messages"><i class="mdi mdi-chat-processing"></i></a>
947
+ </li>
948
+ </ul>
949
+ </div>
950
+ </div>
951
+ </div>
952
+ </aside>
953
+
954
+
955
+
956
+ <!-- ====================================
957
+ ——— PAGE WRAPPER
958
+ ===================================== -->
959
+ <div class="page-wrapper">
960
+
961
+ <!-- Header -->
962
+ <header class="main-header" id="header">
963
+ <nav class="navbar navbar-expand-lg navbar-light" id="navbar">
964
+ <!-- Sidebar toggle button -->
965
+ <button id="sidebar-toggler" class="sidebar-toggle">
966
+ <span class="sr-only">Toggle navigation</span>
967
+ </button>
968
+
969
+ <span class="page-title">bootstarp tables</span>
970
+
971
+ <div class="navbar-right ">
972
+
973
+ <!-- search form -->
974
+ <div class="search-form">
975
+ <form action="index.html" method="get">
976
+ <div class="input-group input-group-sm" id="input-group-search">
977
+ <input type="text" autocomplete="off" name="query" id="search-input" class="form-control" placeholder="Search..." />
978
+ <div class="input-group-append">
979
+ <button class="btn" type="button">/</button>
980
+ </div>
981
+ </div>
982
+ </form>
983
+ <ul class="dropdown-menu dropdown-menu-search">
984
+
985
+ <li class="nav-item">
986
+ <a class="nav-link" href="index.html">Morbi leo risus</a>
987
+ </li>
988
+ <li class="nav-item">
989
+ <a class="nav-link" href="index.html">Dapibus ac facilisis in</a>
990
+ </li>
991
+ <li class="nav-item">
992
+ <a class="nav-link" href="index.html">Porta ac consectetur ac</a>
993
+ </li>
994
+ <li class="nav-item">
995
+ <a class="nav-link" href="index.html">Vestibulum at eros</a>
996
+ </li>
997
+
998
+ </ul>
999
+
1000
+ </div>
1001
+
1002
+ <ul class="nav navbar-nav">
1003
+ <!-- Offcanvas -->
1004
+ <li class="custom-dropdown">
1005
+ <a class="offcanvas-toggler active custom-dropdown-toggler" data-offcanvas="contact-off" href="javascript:" >
1006
+ <i class="mdi mdi-contacts icon"></i>
1007
+ </a>
1008
+ </li>
1009
+ <li class="custom-dropdown">
1010
+ <button class="notify-toggler custom-dropdown-toggler">
1011
+ <i class="mdi mdi-bell-outline icon"></i>
1012
+ <span class="badge badge-xs rounded-circle">21</span>
1013
+ </button>
1014
+ <div class="dropdown-notify">
1015
+
1016
+ <header>
1017
+ <div class="nav nav-underline" id="nav-tab" role="tablist">
1018
+ <a class="nav-item nav-link active" id="all-tabs" data-toggle="tab" href="#all" role="tab" aria-controls="nav-home"
1019
+ aria-selected="true">All (5)</a>
1020
+ <a class="nav-item nav-link" id="message-tab" data-toggle="tab" href="#message" role="tab" aria-controls="nav-profile"
1021
+ aria-selected="false">Msgs (4)</a>
1022
+ <a class="nav-item nav-link" id="other-tab" data-toggle="tab" href="#other" role="tab" aria-controls="nav-contact"
1023
+ aria-selected="false">Others (3)</a>
1024
+ </div>
1025
+ </header>
1026
+
1027
+ <div class="" data-simplebar style="height: 325px;">
1028
+ <div class="tab-content" id="myTabContent">
1029
+
1030
+ <div class="tab-pane fade show active" id="all" role="tabpanel" aria-labelledby="all-tabs">
1031
+
1032
+ <div class="media media-sm bg-warning-10 p-4 mb-0">
1033
+ <div class="media-sm-wrapper">
1034
+ <a href="user-profile.html">
1035
+ <img src="images/user/user-sm-02.jpg" alt="User Image">
1036
+ </a>
1037
+ </div>
1038
+ <div class="media-body">
1039
+ <a href="user-profile.html">
1040
+ <span class="title mb-0">John Doe</span>
1041
+ <span class="discribe">Extremity sweetness difficult behaviour he of. On disposal of as landlord horrible. Afraid at highly months do things on at.</span>
1042
+ <span class="time">
1043
+ <time>Just now</time>...
1044
+ </span>
1045
+ </a>
1046
+ </div>
1047
+ </div>
1048
+
1049
+ <div class="media media-sm p-4 bg-light mb-0">
1050
+ <div class="media-sm-wrapper bg-primary">
1051
+ <a href="user-profile.html">
1052
+ <i class="mdi mdi-calendar-check-outline"></i>
1053
+ </a>
1054
+ </div>
1055
+ <div class="media-body">
1056
+ <a href="user-profile.html">
1057
+ <span class="title mb-0">New event added</span>
1058
+ <span class="discribe">1/3/2014 (1pm - 2pm)</span>
1059
+ <span class="time">
1060
+ <time>10 min ago...</time>...
1061
+ </span>
1062
+ </a>
1063
+ </div>
1064
+ </div>
1065
+
1066
+ <div class="media media-sm p-4 mb-0">
1067
+ <div class="media-sm-wrapper">
1068
+ <a href="user-profile.html">
1069
+ <img src="images/user/user-sm-03.jpg" alt="User Image">
1070
+ </a>
1071
+ </div>
1072
+ <div class="media-body">
1073
+ <a href="user-profile.html">
1074
+ <span class="title mb-0">Sagge Hudson</span>
1075
+ <span class="discribe">On disposal of as landlord Afraid at highly months do things on at.</span>
1076
+ <span class="time">
1077
+ <time>1 hrs ago</time>...
1078
+ </span>
1079
+ </a>
1080
+ </div>
1081
+ </div>
1082
+
1083
+ <div class="media media-sm p-4 mb-0">
1084
+ <div class="media-sm-wrapper bg-info-dark">
1085
+ <a href="user-profile.html">
1086
+ <i class="mdi mdi-account-multiple-check"></i>
1087
+ </a>
1088
+ </div>
1089
+ <div class="media-body">
1090
+ <a href="user-profile.html">
1091
+ <span class="title mb-0">Add request</span>
1092
+ <span class="discribe">Add Dany Jones as your contact.</span>
1093
+ <div class="buttons">
1094
+ <a href="#" class="btn btn-sm btn-success shadow-none text-white">accept</a>
1095
+ <a href="#" class="btn btn-sm shadow-none">delete</a>
1096
+ </div>
1097
+ <span class="time">
1098
+ <time>6 hrs ago</time>...
1099
+ </span>
1100
+ </a>
1101
+ </div>
1102
+ </div>
1103
+
1104
+ <div class="media media-sm p-4 mb-0">
1105
+ <div class="media-sm-wrapper bg-info">
1106
+ <a href="user-profile.html">
1107
+ <i class="mdi mdi-playlist-check"></i>
1108
+ </a>
1109
+ </div>
1110
+ <div class="media-body">
1111
+ <a href="user-profile.html">
1112
+ <span class="title mb-0">Task complete</span>
1113
+ <span class="discribe">Afraid at highly months do things on at.</span>
1114
+ <span class="time">
1115
+ <time>1 hrs ago</time>...
1116
+ </span>
1117
+ </a>
1118
+ </div>
1119
+ </div>
1120
+
1121
+ </div>
1122
+
1123
+ <div class="tab-pane fade" id="message" role="tabpanel" aria-labelledby="message-tab">
1124
+
1125
+ <div class="media media-sm p-4 mb-0">
1126
+ <div class="media-sm-wrapper">
1127
+ <a href="user-profile.html">
1128
+ <img src="images/user/user-sm-01.jpg" alt="User Image">
1129
+ </a>
1130
+ </div>
1131
+ <div class="media-body">
1132
+ <a href="user-profile.html">
1133
+ <span class="title mb-0">Selena Wagner</span>
1134
+ <span class="discribe">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</span>
1135
+ <span class="time">
1136
+ <time>15 min ago</time>...
1137
+ </span>
1138
+ </a>
1139
+ </div>
1140
+ </div>
1141
+
1142
+ <div class="media media-sm p-4 mb-0">
1143
+ <div class="media-sm-wrapper">
1144
+ <a href="user-profile.html">
1145
+ <img src="images/user/user-sm-03.jpg" alt="User Image">
1146
+ </a>
1147
+ </div>
1148
+ <div class="media-body">
1149
+ <a href="user-profile.html">
1150
+ <span class="title mb-0">Sagge Hudson</span>
1151
+ <span class="discribe">On disposal of as landlord Afraid at highly months do things on at.</span>
1152
+ <span class="time">
1153
+ <time>1 hrs ago</time>...
1154
+ </span>
1155
+ </a>
1156
+ </div>
1157
+ </div>
1158
+
1159
+ <div class="media media-sm bg-warning-10 p-4 mb-0">
1160
+ <div class="media-sm-wrapper">
1161
+ <a href="user-profile.html">
1162
+ <img src="images/user/user-sm-02.jpg" alt="User Image">
1163
+ </a>
1164
+ </div>
1165
+ <div class="media-body">
1166
+ <a href="user-profile.html">
1167
+ <span class="title mb-0">John Doe</span>
1168
+ <span class="discribe">Extremity sweetness difficult behaviour he of. On disposal of as landlord horrible. Afraid
1169
+ at highly months do things on at.</span>
1170
+ <span class="time">
1171
+ <time>Just now</time>...
1172
+ </span>
1173
+ </a>
1174
+ </div>
1175
+ </div>
1176
+
1177
+ <div class="media media-sm p-4 mb-0">
1178
+ <div class="media-sm-wrapper">
1179
+ <a href="user-profile.html">
1180
+ <img src="images/user/user-sm-04.jpg" alt="User Image">
1181
+ </a>
1182
+ </div>
1183
+ <div class="media-body">
1184
+ <a href="user-profile.html">
1185
+ <span class="title mb-0">Albrecht Straub</span>
1186
+ <span class="discribe"> Beatae quia natus assumenda laboriosam, nisi perferendis aliquid consectetur expedita non tenetur.</span>
1187
+ <span class="time">
1188
+ <time>Just now</time>...
1189
+ </span>
1190
+ </a>
1191
+ </div>
1192
+ </div>
1193
+
1194
+ </div>
1195
+ <div class="tab-pane fade" id="other" role="tabpanel" aria-labelledby="contact-tab">
1196
+
1197
+ <div class="media media-sm p-4 bg-light mb-0">
1198
+ <div class="media-sm-wrapper bg-primary">
1199
+ <a href="user-profile.html">
1200
+ <i class="mdi mdi-calendar-check-outline"></i>
1201
+ </a>
1202
+ </div>
1203
+ <div class="media-body">
1204
+ <a href="user-profile.html">
1205
+ <span class="title mb-0">New event added</span>
1206
+ <span class="discribe">1/3/2014 (1pm - 2pm)</span>
1207
+ <span class="time">
1208
+ <time>10 min ago...</time>...
1209
+ </span>
1210
+ </a>
1211
+ </div>
1212
+ </div>
1213
+
1214
+ <div class="media media-sm p-4 mb-0">
1215
+ <div class="media-sm-wrapper bg-info-dark">
1216
+ <a href="user-profile.html">
1217
+ <i class="mdi mdi-account-multiple-check"></i>
1218
+ </a>
1219
+ </div>
1220
+ <div class="media-body">
1221
+ <a href="user-profile.html">
1222
+ <span class="title mb-0">Add request</span>
1223
+ <span class="discribe">Add Dany Jones as your contact.</span>
1224
+ <div class="buttons">
1225
+ <a href="#" class="btn btn-sm btn-success shadow-none text-white">accept</a>
1226
+ <a href="#" class="btn btn-sm shadow-none">delete</a>
1227
+ </div>
1228
+ <span class="time">
1229
+ <time>6 hrs ago</time>...
1230
+ </span>
1231
+ </a>
1232
+ </div>
1233
+ </div>
1234
+
1235
+ <div class="media media-sm p-4 mb-0">
1236
+ <div class="media-sm-wrapper bg-info">
1237
+ <a href="user-profile.html">
1238
+ <i class="mdi mdi-playlist-check"></i>
1239
+ </a>
1240
+ </div>
1241
+ <div class="media-body">
1242
+ <a href="user-profile.html">
1243
+ <span class="title mb-0">Task complete</span>
1244
+ <span class="discribe">Afraid at highly months do things on at.</span>
1245
+ <span class="time">
1246
+ <time>1 hrs ago</time>...
1247
+ </span>
1248
+ </a>
1249
+ </div>
1250
+ </div>
1251
+
1252
+ </div>
1253
+ </div>
1254
+ </div>
1255
+
1256
+ <footer class="border-top dropdown-notify-footer">
1257
+ <div class="d-flex justify-content-between align-items-center py-2 px-4">
1258
+ <span>Last updated 3 min ago</span>
1259
+ <a id="refress-button" href="javascript:" class="btn mdi mdi-cached btn-refress"></a>
1260
+ </div>
1261
+ </footer>
1262
+ </div>
1263
+ </li>
1264
+ <!-- User Account -->
1265
+ <li class="dropdown user-menu">
1266
+ <button class="dropdown-toggle nav-link" data-toggle="dropdown">
1267
+ <img src="images/user/user-xs-01.jpg" class="user-image rounded-circle" alt="User Image" />
1268
+ <span class="d-none d-lg-inline-block">John Doe</span>
1269
+ </button>
1270
+ <ul class="dropdown-menu dropdown-menu-right">
1271
+ <li>
1272
+ <a class="dropdown-link-item" href="user-profile.html">
1273
+ <i class="mdi mdi-account-outline"></i>
1274
+ <span class="nav-text">My Profile</span>
1275
+ </a>
1276
+ </li>
1277
+ <li>
1278
+ <a class="dropdown-link-item" href="email-inbox.html">
1279
+ <i class="mdi mdi-email-outline"></i>
1280
+ <span class="nav-text">Message</span>
1281
+ <span class="badge badge-pill badge-primary">24</span>
1282
+ </a>
1283
+ </li>
1284
+ <li>
1285
+ <a class="dropdown-link-item" href="user-activities.html">
1286
+ <i class="mdi mdi-diamond-stone"></i>
1287
+ <span class="nav-text">Activitise</span></a>
1288
+ </li>
1289
+ <li>
1290
+ <a class="dropdown-link-item" href="user-account-settings.html">
1291
+ <i class="mdi mdi-settings"></i>
1292
+ <span class="nav-text">Account Setting</span>
1293
+ </a>
1294
+ </li>
1295
+
1296
+ <li class="dropdown-footer">
1297
+ <a class="dropdown-link-item" href="sign-in.html"> <i class="mdi mdi-logout"></i> Log Out </a>
1298
+ </li>
1299
+ </ul>
1300
+ </li>
1301
+ </ul>
1302
+ </div>
1303
+ </nav>
1304
+
1305
+
1306
+ </header>
1307
+
1308
+ <!-- ====================================
1309
+ ——— CONTENT WRAPPER
1310
+ ===================================== -->
1311
+ <div class="content-wrapper">
1312
+ <div class="content"><!-- For Components documentaion -->
1313
+ <div class="card card-default">
1314
+ <div class="px-6 py-4">
1315
+ <p>Mono provides a variety of <span class="text-secondary text-capitalize"> Bootstrap tables </span> components with a
1316
+ little customization that suits its design standards. For more information, please see the official <a class="font-weight-bold" href="https://getbootstrap.com/docs/4.3/content/tables/" target="_blank"> Bootstrap documentation.</a></p>
1317
+ </div>
1318
+ </div>
1319
+
1320
+ <div class="row">
1321
+ <div class="col-xl-6">
1322
+ <!-- Basic Table-->
1323
+ <div class="card card-default">
1324
+ <div class="card-header">
1325
+ <h2>Basic Table</h2>
1326
+
1327
+ <a class="btn mdi mdi-code-tags" data-toggle="collapse" href="#collapse-table-1" role="button"
1328
+ aria-expanded="false" aria-controls="collapse-table-1"> </a>
1329
+
1330
+
1331
+ </div>
1332
+ <div class="card-body">
1333
+ <div class="collapse" id="collapse-table-1">
1334
+ <pre class="language-html mb-4">
1335
+ <code >
1336
+ &lt;table class="table"&gt;
1337
+ &lt;thead&gt;
1338
+ &lt;tr&gt;
1339
+ &lt;th scope="col"&gt;#&lt;/th&gt;
1340
+ &lt;th scope="col"&gt;First&lt;/th&gt;
1341
+ &lt;th scope="col"&gt;Last&lt;/th&gt;
1342
+ &lt;th scope="col"&gt;Handle&lt;/th&gt;
1343
+ &lt;/tr&gt;
1344
+ &lt;/thead&gt;
1345
+ &lt;tbody&gt;
1346
+ &lt;tr&gt;
1347
+ &lt;td scope="row"&gt;1&lt;/td&gt;
1348
+ &lt;td&gt;Lucia&lt;/td&gt;
1349
+ &lt;td&gt;Christ&lt;/td&gt;
1350
+ &lt;td&gt;@Lucia&lt;/td&gt;
1351
+ &lt;/tr&gt;
1352
+ &lt;tr&gt;
1353
+ &lt;td scope="row"&gt;2&lt;/td&gt;
1354
+ &lt;td&gt;Catrin&lt;/td&gt;
1355
+ &lt;td&gt;Seidl&lt;/td&gt;
1356
+ &lt;td&gt;@catrin&lt;/td&gt;
1357
+ &lt;/tr&gt;
1358
+ &lt;tr&gt;
1359
+ &lt;td scope="row"&gt;3&lt;/td&gt;
1360
+ &lt;td&gt;Lilli&lt;/td&gt;
1361
+ &lt;td&gt;Kirsh&lt;/td&gt;
1362
+ &lt;td&gt;@lilli&lt;/td&gt;
1363
+ &lt;/tr&gt;
1364
+ &lt;tr&gt;
1365
+ &lt;td scope="row"&gt;4&lt;/td&gt;
1366
+ &lt;td&gt;Else&lt;/td&gt;
1367
+ &lt;td&gt;Voigt&lt;/td&gt;
1368
+ &lt;td&gt;@voigt&lt;/td&gt;
1369
+ &lt;/tr&gt;
1370
+ &lt;tr&gt;
1371
+ &lt;td scope="row"&gt;5&lt;/td&gt;
1372
+ &lt;td&gt;Ursel&lt;/td&gt;
1373
+ &lt;td&gt;Harms&lt;/td&gt;
1374
+ &lt;td&gt;@ursel&lt;/td&gt;
1375
+ &lt;/tr&gt;
1376
+ &lt;tr&gt;
1377
+ &lt;td scope="row"&gt;6&lt;/td&gt;
1378
+ &lt;td&gt;Anke&lt;/td&gt;
1379
+ &lt;td&gt;Sauter&lt;/td&gt;
1380
+ &lt;td&gt;@Anke&lt;/td&gt;
1381
+ &lt;/tr&gt;
1382
+ &lt;/tbody&gt;
1383
+ &lt;/table&gt;
1384
+ </code>
1385
+ </pre>
1386
+ </div>
1387
+ <table class="table">
1388
+ <thead>
1389
+ <tr>
1390
+ <th scope="col">#</th>
1391
+ <th scope="col">First</th>
1392
+ <th scope="col">Last</th>
1393
+ <th scope="col">Handle</th>
1394
+ </tr>
1395
+ </thead>
1396
+ <tbody>
1397
+ <tr>
1398
+ <td scope="row">1</td>
1399
+ <td>Lucia</td>
1400
+ <td>Christ</td>
1401
+ <td>@Lucia</td>
1402
+ </tr>
1403
+ <tr>
1404
+ <td scope="row">2</td>
1405
+ <td>Catrin</td>
1406
+ <td>Seidl</td>
1407
+ <td>@catrin</td>
1408
+ </tr>
1409
+ <tr>
1410
+ <td scope="row">3</td>
1411
+ <td>Lilli</td>
1412
+ <td>Kirsh</td>
1413
+ <td>@lilli</td>
1414
+ </tr>
1415
+ <tr>
1416
+ <td scope="row">4</td>
1417
+ <td>Else</td>
1418
+ <td>Voigt</td>
1419
+ <td>@voigt</td>
1420
+ </tr>
1421
+ <tr>
1422
+ <td scope="row">5</td>
1423
+ <td>Ursel</td>
1424
+ <td>Harms</td>
1425
+ <td>@ursel</td>
1426
+ </tr>
1427
+ <tr>
1428
+ <td scope="row">6</td>
1429
+ <td>Anke</td>
1430
+ <td>Sauter</td>
1431
+ <td>@Anke</td>
1432
+ </tr>
1433
+ </tbody>
1434
+ </table>
1435
+ </div>
1436
+ </div>
1437
+
1438
+ <!-- Bordered Table -->
1439
+ <div class="card card-default">
1440
+ <div class="card-header">
1441
+ <h2>Bordered Table</h2>
1442
+
1443
+ <a class="btn mdi mdi-code-tags" data-toggle="collapse" href="#collapse-table-bordered" role="button"
1444
+ aria-expanded="false" aria-controls="collapse-table-bordered"> </a>
1445
+
1446
+
1447
+ </div>
1448
+ <div class="card-body">
1449
+ <div class="collapse" id="collapse-table-bordered">
1450
+ <pre class="language-html mb-4">
1451
+ <code >
1452
+ &lt;table class="table table-bordered">
1453
+ &lt;thead>
1454
+ &lt;tr>
1455
+ &lt;th scope="col">#&lt;/th>
1456
+ &lt;th scope="col">First&lt;/th>
1457
+ &lt;th scope="col">Last&lt;/th>
1458
+ &lt;th scope="col">Handle&lt;/th>
1459
+ &lt;th class="text-center">Action&lt;/th>
1460
+ &lt;/tr>
1461
+ &lt;/thead>
1462
+ &lt;tbody>
1463
+ &lt;tr>
1464
+ &lt;td scope="row">1&lt;/td>
1465
+ &lt;td>Lucia&lt;/td>
1466
+ &lt;td>Christ&lt;/td>
1467
+ &lt;td>@Lucia&lt;/td>
1468
+ &lt;th class="text-center">
1469
+ &lt;a href="#">
1470
+ &lt;i class="mdi mdi-open-in-new">&lt;/i>
1471
+ &lt;/a>
1472
+ &lt;a href="#">
1473
+ &lt;i class="mdi mdi-close text-danger">&lt;/i>
1474
+ &lt;/a>
1475
+
1476
+ &lt;/th>
1477
+ &lt;/tr>
1478
+ &lt;tr>
1479
+ &lt;td scope="row">2&lt;/td>
1480
+ &lt;td>Catrin&lt;/td>
1481
+ &lt;td>Seidl&lt;/td>
1482
+ &lt;td>@catrin&lt;/td>
1483
+ &lt;th class="text-center">
1484
+ &lt;a href="#">
1485
+ &lt;i class="mdi mdi-open-in-new">&lt;/i>
1486
+ &lt;/a>
1487
+ &lt;a href="#">
1488
+ &lt;i class="mdi mdi-close text-danger">&lt;/i>
1489
+ &lt;/a>
1490
+
1491
+ &lt;/th>
1492
+ &lt;/tr>
1493
+ &lt;tr>
1494
+ &lt;td scope="row">3&lt;/td>
1495
+ &lt;td>Lilli&lt;/td>
1496
+ &lt;td>Kirsh&lt;/td>
1497
+ &lt;td>@lilli&lt;/td>
1498
+ &lt;th class="text-center">
1499
+ &lt;a href="#">
1500
+ &lt;i class="mdi mdi-open-in-new">&lt;/i>
1501
+ &lt;/a>
1502
+ &lt;a href="#">
1503
+ &lt;i class="mdi mdi-close text-danger">&lt;/i>
1504
+ &lt;/a>
1505
+
1506
+ &lt;/th>
1507
+ &lt;/tr>
1508
+ &lt;tr>
1509
+ &lt;td scope="row">4&lt;/td>
1510
+ &lt;td>Else&lt;/td>
1511
+ &lt;td>Voigt&lt;/td>
1512
+ &lt;td>@voigt&lt;/td>
1513
+ &lt;th class="text-center">
1514
+ &lt;a href="#">
1515
+ &lt;i class="mdi mdi-open-in-new">&lt;/i>
1516
+ &lt;/a>
1517
+ &lt;a href="#">
1518
+ &lt;i class="mdi mdi-close text-danger">&lt;/i>
1519
+ &lt;/a>
1520
+
1521
+ &lt;/th>
1522
+ &lt;/tr>
1523
+ &lt;tr>
1524
+ &lt;td scope="row">5&lt;/td>
1525
+ &lt;td>Ursel&lt;/td>
1526
+ &lt;td>Harms&lt;/td>
1527
+ &lt;td>@ursel&lt;/td>
1528
+ &lt;th class="text-center">
1529
+ &lt;a href="#">
1530
+ &lt;i class="mdi mdi-open-in-new">&lt;/i>
1531
+ &lt;/a>
1532
+ &lt;a href="#">
1533
+ &lt;i class="mdi mdi-close text-danger">&lt;/i>
1534
+ &lt;/a>
1535
+
1536
+ &lt;/th>
1537
+ &lt;/tr>
1538
+ &lt;tr>
1539
+ &lt;td scope="row">6&lt;/td>
1540
+ &lt;td>Anke&lt;/td>
1541
+ &lt;td>Sauter&lt;/td>
1542
+ &lt;td>@Anke&lt;/td>
1543
+ &lt;th class="text-center">
1544
+ &lt;a href="#">
1545
+ &lt;i class="mdi mdi-open-in-new">&lt;/i>
1546
+ &lt;/a>
1547
+ &lt;a href="#">
1548
+ &lt;i class="mdi mdi-close text-danger">&lt;/i>
1549
+ &lt;/a>
1550
+
1551
+ &lt;/th>
1552
+ &lt;/tr>
1553
+ &lt;/tbody>
1554
+ &lt;/table>
1555
+ </code>
1556
+ </pre>
1557
+ </div>
1558
+ <table class="table table-bordered">
1559
+ <thead>
1560
+ <tr>
1561
+ <th scope="col">#</th>
1562
+ <th scope="col">First</th>
1563
+ <th scope="col">Last</th>
1564
+ <th scope="col">Handle</th>
1565
+ <th class="text-center">Action</th>
1566
+ </tr>
1567
+ </thead>
1568
+ <tbody>
1569
+ <tr>
1570
+ <td scope="row">1</td>
1571
+ <td>Lucia</td>
1572
+ <td>Christ</td>
1573
+ <td>@Lucia</td>
1574
+ <th class="text-center">
1575
+ <a href="#">
1576
+ <i class="mdi mdi-open-in-new"></i>
1577
+ </a>
1578
+ <a href="#">
1579
+ <i class="mdi mdi-close text-danger"></i>
1580
+ </a>
1581
+
1582
+ </th>
1583
+ </tr>
1584
+ <tr>
1585
+ <td scope="row">2</td>
1586
+ <td>Catrin</td>
1587
+ <td>Seidl</td>
1588
+ <td>@catrin</td>
1589
+ <th class="text-center">
1590
+ <a href="#">
1591
+ <i class="mdi mdi-open-in-new"></i>
1592
+ </a>
1593
+ <a href="#">
1594
+ <i class="mdi mdi-close text-danger"></i>
1595
+ </a>
1596
+
1597
+ </th>
1598
+ </tr>
1599
+ <tr>
1600
+ <td scope="row">3</td>
1601
+ <td>Lilli</td>
1602
+ <td>Kirsh</td>
1603
+ <td>@lilli</td>
1604
+ <th class="text-center">
1605
+ <a href="#">
1606
+ <i class="mdi mdi-open-in-new"></i>
1607
+ </a>
1608
+ <a href="#">
1609
+ <i class="mdi mdi-close text-danger"></i>
1610
+ </a>
1611
+
1612
+ </th>
1613
+ </tr>
1614
+ <tr>
1615
+ <td scope="row">4</td>
1616
+ <td>Else</td>
1617
+ <td>Voigt</td>
1618
+ <td>@voigt</td>
1619
+ <th class="text-center">
1620
+ <a href="#">
1621
+ <i class="mdi mdi-open-in-new"></i>
1622
+ </a>
1623
+ <a href="#">
1624
+ <i class="mdi mdi-close text-danger"></i>
1625
+ </a>
1626
+
1627
+ </th>
1628
+ </tr>
1629
+ <tr>
1630
+ <td scope="row">5</td>
1631
+ <td>Ursel</td>
1632
+ <td>Harms</td>
1633
+ <td>@ursel</td>
1634
+ <th class="text-center">
1635
+ <a href="#">
1636
+ <i class="mdi mdi-open-in-new"></i>
1637
+ </a>
1638
+ <a href="#">
1639
+ <i class="mdi mdi-close text-danger"></i>
1640
+ </a>
1641
+
1642
+ </th>
1643
+ </tr>
1644
+ <tr>
1645
+ <td scope="row">6</td>
1646
+ <td>Anke</td>
1647
+ <td>Sauter</td>
1648
+ <td>@Anke</td>
1649
+ <th class="text-center">
1650
+ <a href="#">
1651
+ <i class="mdi mdi-open-in-new"></i>
1652
+ </a>
1653
+ <a href="#">
1654
+ <i class="mdi mdi-close text-danger"></i>
1655
+ </a>
1656
+
1657
+ </th>
1658
+ </tr>
1659
+ </tbody>
1660
+ </table>
1661
+ </div>
1662
+ </div>
1663
+
1664
+ <!-- Dark Table -->
1665
+ <div class="card card-default">
1666
+ <div class="card-header">
1667
+ <h2>Dark Table</h2>
1668
+
1669
+ <a class="btn mdi mdi-code-tags" data-toggle="collapse" href="#collapse-table-dark" role="button"
1670
+ aria-expanded="false" aria-controls="collapse-table-dark"> </a>
1671
+
1672
+
1673
+ </div>
1674
+ <div class="card-body">
1675
+ <div class="collapse" id="collapse-table-dark">
1676
+ <pre class="language-html mb-4">
1677
+ <code >
1678
+ &lt;table class="table table-dark"&gt;
1679
+ &lt;thead&gt;
1680
+ &lt;tr&gt;
1681
+ &lt;th scope="col"&gt;#&lt;/th&gt;
1682
+ &lt;th scope="col"&gt;First&lt;/th&gt;
1683
+ &lt;th scope="col"&gt;Last&lt;/th&gt;
1684
+ &lt;th scope="col"&gt;Handle&lt;/th&gt;
1685
+ &lt;/tr&gt;
1686
+ &lt;/thead&gt;
1687
+ &lt;tbody&gt;
1688
+ &lt;tr&gt;
1689
+ &lt;td scope="row"&gt;1&lt;/td&gt;
1690
+ &lt;td&gt;Lucia&lt;/td&gt;
1691
+ &lt;td&gt;Christ&lt;/td&gt;
1692
+ &lt;td&gt;@Lucia&lt;/td&gt;
1693
+ &lt;/tr&gt;
1694
+ &lt;tr&gt;
1695
+ &lt;td scope="row"&gt;2&lt;/td&gt;
1696
+ &lt;td&gt;Catrin&lt;/td&gt;
1697
+ &lt;td&gt;Seidl&lt;/td&gt;
1698
+ &lt;td&gt;@catrin&lt;/td&gt;
1699
+ &lt;/tr&gt;
1700
+ &lt;tr&gt;
1701
+ &lt;td scope="row"&gt;3&lt;/td&gt;
1702
+ &lt;td&gt;Lilli&lt;/td&gt;
1703
+ &lt;td&gt;Kirsh&lt;/td&gt;
1704
+ &lt;td&gt;@lilli&lt;/td&gt;
1705
+ &lt;/tr&gt;
1706
+ &lt;tr&gt;
1707
+ &lt;td scope="row"&gt;4&lt;/td&gt;
1708
+ &lt;td&gt;Else&lt;/td&gt;
1709
+ &lt;td&gt;Voigt&lt;/td&gt;
1710
+ &lt;td&gt;@voigt&lt;/td&gt;
1711
+ &lt;/tr&gt;
1712
+ &lt;tr&gt;
1713
+ &lt;td scope="row"&gt;5&lt;/td&gt;
1714
+ &lt;td&gt;Ursel&lt;/td&gt;
1715
+ &lt;td&gt;Harms&lt;/td&gt;
1716
+ &lt;td&gt;@ursel&lt;/td&gt;
1717
+ &lt;/tr&gt;
1718
+ &lt;tr&gt;
1719
+ &lt;td scope="row"&gt;6&lt;/td&gt;
1720
+ &lt;td&gt;Anke&lt;/td&gt;
1721
+ &lt;td&gt;Sauter&lt;/td&gt;
1722
+ &lt;td&gt;@Anke&lt;/td&gt;
1723
+ &lt;/tr&gt;
1724
+ &lt;/tbody&gt;
1725
+ &lt;/table&gt;
1726
+ </code>
1727
+ </pre>
1728
+ </div>
1729
+ <table class="table table-dark">
1730
+ <thead>
1731
+ <tr>
1732
+ <th scope="col">#</th>
1733
+ <th scope="col">First</th>
1734
+ <th scope="col">Last</th>
1735
+ <th scope="col">Handle</th>
1736
+ </tr>
1737
+ </thead>
1738
+ <tbody>
1739
+ <tr>
1740
+ <td scope="row">1</td>
1741
+ <td>Lucia</td>
1742
+ <td>Christ</td>
1743
+ <td>@Lucia</td>
1744
+ </tr>
1745
+ <tr>
1746
+ <td scope="row">2</td>
1747
+ <td>Catrin</td>
1748
+ <td>Seidl</td>
1749
+ <td>@catrin</td>
1750
+ </tr>
1751
+ <tr>
1752
+ <td scope="row">3</td>
1753
+ <td>Lilli</td>
1754
+ <td>Kirsh</td>
1755
+ <td>@lilli</td>
1756
+ </tr>
1757
+ <tr>
1758
+ <td scope="row">4</td>
1759
+ <td>Else</td>
1760
+ <td>Voigt</td>
1761
+ <td>@voigt</td>
1762
+ </tr>
1763
+ <tr>
1764
+ <td scope="row">5</td>
1765
+ <td>Ursel</td>
1766
+ <td>Harms</td>
1767
+ <td>@ursel</td>
1768
+ </tr>
1769
+ <tr>
1770
+ <td scope="row">6</td>
1771
+ <td>Anke</td>
1772
+ <td>Sauter</td>
1773
+ <td>@Anke</td>
1774
+ </tr>
1775
+ </tbody>
1776
+ </table>
1777
+ </div>
1778
+ </div>
1779
+ </div>
1780
+ <div class="col-xl-6">
1781
+ <!-- Striped Table -->
1782
+ <div class="card card-default">
1783
+ <div class="card-header">
1784
+ <h2>Striped Table</h2>
1785
+
1786
+ <a class="btn mdi mdi-code-tags" data-toggle="collapse" href="#collapse-table-striped" role="button"
1787
+ aria-expanded="false" aria-controls="collapse-table-striped"> </a>
1788
+
1789
+
1790
+ </div>
1791
+ <div class="card-body">
1792
+ <div class="collapse" id="collapse-table-striped">
1793
+ <pre class="language-html mb-4">
1794
+ <code >
1795
+ &lt;table class="table table-striped"&gt;
1796
+ &lt;thead&gt;
1797
+ &lt;tr&gt;
1798
+ &lt;th scope="col"&gt;#&lt;/th&gt;
1799
+ &lt;th scope="col"&gt;First&lt;/th&gt;
1800
+ &lt;th scope="col"&gt;Last&lt;/th&gt;
1801
+ &lt;th scope="col"&gt;Handle&lt;/th&gt;
1802
+ &lt;th scope="col"&gt;Active&lt;/th&gt;
1803
+ &lt;/tr&gt;
1804
+ &lt;/thead&gt;
1805
+ &lt;tbody&gt;
1806
+ &lt;tr&gt;
1807
+ &lt;td scope="row"&gt;1&lt;/td&gt;
1808
+ &lt;td&gt;Lucia&lt;/td&gt;
1809
+ &lt;td&gt;Christ&lt;/td&gt;
1810
+ &lt;td&gt;@Lucia&lt;/td&gt;
1811
+ &lt;td&gt;
1812
+ &lt;label class="switch switch-primary switch-pill form-control-label "&gt;
1813
+ &lt;input type="checkbox" class="switch-input form-check-input" value="on" checked&gt;
1814
+ &lt;span class="switch-label"&gt;&lt;/span&gt;
1815
+ &lt;span class="switch-handle"&gt;&lt;/span&gt;
1816
+ &lt;/label&gt;
1817
+ &lt;/td&gt;
1818
+ &lt;/tr&gt;
1819
+ &lt;tr&gt;
1820
+ &lt;td scope="row"&gt;2&lt;/td&gt;
1821
+ &lt;td&gt;Catrin&lt;/td&gt;
1822
+ &lt;td&gt;Seidl&lt;/td&gt;
1823
+ &lt;td&gt;@catrin&lt;/td&gt;
1824
+ &lt;td&gt;
1825
+ &lt;label class="switch switch-primary switch-pill form-control-label "&gt;
1826
+ &lt;input type="checkbox" class="switch-input form-check-input" value="on"&gt;
1827
+ &lt;span class="switch-label"&gt;&lt;/span&gt;
1828
+ &lt;span class="switch-handle"&gt;&lt;/span&gt;
1829
+ &lt;/label&gt;
1830
+ &lt;/td&gt;
1831
+ &lt;/tr&gt;
1832
+ &lt;tr&gt;
1833
+ &lt;td scope="row"&gt;3&lt;/td&gt;
1834
+ &lt;td&gt;Lilli&lt;/td&gt;
1835
+ &lt;td&gt;Kirsh&lt;/td&gt;
1836
+ &lt;td&gt;@lilli&lt;/td&gt;
1837
+ &lt;td&gt;
1838
+ &lt;label class="switch switch-primary switch-pill form-control-label "&gt;
1839
+ &lt;input type="checkbox" class="switch-input form-check-input" value="on" checked&gt;
1840
+ &lt;span class="switch-label"&gt;&lt;/span&gt;
1841
+ &lt;span class="switch-handle"&gt;&lt;/span&gt;
1842
+ &lt;/label&gt;
1843
+ &lt;/td&gt;
1844
+ &lt;/tr&gt;
1845
+ &lt;tr&gt;
1846
+ &lt;td scope="row"&gt;4&lt;/td&gt;
1847
+ &lt;td&gt;Else&lt;/td&gt;
1848
+ &lt;td&gt;Voigt&lt;/td&gt;
1849
+ &lt;td&gt;@voigt&lt;/td&gt;
1850
+ &lt;td&gt;
1851
+ &lt;label class="switch switch-primary switch-pill form-control-label "&gt;
1852
+ &lt;input type="checkbox" class="switch-input form-check-input" value="on"&gt;
1853
+ &lt;span class="switch-label"&gt;&lt;/span&gt;
1854
+ &lt;span class="switch-handle"&gt;&lt;/span&gt;
1855
+ &lt;/label&gt;
1856
+ &lt;/td&gt;
1857
+ &lt;/tr&gt;
1858
+ &lt;tr&gt;
1859
+ &lt;td scope="row"&gt;5&lt;/td&gt;
1860
+ &lt;td&gt;Ursel&lt;/td&gt;
1861
+ &lt;td&gt;Harms&lt;/td&gt;
1862
+ &lt;td&gt;@ursel&lt;/td&gt;
1863
+ &lt;td&gt;
1864
+ &lt;label class="switch switch-primary switch-pill form-control-label "&gt;
1865
+ &lt;input type="checkbox" class="switch-input form-check-input" value="on" checked&gt;
1866
+ &lt;span class="switch-label"&gt;&lt;/span&gt;
1867
+ &lt;span class="switch-handle"&gt;&lt;/span&gt;
1868
+ &lt;/label&gt;
1869
+ &lt;/td&gt;
1870
+ &lt;/tr&gt;
1871
+ &lt;tr&gt;
1872
+ &lt;td scope="row"&gt;6&lt;/td&gt;
1873
+ &lt;td&gt;Anke&lt;/td&gt;
1874
+ &lt;td&gt;Sauter&lt;/td&gt;
1875
+ &lt;td&gt;@Anke&lt;/td&gt;
1876
+ &lt;td&gt;
1877
+ &lt;label class="switch switch-primary switch-pill form-control-label "&gt;
1878
+ &lt;input type="checkbox" class="switch-input form-check-input" value="on"&gt;
1879
+ &lt;span class="switch-label"&gt;&lt;/span&gt;
1880
+ &lt;span class="switch-handle"&gt;&lt;/span&gt;
1881
+ &lt;/label&gt;
1882
+ &lt;/td&gt;
1883
+ &lt;/tr&gt;
1884
+ &lt;/tbody&gt;
1885
+ &lt;/table&gt;
1886
+ </code>
1887
+ </pre>
1888
+ </div>
1889
+ <table class="table table-striped">
1890
+ <thead>
1891
+ <tr>
1892
+ <th scope="col">#</th>
1893
+ <th scope="col">First</th>
1894
+ <th scope="col">Last</th>
1895
+ <th scope="col">Handle</th>
1896
+ <th scope="col">Active</th>
1897
+ </tr>
1898
+ </thead>
1899
+ <tbody>
1900
+ <tr>
1901
+ <td scope="row">1</td>
1902
+ <td>Lucia</td>
1903
+ <td>Christ</td>
1904
+ <td>@Lucia</td>
1905
+ <td>
1906
+ <label class="switch switch-primary switch-pill form-control-label ">
1907
+ <input type="checkbox" class="switch-input form-check-input" value="on" checked>
1908
+ <span class="switch-label"></span>
1909
+ <span class="switch-handle"></span>
1910
+ </label>
1911
+ </td>
1912
+ </tr>
1913
+ <tr>
1914
+ <td scope="row">2</td>
1915
+ <td>Catrin</td>
1916
+ <td>Seidl</td>
1917
+ <td>@catrin</td>
1918
+ <td>
1919
+ <label class="switch switch-primary switch-pill form-control-label ">
1920
+ <input type="checkbox" class="switch-input form-check-input" value="on">
1921
+ <span class="switch-label"></span>
1922
+ <span class="switch-handle"></span>
1923
+ </label>
1924
+ </td>
1925
+ </tr>
1926
+ <tr>
1927
+ <td scope="row">3</td>
1928
+ <td>Lilli</td>
1929
+ <td>Kirsh</td>
1930
+ <td>@lilli</td>
1931
+ <td>
1932
+ <label class="switch switch-primary switch-pill form-control-label ">
1933
+ <input type="checkbox" class="switch-input form-check-input" value="on" checked>
1934
+ <span class="switch-label"></span>
1935
+ <span class="switch-handle"></span>
1936
+ </label>
1937
+ </td>
1938
+ </tr>
1939
+ <tr>
1940
+ <td scope="row">4</td>
1941
+ <td>Else</td>
1942
+ <td>Voigt</td>
1943
+ <td>@voigt</td>
1944
+ <td>
1945
+ <label class="switch switch-primary switch-pill form-control-label ">
1946
+ <input type="checkbox" class="switch-input form-check-input" value="on" >
1947
+ <span class="switch-label"></span>
1948
+ <span class="switch-handle"></span>
1949
+ </label>
1950
+ </td>
1951
+ </tr>
1952
+ <tr>
1953
+ <td scope="row">5</td>
1954
+ <td>Ursel</td>
1955
+ <td>Harms</td>
1956
+ <td>@ursel</td>
1957
+ <td>
1958
+ <label class="switch switch-primary switch-pill form-control-label ">
1959
+ <input type="checkbox" class="switch-input form-check-input" value="on" checked>
1960
+ <span class="switch-label"></span>
1961
+ <span class="switch-handle"></span>
1962
+ </label>
1963
+ </td>
1964
+ </tr>
1965
+ <tr>
1966
+ <td scope="row">6</td>
1967
+ <td>Anke</td>
1968
+ <td>Sauter</td>
1969
+ <td>@Anke</td>
1970
+ <td>
1971
+ <label class="switch switch-primary switch-pill form-control-label ">
1972
+ <input type="checkbox" class="switch-input form-check-input" value="on">
1973
+ <span class="switch-label"></span>
1974
+ <span class="switch-handle"></span>
1975
+ </label>
1976
+ </td>
1977
+ </tr>
1978
+ </tbody>
1979
+ </table>
1980
+ </div>
1981
+ </div>
1982
+
1983
+ <!-- Contextual Table -->
1984
+ <div class="card card-default">
1985
+ <div class="card-header">
1986
+ <h2>Contextual Table</h2>
1987
+
1988
+ <a class="btn mdi mdi-code-tags" data-toggle="collapse" href="#collapse-table-contextual" role="button"
1989
+ aria-expanded="false" aria-controls="collapse-table-contextual"> </a>
1990
+
1991
+
1992
+ </div>
1993
+ <div class="card-body">
1994
+ <div class="collapse" id="collapse-table-contextual">
1995
+ <pre class="language-html mb-4">
1996
+ <code >
1997
+ &lt;table class="table"&gt;
1998
+ &lt;thead&gt;
1999
+ &lt;tr&gt;
2000
+ &lt;th scope="col"&gt;#&lt;/th&gt;
2001
+ &lt;th scope="col"&gt;First&lt;/th&gt;
2002
+ &lt;th scope="col"&gt;Last&lt;/th&gt;
2003
+ &lt;th scope="col"&gt;Handle&lt;/th&gt;
2004
+ &lt;/tr&gt;
2005
+ &lt;/thead&gt;
2006
+ &lt;tbody&gt;
2007
+ &lt;tr&gt;
2008
+ &lt;td scope="row"&gt;1&lt;/td&gt;
2009
+ &lt;td&gt;Lucia&lt;/td&gt;
2010
+ &lt;td&gt;Christ&lt;/td&gt;
2011
+ &lt;td&gt;@Lucia&lt;/td&gt;
2012
+ &lt;/tr&gt;
2013
+ &lt;tr class="table-primary"&gt;
2014
+ &lt;td scope="row"&gt;2&lt;/td&gt;
2015
+ &lt;td&gt;Catrin&lt;/td&gt;
2016
+ &lt;td&gt;Seidl&lt;/td&gt;
2017
+ &lt;td&gt;@catrin&lt;/td&gt;
2018
+ &lt;/tr&gt;
2019
+ &lt;tr class="table-info"&gt;
2020
+ &lt;td scope="row"&gt;3&lt;/td&gt;
2021
+ &lt;td&gt;Lilli&lt;/td&gt;
2022
+ &lt;td&gt;Kirsh&lt;/td&gt;
2023
+ &lt;td&gt;@lilli&lt;/td&gt;
2024
+ &lt;/tr&gt;
2025
+ &lt;tr class="table-success"&gt;
2026
+ &lt;td scope="row"&gt;4&lt;/td&gt;
2027
+ &lt;td&gt;Else&lt;/td&gt;
2028
+ &lt;td&gt;Voigt&lt;/td&gt;
2029
+ &lt;td&gt;@voigt&lt;/td&gt;
2030
+ &lt;/tr&gt;
2031
+ &lt;tr class="table-danger"&gt;
2032
+ &lt;td scope="row"&gt;5&lt;/td&gt;
2033
+ &lt;td&gt;Ursel&lt;/td&gt;
2034
+ &lt;td&gt;Harms&lt;/td&gt;
2035
+ &lt;td&gt;@ursel&lt;/td&gt;
2036
+ &lt;/tr&gt;
2037
+ &lt;tr class="table-warning"&gt;
2038
+ &lt;td scope="row"&gt;6&lt;/td&gt;
2039
+ &lt;td&gt;Anke&lt;/td&gt;
2040
+ &lt;td&gt;Sauter&lt;/td&gt;
2041
+ &lt;td&gt;@Anke&lt;/td&gt;
2042
+ &lt;/tr&gt;
2043
+ &lt;/tbody&gt;
2044
+ &lt;/table&gt;
2045
+ </code>
2046
+ </pre>
2047
+ </div>
2048
+ <table class="table">
2049
+ <thead>
2050
+ <tr>
2051
+ <th scope="col">#</th>
2052
+ <th scope="col">First</th>
2053
+ <th scope="col">Last</th>
2054
+ <th scope="col">Handle</th>
2055
+ </tr>
2056
+ </thead>
2057
+ <tbody>
2058
+ <tr>
2059
+ <td scope="row">1</td>
2060
+ <td>Lucia</td>
2061
+ <td>Christ</td>
2062
+ <td>@Lucia</td>
2063
+ </tr>
2064
+ <tr class="table-primary">
2065
+ <td scope="row">2</td>
2066
+ <td>Catrin</td>
2067
+ <td>Seidl</td>
2068
+ <td>@catrin</td>
2069
+ </tr>
2070
+ <tr class="table-info">
2071
+ <td scope="row">3</td>
2072
+ <td>Lilli</td>
2073
+ <td>Kirsh</td>
2074
+ <td>@lilli</td>
2075
+ </tr>
2076
+ <tr class="table-success">
2077
+ <td scope="row">4</td>
2078
+ <td>Else</td>
2079
+ <td>Voigt</td>
2080
+ <td>@voigt</td>
2081
+ </tr>
2082
+ <tr class="table-danger">
2083
+ <td scope="row">5</td>
2084
+ <td>Ursel</td>
2085
+ <td>Harms</td>
2086
+ <td>@ursel</td>
2087
+ </tr>
2088
+ <tr class="table-warning">
2089
+ <td scope="row">6</td>
2090
+ <td>Anke</td>
2091
+ <td>Sauter</td>
2092
+ <td>@Anke</td>
2093
+ </tr>
2094
+ </tbody>
2095
+ </table>
2096
+ </div>
2097
+ </div>
2098
+
2099
+ <!-- Table Head States -->
2100
+ <div class="card card-default">
2101
+ <div class="card-header">
2102
+ <h2>Table Head States</h2>
2103
+
2104
+ <a class="btn mdi mdi-code-tags" data-toggle="collapse" href="#collapse-table-head-light" role="button"
2105
+ aria-expanded="false" aria-controls="collapse-table-head-light"> </a>
2106
+
2107
+
2108
+ </div>
2109
+ <div class="card-body">
2110
+ <div class="collapse" id="collapse-table-head-light">
2111
+ <pre class="language-html mb-4">
2112
+ <code >
2113
+ &lt;table class="table table-dark"&gt;
2114
+ &lt;thead&gt;
2115
+ &lt;tr&gt;
2116
+ &lt;th scope="col"&gt;#&lt;/th&gt;
2117
+ &lt;th scope="col"&gt;First&lt;/th&gt;
2118
+ &lt;th scope="col"&gt;Last&lt;/th&gt;
2119
+ &lt;th scope="col"&gt;Handle&lt;/th&gt;
2120
+ &lt;/tr&gt;
2121
+ &lt;/thead&gt;
2122
+ &lt;tbody&gt;
2123
+ &lt;tr&gt;
2124
+ &lt;td scope="row"&gt;1&lt;/td&gt;
2125
+ &lt;td&gt;Lucia&lt;/td&gt;
2126
+ &lt;td&gt;Christ&lt;/td&gt;
2127
+ &lt;td&gt;@Lucia&lt;/td&gt;
2128
+ &lt;/tr&gt;
2129
+ &lt;tr&gt;
2130
+ &lt;td scope="row"&gt;2&lt;/td&gt;
2131
+ &lt;td&gt;Catrin&lt;/td&gt;
2132
+ &lt;td&gt;Seidl&lt;/td&gt;
2133
+ &lt;td&gt;@catrin&lt;/td&gt;
2134
+ &lt;/tr&gt;
2135
+ &lt;tr&gt;
2136
+ &lt;td scope="row"&gt;3&lt;/td&gt;
2137
+ &lt;td&gt;Lilli&lt;/td&gt;
2138
+ &lt;td&gt;Kirsh&lt;/td&gt;
2139
+ &lt;td&gt;@lilli&lt;/td&gt;
2140
+ &lt;/tr&gt;
2141
+ &lt;tr&gt;
2142
+ &lt;td scope="row"&gt;4&lt;/td&gt;
2143
+ &lt;td&gt;Else&lt;/td&gt;
2144
+ &lt;td&gt;Voigt&lt;/td&gt;
2145
+ &lt;td&gt;@voigt&lt;/td&gt;
2146
+ &lt;/tr&gt;
2147
+ &lt;tr&gt;
2148
+ &lt;td scope="row"&gt;5&lt;/td&gt;
2149
+ &lt;td&gt;Ursel&lt;/td&gt;
2150
+ &lt;td&gt;Harms&lt;/td&gt;
2151
+ &lt;td&gt;@ursel&lt;/td&gt;
2152
+ &lt;/tr&gt;
2153
+ &lt;tr&gt;
2154
+ &lt;td scope="row"&gt;6&lt;/td&gt;
2155
+ &lt;td&gt;Anke&lt;/td&gt;
2156
+ &lt;td&gt;Sauter&lt;/td&gt;
2157
+ &lt;td&gt;@Anke&lt;/td&gt;
2158
+ &lt;/tr&gt;
2159
+ &lt;/tbody&gt;
2160
+ &lt;/table&gt;
2161
+ </code>
2162
+ </pre>
2163
+ </div>
2164
+ <table class="table ">
2165
+ <thead class="thead-light">
2166
+ <tr>
2167
+ <th scope="col">#</th>
2168
+ <th scope="col">First</th>
2169
+ <th scope="col">Last</th>
2170
+ <th scope="col">Handle</th>
2171
+ </tr>
2172
+ </thead>
2173
+ <tbody>
2174
+ <tr>
2175
+ <td scope="row">1</td>
2176
+ <td>Lucia</td>
2177
+ <td>Christ</td>
2178
+ <td>@Lucia</td>
2179
+ </tr>
2180
+ <tr>
2181
+ <td scope="row">2</td>
2182
+ <td>Catrin</td>
2183
+ <td>Seidl</td>
2184
+ <td>@catrin</td>
2185
+ </tr>
2186
+ <tr>
2187
+ <td scope="row">3</td>
2188
+ <td>Lilli</td>
2189
+ <td>Kirsh</td>
2190
+ <td>@lilli</td>
2191
+ </tr>
2192
+ <tr>
2193
+ <td scope="row">4</td>
2194
+ <td>Else</td>
2195
+ <td>Voigt</td>
2196
+ <td>@voigt</td>
2197
+ </tr>
2198
+ <tr>
2199
+ <td scope="row">5</td>
2200
+ <td>Ursel</td>
2201
+ <td>Harms</td>
2202
+ <td>@ursel</td>
2203
+ </tr>
2204
+ <tr>
2205
+ <td scope="row">6</td>
2206
+ <td>Anke</td>
2207
+ <td>Sauter</td>
2208
+ <td>@Anke</td>
2209
+ </tr>
2210
+ </tbody>
2211
+ </table>
2212
+ </div>
2213
+ </div>
2214
+ </div>
2215
+
2216
+ </div>
2217
+ </div>
2218
+
2219
+ </div>
2220
+
2221
+ <!-- Footer -->
2222
+ <footer class="footer mt-auto">
2223
+ <div class="copyright bg-white">
2224
+ <p>
2225
+ &copy; <span id="copy-year"></span> Copyright Mono Dashboard Bootstrap Template by <a class="text-primary" href="http://www.iamabdus.com/" target="_blank" >Abdus</a>.
2226
+ </p>
2227
+ </div>
2228
+ <script>
2229
+ var d = new Date();
2230
+ var year = d.getFullYear();
2231
+ document.getElementById("copy-year").innerHTML = year;
2232
+ </script>
2233
+ </footer>
2234
+
2235
+ </div>
2236
+ </div>
2237
+
2238
+ <!-- Card Offcanvas -->
2239
+ <div class="card card-offcanvas" id="contact-off" >
2240
+ <div class="card-header">
2241
+ <h2>Contacts</h2>
2242
+ <a href="#" class="btn btn-primary btn-pill px-4">Add New</a>
2243
+ </div>
2244
+ <div class="card-body">
2245
+
2246
+ <div class="mb-4">
2247
+ <input type="text" class="form-control form-control-lg form-control-secondary rounded-0" placeholder="Search contacts...">
2248
+ </div>
2249
+
2250
+ <div class="media media-sm">
2251
+ <div class="media-sm-wrapper">
2252
+ <a href="user-profile.html">
2253
+ <img src="images/user/user-sm-01.jpg" alt="User Image">
2254
+ <span class="active bg-primary"></span>
2255
+ </a>
2256
+ </div>
2257
+ <div class="media-body">
2258
+ <a href="user-profile.html">
2259
+ <span class="title">Selena Wagner</span>
2260
+ <span class="discribe">Designer</span>
2261
+ </a>
2262
+ </div>
2263
+ </div>
2264
+
2265
+ <div class="media media-sm">
2266
+ <div class="media-sm-wrapper">
2267
+ <a href="user-profile.html">
2268
+ <img src="images/user/user-sm-02.jpg" alt="User Image">
2269
+ <span class="active bg-primary"></span>
2270
+ </a>
2271
+ </div>
2272
+ <div class="media-body">
2273
+ <a href="user-profile.html">
2274
+ <span class="title">Walter Reuter</span>
2275
+ <span>Developer</span>
2276
+ </a>
2277
+ </div>
2278
+ </div>
2279
+
2280
+ <div class="media media-sm">
2281
+ <div class="media-sm-wrapper">
2282
+ <a href="user-profile.html">
2283
+ <img src="images/user/user-sm-03.jpg" alt="User Image">
2284
+ </a>
2285
+ </div>
2286
+ <div class="media-body">
2287
+ <a href="user-profile.html">
2288
+ <span class="title">Larissa Gebhardt</span>
2289
+ <span>Cyber Punk</span>
2290
+ </a>
2291
+ </div>
2292
+ </div>
2293
+
2294
+ <div class="media media-sm">
2295
+ <div class="media-sm-wrapper">
2296
+ <a href="user-profile.html">
2297
+ <img src="images/user/user-sm-04.jpg" alt="User Image">
2298
+ </a>
2299
+
2300
+ </div>
2301
+ <div class="media-body">
2302
+ <a href="user-profile.html">
2303
+ <span class="title">Albrecht Straub</span>
2304
+ <span>Photographer</span>
2305
+ </a>
2306
+ </div>
2307
+ </div>
2308
+
2309
+ <div class="media media-sm">
2310
+ <div class="media-sm-wrapper">
2311
+ <a href="user-profile.html">
2312
+ <img src="images/user/user-sm-05.jpg" alt="User Image">
2313
+ <span class="active bg-danger"></span>
2314
+ </a>
2315
+ </div>
2316
+ <div class="media-body">
2317
+ <a href="user-profile.html">
2318
+ <span class="title">Leopold Ebert</span>
2319
+ <span>Fashion Designer</span>
2320
+ </a>
2321
+ </div>
2322
+ </div>
2323
+
2324
+ <div class="media media-sm">
2325
+ <div class="media-sm-wrapper">
2326
+ <a href="user-profile.html">
2327
+ <img src="images/user/user-sm-06.jpg" alt="User Image">
2328
+ <span class="active bg-primary"></span>
2329
+ </a>
2330
+ </div>
2331
+ <div class="media-body">
2332
+ <a href="user-profile.html">
2333
+ <span class="title">Selena Wagner</span>
2334
+ <span>Photographer</span>
2335
+ </a>
2336
+ </div>
2337
+ </div>
2338
+
2339
+ </div>
2340
+ </div>
2341
+
2342
+
2343
+
2344
+
2345
+ <script src="plugins/jquery/jquery.min.js"></script>
2346
+ <script src="plugins/bootstrap/js/bootstrap.bundle.min.js"></script>
2347
+ <script src="plugins/simplebar/simplebar.min.js"></script>
2348
+ <script src="https://unpkg.com/hotkeys-js/dist/hotkeys.min.js"></script>
2349
+
2350
+
2351
+
2352
+ <script src="plugins/prism/prism.js"></script>
2353
+
2354
+
2355
+
2356
+ <script src="plugins/DataTables/DataTables-1.10.18/js/jquery.dataTables.min.js"></script>
2357
+
2358
+
2359
+
2360
+ <script src="plugins/apexcharts/apexcharts.js"></script>
2361
+
2362
+
2363
+ <script src="js/mono.js"></script>
2364
+ <script src="js/chart.js"></script>
2365
+ <script src="js/map.js"></script>
2366
+ <script src="js/custom.js"></script>
2367
+
2368
+
2369
+
2370
+
2371
+ <!-- -->
2372
+
2373
+
2374
+ </body>
2375
+ </html>
breadcrumb.html ADDED
@@ -0,0 +1,1737 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+
3
+ <!--
4
+ // WEBSITE: https://themefisher.com
5
+ // TWITTER: https://twitter.com/themefisher
6
+ // FACEBOOK: https://www.facebook.com/themefisher
7
+ // GITHUB: https://github.com/themefisher/
8
+ -->
9
+
10
+ <html lang="en" dir="ltr">
11
+ <head>
12
+ <meta charset="utf-8" />
13
+ <meta http-equiv="X-UA-Compatible" content="IE=edge" />
14
+ <meta name="viewport" content="width=device-width, initial-scale=1" />
15
+
16
+ <title>Mono - Responsive Admin & Dashboard Template</title>
17
+
18
+ <!-- GOOGLE FONTS -->
19
+ <link href="https://fonts.googleapis.com/css?family=Karla:400,700|Roboto" rel="stylesheet">
20
+ <link href="plugins/material/css/materialdesignicons.min.css" rel="stylesheet" />
21
+ <link href="plugins/simplebar/simplebar.css" rel="stylesheet" />
22
+
23
+ <!-- PLUGINS CSS STYLE -->
24
+ <link href="plugins/nprogress/nprogress.css" rel="stylesheet" />
25
+
26
+
27
+ <link href="plugins/prism/prism.css" rel="stylesheet" />
28
+
29
+
30
+ <!-- MONO CSS -->
31
+ <link id="main-css-href" rel="stylesheet" href="css/style.css" />
32
+
33
+
34
+
35
+
36
+ <!-- FAVICON -->
37
+ <link href="images/favicon.png" rel="shortcut icon" />
38
+
39
+ <!--
40
+ HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries
41
+ -->
42
+ <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
43
+ <!--[if lt IE 9]>
44
+ <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
45
+ <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
46
+ <![endif]-->
47
+ <script src="plugins/nprogress/nprogress.js"></script>
48
+ </head>
49
+
50
+
51
+ <body class="navbar-fixed sidebar-fixed" id="body">
52
+ <script>
53
+ NProgress.configure({ showSpinner: false });
54
+ NProgress.start();
55
+ </script>
56
+
57
+
58
+
59
+ <!-- ====================================
60
+ ——— WRAPPER
61
+ ===================================== -->
62
+ <div class="wrapper">
63
+
64
+
65
+ <!-- ====================================
66
+ ——— LEFT SIDEBAR WITH OUT FOOTER
67
+ ===================================== -->
68
+ <aside class="left-sidebar sidebar-dark" id="left-sidebar">
69
+ <div id="sidebar" class="sidebar sidebar-with-footer">
70
+ <!-- Aplication Brand -->
71
+ <div class="app-brand">
72
+ <a href="/index.html">
73
+ <img src="images/logo.png" alt="Mono">
74
+ <span class="brand-name">MONO</span>
75
+ </a>
76
+ </div>
77
+ <!-- begin sidebar scrollbar -->
78
+ <div class="sidebar-left" data-simplebar style="height: 100%;">
79
+ <!-- sidebar menu -->
80
+ <ul class="nav sidebar-inner" id="sidebar-menu">
81
+
82
+
83
+
84
+ <li
85
+ >
86
+ <a class="sidenav-item-link" href="index.html">
87
+ <i class="mdi mdi-briefcase-account-outline"></i>
88
+ <span class="nav-text">Business Dashboard</span>
89
+ </a>
90
+ </li>
91
+
92
+
93
+
94
+
95
+
96
+ <li
97
+ >
98
+ <a class="sidenav-item-link" href="analytics.html">
99
+ <i class="mdi mdi-chart-line"></i>
100
+ <span class="nav-text">Analytics Dashboard</span>
101
+ </a>
102
+ </li>
103
+
104
+
105
+
106
+
107
+
108
+ <li class="section-title">
109
+ Apps
110
+ </li>
111
+
112
+
113
+
114
+
115
+
116
+ <li
117
+ >
118
+ <a class="sidenav-item-link" href="chat.html">
119
+ <i class="mdi mdi-wechat"></i>
120
+ <span class="nav-text">Chat</span>
121
+ </a>
122
+ </li>
123
+
124
+
125
+
126
+
127
+
128
+ <li
129
+ >
130
+ <a class="sidenav-item-link" href="contacts.html">
131
+ <i class="mdi mdi-phone"></i>
132
+ <span class="nav-text">Contacts</span>
133
+ </a>
134
+ </li>
135
+
136
+
137
+
138
+
139
+
140
+ <li
141
+ >
142
+ <a class="sidenav-item-link" href="team.html">
143
+ <i class="mdi mdi-account-group"></i>
144
+ <span class="nav-text">Team</span>
145
+ </a>
146
+ </li>
147
+
148
+
149
+
150
+
151
+
152
+ <li
153
+ >
154
+ <a class="sidenav-item-link" href="calendar.html">
155
+ <i class="mdi mdi-calendar-check"></i>
156
+ <span class="nav-text">Calendar</span>
157
+ </a>
158
+ </li>
159
+
160
+
161
+
162
+
163
+
164
+ <li class="has-sub" >
165
+ <a class="sidenav-item-link" href="javascript:void(0)" data-toggle="collapse" data-target="#email"
166
+ aria-expanded="false" aria-controls="email">
167
+ <i class="mdi mdi-email"></i>
168
+ <span class="nav-text">email</span> <b class="caret"></b>
169
+ </a>
170
+ <ul class="collapse" id="email"
171
+ data-parent="#sidebar-menu">
172
+ <div class="sub-menu">
173
+
174
+
175
+
176
+ <li >
177
+ <a class="sidenav-item-link" href="email-inbox.html">
178
+ <span class="nav-text">Email Inbox</span>
179
+
180
+ </a>
181
+ </li>
182
+
183
+
184
+
185
+
186
+
187
+
188
+ <li >
189
+ <a class="sidenav-item-link" href="email-details.html">
190
+ <span class="nav-text">Email Details</span>
191
+
192
+ </a>
193
+ </li>
194
+
195
+
196
+
197
+
198
+
199
+
200
+ <li >
201
+ <a class="sidenav-item-link" href="email-compose.html">
202
+ <span class="nav-text">Email Compose</span>
203
+
204
+ </a>
205
+ </li>
206
+
207
+
208
+
209
+
210
+ </div>
211
+ </ul>
212
+ </li>
213
+
214
+
215
+
216
+
217
+
218
+ <li class="section-title">
219
+ UI Elements
220
+ </li>
221
+
222
+
223
+
224
+
225
+
226
+ <li class="has-sub active expand" >
227
+ <a class="sidenav-item-link" href="javascript:void(0)" data-toggle="collapse" data-target="#ui-elements"
228
+ aria-expanded="false" aria-controls="ui-elements">
229
+ <i class="mdi mdi-folder-outline"></i>
230
+ <span class="nav-text">UI Components</span> <b class="caret"></b>
231
+ </a>
232
+ <ul class="collapse show" id="ui-elements"
233
+ data-parent="#sidebar-menu">
234
+ <div class="sub-menu">
235
+
236
+
237
+
238
+ <li >
239
+ <a class="sidenav-item-link" href="alert.html">
240
+ <span class="nav-text">Alert</span>
241
+
242
+ </a>
243
+ </li>
244
+
245
+
246
+
247
+
248
+
249
+
250
+ <li >
251
+ <a class="sidenav-item-link" href="badge.html">
252
+ <span class="nav-text">Badge</span>
253
+
254
+ </a>
255
+ </li>
256
+
257
+
258
+
259
+
260
+
261
+
262
+ <li class="active" >
263
+ <a class="sidenav-item-link" href="breadcrumb.html">
264
+ <span class="nav-text">Breadcrumb</span>
265
+
266
+ </a>
267
+ </li>
268
+
269
+
270
+
271
+
272
+
273
+ <li class="has-sub" >
274
+ <a class="sidenav-item-link" href="javascript:void(0)" data-toggle="collapse" data-target="#buttons"
275
+ aria-expanded="false" aria-controls="buttons">
276
+ <span class="nav-text">Buttons</span> <b class="caret"></b>
277
+ </a>
278
+ <ul class="collapse" id="buttons">
279
+ <div class="sub-menu">
280
+
281
+ <li >
282
+ <a href="button-default.html">Button Default</a>
283
+ </li>
284
+
285
+ <li >
286
+ <a href="button-dropdown.html">Button Dropdown</a>
287
+ </li>
288
+
289
+ <li >
290
+ <a href="button-group.html">Button Group</a>
291
+ </li>
292
+
293
+ <li >
294
+ <a href="button-social.html">Button Social</a>
295
+ </li>
296
+
297
+ <li >
298
+ <a href="button-loading.html">Button Loading</a>
299
+ </li>
300
+
301
+ </div>
302
+ </ul>
303
+ </li>
304
+
305
+
306
+
307
+
308
+
309
+ <li >
310
+ <a class="sidenav-item-link" href="card.html">
311
+ <span class="nav-text">Card</span>
312
+
313
+ </a>
314
+ </li>
315
+
316
+
317
+
318
+
319
+
320
+
321
+ <li >
322
+ <a class="sidenav-item-link" href="carousel.html">
323
+ <span class="nav-text">Carousel</span>
324
+
325
+ </a>
326
+ </li>
327
+
328
+
329
+
330
+
331
+
332
+
333
+ <li >
334
+ <a class="sidenav-item-link" href="collapse.html">
335
+ <span class="nav-text">Collapse</span>
336
+
337
+ </a>
338
+ </li>
339
+
340
+
341
+
342
+
343
+
344
+
345
+ <li >
346
+ <a class="sidenav-item-link" href="editor.html">
347
+ <span class="nav-text">Editor</span>
348
+
349
+ </a>
350
+ </li>
351
+
352
+
353
+
354
+
355
+
356
+
357
+ <li >
358
+ <a class="sidenav-item-link" href="list-group.html">
359
+ <span class="nav-text">List Group</span>
360
+
361
+ </a>
362
+ </li>
363
+
364
+
365
+
366
+
367
+
368
+
369
+ <li >
370
+ <a class="sidenav-item-link" href="modal.html">
371
+ <span class="nav-text">Modal</span>
372
+
373
+ </a>
374
+ </li>
375
+
376
+
377
+
378
+
379
+
380
+
381
+ <li >
382
+ <a class="sidenav-item-link" href="pagination.html">
383
+ <span class="nav-text">Pagination</span>
384
+
385
+ </a>
386
+ </li>
387
+
388
+
389
+
390
+
391
+
392
+
393
+ <li >
394
+ <a class="sidenav-item-link" href="popover-tooltip.html">
395
+ <span class="nav-text">Popover & Tooltip</span>
396
+
397
+ </a>
398
+ </li>
399
+
400
+
401
+
402
+
403
+
404
+
405
+ <li >
406
+ <a class="sidenav-item-link" href="progress-bar.html">
407
+ <span class="nav-text">Progress Bar</span>
408
+
409
+ </a>
410
+ </li>
411
+
412
+
413
+
414
+
415
+
416
+
417
+ <li >
418
+ <a class="sidenav-item-link" href="spinner.html">
419
+ <span class="nav-text">Spinner</span>
420
+
421
+ </a>
422
+ </li>
423
+
424
+
425
+
426
+
427
+
428
+
429
+ <li >
430
+ <a class="sidenav-item-link" href="switches.html">
431
+ <span class="nav-text">Switches</span>
432
+
433
+ </a>
434
+ </li>
435
+
436
+
437
+
438
+
439
+
440
+ <li class="has-sub" >
441
+ <a class="sidenav-item-link" href="javascript:void(0)" data-toggle="collapse" data-target="#tables"
442
+ aria-expanded="false" aria-controls="tables">
443
+ <span class="nav-text">Tables</span> <b class="caret"></b>
444
+ </a>
445
+ <ul class="collapse" id="tables">
446
+ <div class="sub-menu">
447
+
448
+ <li >
449
+ <a href="bootstarp-tables.html">Bootstrap Tables</a>
450
+ </li>
451
+
452
+ <li >
453
+ <a href="data-tables.html">Data Tables</a>
454
+ </li>
455
+
456
+ </div>
457
+ </ul>
458
+ </li>
459
+
460
+
461
+
462
+
463
+
464
+ <li >
465
+ <a class="sidenav-item-link" href="tab.html">
466
+ <span class="nav-text">Tab</span>
467
+
468
+ </a>
469
+ </li>
470
+
471
+
472
+
473
+
474
+
475
+
476
+ <li >
477
+ <a class="sidenav-item-link" href="toaster.html">
478
+ <span class="nav-text">Toaster</span>
479
+
480
+ </a>
481
+ </li>
482
+
483
+
484
+
485
+
486
+
487
+ <li class="has-sub" >
488
+ <a class="sidenav-item-link" href="javascript:void(0)" data-toggle="collapse" data-target="#icons"
489
+ aria-expanded="false" aria-controls="icons">
490
+ <span class="nav-text">Icons</span> <b class="caret"></b>
491
+ </a>
492
+ <ul class="collapse" id="icons">
493
+ <div class="sub-menu">
494
+
495
+ <li >
496
+ <a href="material-icons.html">Material Icon</a>
497
+ </li>
498
+
499
+ <li >
500
+ <a href="flag-icons.html">Flag Icon</a>
501
+ </li>
502
+
503
+ </div>
504
+ </ul>
505
+ </li>
506
+
507
+
508
+
509
+
510
+ <li class="has-sub" >
511
+ <a class="sidenav-item-link" href="javascript:void(0)" data-toggle="collapse" data-target="#forms"
512
+ aria-expanded="false" aria-controls="forms">
513
+ <span class="nav-text">Forms</span> <b class="caret"></b>
514
+ </a>
515
+ <ul class="collapse" id="forms">
516
+ <div class="sub-menu">
517
+
518
+ <li >
519
+ <a href="basic-input.html">Basic Input</a>
520
+ </li>
521
+
522
+ <li >
523
+ <a href="input-group.html">Input Group</a>
524
+ </li>
525
+
526
+ <li >
527
+ <a href="checkbox-radio.html">Checkbox & Radio</a>
528
+ </li>
529
+
530
+ <li >
531
+ <a href="form-validation.html">Form Validation</a>
532
+ </li>
533
+
534
+ <li >
535
+ <a href="form-advance.html">Form Advance</a>
536
+ </li>
537
+
538
+ </div>
539
+ </ul>
540
+ </li>
541
+
542
+
543
+
544
+
545
+ <li class="has-sub" >
546
+ <a class="sidenav-item-link" href="javascript:void(0)" data-toggle="collapse" data-target="#maps"
547
+ aria-expanded="false" aria-controls="maps">
548
+ <span class="nav-text">Maps</span> <b class="caret"></b>
549
+ </a>
550
+ <ul class="collapse" id="maps">
551
+ <div class="sub-menu">
552
+
553
+ <li >
554
+ <a href="google-maps.html">Google Map</a>
555
+ </li>
556
+
557
+ <li >
558
+ <a href="vector-maps.html">Vector Map</a>
559
+ </li>
560
+
561
+ </div>
562
+ </ul>
563
+ </li>
564
+
565
+
566
+
567
+
568
+ <li class="has-sub" >
569
+ <a class="sidenav-item-link" href="javascript:void(0)" data-toggle="collapse" data-target="#widgets"
570
+ aria-expanded="false" aria-controls="widgets">
571
+ <span class="nav-text">Widgets</span> <b class="caret"></b>
572
+ </a>
573
+ <ul class="collapse" id="widgets">
574
+ <div class="sub-menu">
575
+
576
+ <li >
577
+ <a href="widgets-general.html">General Widget</a>
578
+ </li>
579
+
580
+ <li >
581
+ <a href="widgets-chart.html">Chart Widget</a>
582
+ </li>
583
+
584
+ </div>
585
+ </ul>
586
+ </li>
587
+
588
+
589
+
590
+ </div>
591
+ </ul>
592
+ </li>
593
+
594
+
595
+
596
+
597
+
598
+ <li class="has-sub" >
599
+ <a class="sidenav-item-link" href="javascript:void(0)" data-toggle="collapse" data-target="#charts"
600
+ aria-expanded="false" aria-controls="charts">
601
+ <i class="mdi mdi-chart-pie"></i>
602
+ <span class="nav-text">Charts</span> <b class="caret"></b>
603
+ </a>
604
+ <ul class="collapse" id="charts"
605
+ data-parent="#sidebar-menu">
606
+ <div class="sub-menu">
607
+
608
+
609
+
610
+ <li >
611
+ <a class="sidenav-item-link" href="apex-charts.html">
612
+ <span class="nav-text">Apex Charts</span>
613
+
614
+ </a>
615
+ </li>
616
+
617
+
618
+
619
+
620
+ </div>
621
+ </ul>
622
+ </li>
623
+
624
+
625
+
626
+
627
+
628
+ <li class="section-title">
629
+ Pages
630
+ </li>
631
+
632
+
633
+
634
+
635
+
636
+ <li class="has-sub" >
637
+ <a class="sidenav-item-link" href="javascript:void(0)" data-toggle="collapse" data-target="#users"
638
+ aria-expanded="false" aria-controls="users">
639
+ <i class="mdi mdi-image-filter-none"></i>
640
+ <span class="nav-text">User</span> <b class="caret"></b>
641
+ </a>
642
+ <ul class="collapse" id="users"
643
+ data-parent="#sidebar-menu">
644
+ <div class="sub-menu">
645
+
646
+
647
+
648
+ <li >
649
+ <a class="sidenav-item-link" href="user-profile.html">
650
+ <span class="nav-text">User Profile</span>
651
+
652
+ </a>
653
+ </li>
654
+
655
+
656
+
657
+
658
+
659
+
660
+ <li >
661
+ <a class="sidenav-item-link" href="user-activities.html">
662
+ <span class="nav-text">User Activities</span>
663
+
664
+ </a>
665
+ </li>
666
+
667
+
668
+
669
+
670
+
671
+
672
+ <li >
673
+ <a class="sidenav-item-link" href="user-profile-settings.html">
674
+ <span class="nav-text">User Profile Settings</span>
675
+
676
+ </a>
677
+ </li>
678
+
679
+
680
+
681
+
682
+
683
+
684
+ <li >
685
+ <a class="sidenav-item-link" href="user-account-settings.html">
686
+ <span class="nav-text">User Account Settings</span>
687
+
688
+ </a>
689
+ </li>
690
+
691
+
692
+
693
+
694
+
695
+
696
+ <li >
697
+ <a class="sidenav-item-link" href="user-planing-settings.html">
698
+ <span class="nav-text">User Planing Settings</span>
699
+
700
+ </a>
701
+ </li>
702
+
703
+
704
+
705
+
706
+
707
+
708
+ <li >
709
+ <a class="sidenav-item-link" href="user-billing.html">
710
+ <span class="nav-text">User billing</span>
711
+
712
+ </a>
713
+ </li>
714
+
715
+
716
+
717
+
718
+
719
+
720
+ <li >
721
+ <a class="sidenav-item-link" href="user-notify-settings.html">
722
+ <span class="nav-text">User Notify Settings</span>
723
+
724
+ </a>
725
+ </li>
726
+
727
+
728
+
729
+
730
+ </div>
731
+ </ul>
732
+ </li>
733
+
734
+
735
+
736
+
737
+
738
+ <li class="has-sub" >
739
+ <a class="sidenav-item-link" href="javascript:void(0)" data-toggle="collapse" data-target="#authentication"
740
+ aria-expanded="false" aria-controls="authentication">
741
+ <i class="mdi mdi-account"></i>
742
+ <span class="nav-text">Authentication</span> <b class="caret"></b>
743
+ </a>
744
+ <ul class="collapse" id="authentication"
745
+ data-parent="#sidebar-menu">
746
+ <div class="sub-menu">
747
+
748
+
749
+
750
+ <li >
751
+ <a class="sidenav-item-link" href="sign-in.html">
752
+ <span class="nav-text">Sign In</span>
753
+
754
+ </a>
755
+ </li>
756
+
757
+
758
+
759
+
760
+
761
+
762
+ <li >
763
+ <a class="sidenav-item-link" href="sign-up.html">
764
+ <span class="nav-text">Sign Up</span>
765
+
766
+ </a>
767
+ </li>
768
+
769
+
770
+
771
+
772
+
773
+
774
+ <li >
775
+ <a class="sidenav-item-link" href="reset-password.html">
776
+ <span class="nav-text">Reset Password</span>
777
+
778
+ </a>
779
+ </li>
780
+
781
+
782
+
783
+
784
+ </div>
785
+ </ul>
786
+ </li>
787
+
788
+
789
+
790
+
791
+
792
+ <li class="has-sub" >
793
+ <a class="sidenav-item-link" href="javascript:void(0)" data-toggle="collapse" data-target="#other-page"
794
+ aria-expanded="false" aria-controls="other-page">
795
+ <i class="mdi mdi-file-multiple"></i>
796
+ <span class="nav-text">Other pages</span> <b class="caret"></b>
797
+ </a>
798
+ <ul class="collapse" id="other-page"
799
+ data-parent="#sidebar-menu">
800
+ <div class="sub-menu">
801
+
802
+
803
+
804
+ <li >
805
+ <a class="sidenav-item-link" href="invoice.html">
806
+ <span class="nav-text">Invoice</span>
807
+
808
+ </a>
809
+ </li>
810
+
811
+
812
+
813
+
814
+
815
+
816
+ <li >
817
+ <a class="sidenav-item-link" href="404.html">
818
+ <span class="nav-text">404 page</span>
819
+
820
+ </a>
821
+ </li>
822
+
823
+
824
+
825
+
826
+
827
+
828
+ <li >
829
+ <a class="sidenav-item-link" href="page-comingsoon.html">
830
+ <span class="nav-text">Coming Soon</span>
831
+
832
+ </a>
833
+ </li>
834
+
835
+
836
+
837
+
838
+
839
+
840
+ <li >
841
+ <a class="sidenav-item-link" href="page-maintenance.html">
842
+ <span class="nav-text">Maintenance</span>
843
+
844
+ </a>
845
+ </li>
846
+
847
+
848
+
849
+
850
+ </div>
851
+ </ul>
852
+ </li>
853
+
854
+
855
+
856
+
857
+
858
+ <li class="section-title">
859
+ Documentation
860
+ </li>
861
+
862
+
863
+
864
+
865
+
866
+ <li
867
+ >
868
+ <a class="sidenav-item-link" href="getting-started.html">
869
+ <i class="mdi mdi-airplane"></i>
870
+ <span class="nav-text">Getting Started</span>
871
+ </a>
872
+ </li>
873
+
874
+
875
+
876
+
877
+
878
+ <li class="has-sub" >
879
+ <a class="sidenav-item-link" href="javascript:void(0)" data-toggle="collapse" data-target="#customization"
880
+ aria-expanded="false" aria-controls="customization">
881
+ <i class="mdi mdi-square-edit-outline"></i>
882
+ <span class="nav-text">Customization</span> <b class="caret"></b>
883
+ </a>
884
+ <ul class="collapse" id="customization"
885
+ data-parent="#sidebar-menu">
886
+ <div class="sub-menu">
887
+
888
+
889
+
890
+ <li >
891
+ <a class="sidenav-item-link" href="navbar-customization.html">
892
+ <span class="nav-text">Navbar</span>
893
+
894
+ </a>
895
+ </li>
896
+
897
+
898
+
899
+
900
+
901
+
902
+ <li >
903
+ <a class="sidenav-item-link" href="sidebar-customization.html">
904
+ <span class="nav-text">Sidebar</span>
905
+
906
+ </a>
907
+ </li>
908
+
909
+
910
+
911
+
912
+
913
+
914
+ <li >
915
+ <a class="sidenav-item-link" href="styling.html">
916
+ <span class="nav-text">Styling</span>
917
+
918
+ </a>
919
+ </li>
920
+
921
+
922
+
923
+
924
+ </div>
925
+ </ul>
926
+ </li>
927
+
928
+
929
+
930
+ </ul>
931
+
932
+ </div>
933
+
934
+ <div class="sidebar-footer">
935
+ <div class="sidebar-footer-content">
936
+ <ul class="d-flex">
937
+ <li>
938
+ <a href="user-account-settings.html" data-toggle="tooltip" title="Profile settings"><i class="mdi mdi-settings"></i></a></li>
939
+ <li>
940
+ <a href="#" data-toggle="tooltip" title="No chat messages"><i class="mdi mdi-chat-processing"></i></a>
941
+ </li>
942
+ </ul>
943
+ </div>
944
+ </div>
945
+ </div>
946
+ </aside>
947
+
948
+
949
+
950
+ <!-- ====================================
951
+ ——— PAGE WRAPPER
952
+ ===================================== -->
953
+ <div class="page-wrapper">
954
+
955
+ <!-- Header -->
956
+ <header class="main-header" id="header">
957
+ <nav class="navbar navbar-expand-lg navbar-light" id="navbar">
958
+ <!-- Sidebar toggle button -->
959
+ <button id="sidebar-toggler" class="sidebar-toggle">
960
+ <span class="sr-only">Toggle navigation</span>
961
+ </button>
962
+
963
+ <span class="page-title">breadcrumb</span>
964
+
965
+ <div class="navbar-right ">
966
+
967
+ <!-- search form -->
968
+ <div class="search-form">
969
+ <form action="index.html" method="get">
970
+ <div class="input-group input-group-sm" id="input-group-search">
971
+ <input type="text" autocomplete="off" name="query" id="search-input" class="form-control" placeholder="Search..." />
972
+ <div class="input-group-append">
973
+ <button class="btn" type="button">/</button>
974
+ </div>
975
+ </div>
976
+ </form>
977
+ <ul class="dropdown-menu dropdown-menu-search">
978
+
979
+ <li class="nav-item">
980
+ <a class="nav-link" href="index.html">Morbi leo risus</a>
981
+ </li>
982
+ <li class="nav-item">
983
+ <a class="nav-link" href="index.html">Dapibus ac facilisis in</a>
984
+ </li>
985
+ <li class="nav-item">
986
+ <a class="nav-link" href="index.html">Porta ac consectetur ac</a>
987
+ </li>
988
+ <li class="nav-item">
989
+ <a class="nav-link" href="index.html">Vestibulum at eros</a>
990
+ </li>
991
+
992
+ </ul>
993
+
994
+ </div>
995
+
996
+ <ul class="nav navbar-nav">
997
+ <!-- Offcanvas -->
998
+ <li class="custom-dropdown">
999
+ <a class="offcanvas-toggler active custom-dropdown-toggler" data-offcanvas="contact-off" href="javascript:" >
1000
+ <i class="mdi mdi-contacts icon"></i>
1001
+ </a>
1002
+ </li>
1003
+ <li class="custom-dropdown">
1004
+ <button class="notify-toggler custom-dropdown-toggler">
1005
+ <i class="mdi mdi-bell-outline icon"></i>
1006
+ <span class="badge badge-xs rounded-circle">21</span>
1007
+ </button>
1008
+ <div class="dropdown-notify">
1009
+
1010
+ <header>
1011
+ <div class="nav nav-underline" id="nav-tab" role="tablist">
1012
+ <a class="nav-item nav-link active" id="all-tabs" data-toggle="tab" href="#all" role="tab" aria-controls="nav-home"
1013
+ aria-selected="true">All (5)</a>
1014
+ <a class="nav-item nav-link" id="message-tab" data-toggle="tab" href="#message" role="tab" aria-controls="nav-profile"
1015
+ aria-selected="false">Msgs (4)</a>
1016
+ <a class="nav-item nav-link" id="other-tab" data-toggle="tab" href="#other" role="tab" aria-controls="nav-contact"
1017
+ aria-selected="false">Others (3)</a>
1018
+ </div>
1019
+ </header>
1020
+
1021
+ <div class="" data-simplebar style="height: 325px;">
1022
+ <div class="tab-content" id="myTabContent">
1023
+
1024
+ <div class="tab-pane fade show active" id="all" role="tabpanel" aria-labelledby="all-tabs">
1025
+
1026
+ <div class="media media-sm bg-warning-10 p-4 mb-0">
1027
+ <div class="media-sm-wrapper">
1028
+ <a href="user-profile.html">
1029
+ <img src="images/user/user-sm-02.jpg" alt="User Image">
1030
+ </a>
1031
+ </div>
1032
+ <div class="media-body">
1033
+ <a href="user-profile.html">
1034
+ <span class="title mb-0">John Doe</span>
1035
+ <span class="discribe">Extremity sweetness difficult behaviour he of. On disposal of as landlord horrible. Afraid at highly months do things on at.</span>
1036
+ <span class="time">
1037
+ <time>Just now</time>...
1038
+ </span>
1039
+ </a>
1040
+ </div>
1041
+ </div>
1042
+
1043
+ <div class="media media-sm p-4 bg-light mb-0">
1044
+ <div class="media-sm-wrapper bg-primary">
1045
+ <a href="user-profile.html">
1046
+ <i class="mdi mdi-calendar-check-outline"></i>
1047
+ </a>
1048
+ </div>
1049
+ <div class="media-body">
1050
+ <a href="user-profile.html">
1051
+ <span class="title mb-0">New event added</span>
1052
+ <span class="discribe">1/3/2014 (1pm - 2pm)</span>
1053
+ <span class="time">
1054
+ <time>10 min ago...</time>...
1055
+ </span>
1056
+ </a>
1057
+ </div>
1058
+ </div>
1059
+
1060
+ <div class="media media-sm p-4 mb-0">
1061
+ <div class="media-sm-wrapper">
1062
+ <a href="user-profile.html">
1063
+ <img src="images/user/user-sm-03.jpg" alt="User Image">
1064
+ </a>
1065
+ </div>
1066
+ <div class="media-body">
1067
+ <a href="user-profile.html">
1068
+ <span class="title mb-0">Sagge Hudson</span>
1069
+ <span class="discribe">On disposal of as landlord Afraid at highly months do things on at.</span>
1070
+ <span class="time">
1071
+ <time>1 hrs ago</time>...
1072
+ </span>
1073
+ </a>
1074
+ </div>
1075
+ </div>
1076
+
1077
+ <div class="media media-sm p-4 mb-0">
1078
+ <div class="media-sm-wrapper bg-info-dark">
1079
+ <a href="user-profile.html">
1080
+ <i class="mdi mdi-account-multiple-check"></i>
1081
+ </a>
1082
+ </div>
1083
+ <div class="media-body">
1084
+ <a href="user-profile.html">
1085
+ <span class="title mb-0">Add request</span>
1086
+ <span class="discribe">Add Dany Jones as your contact.</span>
1087
+ <div class="buttons">
1088
+ <a href="#" class="btn btn-sm btn-success shadow-none text-white">accept</a>
1089
+ <a href="#" class="btn btn-sm shadow-none">delete</a>
1090
+ </div>
1091
+ <span class="time">
1092
+ <time>6 hrs ago</time>...
1093
+ </span>
1094
+ </a>
1095
+ </div>
1096
+ </div>
1097
+
1098
+ <div class="media media-sm p-4 mb-0">
1099
+ <div class="media-sm-wrapper bg-info">
1100
+ <a href="user-profile.html">
1101
+ <i class="mdi mdi-playlist-check"></i>
1102
+ </a>
1103
+ </div>
1104
+ <div class="media-body">
1105
+ <a href="user-profile.html">
1106
+ <span class="title mb-0">Task complete</span>
1107
+ <span class="discribe">Afraid at highly months do things on at.</span>
1108
+ <span class="time">
1109
+ <time>1 hrs ago</time>...
1110
+ </span>
1111
+ </a>
1112
+ </div>
1113
+ </div>
1114
+
1115
+ </div>
1116
+
1117
+ <div class="tab-pane fade" id="message" role="tabpanel" aria-labelledby="message-tab">
1118
+
1119
+ <div class="media media-sm p-4 mb-0">
1120
+ <div class="media-sm-wrapper">
1121
+ <a href="user-profile.html">
1122
+ <img src="images/user/user-sm-01.jpg" alt="User Image">
1123
+ </a>
1124
+ </div>
1125
+ <div class="media-body">
1126
+ <a href="user-profile.html">
1127
+ <span class="title mb-0">Selena Wagner</span>
1128
+ <span class="discribe">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</span>
1129
+ <span class="time">
1130
+ <time>15 min ago</time>...
1131
+ </span>
1132
+ </a>
1133
+ </div>
1134
+ </div>
1135
+
1136
+ <div class="media media-sm p-4 mb-0">
1137
+ <div class="media-sm-wrapper">
1138
+ <a href="user-profile.html">
1139
+ <img src="images/user/user-sm-03.jpg" alt="User Image">
1140
+ </a>
1141
+ </div>
1142
+ <div class="media-body">
1143
+ <a href="user-profile.html">
1144
+ <span class="title mb-0">Sagge Hudson</span>
1145
+ <span class="discribe">On disposal of as landlord Afraid at highly months do things on at.</span>
1146
+ <span class="time">
1147
+ <time>1 hrs ago</time>...
1148
+ </span>
1149
+ </a>
1150
+ </div>
1151
+ </div>
1152
+
1153
+ <div class="media media-sm bg-warning-10 p-4 mb-0">
1154
+ <div class="media-sm-wrapper">
1155
+ <a href="user-profile.html">
1156
+ <img src="images/user/user-sm-02.jpg" alt="User Image">
1157
+ </a>
1158
+ </div>
1159
+ <div class="media-body">
1160
+ <a href="user-profile.html">
1161
+ <span class="title mb-0">John Doe</span>
1162
+ <span class="discribe">Extremity sweetness difficult behaviour he of. On disposal of as landlord horrible. Afraid
1163
+ at highly months do things on at.</span>
1164
+ <span class="time">
1165
+ <time>Just now</time>...
1166
+ </span>
1167
+ </a>
1168
+ </div>
1169
+ </div>
1170
+
1171
+ <div class="media media-sm p-4 mb-0">
1172
+ <div class="media-sm-wrapper">
1173
+ <a href="user-profile.html">
1174
+ <img src="images/user/user-sm-04.jpg" alt="User Image">
1175
+ </a>
1176
+ </div>
1177
+ <div class="media-body">
1178
+ <a href="user-profile.html">
1179
+ <span class="title mb-0">Albrecht Straub</span>
1180
+ <span class="discribe"> Beatae quia natus assumenda laboriosam, nisi perferendis aliquid consectetur expedita non tenetur.</span>
1181
+ <span class="time">
1182
+ <time>Just now</time>...
1183
+ </span>
1184
+ </a>
1185
+ </div>
1186
+ </div>
1187
+
1188
+ </div>
1189
+ <div class="tab-pane fade" id="other" role="tabpanel" aria-labelledby="contact-tab">
1190
+
1191
+ <div class="media media-sm p-4 bg-light mb-0">
1192
+ <div class="media-sm-wrapper bg-primary">
1193
+ <a href="user-profile.html">
1194
+ <i class="mdi mdi-calendar-check-outline"></i>
1195
+ </a>
1196
+ </div>
1197
+ <div class="media-body">
1198
+ <a href="user-profile.html">
1199
+ <span class="title mb-0">New event added</span>
1200
+ <span class="discribe">1/3/2014 (1pm - 2pm)</span>
1201
+ <span class="time">
1202
+ <time>10 min ago...</time>...
1203
+ </span>
1204
+ </a>
1205
+ </div>
1206
+ </div>
1207
+
1208
+ <div class="media media-sm p-4 mb-0">
1209
+ <div class="media-sm-wrapper bg-info-dark">
1210
+ <a href="user-profile.html">
1211
+ <i class="mdi mdi-account-multiple-check"></i>
1212
+ </a>
1213
+ </div>
1214
+ <div class="media-body">
1215
+ <a href="user-profile.html">
1216
+ <span class="title mb-0">Add request</span>
1217
+ <span class="discribe">Add Dany Jones as your contact.</span>
1218
+ <div class="buttons">
1219
+ <a href="#" class="btn btn-sm btn-success shadow-none text-white">accept</a>
1220
+ <a href="#" class="btn btn-sm shadow-none">delete</a>
1221
+ </div>
1222
+ <span class="time">
1223
+ <time>6 hrs ago</time>...
1224
+ </span>
1225
+ </a>
1226
+ </div>
1227
+ </div>
1228
+
1229
+ <div class="media media-sm p-4 mb-0">
1230
+ <div class="media-sm-wrapper bg-info">
1231
+ <a href="user-profile.html">
1232
+ <i class="mdi mdi-playlist-check"></i>
1233
+ </a>
1234
+ </div>
1235
+ <div class="media-body">
1236
+ <a href="user-profile.html">
1237
+ <span class="title mb-0">Task complete</span>
1238
+ <span class="discribe">Afraid at highly months do things on at.</span>
1239
+ <span class="time">
1240
+ <time>1 hrs ago</time>...
1241
+ </span>
1242
+ </a>
1243
+ </div>
1244
+ </div>
1245
+
1246
+ </div>
1247
+ </div>
1248
+ </div>
1249
+
1250
+ <footer class="border-top dropdown-notify-footer">
1251
+ <div class="d-flex justify-content-between align-items-center py-2 px-4">
1252
+ <span>Last updated 3 min ago</span>
1253
+ <a id="refress-button" href="javascript:" class="btn mdi mdi-cached btn-refress"></a>
1254
+ </div>
1255
+ </footer>
1256
+ </div>
1257
+ </li>
1258
+ <!-- User Account -->
1259
+ <li class="dropdown user-menu">
1260
+ <button class="dropdown-toggle nav-link" data-toggle="dropdown">
1261
+ <img src="images/user/user-xs-01.jpg" class="user-image rounded-circle" alt="User Image" />
1262
+ <span class="d-none d-lg-inline-block">John Doe</span>
1263
+ </button>
1264
+ <ul class="dropdown-menu dropdown-menu-right">
1265
+ <li>
1266
+ <a class="dropdown-link-item" href="user-profile.html">
1267
+ <i class="mdi mdi-account-outline"></i>
1268
+ <span class="nav-text">My Profile</span>
1269
+ </a>
1270
+ </li>
1271
+ <li>
1272
+ <a class="dropdown-link-item" href="email-inbox.html">
1273
+ <i class="mdi mdi-email-outline"></i>
1274
+ <span class="nav-text">Message</span>
1275
+ <span class="badge badge-pill badge-primary">24</span>
1276
+ </a>
1277
+ </li>
1278
+ <li>
1279
+ <a class="dropdown-link-item" href="user-activities.html">
1280
+ <i class="mdi mdi-diamond-stone"></i>
1281
+ <span class="nav-text">Activitise</span></a>
1282
+ </li>
1283
+ <li>
1284
+ <a class="dropdown-link-item" href="user-account-settings.html">
1285
+ <i class="mdi mdi-settings"></i>
1286
+ <span class="nav-text">Account Setting</span>
1287
+ </a>
1288
+ </li>
1289
+
1290
+ <li class="dropdown-footer">
1291
+ <a class="dropdown-link-item" href="sign-in.html"> <i class="mdi mdi-logout"></i> Log Out </a>
1292
+ </li>
1293
+ </ul>
1294
+ </li>
1295
+ </ul>
1296
+ </div>
1297
+ </nav>
1298
+
1299
+
1300
+ </header>
1301
+
1302
+ <!-- ====================================
1303
+ ——— CONTENT WRAPPER
1304
+ ===================================== -->
1305
+ <div class="content-wrapper">
1306
+ <div class="content"> <!-- For Components documentaion -->
1307
+ <div class="card card-default">
1308
+ <div class="px-6 py-4">
1309
+ <p>Mono provides a variety of <span class="text-secondary text-capitalize"> Bootstrap Breadcrumb </span> components with a little customization that suits its design standards. For more information, please see the official <a class="font-weight-bold" href="https://getbootstrap.com/docs/4.3/components/breadcrumb/" target="_blank"> Bootstrap documentation.</a></p>
1310
+ </div>
1311
+ </div>
1312
+
1313
+ <!-- Default Breadcrumb -->
1314
+ <div class="card card-default">
1315
+ <div class="card-header">
1316
+ <h2>Default Breadcrumb</h2>
1317
+
1318
+ <a class="btn mdi mdi-code-tags" data-toggle="collapse" href="#collapse-breadcrumb-1" role="button"
1319
+ aria-expanded="false" aria-controls="collapse-breadcrumb-1"></a>
1320
+ </div>
1321
+ <div class="card-body">
1322
+ <div class="collapse" id="collapse-breadcrumb-1">
1323
+ <pre class="language-html mb-4">
1324
+ <code >
1325
+ &lt;nav aria-label="breadcrumb"&gt;
1326
+ &lt;ol class="breadcrumb"&gt;
1327
+ &lt;li class="breadcrumb-item active" aria-current="page"&gt;Home &lt;/li&gt;
1328
+ &lt;/ol&gt;
1329
+ &lt;/nav&gt;
1330
+
1331
+ &lt;nav aria-label="breadcrumb"&gt;
1332
+ &lt;ol class="breadcrumb"&gt;
1333
+ &lt;li class="breadcrumb-item"&gt; &lt;a href="#"&gt;Home &lt;/a&gt; &lt;/li&gt;
1334
+ &lt;li class="breadcrumb-item active" aria-current="page"&gt;Library &lt;/li&gt;
1335
+ &lt;/ol&gt;
1336
+ &lt;/nav&gt;
1337
+
1338
+ &lt;nav aria-label="breadcrumb"&gt;
1339
+ &lt;ol class="breadcrumb"&gt;
1340
+ &lt;li class="breadcrumb-item"&gt; &lt;a href="#"&gt;Home &lt;/a&gt; &lt;/li&gt;
1341
+ &lt;li class="breadcrumb-item"&gt; &lt;a href="#"&gt;Library &lt;/a&gt; &lt;/li&gt;
1342
+ &lt;li class="breadcrumb-item active" aria-current="page"&gt;Data &lt;/li&gt;
1343
+ &lt;/ol&gt;
1344
+ &lt;/nav&gt;
1345
+ </code>
1346
+ </pre>
1347
+ </div>
1348
+ <div>
1349
+ <nav aria-label="breadcrumb">
1350
+ <ol class="breadcrumb">
1351
+ <li class="breadcrumb-item active" aria-current="page">Home</li>
1352
+ </ol>
1353
+ </nav>
1354
+
1355
+ <nav aria-label="breadcrumb">
1356
+ <ol class="breadcrumb">
1357
+ <li class="breadcrumb-item"><a href="#">Home</a></li>
1358
+ <li class="breadcrumb-item active" aria-current="page">Library</li>
1359
+ </ol>
1360
+ </nav>
1361
+
1362
+ <nav aria-label="breadcrumb">
1363
+ <ol class="breadcrumb">
1364
+ <li class="breadcrumb-item"><a href="#">Home</a></li>
1365
+ <li class="breadcrumb-item"><a href="#">Library</a></li>
1366
+ <li class="breadcrumb-item active" aria-current="page">Data</li>
1367
+ </ol>
1368
+ </nav>
1369
+ </div>
1370
+ </div>
1371
+ </div>
1372
+
1373
+ <!-- Inverse Breadcrumb -->
1374
+ <div class="card card-default">
1375
+ <div class="card-header">
1376
+ <h2>Inverse Breadcrumb</h2>
1377
+
1378
+ <a class="btn mdi mdi-code-tags" data-toggle="collapse" href="#collapse-breadcrumb-2" role="button"
1379
+ aria-expanded="false" aria-controls="collapse-breadcrumb-2"> </a>
1380
+ </div>
1381
+ <div class="card-body">
1382
+ <div class="collapse" id="collapse-breadcrumb-2">
1383
+ <pre class="language-html mb-4">
1384
+ <code >
1385
+ &lt;nav aria-label="breadcrumb"&gt;
1386
+ &lt;ol class="breadcrumb breadcrumb-inverse"&gt;
1387
+ &lt;li class="breadcrumb-item active" aria-current="page"&gt;Home&lt;/li&gt;
1388
+ &lt;/ol&gt;
1389
+ &lt;/nav&gt;
1390
+
1391
+ &lt;nav aria-label="breadcrumb"&gt;
1392
+ &lt;ol class="breadcrumb breadcrumb-inverse"&gt;
1393
+ &lt;li class="breadcrumb-item"&gt;&lt;a href="#"&gt;Home&lt;/a&gt;&lt;/li&gt;
1394
+ &lt;li class="breadcrumb-item active" aria-current="page"&gt;Library&lt;/li&gt;
1395
+ &lt;/ol&gt;
1396
+ &lt;/nav&gt;
1397
+
1398
+ &lt;nav aria-label="breadcrumb"&gt;
1399
+ &lt;ol class="breadcrumb breadcrumb-inverse"&gt;
1400
+ &lt;li class="breadcrumb-item"&gt;&lt;a href="#"&gt;Home&lt;/a&gt;&lt;/li&gt;
1401
+ &lt;li class="breadcrumb-item"&gt;&lt;a href="#"&gt;Library&lt;/a&gt;&lt;/li&gt;
1402
+ &lt;li class="breadcrumb-item active" aria-current="page"&gt;Data&lt;/li&gt;
1403
+ &lt;/ol&gt;
1404
+ &lt;/nav&gt;
1405
+ </code>
1406
+ </pre>
1407
+ </div>
1408
+ <div>
1409
+ <nav aria-label="breadcrumb">
1410
+ <ol class="breadcrumb breadcrumb-inverse">
1411
+ <li class="breadcrumb-item active" aria-current="page">Home</li>
1412
+ </ol>
1413
+ </nav>
1414
+
1415
+ <nav aria-label="breadcrumb">
1416
+ <ol class="breadcrumb breadcrumb-inverse">
1417
+ <li class="breadcrumb-item"><a href="#">Home</a></li>
1418
+ <li class="breadcrumb-item active" aria-current="page">Library</li>
1419
+ </ol>
1420
+ </nav>
1421
+
1422
+ <nav aria-label="breadcrumb">
1423
+ <ol class="breadcrumb breadcrumb-inverse">
1424
+ <li class="breadcrumb-item"><a href="#">Home</a></li>
1425
+ <li class="breadcrumb-item"><a href="#">Library</a></li>
1426
+ <li class="breadcrumb-item active" aria-current="page">Data</li>
1427
+ </ol>
1428
+ </nav>
1429
+ </div>
1430
+ </div>
1431
+ </div>
1432
+
1433
+ <!-- Color Breadcrumb -->
1434
+ <div class="card card-default">
1435
+ <div class="card-header">
1436
+ <h2>Color Breadcrumb</h2>
1437
+
1438
+ <a class="btn mdi mdi-code-tags" data-toggle="collapse" href="#collapse-breadcrumb-3" role="button"
1439
+ aria-expanded="false" aria-controls="collapse-breadcrumb-3"> </a>
1440
+ </div>
1441
+ <div class="card-body">
1442
+ <div class="collapse" id="collapse-breadcrumb-3">
1443
+ <pre class="language-html mb-4">
1444
+ <code>
1445
+ &lt;!-- Breadcrumb Primary --&gt;
1446
+ &lt;nav aria-label="breadcrumb"&gt;
1447
+ &lt;ol class="breadcrumb breadcrumb-primary"&gt;
1448
+ &lt;li class="breadcrumb-item"&gt;&lt;a href="#"&gt;Home&lt;/a&gt;&lt;/li&gt;
1449
+ &lt;li class="breadcrumb-item"&gt;&lt;a href="#"&gt;Library&lt;/a&gt;&lt;/li&gt;
1450
+ &lt;li class="breadcrumb-item active" aria-current="page"&gt;Data&lt;/li&gt;
1451
+ &lt;/ol&gt;
1452
+ &lt;/nav&gt;
1453
+
1454
+ &lt;!-- Breadcrumb Primary --&gt;
1455
+ &lt;nav aria-label="breadcrumb"&gt;
1456
+ &lt;ol class="breadcrumb breadcrumb-secondary"&gt;
1457
+ &lt;li class="breadcrumb-item"&gt;&lt;a href="#"&gt;Home&lt;/a&gt;&lt;/li&gt;
1458
+ &lt;li class="breadcrumb-item"&gt;&lt;a href="#"&gt;Library&lt;/a&gt;&lt;/li&gt;
1459
+ &lt;li class="breadcrumb-item active" aria-current="page"&gt;Data&lt;/li&gt;
1460
+ &lt;/ol&gt;
1461
+ &lt;/nav&gt;
1462
+
1463
+ &lt;!-- Breadcrumb success --&gt;
1464
+ &lt;nav aria-label="breadcrumb"&gt;
1465
+ &lt;ol class="breadcrumb breadcrumb-success"&gt;
1466
+ &lt;li class="breadcrumb-item"&gt;&lt;a href="#"&gt;Home&lt;/a&gt;&lt;/li&gt;
1467
+ &lt;li class="breadcrumb-item"&gt;&lt;a href="#"&gt;Library&lt;/a&gt;&lt;/li&gt;
1468
+ &lt;li class="breadcrumb-item active" aria-current="page"&gt;Data&lt;/li&gt;
1469
+ &lt;/ol&gt;
1470
+ &lt;/nav&gt;
1471
+
1472
+ &lt;!-- Breadcrumb danger --&gt;
1473
+ &lt;nav aria-label="breadcrumb"&gt;
1474
+ &lt;ol class="breadcrumb breadcrumb-danger"&gt;
1475
+ &lt;li class="breadcrumb-item"&gt;&lt;a href="#"&gt;Home&lt;/a&gt;&lt;/li&gt;
1476
+ &lt;li class="breadcrumb-item"&gt;&lt;a href="#"&gt;Library&lt;/a&gt;&lt;/li&gt;
1477
+ &lt;li class="breadcrumb-item active" aria-current="page"&gt;Data&lt;/li&gt;
1478
+ &lt;/ol&gt;
1479
+ &lt;/nav&gt;
1480
+
1481
+ &lt;!-- Breadcrumb warning --&gt;
1482
+ &lt;nav aria-label="breadcrumb"&gt;
1483
+ &lt;ol class="breadcrumb breadcrumb-warning"&gt;
1484
+ &lt;li class="breadcrumb-item"&gt;&lt;a href="#"&gt;Home&lt;/a&gt;&lt;/li&gt;
1485
+ &lt;li class="breadcrumb-item"&gt;&lt;a href="#"&gt;Library&lt;/a&gt;&lt;/li&gt;
1486
+ &lt;li class="breadcrumb-item active" aria-current="page"&gt;Data&lt;/li&gt;
1487
+ &lt;/ol&gt;
1488
+ &lt;/nav&gt;
1489
+
1490
+ &lt;!-- Breadcrumb info --&gt;
1491
+ &lt;nav aria-label="breadcrumb"&gt;
1492
+ &lt;ol class="breadcrumb breadcrumb-info"&gt;
1493
+ &lt;li class="breadcrumb-item"&gt;&lt;a href="#"&gt;Home&lt;/a&gt;&lt;/li&gt;
1494
+ &lt;li class="breadcrumb-item"&gt;&lt;a href="#"&gt;Library&lt;/a&gt;&lt;/li&gt;
1495
+ &lt;li class="breadcrumb-item active" aria-current="page"&gt;Data&lt;/li&gt;
1496
+ &lt;/ol&gt;
1497
+ &lt;/nav&gt;
1498
+
1499
+ &lt;!-- Breadcrumb light --&gt;
1500
+ &lt;nav aria-label="breadcrumb"&gt;
1501
+ &lt;ol class="breadcrumb breadcrumb-light"&gt;
1502
+ &lt;li class="breadcrumb-item"&gt;&lt;a href="#"&gt;Home&lt;/a&gt;&lt;/li&gt;
1503
+ &lt;li class="breadcrumb-item"&gt;&lt;a href="#"&gt;Library&lt;/a&gt;&lt;/li&gt;
1504
+ &lt;li class="breadcrumb-item active" aria-current="page"&gt;Data&lt;/li&gt;
1505
+ &lt;/ol&gt;
1506
+ &lt;/nav&gt;
1507
+
1508
+ &lt;!-- Breadcrumb dark --&gt;
1509
+ &lt;nav aria-label="breadcrumb"&gt;
1510
+ &lt;ol class="breadcrumb breadcrumb-dark"&gt;
1511
+ &lt;li class="breadcrumb-item"&gt;&lt;a href="#"&gt;Home&lt;/a&gt;&lt;/li&gt;
1512
+ &lt;li class="breadcrumb-item"&gt;&lt;a href="#"&gt;Library&lt;/a&gt;&lt;/li&gt;
1513
+ &lt;li class="breadcrumb-item active" aria-current="page"&gt;Data&lt;/li&gt;
1514
+ &lt;/ol&gt;
1515
+ &lt;/nav&gt;
1516
+ </code>
1517
+ </pre>
1518
+ </div>
1519
+ <div>
1520
+ <nav aria-label="breadcrumb">
1521
+ <ol class="breadcrumb breadcrumb-primary">
1522
+ <li class="breadcrumb-item"><a href="#">Home</a></li>
1523
+ <li class="breadcrumb-item"><a href="#">Library</a></li>
1524
+ <li class="breadcrumb-item active" aria-current="page">Data</li>
1525
+ </ol>
1526
+ </nav>
1527
+
1528
+ <nav aria-label="breadcrumb">
1529
+ <ol class="breadcrumb breadcrumb-secondary">
1530
+ <li class="breadcrumb-item"><a href="#">Home</a></li>
1531
+ <li class="breadcrumb-item"><a href="#">Library</a></li>
1532
+ <li class="breadcrumb-item active" aria-current="page">Data</li>
1533
+ </ol>
1534
+ </nav>
1535
+
1536
+ <nav aria-label="breadcrumb">
1537
+ <ol class="breadcrumb breadcrumb-success">
1538
+ <li class="breadcrumb-item"><a href="#">Home</a></li>
1539
+ <li class="breadcrumb-item"><a href="#">Library</a></li>
1540
+ <li class="breadcrumb-item active" aria-current="page">Data</li>
1541
+ </ol>
1542
+ </nav>
1543
+
1544
+ <nav aria-label="breadcrumb">
1545
+ <ol class="breadcrumb breadcrumb-danger">
1546
+ <li class="breadcrumb-item"><a href="#">Home</a></li>
1547
+ <li class="breadcrumb-item"><a href="#">Library</a></li>
1548
+ <li class="breadcrumb-item active" aria-current="page">Data</li>
1549
+ </ol>
1550
+ </nav>
1551
+
1552
+ <nav aria-label="breadcrumb">
1553
+ <ol class="breadcrumb breadcrumb-warning">
1554
+ <li class="breadcrumb-item"><a href="#">Home</a></li>
1555
+ <li class="breadcrumb-item"><a href="#">Library</a></li>
1556
+ <li class="breadcrumb-item active" aria-current="page">Data</li>
1557
+ </ol>
1558
+ </nav>
1559
+
1560
+ <nav aria-label="breadcrumb">
1561
+ <ol class="breadcrumb breadcrumb-info">
1562
+ <li class="breadcrumb-item"><a href="#">Home</a></li>
1563
+ <li class="breadcrumb-item"><a href="#">Library</a></li>
1564
+ <li class="breadcrumb-item active" aria-current="page">Data</li>
1565
+ </ol>
1566
+ </nav>
1567
+
1568
+ <nav aria-label="breadcrumb">
1569
+ <ol class="breadcrumb breadcrumb-light">
1570
+ <li class="breadcrumb-item"><a href="#">Home</a></li>
1571
+ <li class="breadcrumb-item"><a href="#">Library</a></li>
1572
+ <li class="breadcrumb-item active" aria-current="page">Data</li>
1573
+ </ol>
1574
+ </nav>
1575
+
1576
+ <nav aria-label="breadcrumb">
1577
+ <ol class="breadcrumb breadcrumb-dark">
1578
+ <li class="breadcrumb-item"><a href="#">Home</a></li>
1579
+ <li class="breadcrumb-item"><a href="#">Library</a></li>
1580
+ <li class="breadcrumb-item active" aria-current="page">Data</li>
1581
+ </ol>
1582
+ </nav>
1583
+
1584
+ </div>
1585
+ </div>
1586
+ </div>
1587
+ </div>
1588
+
1589
+ </div>
1590
+
1591
+ <!-- Footer -->
1592
+ <footer class="footer mt-auto">
1593
+ <div class="copyright bg-white">
1594
+ <p>
1595
+ &copy; <span id="copy-year"></span> Copyright Mono Dashboard Bootstrap Template by <a class="text-primary" href="http://www.iamabdus.com/" target="_blank" >Abdus</a>.
1596
+ </p>
1597
+ </div>
1598
+ <script>
1599
+ var d = new Date();
1600
+ var year = d.getFullYear();
1601
+ document.getElementById("copy-year").innerHTML = year;
1602
+ </script>
1603
+ </footer>
1604
+
1605
+ </div>
1606
+ </div>
1607
+
1608
+ <!-- Card Offcanvas -->
1609
+ <div class="card card-offcanvas" id="contact-off" >
1610
+ <div class="card-header">
1611
+ <h2>Contacts</h2>
1612
+ <a href="#" class="btn btn-primary btn-pill px-4">Add New</a>
1613
+ </div>
1614
+ <div class="card-body">
1615
+
1616
+ <div class="mb-4">
1617
+ <input type="text" class="form-control form-control-lg form-control-secondary rounded-0" placeholder="Search contacts...">
1618
+ </div>
1619
+
1620
+ <div class="media media-sm">
1621
+ <div class="media-sm-wrapper">
1622
+ <a href="user-profile.html">
1623
+ <img src="images/user/user-sm-01.jpg" alt="User Image">
1624
+ <span class="active bg-primary"></span>
1625
+ </a>
1626
+ </div>
1627
+ <div class="media-body">
1628
+ <a href="user-profile.html">
1629
+ <span class="title">Selena Wagner</span>
1630
+ <span class="discribe">Designer</span>
1631
+ </a>
1632
+ </div>
1633
+ </div>
1634
+
1635
+ <div class="media media-sm">
1636
+ <div class="media-sm-wrapper">
1637
+ <a href="user-profile.html">
1638
+ <img src="images/user/user-sm-02.jpg" alt="User Image">
1639
+ <span class="active bg-primary"></span>
1640
+ </a>
1641
+ </div>
1642
+ <div class="media-body">
1643
+ <a href="user-profile.html">
1644
+ <span class="title">Walter Reuter</span>
1645
+ <span>Developer</span>
1646
+ </a>
1647
+ </div>
1648
+ </div>
1649
+
1650
+ <div class="media media-sm">
1651
+ <div class="media-sm-wrapper">
1652
+ <a href="user-profile.html">
1653
+ <img src="images/user/user-sm-03.jpg" alt="User Image">
1654
+ </a>
1655
+ </div>
1656
+ <div class="media-body">
1657
+ <a href="user-profile.html">
1658
+ <span class="title">Larissa Gebhardt</span>
1659
+ <span>Cyber Punk</span>
1660
+ </a>
1661
+ </div>
1662
+ </div>
1663
+
1664
+ <div class="media media-sm">
1665
+ <div class="media-sm-wrapper">
1666
+ <a href="user-profile.html">
1667
+ <img src="images/user/user-sm-04.jpg" alt="User Image">
1668
+ </a>
1669
+
1670
+ </div>
1671
+ <div class="media-body">
1672
+ <a href="user-profile.html">
1673
+ <span class="title">Albrecht Straub</span>
1674
+ <span>Photographer</span>
1675
+ </a>
1676
+ </div>
1677
+ </div>
1678
+
1679
+ <div class="media media-sm">
1680
+ <div class="media-sm-wrapper">
1681
+ <a href="user-profile.html">
1682
+ <img src="images/user/user-sm-05.jpg" alt="User Image">
1683
+ <span class="active bg-danger"></span>
1684
+ </a>
1685
+ </div>
1686
+ <div class="media-body">
1687
+ <a href="user-profile.html">
1688
+ <span class="title">Leopold Ebert</span>
1689
+ <span>Fashion Designer</span>
1690
+ </a>
1691
+ </div>
1692
+ </div>
1693
+
1694
+ <div class="media media-sm">
1695
+ <div class="media-sm-wrapper">
1696
+ <a href="user-profile.html">
1697
+ <img src="images/user/user-sm-06.jpg" alt="User Image">
1698
+ <span class="active bg-primary"></span>
1699
+ </a>
1700
+ </div>
1701
+ <div class="media-body">
1702
+ <a href="user-profile.html">
1703
+ <span class="title">Selena Wagner</span>
1704
+ <span>Photographer</span>
1705
+ </a>
1706
+ </div>
1707
+ </div>
1708
+
1709
+ </div>
1710
+ </div>
1711
+
1712
+
1713
+
1714
+
1715
+ <script src="plugins/jquery/jquery.min.js"></script>
1716
+ <script src="plugins/bootstrap/js/bootstrap.bundle.min.js"></script>
1717
+ <script src="plugins/simplebar/simplebar.min.js"></script>
1718
+ <script src="https://unpkg.com/hotkeys-js/dist/hotkeys.min.js"></script>
1719
+
1720
+
1721
+
1722
+ <script src="plugins/prism/prism.js"></script>
1723
+
1724
+
1725
+ <script src="js/mono.js"></script>
1726
+ <script src="js/chart.js"></script>
1727
+ <script src="js/map.js"></script>
1728
+ <script src="js/custom.js"></script>
1729
+
1730
+
1731
+
1732
+
1733
+ <!-- -->
1734
+
1735
+
1736
+ </body>
1737
+ </html>
button-default.html ADDED
@@ -0,0 +1,2172 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+
3
+ <!--
4
+ // WEBSITE: https://themefisher.com
5
+ // TWITTER: https://twitter.com/themefisher
6
+ // FACEBOOK: https://www.facebook.com/themefisher
7
+ // GITHUB: https://github.com/themefisher/
8
+ -->
9
+
10
+ <html lang="en" dir="ltr">
11
+ <head>
12
+ <meta charset="utf-8" />
13
+ <meta http-equiv="X-UA-Compatible" content="IE=edge" />
14
+ <meta name="viewport" content="width=device-width, initial-scale=1" />
15
+
16
+ <title>Mono - Responsive Admin & Dashboard Template</title>
17
+
18
+ <!-- GOOGLE FONTS -->
19
+ <link href="https://fonts.googleapis.com/css?family=Karla:400,700|Roboto" rel="stylesheet">
20
+ <link href="plugins/material/css/materialdesignicons.min.css" rel="stylesheet" />
21
+ <link href="plugins/simplebar/simplebar.css" rel="stylesheet" />
22
+
23
+ <!-- PLUGINS CSS STYLE -->
24
+ <link href="plugins/nprogress/nprogress.css" rel="stylesheet" />
25
+
26
+
27
+ <link href="plugins/prism/prism.css" rel="stylesheet" />
28
+
29
+
30
+ <!-- MONO CSS -->
31
+ <link id="main-css-href" rel="stylesheet" href="css/style.css" />
32
+
33
+
34
+
35
+
36
+ <!-- FAVICON -->
37
+ <link href="images/favicon.png" rel="shortcut icon" />
38
+
39
+ <!--
40
+ HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries
41
+ -->
42
+ <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
43
+ <!--[if lt IE 9]>
44
+ <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
45
+ <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
46
+ <![endif]-->
47
+ <script src="plugins/nprogress/nprogress.js"></script>
48
+ </head>
49
+
50
+
51
+ <body class="navbar-fixed sidebar-fixed" id="body">
52
+ <script>
53
+ NProgress.configure({ showSpinner: false });
54
+ NProgress.start();
55
+ </script>
56
+
57
+
58
+
59
+ <!-- ====================================
60
+ ——— WRAPPER
61
+ ===================================== -->
62
+ <div class="wrapper">
63
+
64
+
65
+ <!-- ====================================
66
+ ——— LEFT SIDEBAR WITH OUT FOOTER
67
+ ===================================== -->
68
+ <aside class="left-sidebar sidebar-dark" id="left-sidebar">
69
+ <div id="sidebar" class="sidebar sidebar-with-footer">
70
+ <!-- Aplication Brand -->
71
+ <div class="app-brand">
72
+ <a href="/index.html">
73
+ <img src="images/logo.png" alt="Mono">
74
+ <span class="brand-name">MONO</span>
75
+ </a>
76
+ </div>
77
+ <!-- begin sidebar scrollbar -->
78
+ <div class="sidebar-left" data-simplebar style="height: 100%;">
79
+ <!-- sidebar menu -->
80
+ <ul class="nav sidebar-inner" id="sidebar-menu">
81
+
82
+
83
+
84
+ <li
85
+ >
86
+ <a class="sidenav-item-link" href="index.html">
87
+ <i class="mdi mdi-briefcase-account-outline"></i>
88
+ <span class="nav-text">Business Dashboard</span>
89
+ </a>
90
+ </li>
91
+
92
+
93
+
94
+
95
+
96
+ <li
97
+ >
98
+ <a class="sidenav-item-link" href="analytics.html">
99
+ <i class="mdi mdi-chart-line"></i>
100
+ <span class="nav-text">Analytics Dashboard</span>
101
+ </a>
102
+ </li>
103
+
104
+
105
+
106
+
107
+
108
+ <li class="section-title">
109
+ Apps
110
+ </li>
111
+
112
+
113
+
114
+
115
+
116
+ <li
117
+ >
118
+ <a class="sidenav-item-link" href="chat.html">
119
+ <i class="mdi mdi-wechat"></i>
120
+ <span class="nav-text">Chat</span>
121
+ </a>
122
+ </li>
123
+
124
+
125
+
126
+
127
+
128
+ <li
129
+ >
130
+ <a class="sidenav-item-link" href="contacts.html">
131
+ <i class="mdi mdi-phone"></i>
132
+ <span class="nav-text">Contacts</span>
133
+ </a>
134
+ </li>
135
+
136
+
137
+
138
+
139
+
140
+ <li
141
+ >
142
+ <a class="sidenav-item-link" href="team.html">
143
+ <i class="mdi mdi-account-group"></i>
144
+ <span class="nav-text">Team</span>
145
+ </a>
146
+ </li>
147
+
148
+
149
+
150
+
151
+
152
+ <li
153
+ >
154
+ <a class="sidenav-item-link" href="calendar.html">
155
+ <i class="mdi mdi-calendar-check"></i>
156
+ <span class="nav-text">Calendar</span>
157
+ </a>
158
+ </li>
159
+
160
+
161
+
162
+
163
+
164
+ <li class="has-sub" >
165
+ <a class="sidenav-item-link" href="javascript:void(0)" data-toggle="collapse" data-target="#email"
166
+ aria-expanded="false" aria-controls="email">
167
+ <i class="mdi mdi-email"></i>
168
+ <span class="nav-text">email</span> <b class="caret"></b>
169
+ </a>
170
+ <ul class="collapse" id="email"
171
+ data-parent="#sidebar-menu">
172
+ <div class="sub-menu">
173
+
174
+
175
+
176
+ <li >
177
+ <a class="sidenav-item-link" href="email-inbox.html">
178
+ <span class="nav-text">Email Inbox</span>
179
+
180
+ </a>
181
+ </li>
182
+
183
+
184
+
185
+
186
+
187
+
188
+ <li >
189
+ <a class="sidenav-item-link" href="email-details.html">
190
+ <span class="nav-text">Email Details</span>
191
+
192
+ </a>
193
+ </li>
194
+
195
+
196
+
197
+
198
+
199
+
200
+ <li >
201
+ <a class="sidenav-item-link" href="email-compose.html">
202
+ <span class="nav-text">Email Compose</span>
203
+
204
+ </a>
205
+ </li>
206
+
207
+
208
+
209
+
210
+ </div>
211
+ </ul>
212
+ </li>
213
+
214
+
215
+
216
+
217
+
218
+ <li class="section-title">
219
+ UI Elements
220
+ </li>
221
+
222
+
223
+
224
+
225
+
226
+ <li class="has-sub active expand" >
227
+ <a class="sidenav-item-link" href="javascript:void(0)" data-toggle="collapse" data-target="#ui-elements"
228
+ aria-expanded="false" aria-controls="ui-elements">
229
+ <i class="mdi mdi-folder-outline"></i>
230
+ <span class="nav-text">UI Components</span> <b class="caret"></b>
231
+ </a>
232
+ <ul class="collapse show" id="ui-elements"
233
+ data-parent="#sidebar-menu">
234
+ <div class="sub-menu">
235
+
236
+
237
+
238
+ <li >
239
+ <a class="sidenav-item-link" href="alert.html">
240
+ <span class="nav-text">Alert</span>
241
+
242
+ </a>
243
+ </li>
244
+
245
+
246
+
247
+
248
+
249
+
250
+ <li >
251
+ <a class="sidenav-item-link" href="badge.html">
252
+ <span class="nav-text">Badge</span>
253
+
254
+ </a>
255
+ </li>
256
+
257
+
258
+
259
+
260
+
261
+
262
+ <li >
263
+ <a class="sidenav-item-link" href="breadcrumb.html">
264
+ <span class="nav-text">Breadcrumb</span>
265
+
266
+ </a>
267
+ </li>
268
+
269
+
270
+
271
+
272
+
273
+ <li class="has-sub active expand" >
274
+ <a class="sidenav-item-link" href="javascript:void(0)" data-toggle="collapse" data-target="#buttons"
275
+ aria-expanded="false" aria-controls="buttons">
276
+ <span class="nav-text">Buttons</span> <b class="caret"></b>
277
+ </a>
278
+ <ul class="collapse show" id="buttons">
279
+ <div class="sub-menu">
280
+
281
+ <li class="active" >
282
+ <a href="button-default.html">Button Default</a>
283
+ </li>
284
+
285
+ <li >
286
+ <a href="button-dropdown.html">Button Dropdown</a>
287
+ </li>
288
+
289
+ <li >
290
+ <a href="button-group.html">Button Group</a>
291
+ </li>
292
+
293
+ <li >
294
+ <a href="button-social.html">Button Social</a>
295
+ </li>
296
+
297
+ <li >
298
+ <a href="button-loading.html">Button Loading</a>
299
+ </li>
300
+
301
+ </div>
302
+ </ul>
303
+ </li>
304
+
305
+
306
+
307
+
308
+
309
+ <li >
310
+ <a class="sidenav-item-link" href="card.html">
311
+ <span class="nav-text">Card</span>
312
+
313
+ </a>
314
+ </li>
315
+
316
+
317
+
318
+
319
+
320
+
321
+ <li >
322
+ <a class="sidenav-item-link" href="carousel.html">
323
+ <span class="nav-text">Carousel</span>
324
+
325
+ </a>
326
+ </li>
327
+
328
+
329
+
330
+
331
+
332
+
333
+ <li >
334
+ <a class="sidenav-item-link" href="collapse.html">
335
+ <span class="nav-text">Collapse</span>
336
+
337
+ </a>
338
+ </li>
339
+
340
+
341
+
342
+
343
+
344
+
345
+ <li >
346
+ <a class="sidenav-item-link" href="editor.html">
347
+ <span class="nav-text">Editor</span>
348
+
349
+ </a>
350
+ </li>
351
+
352
+
353
+
354
+
355
+
356
+
357
+ <li >
358
+ <a class="sidenav-item-link" href="list-group.html">
359
+ <span class="nav-text">List Group</span>
360
+
361
+ </a>
362
+ </li>
363
+
364
+
365
+
366
+
367
+
368
+
369
+ <li >
370
+ <a class="sidenav-item-link" href="modal.html">
371
+ <span class="nav-text">Modal</span>
372
+
373
+ </a>
374
+ </li>
375
+
376
+
377
+
378
+
379
+
380
+
381
+ <li >
382
+ <a class="sidenav-item-link" href="pagination.html">
383
+ <span class="nav-text">Pagination</span>
384
+
385
+ </a>
386
+ </li>
387
+
388
+
389
+
390
+
391
+
392
+
393
+ <li >
394
+ <a class="sidenav-item-link" href="popover-tooltip.html">
395
+ <span class="nav-text">Popover & Tooltip</span>
396
+
397
+ </a>
398
+ </li>
399
+
400
+
401
+
402
+
403
+
404
+
405
+ <li >
406
+ <a class="sidenav-item-link" href="progress-bar.html">
407
+ <span class="nav-text">Progress Bar</span>
408
+
409
+ </a>
410
+ </li>
411
+
412
+
413
+
414
+
415
+
416
+
417
+ <li >
418
+ <a class="sidenav-item-link" href="spinner.html">
419
+ <span class="nav-text">Spinner</span>
420
+
421
+ </a>
422
+ </li>
423
+
424
+
425
+
426
+
427
+
428
+
429
+ <li >
430
+ <a class="sidenav-item-link" href="switches.html">
431
+ <span class="nav-text">Switches</span>
432
+
433
+ </a>
434
+ </li>
435
+
436
+
437
+
438
+
439
+
440
+ <li class="has-sub" >
441
+ <a class="sidenav-item-link" href="javascript:void(0)" data-toggle="collapse" data-target="#tables"
442
+ aria-expanded="false" aria-controls="tables">
443
+ <span class="nav-text">Tables</span> <b class="caret"></b>
444
+ </a>
445
+ <ul class="collapse" id="tables">
446
+ <div class="sub-menu">
447
+
448
+ <li >
449
+ <a href="bootstarp-tables.html">Bootstrap Tables</a>
450
+ </li>
451
+
452
+ <li >
453
+ <a href="data-tables.html">Data Tables</a>
454
+ </li>
455
+
456
+ </div>
457
+ </ul>
458
+ </li>
459
+
460
+
461
+
462
+
463
+
464
+ <li >
465
+ <a class="sidenav-item-link" href="tab.html">
466
+ <span class="nav-text">Tab</span>
467
+
468
+ </a>
469
+ </li>
470
+
471
+
472
+
473
+
474
+
475
+
476
+ <li >
477
+ <a class="sidenav-item-link" href="toaster.html">
478
+ <span class="nav-text">Toaster</span>
479
+
480
+ </a>
481
+ </li>
482
+
483
+
484
+
485
+
486
+
487
+ <li class="has-sub" >
488
+ <a class="sidenav-item-link" href="javascript:void(0)" data-toggle="collapse" data-target="#icons"
489
+ aria-expanded="false" aria-controls="icons">
490
+ <span class="nav-text">Icons</span> <b class="caret"></b>
491
+ </a>
492
+ <ul class="collapse" id="icons">
493
+ <div class="sub-menu">
494
+
495
+ <li >
496
+ <a href="material-icons.html">Material Icon</a>
497
+ </li>
498
+
499
+ <li >
500
+ <a href="flag-icons.html">Flag Icon</a>
501
+ </li>
502
+
503
+ </div>
504
+ </ul>
505
+ </li>
506
+
507
+
508
+
509
+
510
+ <li class="has-sub" >
511
+ <a class="sidenav-item-link" href="javascript:void(0)" data-toggle="collapse" data-target="#forms"
512
+ aria-expanded="false" aria-controls="forms">
513
+ <span class="nav-text">Forms</span> <b class="caret"></b>
514
+ </a>
515
+ <ul class="collapse" id="forms">
516
+ <div class="sub-menu">
517
+
518
+ <li >
519
+ <a href="basic-input.html">Basic Input</a>
520
+ </li>
521
+
522
+ <li >
523
+ <a href="input-group.html">Input Group</a>
524
+ </li>
525
+
526
+ <li >
527
+ <a href="checkbox-radio.html">Checkbox & Radio</a>
528
+ </li>
529
+
530
+ <li >
531
+ <a href="form-validation.html">Form Validation</a>
532
+ </li>
533
+
534
+ <li >
535
+ <a href="form-advance.html">Form Advance</a>
536
+ </li>
537
+
538
+ </div>
539
+ </ul>
540
+ </li>
541
+
542
+
543
+
544
+
545
+ <li class="has-sub" >
546
+ <a class="sidenav-item-link" href="javascript:void(0)" data-toggle="collapse" data-target="#maps"
547
+ aria-expanded="false" aria-controls="maps">
548
+ <span class="nav-text">Maps</span> <b class="caret"></b>
549
+ </a>
550
+ <ul class="collapse" id="maps">
551
+ <div class="sub-menu">
552
+
553
+ <li >
554
+ <a href="google-maps.html">Google Map</a>
555
+ </li>
556
+
557
+ <li >
558
+ <a href="vector-maps.html">Vector Map</a>
559
+ </li>
560
+
561
+ </div>
562
+ </ul>
563
+ </li>
564
+
565
+
566
+
567
+
568
+ <li class="has-sub" >
569
+ <a class="sidenav-item-link" href="javascript:void(0)" data-toggle="collapse" data-target="#widgets"
570
+ aria-expanded="false" aria-controls="widgets">
571
+ <span class="nav-text">Widgets</span> <b class="caret"></b>
572
+ </a>
573
+ <ul class="collapse" id="widgets">
574
+ <div class="sub-menu">
575
+
576
+ <li >
577
+ <a href="widgets-general.html">General Widget</a>
578
+ </li>
579
+
580
+ <li >
581
+ <a href="widgets-chart.html">Chart Widget</a>
582
+ </li>
583
+
584
+ </div>
585
+ </ul>
586
+ </li>
587
+
588
+
589
+
590
+ </div>
591
+ </ul>
592
+ </li>
593
+
594
+
595
+
596
+
597
+
598
+ <li class="has-sub" >
599
+ <a class="sidenav-item-link" href="javascript:void(0)" data-toggle="collapse" data-target="#charts"
600
+ aria-expanded="false" aria-controls="charts">
601
+ <i class="mdi mdi-chart-pie"></i>
602
+ <span class="nav-text">Charts</span> <b class="caret"></b>
603
+ </a>
604
+ <ul class="collapse" id="charts"
605
+ data-parent="#sidebar-menu">
606
+ <div class="sub-menu">
607
+
608
+
609
+
610
+ <li >
611
+ <a class="sidenav-item-link" href="apex-charts.html">
612
+ <span class="nav-text">Apex Charts</span>
613
+
614
+ </a>
615
+ </li>
616
+
617
+
618
+
619
+
620
+ </div>
621
+ </ul>
622
+ </li>
623
+
624
+
625
+
626
+
627
+
628
+ <li class="section-title">
629
+ Pages
630
+ </li>
631
+
632
+
633
+
634
+
635
+
636
+ <li class="has-sub" >
637
+ <a class="sidenav-item-link" href="javascript:void(0)" data-toggle="collapse" data-target="#users"
638
+ aria-expanded="false" aria-controls="users">
639
+ <i class="mdi mdi-image-filter-none"></i>
640
+ <span class="nav-text">User</span> <b class="caret"></b>
641
+ </a>
642
+ <ul class="collapse" id="users"
643
+ data-parent="#sidebar-menu">
644
+ <div class="sub-menu">
645
+
646
+
647
+
648
+ <li >
649
+ <a class="sidenav-item-link" href="user-profile.html">
650
+ <span class="nav-text">User Profile</span>
651
+
652
+ </a>
653
+ </li>
654
+
655
+
656
+
657
+
658
+
659
+
660
+ <li >
661
+ <a class="sidenav-item-link" href="user-activities.html">
662
+ <span class="nav-text">User Activities</span>
663
+
664
+ </a>
665
+ </li>
666
+
667
+
668
+
669
+
670
+
671
+
672
+ <li >
673
+ <a class="sidenav-item-link" href="user-profile-settings.html">
674
+ <span class="nav-text">User Profile Settings</span>
675
+
676
+ </a>
677
+ </li>
678
+
679
+
680
+
681
+
682
+
683
+
684
+ <li >
685
+ <a class="sidenav-item-link" href="user-account-settings.html">
686
+ <span class="nav-text">User Account Settings</span>
687
+
688
+ </a>
689
+ </li>
690
+
691
+
692
+
693
+
694
+
695
+
696
+ <li >
697
+ <a class="sidenav-item-link" href="user-planing-settings.html">
698
+ <span class="nav-text">User Planing Settings</span>
699
+
700
+ </a>
701
+ </li>
702
+
703
+
704
+
705
+
706
+
707
+
708
+ <li >
709
+ <a class="sidenav-item-link" href="user-billing.html">
710
+ <span class="nav-text">User billing</span>
711
+
712
+ </a>
713
+ </li>
714
+
715
+
716
+
717
+
718
+
719
+
720
+ <li >
721
+ <a class="sidenav-item-link" href="user-notify-settings.html">
722
+ <span class="nav-text">User Notify Settings</span>
723
+
724
+ </a>
725
+ </li>
726
+
727
+
728
+
729
+
730
+ </div>
731
+ </ul>
732
+ </li>
733
+
734
+
735
+
736
+
737
+
738
+ <li class="has-sub" >
739
+ <a class="sidenav-item-link" href="javascript:void(0)" data-toggle="collapse" data-target="#authentication"
740
+ aria-expanded="false" aria-controls="authentication">
741
+ <i class="mdi mdi-account"></i>
742
+ <span class="nav-text">Authentication</span> <b class="caret"></b>
743
+ </a>
744
+ <ul class="collapse" id="authentication"
745
+ data-parent="#sidebar-menu">
746
+ <div class="sub-menu">
747
+
748
+
749
+
750
+ <li >
751
+ <a class="sidenav-item-link" href="sign-in.html">
752
+ <span class="nav-text">Sign In</span>
753
+
754
+ </a>
755
+ </li>
756
+
757
+
758
+
759
+
760
+
761
+
762
+ <li >
763
+ <a class="sidenav-item-link" href="sign-up.html">
764
+ <span class="nav-text">Sign Up</span>
765
+
766
+ </a>
767
+ </li>
768
+
769
+
770
+
771
+
772
+
773
+
774
+ <li >
775
+ <a class="sidenav-item-link" href="reset-password.html">
776
+ <span class="nav-text">Reset Password</span>
777
+
778
+ </a>
779
+ </li>
780
+
781
+
782
+
783
+
784
+ </div>
785
+ </ul>
786
+ </li>
787
+
788
+
789
+
790
+
791
+
792
+ <li class="has-sub" >
793
+ <a class="sidenav-item-link" href="javascript:void(0)" data-toggle="collapse" data-target="#other-page"
794
+ aria-expanded="false" aria-controls="other-page">
795
+ <i class="mdi mdi-file-multiple"></i>
796
+ <span class="nav-text">Other pages</span> <b class="caret"></b>
797
+ </a>
798
+ <ul class="collapse" id="other-page"
799
+ data-parent="#sidebar-menu">
800
+ <div class="sub-menu">
801
+
802
+
803
+
804
+ <li >
805
+ <a class="sidenav-item-link" href="invoice.html">
806
+ <span class="nav-text">Invoice</span>
807
+
808
+ </a>
809
+ </li>
810
+
811
+
812
+
813
+
814
+
815
+
816
+ <li >
817
+ <a class="sidenav-item-link" href="404.html">
818
+ <span class="nav-text">404 page</span>
819
+
820
+ </a>
821
+ </li>
822
+
823
+
824
+
825
+
826
+
827
+
828
+ <li >
829
+ <a class="sidenav-item-link" href="page-comingsoon.html">
830
+ <span class="nav-text">Coming Soon</span>
831
+
832
+ </a>
833
+ </li>
834
+
835
+
836
+
837
+
838
+
839
+
840
+ <li >
841
+ <a class="sidenav-item-link" href="page-maintenance.html">
842
+ <span class="nav-text">Maintenance</span>
843
+
844
+ </a>
845
+ </li>
846
+
847
+
848
+
849
+
850
+ </div>
851
+ </ul>
852
+ </li>
853
+
854
+
855
+
856
+
857
+
858
+ <li class="section-title">
859
+ Documentation
860
+ </li>
861
+
862
+
863
+
864
+
865
+
866
+ <li
867
+ >
868
+ <a class="sidenav-item-link" href="getting-started.html">
869
+ <i class="mdi mdi-airplane"></i>
870
+ <span class="nav-text">Getting Started</span>
871
+ </a>
872
+ </li>
873
+
874
+
875
+
876
+
877
+
878
+ <li class="has-sub" >
879
+ <a class="sidenav-item-link" href="javascript:void(0)" data-toggle="collapse" data-target="#customization"
880
+ aria-expanded="false" aria-controls="customization">
881
+ <i class="mdi mdi-square-edit-outline"></i>
882
+ <span class="nav-text">Customization</span> <b class="caret"></b>
883
+ </a>
884
+ <ul class="collapse" id="customization"
885
+ data-parent="#sidebar-menu">
886
+ <div class="sub-menu">
887
+
888
+
889
+
890
+ <li >
891
+ <a class="sidenav-item-link" href="navbar-customization.html">
892
+ <span class="nav-text">Navbar</span>
893
+
894
+ </a>
895
+ </li>
896
+
897
+
898
+
899
+
900
+
901
+
902
+ <li >
903
+ <a class="sidenav-item-link" href="sidebar-customization.html">
904
+ <span class="nav-text">Sidebar</span>
905
+
906
+ </a>
907
+ </li>
908
+
909
+
910
+
911
+
912
+
913
+
914
+ <li >
915
+ <a class="sidenav-item-link" href="styling.html">
916
+ <span class="nav-text">Styling</span>
917
+
918
+ </a>
919
+ </li>
920
+
921
+
922
+
923
+
924
+ </div>
925
+ </ul>
926
+ </li>
927
+
928
+
929
+
930
+ </ul>
931
+
932
+ </div>
933
+
934
+ <div class="sidebar-footer">
935
+ <div class="sidebar-footer-content">
936
+ <ul class="d-flex">
937
+ <li>
938
+ <a href="user-account-settings.html" data-toggle="tooltip" title="Profile settings"><i class="mdi mdi-settings"></i></a></li>
939
+ <li>
940
+ <a href="#" data-toggle="tooltip" title="No chat messages"><i class="mdi mdi-chat-processing"></i></a>
941
+ </li>
942
+ </ul>
943
+ </div>
944
+ </div>
945
+ </div>
946
+ </aside>
947
+
948
+
949
+
950
+ <!-- ====================================
951
+ ——— PAGE WRAPPER
952
+ ===================================== -->
953
+ <div class="page-wrapper">
954
+
955
+ <!-- Header -->
956
+ <header class="main-header" id="header">
957
+ <nav class="navbar navbar-expand-lg navbar-light" id="navbar">
958
+ <!-- Sidebar toggle button -->
959
+ <button id="sidebar-toggler" class="sidebar-toggle">
960
+ <span class="sr-only">Toggle navigation</span>
961
+ </button>
962
+
963
+ <span class="page-title">buttons default</span>
964
+
965
+ <div class="navbar-right ">
966
+
967
+ <!-- search form -->
968
+ <div class="search-form">
969
+ <form action="index.html" method="get">
970
+ <div class="input-group input-group-sm" id="input-group-search">
971
+ <input type="text" autocomplete="off" name="query" id="search-input" class="form-control" placeholder="Search..." />
972
+ <div class="input-group-append">
973
+ <button class="btn" type="button">/</button>
974
+ </div>
975
+ </div>
976
+ </form>
977
+ <ul class="dropdown-menu dropdown-menu-search">
978
+
979
+ <li class="nav-item">
980
+ <a class="nav-link" href="index.html">Morbi leo risus</a>
981
+ </li>
982
+ <li class="nav-item">
983
+ <a class="nav-link" href="index.html">Dapibus ac facilisis in</a>
984
+ </li>
985
+ <li class="nav-item">
986
+ <a class="nav-link" href="index.html">Porta ac consectetur ac</a>
987
+ </li>
988
+ <li class="nav-item">
989
+ <a class="nav-link" href="index.html">Vestibulum at eros</a>
990
+ </li>
991
+
992
+ </ul>
993
+
994
+ </div>
995
+
996
+ <ul class="nav navbar-nav">
997
+ <!-- Offcanvas -->
998
+ <li class="custom-dropdown">
999
+ <a class="offcanvas-toggler active custom-dropdown-toggler" data-offcanvas="contact-off" href="javascript:" >
1000
+ <i class="mdi mdi-contacts icon"></i>
1001
+ </a>
1002
+ </li>
1003
+ <li class="custom-dropdown">
1004
+ <button class="notify-toggler custom-dropdown-toggler">
1005
+ <i class="mdi mdi-bell-outline icon"></i>
1006
+ <span class="badge badge-xs rounded-circle">21</span>
1007
+ </button>
1008
+ <div class="dropdown-notify">
1009
+
1010
+ <header>
1011
+ <div class="nav nav-underline" id="nav-tab" role="tablist">
1012
+ <a class="nav-item nav-link active" id="all-tabs" data-toggle="tab" href="#all" role="tab" aria-controls="nav-home"
1013
+ aria-selected="true">All (5)</a>
1014
+ <a class="nav-item nav-link" id="message-tab" data-toggle="tab" href="#message" role="tab" aria-controls="nav-profile"
1015
+ aria-selected="false">Msgs (4)</a>
1016
+ <a class="nav-item nav-link" id="other-tab" data-toggle="tab" href="#other" role="tab" aria-controls="nav-contact"
1017
+ aria-selected="false">Others (3)</a>
1018
+ </div>
1019
+ </header>
1020
+
1021
+ <div class="" data-simplebar style="height: 325px;">
1022
+ <div class="tab-content" id="myTabContent">
1023
+
1024
+ <div class="tab-pane fade show active" id="all" role="tabpanel" aria-labelledby="all-tabs">
1025
+
1026
+ <div class="media media-sm bg-warning-10 p-4 mb-0">
1027
+ <div class="media-sm-wrapper">
1028
+ <a href="user-profile.html">
1029
+ <img src="images/user/user-sm-02.jpg" alt="User Image">
1030
+ </a>
1031
+ </div>
1032
+ <div class="media-body">
1033
+ <a href="user-profile.html">
1034
+ <span class="title mb-0">John Doe</span>
1035
+ <span class="discribe">Extremity sweetness difficult behaviour he of. On disposal of as landlord horrible. Afraid at highly months do things on at.</span>
1036
+ <span class="time">
1037
+ <time>Just now</time>...
1038
+ </span>
1039
+ </a>
1040
+ </div>
1041
+ </div>
1042
+
1043
+ <div class="media media-sm p-4 bg-light mb-0">
1044
+ <div class="media-sm-wrapper bg-primary">
1045
+ <a href="user-profile.html">
1046
+ <i class="mdi mdi-calendar-check-outline"></i>
1047
+ </a>
1048
+ </div>
1049
+ <div class="media-body">
1050
+ <a href="user-profile.html">
1051
+ <span class="title mb-0">New event added</span>
1052
+ <span class="discribe">1/3/2014 (1pm - 2pm)</span>
1053
+ <span class="time">
1054
+ <time>10 min ago...</time>...
1055
+ </span>
1056
+ </a>
1057
+ </div>
1058
+ </div>
1059
+
1060
+ <div class="media media-sm p-4 mb-0">
1061
+ <div class="media-sm-wrapper">
1062
+ <a href="user-profile.html">
1063
+ <img src="images/user/user-sm-03.jpg" alt="User Image">
1064
+ </a>
1065
+ </div>
1066
+ <div class="media-body">
1067
+ <a href="user-profile.html">
1068
+ <span class="title mb-0">Sagge Hudson</span>
1069
+ <span class="discribe">On disposal of as landlord Afraid at highly months do things on at.</span>
1070
+ <span class="time">
1071
+ <time>1 hrs ago</time>...
1072
+ </span>
1073
+ </a>
1074
+ </div>
1075
+ </div>
1076
+
1077
+ <div class="media media-sm p-4 mb-0">
1078
+ <div class="media-sm-wrapper bg-info-dark">
1079
+ <a href="user-profile.html">
1080
+ <i class="mdi mdi-account-multiple-check"></i>
1081
+ </a>
1082
+ </div>
1083
+ <div class="media-body">
1084
+ <a href="user-profile.html">
1085
+ <span class="title mb-0">Add request</span>
1086
+ <span class="discribe">Add Dany Jones as your contact.</span>
1087
+ <div class="buttons">
1088
+ <a href="#" class="btn btn-sm btn-success shadow-none text-white">accept</a>
1089
+ <a href="#" class="btn btn-sm shadow-none">delete</a>
1090
+ </div>
1091
+ <span class="time">
1092
+ <time>6 hrs ago</time>...
1093
+ </span>
1094
+ </a>
1095
+ </div>
1096
+ </div>
1097
+
1098
+ <div class="media media-sm p-4 mb-0">
1099
+ <div class="media-sm-wrapper bg-info">
1100
+ <a href="user-profile.html">
1101
+ <i class="mdi mdi-playlist-check"></i>
1102
+ </a>
1103
+ </div>
1104
+ <div class="media-body">
1105
+ <a href="user-profile.html">
1106
+ <span class="title mb-0">Task complete</span>
1107
+ <span class="discribe">Afraid at highly months do things on at.</span>
1108
+ <span class="time">
1109
+ <time>1 hrs ago</time>...
1110
+ </span>
1111
+ </a>
1112
+ </div>
1113
+ </div>
1114
+
1115
+ </div>
1116
+
1117
+ <div class="tab-pane fade" id="message" role="tabpanel" aria-labelledby="message-tab">
1118
+
1119
+ <div class="media media-sm p-4 mb-0">
1120
+ <div class="media-sm-wrapper">
1121
+ <a href="user-profile.html">
1122
+ <img src="images/user/user-sm-01.jpg" alt="User Image">
1123
+ </a>
1124
+ </div>
1125
+ <div class="media-body">
1126
+ <a href="user-profile.html">
1127
+ <span class="title mb-0">Selena Wagner</span>
1128
+ <span class="discribe">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</span>
1129
+ <span class="time">
1130
+ <time>15 min ago</time>...
1131
+ </span>
1132
+ </a>
1133
+ </div>
1134
+ </div>
1135
+
1136
+ <div class="media media-sm p-4 mb-0">
1137
+ <div class="media-sm-wrapper">
1138
+ <a href="user-profile.html">
1139
+ <img src="images/user/user-sm-03.jpg" alt="User Image">
1140
+ </a>
1141
+ </div>
1142
+ <div class="media-body">
1143
+ <a href="user-profile.html">
1144
+ <span class="title mb-0">Sagge Hudson</span>
1145
+ <span class="discribe">On disposal of as landlord Afraid at highly months do things on at.</span>
1146
+ <span class="time">
1147
+ <time>1 hrs ago</time>...
1148
+ </span>
1149
+ </a>
1150
+ </div>
1151
+ </div>
1152
+
1153
+ <div class="media media-sm bg-warning-10 p-4 mb-0">
1154
+ <div class="media-sm-wrapper">
1155
+ <a href="user-profile.html">
1156
+ <img src="images/user/user-sm-02.jpg" alt="User Image">
1157
+ </a>
1158
+ </div>
1159
+ <div class="media-body">
1160
+ <a href="user-profile.html">
1161
+ <span class="title mb-0">John Doe</span>
1162
+ <span class="discribe">Extremity sweetness difficult behaviour he of. On disposal of as landlord horrible. Afraid
1163
+ at highly months do things on at.</span>
1164
+ <span class="time">
1165
+ <time>Just now</time>...
1166
+ </span>
1167
+ </a>
1168
+ </div>
1169
+ </div>
1170
+
1171
+ <div class="media media-sm p-4 mb-0">
1172
+ <div class="media-sm-wrapper">
1173
+ <a href="user-profile.html">
1174
+ <img src="images/user/user-sm-04.jpg" alt="User Image">
1175
+ </a>
1176
+ </div>
1177
+ <div class="media-body">
1178
+ <a href="user-profile.html">
1179
+ <span class="title mb-0">Albrecht Straub</span>
1180
+ <span class="discribe"> Beatae quia natus assumenda laboriosam, nisi perferendis aliquid consectetur expedita non tenetur.</span>
1181
+ <span class="time">
1182
+ <time>Just now</time>...
1183
+ </span>
1184
+ </a>
1185
+ </div>
1186
+ </div>
1187
+
1188
+ </div>
1189
+ <div class="tab-pane fade" id="other" role="tabpanel" aria-labelledby="contact-tab">
1190
+
1191
+ <div class="media media-sm p-4 bg-light mb-0">
1192
+ <div class="media-sm-wrapper bg-primary">
1193
+ <a href="user-profile.html">
1194
+ <i class="mdi mdi-calendar-check-outline"></i>
1195
+ </a>
1196
+ </div>
1197
+ <div class="media-body">
1198
+ <a href="user-profile.html">
1199
+ <span class="title mb-0">New event added</span>
1200
+ <span class="discribe">1/3/2014 (1pm - 2pm)</span>
1201
+ <span class="time">
1202
+ <time>10 min ago...</time>...
1203
+ </span>
1204
+ </a>
1205
+ </div>
1206
+ </div>
1207
+
1208
+ <div class="media media-sm p-4 mb-0">
1209
+ <div class="media-sm-wrapper bg-info-dark">
1210
+ <a href="user-profile.html">
1211
+ <i class="mdi mdi-account-multiple-check"></i>
1212
+ </a>
1213
+ </div>
1214
+ <div class="media-body">
1215
+ <a href="user-profile.html">
1216
+ <span class="title mb-0">Add request</span>
1217
+ <span class="discribe">Add Dany Jones as your contact.</span>
1218
+ <div class="buttons">
1219
+ <a href="#" class="btn btn-sm btn-success shadow-none text-white">accept</a>
1220
+ <a href="#" class="btn btn-sm shadow-none">delete</a>
1221
+ </div>
1222
+ <span class="time">
1223
+ <time>6 hrs ago</time>...
1224
+ </span>
1225
+ </a>
1226
+ </div>
1227
+ </div>
1228
+
1229
+ <div class="media media-sm p-4 mb-0">
1230
+ <div class="media-sm-wrapper bg-info">
1231
+ <a href="user-profile.html">
1232
+ <i class="mdi mdi-playlist-check"></i>
1233
+ </a>
1234
+ </div>
1235
+ <div class="media-body">
1236
+ <a href="user-profile.html">
1237
+ <span class="title mb-0">Task complete</span>
1238
+ <span class="discribe">Afraid at highly months do things on at.</span>
1239
+ <span class="time">
1240
+ <time>1 hrs ago</time>...
1241
+ </span>
1242
+ </a>
1243
+ </div>
1244
+ </div>
1245
+
1246
+ </div>
1247
+ </div>
1248
+ </div>
1249
+
1250
+ <footer class="border-top dropdown-notify-footer">
1251
+ <div class="d-flex justify-content-between align-items-center py-2 px-4">
1252
+ <span>Last updated 3 min ago</span>
1253
+ <a id="refress-button" href="javascript:" class="btn mdi mdi-cached btn-refress"></a>
1254
+ </div>
1255
+ </footer>
1256
+ </div>
1257
+ </li>
1258
+ <!-- User Account -->
1259
+ <li class="dropdown user-menu">
1260
+ <button class="dropdown-toggle nav-link" data-toggle="dropdown">
1261
+ <img src="images/user/user-xs-01.jpg" class="user-image rounded-circle" alt="User Image" />
1262
+ <span class="d-none d-lg-inline-block">John Doe</span>
1263
+ </button>
1264
+ <ul class="dropdown-menu dropdown-menu-right">
1265
+ <li>
1266
+ <a class="dropdown-link-item" href="user-profile.html">
1267
+ <i class="mdi mdi-account-outline"></i>
1268
+ <span class="nav-text">My Profile</span>
1269
+ </a>
1270
+ </li>
1271
+ <li>
1272
+ <a class="dropdown-link-item" href="email-inbox.html">
1273
+ <i class="mdi mdi-email-outline"></i>
1274
+ <span class="nav-text">Message</span>
1275
+ <span class="badge badge-pill badge-primary">24</span>
1276
+ </a>
1277
+ </li>
1278
+ <li>
1279
+ <a class="dropdown-link-item" href="user-activities.html">
1280
+ <i class="mdi mdi-diamond-stone"></i>
1281
+ <span class="nav-text">Activitise</span></a>
1282
+ </li>
1283
+ <li>
1284
+ <a class="dropdown-link-item" href="user-account-settings.html">
1285
+ <i class="mdi mdi-settings"></i>
1286
+ <span class="nav-text">Account Setting</span>
1287
+ </a>
1288
+ </li>
1289
+
1290
+ <li class="dropdown-footer">
1291
+ <a class="dropdown-link-item" href="sign-in.html"> <i class="mdi mdi-logout"></i> Log Out </a>
1292
+ </li>
1293
+ </ul>
1294
+ </li>
1295
+ </ul>
1296
+ </div>
1297
+ </nav>
1298
+
1299
+
1300
+ </header>
1301
+
1302
+ <!-- ====================================
1303
+ ——— CONTENT WRAPPER
1304
+ ===================================== -->
1305
+ <div class="content-wrapper">
1306
+ <div class="content"><!-- For Components documentaion -->
1307
+ <div class="card card-default">
1308
+ <div class="px-6 py-4">
1309
+ <p>Mono provides a variety of <span class="text-secondary text-capitalize"> Bootstrap Buttons </span> components with a
1310
+ little customization that suits its design standards. For more information, please see the official <a class="font-weight-bold" href="https://getbootstrap.com/docs/4.3/components/buttons/" target="_blank"> Bootstrap documentation.</a></p>
1311
+ </div>
1312
+ </div>
1313
+
1314
+ <div class="row">
1315
+
1316
+ <div class="col-xl-6">
1317
+ <!-- Default Button -->
1318
+ <div class="card card-default">
1319
+ <div class="card-header">
1320
+ <h2>Default Buttons</h2>
1321
+
1322
+ <a class="btn mdi mdi-code-tags" data-toggle="collapse" href="#collapse-buttons-1" role="button"
1323
+ aria-expanded="false" aria-controls="collapse-buttons-1"> </a>
1324
+
1325
+
1326
+ </div>
1327
+ <div class="card-body">
1328
+ <div class="collapse" id="collapse-buttons-1">
1329
+ <pre class="language-html mb-4">
1330
+ <code >
1331
+ &lt;button type="button" class="btn btn-primary"&gt;Primary&lt;/button&gt;
1332
+
1333
+ &lt;button type="button" class="btn btn-secondary"&gt;Secondary&lt;/button&gt;
1334
+
1335
+ &lt;button type="button" class="btn btn-success"&gt;Success&lt;/button&gt;
1336
+
1337
+ &lt;button type="button" class="btn btn-danger"&gt;Danger&lt;/button&gt;
1338
+
1339
+ &lt;button type="button" class="btn btn-warning"&gt;Warning&lt;/button&gt;
1340
+
1341
+ &lt;button type="button" class="btn btn-info"&gt;Info&lt;/button&gt;
1342
+ </code>
1343
+ </pre>
1344
+ </div>
1345
+ <div>
1346
+ <button type="button" class="mb-1 btn btn-primary">Primary</button>
1347
+ <button type="button" class="mb-1 btn btn-secondary">Secondary</button>
1348
+ <button type="button" class="mb-1 btn btn-success">Success</button>
1349
+ <button type="button" class="mb-1 btn btn-danger">Danger</button>
1350
+ <button type="button" class="mb-1 btn btn-warning">Warning</button>
1351
+ <button type="button" class="mb-1 btn btn-info">Info</button>
1352
+ </div>
1353
+ </div>
1354
+ </div>
1355
+
1356
+ <!-- Square Button -->
1357
+ <div class="card card-default">
1358
+ <div class="card-header">
1359
+ <h2>Square Buttons</h2>
1360
+
1361
+ <a class="btn mdi mdi-code-tags" data-toggle="collapse" href="#collapse-buttons-3" role="button"
1362
+ aria-expanded="false" aria-controls="collapse-buttons-3"> </a>
1363
+
1364
+
1365
+ </div>
1366
+ <div class="card-body">
1367
+ <div class="collapse" id="collapse-buttons-3">
1368
+ <pre class="language-html mb-4">
1369
+ <code >
1370
+ &lt;button type="button" class="btn btn-square btn-primary"&gt;Primary&lt;/button&gt;
1371
+
1372
+ &lt;button type="button" class="btn btn-square btn-secondary"&gt;Secondary&lt;/button&gt;
1373
+
1374
+ &lt;button type="button" class="btn btn-square btn-success"&gt;Success&lt;/button&gt;
1375
+
1376
+ &lt;button type="button" class="btn btn-square btn-danger"&gt;Danger&lt;/button&gt;
1377
+
1378
+ &lt;button type="button" class="btn btn-square btn-warning"&gt;Warning&lt;/button&gt;
1379
+
1380
+ &lt;button type="button" class="btn btn-square btn-info"&gt;Info&lt;/button&gt;
1381
+ </code>
1382
+ </pre>
1383
+ </div>
1384
+ <div>
1385
+ <button type="button" class="mb-1 btn btn-square btn-primary">Primary</button>
1386
+ <button type="button" class="mb-1 btn btn-square btn-secondary">Secondary</button>
1387
+ <button type="button" class="mb-1 btn btn-square btn-success">Success</button>
1388
+ <button type="button" class="mb-1 btn btn-square btn-danger">Danger</button>
1389
+ <button type="button" class="mb-1 btn btn-square btn-warning">Warning</button>
1390
+ <button type="button" class="mb-1 btn btn-square btn-info">Info</button>
1391
+ </div>
1392
+ </div>
1393
+ </div>
1394
+
1395
+ <!-- Pill Buttons -->
1396
+ <div class="card card-default">
1397
+ <div class="card-header">
1398
+ <h2>Pill Buttons</h2>
1399
+
1400
+ <a class="btn mdi mdi-code-tags" data-toggle="collapse" href="#collapse-buttons-5" role="button"
1401
+ aria-expanded="false" aria-controls="collapse-buttons-5"> </a>
1402
+
1403
+
1404
+ </div>
1405
+ <div class="card-body">
1406
+ <div class="collapse" id="collapse-buttons-5">
1407
+ <pre class="language-html mb-4">
1408
+ <code >
1409
+ &lt;button type="button" class="mb-1 btn btn-pill btn-primary"&gt;Primary&lt;/button&gt;
1410
+
1411
+ &lt;button type="button" class="mb-1 btn btn-pill btn-secondary"&gt;Secondary&lt;/button&gt;
1412
+
1413
+ &lt;button type="button" class="mb-1 btn btn-pill btn-success"&gt;Success&lt;/button&gt;
1414
+
1415
+ &lt;button type="button" class="mb-1 btn btn-pill btn-danger"&gt;Danger&lt;/button&gt;
1416
+
1417
+ &lt;button type="button" class="mb-1 btn btn-pill btn-warning"&gt;Warning&lt;/button&gt;
1418
+
1419
+ &lt;button type="button" class="mb-1 btn btn-pill btn-info"&gt;Info&lt;/button&gt;
1420
+ </code>
1421
+ </pre>
1422
+ </div>
1423
+ <div>
1424
+ <button type="button" class="mb-1 btn btn-pill btn-primary">Primary</button>
1425
+ <button type="button" class="mb-1 btn btn-pill btn-secondary">Secondary</button>
1426
+ <button type="button" class="mb-1 btn btn-pill btn-success">Success</button>
1427
+ <button type="button" class="mb-1 btn btn-pill btn-danger">Danger</button>
1428
+ <button type="button" class="mb-1 btn btn-pill btn-warning">Warning</button>
1429
+ <button type="button" class="mb-1 btn btn-pill btn-info">Info</button>
1430
+ </div>
1431
+ </div>
1432
+ </div>
1433
+
1434
+ <!-- Buttons with Icon -->
1435
+ <div class="card card-default">
1436
+ <div class="card-header">
1437
+ <h2>Buttons with Icon</h2>
1438
+
1439
+ <a class="btn mdi mdi-code-tags" data-toggle="collapse" href="#collapse-buttons-7" role="button"
1440
+ aria-expanded="false" aria-controls="collapse-buttons-7"> </a>
1441
+
1442
+
1443
+ </div>
1444
+ <div class="card-body">
1445
+ <div class="collapse" id="collapse-buttons-7">
1446
+ <pre class="language-html mb-4">
1447
+ <code >
1448
+ &lt;button type="button" class="mb-1 btn btn-primary"&gt;
1449
+ &lt;i class=" mdi mdi-star-outline mr-1"&gt;&lt;/i&gt;
1450
+ Primary
1451
+ &lt;/button&gt;
1452
+
1453
+
1454
+ &lt;button type="button" class="mb-1 btn btn-secondary"&gt;
1455
+ &lt;i class=" mdi mdi-diamond-outline mr-1"&gt;&lt;/i&gt;
1456
+ Secondary
1457
+ &lt;/button&gt;
1458
+
1459
+
1460
+ &lt;button type="button" class="mb-1 btn btn-success"&gt;
1461
+ &lt;i class=" mdi mdi-checkbox-marked-outline mr-1"&gt;&lt;/i&gt;
1462
+ Success
1463
+ &lt;/button&gt;
1464
+
1465
+
1466
+ &lt;button type="button" class="mb-1 btn btn-info"&gt;
1467
+ &lt;i class=" mdi mdi-information-outline mr-1"&gt;&lt;/i&gt;
1468
+ Info
1469
+ &lt;/button&gt;
1470
+
1471
+
1472
+ &lt;button type="button" class="mb-1 btn btn-warning"&gt;
1473
+ &lt;i class=" mdi mdi-alert-outline mr-1"&gt;&lt;/i&gt;
1474
+ Warning
1475
+ &lt;/button&gt;
1476
+
1477
+
1478
+ &lt;button type="button" class="mb-1 btn btn-danger"&gt;
1479
+ &lt;i class=" mdi mdi-close-circle-outline mr-1"&gt;&lt;/i&gt;
1480
+ Danger
1481
+ &lt;/button&gt;
1482
+ </code>
1483
+ </pre>
1484
+ </div>
1485
+ <div>
1486
+ <button type="button" class="mb-1 btn btn-primary">
1487
+ <i class=" mdi mdi-star-outline mr-1"></i>
1488
+ Primary
1489
+ </button>
1490
+ <button type="button" class="mb-1 btn btn-secondary">
1491
+ <i class=" mdi mdi-diamond-outline mr-1"></i>
1492
+ Secondary
1493
+ </button>
1494
+ <button type="button" class="mb-1 btn btn-success">
1495
+ <i class=" mdi mdi-checkbox-marked-outline mr-1"></i>
1496
+ Success
1497
+ </button>
1498
+ <button type="button" class="mb-1 btn btn-info">
1499
+ <i class=" mdi mdi-information-outline mr-1"></i>
1500
+ Info
1501
+ </button>
1502
+ <button type="button" class="mb-1 btn btn-warning">
1503
+ <i class=" mdi mdi-alert-outline mr-1"></i>
1504
+ Warning
1505
+ </button>
1506
+ <button type="button" class="mb-1 btn btn-danger">
1507
+ <i class=" mdi mdi-close-circle-outline mr-1"></i>
1508
+ Danger
1509
+ </button>
1510
+ </div>
1511
+ </div>
1512
+ </div>
1513
+
1514
+ <!-- Small Buttons -->
1515
+ <div class="card card-default">
1516
+ <div class="card-header">
1517
+ <h2>Small Buttons</h2>
1518
+
1519
+ <a class="btn mdi mdi-code-tags" data-toggle="collapse" href="#collapse-buttons-9" role="button"
1520
+ aria-expanded="false" aria-controls="collapse-buttons-9"> </a>
1521
+
1522
+
1523
+ </div>
1524
+ <div class="card-body">
1525
+ <div class="collapse" id="collapse-buttons-9">
1526
+ <pre class="language-html mb-4">
1527
+ <code >
1528
+ &lt;button type="button" class="btn btn-sm btn-primary"&gt;Primary&lt;/button&gt;
1529
+
1530
+ &lt;button type="button" class="btn btn-sm btn-secondary"&gt;Secondary&lt;/button&gt;
1531
+
1532
+ &lt;button type="button" class="btn btn-sm btn-success"&gt;Success&lt;/button&gt;
1533
+
1534
+ &lt;button type="button" class="btn btn-sm btn-danger"&gt;Danger&lt;/button&gt;
1535
+
1536
+ &lt;button type="button" class="btn btn-sm btn-warning"&gt;Warning&lt;/button&gt;
1537
+
1538
+ &lt;button type="button" class="btn btn-sm btn-info"&gt;Info&lt;/button&gt;
1539
+ </code>
1540
+ </pre>
1541
+ </div>
1542
+ <div>
1543
+ <button type="button" class="mb-1 btn btn-sm btn-primary">Primary</button>
1544
+ <button type="button" class="mb-1 btn btn-sm btn-secondary">Secondary</button>
1545
+ <button type="button" class="mb-1 btn btn-sm btn-success">Success</button>
1546
+ <button type="button" class="mb-1 btn btn-sm btn-danger">Danger</button>
1547
+ <button type="button" class="mb-1 btn btn-sm btn-warning">Warning</button>
1548
+ <button type="button" class="mb-1 btn btn-sm btn-info">Info</button>
1549
+ </div>
1550
+ </div>
1551
+ </div>
1552
+
1553
+ <!-- Large Buttons -->
1554
+ <div class="card card-default">
1555
+ <div class="card-header">
1556
+ <h2>Large Buttons</h2>
1557
+
1558
+ <a class="btn mdi mdi-code-tags" data-toggle="collapse" href="#collapse-buttons-11" role="button"
1559
+ aria-expanded="false" aria-controls="collapse-buttons-11"> </a>
1560
+
1561
+
1562
+ </div>
1563
+ <div class="card-body">
1564
+ <div class="collapse" id="collapse-buttons-11">
1565
+ <pre class="language-html mb-4">
1566
+ <code >
1567
+ &lt;button type="button" class="btn btn-lg btn-primary"&gt;Primary&lt;/button&gt;
1568
+
1569
+ &lt;button type="button" class="btn btn-lg btn-secondary"&gt;Secondary&lt;/button&gt;
1570
+
1571
+ &lt;button type="button" class="btn btn-lg btn-success"&gt;Success&lt;/button&gt;
1572
+
1573
+ &lt;button type="button" class="btn btn-lg btn-danger"&gt;Danger&lt;/button&gt;
1574
+
1575
+ &lt;button type="button" class="btn btn-lg btn-warning"&gt;Warning&lt;/button&gt;
1576
+
1577
+ &lt;button type="button" class="btn btn-lg btn-info"&gt;Info&lt;/button&gt;
1578
+ </code>
1579
+ </pre>
1580
+ </div>
1581
+ <div>
1582
+ <button type="button" class="mb-1 btn btn-lg btn-primary">Primary</button>
1583
+ <button type="button" class="mb-1 btn btn-lg btn-secondary">Secondary</button>
1584
+ <button type="button" class="mb-1 btn btn-lg btn-success">Success</button>
1585
+ <button type="button" class="mb-1 btn btn-lg btn-danger">Danger</button>
1586
+ <button type="button" class="mb-1 btn btn-lg btn-warning">Warning</button>
1587
+ <button type="button" class="mb-1 btn btn-lg btn-info">Info</button>
1588
+ </div>
1589
+ </div>
1590
+ </div>
1591
+
1592
+ <!-- Disabled Buttons -->
1593
+ <div class="card card-default">
1594
+ <div class="card-header">
1595
+ <h2>Disabled Buttons</h2>
1596
+
1597
+ <a class="btn mdi mdi-code-tags" data-toggle="collapse" href="#collapse-buttons-13" role="button"
1598
+ aria-expanded="false" aria-controls="collapse-buttons-13"> </a>
1599
+
1600
+
1601
+ </div>
1602
+ <div class="card-body">
1603
+ <div class="collapse" id="collapse-buttons-13">
1604
+ <pre class="language-html mb-4">
1605
+ <code >
1606
+ &lt;button type="button" class="btn btn-primary" disabled&gt;Primary&lt;/button&gt;
1607
+
1608
+ &lt;button type="button" class="btn btn-secondary" disabled&gt;Secondary&lt;/button&gt;
1609
+
1610
+ &lt;button type="button" class="btn btn-success" disabled&gt;Success&lt;/button&gt;
1611
+
1612
+ &lt;button type="button" class="btn btn-danger" disabled&gt;Danger&lt;/button&gt;
1613
+
1614
+ &lt;button type="button" class="btn btn-warning" disabled&gt;Warning&lt;/button&gt;
1615
+
1616
+ &lt;button type="button" class="btn btn-info" disabled&gt;Info&lt;/button&gt;
1617
+ </code>
1618
+ </pre>
1619
+ </div>
1620
+ <div>
1621
+ <button type="button" class="mb-1 btn btn-primary" disabled>Primary</button>
1622
+ <button type="button" class="mb-1 btn btn-secondary" disabled>Secondary</button>
1623
+ <button type="button" class="mb-1 btn btn-success" disabled>Success</button>
1624
+ <button type="button" class="mb-1 btn btn-danger" disabled>Danger</button>
1625
+ <button type="button" class="mb-1 btn btn-warning" disabled>Warning</button>
1626
+ <button type="button" class="mb-1 btn btn-info" disabled>Info</button>
1627
+ </div>
1628
+ </div>
1629
+ </div>
1630
+
1631
+ <!-- Block buttons -->
1632
+ <div class="card card-default">
1633
+ <div class="card-header">
1634
+ <h2>Block Buttons</h2>
1635
+
1636
+ <a class="btn mdi mdi-code-tags" data-toggle="collapse" href="#collapse-buttons-15" role="button"
1637
+ aria-expanded="false" aria-controls="collapse-buttons-15"> </a>
1638
+
1639
+
1640
+ </div>
1641
+ <div class="card-body">
1642
+ <div class="collapse" id="collapse-buttons-15">
1643
+ <pre class="language-html mb-4">
1644
+ <code >
1645
+ &lt;button type="button" class="btn btn-block btn-primary"&gt;Primary&lt;/button&gt;
1646
+
1647
+ &lt;button type="button" class="btn btn-block btn-secondary"&gt;Secondary&lt;/button&gt;
1648
+
1649
+ &lt;button type="button" class="btn btn-block btn-success"&gt;Success&lt;/button&gt;
1650
+
1651
+ &lt;button type="button" class="btn btn-block btn-danger"&gt;Danger&lt;/button&gt;
1652
+
1653
+ &lt;button type="button" class="btn btn-block btn-warning"&gt;Warning&lt;/button&gt;
1654
+
1655
+ &lt;button type="button" class="btn btn-block btn-info"&gt;Info&lt;/button&gt;
1656
+ </code>
1657
+ </pre>
1658
+ </div>
1659
+ <div>
1660
+ <button type="button" class="mb-1 btn btn-block btn-primary">Primary</button>
1661
+ <button type="button" class="mb-1 btn btn-block btn-secondary">Secondary</button>
1662
+ <button type="button" class="mb-1 btn btn-block btn-success">Success</button>
1663
+ <button type="button" class="mb-1 btn btn-block btn-danger">Danger</button>
1664
+ <button type="button" class="mb-1 btn btn-block btn-warning">Warning</button>
1665
+ <button type="button" class="mb-1 btn btn-block btn-info">Info</button>
1666
+ </div>
1667
+ </div>
1668
+ </div>
1669
+ </div>
1670
+
1671
+
1672
+ <div class="col-xl-6">
1673
+ <!-- Outline Default Buttons -->
1674
+ <div class="card card-default">
1675
+ <div class="card-header">
1676
+ <h2>Outline Default Buttons</h2>
1677
+
1678
+ <a class="btn mdi mdi-code-tags" data-toggle="collapse" href="#collapse-buttons-2" role="button"
1679
+ aria-expanded="false" aria-controls="collapse-buttons-2"> </a>
1680
+
1681
+
1682
+ </div>
1683
+ <div class="card-body">
1684
+ <div class="collapse" id="collapse-buttons-2">
1685
+ <pre class="language-html mb-4">
1686
+ <code >
1687
+ &lt;button type="button" class="btn btn-outline-primary"&gt;Primary&lt;/button&gt;
1688
+
1689
+ &lt;button type="button" class="btn btn-outline-secondary"&gt;Secondary&lt;/button&gt;
1690
+
1691
+ &lt;button type="button" class="btn btn-outline-success"&gt;Success&lt;/button&gt;
1692
+
1693
+ &lt;button type="button" class="btn btn-outline-info"&gt;Info&lt;/button&gt;
1694
+
1695
+ &lt;button type="button" class="btn btn-outline-warning"&gt;Warning&lt;/button&gt;
1696
+
1697
+ &lt;button type="button" class="btn btn-outline-danger"&gt;Danger&lt;/button&gt;
1698
+ </code>
1699
+ </pre>
1700
+ </div>
1701
+ <div>
1702
+ <button type="button" class="mb-1 btn btn-outline-primary">Primary</button>
1703
+ <button type="button" class="mb-1 btn btn-outline-secondary">Secondary</button>
1704
+ <button type="button" class="mb-1 btn btn-outline-success">Success</button>
1705
+ <button type="button" class="mb-1 btn btn-outline-info">Info</button>
1706
+ <button type="button" class="mb-1 btn btn-outline-warning">Warning</button>
1707
+ <button type="button" class="mb-1 btn btn-outline-danger">Danger</button>
1708
+ </div>
1709
+ </div>
1710
+ </div>
1711
+
1712
+ <!-- Outline Square Buttons -->
1713
+ <div class="card card-default">
1714
+ <div class="card-header">
1715
+ <h2>Outline Square Buttons</h2>
1716
+
1717
+ <a class="btn mdi mdi-code-tags" data-toggle="collapse" href="#collapse-buttons-4" role="button"
1718
+ aria-expanded="false" aria-controls="collapse-buttons-4"> </a>
1719
+
1720
+
1721
+ </div>
1722
+ <div class="card-body">
1723
+ <div class="collapse" id="collapse-buttons-4">
1724
+ <pre class="language-html mb-4">
1725
+ <code >
1726
+ &lt;button type="button" class="btn btn-outline-primary btn-square"&gt;Primary&lt;/button&gt;
1727
+
1728
+ &lt;button type="button" class="btn btn-outline-secondary btn-square"&gt;Secondary&lt;/button&gt;
1729
+
1730
+ &lt;button type="button" class="btn btn-outline-success btn-square"&gt;Success&lt;/button&gt;
1731
+
1732
+ &lt;button type="button" class="btn btn-outline-info btn-square"&gt;Info&lt;/button&gt;
1733
+
1734
+ &lt;button type="button" class="btn btn-outline-warning btn-square"&gt;Warning&lt;/button&gt;
1735
+
1736
+ &lt;button type="button" class="btn btn-outline-danger btn-square"&gt;Danger&lt;/button&gt;
1737
+ </code>
1738
+ </pre>
1739
+ </div>
1740
+ <div>
1741
+ <button type="button" class="mb-1 btn btn-outline-primary btn-square">Primary</button>
1742
+ <button type="button" class="mb-1 btn btn-outline-secondary btn-square">Secondary</button>
1743
+ <button type="button" class="mb-1 btn btn-outline-success btn-square">Success</button>
1744
+ <button type="button" class="mb-1 btn btn-outline-info btn-square">Info</button>
1745
+ <button type="button" class="mb-1 btn btn-outline-warning btn-square">Warning</button>
1746
+ <button type="button" class="mb-1 btn btn-outline-danger btn-square">Danger</button>
1747
+ </div>
1748
+ </div>
1749
+ </div>
1750
+
1751
+ <!-- Outline Pill Buttons -->
1752
+ <div class="card card-default">
1753
+ <div class="card-header">
1754
+ <h2>Outline Pill Buttons</h2>
1755
+
1756
+ <a class="btn mdi mdi-code-tags" data-toggle="collapse" href="#collapse-buttons-6" role="button"
1757
+ aria-expanded="false" aria-controls="collapse-buttons-6"> </a>
1758
+
1759
+
1760
+ </div>
1761
+ <div class="card-body">
1762
+ <div class="collapse" id="collapse-buttons-6">
1763
+ <pre class="language-html mb-4">
1764
+ <code >
1765
+ &lt;button type="button" class="mb-1 btn btn-outline-primary btn-pill"&gt;Primary&lt;/button&gt;
1766
+
1767
+ &lt;button type="button" class="mb-1 btn btn-outline-secondary btn-pill"&gt;Secondary&lt;/button&gt;
1768
+
1769
+ &lt;button type="button" class="mb-1 btn btn-outline-success btn-pill"&gt;Success&lt;/button&gt;
1770
+
1771
+ &lt;button type="button" class="mb-1 btn btn-outline-info btn-pill"&gt;Info&lt;/button&gt;
1772
+
1773
+ &lt;button type="button" class="mb-1 btn btn-outline-warning btn-pill"&gt;Warning&lt;/button&gt;
1774
+
1775
+ &lt;button type="button" class="mb-1 btn btn-outline-danger btn-pill"&gt;Danger&lt;/button&gt;
1776
+ </code>
1777
+ </pre>
1778
+ </div>
1779
+ <div>
1780
+ <button type="button" class="mb-1 btn btn-outline-primary btn-pill">Primary</button>
1781
+ <button type="button" class="mb-1 btn btn-outline-secondary btn-pill">Secondary</button>
1782
+ <button type="button" class="mb-1 btn btn-outline-success btn-pill">Success</button>
1783
+ <button type="button" class="mb-1 btn btn-outline-info btn-pill">Info</button>
1784
+ <button type="button" class="mb-1 btn btn-outline-warning btn-pill">Warning</button>
1785
+ <button type="button" class="mb-1 btn btn-outline-danger btn-pill">Danger</button>
1786
+ </div>
1787
+ </div>
1788
+ </div>
1789
+
1790
+ <!-- Outline Buttons with Icon -->
1791
+ <div class="card card-default">
1792
+ <div class="card-header">
1793
+ <h2>Outline Buttons with Icon</h2>
1794
+
1795
+ <a class="btn mdi mdi-code-tags" data-toggle="collapse" href="#collapse-buttons-8" role="button"
1796
+ aria-expanded="false" aria-controls="collapse-buttons-8"> </a>
1797
+
1798
+
1799
+ </div>
1800
+ <div class="card-body">
1801
+ <div class="collapse" id="collapse-buttons-8">
1802
+ <pre class="language-html mb-4">
1803
+ <code >
1804
+ &lt;button type="button" class="mb-1 btn btn-primary"&gt;
1805
+ &lt;i class=" mdi mdi-star-outline mr-1"&gt;&lt;/i&gt;
1806
+ Primary
1807
+ &lt;/button&gt;
1808
+
1809
+ &lt;button type="button" class="mb-1 btn btn-secondary"&gt;
1810
+ &lt;i class=" mdi mdi-diamond-outline mr-1"&gt;&lt;/i&gt;
1811
+ Secondary
1812
+ &lt;/button&gt;
1813
+
1814
+ &lt;button type="button" class="mb-1 btn btn-success"&gt;
1815
+ &lt;i class=" mdi mdi-checkbox-marked-outline mr-1"&gt;&lt;/i&gt;
1816
+ Success
1817
+ &lt;/button&gt;
1818
+
1819
+ &lt;button type="button" class="mb-1 btn btn-info"&gt;
1820
+ &lt;i class=" mdi mdi-information-outline mr-1"&gt;&lt;/i&gt;
1821
+ Info
1822
+ &lt;/button&gt;
1823
+
1824
+ &lt;button type="button" class="mb-1 btn btn-warning"&gt;
1825
+ &lt;i class=" mdi mdi-alert-outline mr-1"&gt;&lt;/i&gt;
1826
+ Warning
1827
+ &lt;/button&gt;
1828
+
1829
+ &lt;button type="button" class="mb-1 btn btn-danger"&gt;
1830
+ &lt;i class=" mdi mdi-close-circle-outline mr-1"&gt;&lt;/i&gt;
1831
+ Danger
1832
+ &lt;/button&gt;
1833
+ </code>
1834
+ </pre>
1835
+ </div>
1836
+ <div>
1837
+ <button type="button" class="mb-1 btn btn-outline-primary">
1838
+ <i class=" mdi mdi-star-outline mr-1"></i>
1839
+ Primary
1840
+ </button>
1841
+ <button type="button" class="mb-1 btn btn-outline-secondary">
1842
+ <i class=" mdi mdi-diamond-outline mr-1"></i>
1843
+ Secondary
1844
+ </button>
1845
+ <button type="button" class="mb-1 btn btn-outline-success">
1846
+ <i class=" mdi mdi-checkbox-marked-outline mr-1"></i>
1847
+ Success
1848
+ </button>
1849
+ <button type="button" class="mb-1 btn btn-outline-info">
1850
+ <i class=" mdi mdi-information-outline mr-1"></i>
1851
+ Info
1852
+ </button>
1853
+ <button type="button" class="mb-1 btn btn-outline-warning">
1854
+ <i class=" mdi mdi-alert-outline mr-1"></i>
1855
+ Warning
1856
+ </button>
1857
+ <button type="button" class="mb-1 btn btn-outline-danger">
1858
+ <i class=" mdi mdi-close-circle-outline mr-1"></i>
1859
+ Danger
1860
+ </button>
1861
+ </div>
1862
+ </div>
1863
+ </div>
1864
+
1865
+ <!-- Small Outline Buttons -->
1866
+ <div class="card card-default">
1867
+ <div class="card-header">
1868
+ <h2>Small Outline Buttons</h2>
1869
+
1870
+ <a class="btn mdi mdi-code-tags" data-toggle="collapse" href="#collapse-buttons-10" role="button"
1871
+ aria-expanded="false" aria-controls="collapse-buttons-10"> </a>
1872
+
1873
+
1874
+ </div>
1875
+ <div class="card-body">
1876
+ <div class="collapse" id="collapse-buttons-10">
1877
+ <pre class="language-html mb-4">
1878
+ <code >
1879
+ &lt;button type="button" class="btn btn-sm btn-outline-primary"&gt;Primary&lt;/button&gt;
1880
+
1881
+ &lt;button type="button" class="btn btn-sm btn-outline-secondary"&gt;Secondary&lt;/button&gt;
1882
+
1883
+ &lt;button type="button" class="btn btn-sm btn-outline-success"&gt;Success&lt;/button&gt;
1884
+
1885
+ &lt;button type="button" class="btn btn-sm btn-outline-info"&gt;Info&lt;/button&gt;
1886
+
1887
+ &lt;button type="button" class="btn btn-sm btn-outline-warning"&gt;Warning&lt;/button&gt;
1888
+
1889
+ &lt;button type="button" class="btn btn-sm btn-outline-danger"&gt;Danger&lt;/button&gt;
1890
+ </code>
1891
+ </pre>
1892
+ </div>
1893
+ <div>
1894
+ <button type="button" class="mb-1 btn btn-sm btn-outline-primary">Primary</button>
1895
+ <button type="button" class="mb-1 btn btn-sm btn-outline-secondary">Secondary</button>
1896
+ <button type="button" class="mb-1 btn btn-sm btn-outline-success">Success</button>
1897
+ <button type="button" class="mb-1 btn btn-sm btn-outline-info">Info</button>
1898
+ <button type="button" class="mb-1 btn btn-sm btn-outline-warning">Warning</button>
1899
+ <button type="button" class="mb-1 btn btn-sm btn-outline-danger">Danger</button>
1900
+ </div>
1901
+ </div>
1902
+ </div>
1903
+
1904
+ <!-- Large Outline Buttons -->
1905
+ <div class="card card-default">
1906
+ <div class="card-header">
1907
+ <h2>Large Outline Buttons</h2>
1908
+
1909
+ <a class="btn mdi mdi-code-tags" data-toggle="collapse" href="#collapse-buttons-12" role="button"
1910
+ aria-expanded="false" aria-controls="collapse-buttons-12"> </a>
1911
+
1912
+
1913
+ </div>
1914
+ <div class="card-body">
1915
+ <div class="collapse" id="collapse-buttons-12">
1916
+ <pre class="language-html mb-4">
1917
+ <code >
1918
+ &lt;button type="button" class="btn btn-lg btn-outline-primary"&gt;Primary&lt;/button&gt;
1919
+
1920
+ &lt;button type="button" class="btn btn-lg btn-outline-secondary"&gt;Secondary&lt;/button&gt;
1921
+
1922
+ &lt;button type="button" class="btn btn-lg btn-outline-success"&gt;Success&lt;/button&gt;
1923
+
1924
+ &lt;button type="button" class="btn btn-lg btn-outline-info"&gt;Info&lt;/button&gt;
1925
+
1926
+ &lt;button type="button" class="btn btn-lg btn-outline-warning"&gt;Warning&lt;/button&gt;
1927
+
1928
+ &lt;button type="button" class="btn btn-lg btn-outline-danger"&gt;Danger&lt;/button&gt;
1929
+ </code>
1930
+ </pre>
1931
+ </div>
1932
+ <div>
1933
+ <button type="button" class="mb-1 btn btn-lg btn-outline-primary">Primary</button>
1934
+ <button type="button" class="mb-1 btn btn-lg btn-outline-secondary">Secondary</button>
1935
+ <button type="button" class="mb-1 btn btn-lg btn-outline-success">Success</button>
1936
+ <button type="button" class="mb-1 btn btn-lg btn-outline-info">Info</button>
1937
+ <button type="button" class="mb-1 btn btn-lg btn-outline-warning">Warning</button>
1938
+ <button type="button" class="mb-1 btn btn-lg btn-outline-danger">Danger</button>
1939
+ </div>
1940
+ </div>
1941
+ </div>
1942
+ <!-- Disabled Outline Buttons -->
1943
+ <div class="card card-default">
1944
+ <div class="card-header">
1945
+ <h2>Disabled Outline Buttons</h2>
1946
+
1947
+ <a class="btn mdi mdi-code-tags" data-toggle="collapse" href="#collapse-buttons-14" role="button"
1948
+ aria-expanded="false" aria-controls="collapse-buttons-14"> </a>
1949
+
1950
+
1951
+ </div>
1952
+ <div class="card-body">
1953
+ <div class="collapse" id="collapse-buttons-14">
1954
+ <pre class="language-html mb-4">
1955
+ <code >
1956
+ &lt;button type="button" class="btn btn-outline-primary"disabled&gt;Primary&lt;/button&gt;
1957
+
1958
+ &lt;button type="button" class="btn btn-outline-secondary"disabled&gt;Secondary&lt;/button&gt;
1959
+
1960
+ &lt;button type="button" class="btn btn-outline-success"disabled&gt;Success&lt;/button&gt;
1961
+
1962
+ &lt;button type="button" class="btn btn-outline-info"disabled&gt;Info&lt;/button&gt;
1963
+
1964
+ &lt;button type="button" class="btn btn-outline-warning"disabled&gt;Warning&lt;/button&gt;
1965
+
1966
+ &lt;button type="button" class="btn btn-outline-danger"disabled&gt;Danger&lt;/button&gt;
1967
+ </code>
1968
+ </pre>
1969
+ </div>
1970
+ <div>
1971
+ <button type="button" class="mb-1 btn btn-outline-primary" disabled>Primary</button>
1972
+ <button type="button" class="mb-1 btn btn-outline-secondary" disabled>Secondary</button>
1973
+ <button type="button" class="mb-1 btn btn-outline-success" disabled>Success</button>
1974
+ <button type="button" class="mb-1 btn btn-outline-info" disabled>Info</button>
1975
+ <button type="button" class="mb-1 btn btn-outline-warning" disabled>Warning</button>
1976
+ <button type="button" class="mb-1 btn btn-outline-danger" disabled>Danger</button>
1977
+ </div>
1978
+ </div>
1979
+ </div>
1980
+
1981
+ <!-- Outline Block Buttons -->
1982
+ <div class="card card-default">
1983
+ <div class="card-header">
1984
+ <h2>Outline Block Buttons</h2>
1985
+
1986
+ <a class="btn mdi mdi-code-tags" data-toggle="collapse" href="#collapse-buttons-16" role="button"
1987
+ aria-expanded="false" aria-controls="collapse-buttons-16"> </a>
1988
+
1989
+
1990
+ </div>
1991
+ <div class="card-body">
1992
+ <div class="collapse" id="collapse-buttons-16">
1993
+ <pre class="language-html mb-4">
1994
+ <code >
1995
+ &lt;button type="button" class="btn btn-block btn-outline-primary"&gt;Primary&lt;/button&gt;
1996
+
1997
+ &lt;button type="button" class="btn btn-block btn-outline-secondary"&gt;Secondary&lt;/button&gt;
1998
+
1999
+ &lt;button type="button" class="btn btn-block btn-outline-success"&gt;Success&lt;/button&gt;
2000
+
2001
+ &lt;button type="button" class="btn btn-block btn-outline-info"&gt;Info&lt;/button&gt;
2002
+
2003
+ &lt;button type="button" class="btn btn-block btn-outline-warning"&gt;Warning&lt;/button&gt;
2004
+
2005
+ &lt;button type="button" class="btn btn-block btn-outline-danger"&gt;Danger&lt;/button&gt;
2006
+ </code>
2007
+ </pre>
2008
+ </div>
2009
+ <div>
2010
+ <button type="button" class="mb-1 btn btn-block btn-outline-primary">Primary</button>
2011
+ <button type="button" class="mb-1 btn btn-block btn-outline-secondary">Secondary</button>
2012
+ <button type="button" class="mb-1 btn btn-block btn-outline-success">Success</button>
2013
+ <button type="button" class="mb-1 btn btn-block btn-outline-info">Info</button>
2014
+ <button type="button" class="mb-1 btn btn-block btn-outline-warning">Warning</button>
2015
+ <button type="button" class="mb-1 btn btn-block btn-outline-danger">Danger</button>
2016
+ </div>
2017
+ </div>
2018
+ </div>
2019
+ </div>
2020
+
2021
+ </div>
2022
+ </div>
2023
+
2024
+ </div>
2025
+
2026
+ <!-- Footer -->
2027
+ <footer class="footer mt-auto">
2028
+ <div class="copyright bg-white">
2029
+ <p>
2030
+ &copy; <span id="copy-year"></span> Copyright Mono Dashboard Bootstrap Template by <a class="text-primary" href="http://www.iamabdus.com/" target="_blank" >Abdus</a>.
2031
+ </p>
2032
+ </div>
2033
+ <script>
2034
+ var d = new Date();
2035
+ var year = d.getFullYear();
2036
+ document.getElementById("copy-year").innerHTML = year;
2037
+ </script>
2038
+ </footer>
2039
+
2040
+ </div>
2041
+ </div>
2042
+
2043
+ <!-- Card Offcanvas -->
2044
+ <div class="card card-offcanvas" id="contact-off" >
2045
+ <div class="card-header">
2046
+ <h2>Contacts</h2>
2047
+ <a href="#" class="btn btn-primary btn-pill px-4">Add New</a>
2048
+ </div>
2049
+ <div class="card-body">
2050
+
2051
+ <div class="mb-4">
2052
+ <input type="text" class="form-control form-control-lg form-control-secondary rounded-0" placeholder="Search contacts...">
2053
+ </div>
2054
+
2055
+ <div class="media media-sm">
2056
+ <div class="media-sm-wrapper">
2057
+ <a href="user-profile.html">
2058
+ <img src="images/user/user-sm-01.jpg" alt="User Image">
2059
+ <span class="active bg-primary"></span>
2060
+ </a>
2061
+ </div>
2062
+ <div class="media-body">
2063
+ <a href="user-profile.html">
2064
+ <span class="title">Selena Wagner</span>
2065
+ <span class="discribe">Designer</span>
2066
+ </a>
2067
+ </div>
2068
+ </div>
2069
+
2070
+ <div class="media media-sm">
2071
+ <div class="media-sm-wrapper">
2072
+ <a href="user-profile.html">
2073
+ <img src="images/user/user-sm-02.jpg" alt="User Image">
2074
+ <span class="active bg-primary"></span>
2075
+ </a>
2076
+ </div>
2077
+ <div class="media-body">
2078
+ <a href="user-profile.html">
2079
+ <span class="title">Walter Reuter</span>
2080
+ <span>Developer</span>
2081
+ </a>
2082
+ </div>
2083
+ </div>
2084
+
2085
+ <div class="media media-sm">
2086
+ <div class="media-sm-wrapper">
2087
+ <a href="user-profile.html">
2088
+ <img src="images/user/user-sm-03.jpg" alt="User Image">
2089
+ </a>
2090
+ </div>
2091
+ <div class="media-body">
2092
+ <a href="user-profile.html">
2093
+ <span class="title">Larissa Gebhardt</span>
2094
+ <span>Cyber Punk</span>
2095
+ </a>
2096
+ </div>
2097
+ </div>
2098
+
2099
+ <div class="media media-sm">
2100
+ <div class="media-sm-wrapper">
2101
+ <a href="user-profile.html">
2102
+ <img src="images/user/user-sm-04.jpg" alt="User Image">
2103
+ </a>
2104
+
2105
+ </div>
2106
+ <div class="media-body">
2107
+ <a href="user-profile.html">
2108
+ <span class="title">Albrecht Straub</span>
2109
+ <span>Photographer</span>
2110
+ </a>
2111
+ </div>
2112
+ </div>
2113
+
2114
+ <div class="media media-sm">
2115
+ <div class="media-sm-wrapper">
2116
+ <a href="user-profile.html">
2117
+ <img src="images/user/user-sm-05.jpg" alt="User Image">
2118
+ <span class="active bg-danger"></span>
2119
+ </a>
2120
+ </div>
2121
+ <div class="media-body">
2122
+ <a href="user-profile.html">
2123
+ <span class="title">Leopold Ebert</span>
2124
+ <span>Fashion Designer</span>
2125
+ </a>
2126
+ </div>
2127
+ </div>
2128
+
2129
+ <div class="media media-sm">
2130
+ <div class="media-sm-wrapper">
2131
+ <a href="user-profile.html">
2132
+ <img src="images/user/user-sm-06.jpg" alt="User Image">
2133
+ <span class="active bg-primary"></span>
2134
+ </a>
2135
+ </div>
2136
+ <div class="media-body">
2137
+ <a href="user-profile.html">
2138
+ <span class="title">Selena Wagner</span>
2139
+ <span>Photographer</span>
2140
+ </a>
2141
+ </div>
2142
+ </div>
2143
+
2144
+ </div>
2145
+ </div>
2146
+
2147
+
2148
+
2149
+
2150
+ <script src="plugins/jquery/jquery.min.js"></script>
2151
+ <script src="plugins/bootstrap/js/bootstrap.bundle.min.js"></script>
2152
+ <script src="plugins/simplebar/simplebar.min.js"></script>
2153
+ <script src="https://unpkg.com/hotkeys-js/dist/hotkeys.min.js"></script>
2154
+
2155
+
2156
+
2157
+ <script src="plugins/prism/prism.js"></script>
2158
+
2159
+
2160
+ <script src="js/mono.js"></script>
2161
+ <script src="js/chart.js"></script>
2162
+ <script src="js/map.js"></script>
2163
+ <script src="js/custom.js"></script>
2164
+
2165
+
2166
+
2167
+
2168
+ <!-- -->
2169
+
2170
+
2171
+ </body>
2172
+ </html>
button-dropdown.html ADDED
The diff for this file is too large to render. See raw diff
 
button-group.html ADDED
The diff for this file is too large to render. See raw diff
 
button-loading.html ADDED
@@ -0,0 +1,1714 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+
3
+ <!--
4
+ // WEBSITE: https://themefisher.com
5
+ // TWITTER: https://twitter.com/themefisher
6
+ // FACEBOOK: https://www.facebook.com/themefisher
7
+ // GITHUB: https://github.com/themefisher/
8
+ -->
9
+
10
+ <html lang="en" dir="ltr">
11
+ <head>
12
+ <meta charset="utf-8" />
13
+ <meta http-equiv="X-UA-Compatible" content="IE=edge" />
14
+ <meta name="viewport" content="width=device-width, initial-scale=1" />
15
+
16
+ <title>Mono - Responsive Admin & Dashboard Template</title>
17
+
18
+ <!-- GOOGLE FONTS -->
19
+ <link href="https://fonts.googleapis.com/css?family=Karla:400,700|Roboto" rel="stylesheet">
20
+ <link href="plugins/material/css/materialdesignicons.min.css" rel="stylesheet" />
21
+ <link href="plugins/simplebar/simplebar.css" rel="stylesheet" />
22
+
23
+ <!-- PLUGINS CSS STYLE -->
24
+ <link href="plugins/nprogress/nprogress.css" rel="stylesheet" />
25
+
26
+
27
+ <link href="plugins/prism/prism.css" rel="stylesheet" />
28
+
29
+
30
+
31
+ <link href="plugins/ladda/ladda.min.css" rel="stylesheet" />
32
+
33
+
34
+ <!-- MONO CSS -->
35
+ <link id="main-css-href" rel="stylesheet" href="css/style.css" />
36
+
37
+
38
+
39
+
40
+ <!-- FAVICON -->
41
+ <link href="images/favicon.png" rel="shortcut icon" />
42
+
43
+ <!--
44
+ HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries
45
+ -->
46
+ <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
47
+ <!--[if lt IE 9]>
48
+ <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
49
+ <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
50
+ <![endif]-->
51
+ <script src="plugins/nprogress/nprogress.js"></script>
52
+ </head>
53
+
54
+
55
+ <body class="navbar-fixed sidebar-fixed" id="body">
56
+ <script>
57
+ NProgress.configure({ showSpinner: false });
58
+ NProgress.start();
59
+ </script>
60
+
61
+
62
+
63
+ <!-- ====================================
64
+ ——— WRAPPER
65
+ ===================================== -->
66
+ <div class="wrapper">
67
+
68
+
69
+ <!-- ====================================
70
+ ——— LEFT SIDEBAR WITH OUT FOOTER
71
+ ===================================== -->
72
+ <aside class="left-sidebar sidebar-dark" id="left-sidebar">
73
+ <div id="sidebar" class="sidebar sidebar-with-footer">
74
+ <!-- Aplication Brand -->
75
+ <div class="app-brand">
76
+ <a href="/index.html">
77
+ <img src="images/logo.png" alt="Mono">
78
+ <span class="brand-name">MONO</span>
79
+ </a>
80
+ </div>
81
+ <!-- begin sidebar scrollbar -->
82
+ <div class="sidebar-left" data-simplebar style="height: 100%;">
83
+ <!-- sidebar menu -->
84
+ <ul class="nav sidebar-inner" id="sidebar-menu">
85
+
86
+
87
+
88
+ <li
89
+ >
90
+ <a class="sidenav-item-link" href="index.html">
91
+ <i class="mdi mdi-briefcase-account-outline"></i>
92
+ <span class="nav-text">Business Dashboard</span>
93
+ </a>
94
+ </li>
95
+
96
+
97
+
98
+
99
+
100
+ <li
101
+ >
102
+ <a class="sidenav-item-link" href="analytics.html">
103
+ <i class="mdi mdi-chart-line"></i>
104
+ <span class="nav-text">Analytics Dashboard</span>
105
+ </a>
106
+ </li>
107
+
108
+
109
+
110
+
111
+
112
+ <li class="section-title">
113
+ Apps
114
+ </li>
115
+
116
+
117
+
118
+
119
+
120
+ <li
121
+ >
122
+ <a class="sidenav-item-link" href="chat.html">
123
+ <i class="mdi mdi-wechat"></i>
124
+ <span class="nav-text">Chat</span>
125
+ </a>
126
+ </li>
127
+
128
+
129
+
130
+
131
+
132
+ <li
133
+ >
134
+ <a class="sidenav-item-link" href="contacts.html">
135
+ <i class="mdi mdi-phone"></i>
136
+ <span class="nav-text">Contacts</span>
137
+ </a>
138
+ </li>
139
+
140
+
141
+
142
+
143
+
144
+ <li
145
+ >
146
+ <a class="sidenav-item-link" href="team.html">
147
+ <i class="mdi mdi-account-group"></i>
148
+ <span class="nav-text">Team</span>
149
+ </a>
150
+ </li>
151
+
152
+
153
+
154
+
155
+
156
+ <li
157
+ >
158
+ <a class="sidenav-item-link" href="calendar.html">
159
+ <i class="mdi mdi-calendar-check"></i>
160
+ <span class="nav-text">Calendar</span>
161
+ </a>
162
+ </li>
163
+
164
+
165
+
166
+
167
+
168
+ <li class="has-sub" >
169
+ <a class="sidenav-item-link" href="javascript:void(0)" data-toggle="collapse" data-target="#email"
170
+ aria-expanded="false" aria-controls="email">
171
+ <i class="mdi mdi-email"></i>
172
+ <span class="nav-text">email</span> <b class="caret"></b>
173
+ </a>
174
+ <ul class="collapse" id="email"
175
+ data-parent="#sidebar-menu">
176
+ <div class="sub-menu">
177
+
178
+
179
+
180
+ <li >
181
+ <a class="sidenav-item-link" href="email-inbox.html">
182
+ <span class="nav-text">Email Inbox</span>
183
+
184
+ </a>
185
+ </li>
186
+
187
+
188
+
189
+
190
+
191
+
192
+ <li >
193
+ <a class="sidenav-item-link" href="email-details.html">
194
+ <span class="nav-text">Email Details</span>
195
+
196
+ </a>
197
+ </li>
198
+
199
+
200
+
201
+
202
+
203
+
204
+ <li >
205
+ <a class="sidenav-item-link" href="email-compose.html">
206
+ <span class="nav-text">Email Compose</span>
207
+
208
+ </a>
209
+ </li>
210
+
211
+
212
+
213
+
214
+ </div>
215
+ </ul>
216
+ </li>
217
+
218
+
219
+
220
+
221
+
222
+ <li class="section-title">
223
+ UI Elements
224
+ </li>
225
+
226
+
227
+
228
+
229
+
230
+ <li class="has-sub active expand" >
231
+ <a class="sidenav-item-link" href="javascript:void(0)" data-toggle="collapse" data-target="#ui-elements"
232
+ aria-expanded="false" aria-controls="ui-elements">
233
+ <i class="mdi mdi-folder-outline"></i>
234
+ <span class="nav-text">UI Components</span> <b class="caret"></b>
235
+ </a>
236
+ <ul class="collapse show" id="ui-elements"
237
+ data-parent="#sidebar-menu">
238
+ <div class="sub-menu">
239
+
240
+
241
+
242
+ <li >
243
+ <a class="sidenav-item-link" href="alert.html">
244
+ <span class="nav-text">Alert</span>
245
+
246
+ </a>
247
+ </li>
248
+
249
+
250
+
251
+
252
+
253
+
254
+ <li >
255
+ <a class="sidenav-item-link" href="badge.html">
256
+ <span class="nav-text">Badge</span>
257
+
258
+ </a>
259
+ </li>
260
+
261
+
262
+
263
+
264
+
265
+
266
+ <li >
267
+ <a class="sidenav-item-link" href="breadcrumb.html">
268
+ <span class="nav-text">Breadcrumb</span>
269
+
270
+ </a>
271
+ </li>
272
+
273
+
274
+
275
+
276
+
277
+ <li class="has-sub active expand" >
278
+ <a class="sidenav-item-link" href="javascript:void(0)" data-toggle="collapse" data-target="#buttons"
279
+ aria-expanded="false" aria-controls="buttons">
280
+ <span class="nav-text">Buttons</span> <b class="caret"></b>
281
+ </a>
282
+ <ul class="collapse show" id="buttons">
283
+ <div class="sub-menu">
284
+
285
+ <li >
286
+ <a href="button-default.html">Button Default</a>
287
+ </li>
288
+
289
+ <li >
290
+ <a href="button-dropdown.html">Button Dropdown</a>
291
+ </li>
292
+
293
+ <li >
294
+ <a href="button-group.html">Button Group</a>
295
+ </li>
296
+
297
+ <li >
298
+ <a href="button-social.html">Button Social</a>
299
+ </li>
300
+
301
+ <li class="active" >
302
+ <a href="button-loading.html">Button Loading</a>
303
+ </li>
304
+
305
+ </div>
306
+ </ul>
307
+ </li>
308
+
309
+
310
+
311
+
312
+
313
+ <li >
314
+ <a class="sidenav-item-link" href="card.html">
315
+ <span class="nav-text">Card</span>
316
+
317
+ </a>
318
+ </li>
319
+
320
+
321
+
322
+
323
+
324
+
325
+ <li >
326
+ <a class="sidenav-item-link" href="carousel.html">
327
+ <span class="nav-text">Carousel</span>
328
+
329
+ </a>
330
+ </li>
331
+
332
+
333
+
334
+
335
+
336
+
337
+ <li >
338
+ <a class="sidenav-item-link" href="collapse.html">
339
+ <span class="nav-text">Collapse</span>
340
+
341
+ </a>
342
+ </li>
343
+
344
+
345
+
346
+
347
+
348
+
349
+ <li >
350
+ <a class="sidenav-item-link" href="editor.html">
351
+ <span class="nav-text">Editor</span>
352
+
353
+ </a>
354
+ </li>
355
+
356
+
357
+
358
+
359
+
360
+
361
+ <li >
362
+ <a class="sidenav-item-link" href="list-group.html">
363
+ <span class="nav-text">List Group</span>
364
+
365
+ </a>
366
+ </li>
367
+
368
+
369
+
370
+
371
+
372
+
373
+ <li >
374
+ <a class="sidenav-item-link" href="modal.html">
375
+ <span class="nav-text">Modal</span>
376
+
377
+ </a>
378
+ </li>
379
+
380
+
381
+
382
+
383
+
384
+
385
+ <li >
386
+ <a class="sidenav-item-link" href="pagination.html">
387
+ <span class="nav-text">Pagination</span>
388
+
389
+ </a>
390
+ </li>
391
+
392
+
393
+
394
+
395
+
396
+
397
+ <li >
398
+ <a class="sidenav-item-link" href="popover-tooltip.html">
399
+ <span class="nav-text">Popover & Tooltip</span>
400
+
401
+ </a>
402
+ </li>
403
+
404
+
405
+
406
+
407
+
408
+
409
+ <li >
410
+ <a class="sidenav-item-link" href="progress-bar.html">
411
+ <span class="nav-text">Progress Bar</span>
412
+
413
+ </a>
414
+ </li>
415
+
416
+
417
+
418
+
419
+
420
+
421
+ <li >
422
+ <a class="sidenav-item-link" href="spinner.html">
423
+ <span class="nav-text">Spinner</span>
424
+
425
+ </a>
426
+ </li>
427
+
428
+
429
+
430
+
431
+
432
+
433
+ <li >
434
+ <a class="sidenav-item-link" href="switches.html">
435
+ <span class="nav-text">Switches</span>
436
+
437
+ </a>
438
+ </li>
439
+
440
+
441
+
442
+
443
+
444
+ <li class="has-sub" >
445
+ <a class="sidenav-item-link" href="javascript:void(0)" data-toggle="collapse" data-target="#tables"
446
+ aria-expanded="false" aria-controls="tables">
447
+ <span class="nav-text">Tables</span> <b class="caret"></b>
448
+ </a>
449
+ <ul class="collapse" id="tables">
450
+ <div class="sub-menu">
451
+
452
+ <li >
453
+ <a href="bootstarp-tables.html">Bootstrap Tables</a>
454
+ </li>
455
+
456
+ <li >
457
+ <a href="data-tables.html">Data Tables</a>
458
+ </li>
459
+
460
+ </div>
461
+ </ul>
462
+ </li>
463
+
464
+
465
+
466
+
467
+
468
+ <li >
469
+ <a class="sidenav-item-link" href="tab.html">
470
+ <span class="nav-text">Tab</span>
471
+
472
+ </a>
473
+ </li>
474
+
475
+
476
+
477
+
478
+
479
+
480
+ <li >
481
+ <a class="sidenav-item-link" href="toaster.html">
482
+ <span class="nav-text">Toaster</span>
483
+
484
+ </a>
485
+ </li>
486
+
487
+
488
+
489
+
490
+
491
+ <li class="has-sub" >
492
+ <a class="sidenav-item-link" href="javascript:void(0)" data-toggle="collapse" data-target="#icons"
493
+ aria-expanded="false" aria-controls="icons">
494
+ <span class="nav-text">Icons</span> <b class="caret"></b>
495
+ </a>
496
+ <ul class="collapse" id="icons">
497
+ <div class="sub-menu">
498
+
499
+ <li >
500
+ <a href="material-icons.html">Material Icon</a>
501
+ </li>
502
+
503
+ <li >
504
+ <a href="flag-icons.html">Flag Icon</a>
505
+ </li>
506
+
507
+ </div>
508
+ </ul>
509
+ </li>
510
+
511
+
512
+
513
+
514
+ <li class="has-sub" >
515
+ <a class="sidenav-item-link" href="javascript:void(0)" data-toggle="collapse" data-target="#forms"
516
+ aria-expanded="false" aria-controls="forms">
517
+ <span class="nav-text">Forms</span> <b class="caret"></b>
518
+ </a>
519
+ <ul class="collapse" id="forms">
520
+ <div class="sub-menu">
521
+
522
+ <li >
523
+ <a href="basic-input.html">Basic Input</a>
524
+ </li>
525
+
526
+ <li >
527
+ <a href="input-group.html">Input Group</a>
528
+ </li>
529
+
530
+ <li >
531
+ <a href="checkbox-radio.html">Checkbox & Radio</a>
532
+ </li>
533
+
534
+ <li >
535
+ <a href="form-validation.html">Form Validation</a>
536
+ </li>
537
+
538
+ <li >
539
+ <a href="form-advance.html">Form Advance</a>
540
+ </li>
541
+
542
+ </div>
543
+ </ul>
544
+ </li>
545
+
546
+
547
+
548
+
549
+ <li class="has-sub" >
550
+ <a class="sidenav-item-link" href="javascript:void(0)" data-toggle="collapse" data-target="#maps"
551
+ aria-expanded="false" aria-controls="maps">
552
+ <span class="nav-text">Maps</span> <b class="caret"></b>
553
+ </a>
554
+ <ul class="collapse" id="maps">
555
+ <div class="sub-menu">
556
+
557
+ <li >
558
+ <a href="google-maps.html">Google Map</a>
559
+ </li>
560
+
561
+ <li >
562
+ <a href="vector-maps.html">Vector Map</a>
563
+ </li>
564
+
565
+ </div>
566
+ </ul>
567
+ </li>
568
+
569
+
570
+
571
+
572
+ <li class="has-sub" >
573
+ <a class="sidenav-item-link" href="javascript:void(0)" data-toggle="collapse" data-target="#widgets"
574
+ aria-expanded="false" aria-controls="widgets">
575
+ <span class="nav-text">Widgets</span> <b class="caret"></b>
576
+ </a>
577
+ <ul class="collapse" id="widgets">
578
+ <div class="sub-menu">
579
+
580
+ <li >
581
+ <a href="widgets-general.html">General Widget</a>
582
+ </li>
583
+
584
+ <li >
585
+ <a href="widgets-chart.html">Chart Widget</a>
586
+ </li>
587
+
588
+ </div>
589
+ </ul>
590
+ </li>
591
+
592
+
593
+
594
+ </div>
595
+ </ul>
596
+ </li>
597
+
598
+
599
+
600
+
601
+
602
+ <li class="has-sub" >
603
+ <a class="sidenav-item-link" href="javascript:void(0)" data-toggle="collapse" data-target="#charts"
604
+ aria-expanded="false" aria-controls="charts">
605
+ <i class="mdi mdi-chart-pie"></i>
606
+ <span class="nav-text">Charts</span> <b class="caret"></b>
607
+ </a>
608
+ <ul class="collapse" id="charts"
609
+ data-parent="#sidebar-menu">
610
+ <div class="sub-menu">
611
+
612
+
613
+
614
+ <li >
615
+ <a class="sidenav-item-link" href="apex-charts.html">
616
+ <span class="nav-text">Apex Charts</span>
617
+
618
+ </a>
619
+ </li>
620
+
621
+
622
+
623
+
624
+ </div>
625
+ </ul>
626
+ </li>
627
+
628
+
629
+
630
+
631
+
632
+ <li class="section-title">
633
+ Pages
634
+ </li>
635
+
636
+
637
+
638
+
639
+
640
+ <li class="has-sub" >
641
+ <a class="sidenav-item-link" href="javascript:void(0)" data-toggle="collapse" data-target="#users"
642
+ aria-expanded="false" aria-controls="users">
643
+ <i class="mdi mdi-image-filter-none"></i>
644
+ <span class="nav-text">User</span> <b class="caret"></b>
645
+ </a>
646
+ <ul class="collapse" id="users"
647
+ data-parent="#sidebar-menu">
648
+ <div class="sub-menu">
649
+
650
+
651
+
652
+ <li >
653
+ <a class="sidenav-item-link" href="user-profile.html">
654
+ <span class="nav-text">User Profile</span>
655
+
656
+ </a>
657
+ </li>
658
+
659
+
660
+
661
+
662
+
663
+
664
+ <li >
665
+ <a class="sidenav-item-link" href="user-activities.html">
666
+ <span class="nav-text">User Activities</span>
667
+
668
+ </a>
669
+ </li>
670
+
671
+
672
+
673
+
674
+
675
+
676
+ <li >
677
+ <a class="sidenav-item-link" href="user-profile-settings.html">
678
+ <span class="nav-text">User Profile Settings</span>
679
+
680
+ </a>
681
+ </li>
682
+
683
+
684
+
685
+
686
+
687
+
688
+ <li >
689
+ <a class="sidenav-item-link" href="user-account-settings.html">
690
+ <span class="nav-text">User Account Settings</span>
691
+
692
+ </a>
693
+ </li>
694
+
695
+
696
+
697
+
698
+
699
+
700
+ <li >
701
+ <a class="sidenav-item-link" href="user-planing-settings.html">
702
+ <span class="nav-text">User Planing Settings</span>
703
+
704
+ </a>
705
+ </li>
706
+
707
+
708
+
709
+
710
+
711
+
712
+ <li >
713
+ <a class="sidenav-item-link" href="user-billing.html">
714
+ <span class="nav-text">User billing</span>
715
+
716
+ </a>
717
+ </li>
718
+
719
+
720
+
721
+
722
+
723
+
724
+ <li >
725
+ <a class="sidenav-item-link" href="user-notify-settings.html">
726
+ <span class="nav-text">User Notify Settings</span>
727
+
728
+ </a>
729
+ </li>
730
+
731
+
732
+
733
+
734
+ </div>
735
+ </ul>
736
+ </li>
737
+
738
+
739
+
740
+
741
+
742
+ <li class="has-sub" >
743
+ <a class="sidenav-item-link" href="javascript:void(0)" data-toggle="collapse" data-target="#authentication"
744
+ aria-expanded="false" aria-controls="authentication">
745
+ <i class="mdi mdi-account"></i>
746
+ <span class="nav-text">Authentication</span> <b class="caret"></b>
747
+ </a>
748
+ <ul class="collapse" id="authentication"
749
+ data-parent="#sidebar-menu">
750
+ <div class="sub-menu">
751
+
752
+
753
+
754
+ <li >
755
+ <a class="sidenav-item-link" href="sign-in.html">
756
+ <span class="nav-text">Sign In</span>
757
+
758
+ </a>
759
+ </li>
760
+
761
+
762
+
763
+
764
+
765
+
766
+ <li >
767
+ <a class="sidenav-item-link" href="sign-up.html">
768
+ <span class="nav-text">Sign Up</span>
769
+
770
+ </a>
771
+ </li>
772
+
773
+
774
+
775
+
776
+
777
+
778
+ <li >
779
+ <a class="sidenav-item-link" href="reset-password.html">
780
+ <span class="nav-text">Reset Password</span>
781
+
782
+ </a>
783
+ </li>
784
+
785
+
786
+
787
+
788
+ </div>
789
+ </ul>
790
+ </li>
791
+
792
+
793
+
794
+
795
+
796
+ <li class="has-sub" >
797
+ <a class="sidenav-item-link" href="javascript:void(0)" data-toggle="collapse" data-target="#other-page"
798
+ aria-expanded="false" aria-controls="other-page">
799
+ <i class="mdi mdi-file-multiple"></i>
800
+ <span class="nav-text">Other pages</span> <b class="caret"></b>
801
+ </a>
802
+ <ul class="collapse" id="other-page"
803
+ data-parent="#sidebar-menu">
804
+ <div class="sub-menu">
805
+
806
+
807
+
808
+ <li >
809
+ <a class="sidenav-item-link" href="invoice.html">
810
+ <span class="nav-text">Invoice</span>
811
+
812
+ </a>
813
+ </li>
814
+
815
+
816
+
817
+
818
+
819
+
820
+ <li >
821
+ <a class="sidenav-item-link" href="404.html">
822
+ <span class="nav-text">404 page</span>
823
+
824
+ </a>
825
+ </li>
826
+
827
+
828
+
829
+
830
+
831
+
832
+ <li >
833
+ <a class="sidenav-item-link" href="page-comingsoon.html">
834
+ <span class="nav-text">Coming Soon</span>
835
+
836
+ </a>
837
+ </li>
838
+
839
+
840
+
841
+
842
+
843
+
844
+ <li >
845
+ <a class="sidenav-item-link" href="page-maintenance.html">
846
+ <span class="nav-text">Maintenance</span>
847
+
848
+ </a>
849
+ </li>
850
+
851
+
852
+
853
+
854
+ </div>
855
+ </ul>
856
+ </li>
857
+
858
+
859
+
860
+
861
+
862
+ <li class="section-title">
863
+ Documentation
864
+ </li>
865
+
866
+
867
+
868
+
869
+
870
+ <li
871
+ >
872
+ <a class="sidenav-item-link" href="getting-started.html">
873
+ <i class="mdi mdi-airplane"></i>
874
+ <span class="nav-text">Getting Started</span>
875
+ </a>
876
+ </li>
877
+
878
+
879
+
880
+
881
+
882
+ <li class="has-sub" >
883
+ <a class="sidenav-item-link" href="javascript:void(0)" data-toggle="collapse" data-target="#customization"
884
+ aria-expanded="false" aria-controls="customization">
885
+ <i class="mdi mdi-square-edit-outline"></i>
886
+ <span class="nav-text">Customization</span> <b class="caret"></b>
887
+ </a>
888
+ <ul class="collapse" id="customization"
889
+ data-parent="#sidebar-menu">
890
+ <div class="sub-menu">
891
+
892
+
893
+
894
+ <li >
895
+ <a class="sidenav-item-link" href="navbar-customization.html">
896
+ <span class="nav-text">Navbar</span>
897
+
898
+ </a>
899
+ </li>
900
+
901
+
902
+
903
+
904
+
905
+
906
+ <li >
907
+ <a class="sidenav-item-link" href="sidebar-customization.html">
908
+ <span class="nav-text">Sidebar</span>
909
+
910
+ </a>
911
+ </li>
912
+
913
+
914
+
915
+
916
+
917
+
918
+ <li >
919
+ <a class="sidenav-item-link" href="styling.html">
920
+ <span class="nav-text">Styling</span>
921
+
922
+ </a>
923
+ </li>
924
+
925
+
926
+
927
+
928
+ </div>
929
+ </ul>
930
+ </li>
931
+
932
+
933
+
934
+ </ul>
935
+
936
+ </div>
937
+
938
+ <div class="sidebar-footer">
939
+ <div class="sidebar-footer-content">
940
+ <ul class="d-flex">
941
+ <li>
942
+ <a href="user-account-settings.html" data-toggle="tooltip" title="Profile settings"><i class="mdi mdi-settings"></i></a></li>
943
+ <li>
944
+ <a href="#" data-toggle="tooltip" title="No chat messages"><i class="mdi mdi-chat-processing"></i></a>
945
+ </li>
946
+ </ul>
947
+ </div>
948
+ </div>
949
+ </div>
950
+ </aside>
951
+
952
+
953
+
954
+ <!-- ====================================
955
+ ——— PAGE WRAPPER
956
+ ===================================== -->
957
+ <div class="page-wrapper">
958
+
959
+ <!-- Header -->
960
+ <header class="main-header" id="header">
961
+ <nav class="navbar navbar-expand-lg navbar-light" id="navbar">
962
+ <!-- Sidebar toggle button -->
963
+ <button id="sidebar-toggler" class="sidebar-toggle">
964
+ <span class="sr-only">Toggle navigation</span>
965
+ </button>
966
+
967
+ <span class="page-title">button loading</span>
968
+
969
+ <div class="navbar-right ">
970
+
971
+ <!-- search form -->
972
+ <div class="search-form">
973
+ <form action="index.html" method="get">
974
+ <div class="input-group input-group-sm" id="input-group-search">
975
+ <input type="text" autocomplete="off" name="query" id="search-input" class="form-control" placeholder="Search..." />
976
+ <div class="input-group-append">
977
+ <button class="btn" type="button">/</button>
978
+ </div>
979
+ </div>
980
+ </form>
981
+ <ul class="dropdown-menu dropdown-menu-search">
982
+
983
+ <li class="nav-item">
984
+ <a class="nav-link" href="index.html">Morbi leo risus</a>
985
+ </li>
986
+ <li class="nav-item">
987
+ <a class="nav-link" href="index.html">Dapibus ac facilisis in</a>
988
+ </li>
989
+ <li class="nav-item">
990
+ <a class="nav-link" href="index.html">Porta ac consectetur ac</a>
991
+ </li>
992
+ <li class="nav-item">
993
+ <a class="nav-link" href="index.html">Vestibulum at eros</a>
994
+ </li>
995
+
996
+ </ul>
997
+
998
+ </div>
999
+
1000
+ <ul class="nav navbar-nav">
1001
+ <!-- Offcanvas -->
1002
+ <li class="custom-dropdown">
1003
+ <a class="offcanvas-toggler active custom-dropdown-toggler" data-offcanvas="contact-off" href="javascript:" >
1004
+ <i class="mdi mdi-contacts icon"></i>
1005
+ </a>
1006
+ </li>
1007
+ <li class="custom-dropdown">
1008
+ <button class="notify-toggler custom-dropdown-toggler">
1009
+ <i class="mdi mdi-bell-outline icon"></i>
1010
+ <span class="badge badge-xs rounded-circle">21</span>
1011
+ </button>
1012
+ <div class="dropdown-notify">
1013
+
1014
+ <header>
1015
+ <div class="nav nav-underline" id="nav-tab" role="tablist">
1016
+ <a class="nav-item nav-link active" id="all-tabs" data-toggle="tab" href="#all" role="tab" aria-controls="nav-home"
1017
+ aria-selected="true">All (5)</a>
1018
+ <a class="nav-item nav-link" id="message-tab" data-toggle="tab" href="#message" role="tab" aria-controls="nav-profile"
1019
+ aria-selected="false">Msgs (4)</a>
1020
+ <a class="nav-item nav-link" id="other-tab" data-toggle="tab" href="#other" role="tab" aria-controls="nav-contact"
1021
+ aria-selected="false">Others (3)</a>
1022
+ </div>
1023
+ </header>
1024
+
1025
+ <div class="" data-simplebar style="height: 325px;">
1026
+ <div class="tab-content" id="myTabContent">
1027
+
1028
+ <div class="tab-pane fade show active" id="all" role="tabpanel" aria-labelledby="all-tabs">
1029
+
1030
+ <div class="media media-sm bg-warning-10 p-4 mb-0">
1031
+ <div class="media-sm-wrapper">
1032
+ <a href="user-profile.html">
1033
+ <img src="images/user/user-sm-02.jpg" alt="User Image">
1034
+ </a>
1035
+ </div>
1036
+ <div class="media-body">
1037
+ <a href="user-profile.html">
1038
+ <span class="title mb-0">John Doe</span>
1039
+ <span class="discribe">Extremity sweetness difficult behaviour he of. On disposal of as landlord horrible. Afraid at highly months do things on at.</span>
1040
+ <span class="time">
1041
+ <time>Just now</time>...
1042
+ </span>
1043
+ </a>
1044
+ </div>
1045
+ </div>
1046
+
1047
+ <div class="media media-sm p-4 bg-light mb-0">
1048
+ <div class="media-sm-wrapper bg-primary">
1049
+ <a href="user-profile.html">
1050
+ <i class="mdi mdi-calendar-check-outline"></i>
1051
+ </a>
1052
+ </div>
1053
+ <div class="media-body">
1054
+ <a href="user-profile.html">
1055
+ <span class="title mb-0">New event added</span>
1056
+ <span class="discribe">1/3/2014 (1pm - 2pm)</span>
1057
+ <span class="time">
1058
+ <time>10 min ago...</time>...
1059
+ </span>
1060
+ </a>
1061
+ </div>
1062
+ </div>
1063
+
1064
+ <div class="media media-sm p-4 mb-0">
1065
+ <div class="media-sm-wrapper">
1066
+ <a href="user-profile.html">
1067
+ <img src="images/user/user-sm-03.jpg" alt="User Image">
1068
+ </a>
1069
+ </div>
1070
+ <div class="media-body">
1071
+ <a href="user-profile.html">
1072
+ <span class="title mb-0">Sagge Hudson</span>
1073
+ <span class="discribe">On disposal of as landlord Afraid at highly months do things on at.</span>
1074
+ <span class="time">
1075
+ <time>1 hrs ago</time>...
1076
+ </span>
1077
+ </a>
1078
+ </div>
1079
+ </div>
1080
+
1081
+ <div class="media media-sm p-4 mb-0">
1082
+ <div class="media-sm-wrapper bg-info-dark">
1083
+ <a href="user-profile.html">
1084
+ <i class="mdi mdi-account-multiple-check"></i>
1085
+ </a>
1086
+ </div>
1087
+ <div class="media-body">
1088
+ <a href="user-profile.html">
1089
+ <span class="title mb-0">Add request</span>
1090
+ <span class="discribe">Add Dany Jones as your contact.</span>
1091
+ <div class="buttons">
1092
+ <a href="#" class="btn btn-sm btn-success shadow-none text-white">accept</a>
1093
+ <a href="#" class="btn btn-sm shadow-none">delete</a>
1094
+ </div>
1095
+ <span class="time">
1096
+ <time>6 hrs ago</time>...
1097
+ </span>
1098
+ </a>
1099
+ </div>
1100
+ </div>
1101
+
1102
+ <div class="media media-sm p-4 mb-0">
1103
+ <div class="media-sm-wrapper bg-info">
1104
+ <a href="user-profile.html">
1105
+ <i class="mdi mdi-playlist-check"></i>
1106
+ </a>
1107
+ </div>
1108
+ <div class="media-body">
1109
+ <a href="user-profile.html">
1110
+ <span class="title mb-0">Task complete</span>
1111
+ <span class="discribe">Afraid at highly months do things on at.</span>
1112
+ <span class="time">
1113
+ <time>1 hrs ago</time>...
1114
+ </span>
1115
+ </a>
1116
+ </div>
1117
+ </div>
1118
+
1119
+ </div>
1120
+
1121
+ <div class="tab-pane fade" id="message" role="tabpanel" aria-labelledby="message-tab">
1122
+
1123
+ <div class="media media-sm p-4 mb-0">
1124
+ <div class="media-sm-wrapper">
1125
+ <a href="user-profile.html">
1126
+ <img src="images/user/user-sm-01.jpg" alt="User Image">
1127
+ </a>
1128
+ </div>
1129
+ <div class="media-body">
1130
+ <a href="user-profile.html">
1131
+ <span class="title mb-0">Selena Wagner</span>
1132
+ <span class="discribe">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</span>
1133
+ <span class="time">
1134
+ <time>15 min ago</time>...
1135
+ </span>
1136
+ </a>
1137
+ </div>
1138
+ </div>
1139
+
1140
+ <div class="media media-sm p-4 mb-0">
1141
+ <div class="media-sm-wrapper">
1142
+ <a href="user-profile.html">
1143
+ <img src="images/user/user-sm-03.jpg" alt="User Image">
1144
+ </a>
1145
+ </div>
1146
+ <div class="media-body">
1147
+ <a href="user-profile.html">
1148
+ <span class="title mb-0">Sagge Hudson</span>
1149
+ <span class="discribe">On disposal of as landlord Afraid at highly months do things on at.</span>
1150
+ <span class="time">
1151
+ <time>1 hrs ago</time>...
1152
+ </span>
1153
+ </a>
1154
+ </div>
1155
+ </div>
1156
+
1157
+ <div class="media media-sm bg-warning-10 p-4 mb-0">
1158
+ <div class="media-sm-wrapper">
1159
+ <a href="user-profile.html">
1160
+ <img src="images/user/user-sm-02.jpg" alt="User Image">
1161
+ </a>
1162
+ </div>
1163
+ <div class="media-body">
1164
+ <a href="user-profile.html">
1165
+ <span class="title mb-0">John Doe</span>
1166
+ <span class="discribe">Extremity sweetness difficult behaviour he of. On disposal of as landlord horrible. Afraid
1167
+ at highly months do things on at.</span>
1168
+ <span class="time">
1169
+ <time>Just now</time>...
1170
+ </span>
1171
+ </a>
1172
+ </div>
1173
+ </div>
1174
+
1175
+ <div class="media media-sm p-4 mb-0">
1176
+ <div class="media-sm-wrapper">
1177
+ <a href="user-profile.html">
1178
+ <img src="images/user/user-sm-04.jpg" alt="User Image">
1179
+ </a>
1180
+ </div>
1181
+ <div class="media-body">
1182
+ <a href="user-profile.html">
1183
+ <span class="title mb-0">Albrecht Straub</span>
1184
+ <span class="discribe"> Beatae quia natus assumenda laboriosam, nisi perferendis aliquid consectetur expedita non tenetur.</span>
1185
+ <span class="time">
1186
+ <time>Just now</time>...
1187
+ </span>
1188
+ </a>
1189
+ </div>
1190
+ </div>
1191
+
1192
+ </div>
1193
+ <div class="tab-pane fade" id="other" role="tabpanel" aria-labelledby="contact-tab">
1194
+
1195
+ <div class="media media-sm p-4 bg-light mb-0">
1196
+ <div class="media-sm-wrapper bg-primary">
1197
+ <a href="user-profile.html">
1198
+ <i class="mdi mdi-calendar-check-outline"></i>
1199
+ </a>
1200
+ </div>
1201
+ <div class="media-body">
1202
+ <a href="user-profile.html">
1203
+ <span class="title mb-0">New event added</span>
1204
+ <span class="discribe">1/3/2014 (1pm - 2pm)</span>
1205
+ <span class="time">
1206
+ <time>10 min ago...</time>...
1207
+ </span>
1208
+ </a>
1209
+ </div>
1210
+ </div>
1211
+
1212
+ <div class="media media-sm p-4 mb-0">
1213
+ <div class="media-sm-wrapper bg-info-dark">
1214
+ <a href="user-profile.html">
1215
+ <i class="mdi mdi-account-multiple-check"></i>
1216
+ </a>
1217
+ </div>
1218
+ <div class="media-body">
1219
+ <a href="user-profile.html">
1220
+ <span class="title mb-0">Add request</span>
1221
+ <span class="discribe">Add Dany Jones as your contact.</span>
1222
+ <div class="buttons">
1223
+ <a href="#" class="btn btn-sm btn-success shadow-none text-white">accept</a>
1224
+ <a href="#" class="btn btn-sm shadow-none">delete</a>
1225
+ </div>
1226
+ <span class="time">
1227
+ <time>6 hrs ago</time>...
1228
+ </span>
1229
+ </a>
1230
+ </div>
1231
+ </div>
1232
+
1233
+ <div class="media media-sm p-4 mb-0">
1234
+ <div class="media-sm-wrapper bg-info">
1235
+ <a href="user-profile.html">
1236
+ <i class="mdi mdi-playlist-check"></i>
1237
+ </a>
1238
+ </div>
1239
+ <div class="media-body">
1240
+ <a href="user-profile.html">
1241
+ <span class="title mb-0">Task complete</span>
1242
+ <span class="discribe">Afraid at highly months do things on at.</span>
1243
+ <span class="time">
1244
+ <time>1 hrs ago</time>...
1245
+ </span>
1246
+ </a>
1247
+ </div>
1248
+ </div>
1249
+
1250
+ </div>
1251
+ </div>
1252
+ </div>
1253
+
1254
+ <footer class="border-top dropdown-notify-footer">
1255
+ <div class="d-flex justify-content-between align-items-center py-2 px-4">
1256
+ <span>Last updated 3 min ago</span>
1257
+ <a id="refress-button" href="javascript:" class="btn mdi mdi-cached btn-refress"></a>
1258
+ </div>
1259
+ </footer>
1260
+ </div>
1261
+ </li>
1262
+ <!-- User Account -->
1263
+ <li class="dropdown user-menu">
1264
+ <button class="dropdown-toggle nav-link" data-toggle="dropdown">
1265
+ <img src="images/user/user-xs-01.jpg" class="user-image rounded-circle" alt="User Image" />
1266
+ <span class="d-none d-lg-inline-block">John Doe</span>
1267
+ </button>
1268
+ <ul class="dropdown-menu dropdown-menu-right">
1269
+ <li>
1270
+ <a class="dropdown-link-item" href="user-profile.html">
1271
+ <i class="mdi mdi-account-outline"></i>
1272
+ <span class="nav-text">My Profile</span>
1273
+ </a>
1274
+ </li>
1275
+ <li>
1276
+ <a class="dropdown-link-item" href="email-inbox.html">
1277
+ <i class="mdi mdi-email-outline"></i>
1278
+ <span class="nav-text">Message</span>
1279
+ <span class="badge badge-pill badge-primary">24</span>
1280
+ </a>
1281
+ </li>
1282
+ <li>
1283
+ <a class="dropdown-link-item" href="user-activities.html">
1284
+ <i class="mdi mdi-diamond-stone"></i>
1285
+ <span class="nav-text">Activitise</span></a>
1286
+ </li>
1287
+ <li>
1288
+ <a class="dropdown-link-item" href="user-account-settings.html">
1289
+ <i class="mdi mdi-settings"></i>
1290
+ <span class="nav-text">Account Setting</span>
1291
+ </a>
1292
+ </li>
1293
+
1294
+ <li class="dropdown-footer">
1295
+ <a class="dropdown-link-item" href="sign-in.html"> <i class="mdi mdi-logout"></i> Log Out </a>
1296
+ </li>
1297
+ </ul>
1298
+ </li>
1299
+ </ul>
1300
+ </div>
1301
+ </nav>
1302
+
1303
+
1304
+ </header>
1305
+
1306
+ <!-- ====================================
1307
+ ——— CONTENT WRAPPER
1308
+ ===================================== -->
1309
+ <div class="content-wrapper">
1310
+ <div class="content"><!-- For Components documentaion -->
1311
+ <div class="card card-default">
1312
+ <div class="px-6 py-4">
1313
+ <p>Mono provides a variety of <span class="text-secondary text-capitalize"> Loading button </span> components with a
1314
+ little customization that suits its design standards. For more information, please see the official <a class="font-weight-bold" href="https://lab.hakim.se/ladda/" target="_blank"> ladda Documentaion. </a></p>
1315
+ </div>
1316
+ </div>
1317
+
1318
+ <!-- Button Loading -->
1319
+ <div class="card card-default">
1320
+ <div class="card-header">
1321
+ <h2>Button Loading</h2>
1322
+
1323
+ <a class="btn mdi mdi-code-tags" data-toggle="collapse" href="#collapse-btn-loading-1" role="button"
1324
+ aria-expanded="false" aria-controls="collapse-btn-loading-1"> </a>
1325
+
1326
+
1327
+ </div>
1328
+ <div class="card-body">
1329
+ <div class="collapse" id="collapse-btn-loading-1">
1330
+ <pre class="language-html mb-4">
1331
+ <code >
1332
+ &lt;!-- Expand Left -->
1333
+ &lt;button class="ladda-button btn btn-primary btn-ladda" data-style="expand-left"&gt;
1334
+ &lt;span class="ladda-label"&gt;Submit!&lt;/span&gt;
1335
+ &lt;span class="ladda-spinner"&gt;&lt;/span&gt;
1336
+ &lt;/button&gt;
1337
+
1338
+ &lt;!-- Expand Right -->
1339
+ &lt;button class="ladda-button btn btn-primary btn-ladda" data-style="expand-right"&gt;
1340
+ &lt;span class="ladda-label"&gt;Submit!&lt;/span&gt;
1341
+ &lt;span class="ladda-spinner"&gt;&lt;/span&gt;
1342
+ &lt;/button&gt;
1343
+
1344
+ &lt;!-- Expand Up -->
1345
+ &lt;button class="ladda-button btn btn-primary btn-ladda" data-style="expand-up"&gt;
1346
+ &lt;span class="ladda-label"&gt;Submit!&lt;/span&gt;
1347
+ &lt;span class="ladda-spinner"&gt;&lt;/span&gt;
1348
+ &lt;/button&gt;
1349
+
1350
+ &lt;!-- Expand Down -->
1351
+ &lt;button class="ladda-button btn btn-primary btn-ladda" data-style="expand-down"&gt;
1352
+ &lt;span class="ladda-label"&gt;Submit!&lt;/span&gt;
1353
+ &lt;span class="ladda-spinner"&gt;&lt;/span&gt;
1354
+ &lt;/button&gt;
1355
+
1356
+ &lt;!-- Contract -->
1357
+ &lt;button class="ladda-button btn btn-primary btn-ladda" data-style="contract"&gt;
1358
+ &lt;span class="ladda-label"&gt;Submit!&lt;/span&gt;
1359
+ &lt;span class="ladda-spinner"&gt;&lt;/span&gt;
1360
+ &lt;/button&gt;
1361
+
1362
+ &lt;!-- Contract Overlay -->
1363
+ &lt;button class="ladda-button btn btn-primary btn-ladda" data-style="contract-overlay"&gt;
1364
+ &lt;span class="ladda-label"&gt;Submit!&lt;/span&gt;
1365
+ &lt;span class="ladda-spinner"&gt;&lt;/span&gt;
1366
+ &lt;/button&gt;
1367
+
1368
+ &lt;!-- Zoom In -->
1369
+ &lt;button class="ladda-button btn btn-primary btn-ladda" data-style="zoom-in"&gt;
1370
+ &lt;span class="ladda-label"&gt;Submit!&lt;/span&gt;
1371
+ &lt;span class="ladda-spinner"&gt;&lt;/span&gt;
1372
+ &lt;/button&gt;
1373
+
1374
+ &lt;!-- Zoom Out -->
1375
+ &lt;button class="ladda-button btn btn-primary btn-ladda" data-style="zoom-out"&gt;
1376
+ &lt;span class="ladda-label"&gt;Submit!&lt;/span&gt;
1377
+ &lt;span class="ladda-spinner"&gt;&lt;/span&gt;
1378
+ &lt;/button&gt;
1379
+
1380
+ &lt;!-- Slide Left -->
1381
+ &lt;button class="ladda-button btn btn-primary btn-ladda" data-style="slide-left"&gt;
1382
+ &lt;span class="ladda-label"&gt;Submit!&lt;/span&gt;
1383
+ &lt;span class="ladda-spinner"&gt;&lt;/span&gt;
1384
+ &lt;/button&gt;
1385
+
1386
+ &lt;!-- Slide Right -->
1387
+ &lt;button class="ladda-button btn btn-primary btn-ladda" data-style="slide-right"&gt;
1388
+ &lt;span class="ladda-label"&gt;Submit!&lt;/span&gt;
1389
+ &lt;span class="ladda-spinner"&gt;&lt;/span&gt;
1390
+ &lt;/button&gt;
1391
+
1392
+ &lt;!-- Slide Up -->
1393
+ &lt;button class="ladda-button btn btn-primary btn-ladda" data-style="slide-up"&gt;
1394
+ &lt;span class="ladda-label"&gt;Submit!&lt;/span&gt;
1395
+ &lt;span class="ladda-spinner"&gt;&lt;/span&gt;
1396
+ &lt;/button&gt;
1397
+
1398
+ &lt;!-- Slide Down -->
1399
+ &lt;button class="ladda-button btn btn-primary btn-ladda" data-style="slide-down"&gt;
1400
+ &lt;span class="ladda-label"&gt;Submit!&lt;/span&gt;
1401
+ &lt;span class="ladda-spinner"&gt;&lt;/span&gt;
1402
+ &lt;/button&gt;
1403
+ </code>
1404
+ </pre>
1405
+ </div>
1406
+
1407
+ <div class="row">
1408
+
1409
+ <div class="col-lg-3 col-md-6">
1410
+ <div class="card border-0 mb-6">
1411
+ <span class="h5 mb-4 text-dark">Expand Left</span>
1412
+ <div class="card-body p-0">
1413
+ <button class="ladda-button btn btn-primary btn-ladda" data-style="expand-left">
1414
+ <span class="ladda-label">Submit!</span>
1415
+ <span class="ladda-spinner"></span>
1416
+ </button>
1417
+ </div>
1418
+ </div>
1419
+ </div>
1420
+
1421
+ <div class="col-lg-3 col-md-6">
1422
+ <div class="card border-0 mb-6">
1423
+ <span class="h5 mb-4 text-dark">Expand Right</span>
1424
+ <div class="card-body p-0">
1425
+ <button class="ladda-button btn btn-primary btn-ladda" data-style="expand-right">
1426
+ <span class="ladda-label">Submit!</span>
1427
+ <span class="ladda-spinner"></span>
1428
+ </button>
1429
+ </div>
1430
+ </div>
1431
+ </div>
1432
+
1433
+ <div class="col-lg-3 col-md-6">
1434
+ <div class="card border-0 mb-6">
1435
+ <span class="h5 mb-4 text-dark">Expand Up</span>
1436
+ <div class="card-body p-0">
1437
+ <button class="ladda-button btn btn-primary btn-ladda" data-style="expand-up">
1438
+ <span class="ladda-label">Submit!</span>
1439
+ <span class="ladda-spinner"></span>
1440
+ </button>
1441
+ </div>
1442
+ </div>
1443
+ </div>
1444
+
1445
+ <div class="col-lg-3 col-md-6">
1446
+ <div class="card border-0 mb-6">
1447
+ <span class="h5 mb-4 text-dark">Expand Down</span>
1448
+ <div class="card-body p-0">
1449
+ <button class="ladda-button btn btn-primary btn-ladda" data-style="expand-down">
1450
+ <span class="ladda-label">Submit!</span>
1451
+ <span class="ladda-spinner"></span>
1452
+ </button>
1453
+ </div>
1454
+ </div>
1455
+ </div>
1456
+
1457
+ <div class="col-lg-3 col-md-6">
1458
+ <div class="card border-0 mb-6">
1459
+ <span class="h5 mb-4 text-dark">Contract</span>
1460
+ <div class="card-body p-0">
1461
+ <button class="ladda-button btn btn-secondary btn-ladda" data-style="contract">
1462
+ <span class="ladda-label">Submit!</span>
1463
+ <span class="ladda-spinner"></span>
1464
+ </button>
1465
+ </div>
1466
+ </div>
1467
+ </div>
1468
+
1469
+ <div class="col-lg-3 col-md-6">
1470
+ <div class="card border-0 mb-6">
1471
+ <span class="h5 mb-4 text-dark">Contract Overlay</span>
1472
+ <div class="card-body p-0">
1473
+ <button class="ladda-button btn btn-secondary btn-ladda" data-style="contract-overlay">
1474
+ <span class="ladda-label">Submit!</span>
1475
+ <span class="ladda-spinner"></span>
1476
+ </button>
1477
+ </div>
1478
+ </div>
1479
+ </div>
1480
+
1481
+ <div class="col-lg-3 col-md-6">
1482
+ <div class="card border-0 mb-6">
1483
+ <span class="h5 mb-4 text-dark">Zoom In</span>
1484
+ <div class="card-body p-0">
1485
+ <button class="ladda-button btn btn-secondary btn-ladda" data-style="zoom-in">
1486
+ <span class="ladda-label">Submit!</span>
1487
+ <span class="ladda-spinner"></span>
1488
+ </button>
1489
+ </div>
1490
+ </div>
1491
+ </div>
1492
+
1493
+ <div class="col-lg-3 col-md-6">
1494
+ <div class="card border-0 mb-6">
1495
+ <span class="h5 mb-4 text-dark">Zoom Out</span>
1496
+ <div class="card-body p-0">
1497
+ <button class="ladda-button btn btn-secondary btn-ladda" data-style="zoom-in">
1498
+ <span class="ladda-label">Submit!</span>
1499
+ <span class="ladda-spinner"></span>
1500
+ </button>
1501
+ </div>
1502
+ </div>
1503
+ </div>
1504
+
1505
+ <div class="col-lg-3 col-md-6">
1506
+ <div class="card border-0 mb-6">
1507
+ <span class="h5 mb-4 text-dark">Slide Left</span>
1508
+ <div class="card-body p-0">
1509
+ <button class="ladda-button btn btn-info btn-ladda" data-style="slide-left">
1510
+ <span class="ladda-label">Submit!</span>
1511
+ <span class="ladda-spinner"></span>
1512
+ </button>
1513
+ </div>
1514
+ </div>
1515
+ </div>
1516
+
1517
+ <div class="col-lg-3 col-md-6">
1518
+ <div class="card border-0 mb-6">
1519
+ <span class="h5 mb-4 text-dark">Slide Right</span>
1520
+ <div class="card-body p-0">
1521
+ <button class="ladda-button btn btn-info btn-ladda" data-style="slide-right">
1522
+ <span class="ladda-label">Submit!</span>
1523
+ <span class="ladda-spinner"></span>
1524
+ </button>
1525
+ </div>
1526
+ </div>
1527
+ </div>
1528
+
1529
+ <div class="col-lg-3 col-md-6">
1530
+ <div class="card border-0 mb-6">
1531
+ <span class="h5 mb-4 text-dark">Slide Up</span>
1532
+ <div class="card-body p-0">
1533
+ <button class="ladda-button btn btn-info btn-ladda" data-style="slide-up">
1534
+ <span class="ladda-label">Submit!</span>
1535
+ <span class="ladda-spinner"></span>
1536
+ </button>
1537
+ </div>
1538
+ </div>
1539
+ </div>
1540
+
1541
+ <div class="col-lg-3 col-md-6">
1542
+ <div class="card border-0 mb-6">
1543
+ <span class="h5 mb-4 text-dark">Slide Down</span>
1544
+ <div class="card-body p-0">
1545
+ <button class="ladda-button btn btn-warning btn-ladda" data-style="slide-down">
1546
+ <span class="ladda-label">Submit!</span>
1547
+ <span class="ladda-spinner"></span>
1548
+ </button>
1549
+ </div>
1550
+ </div>
1551
+ </div>
1552
+
1553
+ </div>
1554
+
1555
+ </div>
1556
+ </div>
1557
+
1558
+
1559
+ </div>
1560
+
1561
+ </div>
1562
+
1563
+ <!-- Footer -->
1564
+ <footer class="footer mt-auto">
1565
+ <div class="copyright bg-white">
1566
+ <p>
1567
+ &copy; <span id="copy-year"></span> Copyright Mono Dashboard Bootstrap Template by <a class="text-primary" href="http://www.iamabdus.com/" target="_blank" >Abdus</a>.
1568
+ </p>
1569
+ </div>
1570
+ <script>
1571
+ var d = new Date();
1572
+ var year = d.getFullYear();
1573
+ document.getElementById("copy-year").innerHTML = year;
1574
+ </script>
1575
+ </footer>
1576
+
1577
+ </div>
1578
+ </div>
1579
+
1580
+ <!-- Card Offcanvas -->
1581
+ <div class="card card-offcanvas" id="contact-off" >
1582
+ <div class="card-header">
1583
+ <h2>Contacts</h2>
1584
+ <a href="#" class="btn btn-primary btn-pill px-4">Add New</a>
1585
+ </div>
1586
+ <div class="card-body">
1587
+
1588
+ <div class="mb-4">
1589
+ <input type="text" class="form-control form-control-lg form-control-secondary rounded-0" placeholder="Search contacts...">
1590
+ </div>
1591
+
1592
+ <div class="media media-sm">
1593
+ <div class="media-sm-wrapper">
1594
+ <a href="user-profile.html">
1595
+ <img src="images/user/user-sm-01.jpg" alt="User Image">
1596
+ <span class="active bg-primary"></span>
1597
+ </a>
1598
+ </div>
1599
+ <div class="media-body">
1600
+ <a href="user-profile.html">
1601
+ <span class="title">Selena Wagner</span>
1602
+ <span class="discribe">Designer</span>
1603
+ </a>
1604
+ </div>
1605
+ </div>
1606
+
1607
+ <div class="media media-sm">
1608
+ <div class="media-sm-wrapper">
1609
+ <a href="user-profile.html">
1610
+ <img src="images/user/user-sm-02.jpg" alt="User Image">
1611
+ <span class="active bg-primary"></span>
1612
+ </a>
1613
+ </div>
1614
+ <div class="media-body">
1615
+ <a href="user-profile.html">
1616
+ <span class="title">Walter Reuter</span>
1617
+ <span>Developer</span>
1618
+ </a>
1619
+ </div>
1620
+ </div>
1621
+
1622
+ <div class="media media-sm">
1623
+ <div class="media-sm-wrapper">
1624
+ <a href="user-profile.html">
1625
+ <img src="images/user/user-sm-03.jpg" alt="User Image">
1626
+ </a>
1627
+ </div>
1628
+ <div class="media-body">
1629
+ <a href="user-profile.html">
1630
+ <span class="title">Larissa Gebhardt</span>
1631
+ <span>Cyber Punk</span>
1632
+ </a>
1633
+ </div>
1634
+ </div>
1635
+
1636
+ <div class="media media-sm">
1637
+ <div class="media-sm-wrapper">
1638
+ <a href="user-profile.html">
1639
+ <img src="images/user/user-sm-04.jpg" alt="User Image">
1640
+ </a>
1641
+
1642
+ </div>
1643
+ <div class="media-body">
1644
+ <a href="user-profile.html">
1645
+ <span class="title">Albrecht Straub</span>
1646
+ <span>Photographer</span>
1647
+ </a>
1648
+ </div>
1649
+ </div>
1650
+
1651
+ <div class="media media-sm">
1652
+ <div class="media-sm-wrapper">
1653
+ <a href="user-profile.html">
1654
+ <img src="images/user/user-sm-05.jpg" alt="User Image">
1655
+ <span class="active bg-danger"></span>
1656
+ </a>
1657
+ </div>
1658
+ <div class="media-body">
1659
+ <a href="user-profile.html">
1660
+ <span class="title">Leopold Ebert</span>
1661
+ <span>Fashion Designer</span>
1662
+ </a>
1663
+ </div>
1664
+ </div>
1665
+
1666
+ <div class="media media-sm">
1667
+ <div class="media-sm-wrapper">
1668
+ <a href="user-profile.html">
1669
+ <img src="images/user/user-sm-06.jpg" alt="User Image">
1670
+ <span class="active bg-primary"></span>
1671
+ </a>
1672
+ </div>
1673
+ <div class="media-body">
1674
+ <a href="user-profile.html">
1675
+ <span class="title">Selena Wagner</span>
1676
+ <span>Photographer</span>
1677
+ </a>
1678
+ </div>
1679
+ </div>
1680
+
1681
+ </div>
1682
+ </div>
1683
+
1684
+
1685
+
1686
+
1687
+ <script src="plugins/jquery/jquery.min.js"></script>
1688
+ <script src="plugins/bootstrap/js/bootstrap.bundle.min.js"></script>
1689
+ <script src="plugins/simplebar/simplebar.min.js"></script>
1690
+ <script src="https://unpkg.com/hotkeys-js/dist/hotkeys.min.js"></script>
1691
+
1692
+
1693
+
1694
+ <script src="plugins/prism/prism.js"></script>
1695
+
1696
+
1697
+
1698
+ <script src="plugins/ladda/spin.min.js"></script>
1699
+ <script src="plugins/ladda/ladda.min.js"></script>
1700
+
1701
+
1702
+ <script src="js/mono.js"></script>
1703
+ <script src="js/chart.js"></script>
1704
+ <script src="js/map.js"></script>
1705
+ <script src="js/custom.js"></script>
1706
+
1707
+
1708
+
1709
+
1710
+ <!-- -->
1711
+
1712
+
1713
+ </body>
1714
+ </html>
button-social.html ADDED
@@ -0,0 +1,2259 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+
3
+ <!--
4
+ // WEBSITE: https://themefisher.com
5
+ // TWITTER: https://twitter.com/themefisher
6
+ // FACEBOOK: https://www.facebook.com/themefisher
7
+ // GITHUB: https://github.com/themefisher/
8
+ -->
9
+
10
+ <html lang="en" dir="ltr">
11
+ <head>
12
+ <meta charset="utf-8" />
13
+ <meta http-equiv="X-UA-Compatible" content="IE=edge" />
14
+ <meta name="viewport" content="width=device-width, initial-scale=1" />
15
+
16
+ <title>Mono - Responsive Admin & Dashboard Template</title>
17
+
18
+ <!-- GOOGLE FONTS -->
19
+ <link href="https://fonts.googleapis.com/css?family=Karla:400,700|Roboto" rel="stylesheet">
20
+ <link href="plugins/material/css/materialdesignicons.min.css" rel="stylesheet" />
21
+ <link href="plugins/simplebar/simplebar.css" rel="stylesheet" />
22
+
23
+ <!-- PLUGINS CSS STYLE -->
24
+ <link href="plugins/nprogress/nprogress.css" rel="stylesheet" />
25
+
26
+
27
+ <link href="plugins/prism/prism.css" rel="stylesheet" />
28
+
29
+
30
+ <!-- MONO CSS -->
31
+ <link id="main-css-href" rel="stylesheet" href="css/style.css" />
32
+
33
+
34
+
35
+
36
+ <!-- FAVICON -->
37
+ <link href="images/favicon.png" rel="shortcut icon" />
38
+
39
+ <!--
40
+ HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries
41
+ -->
42
+ <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
43
+ <!--[if lt IE 9]>
44
+ <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
45
+ <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
46
+ <![endif]-->
47
+ <script src="plugins/nprogress/nprogress.js"></script>
48
+ </head>
49
+
50
+
51
+ <body class="navbar-fixed sidebar-fixed" id="body">
52
+ <script>
53
+ NProgress.configure({ showSpinner: false });
54
+ NProgress.start();
55
+ </script>
56
+
57
+
58
+
59
+ <!-- ====================================
60
+ ——— WRAPPER
61
+ ===================================== -->
62
+ <div class="wrapper">
63
+
64
+
65
+ <!-- ====================================
66
+ ——— LEFT SIDEBAR WITH OUT FOOTER
67
+ ===================================== -->
68
+ <aside class="left-sidebar sidebar-dark" id="left-sidebar">
69
+ <div id="sidebar" class="sidebar sidebar-with-footer">
70
+ <!-- Aplication Brand -->
71
+ <div class="app-brand">
72
+ <a href="/index.html">
73
+ <img src="images/logo.png" alt="Mono">
74
+ <span class="brand-name">MONO</span>
75
+ </a>
76
+ </div>
77
+ <!-- begin sidebar scrollbar -->
78
+ <div class="sidebar-left" data-simplebar style="height: 100%;">
79
+ <!-- sidebar menu -->
80
+ <ul class="nav sidebar-inner" id="sidebar-menu">
81
+
82
+
83
+
84
+ <li
85
+ >
86
+ <a class="sidenav-item-link" href="index.html">
87
+ <i class="mdi mdi-briefcase-account-outline"></i>
88
+ <span class="nav-text">Business Dashboard</span>
89
+ </a>
90
+ </li>
91
+
92
+
93
+
94
+
95
+
96
+ <li
97
+ >
98
+ <a class="sidenav-item-link" href="analytics.html">
99
+ <i class="mdi mdi-chart-line"></i>
100
+ <span class="nav-text">Analytics Dashboard</span>
101
+ </a>
102
+ </li>
103
+
104
+
105
+
106
+
107
+
108
+ <li class="section-title">
109
+ Apps
110
+ </li>
111
+
112
+
113
+
114
+
115
+
116
+ <li
117
+ >
118
+ <a class="sidenav-item-link" href="chat.html">
119
+ <i class="mdi mdi-wechat"></i>
120
+ <span class="nav-text">Chat</span>
121
+ </a>
122
+ </li>
123
+
124
+
125
+
126
+
127
+
128
+ <li
129
+ >
130
+ <a class="sidenav-item-link" href="contacts.html">
131
+ <i class="mdi mdi-phone"></i>
132
+ <span class="nav-text">Contacts</span>
133
+ </a>
134
+ </li>
135
+
136
+
137
+
138
+
139
+
140
+ <li
141
+ >
142
+ <a class="sidenav-item-link" href="team.html">
143
+ <i class="mdi mdi-account-group"></i>
144
+ <span class="nav-text">Team</span>
145
+ </a>
146
+ </li>
147
+
148
+
149
+
150
+
151
+
152
+ <li
153
+ >
154
+ <a class="sidenav-item-link" href="calendar.html">
155
+ <i class="mdi mdi-calendar-check"></i>
156
+ <span class="nav-text">Calendar</span>
157
+ </a>
158
+ </li>
159
+
160
+
161
+
162
+
163
+
164
+ <li class="has-sub" >
165
+ <a class="sidenav-item-link" href="javascript:void(0)" data-toggle="collapse" data-target="#email"
166
+ aria-expanded="false" aria-controls="email">
167
+ <i class="mdi mdi-email"></i>
168
+ <span class="nav-text">email</span> <b class="caret"></b>
169
+ </a>
170
+ <ul class="collapse" id="email"
171
+ data-parent="#sidebar-menu">
172
+ <div class="sub-menu">
173
+
174
+
175
+
176
+ <li >
177
+ <a class="sidenav-item-link" href="email-inbox.html">
178
+ <span class="nav-text">Email Inbox</span>
179
+
180
+ </a>
181
+ </li>
182
+
183
+
184
+
185
+
186
+
187
+
188
+ <li >
189
+ <a class="sidenav-item-link" href="email-details.html">
190
+ <span class="nav-text">Email Details</span>
191
+
192
+ </a>
193
+ </li>
194
+
195
+
196
+
197
+
198
+
199
+
200
+ <li >
201
+ <a class="sidenav-item-link" href="email-compose.html">
202
+ <span class="nav-text">Email Compose</span>
203
+
204
+ </a>
205
+ </li>
206
+
207
+
208
+
209
+
210
+ </div>
211
+ </ul>
212
+ </li>
213
+
214
+
215
+
216
+
217
+
218
+ <li class="section-title">
219
+ UI Elements
220
+ </li>
221
+
222
+
223
+
224
+
225
+
226
+ <li class="has-sub active expand" >
227
+ <a class="sidenav-item-link" href="javascript:void(0)" data-toggle="collapse" data-target="#ui-elements"
228
+ aria-expanded="false" aria-controls="ui-elements">
229
+ <i class="mdi mdi-folder-outline"></i>
230
+ <span class="nav-text">UI Components</span> <b class="caret"></b>
231
+ </a>
232
+ <ul class="collapse show" id="ui-elements"
233
+ data-parent="#sidebar-menu">
234
+ <div class="sub-menu">
235
+
236
+
237
+
238
+ <li >
239
+ <a class="sidenav-item-link" href="alert.html">
240
+ <span class="nav-text">Alert</span>
241
+
242
+ </a>
243
+ </li>
244
+
245
+
246
+
247
+
248
+
249
+
250
+ <li >
251
+ <a class="sidenav-item-link" href="badge.html">
252
+ <span class="nav-text">Badge</span>
253
+
254
+ </a>
255
+ </li>
256
+
257
+
258
+
259
+
260
+
261
+
262
+ <li >
263
+ <a class="sidenav-item-link" href="breadcrumb.html">
264
+ <span class="nav-text">Breadcrumb</span>
265
+
266
+ </a>
267
+ </li>
268
+
269
+
270
+
271
+
272
+
273
+ <li class="has-sub active expand" >
274
+ <a class="sidenav-item-link" href="javascript:void(0)" data-toggle="collapse" data-target="#buttons"
275
+ aria-expanded="false" aria-controls="buttons">
276
+ <span class="nav-text">Buttons</span> <b class="caret"></b>
277
+ </a>
278
+ <ul class="collapse show" id="buttons">
279
+ <div class="sub-menu">
280
+
281
+ <li >
282
+ <a href="button-default.html">Button Default</a>
283
+ </li>
284
+
285
+ <li >
286
+ <a href="button-dropdown.html">Button Dropdown</a>
287
+ </li>
288
+
289
+ <li >
290
+ <a href="button-group.html">Button Group</a>
291
+ </li>
292
+
293
+ <li class="active" >
294
+ <a href="button-social.html">Button Social</a>
295
+ </li>
296
+
297
+ <li >
298
+ <a href="button-loading.html">Button Loading</a>
299
+ </li>
300
+
301
+ </div>
302
+ </ul>
303
+ </li>
304
+
305
+
306
+
307
+
308
+
309
+ <li >
310
+ <a class="sidenav-item-link" href="card.html">
311
+ <span class="nav-text">Card</span>
312
+
313
+ </a>
314
+ </li>
315
+
316
+
317
+
318
+
319
+
320
+
321
+ <li >
322
+ <a class="sidenav-item-link" href="carousel.html">
323
+ <span class="nav-text">Carousel</span>
324
+
325
+ </a>
326
+ </li>
327
+
328
+
329
+
330
+
331
+
332
+
333
+ <li >
334
+ <a class="sidenav-item-link" href="collapse.html">
335
+ <span class="nav-text">Collapse</span>
336
+
337
+ </a>
338
+ </li>
339
+
340
+
341
+
342
+
343
+
344
+
345
+ <li >
346
+ <a class="sidenav-item-link" href="editor.html">
347
+ <span class="nav-text">Editor</span>
348
+
349
+ </a>
350
+ </li>
351
+
352
+
353
+
354
+
355
+
356
+
357
+ <li >
358
+ <a class="sidenav-item-link" href="list-group.html">
359
+ <span class="nav-text">List Group</span>
360
+
361
+ </a>
362
+ </li>
363
+
364
+
365
+
366
+
367
+
368
+
369
+ <li >
370
+ <a class="sidenav-item-link" href="modal.html">
371
+ <span class="nav-text">Modal</span>
372
+
373
+ </a>
374
+ </li>
375
+
376
+
377
+
378
+
379
+
380
+
381
+ <li >
382
+ <a class="sidenav-item-link" href="pagination.html">
383
+ <span class="nav-text">Pagination</span>
384
+
385
+ </a>
386
+ </li>
387
+
388
+
389
+
390
+
391
+
392
+
393
+ <li >
394
+ <a class="sidenav-item-link" href="popover-tooltip.html">
395
+ <span class="nav-text">Popover & Tooltip</span>
396
+
397
+ </a>
398
+ </li>
399
+
400
+
401
+
402
+
403
+
404
+
405
+ <li >
406
+ <a class="sidenav-item-link" href="progress-bar.html">
407
+ <span class="nav-text">Progress Bar</span>
408
+
409
+ </a>
410
+ </li>
411
+
412
+
413
+
414
+
415
+
416
+
417
+ <li >
418
+ <a class="sidenav-item-link" href="spinner.html">
419
+ <span class="nav-text">Spinner</span>
420
+
421
+ </a>
422
+ </li>
423
+
424
+
425
+
426
+
427
+
428
+
429
+ <li >
430
+ <a class="sidenav-item-link" href="switches.html">
431
+ <span class="nav-text">Switches</span>
432
+
433
+ </a>
434
+ </li>
435
+
436
+
437
+
438
+
439
+
440
+ <li class="has-sub" >
441
+ <a class="sidenav-item-link" href="javascript:void(0)" data-toggle="collapse" data-target="#tables"
442
+ aria-expanded="false" aria-controls="tables">
443
+ <span class="nav-text">Tables</span> <b class="caret"></b>
444
+ </a>
445
+ <ul class="collapse" id="tables">
446
+ <div class="sub-menu">
447
+
448
+ <li >
449
+ <a href="bootstarp-tables.html">Bootstrap Tables</a>
450
+ </li>
451
+
452
+ <li >
453
+ <a href="data-tables.html">Data Tables</a>
454
+ </li>
455
+
456
+ </div>
457
+ </ul>
458
+ </li>
459
+
460
+
461
+
462
+
463
+
464
+ <li >
465
+ <a class="sidenav-item-link" href="tab.html">
466
+ <span class="nav-text">Tab</span>
467
+
468
+ </a>
469
+ </li>
470
+
471
+
472
+
473
+
474
+
475
+
476
+ <li >
477
+ <a class="sidenav-item-link" href="toaster.html">
478
+ <span class="nav-text">Toaster</span>
479
+
480
+ </a>
481
+ </li>
482
+
483
+
484
+
485
+
486
+
487
+ <li class="has-sub" >
488
+ <a class="sidenav-item-link" href="javascript:void(0)" data-toggle="collapse" data-target="#icons"
489
+ aria-expanded="false" aria-controls="icons">
490
+ <span class="nav-text">Icons</span> <b class="caret"></b>
491
+ </a>
492
+ <ul class="collapse" id="icons">
493
+ <div class="sub-menu">
494
+
495
+ <li >
496
+ <a href="material-icons.html">Material Icon</a>
497
+ </li>
498
+
499
+ <li >
500
+ <a href="flag-icons.html">Flag Icon</a>
501
+ </li>
502
+
503
+ </div>
504
+ </ul>
505
+ </li>
506
+
507
+
508
+
509
+
510
+ <li class="has-sub" >
511
+ <a class="sidenav-item-link" href="javascript:void(0)" data-toggle="collapse" data-target="#forms"
512
+ aria-expanded="false" aria-controls="forms">
513
+ <span class="nav-text">Forms</span> <b class="caret"></b>
514
+ </a>
515
+ <ul class="collapse" id="forms">
516
+ <div class="sub-menu">
517
+
518
+ <li >
519
+ <a href="basic-input.html">Basic Input</a>
520
+ </li>
521
+
522
+ <li >
523
+ <a href="input-group.html">Input Group</a>
524
+ </li>
525
+
526
+ <li >
527
+ <a href="checkbox-radio.html">Checkbox & Radio</a>
528
+ </li>
529
+
530
+ <li >
531
+ <a href="form-validation.html">Form Validation</a>
532
+ </li>
533
+
534
+ <li >
535
+ <a href="form-advance.html">Form Advance</a>
536
+ </li>
537
+
538
+ </div>
539
+ </ul>
540
+ </li>
541
+
542
+
543
+
544
+
545
+ <li class="has-sub" >
546
+ <a class="sidenav-item-link" href="javascript:void(0)" data-toggle="collapse" data-target="#maps"
547
+ aria-expanded="false" aria-controls="maps">
548
+ <span class="nav-text">Maps</span> <b class="caret"></b>
549
+ </a>
550
+ <ul class="collapse" id="maps">
551
+ <div class="sub-menu">
552
+
553
+ <li >
554
+ <a href="google-maps.html">Google Map</a>
555
+ </li>
556
+
557
+ <li >
558
+ <a href="vector-maps.html">Vector Map</a>
559
+ </li>
560
+
561
+ </div>
562
+ </ul>
563
+ </li>
564
+
565
+
566
+
567
+
568
+ <li class="has-sub" >
569
+ <a class="sidenav-item-link" href="javascript:void(0)" data-toggle="collapse" data-target="#widgets"
570
+ aria-expanded="false" aria-controls="widgets">
571
+ <span class="nav-text">Widgets</span> <b class="caret"></b>
572
+ </a>
573
+ <ul class="collapse" id="widgets">
574
+ <div class="sub-menu">
575
+
576
+ <li >
577
+ <a href="widgets-general.html">General Widget</a>
578
+ </li>
579
+
580
+ <li >
581
+ <a href="widgets-chart.html">Chart Widget</a>
582
+ </li>
583
+
584
+ </div>
585
+ </ul>
586
+ </li>
587
+
588
+
589
+
590
+ </div>
591
+ </ul>
592
+ </li>
593
+
594
+
595
+
596
+
597
+
598
+ <li class="has-sub" >
599
+ <a class="sidenav-item-link" href="javascript:void(0)" data-toggle="collapse" data-target="#charts"
600
+ aria-expanded="false" aria-controls="charts">
601
+ <i class="mdi mdi-chart-pie"></i>
602
+ <span class="nav-text">Charts</span> <b class="caret"></b>
603
+ </a>
604
+ <ul class="collapse" id="charts"
605
+ data-parent="#sidebar-menu">
606
+ <div class="sub-menu">
607
+
608
+
609
+
610
+ <li >
611
+ <a class="sidenav-item-link" href="apex-charts.html">
612
+ <span class="nav-text">Apex Charts</span>
613
+
614
+ </a>
615
+ </li>
616
+
617
+
618
+
619
+
620
+ </div>
621
+ </ul>
622
+ </li>
623
+
624
+
625
+
626
+
627
+
628
+ <li class="section-title">
629
+ Pages
630
+ </li>
631
+
632
+
633
+
634
+
635
+
636
+ <li class="has-sub" >
637
+ <a class="sidenav-item-link" href="javascript:void(0)" data-toggle="collapse" data-target="#users"
638
+ aria-expanded="false" aria-controls="users">
639
+ <i class="mdi mdi-image-filter-none"></i>
640
+ <span class="nav-text">User</span> <b class="caret"></b>
641
+ </a>
642
+ <ul class="collapse" id="users"
643
+ data-parent="#sidebar-menu">
644
+ <div class="sub-menu">
645
+
646
+
647
+
648
+ <li >
649
+ <a class="sidenav-item-link" href="user-profile.html">
650
+ <span class="nav-text">User Profile</span>
651
+
652
+ </a>
653
+ </li>
654
+
655
+
656
+
657
+
658
+
659
+
660
+ <li >
661
+ <a class="sidenav-item-link" href="user-activities.html">
662
+ <span class="nav-text">User Activities</span>
663
+
664
+ </a>
665
+ </li>
666
+
667
+
668
+
669
+
670
+
671
+
672
+ <li >
673
+ <a class="sidenav-item-link" href="user-profile-settings.html">
674
+ <span class="nav-text">User Profile Settings</span>
675
+
676
+ </a>
677
+ </li>
678
+
679
+
680
+
681
+
682
+
683
+
684
+ <li >
685
+ <a class="sidenav-item-link" href="user-account-settings.html">
686
+ <span class="nav-text">User Account Settings</span>
687
+
688
+ </a>
689
+ </li>
690
+
691
+
692
+
693
+
694
+
695
+
696
+ <li >
697
+ <a class="sidenav-item-link" href="user-planing-settings.html">
698
+ <span class="nav-text">User Planing Settings</span>
699
+
700
+ </a>
701
+ </li>
702
+
703
+
704
+
705
+
706
+
707
+
708
+ <li >
709
+ <a class="sidenav-item-link" href="user-billing.html">
710
+ <span class="nav-text">User billing</span>
711
+
712
+ </a>
713
+ </li>
714
+
715
+
716
+
717
+
718
+
719
+
720
+ <li >
721
+ <a class="sidenav-item-link" href="user-notify-settings.html">
722
+ <span class="nav-text">User Notify Settings</span>
723
+
724
+ </a>
725
+ </li>
726
+
727
+
728
+
729
+
730
+ </div>
731
+ </ul>
732
+ </li>
733
+
734
+
735
+
736
+
737
+
738
+ <li class="has-sub" >
739
+ <a class="sidenav-item-link" href="javascript:void(0)" data-toggle="collapse" data-target="#authentication"
740
+ aria-expanded="false" aria-controls="authentication">
741
+ <i class="mdi mdi-account"></i>
742
+ <span class="nav-text">Authentication</span> <b class="caret"></b>
743
+ </a>
744
+ <ul class="collapse" id="authentication"
745
+ data-parent="#sidebar-menu">
746
+ <div class="sub-menu">
747
+
748
+
749
+
750
+ <li >
751
+ <a class="sidenav-item-link" href="sign-in.html">
752
+ <span class="nav-text">Sign In</span>
753
+
754
+ </a>
755
+ </li>
756
+
757
+
758
+
759
+
760
+
761
+
762
+ <li >
763
+ <a class="sidenav-item-link" href="sign-up.html">
764
+ <span class="nav-text">Sign Up</span>
765
+
766
+ </a>
767
+ </li>
768
+
769
+
770
+
771
+
772
+
773
+
774
+ <li >
775
+ <a class="sidenav-item-link" href="reset-password.html">
776
+ <span class="nav-text">Reset Password</span>
777
+
778
+ </a>
779
+ </li>
780
+
781
+
782
+
783
+
784
+ </div>
785
+ </ul>
786
+ </li>
787
+
788
+
789
+
790
+
791
+
792
+ <li class="has-sub" >
793
+ <a class="sidenav-item-link" href="javascript:void(0)" data-toggle="collapse" data-target="#other-page"
794
+ aria-expanded="false" aria-controls="other-page">
795
+ <i class="mdi mdi-file-multiple"></i>
796
+ <span class="nav-text">Other pages</span> <b class="caret"></b>
797
+ </a>
798
+ <ul class="collapse" id="other-page"
799
+ data-parent="#sidebar-menu">
800
+ <div class="sub-menu">
801
+
802
+
803
+
804
+ <li >
805
+ <a class="sidenav-item-link" href="invoice.html">
806
+ <span class="nav-text">Invoice</span>
807
+
808
+ </a>
809
+ </li>
810
+
811
+
812
+
813
+
814
+
815
+
816
+ <li >
817
+ <a class="sidenav-item-link" href="404.html">
818
+ <span class="nav-text">404 page</span>
819
+
820
+ </a>
821
+ </li>
822
+
823
+
824
+
825
+
826
+
827
+
828
+ <li >
829
+ <a class="sidenav-item-link" href="page-comingsoon.html">
830
+ <span class="nav-text">Coming Soon</span>
831
+
832
+ </a>
833
+ </li>
834
+
835
+
836
+
837
+
838
+
839
+
840
+ <li >
841
+ <a class="sidenav-item-link" href="page-maintenance.html">
842
+ <span class="nav-text">Maintenance</span>
843
+
844
+ </a>
845
+ </li>
846
+
847
+
848
+
849
+
850
+ </div>
851
+ </ul>
852
+ </li>
853
+
854
+
855
+
856
+
857
+
858
+ <li class="section-title">
859
+ Documentation
860
+ </li>
861
+
862
+
863
+
864
+
865
+
866
+ <li
867
+ >
868
+ <a class="sidenav-item-link" href="getting-started.html">
869
+ <i class="mdi mdi-airplane"></i>
870
+ <span class="nav-text">Getting Started</span>
871
+ </a>
872
+ </li>
873
+
874
+
875
+
876
+
877
+
878
+ <li class="has-sub" >
879
+ <a class="sidenav-item-link" href="javascript:void(0)" data-toggle="collapse" data-target="#customization"
880
+ aria-expanded="false" aria-controls="customization">
881
+ <i class="mdi mdi-square-edit-outline"></i>
882
+ <span class="nav-text">Customization</span> <b class="caret"></b>
883
+ </a>
884
+ <ul class="collapse" id="customization"
885
+ data-parent="#sidebar-menu">
886
+ <div class="sub-menu">
887
+
888
+
889
+
890
+ <li >
891
+ <a class="sidenav-item-link" href="navbar-customization.html">
892
+ <span class="nav-text">Navbar</span>
893
+
894
+ </a>
895
+ </li>
896
+
897
+
898
+
899
+
900
+
901
+
902
+ <li >
903
+ <a class="sidenav-item-link" href="sidebar-customization.html">
904
+ <span class="nav-text">Sidebar</span>
905
+
906
+ </a>
907
+ </li>
908
+
909
+
910
+
911
+
912
+
913
+
914
+ <li >
915
+ <a class="sidenav-item-link" href="styling.html">
916
+ <span class="nav-text">Styling</span>
917
+
918
+ </a>
919
+ </li>
920
+
921
+
922
+
923
+
924
+ </div>
925
+ </ul>
926
+ </li>
927
+
928
+
929
+
930
+ </ul>
931
+
932
+ </div>
933
+
934
+ <div class="sidebar-footer">
935
+ <div class="sidebar-footer-content">
936
+ <ul class="d-flex">
937
+ <li>
938
+ <a href="user-account-settings.html" data-toggle="tooltip" title="Profile settings"><i class="mdi mdi-settings"></i></a></li>
939
+ <li>
940
+ <a href="#" data-toggle="tooltip" title="No chat messages"><i class="mdi mdi-chat-processing"></i></a>
941
+ </li>
942
+ </ul>
943
+ </div>
944
+ </div>
945
+ </div>
946
+ </aside>
947
+
948
+
949
+
950
+ <!-- ====================================
951
+ ——— PAGE WRAPPER
952
+ ===================================== -->
953
+ <div class="page-wrapper">
954
+
955
+ <!-- Header -->
956
+ <header class="main-header" id="header">
957
+ <nav class="navbar navbar-expand-lg navbar-light" id="navbar">
958
+ <!-- Sidebar toggle button -->
959
+ <button id="sidebar-toggler" class="sidebar-toggle">
960
+ <span class="sr-only">Toggle navigation</span>
961
+ </button>
962
+
963
+ <span class="page-title">button social</span>
964
+
965
+ <div class="navbar-right ">
966
+
967
+ <!-- search form -->
968
+ <div class="search-form">
969
+ <form action="index.html" method="get">
970
+ <div class="input-group input-group-sm" id="input-group-search">
971
+ <input type="text" autocomplete="off" name="query" id="search-input" class="form-control" placeholder="Search..." />
972
+ <div class="input-group-append">
973
+ <button class="btn" type="button">/</button>
974
+ </div>
975
+ </div>
976
+ </form>
977
+ <ul class="dropdown-menu dropdown-menu-search">
978
+
979
+ <li class="nav-item">
980
+ <a class="nav-link" href="index.html">Morbi leo risus</a>
981
+ </li>
982
+ <li class="nav-item">
983
+ <a class="nav-link" href="index.html">Dapibus ac facilisis in</a>
984
+ </li>
985
+ <li class="nav-item">
986
+ <a class="nav-link" href="index.html">Porta ac consectetur ac</a>
987
+ </li>
988
+ <li class="nav-item">
989
+ <a class="nav-link" href="index.html">Vestibulum at eros</a>
990
+ </li>
991
+
992
+ </ul>
993
+
994
+ </div>
995
+
996
+ <ul class="nav navbar-nav">
997
+ <!-- Offcanvas -->
998
+ <li class="custom-dropdown">
999
+ <a class="offcanvas-toggler active custom-dropdown-toggler" data-offcanvas="contact-off" href="javascript:" >
1000
+ <i class="mdi mdi-contacts icon"></i>
1001
+ </a>
1002
+ </li>
1003
+ <li class="custom-dropdown">
1004
+ <button class="notify-toggler custom-dropdown-toggler">
1005
+ <i class="mdi mdi-bell-outline icon"></i>
1006
+ <span class="badge badge-xs rounded-circle">21</span>
1007
+ </button>
1008
+ <div class="dropdown-notify">
1009
+
1010
+ <header>
1011
+ <div class="nav nav-underline" id="nav-tab" role="tablist">
1012
+ <a class="nav-item nav-link active" id="all-tabs" data-toggle="tab" href="#all" role="tab" aria-controls="nav-home"
1013
+ aria-selected="true">All (5)</a>
1014
+ <a class="nav-item nav-link" id="message-tab" data-toggle="tab" href="#message" role="tab" aria-controls="nav-profile"
1015
+ aria-selected="false">Msgs (4)</a>
1016
+ <a class="nav-item nav-link" id="other-tab" data-toggle="tab" href="#other" role="tab" aria-controls="nav-contact"
1017
+ aria-selected="false">Others (3)</a>
1018
+ </div>
1019
+ </header>
1020
+
1021
+ <div class="" data-simplebar style="height: 325px;">
1022
+ <div class="tab-content" id="myTabContent">
1023
+
1024
+ <div class="tab-pane fade show active" id="all" role="tabpanel" aria-labelledby="all-tabs">
1025
+
1026
+ <div class="media media-sm bg-warning-10 p-4 mb-0">
1027
+ <div class="media-sm-wrapper">
1028
+ <a href="user-profile.html">
1029
+ <img src="images/user/user-sm-02.jpg" alt="User Image">
1030
+ </a>
1031
+ </div>
1032
+ <div class="media-body">
1033
+ <a href="user-profile.html">
1034
+ <span class="title mb-0">John Doe</span>
1035
+ <span class="discribe">Extremity sweetness difficult behaviour he of. On disposal of as landlord horrible. Afraid at highly months do things on at.</span>
1036
+ <span class="time">
1037
+ <time>Just now</time>...
1038
+ </span>
1039
+ </a>
1040
+ </div>
1041
+ </div>
1042
+
1043
+ <div class="media media-sm p-4 bg-light mb-0">
1044
+ <div class="media-sm-wrapper bg-primary">
1045
+ <a href="user-profile.html">
1046
+ <i class="mdi mdi-calendar-check-outline"></i>
1047
+ </a>
1048
+ </div>
1049
+ <div class="media-body">
1050
+ <a href="user-profile.html">
1051
+ <span class="title mb-0">New event added</span>
1052
+ <span class="discribe">1/3/2014 (1pm - 2pm)</span>
1053
+ <span class="time">
1054
+ <time>10 min ago...</time>...
1055
+ </span>
1056
+ </a>
1057
+ </div>
1058
+ </div>
1059
+
1060
+ <div class="media media-sm p-4 mb-0">
1061
+ <div class="media-sm-wrapper">
1062
+ <a href="user-profile.html">
1063
+ <img src="images/user/user-sm-03.jpg" alt="User Image">
1064
+ </a>
1065
+ </div>
1066
+ <div class="media-body">
1067
+ <a href="user-profile.html">
1068
+ <span class="title mb-0">Sagge Hudson</span>
1069
+ <span class="discribe">On disposal of as landlord Afraid at highly months do things on at.</span>
1070
+ <span class="time">
1071
+ <time>1 hrs ago</time>...
1072
+ </span>
1073
+ </a>
1074
+ </div>
1075
+ </div>
1076
+
1077
+ <div class="media media-sm p-4 mb-0">
1078
+ <div class="media-sm-wrapper bg-info-dark">
1079
+ <a href="user-profile.html">
1080
+ <i class="mdi mdi-account-multiple-check"></i>
1081
+ </a>
1082
+ </div>
1083
+ <div class="media-body">
1084
+ <a href="user-profile.html">
1085
+ <span class="title mb-0">Add request</span>
1086
+ <span class="discribe">Add Dany Jones as your contact.</span>
1087
+ <div class="buttons">
1088
+ <a href="#" class="btn btn-sm btn-success shadow-none text-white">accept</a>
1089
+ <a href="#" class="btn btn-sm shadow-none">delete</a>
1090
+ </div>
1091
+ <span class="time">
1092
+ <time>6 hrs ago</time>...
1093
+ </span>
1094
+ </a>
1095
+ </div>
1096
+ </div>
1097
+
1098
+ <div class="media media-sm p-4 mb-0">
1099
+ <div class="media-sm-wrapper bg-info">
1100
+ <a href="user-profile.html">
1101
+ <i class="mdi mdi-playlist-check"></i>
1102
+ </a>
1103
+ </div>
1104
+ <div class="media-body">
1105
+ <a href="user-profile.html">
1106
+ <span class="title mb-0">Task complete</span>
1107
+ <span class="discribe">Afraid at highly months do things on at.</span>
1108
+ <span class="time">
1109
+ <time>1 hrs ago</time>...
1110
+ </span>
1111
+ </a>
1112
+ </div>
1113
+ </div>
1114
+
1115
+ </div>
1116
+
1117
+ <div class="tab-pane fade" id="message" role="tabpanel" aria-labelledby="message-tab">
1118
+
1119
+ <div class="media media-sm p-4 mb-0">
1120
+ <div class="media-sm-wrapper">
1121
+ <a href="user-profile.html">
1122
+ <img src="images/user/user-sm-01.jpg" alt="User Image">
1123
+ </a>
1124
+ </div>
1125
+ <div class="media-body">
1126
+ <a href="user-profile.html">
1127
+ <span class="title mb-0">Selena Wagner</span>
1128
+ <span class="discribe">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</span>
1129
+ <span class="time">
1130
+ <time>15 min ago</time>...
1131
+ </span>
1132
+ </a>
1133
+ </div>
1134
+ </div>
1135
+
1136
+ <div class="media media-sm p-4 mb-0">
1137
+ <div class="media-sm-wrapper">
1138
+ <a href="user-profile.html">
1139
+ <img src="images/user/user-sm-03.jpg" alt="User Image">
1140
+ </a>
1141
+ </div>
1142
+ <div class="media-body">
1143
+ <a href="user-profile.html">
1144
+ <span class="title mb-0">Sagge Hudson</span>
1145
+ <span class="discribe">On disposal of as landlord Afraid at highly months do things on at.</span>
1146
+ <span class="time">
1147
+ <time>1 hrs ago</time>...
1148
+ </span>
1149
+ </a>
1150
+ </div>
1151
+ </div>
1152
+
1153
+ <div class="media media-sm bg-warning-10 p-4 mb-0">
1154
+ <div class="media-sm-wrapper">
1155
+ <a href="user-profile.html">
1156
+ <img src="images/user/user-sm-02.jpg" alt="User Image">
1157
+ </a>
1158
+ </div>
1159
+ <div class="media-body">
1160
+ <a href="user-profile.html">
1161
+ <span class="title mb-0">John Doe</span>
1162
+ <span class="discribe">Extremity sweetness difficult behaviour he of. On disposal of as landlord horrible. Afraid
1163
+ at highly months do things on at.</span>
1164
+ <span class="time">
1165
+ <time>Just now</time>...
1166
+ </span>
1167
+ </a>
1168
+ </div>
1169
+ </div>
1170
+
1171
+ <div class="media media-sm p-4 mb-0">
1172
+ <div class="media-sm-wrapper">
1173
+ <a href="user-profile.html">
1174
+ <img src="images/user/user-sm-04.jpg" alt="User Image">
1175
+ </a>
1176
+ </div>
1177
+ <div class="media-body">
1178
+ <a href="user-profile.html">
1179
+ <span class="title mb-0">Albrecht Straub</span>
1180
+ <span class="discribe"> Beatae quia natus assumenda laboriosam, nisi perferendis aliquid consectetur expedita non tenetur.</span>
1181
+ <span class="time">
1182
+ <time>Just now</time>...
1183
+ </span>
1184
+ </a>
1185
+ </div>
1186
+ </div>
1187
+
1188
+ </div>
1189
+ <div class="tab-pane fade" id="other" role="tabpanel" aria-labelledby="contact-tab">
1190
+
1191
+ <div class="media media-sm p-4 bg-light mb-0">
1192
+ <div class="media-sm-wrapper bg-primary">
1193
+ <a href="user-profile.html">
1194
+ <i class="mdi mdi-calendar-check-outline"></i>
1195
+ </a>
1196
+ </div>
1197
+ <div class="media-body">
1198
+ <a href="user-profile.html">
1199
+ <span class="title mb-0">New event added</span>
1200
+ <span class="discribe">1/3/2014 (1pm - 2pm)</span>
1201
+ <span class="time">
1202
+ <time>10 min ago...</time>...
1203
+ </span>
1204
+ </a>
1205
+ </div>
1206
+ </div>
1207
+
1208
+ <div class="media media-sm p-4 mb-0">
1209
+ <div class="media-sm-wrapper bg-info-dark">
1210
+ <a href="user-profile.html">
1211
+ <i class="mdi mdi-account-multiple-check"></i>
1212
+ </a>
1213
+ </div>
1214
+ <div class="media-body">
1215
+ <a href="user-profile.html">
1216
+ <span class="title mb-0">Add request</span>
1217
+ <span class="discribe">Add Dany Jones as your contact.</span>
1218
+ <div class="buttons">
1219
+ <a href="#" class="btn btn-sm btn-success shadow-none text-white">accept</a>
1220
+ <a href="#" class="btn btn-sm shadow-none">delete</a>
1221
+ </div>
1222
+ <span class="time">
1223
+ <time>6 hrs ago</time>...
1224
+ </span>
1225
+ </a>
1226
+ </div>
1227
+ </div>
1228
+
1229
+ <div class="media media-sm p-4 mb-0">
1230
+ <div class="media-sm-wrapper bg-info">
1231
+ <a href="user-profile.html">
1232
+ <i class="mdi mdi-playlist-check"></i>
1233
+ </a>
1234
+ </div>
1235
+ <div class="media-body">
1236
+ <a href="user-profile.html">
1237
+ <span class="title mb-0">Task complete</span>
1238
+ <span class="discribe">Afraid at highly months do things on at.</span>
1239
+ <span class="time">
1240
+ <time>1 hrs ago</time>...
1241
+ </span>
1242
+ </a>
1243
+ </div>
1244
+ </div>
1245
+
1246
+ </div>
1247
+ </div>
1248
+ </div>
1249
+
1250
+ <footer class="border-top dropdown-notify-footer">
1251
+ <div class="d-flex justify-content-between align-items-center py-2 px-4">
1252
+ <span>Last updated 3 min ago</span>
1253
+ <a id="refress-button" href="javascript:" class="btn mdi mdi-cached btn-refress"></a>
1254
+ </div>
1255
+ </footer>
1256
+ </div>
1257
+ </li>
1258
+ <!-- User Account -->
1259
+ <li class="dropdown user-menu">
1260
+ <button class="dropdown-toggle nav-link" data-toggle="dropdown">
1261
+ <img src="images/user/user-xs-01.jpg" class="user-image rounded-circle" alt="User Image" />
1262
+ <span class="d-none d-lg-inline-block">John Doe</span>
1263
+ </button>
1264
+ <ul class="dropdown-menu dropdown-menu-right">
1265
+ <li>
1266
+ <a class="dropdown-link-item" href="user-profile.html">
1267
+ <i class="mdi mdi-account-outline"></i>
1268
+ <span class="nav-text">My Profile</span>
1269
+ </a>
1270
+ </li>
1271
+ <li>
1272
+ <a class="dropdown-link-item" href="email-inbox.html">
1273
+ <i class="mdi mdi-email-outline"></i>
1274
+ <span class="nav-text">Message</span>
1275
+ <span class="badge badge-pill badge-primary">24</span>
1276
+ </a>
1277
+ </li>
1278
+ <li>
1279
+ <a class="dropdown-link-item" href="user-activities.html">
1280
+ <i class="mdi mdi-diamond-stone"></i>
1281
+ <span class="nav-text">Activitise</span></a>
1282
+ </li>
1283
+ <li>
1284
+ <a class="dropdown-link-item" href="user-account-settings.html">
1285
+ <i class="mdi mdi-settings"></i>
1286
+ <span class="nav-text">Account Setting</span>
1287
+ </a>
1288
+ </li>
1289
+
1290
+ <li class="dropdown-footer">
1291
+ <a class="dropdown-link-item" href="sign-in.html"> <i class="mdi mdi-logout"></i> Log Out </a>
1292
+ </li>
1293
+ </ul>
1294
+ </li>
1295
+ </ul>
1296
+ </div>
1297
+ </nav>
1298
+
1299
+
1300
+ </header>
1301
+
1302
+ <!-- ====================================
1303
+ ——— CONTENT WRAPPER
1304
+ ===================================== -->
1305
+ <div class="content-wrapper">
1306
+ <div class="content"><!-- For Components documentaion -->
1307
+ <div class="card card-default">
1308
+ <div class="px-6 py-4">
1309
+ <p>Mono provides a variety of <span class="text-secondary text-capitalize"> Social button </span> components thats suit its design standards. To add a new social button first go to <code class="text-secondary">_variables.scss</code> and create a variable for the color you want. Then go to <code class="text-secondary">_buttons.scss</code> and make your own social button like other existing buttons. You can also use a social icon from <a class="font-weight-bold" href="material-icons.html" target="_blank"> material icon </a>. </p>
1310
+ </div>
1311
+ </div>
1312
+
1313
+ <div class="row">
1314
+ <div class="col-xl-6">
1315
+
1316
+ <!-- Social Buttons -->
1317
+ <div class="card card-default">
1318
+ <div class="card-header">
1319
+ <h2>Social Buttons</h2>
1320
+
1321
+ <a class="btn mdi mdi-code-tags" data-toggle="collapse" href="#collapse-btn-icon-1" role="button"
1322
+ aria-expanded="false" aria-controls="collapse-btn-icon-1"> </a>
1323
+
1324
+
1325
+ </div>
1326
+ <div class="card-body">
1327
+ <div class="collapse" id="collapse-btn-icon-1">
1328
+ <pre class="language-html mb-4">
1329
+ <code >
1330
+ &lt;button type="button" class="mb-1 btn btn-icon facebook"&gt;
1331
+ &lt;i class="mdi mdi-facebook"&gt;&lt;/i&gt;
1332
+ &lt;/button&gt;
1333
+
1334
+ &lt;button type="button" class="mb-1 btn btn-icon twitter"&gt;
1335
+ &lt;i class="mdi mdi-twitter"&gt;&lt;/i&gt;
1336
+ &lt;/button&gt;
1337
+
1338
+ &lt;button type="button" class="mb-1 btn btn-icon google-plus"&gt;
1339
+ &lt;i class="mdi mdi-google-plus"&gt;&lt;/i&gt;
1340
+ &lt;/button&gt;
1341
+
1342
+ &lt;button type="button" class="mb-1 btn btn-icon linkedin"&gt;
1343
+ &lt;i class="mdi mdi-linkedin"&gt;&lt;/i&gt;
1344
+ &lt;/button&gt;
1345
+
1346
+ &lt;button type="button" class="mb-1 btn btn-icon pinterest"&gt;
1347
+ &lt;i class="mdi mdi-pinterest"&gt;&lt;/i&gt;
1348
+ &lt;/button&gt;
1349
+
1350
+ &lt;button type="button" class="mb-1 btn btn-icon tumblr"&gt;
1351
+ &lt;i class="mdi mdi-tumblr"&gt;&lt;/i&gt;
1352
+ &lt;/button&gt;
1353
+
1354
+ &lt;button type="button" class="mb-1 btn btn-icon vimeo"&gt;
1355
+ &lt;i class="mdi mdi-vimeo"&gt;&lt;/i&gt;
1356
+ &lt;/button&gt;
1357
+
1358
+ &lt;button type="button" class="mb-1 btn btn-icon dropbox"&gt;
1359
+ &lt;i class="mdi mdi-dropbox"&gt;&lt;/i&gt;
1360
+ &lt;/button&gt;
1361
+
1362
+ &lt;button type="button" class="mb-1 btn btn-icon dribbble"&gt;
1363
+ &lt;i class="mdi mdi-dribbble"&gt;&lt;/i&gt;
1364
+ &lt;/button&gt;
1365
+
1366
+ &lt;button type="button" class="mb-1 btn btn-icon skype"&gt;
1367
+ &lt;i class="mdi mdi-skype"&gt;&lt;/i&gt;
1368
+ &lt;/button&gt;
1369
+ </code>
1370
+ </pre>
1371
+ </div>
1372
+
1373
+ <div>
1374
+ <button type="button" class="mb-1 btn btn-icon facebook">
1375
+ <i class="mdi mdi-facebook"></i>
1376
+ </button>
1377
+ <button type="button" class="mb-1 btn btn-icon twitter">
1378
+ <i class="mdi mdi-twitter"></i>
1379
+ </button>
1380
+ <button type="button" class="mb-1 btn btn-icon google-plus">
1381
+ <i class="mdi mdi-google-plus"></i>
1382
+ </button>
1383
+ <button type="button" class="mb-1 btn btn-icon linkedin">
1384
+ <i class="mdi mdi-linkedin"></i>
1385
+ </button>
1386
+ <button type="button" class="mb-1 btn btn-icon pinterest">
1387
+ <i class="mdi mdi-pinterest"></i>
1388
+ </button>
1389
+ <button type="button" class="mb-1 btn btn-icon tumblr">
1390
+ <i class="mdi mdi-tumblr"></i>
1391
+ </button>
1392
+ <button type="button" class="mb-1 btn btn-icon vimeo">
1393
+ <i class="mdi mdi-vimeo"></i>
1394
+ </button>
1395
+ <button type="button" class="mb-1 btn btn-icon dropbox">
1396
+ <i class="mdi mdi-dropbox"></i>
1397
+ </button>
1398
+ <button type="button" class="mb-1 btn btn-icon dribbble">
1399
+ <i class="mdi mdi-dribbble"></i>
1400
+ </button>
1401
+ <button type="button" class="mb-1 btn btn-icon skype">
1402
+ <i class="mdi mdi-skype"></i>
1403
+ </button>
1404
+ </div>
1405
+
1406
+ </div>
1407
+ </div>
1408
+
1409
+ <!-- Social Buttons with Icon & Text -->
1410
+ <div class="card card-default">
1411
+ <div class="card-header">
1412
+ <h2>Social Buttons with Icon & Text</h2>
1413
+
1414
+ <a class="btn mdi mdi-code-tags" data-toggle="collapse" href="#collapse-btn-icon-2" role="button"
1415
+ aria-expanded="false" aria-controls="collapse-btn-icon-2"> </a>
1416
+
1417
+
1418
+ </div>
1419
+ <div class="card-body">
1420
+ <div class="collapse" id="collapse-btn-icon-2">
1421
+ <pre class="language-html mb-4">
1422
+ <code >
1423
+ &lt;button type="button" class="mb-1 btn facebook"&gt;
1424
+ &lt;i class="mdi mdi-facebook"&gt;&lt;/i&gt;
1425
+ facebook
1426
+ &lt;/button&gt;
1427
+
1428
+ &lt;button type="button" class="mb-1 btn twitter"&gt;
1429
+ &lt;i class="mdi mdi-twitter"&gt;&lt;/i&gt;
1430
+ twitter
1431
+ &lt;/button&gt;
1432
+
1433
+ &lt;button type="button" class="mb-1 btn google-plus"&gt;
1434
+ &lt;i class="mdi mdi-google-plus"&gt;&lt;/i&gt;
1435
+ google-plus
1436
+ &lt;/button&gt;
1437
+
1438
+ &lt;button type="button" class="mb-1 btn linkedin"&gt;
1439
+ &lt;i class="mdi mdi-linkedin"&gt;&lt;/i&gt;
1440
+ linkedin
1441
+ &lt;/button&gt;
1442
+
1443
+ &lt;button type="button" class="mb-1 btn pinterest"&gt;
1444
+ &lt;i class="mdi mdi-pinterest"&gt;&lt;/i&gt;
1445
+ pinterest
1446
+ &lt;/button&gt;
1447
+
1448
+ &lt;button type="button" class="mb-1 btn tumblr"&gt;
1449
+ &lt;i class="mdi mdi-tumblr"&gt;&lt;/i&gt;
1450
+ tumblr
1451
+ &lt;/button&gt;
1452
+
1453
+ &lt;button type="button" class="mb-1 btn vimeo"&gt;
1454
+ &lt;i class="mdi mdi-vimeo"&gt;&lt;/i&gt;
1455
+ vimeo
1456
+ &lt;/button&gt;
1457
+
1458
+ &lt;button type="button" class="mb-1 btn dropbox"&gt;
1459
+ &lt;i class="mdi mdi-dropbox"&gt;&lt;/i&gt;
1460
+ dropbox
1461
+ &lt;/button&gt;
1462
+
1463
+ &lt;button type="button" class="mb-1 btn dribbble"&gt;
1464
+ &lt;i class="mdi mdi-dribbble"&gt;&lt;/i&gt;
1465
+ dribbble
1466
+ &lt;/button&gt;
1467
+
1468
+ &lt;button type="button" class="mb-1 btn skype"&gt;
1469
+ &lt;i class="mdi mdi-skype"&gt;&lt;/i&gt;
1470
+ skype
1471
+ &lt;/button&gt;
1472
+ </code>
1473
+ </pre>
1474
+ </div>
1475
+
1476
+ <div>
1477
+ <button type="button" class="mb-1 btn facebook">
1478
+ <i class="mdi mdi-facebook"></i>
1479
+ facebook
1480
+ </button>
1481
+ <button type="button" class="mb-1 btn twitter">
1482
+ <i class="mdi mdi-twitter"></i>
1483
+ twitter
1484
+ </button>
1485
+ <button type="button" class="mb-1 btn google-plus">
1486
+ <i class="mdi mdi-google-plus"></i>
1487
+ google-plus
1488
+ </button>
1489
+ <button type="button" class="mb-1 btn linkedin">
1490
+ <i class="mdi mdi-linkedin"></i>
1491
+ linkedin
1492
+ </button>
1493
+ <button type="button" class="mb-1 btn pinterest">
1494
+ <i class="mdi mdi-pinterest"></i>
1495
+ pinterest
1496
+ </button>
1497
+ <button type="button" class="mb-1 btn tumblr">
1498
+ <i class="mdi mdi-tumblr"></i>
1499
+ tumblr
1500
+ </button>
1501
+ <button type="button" class="mb-1 btn vimeo">
1502
+ <i class="mdi mdi-vimeo"></i>
1503
+ vimeo
1504
+ </button>
1505
+ <button type="button" class="mb-1 btn dropbox">
1506
+ <i class="mdi mdi-dropbox"></i>
1507
+ dropbox
1508
+ </button>
1509
+ <button type="button" class="mb-1 btn dribbble">
1510
+ <i class="mdi mdi-dribbble"></i>
1511
+ dribbble
1512
+ </button>
1513
+ <button type="button" class="mb-1 btn skype">
1514
+ <i class="mdi mdi-skype"></i>
1515
+ skype
1516
+ </button>
1517
+
1518
+ </div>
1519
+
1520
+ </div>
1521
+ </div>
1522
+
1523
+ <!-- Social Buttons with Text -->
1524
+ <div class="card card-default">
1525
+ <div class="card-header">
1526
+ <h2>Social Buttons with Text</h2>
1527
+
1528
+ <a class="btn mdi mdi-code-tags" data-toggle="collapse" href="#collapse-btn-icon-3" role="button"
1529
+ aria-expanded="false" aria-controls="collapse-btn-icon-3"> </a>
1530
+
1531
+
1532
+ </div>
1533
+ <div class="card-body">
1534
+ <div class="collapse" id="collapse-btn-icon-3">
1535
+ <pre class="language-html mb-4">
1536
+ <code >
1537
+ &lt;button type="button" class="mb-1 btn facebook"&gt;
1538
+ facebook
1539
+ &lt;/button&gt;
1540
+
1541
+ &lt;button type="button" class="mb-1 btn twitter"&gt;
1542
+ twitter
1543
+ &lt;/button&gt;
1544
+
1545
+ &lt;button type="button" class="mb-1 btn google-plus"&gt;
1546
+ google-plus
1547
+ &lt;/button&gt;
1548
+
1549
+ &lt;button type="button" class="mb-1 btn linkedin"&gt;
1550
+ linkedin
1551
+ &lt;/button&gt;
1552
+
1553
+ &lt;button type="button" class="mb-1 btn pinterest"&gt;
1554
+ pinterest
1555
+ &lt;/button&gt;
1556
+
1557
+ &lt;button type="button" class="mb-1 btn tumblr"&gt;
1558
+ tumblr
1559
+ &lt;/button&gt;
1560
+
1561
+ &lt;button type="button" class="mb-1 btn vimeo"&gt;
1562
+ vimeo
1563
+ &lt;/button&gt;
1564
+
1565
+ &lt;button type="button" class="mb-1 btn dropbox"&gt;
1566
+ dropbox
1567
+ &lt;/button&gt;
1568
+
1569
+ &lt;button type="button" class="mb-1 btn dribbble"&gt;
1570
+ dribbble
1571
+ &lt;/button&gt;
1572
+
1573
+ &lt;button type="button" class="mb-1 btn skype"&gt;
1574
+ skype
1575
+ &lt;/button&gt;
1576
+ </code>
1577
+ </pre>
1578
+ </div>
1579
+
1580
+ <div>
1581
+ <button type="button" class="mb-1 btn facebook">
1582
+ facebook
1583
+ </button>
1584
+ <button type="button" class="mb-1 btn twitter">
1585
+ twitter
1586
+ </button>
1587
+ <button type="button" class="mb-1 btn google-plus">
1588
+ google-plus
1589
+ </button>
1590
+ <button type="button" class="mb-1 btn linkedin">
1591
+ linkedin
1592
+ </button>
1593
+ <button type="button" class="mb-1 btn pinterest">
1594
+ pinterest
1595
+ </button>
1596
+ <button type="button" class="mb-1 btn tumblr">
1597
+ tumblr
1598
+ </button>
1599
+ <button type="button" class="mb-1 btn vimeo">
1600
+ vimeo
1601
+ </button>
1602
+ <button type="button" class="mb-1 btn dropbox">
1603
+ dropbox
1604
+ </button>
1605
+ <button type="button" class="mb-1 btn dribbble">
1606
+ dribbble
1607
+ </button>
1608
+ <button type="button" class="mb-1 btn skype">
1609
+ skype
1610
+ </button>
1611
+
1612
+ </div>
1613
+ </div>
1614
+ </div>
1615
+
1616
+ <!-- Social Circle Buttons -->
1617
+ <div class="card card-default">
1618
+ <div class="card-header">
1619
+ <h2>Social Circle Buttons</h2>
1620
+
1621
+ <a class="btn mdi mdi-code-tags" data-toggle="collapse" href="#collapse-btn-icon-4" role="button"
1622
+ aria-expanded="false" aria-controls="collapse-btn-icon-4"> </a>
1623
+
1624
+
1625
+ </div>
1626
+ <div class="card-body">
1627
+ <div class="collapse" id="collapse-btn-icon-4">
1628
+ <pre class="language-html mb-4">
1629
+ <code >
1630
+ &lt;button type="button" class="mb-1 btn btn-icon facebook btn-rounded-circle"&gt;
1631
+ &lt;i class="mdi mdi-facebook"&gt;&lt;/i&gt;
1632
+ &lt;/button&gt;
1633
+
1634
+ &lt;button type="button" class="mb-1 btn btn-icon twitter btn-rounded-circle"&gt;
1635
+ &lt;i class="mdi mdi-twitter"&gt;&lt;/i&gt;
1636
+ &lt;/button&gt;
1637
+
1638
+ &lt;button type="button" class="mb-1 btn btn-icon google-plus btn-rounded-circle"&gt;
1639
+ &lt;i class="mdi mdi-google-plus"&gt;&lt;/i&gt;
1640
+ &lt;/button&gt;
1641
+
1642
+ &lt;button type="button" class="mb-1 btn btn-icon linkedin btn-rounded-circle"&gt;
1643
+ &lt;i class="mdi mdi-linkedin"&gt;&lt;/i&gt;
1644
+ &lt;/button&gt;
1645
+
1646
+ &lt;button type="button" class="mb-1 btn btn-icon pinterest btn-rounded-circle"&gt;
1647
+ &lt;i class="mdi mdi-pinterest"&gt;&lt;/i&gt;
1648
+ &lt;/button&gt;
1649
+
1650
+ &lt;button type="button" class="mb-1 btn btn-icon tumblr btn-rounded-circle"&gt;
1651
+ &lt;i class="mdi mdi-tumblr"&gt;&lt;/i&gt;
1652
+ &lt;/button&gt;
1653
+
1654
+ &lt;button type="button" class="mb-1 btn btn-icon vimeo btn-rounded-circle"&gt;
1655
+ &lt;i class="mdi mdi-vimeo"&gt;&lt;/i&gt;
1656
+ &lt;/button&gt;
1657
+
1658
+ &lt;button type="button" class="mb-1 btn btn-icon dropbox btn-rounded-circle"&gt;
1659
+ &lt;i class="mdi mdi-dropbox"&gt;&lt;/i&gt;
1660
+ &lt;/button&gt;
1661
+
1662
+ &lt;button type="button" class="mb-1 btn btn-icon dribbble btn-rounded-circle"&gt;
1663
+ &lt;i class="mdi mdi-dribbble"&gt;&lt;/i&gt;
1664
+ &lt;/button&gt;
1665
+
1666
+ &lt;button type="button" class="mb-1 btn btn-icon skype btn-rounded-circle"&gt;
1667
+ &lt;i class="mdi mdi-skype"&gt;&lt;/i&gt;
1668
+ &lt;/button&gt;
1669
+ </code>
1670
+ </pre>
1671
+ </div>
1672
+
1673
+ <div>
1674
+ <button type="button" class="mb-1 btn btn-icon facebook btn-rounded-circle">
1675
+ <i class="mdi mdi-facebook"></i>
1676
+ </button>
1677
+ <button type="button" class="mb-1 btn btn-icon twitter btn-rounded-circle">
1678
+ <i class="mdi mdi-twitter"></i>
1679
+ </button>
1680
+ <button type="button" class="mb-1 btn btn-icon google-plus btn-rounded-circle">
1681
+ <i class="mdi mdi-google-plus"></i>
1682
+ </button>
1683
+ <button type="button" class="mb-1 btn btn-icon linkedin btn-rounded-circle">
1684
+ <i class="mdi mdi-linkedin"></i>
1685
+ </button>
1686
+ <button type="button" class="mb-1 btn btn-icon pinterest btn-rounded-circle">
1687
+ <i class="mdi mdi-pinterest"></i>
1688
+ </button>
1689
+ <button type="button" class="mb-1 btn btn-icon tumblr btn-rounded-circle">
1690
+ <i class="mdi mdi-tumblr"></i>
1691
+ </button>
1692
+ <button type="button" class="mb-1 btn btn-icon vimeo btn-rounded-circle">
1693
+ <i class="mdi mdi-vimeo"></i>
1694
+ </button>
1695
+ <button type="button" class="mb-1 btn btn-icon dropbox btn-rounded-circle">
1696
+ <i class="mdi mdi-dropbox"></i>
1697
+ </button>
1698
+ <button type="button" class="mb-1 btn btn-icon dribbble btn-rounded-circle">
1699
+ <i class="mdi mdi-dribbble"></i>
1700
+ </button>
1701
+ <button type="button" class="mb-1 btn btn-icon skype btn-rounded-circle">
1702
+ <i class="mdi mdi-skype"></i>
1703
+ </button>
1704
+ </div>
1705
+
1706
+ </div>
1707
+ </div>
1708
+ </div>
1709
+
1710
+
1711
+ <div class="col-xl-6">
1712
+ <!-- Outline Social Buttons -->
1713
+ <div class="card card-default">
1714
+ <div class="card-header">
1715
+ <h2>Outline Social Buttons</h2>
1716
+
1717
+ <a class="btn mdi mdi-code-tags" data-toggle="collapse" href="#collapse-btn-icon-5" role="button"
1718
+ aria-expanded="false" aria-controls="collapse-btn-icon-5"> </a>
1719
+
1720
+
1721
+ </div>
1722
+ <div class="card-body">
1723
+ <div class="collapse" id="collapse-btn-icon-5">
1724
+ <pre class="language-html mb-4">
1725
+ <code >
1726
+ &lt;button type="button" class="mb-1 btn btn-icon btn-outline facebook"&gt;
1727
+ &lt;i class="mdi mdi-facebook"&gt;&lt;/i&gt;
1728
+ &lt;/button&gt;
1729
+
1730
+ &lt;button type="button" class="mb-1 btn btn-icon btn-outline twitter"&gt;
1731
+ &lt;i class="mdi mdi-twitter"&gt;&lt;/i&gt;
1732
+ &lt;/button&gt;
1733
+
1734
+ &lt;button type="button" class="mb-1 btn btn-icon btn-outline google-plus"&gt;
1735
+ &lt;i class="mdi mdi-google-plus"&gt;&lt;/i&gt;
1736
+ &lt;/button&gt;
1737
+
1738
+ &lt;button type="button" class="mb-1 btn btn-icon btn-outline linkedin"&gt;
1739
+ &lt;i class="mdi mdi-linkedin"&gt;&lt;/i&gt;
1740
+ &lt;/button&gt;
1741
+
1742
+ &lt;button type="button" class="mb-1 btn btn-icon btn-outline pinterest"&gt;
1743
+ &lt;i class="mdi mdi-pinterest"&gt;&lt;/i&gt;
1744
+ &lt;/button&gt;
1745
+
1746
+ &lt;button type="button" class="mb-1 btn btn-icon btn-outline tumblr"&gt;
1747
+ &lt;i class="mdi mdi-tumblr"&gt;&lt;/i&gt;
1748
+ &lt;/button&gt;
1749
+
1750
+ &lt;button type="button" class="mb-1 btn btn-icon btn-outline vimeo"&gt;
1751
+ &lt;i class="mdi mdi-vimeo"&gt;&lt;/i&gt;
1752
+ &lt;/button&gt;
1753
+
1754
+ &lt;button type="button" class="mb-1 btn btn-icon btn-outline dropbox"&gt;
1755
+ &lt;i class="mdi mdi-dropbox"&gt;&lt;/i&gt;
1756
+ &lt;/button&gt;
1757
+
1758
+ &lt;button type="button" class="mb-1 btn btn-icon btn-outline dribbble"&gt;
1759
+ &lt;i class="mdi mdi-dribbble"&gt;&lt;/i&gt;
1760
+ &lt;/button&gt;
1761
+
1762
+ &lt;button type="button" class="mb-1 btn btn-icon btn-outline skype"&gt;
1763
+ &lt;i class="mdi mdi-skype"&gt;&lt;/i&gt;
1764
+ &lt;/button&gt;
1765
+ </code>
1766
+ </pre>
1767
+ </div>
1768
+
1769
+ <div>
1770
+ <button type="button" class="mb-1 btn btn-icon btn-outline facebook">
1771
+ <i class="mdi mdi-facebook"></i>
1772
+ </button>
1773
+ <button type="button" class="mb-1 btn btn-icon btn-outline twitter">
1774
+ <i class="mdi mdi-twitter"></i>
1775
+ </button>
1776
+ <button type="button" class="mb-1 btn btn-icon btn-outline google-plus">
1777
+ <i class="mdi mdi-google-plus"></i>
1778
+ </button>
1779
+ <button type="button" class="mb-1 btn btn-icon btn-outline linkedin">
1780
+ <i class="mdi mdi-linkedin"></i>
1781
+ </button>
1782
+ <button type="button" class="mb-1 btn btn-icon btn-outline pinterest">
1783
+ <i class="mdi mdi-pinterest"></i>
1784
+ </button>
1785
+ <button type="button" class="mb-1 btn btn-icon btn-outline tumblr">
1786
+ <i class="mdi mdi-tumblr"></i>
1787
+ </button>
1788
+ <button type="button" class="mb-1 btn btn-icon btn-outline vimeo">
1789
+ <i class="mdi mdi-vimeo"></i>
1790
+ </button>
1791
+ <button type="button" class="mb-1 btn btn-icon btn-outline dropbox">
1792
+ <i class="mdi mdi-dropbox"></i>
1793
+ </button>
1794
+ <button type="button" class="mb-1 btn btn-icon btn-outline dribbble">
1795
+ <i class="mdi mdi-dribbble"></i>
1796
+ </button>
1797
+ <button type="button" class="mb-1 btn btn-icon btn-outline skype">
1798
+ <i class="mdi mdi-skype"></i>
1799
+ </button>
1800
+ </div>
1801
+
1802
+ </div>
1803
+ </div>
1804
+
1805
+ <!-- Outline Social Buttons with Icon & Text -->
1806
+ <div class="card card-default">
1807
+ <div class="card-header">
1808
+ <h2>Outline Social Buttons with Icon & Text</h2>
1809
+
1810
+ <a class="btn mdi mdi-code-tags" data-toggle="collapse" href="#collapse-btn-icon-6" role="button"
1811
+ aria-expanded="false" aria-controls="collapse-btn-icon-6"> </a>
1812
+
1813
+
1814
+ </div>
1815
+ <div class="card-body">
1816
+ <div class="collapse" id="collapse-btn-icon-6">
1817
+ <pre class="language-html mb-4">
1818
+ <code >
1819
+ &lt;button type="button" class="mb-1 btn btn-outline facebook"&gt;
1820
+ &lt;i class="mdi mdi-facebook"&gt;&lt;/i&gt;
1821
+ facebook
1822
+ &lt;/button&gt;
1823
+
1824
+ &lt;button type="button" class="mb-1 btn btn-outline twitter"&gt;
1825
+ &lt;i class="mdi mdi-twitter"&gt;&lt;/i&gt;
1826
+ twitter
1827
+ &lt;/button&gt;
1828
+
1829
+ &lt;button type="button" class="mb-1 btn btn-outline google-plus"&gt;
1830
+ &lt;i class="mdi mdi-google-plus"&gt;&lt;/i&gt;
1831
+ google-plus
1832
+ &lt;/button&gt;
1833
+
1834
+ &lt;button type="button" class="mb-1 btn btn-outline linkedin"&gt;
1835
+ &lt;i class="mdi mdi-linkedin"&gt;&lt;/i&gt;
1836
+ linkedin
1837
+ &lt;/button&gt;
1838
+
1839
+ &lt;button type="button" class="mb-1 btn btn-outline pinterest"&gt;
1840
+ &lt;i class="mdi mdi-pinterest"&gt;&lt;/i&gt;
1841
+ pinterest
1842
+ &lt;/button&gt;
1843
+
1844
+ &lt;button type="button" class="mb-1 btn btn-outline tumblr"&gt;
1845
+ &lt;i class="mdi mdi-tumblr"&gt;&lt;/i&gt;
1846
+ tumblr
1847
+ &lt;/button&gt;
1848
+
1849
+ &lt;button type="button" class="mb-1 btn btn-outline vimeo"&gt;
1850
+ &lt;i class="mdi mdi-vimeo"&gt;&lt;/i&gt;
1851
+ vimeo
1852
+ &lt;/button&gt;
1853
+
1854
+ &lt;button type="button" class="mb-1 btn btn-outline dropbox"&gt;
1855
+ &lt;i class="mdi mdi-dropbox"&gt;&lt;/i&gt;
1856
+ dropbox
1857
+ &lt;/button&gt;
1858
+
1859
+ &lt;button type="button" class="mb-1 btn btn-outline dribbble"&gt;
1860
+ &lt;i class="mdi mdi-dribbble"&gt;&lt;/i&gt;
1861
+ dribbble
1862
+ &lt;/button&gt;
1863
+
1864
+ &lt;button type="button" class="mb-1 btn btn-outline skype"&gt;
1865
+ &lt;i class="mdi mdi-skype"&gt;&lt;/i&gt;
1866
+ skype
1867
+ &lt;/button&gt;
1868
+ </code>
1869
+ </pre>
1870
+ </div>
1871
+
1872
+ <div>
1873
+ <button type="button" class="mb-1 btn btn-outline facebook">
1874
+ <i class="mdi mdi-facebook"></i>
1875
+ facebook
1876
+ </button>
1877
+ <button type="button" class="mb-1 btn btn-outline twitter">
1878
+ <i class="mdi mdi-twitter"></i>
1879
+ twitter
1880
+ </button>
1881
+ <button type="button" class="mb-1 btn btn-outline google-plus">
1882
+ <i class="mdi mdi-google-plus"></i>
1883
+ google-plus
1884
+ </button>
1885
+ <button type="button" class="mb-1 btn btn-outline linkedin">
1886
+ <i class="mdi mdi-linkedin"></i>
1887
+ linkedin
1888
+ </button>
1889
+ <button type="button" class="mb-1 btn btn-outline pinterest">
1890
+ <i class="mdi mdi-pinterest"></i>
1891
+ pinterest
1892
+ </button>
1893
+ <button type="button" class="mb-1 btn btn-outline tumblr">
1894
+ <i class="mdi mdi-tumblr"></i>
1895
+ tumblr
1896
+ </button>
1897
+ <button type="button" class="mb-1 btn btn-outline vimeo">
1898
+ <i class="mdi mdi-vimeo"></i>
1899
+ vimeo
1900
+ </button>
1901
+ <button type="button" class="mb-1 btn btn-outline dropbox">
1902
+ <i class="mdi mdi-dropbox"></i>
1903
+ dropbox
1904
+ </button>
1905
+ <button type="button" class="mb-1 btn btn-outline dribbble">
1906
+ <i class="mdi mdi-dribbble"></i>
1907
+ dribbble
1908
+ </button>
1909
+ <button type="button" class="mb-1 btn btn-outline skype">
1910
+ <i class="mdi mdi-skype"></i>
1911
+ skype
1912
+ </button>
1913
+
1914
+ </div>
1915
+ </div>
1916
+ </div>
1917
+
1918
+ <!-- Outline Social Buttons with Text -->
1919
+ <div class="card card-default">
1920
+ <div class="card-header">
1921
+ <h2>Outline Social Buttons with Text</h2>
1922
+
1923
+ <a class="btn mdi mdi-code-tags" data-toggle="collapse" href="#collapse-btn-icon-7" role="button"
1924
+ aria-expanded="false" aria-controls="collapse-btn-icon-7"> </a>
1925
+
1926
+
1927
+ </div>
1928
+ <div class="card-body">
1929
+ <div class="collapse" id="collapse-btn-icon-7">
1930
+ <pre class="language-html mb-4">
1931
+ <code >
1932
+ &lt;button type="button" class="mb-1 btn btn-outline facebook"&gt;
1933
+ facebook
1934
+ &lt;/button&gt;
1935
+
1936
+ &lt;button type="button" class="mb-1 btn btn-outline twitter"&gt;
1937
+ twitter
1938
+ &lt;/button&gt;
1939
+
1940
+ &lt;button type="button" class="mb-1 btn btn-outline google-plus"&gt;
1941
+ google-plus
1942
+ &lt;/button&gt;
1943
+
1944
+ &lt;button type="button" class="mb-1 btn btn-outline linkedin"&gt;
1945
+ linkedin
1946
+ &lt;/button&gt;
1947
+
1948
+ &lt;button type="button" class="mb-1 btn btn-outline pinterest"&gt;
1949
+ pinterest
1950
+ &lt;/button&gt;
1951
+
1952
+ &lt;button type="button" class="mb-1 btn btn-outline tumblr"&gt;
1953
+ tumblr
1954
+ &lt;/button&gt;
1955
+
1956
+ &lt;button type="button" class="mb-1 btn btn-outline vimeo"&gt;
1957
+ vimeo
1958
+ &lt;/button&gt;
1959
+
1960
+ &lt;button type="button" class="mb-1 btn btn-outline dropbox"&gt;
1961
+ dropbox
1962
+ &lt;/button&gt;
1963
+
1964
+ &lt;button type="button" class="mb-1 btn btn-outline dribbble"&gt;
1965
+ dribbble
1966
+ &lt;/button&gt;
1967
+ &lt;button type="button" class="mb-1 btn btn-outline skype"&gt;
1968
+ skype
1969
+ &lt;/button&gt;
1970
+ </code>
1971
+ </pre>
1972
+ </div>
1973
+
1974
+ <div>
1975
+ <button type="button" class="mb-1 btn btn-outline facebook">
1976
+ facebook
1977
+ </button>
1978
+ <button type="button" class="mb-1 btn btn-outline twitter">
1979
+ twitter
1980
+ </button>
1981
+ <button type="button" class="mb-1 btn btn-outline google-plus">
1982
+ google-plus
1983
+ </button>
1984
+ <button type="button" class="mb-1 btn btn-outline linkedin">
1985
+ linkedin
1986
+ </button>
1987
+ <button type="button" class="mb-1 btn btn-outline pinterest">
1988
+ pinterest
1989
+ </button>
1990
+ <button type="button" class="mb-1 btn btn-outline tumblr">
1991
+ tumblr
1992
+ </button>
1993
+ <button type="button" class="mb-1 btn btn-outline vimeo">
1994
+ vimeo
1995
+ </button>
1996
+ <button type="button" class="mb-1 btn btn-outline dropbox">
1997
+ dropbox
1998
+ </button>
1999
+ <button type="button" class="mb-1 btn btn-outline dribbble">
2000
+ dribbble
2001
+ </button>
2002
+ <button type="button" class="mb-1 btn btn-outline skype">
2003
+ skype
2004
+ </button>
2005
+
2006
+ </div>
2007
+ </div>
2008
+ </div>
2009
+
2010
+ <!-- Outline Social Circle Buttons -->
2011
+ <div class="card card-default">
2012
+ <div class="card-header">
2013
+ <h2>Outline Social Circle Buttons</h2>
2014
+
2015
+ <a class="btn mdi mdi-code-tags" data-toggle="collapse" href="#collapse-btn-icon-8" role="button"
2016
+ aria-expanded="false" aria-controls="collapse-btn-icon-8"> </a>
2017
+
2018
+
2019
+ </div>
2020
+ <div class="card-body">
2021
+ <div class="collapse" id="collapse-btn-icon-8">
2022
+ <pre class="language-html mb-4">
2023
+ <code >
2024
+ &lt;button type="button" class="mb-1 btn btn-icon btn-outline facebook btn-rounded-circle"&gt;
2025
+ &lt;i class="mdi mdi-facebook"&gt;&lt;/i&gt;
2026
+ &lt;/button&gt;
2027
+
2028
+ &lt;button type="button" class="mb-1 btn btn-icon btn-outline twitter btn-rounded-circle"&gt;
2029
+ &lt;i class="mdi mdi-twitter"&gt;&lt;/i&gt;
2030
+ &lt;/button&gt;
2031
+
2032
+ &lt;button type="button" class="mb-1 btn btn-icon btn-outline google-plus btn-rounded-circle"&gt;
2033
+ &lt;i class="mdi mdi-google-plus"&gt;&lt;/i&gt;
2034
+ &lt;/button&gt;
2035
+
2036
+ &lt;button type="button" class="mb-1 btn btn-icon btn-outline linkedin btn-rounded-circle"&gt;
2037
+ &lt;i class="mdi mdi-linkedin"&gt;&lt;/i&gt;
2038
+ &lt;/button&gt;
2039
+
2040
+ &lt;button type="button" class="mb-1 btn btn-icon btn-outline pinterest btn-rounded-circle"&gt;
2041
+ &lt;i class="mdi mdi-pinterest"&gt;&lt;/i&gt;
2042
+ &lt;/button&gt;
2043
+
2044
+ &lt;button type="button" class="mb-1 btn btn-icon btn-outline tumblr btn-rounded-circle"&gt;
2045
+ &lt;i class="mdi mdi-tumblr"&gt;&lt;/i&gt;
2046
+ &lt;/button&gt;
2047
+
2048
+ &lt;button type="button" class="mb-1 btn btn-icon btn-outline vimeo btn-rounded-circle"&gt;
2049
+ &lt;i class="mdi mdi-vimeo"&gt;&lt;/i&gt;
2050
+ &lt;/button&gt;
2051
+
2052
+ &lt;button type="button" class="mb-1 btn btn-icon btn-outline dropbox btn-rounded-circle"&gt;
2053
+ &lt;i class="mdi mdi-dropbox"&gt;&lt;/i&gt;
2054
+ &lt;/button&gt;
2055
+
2056
+ &lt;button type="button" class="mb-1 btn btn-icon btn-outline dribbble btn-rounded-circle"&gt;
2057
+ &lt;i class="mdi mdi-dribbble"&gt;&lt;/i&gt;
2058
+ &lt;/button&gt;
2059
+
2060
+ &lt;button type="button" class="mb-1 btn btn-icon btn-outline skype btn-rounded-circle"&gt;
2061
+ &lt;i class="mdi mdi-skype"&gt;&lt;/i&gt;
2062
+ &lt;/button&gt;
2063
+ </code>
2064
+ </pre>
2065
+ </div>
2066
+
2067
+ <div>
2068
+ <button type="button" class="mb-1 btn btn-icon btn-outline facebook btn-rounded-circle">
2069
+ <i class="mdi mdi-facebook"></i>
2070
+ </button>
2071
+ <button type="button" class="mb-1 btn btn-icon btn-outline twitter btn-rounded-circle">
2072
+ <i class="mdi mdi-twitter"></i>
2073
+ </button>
2074
+ <button type="button" class="mb-1 btn btn-icon btn-outline google-plus btn-rounded-circle">
2075
+ <i class="mdi mdi-google-plus"></i>
2076
+ </button>
2077
+ <button type="button" class="mb-1 btn btn-icon btn-outline linkedin btn-rounded-circle">
2078
+ <i class="mdi mdi-linkedin"></i>
2079
+ </button>
2080
+ <button type="button" class="mb-1 btn btn-icon btn-outline pinterest btn-rounded-circle">
2081
+ <i class="mdi mdi-pinterest"></i>
2082
+ </button>
2083
+ <button type="button" class="mb-1 btn btn-icon btn-outline tumblr btn-rounded-circle">
2084
+ <i class="mdi mdi-tumblr"></i>
2085
+ </button>
2086
+ <button type="button" class="mb-1 btn btn-icon btn-outline vimeo btn-rounded-circle">
2087
+ <i class="mdi mdi-vimeo"></i>
2088
+ </button>
2089
+ <button type="button" class="mb-1 btn btn-icon btn-outline dropbox btn-rounded-circle">
2090
+ <i class="mdi mdi-dropbox"></i>
2091
+ </button>
2092
+ <button type="button" class="mb-1 btn btn-icon btn-outline dribbble btn-rounded-circle">
2093
+ <i class="mdi mdi-dribbble"></i>
2094
+ </button>
2095
+ <button type="button" class="mb-1 btn btn-icon btn-outline skype btn-rounded-circle">
2096
+ <i class="mdi mdi-skype"></i>
2097
+ </button>
2098
+ </div>
2099
+
2100
+ </div>
2101
+ </div>
2102
+
2103
+
2104
+ </div>
2105
+ </div>
2106
+
2107
+
2108
+
2109
+ </div>
2110
+
2111
+ </div>
2112
+
2113
+ <!-- Footer -->
2114
+ <footer class="footer mt-auto">
2115
+ <div class="copyright bg-white">
2116
+ <p>
2117
+ &copy; <span id="copy-year"></span> Copyright Mono Dashboard Bootstrap Template by <a class="text-primary" href="http://www.iamabdus.com/" target="_blank" >Abdus</a>.
2118
+ </p>
2119
+ </div>
2120
+ <script>
2121
+ var d = new Date();
2122
+ var year = d.getFullYear();
2123
+ document.getElementById("copy-year").innerHTML = year;
2124
+ </script>
2125
+ </footer>
2126
+
2127
+ </div>
2128
+ </div>
2129
+
2130
+ <!-- Card Offcanvas -->
2131
+ <div class="card card-offcanvas" id="contact-off" >
2132
+ <div class="card-header">
2133
+ <h2>Contacts</h2>
2134
+ <a href="#" class="btn btn-primary btn-pill px-4">Add New</a>
2135
+ </div>
2136
+ <div class="card-body">
2137
+
2138
+ <div class="mb-4">
2139
+ <input type="text" class="form-control form-control-lg form-control-secondary rounded-0" placeholder="Search contacts...">
2140
+ </div>
2141
+
2142
+ <div class="media media-sm">
2143
+ <div class="media-sm-wrapper">
2144
+ <a href="user-profile.html">
2145
+ <img src="images/user/user-sm-01.jpg" alt="User Image">
2146
+ <span class="active bg-primary"></span>
2147
+ </a>
2148
+ </div>
2149
+ <div class="media-body">
2150
+ <a href="user-profile.html">
2151
+ <span class="title">Selena Wagner</span>
2152
+ <span class="discribe">Designer</span>
2153
+ </a>
2154
+ </div>
2155
+ </div>
2156
+
2157
+ <div class="media media-sm">
2158
+ <div class="media-sm-wrapper">
2159
+ <a href="user-profile.html">
2160
+ <img src="images/user/user-sm-02.jpg" alt="User Image">
2161
+ <span class="active bg-primary"></span>
2162
+ </a>
2163
+ </div>
2164
+ <div class="media-body">
2165
+ <a href="user-profile.html">
2166
+ <span class="title">Walter Reuter</span>
2167
+ <span>Developer</span>
2168
+ </a>
2169
+ </div>
2170
+ </div>
2171
+
2172
+ <div class="media media-sm">
2173
+ <div class="media-sm-wrapper">
2174
+ <a href="user-profile.html">
2175
+ <img src="images/user/user-sm-03.jpg" alt="User Image">
2176
+ </a>
2177
+ </div>
2178
+ <div class="media-body">
2179
+ <a href="user-profile.html">
2180
+ <span class="title">Larissa Gebhardt</span>
2181
+ <span>Cyber Punk</span>
2182
+ </a>
2183
+ </div>
2184
+ </div>
2185
+
2186
+ <div class="media media-sm">
2187
+ <div class="media-sm-wrapper">
2188
+ <a href="user-profile.html">
2189
+ <img src="images/user/user-sm-04.jpg" alt="User Image">
2190
+ </a>
2191
+
2192
+ </div>
2193
+ <div class="media-body">
2194
+ <a href="user-profile.html">
2195
+ <span class="title">Albrecht Straub</span>
2196
+ <span>Photographer</span>
2197
+ </a>
2198
+ </div>
2199
+ </div>
2200
+
2201
+ <div class="media media-sm">
2202
+ <div class="media-sm-wrapper">
2203
+ <a href="user-profile.html">
2204
+ <img src="images/user/user-sm-05.jpg" alt="User Image">
2205
+ <span class="active bg-danger"></span>
2206
+ </a>
2207
+ </div>
2208
+ <div class="media-body">
2209
+ <a href="user-profile.html">
2210
+ <span class="title">Leopold Ebert</span>
2211
+ <span>Fashion Designer</span>
2212
+ </a>
2213
+ </div>
2214
+ </div>
2215
+
2216
+ <div class="media media-sm">
2217
+ <div class="media-sm-wrapper">
2218
+ <a href="user-profile.html">
2219
+ <img src="images/user/user-sm-06.jpg" alt="User Image">
2220
+ <span class="active bg-primary"></span>
2221
+ </a>
2222
+ </div>
2223
+ <div class="media-body">
2224
+ <a href="user-profile.html">
2225
+ <span class="title">Selena Wagner</span>
2226
+ <span>Photographer</span>
2227
+ </a>
2228
+ </div>
2229
+ </div>
2230
+
2231
+ </div>
2232
+ </div>
2233
+
2234
+
2235
+
2236
+
2237
+ <script src="plugins/jquery/jquery.min.js"></script>
2238
+ <script src="plugins/bootstrap/js/bootstrap.bundle.min.js"></script>
2239
+ <script src="plugins/simplebar/simplebar.min.js"></script>
2240
+ <script src="https://unpkg.com/hotkeys-js/dist/hotkeys.min.js"></script>
2241
+
2242
+
2243
+
2244
+ <script src="plugins/prism/prism.js"></script>
2245
+
2246
+
2247
+ <script src="js/mono.js"></script>
2248
+ <script src="js/chart.js"></script>
2249
+ <script src="js/map.js"></script>
2250
+ <script src="js/custom.js"></script>
2251
+
2252
+
2253
+
2254
+
2255
+ <!-- -->
2256
+
2257
+
2258
+ </body>
2259
+ </html>
calendar.html ADDED
@@ -0,0 +1,1654 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+
3
+ <!--
4
+ // WEBSITE: https://themefisher.com
5
+ // TWITTER: https://twitter.com/themefisher
6
+ // FACEBOOK: https://www.facebook.com/themefisher
7
+ // GITHUB: https://github.com/themefisher/
8
+ -->
9
+
10
+ <html lang="en" dir="ltr">
11
+ <head>
12
+ <meta charset="utf-8" />
13
+ <meta http-equiv="X-UA-Compatible" content="IE=edge" />
14
+ <meta name="viewport" content="width=device-width, initial-scale=1" />
15
+
16
+ <title>Mono - Responsive Admin & Dashboard Template</title>
17
+
18
+ <!-- GOOGLE FONTS -->
19
+ <link href="https://fonts.googleapis.com/css?family=Karla:400,700|Roboto" rel="stylesheet">
20
+ <link href="plugins/material/css/materialdesignicons.min.css" rel="stylesheet" />
21
+ <link href="plugins/simplebar/simplebar.css" rel="stylesheet" />
22
+
23
+ <!-- PLUGINS CSS STYLE -->
24
+ <link href="plugins/nprogress/nprogress.css" rel="stylesheet" />
25
+
26
+
27
+ <link href='assets/plugins/fullcalendar/core-4.3.1/main.min.css' rel='stylesheet' />
28
+ <link href='assets/plugins/fullcalendar/daygrid-4.3.0/main.min.css' rel='stylesheet' />
29
+
30
+
31
+
32
+ <link href="plugins/daterangepicker/daterangepicker.css" rel="stylesheet" />
33
+
34
+
35
+ <!-- MONO CSS -->
36
+ <link id="main-css-href" rel="stylesheet" href="css/style.css" />
37
+
38
+
39
+
40
+
41
+ <!-- FAVICON -->
42
+ <link href="images/favicon.png" rel="shortcut icon" />
43
+
44
+ <!--
45
+ HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries
46
+ -->
47
+ <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
48
+ <!--[if lt IE 9]>
49
+ <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
50
+ <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
51
+ <![endif]-->
52
+ <script src="plugins/nprogress/nprogress.js"></script>
53
+ </head>
54
+
55
+
56
+ <body class="navbar-fixed sidebar-fixed" id="body">
57
+ <script>
58
+ NProgress.configure({ showSpinner: false });
59
+ NProgress.start();
60
+ </script>
61
+
62
+
63
+
64
+ <!-- ====================================
65
+ ——— WRAPPER
66
+ ===================================== -->
67
+ <div class="wrapper">
68
+
69
+
70
+ <!-- ====================================
71
+ ——— LEFT SIDEBAR WITH OUT FOOTER
72
+ ===================================== -->
73
+ <aside class="left-sidebar sidebar-dark" id="left-sidebar">
74
+ <div id="sidebar" class="sidebar sidebar-with-footer">
75
+ <!-- Aplication Brand -->
76
+ <div class="app-brand">
77
+ <a href="/index.html">
78
+ <img src="images/logo.png" alt="Mono">
79
+ <span class="brand-name">MONO</span>
80
+ </a>
81
+ </div>
82
+ <!-- begin sidebar scrollbar -->
83
+ <div class="sidebar-left" data-simplebar style="height: 100%;">
84
+ <!-- sidebar menu -->
85
+ <ul class="nav sidebar-inner" id="sidebar-menu">
86
+
87
+
88
+
89
+ <li
90
+ >
91
+ <a class="sidenav-item-link" href="index.html">
92
+ <i class="mdi mdi-briefcase-account-outline"></i>
93
+ <span class="nav-text">Business Dashboard</span>
94
+ </a>
95
+ </li>
96
+
97
+
98
+
99
+
100
+
101
+ <li
102
+ >
103
+ <a class="sidenav-item-link" href="analytics.html">
104
+ <i class="mdi mdi-chart-line"></i>
105
+ <span class="nav-text">Analytics Dashboard</span>
106
+ </a>
107
+ </li>
108
+
109
+
110
+
111
+
112
+
113
+ <li class="section-title">
114
+ Apps
115
+ </li>
116
+
117
+
118
+
119
+
120
+
121
+ <li
122
+ >
123
+ <a class="sidenav-item-link" href="chat.html">
124
+ <i class="mdi mdi-wechat"></i>
125
+ <span class="nav-text">Chat</span>
126
+ </a>
127
+ </li>
128
+
129
+
130
+
131
+
132
+
133
+ <li
134
+ >
135
+ <a class="sidenav-item-link" href="contacts.html">
136
+ <i class="mdi mdi-phone"></i>
137
+ <span class="nav-text">Contacts</span>
138
+ </a>
139
+ </li>
140
+
141
+
142
+
143
+
144
+
145
+ <li
146
+ >
147
+ <a class="sidenav-item-link" href="team.html">
148
+ <i class="mdi mdi-account-group"></i>
149
+ <span class="nav-text">Team</span>
150
+ </a>
151
+ </li>
152
+
153
+
154
+
155
+
156
+
157
+ <li
158
+ class="active"
159
+ >
160
+ <a class="sidenav-item-link" href="calendar.html">
161
+ <i class="mdi mdi-calendar-check"></i>
162
+ <span class="nav-text">Calendar</span>
163
+ </a>
164
+ </li>
165
+
166
+
167
+
168
+
169
+
170
+ <li class="has-sub" >
171
+ <a class="sidenav-item-link" href="javascript:void(0)" data-toggle="collapse" data-target="#email"
172
+ aria-expanded="false" aria-controls="email">
173
+ <i class="mdi mdi-email"></i>
174
+ <span class="nav-text">email</span> <b class="caret"></b>
175
+ </a>
176
+ <ul class="collapse" id="email"
177
+ data-parent="#sidebar-menu">
178
+ <div class="sub-menu">
179
+
180
+
181
+
182
+ <li >
183
+ <a class="sidenav-item-link" href="email-inbox.html">
184
+ <span class="nav-text">Email Inbox</span>
185
+
186
+ </a>
187
+ </li>
188
+
189
+
190
+
191
+
192
+
193
+
194
+ <li >
195
+ <a class="sidenav-item-link" href="email-details.html">
196
+ <span class="nav-text">Email Details</span>
197
+
198
+ </a>
199
+ </li>
200
+
201
+
202
+
203
+
204
+
205
+
206
+ <li >
207
+ <a class="sidenav-item-link" href="email-compose.html">
208
+ <span class="nav-text">Email Compose</span>
209
+
210
+ </a>
211
+ </li>
212
+
213
+
214
+
215
+
216
+ </div>
217
+ </ul>
218
+ </li>
219
+
220
+
221
+
222
+
223
+
224
+ <li class="section-title">
225
+ UI Elements
226
+ </li>
227
+
228
+
229
+
230
+
231
+
232
+ <li class="has-sub" >
233
+ <a class="sidenav-item-link" href="javascript:void(0)" data-toggle="collapse" data-target="#ui-elements"
234
+ aria-expanded="false" aria-controls="ui-elements">
235
+ <i class="mdi mdi-folder-outline"></i>
236
+ <span class="nav-text">UI Components</span> <b class="caret"></b>
237
+ </a>
238
+ <ul class="collapse" id="ui-elements"
239
+ data-parent="#sidebar-menu">
240
+ <div class="sub-menu">
241
+
242
+
243
+
244
+ <li >
245
+ <a class="sidenav-item-link" href="alert.html">
246
+ <span class="nav-text">Alert</span>
247
+
248
+ </a>
249
+ </li>
250
+
251
+
252
+
253
+
254
+
255
+
256
+ <li >
257
+ <a class="sidenav-item-link" href="badge.html">
258
+ <span class="nav-text">Badge</span>
259
+
260
+ </a>
261
+ </li>
262
+
263
+
264
+
265
+
266
+
267
+
268
+ <li >
269
+ <a class="sidenav-item-link" href="breadcrumb.html">
270
+ <span class="nav-text">Breadcrumb</span>
271
+
272
+ </a>
273
+ </li>
274
+
275
+
276
+
277
+
278
+
279
+ <li class="has-sub" >
280
+ <a class="sidenav-item-link" href="javascript:void(0)" data-toggle="collapse" data-target="#buttons"
281
+ aria-expanded="false" aria-controls="buttons">
282
+ <span class="nav-text">Buttons</span> <b class="caret"></b>
283
+ </a>
284
+ <ul class="collapse" id="buttons">
285
+ <div class="sub-menu">
286
+
287
+ <li >
288
+ <a href="button-default.html">Button Default</a>
289
+ </li>
290
+
291
+ <li >
292
+ <a href="button-dropdown.html">Button Dropdown</a>
293
+ </li>
294
+
295
+ <li >
296
+ <a href="button-group.html">Button Group</a>
297
+ </li>
298
+
299
+ <li >
300
+ <a href="button-social.html">Button Social</a>
301
+ </li>
302
+
303
+ <li >
304
+ <a href="button-loading.html">Button Loading</a>
305
+ </li>
306
+
307
+ </div>
308
+ </ul>
309
+ </li>
310
+
311
+
312
+
313
+
314
+
315
+ <li >
316
+ <a class="sidenav-item-link" href="card.html">
317
+ <span class="nav-text">Card</span>
318
+
319
+ </a>
320
+ </li>
321
+
322
+
323
+
324
+
325
+
326
+
327
+ <li >
328
+ <a class="sidenav-item-link" href="carousel.html">
329
+ <span class="nav-text">Carousel</span>
330
+
331
+ </a>
332
+ </li>
333
+
334
+
335
+
336
+
337
+
338
+
339
+ <li >
340
+ <a class="sidenav-item-link" href="collapse.html">
341
+ <span class="nav-text">Collapse</span>
342
+
343
+ </a>
344
+ </li>
345
+
346
+
347
+
348
+
349
+
350
+
351
+ <li >
352
+ <a class="sidenav-item-link" href="editor.html">
353
+ <span class="nav-text">Editor</span>
354
+
355
+ </a>
356
+ </li>
357
+
358
+
359
+
360
+
361
+
362
+
363
+ <li >
364
+ <a class="sidenav-item-link" href="list-group.html">
365
+ <span class="nav-text">List Group</span>
366
+
367
+ </a>
368
+ </li>
369
+
370
+
371
+
372
+
373
+
374
+
375
+ <li >
376
+ <a class="sidenav-item-link" href="modal.html">
377
+ <span class="nav-text">Modal</span>
378
+
379
+ </a>
380
+ </li>
381
+
382
+
383
+
384
+
385
+
386
+
387
+ <li >
388
+ <a class="sidenav-item-link" href="pagination.html">
389
+ <span class="nav-text">Pagination</span>
390
+
391
+ </a>
392
+ </li>
393
+
394
+
395
+
396
+
397
+
398
+
399
+ <li >
400
+ <a class="sidenav-item-link" href="popover-tooltip.html">
401
+ <span class="nav-text">Popover & Tooltip</span>
402
+
403
+ </a>
404
+ </li>
405
+
406
+
407
+
408
+
409
+
410
+
411
+ <li >
412
+ <a class="sidenav-item-link" href="progress-bar.html">
413
+ <span class="nav-text">Progress Bar</span>
414
+
415
+ </a>
416
+ </li>
417
+
418
+
419
+
420
+
421
+
422
+
423
+ <li >
424
+ <a class="sidenav-item-link" href="spinner.html">
425
+ <span class="nav-text">Spinner</span>
426
+
427
+ </a>
428
+ </li>
429
+
430
+
431
+
432
+
433
+
434
+
435
+ <li >
436
+ <a class="sidenav-item-link" href="switches.html">
437
+ <span class="nav-text">Switches</span>
438
+
439
+ </a>
440
+ </li>
441
+
442
+
443
+
444
+
445
+
446
+ <li class="has-sub" >
447
+ <a class="sidenav-item-link" href="javascript:void(0)" data-toggle="collapse" data-target="#tables"
448
+ aria-expanded="false" aria-controls="tables">
449
+ <span class="nav-text">Tables</span> <b class="caret"></b>
450
+ </a>
451
+ <ul class="collapse" id="tables">
452
+ <div class="sub-menu">
453
+
454
+ <li >
455
+ <a href="bootstarp-tables.html">Bootstrap Tables</a>
456
+ </li>
457
+
458
+ <li >
459
+ <a href="data-tables.html">Data Tables</a>
460
+ </li>
461
+
462
+ </div>
463
+ </ul>
464
+ </li>
465
+
466
+
467
+
468
+
469
+
470
+ <li >
471
+ <a class="sidenav-item-link" href="tab.html">
472
+ <span class="nav-text">Tab</span>
473
+
474
+ </a>
475
+ </li>
476
+
477
+
478
+
479
+
480
+
481
+
482
+ <li >
483
+ <a class="sidenav-item-link" href="toaster.html">
484
+ <span class="nav-text">Toaster</span>
485
+
486
+ </a>
487
+ </li>
488
+
489
+
490
+
491
+
492
+
493
+ <li class="has-sub" >
494
+ <a class="sidenav-item-link" href="javascript:void(0)" data-toggle="collapse" data-target="#icons"
495
+ aria-expanded="false" aria-controls="icons">
496
+ <span class="nav-text">Icons</span> <b class="caret"></b>
497
+ </a>
498
+ <ul class="collapse" id="icons">
499
+ <div class="sub-menu">
500
+
501
+ <li >
502
+ <a href="material-icons.html">Material Icon</a>
503
+ </li>
504
+
505
+ <li >
506
+ <a href="flag-icons.html">Flag Icon</a>
507
+ </li>
508
+
509
+ </div>
510
+ </ul>
511
+ </li>
512
+
513
+
514
+
515
+
516
+ <li class="has-sub" >
517
+ <a class="sidenav-item-link" href="javascript:void(0)" data-toggle="collapse" data-target="#forms"
518
+ aria-expanded="false" aria-controls="forms">
519
+ <span class="nav-text">Forms</span> <b class="caret"></b>
520
+ </a>
521
+ <ul class="collapse" id="forms">
522
+ <div class="sub-menu">
523
+
524
+ <li >
525
+ <a href="basic-input.html">Basic Input</a>
526
+ </li>
527
+
528
+ <li >
529
+ <a href="input-group.html">Input Group</a>
530
+ </li>
531
+
532
+ <li >
533
+ <a href="checkbox-radio.html">Checkbox & Radio</a>
534
+ </li>
535
+
536
+ <li >
537
+ <a href="form-validation.html">Form Validation</a>
538
+ </li>
539
+
540
+ <li >
541
+ <a href="form-advance.html">Form Advance</a>
542
+ </li>
543
+
544
+ </div>
545
+ </ul>
546
+ </li>
547
+
548
+
549
+
550
+
551
+ <li class="has-sub" >
552
+ <a class="sidenav-item-link" href="javascript:void(0)" data-toggle="collapse" data-target="#maps"
553
+ aria-expanded="false" aria-controls="maps">
554
+ <span class="nav-text">Maps</span> <b class="caret"></b>
555
+ </a>
556
+ <ul class="collapse" id="maps">
557
+ <div class="sub-menu">
558
+
559
+ <li >
560
+ <a href="google-maps.html">Google Map</a>
561
+ </li>
562
+
563
+ <li >
564
+ <a href="vector-maps.html">Vector Map</a>
565
+ </li>
566
+
567
+ </div>
568
+ </ul>
569
+ </li>
570
+
571
+
572
+
573
+
574
+ <li class="has-sub" >
575
+ <a class="sidenav-item-link" href="javascript:void(0)" data-toggle="collapse" data-target="#widgets"
576
+ aria-expanded="false" aria-controls="widgets">
577
+ <span class="nav-text">Widgets</span> <b class="caret"></b>
578
+ </a>
579
+ <ul class="collapse" id="widgets">
580
+ <div class="sub-menu">
581
+
582
+ <li >
583
+ <a href="widgets-general.html">General Widget</a>
584
+ </li>
585
+
586
+ <li >
587
+ <a href="widgets-chart.html">Chart Widget</a>
588
+ </li>
589
+
590
+ </div>
591
+ </ul>
592
+ </li>
593
+
594
+
595
+
596
+ </div>
597
+ </ul>
598
+ </li>
599
+
600
+
601
+
602
+
603
+
604
+ <li class="has-sub" >
605
+ <a class="sidenav-item-link" href="javascript:void(0)" data-toggle="collapse" data-target="#charts"
606
+ aria-expanded="false" aria-controls="charts">
607
+ <i class="mdi mdi-chart-pie"></i>
608
+ <span class="nav-text">Charts</span> <b class="caret"></b>
609
+ </a>
610
+ <ul class="collapse" id="charts"
611
+ data-parent="#sidebar-menu">
612
+ <div class="sub-menu">
613
+
614
+
615
+
616
+ <li >
617
+ <a class="sidenav-item-link" href="apex-charts.html">
618
+ <span class="nav-text">Apex Charts</span>
619
+
620
+ </a>
621
+ </li>
622
+
623
+
624
+
625
+
626
+ </div>
627
+ </ul>
628
+ </li>
629
+
630
+
631
+
632
+
633
+
634
+ <li class="section-title">
635
+ Pages
636
+ </li>
637
+
638
+
639
+
640
+
641
+
642
+ <li class="has-sub" >
643
+ <a class="sidenav-item-link" href="javascript:void(0)" data-toggle="collapse" data-target="#users"
644
+ aria-expanded="false" aria-controls="users">
645
+ <i class="mdi mdi-image-filter-none"></i>
646
+ <span class="nav-text">User</span> <b class="caret"></b>
647
+ </a>
648
+ <ul class="collapse" id="users"
649
+ data-parent="#sidebar-menu">
650
+ <div class="sub-menu">
651
+
652
+
653
+
654
+ <li >
655
+ <a class="sidenav-item-link" href="user-profile.html">
656
+ <span class="nav-text">User Profile</span>
657
+
658
+ </a>
659
+ </li>
660
+
661
+
662
+
663
+
664
+
665
+
666
+ <li >
667
+ <a class="sidenav-item-link" href="user-activities.html">
668
+ <span class="nav-text">User Activities</span>
669
+
670
+ </a>
671
+ </li>
672
+
673
+
674
+
675
+
676
+
677
+
678
+ <li >
679
+ <a class="sidenav-item-link" href="user-profile-settings.html">
680
+ <span class="nav-text">User Profile Settings</span>
681
+
682
+ </a>
683
+ </li>
684
+
685
+
686
+
687
+
688
+
689
+
690
+ <li >
691
+ <a class="sidenav-item-link" href="user-account-settings.html">
692
+ <span class="nav-text">User Account Settings</span>
693
+
694
+ </a>
695
+ </li>
696
+
697
+
698
+
699
+
700
+
701
+
702
+ <li >
703
+ <a class="sidenav-item-link" href="user-planing-settings.html">
704
+ <span class="nav-text">User Planing Settings</span>
705
+
706
+ </a>
707
+ </li>
708
+
709
+
710
+
711
+
712
+
713
+
714
+ <li >
715
+ <a class="sidenav-item-link" href="user-billing.html">
716
+ <span class="nav-text">User billing</span>
717
+
718
+ </a>
719
+ </li>
720
+
721
+
722
+
723
+
724
+
725
+
726
+ <li >
727
+ <a class="sidenav-item-link" href="user-notify-settings.html">
728
+ <span class="nav-text">User Notify Settings</span>
729
+
730
+ </a>
731
+ </li>
732
+
733
+
734
+
735
+
736
+ </div>
737
+ </ul>
738
+ </li>
739
+
740
+
741
+
742
+
743
+
744
+ <li class="has-sub" >
745
+ <a class="sidenav-item-link" href="javascript:void(0)" data-toggle="collapse" data-target="#authentication"
746
+ aria-expanded="false" aria-controls="authentication">
747
+ <i class="mdi mdi-account"></i>
748
+ <span class="nav-text">Authentication</span> <b class="caret"></b>
749
+ </a>
750
+ <ul class="collapse" id="authentication"
751
+ data-parent="#sidebar-menu">
752
+ <div class="sub-menu">
753
+
754
+
755
+
756
+ <li >
757
+ <a class="sidenav-item-link" href="sign-in.html">
758
+ <span class="nav-text">Sign In</span>
759
+
760
+ </a>
761
+ </li>
762
+
763
+
764
+
765
+
766
+
767
+
768
+ <li >
769
+ <a class="sidenav-item-link" href="sign-up.html">
770
+ <span class="nav-text">Sign Up</span>
771
+
772
+ </a>
773
+ </li>
774
+
775
+
776
+
777
+
778
+
779
+
780
+ <li >
781
+ <a class="sidenav-item-link" href="reset-password.html">
782
+ <span class="nav-text">Reset Password</span>
783
+
784
+ </a>
785
+ </li>
786
+
787
+
788
+
789
+
790
+ </div>
791
+ </ul>
792
+ </li>
793
+
794
+
795
+
796
+
797
+
798
+ <li class="has-sub" >
799
+ <a class="sidenav-item-link" href="javascript:void(0)" data-toggle="collapse" data-target="#other-page"
800
+ aria-expanded="false" aria-controls="other-page">
801
+ <i class="mdi mdi-file-multiple"></i>
802
+ <span class="nav-text">Other pages</span> <b class="caret"></b>
803
+ </a>
804
+ <ul class="collapse" id="other-page"
805
+ data-parent="#sidebar-menu">
806
+ <div class="sub-menu">
807
+
808
+
809
+
810
+ <li >
811
+ <a class="sidenav-item-link" href="invoice.html">
812
+ <span class="nav-text">Invoice</span>
813
+
814
+ </a>
815
+ </li>
816
+
817
+
818
+
819
+
820
+
821
+
822
+ <li >
823
+ <a class="sidenav-item-link" href="404.html">
824
+ <span class="nav-text">404 page</span>
825
+
826
+ </a>
827
+ </li>
828
+
829
+
830
+
831
+
832
+
833
+
834
+ <li >
835
+ <a class="sidenav-item-link" href="page-comingsoon.html">
836
+ <span class="nav-text">Coming Soon</span>
837
+
838
+ </a>
839
+ </li>
840
+
841
+
842
+
843
+
844
+
845
+
846
+ <li >
847
+ <a class="sidenav-item-link" href="page-maintenance.html">
848
+ <span class="nav-text">Maintenance</span>
849
+
850
+ </a>
851
+ </li>
852
+
853
+
854
+
855
+
856
+ </div>
857
+ </ul>
858
+ </li>
859
+
860
+
861
+
862
+
863
+
864
+ <li class="section-title">
865
+ Documentation
866
+ </li>
867
+
868
+
869
+
870
+
871
+
872
+ <li
873
+ >
874
+ <a class="sidenav-item-link" href="getting-started.html">
875
+ <i class="mdi mdi-airplane"></i>
876
+ <span class="nav-text">Getting Started</span>
877
+ </a>
878
+ </li>
879
+
880
+
881
+
882
+
883
+
884
+ <li class="has-sub" >
885
+ <a class="sidenav-item-link" href="javascript:void(0)" data-toggle="collapse" data-target="#customization"
886
+ aria-expanded="false" aria-controls="customization">
887
+ <i class="mdi mdi-square-edit-outline"></i>
888
+ <span class="nav-text">Customization</span> <b class="caret"></b>
889
+ </a>
890
+ <ul class="collapse" id="customization"
891
+ data-parent="#sidebar-menu">
892
+ <div class="sub-menu">
893
+
894
+
895
+
896
+ <li >
897
+ <a class="sidenav-item-link" href="navbar-customization.html">
898
+ <span class="nav-text">Navbar</span>
899
+
900
+ </a>
901
+ </li>
902
+
903
+
904
+
905
+
906
+
907
+
908
+ <li >
909
+ <a class="sidenav-item-link" href="sidebar-customization.html">
910
+ <span class="nav-text">Sidebar</span>
911
+
912
+ </a>
913
+ </li>
914
+
915
+
916
+
917
+
918
+
919
+
920
+ <li >
921
+ <a class="sidenav-item-link" href="styling.html">
922
+ <span class="nav-text">Styling</span>
923
+
924
+ </a>
925
+ </li>
926
+
927
+
928
+
929
+
930
+ </div>
931
+ </ul>
932
+ </li>
933
+
934
+
935
+
936
+ </ul>
937
+
938
+ </div>
939
+
940
+ <div class="sidebar-footer">
941
+ <div class="sidebar-footer-content">
942
+ <ul class="d-flex">
943
+ <li>
944
+ <a href="user-account-settings.html" data-toggle="tooltip" title="Profile settings"><i class="mdi mdi-settings"></i></a></li>
945
+ <li>
946
+ <a href="#" data-toggle="tooltip" title="No chat messages"><i class="mdi mdi-chat-processing"></i></a>
947
+ </li>
948
+ </ul>
949
+ </div>
950
+ </div>
951
+ </div>
952
+ </aside>
953
+
954
+
955
+
956
+ <!-- ====================================
957
+ ——— PAGE WRAPPER
958
+ ===================================== -->
959
+ <div class="page-wrapper">
960
+
961
+ <!-- Header -->
962
+ <header class="main-header" id="header">
963
+ <nav class="navbar navbar-expand-lg navbar-light" id="navbar">
964
+ <!-- Sidebar toggle button -->
965
+ <button id="sidebar-toggler" class="sidebar-toggle">
966
+ <span class="sr-only">Toggle navigation</span>
967
+ </button>
968
+
969
+ <span class="page-title"></span>
970
+
971
+ <div class="navbar-right ">
972
+
973
+ <!-- search form -->
974
+ <div class="search-form">
975
+ <form action="index.html" method="get">
976
+ <div class="input-group input-group-sm" id="input-group-search">
977
+ <input type="text" autocomplete="off" name="query" id="search-input" class="form-control" placeholder="Search..." />
978
+ <div class="input-group-append">
979
+ <button class="btn" type="button">/</button>
980
+ </div>
981
+ </div>
982
+ </form>
983
+ <ul class="dropdown-menu dropdown-menu-search">
984
+
985
+ <li class="nav-item">
986
+ <a class="nav-link" href="index.html">Morbi leo risus</a>
987
+ </li>
988
+ <li class="nav-item">
989
+ <a class="nav-link" href="index.html">Dapibus ac facilisis in</a>
990
+ </li>
991
+ <li class="nav-item">
992
+ <a class="nav-link" href="index.html">Porta ac consectetur ac</a>
993
+ </li>
994
+ <li class="nav-item">
995
+ <a class="nav-link" href="index.html">Vestibulum at eros</a>
996
+ </li>
997
+
998
+ </ul>
999
+
1000
+ </div>
1001
+
1002
+ <ul class="nav navbar-nav">
1003
+ <!-- Offcanvas -->
1004
+ <li class="custom-dropdown">
1005
+ <a class="offcanvas-toggler active custom-dropdown-toggler" data-offcanvas="contact-off" href="javascript:" >
1006
+ <i class="mdi mdi-contacts icon"></i>
1007
+ </a>
1008
+ </li>
1009
+ <li class="custom-dropdown">
1010
+ <button class="notify-toggler custom-dropdown-toggler">
1011
+ <i class="mdi mdi-bell-outline icon"></i>
1012
+ <span class="badge badge-xs rounded-circle">21</span>
1013
+ </button>
1014
+ <div class="dropdown-notify">
1015
+
1016
+ <header>
1017
+ <div class="nav nav-underline" id="nav-tab" role="tablist">
1018
+ <a class="nav-item nav-link active" id="all-tabs" data-toggle="tab" href="#all" role="tab" aria-controls="nav-home"
1019
+ aria-selected="true">All (5)</a>
1020
+ <a class="nav-item nav-link" id="message-tab" data-toggle="tab" href="#message" role="tab" aria-controls="nav-profile"
1021
+ aria-selected="false">Msgs (4)</a>
1022
+ <a class="nav-item nav-link" id="other-tab" data-toggle="tab" href="#other" role="tab" aria-controls="nav-contact"
1023
+ aria-selected="false">Others (3)</a>
1024
+ </div>
1025
+ </header>
1026
+
1027
+ <div class="" data-simplebar style="height: 325px;">
1028
+ <div class="tab-content" id="myTabContent">
1029
+
1030
+ <div class="tab-pane fade show active" id="all" role="tabpanel" aria-labelledby="all-tabs">
1031
+
1032
+ <div class="media media-sm bg-warning-10 p-4 mb-0">
1033
+ <div class="media-sm-wrapper">
1034
+ <a href="user-profile.html">
1035
+ <img src="images/user/user-sm-02.jpg" alt="User Image">
1036
+ </a>
1037
+ </div>
1038
+ <div class="media-body">
1039
+ <a href="user-profile.html">
1040
+ <span class="title mb-0">John Doe</span>
1041
+ <span class="discribe">Extremity sweetness difficult behaviour he of. On disposal of as landlord horrible. Afraid at highly months do things on at.</span>
1042
+ <span class="time">
1043
+ <time>Just now</time>...
1044
+ </span>
1045
+ </a>
1046
+ </div>
1047
+ </div>
1048
+
1049
+ <div class="media media-sm p-4 bg-light mb-0">
1050
+ <div class="media-sm-wrapper bg-primary">
1051
+ <a href="user-profile.html">
1052
+ <i class="mdi mdi-calendar-check-outline"></i>
1053
+ </a>
1054
+ </div>
1055
+ <div class="media-body">
1056
+ <a href="user-profile.html">
1057
+ <span class="title mb-0">New event added</span>
1058
+ <span class="discribe">1/3/2014 (1pm - 2pm)</span>
1059
+ <span class="time">
1060
+ <time>10 min ago...</time>...
1061
+ </span>
1062
+ </a>
1063
+ </div>
1064
+ </div>
1065
+
1066
+ <div class="media media-sm p-4 mb-0">
1067
+ <div class="media-sm-wrapper">
1068
+ <a href="user-profile.html">
1069
+ <img src="images/user/user-sm-03.jpg" alt="User Image">
1070
+ </a>
1071
+ </div>
1072
+ <div class="media-body">
1073
+ <a href="user-profile.html">
1074
+ <span class="title mb-0">Sagge Hudson</span>
1075
+ <span class="discribe">On disposal of as landlord Afraid at highly months do things on at.</span>
1076
+ <span class="time">
1077
+ <time>1 hrs ago</time>...
1078
+ </span>
1079
+ </a>
1080
+ </div>
1081
+ </div>
1082
+
1083
+ <div class="media media-sm p-4 mb-0">
1084
+ <div class="media-sm-wrapper bg-info-dark">
1085
+ <a href="user-profile.html">
1086
+ <i class="mdi mdi-account-multiple-check"></i>
1087
+ </a>
1088
+ </div>
1089
+ <div class="media-body">
1090
+ <a href="user-profile.html">
1091
+ <span class="title mb-0">Add request</span>
1092
+ <span class="discribe">Add Dany Jones as your contact.</span>
1093
+ <div class="buttons">
1094
+ <a href="#" class="btn btn-sm btn-success shadow-none text-white">accept</a>
1095
+ <a href="#" class="btn btn-sm shadow-none">delete</a>
1096
+ </div>
1097
+ <span class="time">
1098
+ <time>6 hrs ago</time>...
1099
+ </span>
1100
+ </a>
1101
+ </div>
1102
+ </div>
1103
+
1104
+ <div class="media media-sm p-4 mb-0">
1105
+ <div class="media-sm-wrapper bg-info">
1106
+ <a href="user-profile.html">
1107
+ <i class="mdi mdi-playlist-check"></i>
1108
+ </a>
1109
+ </div>
1110
+ <div class="media-body">
1111
+ <a href="user-profile.html">
1112
+ <span class="title mb-0">Task complete</span>
1113
+ <span class="discribe">Afraid at highly months do things on at.</span>
1114
+ <span class="time">
1115
+ <time>1 hrs ago</time>...
1116
+ </span>
1117
+ </a>
1118
+ </div>
1119
+ </div>
1120
+
1121
+ </div>
1122
+
1123
+ <div class="tab-pane fade" id="message" role="tabpanel" aria-labelledby="message-tab">
1124
+
1125
+ <div class="media media-sm p-4 mb-0">
1126
+ <div class="media-sm-wrapper">
1127
+ <a href="user-profile.html">
1128
+ <img src="images/user/user-sm-01.jpg" alt="User Image">
1129
+ </a>
1130
+ </div>
1131
+ <div class="media-body">
1132
+ <a href="user-profile.html">
1133
+ <span class="title mb-0">Selena Wagner</span>
1134
+ <span class="discribe">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</span>
1135
+ <span class="time">
1136
+ <time>15 min ago</time>...
1137
+ </span>
1138
+ </a>
1139
+ </div>
1140
+ </div>
1141
+
1142
+ <div class="media media-sm p-4 mb-0">
1143
+ <div class="media-sm-wrapper">
1144
+ <a href="user-profile.html">
1145
+ <img src="images/user/user-sm-03.jpg" alt="User Image">
1146
+ </a>
1147
+ </div>
1148
+ <div class="media-body">
1149
+ <a href="user-profile.html">
1150
+ <span class="title mb-0">Sagge Hudson</span>
1151
+ <span class="discribe">On disposal of as landlord Afraid at highly months do things on at.</span>
1152
+ <span class="time">
1153
+ <time>1 hrs ago</time>...
1154
+ </span>
1155
+ </a>
1156
+ </div>
1157
+ </div>
1158
+
1159
+ <div class="media media-sm bg-warning-10 p-4 mb-0">
1160
+ <div class="media-sm-wrapper">
1161
+ <a href="user-profile.html">
1162
+ <img src="images/user/user-sm-02.jpg" alt="User Image">
1163
+ </a>
1164
+ </div>
1165
+ <div class="media-body">
1166
+ <a href="user-profile.html">
1167
+ <span class="title mb-0">John Doe</span>
1168
+ <span class="discribe">Extremity sweetness difficult behaviour he of. On disposal of as landlord horrible. Afraid
1169
+ at highly months do things on at.</span>
1170
+ <span class="time">
1171
+ <time>Just now</time>...
1172
+ </span>
1173
+ </a>
1174
+ </div>
1175
+ </div>
1176
+
1177
+ <div class="media media-sm p-4 mb-0">
1178
+ <div class="media-sm-wrapper">
1179
+ <a href="user-profile.html">
1180
+ <img src="images/user/user-sm-04.jpg" alt="User Image">
1181
+ </a>
1182
+ </div>
1183
+ <div class="media-body">
1184
+ <a href="user-profile.html">
1185
+ <span class="title mb-0">Albrecht Straub</span>
1186
+ <span class="discribe"> Beatae quia natus assumenda laboriosam, nisi perferendis aliquid consectetur expedita non tenetur.</span>
1187
+ <span class="time">
1188
+ <time>Just now</time>...
1189
+ </span>
1190
+ </a>
1191
+ </div>
1192
+ </div>
1193
+
1194
+ </div>
1195
+ <div class="tab-pane fade" id="other" role="tabpanel" aria-labelledby="contact-tab">
1196
+
1197
+ <div class="media media-sm p-4 bg-light mb-0">
1198
+ <div class="media-sm-wrapper bg-primary">
1199
+ <a href="user-profile.html">
1200
+ <i class="mdi mdi-calendar-check-outline"></i>
1201
+ </a>
1202
+ </div>
1203
+ <div class="media-body">
1204
+ <a href="user-profile.html">
1205
+ <span class="title mb-0">New event added</span>
1206
+ <span class="discribe">1/3/2014 (1pm - 2pm)</span>
1207
+ <span class="time">
1208
+ <time>10 min ago...</time>...
1209
+ </span>
1210
+ </a>
1211
+ </div>
1212
+ </div>
1213
+
1214
+ <div class="media media-sm p-4 mb-0">
1215
+ <div class="media-sm-wrapper bg-info-dark">
1216
+ <a href="user-profile.html">
1217
+ <i class="mdi mdi-account-multiple-check"></i>
1218
+ </a>
1219
+ </div>
1220
+ <div class="media-body">
1221
+ <a href="user-profile.html">
1222
+ <span class="title mb-0">Add request</span>
1223
+ <span class="discribe">Add Dany Jones as your contact.</span>
1224
+ <div class="buttons">
1225
+ <a href="#" class="btn btn-sm btn-success shadow-none text-white">accept</a>
1226
+ <a href="#" class="btn btn-sm shadow-none">delete</a>
1227
+ </div>
1228
+ <span class="time">
1229
+ <time>6 hrs ago</time>...
1230
+ </span>
1231
+ </a>
1232
+ </div>
1233
+ </div>
1234
+
1235
+ <div class="media media-sm p-4 mb-0">
1236
+ <div class="media-sm-wrapper bg-info">
1237
+ <a href="user-profile.html">
1238
+ <i class="mdi mdi-playlist-check"></i>
1239
+ </a>
1240
+ </div>
1241
+ <div class="media-body">
1242
+ <a href="user-profile.html">
1243
+ <span class="title mb-0">Task complete</span>
1244
+ <span class="discribe">Afraid at highly months do things on at.</span>
1245
+ <span class="time">
1246
+ <time>1 hrs ago</time>...
1247
+ </span>
1248
+ </a>
1249
+ </div>
1250
+ </div>
1251
+
1252
+ </div>
1253
+ </div>
1254
+ </div>
1255
+
1256
+ <footer class="border-top dropdown-notify-footer">
1257
+ <div class="d-flex justify-content-between align-items-center py-2 px-4">
1258
+ <span>Last updated 3 min ago</span>
1259
+ <a id="refress-button" href="javascript:" class="btn mdi mdi-cached btn-refress"></a>
1260
+ </div>
1261
+ </footer>
1262
+ </div>
1263
+ </li>
1264
+ <!-- User Account -->
1265
+ <li class="dropdown user-menu">
1266
+ <button class="dropdown-toggle nav-link" data-toggle="dropdown">
1267
+ <img src="images/user/user-xs-01.jpg" class="user-image rounded-circle" alt="User Image" />
1268
+ <span class="d-none d-lg-inline-block">John Doe</span>
1269
+ </button>
1270
+ <ul class="dropdown-menu dropdown-menu-right">
1271
+ <li>
1272
+ <a class="dropdown-link-item" href="user-profile.html">
1273
+ <i class="mdi mdi-account-outline"></i>
1274
+ <span class="nav-text">My Profile</span>
1275
+ </a>
1276
+ </li>
1277
+ <li>
1278
+ <a class="dropdown-link-item" href="email-inbox.html">
1279
+ <i class="mdi mdi-email-outline"></i>
1280
+ <span class="nav-text">Message</span>
1281
+ <span class="badge badge-pill badge-primary">24</span>
1282
+ </a>
1283
+ </li>
1284
+ <li>
1285
+ <a class="dropdown-link-item" href="user-activities.html">
1286
+ <i class="mdi mdi-diamond-stone"></i>
1287
+ <span class="nav-text">Activitise</span></a>
1288
+ </li>
1289
+ <li>
1290
+ <a class="dropdown-link-item" href="user-account-settings.html">
1291
+ <i class="mdi mdi-settings"></i>
1292
+ <span class="nav-text">Account Setting</span>
1293
+ </a>
1294
+ </li>
1295
+
1296
+ <li class="dropdown-footer">
1297
+ <a class="dropdown-link-item" href="sign-in.html"> <i class="mdi mdi-logout"></i> Log Out </a>
1298
+ </li>
1299
+ </ul>
1300
+ </li>
1301
+ </ul>
1302
+ </div>
1303
+ </nav>
1304
+
1305
+
1306
+ </header>
1307
+
1308
+ <!-- ====================================
1309
+ ——— CONTENT WRAPPER
1310
+ ===================================== -->
1311
+ <div class="content-wrapper">
1312
+ <div class="content"><div class="card card-default border-0 bg-transparent">
1313
+ <div class="card-header align-items-center p-0">
1314
+ <h2>Calendar</h2>
1315
+
1316
+ <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#modal-add-event">
1317
+ <i class="mdi mdi-plus mr-1"></i> Add New Event
1318
+ </button>
1319
+ </div>
1320
+ </div>
1321
+
1322
+ <div class="card card-default">
1323
+ <div class="card-body p-0">
1324
+ <div class="full-calendar">
1325
+ <div id='calendar'></div>
1326
+ </div>
1327
+ </div>
1328
+ </div>
1329
+
1330
+ <div class="card card-default">
1331
+ <div class="card-header card-header-border-bottom d-flex justify-content-between align-items-center">
1332
+ <h2>How to use</h2>
1333
+
1334
+ <a href="https://codepen.io/iamabdus/pen/OJPZxMg" target="_blank" class="btn btn-outline-primary btn-sm text-uppercase">
1335
+ <i class="mdi mdi-codepen mr-1"></i> Open with codepen
1336
+ </a>
1337
+ </div>
1338
+
1339
+ <div class="card-body">
1340
+ <div class="mb-5">
1341
+ <h5 class="text-dark mb-3">FullCalendar</h5>
1342
+
1343
+ <p>We are using the FullCalendar plugin for this calendar app. This is a great plugin for displaying events with details in a tooltip. You can change an event's name or other associated data and add a new event. It is up to you to add this functionality through FullCalendar's event hooks. Check <a href="http://fullcalendar.io/" target="_blank">FullCalendar documentation</a> for more details.</p>
1344
+ </div>
1345
+
1346
+ <ul class="nav nav-tabs" id="myTab" role="tablist">
1347
+ <li class="nav-item">
1348
+ <a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true"><i class="mdi mdi-language-javascript mr-1"></i> Javascript</a>
1349
+ </li>
1350
+
1351
+ <li class="nav-item">
1352
+ <a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false"><i class="mdi mdi-language-html5 mr-1"></i> HTML</a>
1353
+ </li>
1354
+
1355
+ <li class="nav-item">
1356
+ <a class="nav-link" id="contact-tab" data-toggle="tab" href="#contact" role="tab" aria-controls="contact" aria-selected="false"><i class="mdi mdi-language-css3 mr-1"></i> CSS</a>
1357
+ </li>
1358
+ </ul>
1359
+ <div class="tab-content" id="myTabContent1">
1360
+ <div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">
1361
+
1362
+ <pre class="mt-4 m-0 pre-code">
1363
+ document.addEventListener('DOMContentLoaded', function() {
1364
+ var calendarEl = document.getElementById('calendar');
1365
+ var calendar = new FullCalendar.Calendar(calendarEl, {
1366
+ plugins: [ 'dayGrid' ],
1367
+ defaultView: 'dayGridMonth',
1368
+ eventRender: function(info) {
1369
+ var ntoday = moment().format('YYYYMMDD');
1370
+ var eventStart = moment( info.event.start ).format('YYYYMMDD');
1371
+ info.el.setAttribute("title", info.event.extendedProps.description);
1372
+ info.el.setAttribute("data-toggle", "tooltip");
1373
+ if (eventStart &lt; ntoday){
1374
+ info.el.classList.add("fc-past-event");
1375
+ } else if (eventStart == ntoday){
1376
+ info.el.classList.add("fc-current-event");
1377
+ } else {
1378
+ info.el.classList.add("fc-future-event");
1379
+ }
1380
+ },
1381
+
1382
+ events: [
1383
+ {
1384
+ title: 'All Day Event',
1385
+ description: 'description for All Day Event',
1386
+ start: '2020-01-01'
1387
+ }
1388
+ // more events here
1389
+ ]
1390
+ });
1391
+ calendar.render();
1392
+ });
1393
+ </pre>
1394
+
1395
+ <pre class="mt-4 m-0">
1396
+ <code>&lt;script src="plugins/fullcalendar/core-4.3.1/main.min.js"&gt;&lt;/script&gt;</code>
1397
+ <code>&lt;script src="plugins/fullcalendar/daygrid-4.3.0/main.min.js"&gt;&lt;/script&gt;</code>
1398
+ <code>&lt;script src="js/calendar.js"&gt;&lt;/script&gt;</code>
1399
+ </pre>
1400
+ </div>
1401
+
1402
+ <div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">
1403
+ <pre class="mt-4 m-0">
1404
+ &lt;div id="calendar"&gt;&lt;/div&gt;
1405
+ </pre>
1406
+ </div>
1407
+
1408
+ <div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab">
1409
+ <pre class="mt-4 m-0">
1410
+ <code>&lt;link href="plugins/fullcalendar/core-4.3.1/main.min.css" rel="stylesheet"&gt;</code>
1411
+ <code>&lt;link href="plugins/fullcalendar/daygrid-4.3.0/main.min.css" rel="stylesheet"&gt;</code>
1412
+ </pre>
1413
+ </div>
1414
+ </div>
1415
+ </div>
1416
+ </div>
1417
+
1418
+ <!-- Add Event Button -->
1419
+ <div class="modal fade" id="modal-add-event" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle"
1420
+ aria-hidden="true">
1421
+ <div class="modal-dialog modal-dialog-centered modal-lg" role="document">
1422
+ <div class="modal-content">
1423
+ <form>
1424
+ <div class="modal-header px-4">
1425
+ <h5 class="modal-title" id="exampleModalCenterTitle">Add New Event</h5>
1426
+
1427
+ <button type="button" class="close" data-dismiss="modal" aria-label="Close">
1428
+ <span aria-hidden="true">&times;</span>
1429
+ </button>
1430
+ </div>
1431
+
1432
+ <div class="modal-body px-4">
1433
+
1434
+ <div class="form-group">
1435
+ <label for="firstName">Title</label>
1436
+ <input type="text" class="form-control" value="Meeting">
1437
+ </div>
1438
+
1439
+ <div class="row">
1440
+ <div class="col-lg-6">
1441
+ <div class="form-group">
1442
+ <label for="firstName">Date</label>
1443
+ <div class="input-group mb-2">
1444
+ <div class="input-group-prepend">
1445
+ <span class="input-group-text py-1">
1446
+ <i class="mdi mdi-calendar-range"></i>
1447
+ </span>
1448
+ </div>
1449
+ <input type="text" class="form-control" name="dateRange" value="" placeholder="Date"/>
1450
+ </div>
1451
+ </div>
1452
+ </div>
1453
+
1454
+ <div class="col-lg-6">
1455
+ <div class="form-group">
1456
+ <label for="exampleFormControlSelect3">Time</label>
1457
+ <select class="form-control" id="exampleFormControlSelect3">
1458
+ <option>10:00am</option>
1459
+ <option>10:30am</option>
1460
+ <option>11am</option>
1461
+ <option>11:30am</option>
1462
+ <option>12:00pm</option>
1463
+ </select>
1464
+ </div>
1465
+ </div>
1466
+ </div>
1467
+
1468
+ <div class="form-group mb-0">
1469
+ <label for="firstName">Description</label>
1470
+ <textarea class="form-control" id="exampleFormControlTextarea1" rows="5"></textarea>
1471
+ </div>
1472
+ </div>
1473
+
1474
+ <div class="modal-footer border-top-0 px-4 pt-0">
1475
+ <button type="button" class="btn btn-primary btn-pill m-0">Creat Event</button>
1476
+ </div>
1477
+ </form>
1478
+ </div>
1479
+ </div>
1480
+ </div></div>
1481
+
1482
+ </div>
1483
+
1484
+ <!-- Footer -->
1485
+ <footer class="footer mt-auto">
1486
+ <div class="copyright bg-white">
1487
+ <p>
1488
+ &copy; <span id="copy-year"></span> Copyright Mono Dashboard Bootstrap Template by <a class="text-primary" href="http://www.iamabdus.com/" target="_blank" >Abdus</a>.
1489
+ </p>
1490
+ </div>
1491
+ <script>
1492
+ var d = new Date();
1493
+ var year = d.getFullYear();
1494
+ document.getElementById("copy-year").innerHTML = year;
1495
+ </script>
1496
+ </footer>
1497
+
1498
+ </div>
1499
+ </div>
1500
+
1501
+ <!-- Card Offcanvas -->
1502
+ <div class="card card-offcanvas" id="contact-off" >
1503
+ <div class="card-header">
1504
+ <h2>Contacts</h2>
1505
+ <a href="#" class="btn btn-primary btn-pill px-4">Add New</a>
1506
+ </div>
1507
+ <div class="card-body">
1508
+
1509
+ <div class="mb-4">
1510
+ <input type="text" class="form-control form-control-lg form-control-secondary rounded-0" placeholder="Search contacts...">
1511
+ </div>
1512
+
1513
+ <div class="media media-sm">
1514
+ <div class="media-sm-wrapper">
1515
+ <a href="user-profile.html">
1516
+ <img src="images/user/user-sm-01.jpg" alt="User Image">
1517
+ <span class="active bg-primary"></span>
1518
+ </a>
1519
+ </div>
1520
+ <div class="media-body">
1521
+ <a href="user-profile.html">
1522
+ <span class="title">Selena Wagner</span>
1523
+ <span class="discribe">Designer</span>
1524
+ </a>
1525
+ </div>
1526
+ </div>
1527
+
1528
+ <div class="media media-sm">
1529
+ <div class="media-sm-wrapper">
1530
+ <a href="user-profile.html">
1531
+ <img src="images/user/user-sm-02.jpg" alt="User Image">
1532
+ <span class="active bg-primary"></span>
1533
+ </a>
1534
+ </div>
1535
+ <div class="media-body">
1536
+ <a href="user-profile.html">
1537
+ <span class="title">Walter Reuter</span>
1538
+ <span>Developer</span>
1539
+ </a>
1540
+ </div>
1541
+ </div>
1542
+
1543
+ <div class="media media-sm">
1544
+ <div class="media-sm-wrapper">
1545
+ <a href="user-profile.html">
1546
+ <img src="images/user/user-sm-03.jpg" alt="User Image">
1547
+ </a>
1548
+ </div>
1549
+ <div class="media-body">
1550
+ <a href="user-profile.html">
1551
+ <span class="title">Larissa Gebhardt</span>
1552
+ <span>Cyber Punk</span>
1553
+ </a>
1554
+ </div>
1555
+ </div>
1556
+
1557
+ <div class="media media-sm">
1558
+ <div class="media-sm-wrapper">
1559
+ <a href="user-profile.html">
1560
+ <img src="images/user/user-sm-04.jpg" alt="User Image">
1561
+ </a>
1562
+
1563
+ </div>
1564
+ <div class="media-body">
1565
+ <a href="user-profile.html">
1566
+ <span class="title">Albrecht Straub</span>
1567
+ <span>Photographer</span>
1568
+ </a>
1569
+ </div>
1570
+ </div>
1571
+
1572
+ <div class="media media-sm">
1573
+ <div class="media-sm-wrapper">
1574
+ <a href="user-profile.html">
1575
+ <img src="images/user/user-sm-05.jpg" alt="User Image">
1576
+ <span class="active bg-danger"></span>
1577
+ </a>
1578
+ </div>
1579
+ <div class="media-body">
1580
+ <a href="user-profile.html">
1581
+ <span class="title">Leopold Ebert</span>
1582
+ <span>Fashion Designer</span>
1583
+ </a>
1584
+ </div>
1585
+ </div>
1586
+
1587
+ <div class="media media-sm">
1588
+ <div class="media-sm-wrapper">
1589
+ <a href="user-profile.html">
1590
+ <img src="images/user/user-sm-06.jpg" alt="User Image">
1591
+ <span class="active bg-primary"></span>
1592
+ </a>
1593
+ </div>
1594
+ <div class="media-body">
1595
+ <a href="user-profile.html">
1596
+ <span class="title">Selena Wagner</span>
1597
+ <span>Photographer</span>
1598
+ </a>
1599
+ </div>
1600
+ </div>
1601
+
1602
+ </div>
1603
+ </div>
1604
+
1605
+
1606
+
1607
+
1608
+ <script src="plugins/jquery/jquery.min.js"></script>
1609
+ <script src="plugins/bootstrap/js/bootstrap.bundle.min.js"></script>
1610
+ <script src="plugins/simplebar/simplebar.min.js"></script>
1611
+ <script src="https://unpkg.com/hotkeys-js/dist/hotkeys.min.js"></script>
1612
+
1613
+
1614
+
1615
+ <script src='assets/plugins/fullcalendar/core-4.3.1/main.min.js'></script>
1616
+ <script src='assets/plugins/fullcalendar/daygrid-4.3.0/main.min.js'></script>
1617
+ <script src='assets/js/calendar.js'></script>
1618
+
1619
+
1620
+
1621
+ <script src="plugins/daterangepicker/moment.min.js"></script>
1622
+ <script src="plugins/daterangepicker/daterangepicker.js"></script>
1623
+ <script>
1624
+ jQuery(document).ready(function() {
1625
+ jQuery('input[name="dateRange"]').daterangepicker({
1626
+ autoUpdateInput: false,
1627
+ singleDatePicker: true,
1628
+ locale: {
1629
+ cancelLabel: 'Clear'
1630
+ }
1631
+ });
1632
+ jQuery('input[name="dateRange"]').on('apply.daterangepicker', function (ev, picker) {
1633
+ jQuery(this).val(picker.startDate.format('MM/DD/YYYY'));
1634
+ });
1635
+ jQuery('input[name="dateRange"]').on('cancel.daterangepicker', function (ev, picker) {
1636
+ jQuery(this).val('');
1637
+ });
1638
+ });
1639
+ </script>
1640
+
1641
+
1642
+ <script src="js/mono.js"></script>
1643
+ <script src="js/chart.js"></script>
1644
+ <script src="js/map.js"></script>
1645
+ <script src="js/custom.js"></script>
1646
+
1647
+
1648
+
1649
+
1650
+ <!-- -->
1651
+
1652
+
1653
+ </body>
1654
+ </html>
card.html ADDED
@@ -0,0 +1,2233 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+
3
+ <!--
4
+ // WEBSITE: https://themefisher.com
5
+ // TWITTER: https://twitter.com/themefisher
6
+ // FACEBOOK: https://www.facebook.com/themefisher
7
+ // GITHUB: https://github.com/themefisher/
8
+ -->
9
+
10
+ <html lang="en" dir="ltr">
11
+ <head>
12
+ <meta charset="utf-8" />
13
+ <meta http-equiv="X-UA-Compatible" content="IE=edge" />
14
+ <meta name="viewport" content="width=device-width, initial-scale=1" />
15
+
16
+ <title>Mono - Responsive Admin & Dashboard Template</title>
17
+
18
+ <!-- GOOGLE FONTS -->
19
+ <link href="https://fonts.googleapis.com/css?family=Karla:400,700|Roboto" rel="stylesheet">
20
+ <link href="plugins/material/css/materialdesignicons.min.css" rel="stylesheet" />
21
+ <link href="plugins/simplebar/simplebar.css" rel="stylesheet" />
22
+
23
+ <!-- PLUGINS CSS STYLE -->
24
+ <link href="plugins/nprogress/nprogress.css" rel="stylesheet" />
25
+
26
+
27
+ <link href="plugins/prism/prism.css" rel="stylesheet" />
28
+
29
+
30
+ <!-- MONO CSS -->
31
+ <link id="main-css-href" rel="stylesheet" href="css/style.css" />
32
+
33
+
34
+
35
+
36
+ <!-- FAVICON -->
37
+ <link href="images/favicon.png" rel="shortcut icon" />
38
+
39
+ <!--
40
+ HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries
41
+ -->
42
+ <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
43
+ <!--[if lt IE 9]>
44
+ <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
45
+ <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
46
+ <![endif]-->
47
+ <script src="plugins/nprogress/nprogress.js"></script>
48
+ </head>
49
+
50
+
51
+ <body class="navbar-fixed sidebar-fixed" id="body">
52
+ <script>
53
+ NProgress.configure({ showSpinner: false });
54
+ NProgress.start();
55
+ </script>
56
+
57
+
58
+
59
+ <!-- ====================================
60
+ ——— WRAPPER
61
+ ===================================== -->
62
+ <div class="wrapper">
63
+
64
+
65
+ <!-- ====================================
66
+ ——— LEFT SIDEBAR WITH OUT FOOTER
67
+ ===================================== -->
68
+ <aside class="left-sidebar sidebar-dark" id="left-sidebar">
69
+ <div id="sidebar" class="sidebar sidebar-with-footer">
70
+ <!-- Aplication Brand -->
71
+ <div class="app-brand">
72
+ <a href="/index.html">
73
+ <img src="images/logo.png" alt="Mono">
74
+ <span class="brand-name">MONO</span>
75
+ </a>
76
+ </div>
77
+ <!-- begin sidebar scrollbar -->
78
+ <div class="sidebar-left" data-simplebar style="height: 100%;">
79
+ <!-- sidebar menu -->
80
+ <ul class="nav sidebar-inner" id="sidebar-menu">
81
+
82
+
83
+
84
+ <li
85
+ >
86
+ <a class="sidenav-item-link" href="index.html">
87
+ <i class="mdi mdi-briefcase-account-outline"></i>
88
+ <span class="nav-text">Business Dashboard</span>
89
+ </a>
90
+ </li>
91
+
92
+
93
+
94
+
95
+
96
+ <li
97
+ >
98
+ <a class="sidenav-item-link" href="analytics.html">
99
+ <i class="mdi mdi-chart-line"></i>
100
+ <span class="nav-text">Analytics Dashboard</span>
101
+ </a>
102
+ </li>
103
+
104
+
105
+
106
+
107
+
108
+ <li class="section-title">
109
+ Apps
110
+ </li>
111
+
112
+
113
+
114
+
115
+
116
+ <li
117
+ >
118
+ <a class="sidenav-item-link" href="chat.html">
119
+ <i class="mdi mdi-wechat"></i>
120
+ <span class="nav-text">Chat</span>
121
+ </a>
122
+ </li>
123
+
124
+
125
+
126
+
127
+
128
+ <li
129
+ >
130
+ <a class="sidenav-item-link" href="contacts.html">
131
+ <i class="mdi mdi-phone"></i>
132
+ <span class="nav-text">Contacts</span>
133
+ </a>
134
+ </li>
135
+
136
+
137
+
138
+
139
+
140
+ <li
141
+ >
142
+ <a class="sidenav-item-link" href="team.html">
143
+ <i class="mdi mdi-account-group"></i>
144
+ <span class="nav-text">Team</span>
145
+ </a>
146
+ </li>
147
+
148
+
149
+
150
+
151
+
152
+ <li
153
+ >
154
+ <a class="sidenav-item-link" href="calendar.html">
155
+ <i class="mdi mdi-calendar-check"></i>
156
+ <span class="nav-text">Calendar</span>
157
+ </a>
158
+ </li>
159
+
160
+
161
+
162
+
163
+
164
+ <li class="has-sub" >
165
+ <a class="sidenav-item-link" href="javascript:void(0)" data-toggle="collapse" data-target="#email"
166
+ aria-expanded="false" aria-controls="email">
167
+ <i class="mdi mdi-email"></i>
168
+ <span class="nav-text">email</span> <b class="caret"></b>
169
+ </a>
170
+ <ul class="collapse" id="email"
171
+ data-parent="#sidebar-menu">
172
+ <div class="sub-menu">
173
+
174
+
175
+
176
+ <li >
177
+ <a class="sidenav-item-link" href="email-inbox.html">
178
+ <span class="nav-text">Email Inbox</span>
179
+
180
+ </a>
181
+ </li>
182
+
183
+
184
+
185
+
186
+
187
+
188
+ <li >
189
+ <a class="sidenav-item-link" href="email-details.html">
190
+ <span class="nav-text">Email Details</span>
191
+
192
+ </a>
193
+ </li>
194
+
195
+
196
+
197
+
198
+
199
+
200
+ <li >
201
+ <a class="sidenav-item-link" href="email-compose.html">
202
+ <span class="nav-text">Email Compose</span>
203
+
204
+ </a>
205
+ </li>
206
+
207
+
208
+
209
+
210
+ </div>
211
+ </ul>
212
+ </li>
213
+
214
+
215
+
216
+
217
+
218
+ <li class="section-title">
219
+ UI Elements
220
+ </li>
221
+
222
+
223
+
224
+
225
+
226
+ <li class="has-sub active expand" >
227
+ <a class="sidenav-item-link" href="javascript:void(0)" data-toggle="collapse" data-target="#ui-elements"
228
+ aria-expanded="false" aria-controls="ui-elements">
229
+ <i class="mdi mdi-folder-outline"></i>
230
+ <span class="nav-text">UI Components</span> <b class="caret"></b>
231
+ </a>
232
+ <ul class="collapse show" id="ui-elements"
233
+ data-parent="#sidebar-menu">
234
+ <div class="sub-menu">
235
+
236
+
237
+
238
+ <li >
239
+ <a class="sidenav-item-link" href="alert.html">
240
+ <span class="nav-text">Alert</span>
241
+
242
+ </a>
243
+ </li>
244
+
245
+
246
+
247
+
248
+
249
+
250
+ <li >
251
+ <a class="sidenav-item-link" href="badge.html">
252
+ <span class="nav-text">Badge</span>
253
+
254
+ </a>
255
+ </li>
256
+
257
+
258
+
259
+
260
+
261
+
262
+ <li >
263
+ <a class="sidenav-item-link" href="breadcrumb.html">
264
+ <span class="nav-text">Breadcrumb</span>
265
+
266
+ </a>
267
+ </li>
268
+
269
+
270
+
271
+
272
+
273
+ <li class="has-sub" >
274
+ <a class="sidenav-item-link" href="javascript:void(0)" data-toggle="collapse" data-target="#buttons"
275
+ aria-expanded="false" aria-controls="buttons">
276
+ <span class="nav-text">Buttons</span> <b class="caret"></b>
277
+ </a>
278
+ <ul class="collapse" id="buttons">
279
+ <div class="sub-menu">
280
+
281
+ <li >
282
+ <a href="button-default.html">Button Default</a>
283
+ </li>
284
+
285
+ <li >
286
+ <a href="button-dropdown.html">Button Dropdown</a>
287
+ </li>
288
+
289
+ <li >
290
+ <a href="button-group.html">Button Group</a>
291
+ </li>
292
+
293
+ <li >
294
+ <a href="button-social.html">Button Social</a>
295
+ </li>
296
+
297
+ <li >
298
+ <a href="button-loading.html">Button Loading</a>
299
+ </li>
300
+
301
+ </div>
302
+ </ul>
303
+ </li>
304
+
305
+
306
+
307
+
308
+
309
+ <li class="active" >
310
+ <a class="sidenav-item-link" href="card.html">
311
+ <span class="nav-text">Card</span>
312
+
313
+ </a>
314
+ </li>
315
+
316
+
317
+
318
+
319
+
320
+
321
+ <li >
322
+ <a class="sidenav-item-link" href="carousel.html">
323
+ <span class="nav-text">Carousel</span>
324
+
325
+ </a>
326
+ </li>
327
+
328
+
329
+
330
+
331
+
332
+
333
+ <li >
334
+ <a class="sidenav-item-link" href="collapse.html">
335
+ <span class="nav-text">Collapse</span>
336
+
337
+ </a>
338
+ </li>
339
+
340
+
341
+
342
+
343
+
344
+
345
+ <li >
346
+ <a class="sidenav-item-link" href="editor.html">
347
+ <span class="nav-text">Editor</span>
348
+
349
+ </a>
350
+ </li>
351
+
352
+
353
+
354
+
355
+
356
+
357
+ <li >
358
+ <a class="sidenav-item-link" href="list-group.html">
359
+ <span class="nav-text">List Group</span>
360
+
361
+ </a>
362
+ </li>
363
+
364
+
365
+
366
+
367
+
368
+
369
+ <li >
370
+ <a class="sidenav-item-link" href="modal.html">
371
+ <span class="nav-text">Modal</span>
372
+
373
+ </a>
374
+ </li>
375
+
376
+
377
+
378
+
379
+
380
+
381
+ <li >
382
+ <a class="sidenav-item-link" href="pagination.html">
383
+ <span class="nav-text">Pagination</span>
384
+
385
+ </a>
386
+ </li>
387
+
388
+
389
+
390
+
391
+
392
+
393
+ <li >
394
+ <a class="sidenav-item-link" href="popover-tooltip.html">
395
+ <span class="nav-text">Popover & Tooltip</span>
396
+
397
+ </a>
398
+ </li>
399
+
400
+
401
+
402
+
403
+
404
+
405
+ <li >
406
+ <a class="sidenav-item-link" href="progress-bar.html">
407
+ <span class="nav-text">Progress Bar</span>
408
+
409
+ </a>
410
+ </li>
411
+
412
+
413
+
414
+
415
+
416
+
417
+ <li >
418
+ <a class="sidenav-item-link" href="spinner.html">
419
+ <span class="nav-text">Spinner</span>
420
+
421
+ </a>
422
+ </li>
423
+
424
+
425
+
426
+
427
+
428
+
429
+ <li >
430
+ <a class="sidenav-item-link" href="switches.html">
431
+ <span class="nav-text">Switches</span>
432
+
433
+ </a>
434
+ </li>
435
+
436
+
437
+
438
+
439
+
440
+ <li class="has-sub" >
441
+ <a class="sidenav-item-link" href="javascript:void(0)" data-toggle="collapse" data-target="#tables"
442
+ aria-expanded="false" aria-controls="tables">
443
+ <span class="nav-text">Tables</span> <b class="caret"></b>
444
+ </a>
445
+ <ul class="collapse" id="tables">
446
+ <div class="sub-menu">
447
+
448
+ <li >
449
+ <a href="bootstarp-tables.html">Bootstrap Tables</a>
450
+ </li>
451
+
452
+ <li >
453
+ <a href="data-tables.html">Data Tables</a>
454
+ </li>
455
+
456
+ </div>
457
+ </ul>
458
+ </li>
459
+
460
+
461
+
462
+
463
+
464
+ <li >
465
+ <a class="sidenav-item-link" href="tab.html">
466
+ <span class="nav-text">Tab</span>
467
+
468
+ </a>
469
+ </li>
470
+
471
+
472
+
473
+
474
+
475
+
476
+ <li >
477
+ <a class="sidenav-item-link" href="toaster.html">
478
+ <span class="nav-text">Toaster</span>
479
+
480
+ </a>
481
+ </li>
482
+
483
+
484
+
485
+
486
+
487
+ <li class="has-sub" >
488
+ <a class="sidenav-item-link" href="javascript:void(0)" data-toggle="collapse" data-target="#icons"
489
+ aria-expanded="false" aria-controls="icons">
490
+ <span class="nav-text">Icons</span> <b class="caret"></b>
491
+ </a>
492
+ <ul class="collapse" id="icons">
493
+ <div class="sub-menu">
494
+
495
+ <li >
496
+ <a href="material-icons.html">Material Icon</a>
497
+ </li>
498
+
499
+ <li >
500
+ <a href="flag-icons.html">Flag Icon</a>
501
+ </li>
502
+
503
+ </div>
504
+ </ul>
505
+ </li>
506
+
507
+
508
+
509
+
510
+ <li class="has-sub" >
511
+ <a class="sidenav-item-link" href="javascript:void(0)" data-toggle="collapse" data-target="#forms"
512
+ aria-expanded="false" aria-controls="forms">
513
+ <span class="nav-text">Forms</span> <b class="caret"></b>
514
+ </a>
515
+ <ul class="collapse" id="forms">
516
+ <div class="sub-menu">
517
+
518
+ <li >
519
+ <a href="basic-input.html">Basic Input</a>
520
+ </li>
521
+
522
+ <li >
523
+ <a href="input-group.html">Input Group</a>
524
+ </li>
525
+
526
+ <li >
527
+ <a href="checkbox-radio.html">Checkbox & Radio</a>
528
+ </li>
529
+
530
+ <li >
531
+ <a href="form-validation.html">Form Validation</a>
532
+ </li>
533
+
534
+ <li >
535
+ <a href="form-advance.html">Form Advance</a>
536
+ </li>
537
+
538
+ </div>
539
+ </ul>
540
+ </li>
541
+
542
+
543
+
544
+
545
+ <li class="has-sub" >
546
+ <a class="sidenav-item-link" href="javascript:void(0)" data-toggle="collapse" data-target="#maps"
547
+ aria-expanded="false" aria-controls="maps">
548
+ <span class="nav-text">Maps</span> <b class="caret"></b>
549
+ </a>
550
+ <ul class="collapse" id="maps">
551
+ <div class="sub-menu">
552
+
553
+ <li >
554
+ <a href="google-maps.html">Google Map</a>
555
+ </li>
556
+
557
+ <li >
558
+ <a href="vector-maps.html">Vector Map</a>
559
+ </li>
560
+
561
+ </div>
562
+ </ul>
563
+ </li>
564
+
565
+
566
+
567
+
568
+ <li class="has-sub" >
569
+ <a class="sidenav-item-link" href="javascript:void(0)" data-toggle="collapse" data-target="#widgets"
570
+ aria-expanded="false" aria-controls="widgets">
571
+ <span class="nav-text">Widgets</span> <b class="caret"></b>
572
+ </a>
573
+ <ul class="collapse" id="widgets">
574
+ <div class="sub-menu">
575
+
576
+ <li >
577
+ <a href="widgets-general.html">General Widget</a>
578
+ </li>
579
+
580
+ <li >
581
+ <a href="widgets-chart.html">Chart Widget</a>
582
+ </li>
583
+
584
+ </div>
585
+ </ul>
586
+ </li>
587
+
588
+
589
+
590
+ </div>
591
+ </ul>
592
+ </li>
593
+
594
+
595
+
596
+
597
+
598
+ <li class="has-sub" >
599
+ <a class="sidenav-item-link" href="javascript:void(0)" data-toggle="collapse" data-target="#charts"
600
+ aria-expanded="false" aria-controls="charts">
601
+ <i class="mdi mdi-chart-pie"></i>
602
+ <span class="nav-text">Charts</span> <b class="caret"></b>
603
+ </a>
604
+ <ul class="collapse" id="charts"
605
+ data-parent="#sidebar-menu">
606
+ <div class="sub-menu">
607
+
608
+
609
+
610
+ <li >
611
+ <a class="sidenav-item-link" href="apex-charts.html">
612
+ <span class="nav-text">Apex Charts</span>
613
+
614
+ </a>
615
+ </li>
616
+
617
+
618
+
619
+
620
+ </div>
621
+ </ul>
622
+ </li>
623
+
624
+
625
+
626
+
627
+
628
+ <li class="section-title">
629
+ Pages
630
+ </li>
631
+
632
+
633
+
634
+
635
+
636
+ <li class="has-sub" >
637
+ <a class="sidenav-item-link" href="javascript:void(0)" data-toggle="collapse" data-target="#users"
638
+ aria-expanded="false" aria-controls="users">
639
+ <i class="mdi mdi-image-filter-none"></i>
640
+ <span class="nav-text">User</span> <b class="caret"></b>
641
+ </a>
642
+ <ul class="collapse" id="users"
643
+ data-parent="#sidebar-menu">
644
+ <div class="sub-menu">
645
+
646
+
647
+
648
+ <li >
649
+ <a class="sidenav-item-link" href="user-profile.html">
650
+ <span class="nav-text">User Profile</span>
651
+
652
+ </a>
653
+ </li>
654
+
655
+
656
+
657
+
658
+
659
+
660
+ <li >
661
+ <a class="sidenav-item-link" href="user-activities.html">
662
+ <span class="nav-text">User Activities</span>
663
+
664
+ </a>
665
+ </li>
666
+
667
+
668
+
669
+
670
+
671
+
672
+ <li >
673
+ <a class="sidenav-item-link" href="user-profile-settings.html">
674
+ <span class="nav-text">User Profile Settings</span>
675
+
676
+ </a>
677
+ </li>
678
+
679
+
680
+
681
+
682
+
683
+
684
+ <li >
685
+ <a class="sidenav-item-link" href="user-account-settings.html">
686
+ <span class="nav-text">User Account Settings</span>
687
+
688
+ </a>
689
+ </li>
690
+
691
+
692
+
693
+
694
+
695
+
696
+ <li >
697
+ <a class="sidenav-item-link" href="user-planing-settings.html">
698
+ <span class="nav-text">User Planing Settings</span>
699
+
700
+ </a>
701
+ </li>
702
+
703
+
704
+
705
+
706
+
707
+
708
+ <li >
709
+ <a class="sidenav-item-link" href="user-billing.html">
710
+ <span class="nav-text">User billing</span>
711
+
712
+ </a>
713
+ </li>
714
+
715
+
716
+
717
+
718
+
719
+
720
+ <li >
721
+ <a class="sidenav-item-link" href="user-notify-settings.html">
722
+ <span class="nav-text">User Notify Settings</span>
723
+
724
+ </a>
725
+ </li>
726
+
727
+
728
+
729
+
730
+ </div>
731
+ </ul>
732
+ </li>
733
+
734
+
735
+
736
+
737
+
738
+ <li class="has-sub" >
739
+ <a class="sidenav-item-link" href="javascript:void(0)" data-toggle="collapse" data-target="#authentication"
740
+ aria-expanded="false" aria-controls="authentication">
741
+ <i class="mdi mdi-account"></i>
742
+ <span class="nav-text">Authentication</span> <b class="caret"></b>
743
+ </a>
744
+ <ul class="collapse" id="authentication"
745
+ data-parent="#sidebar-menu">
746
+ <div class="sub-menu">
747
+
748
+
749
+
750
+ <li >
751
+ <a class="sidenav-item-link" href="sign-in.html">
752
+ <span class="nav-text">Sign In</span>
753
+
754
+ </a>
755
+ </li>
756
+
757
+
758
+
759
+
760
+
761
+
762
+ <li >
763
+ <a class="sidenav-item-link" href="sign-up.html">
764
+ <span class="nav-text">Sign Up</span>
765
+
766
+ </a>
767
+ </li>
768
+
769
+
770
+
771
+
772
+
773
+
774
+ <li >
775
+ <a class="sidenav-item-link" href="reset-password.html">
776
+ <span class="nav-text">Reset Password</span>
777
+
778
+ </a>
779
+ </li>
780
+
781
+
782
+
783
+
784
+ </div>
785
+ </ul>
786
+ </li>
787
+
788
+
789
+
790
+
791
+
792
+ <li class="has-sub" >
793
+ <a class="sidenav-item-link" href="javascript:void(0)" data-toggle="collapse" data-target="#other-page"
794
+ aria-expanded="false" aria-controls="other-page">
795
+ <i class="mdi mdi-file-multiple"></i>
796
+ <span class="nav-text">Other pages</span> <b class="caret"></b>
797
+ </a>
798
+ <ul class="collapse" id="other-page"
799
+ data-parent="#sidebar-menu">
800
+ <div class="sub-menu">
801
+
802
+
803
+
804
+ <li >
805
+ <a class="sidenav-item-link" href="invoice.html">
806
+ <span class="nav-text">Invoice</span>
807
+
808
+ </a>
809
+ </li>
810
+
811
+
812
+
813
+
814
+
815
+
816
+ <li >
817
+ <a class="sidenav-item-link" href="404.html">
818
+ <span class="nav-text">404 page</span>
819
+
820
+ </a>
821
+ </li>
822
+
823
+
824
+
825
+
826
+
827
+
828
+ <li >
829
+ <a class="sidenav-item-link" href="page-comingsoon.html">
830
+ <span class="nav-text">Coming Soon</span>
831
+
832
+ </a>
833
+ </li>
834
+
835
+
836
+
837
+
838
+
839
+
840
+ <li >
841
+ <a class="sidenav-item-link" href="page-maintenance.html">
842
+ <span class="nav-text">Maintenance</span>
843
+
844
+ </a>
845
+ </li>
846
+
847
+
848
+
849
+
850
+ </div>
851
+ </ul>
852
+ </li>
853
+
854
+
855
+
856
+
857
+
858
+ <li class="section-title">
859
+ Documentation
860
+ </li>
861
+
862
+
863
+
864
+
865
+
866
+ <li
867
+ >
868
+ <a class="sidenav-item-link" href="getting-started.html">
869
+ <i class="mdi mdi-airplane"></i>
870
+ <span class="nav-text">Getting Started</span>
871
+ </a>
872
+ </li>
873
+
874
+
875
+
876
+
877
+
878
+ <li class="has-sub" >
879
+ <a class="sidenav-item-link" href="javascript:void(0)" data-toggle="collapse" data-target="#customization"
880
+ aria-expanded="false" aria-controls="customization">
881
+ <i class="mdi mdi-square-edit-outline"></i>
882
+ <span class="nav-text">Customization</span> <b class="caret"></b>
883
+ </a>
884
+ <ul class="collapse" id="customization"
885
+ data-parent="#sidebar-menu">
886
+ <div class="sub-menu">
887
+
888
+
889
+
890
+ <li >
891
+ <a class="sidenav-item-link" href="navbar-customization.html">
892
+ <span class="nav-text">Navbar</span>
893
+
894
+ </a>
895
+ </li>
896
+
897
+
898
+
899
+
900
+
901
+
902
+ <li >
903
+ <a class="sidenav-item-link" href="sidebar-customization.html">
904
+ <span class="nav-text">Sidebar</span>
905
+
906
+ </a>
907
+ </li>
908
+
909
+
910
+
911
+
912
+
913
+
914
+ <li >
915
+ <a class="sidenav-item-link" href="styling.html">
916
+ <span class="nav-text">Styling</span>
917
+
918
+ </a>
919
+ </li>
920
+
921
+
922
+
923
+
924
+ </div>
925
+ </ul>
926
+ </li>
927
+
928
+
929
+
930
+ </ul>
931
+
932
+ </div>
933
+
934
+ <div class="sidebar-footer">
935
+ <div class="sidebar-footer-content">
936
+ <ul class="d-flex">
937
+ <li>
938
+ <a href="user-account-settings.html" data-toggle="tooltip" title="Profile settings"><i class="mdi mdi-settings"></i></a></li>
939
+ <li>
940
+ <a href="#" data-toggle="tooltip" title="No chat messages"><i class="mdi mdi-chat-processing"></i></a>
941
+ </li>
942
+ </ul>
943
+ </div>
944
+ </div>
945
+ </div>
946
+ </aside>
947
+
948
+
949
+
950
+ <!-- ====================================
951
+ ——— PAGE WRAPPER
952
+ ===================================== -->
953
+ <div class="page-wrapper">
954
+
955
+ <!-- Header -->
956
+ <header class="main-header" id="header">
957
+ <nav class="navbar navbar-expand-lg navbar-light" id="navbar">
958
+ <!-- Sidebar toggle button -->
959
+ <button id="sidebar-toggler" class="sidebar-toggle">
960
+ <span class="sr-only">Toggle navigation</span>
961
+ </button>
962
+
963
+ <span class="page-title">card</span>
964
+
965
+ <div class="navbar-right ">
966
+
967
+ <!-- search form -->
968
+ <div class="search-form">
969
+ <form action="index.html" method="get">
970
+ <div class="input-group input-group-sm" id="input-group-search">
971
+ <input type="text" autocomplete="off" name="query" id="search-input" class="form-control" placeholder="Search..." />
972
+ <div class="input-group-append">
973
+ <button class="btn" type="button">/</button>
974
+ </div>
975
+ </div>
976
+ </form>
977
+ <ul class="dropdown-menu dropdown-menu-search">
978
+
979
+ <li class="nav-item">
980
+ <a class="nav-link" href="index.html">Morbi leo risus</a>
981
+ </li>
982
+ <li class="nav-item">
983
+ <a class="nav-link" href="index.html">Dapibus ac facilisis in</a>
984
+ </li>
985
+ <li class="nav-item">
986
+ <a class="nav-link" href="index.html">Porta ac consectetur ac</a>
987
+ </li>
988
+ <li class="nav-item">
989
+ <a class="nav-link" href="index.html">Vestibulum at eros</a>
990
+ </li>
991
+
992
+ </ul>
993
+
994
+ </div>
995
+
996
+ <ul class="nav navbar-nav">
997
+ <!-- Offcanvas -->
998
+ <li class="custom-dropdown">
999
+ <a class="offcanvas-toggler active custom-dropdown-toggler" data-offcanvas="contact-off" href="javascript:" >
1000
+ <i class="mdi mdi-contacts icon"></i>
1001
+ </a>
1002
+ </li>
1003
+ <li class="custom-dropdown">
1004
+ <button class="notify-toggler custom-dropdown-toggler">
1005
+ <i class="mdi mdi-bell-outline icon"></i>
1006
+ <span class="badge badge-xs rounded-circle">21</span>
1007
+ </button>
1008
+ <div class="dropdown-notify">
1009
+
1010
+ <header>
1011
+ <div class="nav nav-underline" id="nav-tab" role="tablist">
1012
+ <a class="nav-item nav-link active" id="all-tabs" data-toggle="tab" href="#all" role="tab" aria-controls="nav-home"
1013
+ aria-selected="true">All (5)</a>
1014
+ <a class="nav-item nav-link" id="message-tab" data-toggle="tab" href="#message" role="tab" aria-controls="nav-profile"
1015
+ aria-selected="false">Msgs (4)</a>
1016
+ <a class="nav-item nav-link" id="other-tab" data-toggle="tab" href="#other" role="tab" aria-controls="nav-contact"
1017
+ aria-selected="false">Others (3)</a>
1018
+ </div>
1019
+ </header>
1020
+
1021
+ <div class="" data-simplebar style="height: 325px;">
1022
+ <div class="tab-content" id="myTabContent">
1023
+
1024
+ <div class="tab-pane fade show active" id="all" role="tabpanel" aria-labelledby="all-tabs">
1025
+
1026
+ <div class="media media-sm bg-warning-10 p-4 mb-0">
1027
+ <div class="media-sm-wrapper">
1028
+ <a href="user-profile.html">
1029
+ <img src="images/user/user-sm-02.jpg" alt="User Image">
1030
+ </a>
1031
+ </div>
1032
+ <div class="media-body">
1033
+ <a href="user-profile.html">
1034
+ <span class="title mb-0">John Doe</span>
1035
+ <span class="discribe">Extremity sweetness difficult behaviour he of. On disposal of as landlord horrible. Afraid at highly months do things on at.</span>
1036
+ <span class="time">
1037
+ <time>Just now</time>...
1038
+ </span>
1039
+ </a>
1040
+ </div>
1041
+ </div>
1042
+
1043
+ <div class="media media-sm p-4 bg-light mb-0">
1044
+ <div class="media-sm-wrapper bg-primary">
1045
+ <a href="user-profile.html">
1046
+ <i class="mdi mdi-calendar-check-outline"></i>
1047
+ </a>
1048
+ </div>
1049
+ <div class="media-body">
1050
+ <a href="user-profile.html">
1051
+ <span class="title mb-0">New event added</span>
1052
+ <span class="discribe">1/3/2014 (1pm - 2pm)</span>
1053
+ <span class="time">
1054
+ <time>10 min ago...</time>...
1055
+ </span>
1056
+ </a>
1057
+ </div>
1058
+ </div>
1059
+
1060
+ <div class="media media-sm p-4 mb-0">
1061
+ <div class="media-sm-wrapper">
1062
+ <a href="user-profile.html">
1063
+ <img src="images/user/user-sm-03.jpg" alt="User Image">
1064
+ </a>
1065
+ </div>
1066
+ <div class="media-body">
1067
+ <a href="user-profile.html">
1068
+ <span class="title mb-0">Sagge Hudson</span>
1069
+ <span class="discribe">On disposal of as landlord Afraid at highly months do things on at.</span>
1070
+ <span class="time">
1071
+ <time>1 hrs ago</time>...
1072
+ </span>
1073
+ </a>
1074
+ </div>
1075
+ </div>
1076
+
1077
+ <div class="media media-sm p-4 mb-0">
1078
+ <div class="media-sm-wrapper bg-info-dark">
1079
+ <a href="user-profile.html">
1080
+ <i class="mdi mdi-account-multiple-check"></i>
1081
+ </a>
1082
+ </div>
1083
+ <div class="media-body">
1084
+ <a href="user-profile.html">
1085
+ <span class="title mb-0">Add request</span>
1086
+ <span class="discribe">Add Dany Jones as your contact.</span>
1087
+ <div class="buttons">
1088
+ <a href="#" class="btn btn-sm btn-success shadow-none text-white">accept</a>
1089
+ <a href="#" class="btn btn-sm shadow-none">delete</a>
1090
+ </div>
1091
+ <span class="time">
1092
+ <time>6 hrs ago</time>...
1093
+ </span>
1094
+ </a>
1095
+ </div>
1096
+ </div>
1097
+
1098
+ <div class="media media-sm p-4 mb-0">
1099
+ <div class="media-sm-wrapper bg-info">
1100
+ <a href="user-profile.html">
1101
+ <i class="mdi mdi-playlist-check"></i>
1102
+ </a>
1103
+ </div>
1104
+ <div class="media-body">
1105
+ <a href="user-profile.html">
1106
+ <span class="title mb-0">Task complete</span>
1107
+ <span class="discribe">Afraid at highly months do things on at.</span>
1108
+ <span class="time">
1109
+ <time>1 hrs ago</time>...
1110
+ </span>
1111
+ </a>
1112
+ </div>
1113
+ </div>
1114
+
1115
+ </div>
1116
+
1117
+ <div class="tab-pane fade" id="message" role="tabpanel" aria-labelledby="message-tab">
1118
+
1119
+ <div class="media media-sm p-4 mb-0">
1120
+ <div class="media-sm-wrapper">
1121
+ <a href="user-profile.html">
1122
+ <img src="images/user/user-sm-01.jpg" alt="User Image">
1123
+ </a>
1124
+ </div>
1125
+ <div class="media-body">
1126
+ <a href="user-profile.html">
1127
+ <span class="title mb-0">Selena Wagner</span>
1128
+ <span class="discribe">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</span>
1129
+ <span class="time">
1130
+ <time>15 min ago</time>...
1131
+ </span>
1132
+ </a>
1133
+ </div>
1134
+ </div>
1135
+
1136
+ <div class="media media-sm p-4 mb-0">
1137
+ <div class="media-sm-wrapper">
1138
+ <a href="user-profile.html">
1139
+ <img src="images/user/user-sm-03.jpg" alt="User Image">
1140
+ </a>
1141
+ </div>
1142
+ <div class="media-body">
1143
+ <a href="user-profile.html">
1144
+ <span class="title mb-0">Sagge Hudson</span>
1145
+ <span class="discribe">On disposal of as landlord Afraid at highly months do things on at.</span>
1146
+ <span class="time">
1147
+ <time>1 hrs ago</time>...
1148
+ </span>
1149
+ </a>
1150
+ </div>
1151
+ </div>
1152
+
1153
+ <div class="media media-sm bg-warning-10 p-4 mb-0">
1154
+ <div class="media-sm-wrapper">
1155
+ <a href="user-profile.html">
1156
+ <img src="images/user/user-sm-02.jpg" alt="User Image">
1157
+ </a>
1158
+ </div>
1159
+ <div class="media-body">
1160
+ <a href="user-profile.html">
1161
+ <span class="title mb-0">John Doe</span>
1162
+ <span class="discribe">Extremity sweetness difficult behaviour he of. On disposal of as landlord horrible. Afraid
1163
+ at highly months do things on at.</span>
1164
+ <span class="time">
1165
+ <time>Just now</time>...
1166
+ </span>
1167
+ </a>
1168
+ </div>
1169
+ </div>
1170
+
1171
+ <div class="media media-sm p-4 mb-0">
1172
+ <div class="media-sm-wrapper">
1173
+ <a href="user-profile.html">
1174
+ <img src="images/user/user-sm-04.jpg" alt="User Image">
1175
+ </a>
1176
+ </div>
1177
+ <div class="media-body">
1178
+ <a href="user-profile.html">
1179
+ <span class="title mb-0">Albrecht Straub</span>
1180
+ <span class="discribe"> Beatae quia natus assumenda laboriosam, nisi perferendis aliquid consectetur expedita non tenetur.</span>
1181
+ <span class="time">
1182
+ <time>Just now</time>...
1183
+ </span>
1184
+ </a>
1185
+ </div>
1186
+ </div>
1187
+
1188
+ </div>
1189
+ <div class="tab-pane fade" id="other" role="tabpanel" aria-labelledby="contact-tab">
1190
+
1191
+ <div class="media media-sm p-4 bg-light mb-0">
1192
+ <div class="media-sm-wrapper bg-primary">
1193
+ <a href="user-profile.html">
1194
+ <i class="mdi mdi-calendar-check-outline"></i>
1195
+ </a>
1196
+ </div>
1197
+ <div class="media-body">
1198
+ <a href="user-profile.html">
1199
+ <span class="title mb-0">New event added</span>
1200
+ <span class="discribe">1/3/2014 (1pm - 2pm)</span>
1201
+ <span class="time">
1202
+ <time>10 min ago...</time>...
1203
+ </span>
1204
+ </a>
1205
+ </div>
1206
+ </div>
1207
+
1208
+ <div class="media media-sm p-4 mb-0">
1209
+ <div class="media-sm-wrapper bg-info-dark">
1210
+ <a href="user-profile.html">
1211
+ <i class="mdi mdi-account-multiple-check"></i>
1212
+ </a>
1213
+ </div>
1214
+ <div class="media-body">
1215
+ <a href="user-profile.html">
1216
+ <span class="title mb-0">Add request</span>
1217
+ <span class="discribe">Add Dany Jones as your contact.</span>
1218
+ <div class="buttons">
1219
+ <a href="#" class="btn btn-sm btn-success shadow-none text-white">accept</a>
1220
+ <a href="#" class="btn btn-sm shadow-none">delete</a>
1221
+ </div>
1222
+ <span class="time">
1223
+ <time>6 hrs ago</time>...
1224
+ </span>
1225
+ </a>
1226
+ </div>
1227
+ </div>
1228
+
1229
+ <div class="media media-sm p-4 mb-0">
1230
+ <div class="media-sm-wrapper bg-info">
1231
+ <a href="user-profile.html">
1232
+ <i class="mdi mdi-playlist-check"></i>
1233
+ </a>
1234
+ </div>
1235
+ <div class="media-body">
1236
+ <a href="user-profile.html">
1237
+ <span class="title mb-0">Task complete</span>
1238
+ <span class="discribe">Afraid at highly months do things on at.</span>
1239
+ <span class="time">
1240
+ <time>1 hrs ago</time>...
1241
+ </span>
1242
+ </a>
1243
+ </div>
1244
+ </div>
1245
+
1246
+ </div>
1247
+ </div>
1248
+ </div>
1249
+
1250
+ <footer class="border-top dropdown-notify-footer">
1251
+ <div class="d-flex justify-content-between align-items-center py-2 px-4">
1252
+ <span>Last updated 3 min ago</span>
1253
+ <a id="refress-button" href="javascript:" class="btn mdi mdi-cached btn-refress"></a>
1254
+ </div>
1255
+ </footer>
1256
+ </div>
1257
+ </li>
1258
+ <!-- User Account -->
1259
+ <li class="dropdown user-menu">
1260
+ <button class="dropdown-toggle nav-link" data-toggle="dropdown">
1261
+ <img src="images/user/user-xs-01.jpg" class="user-image rounded-circle" alt="User Image" />
1262
+ <span class="d-none d-lg-inline-block">John Doe</span>
1263
+ </button>
1264
+ <ul class="dropdown-menu dropdown-menu-right">
1265
+ <li>
1266
+ <a class="dropdown-link-item" href="user-profile.html">
1267
+ <i class="mdi mdi-account-outline"></i>
1268
+ <span class="nav-text">My Profile</span>
1269
+ </a>
1270
+ </li>
1271
+ <li>
1272
+ <a class="dropdown-link-item" href="email-inbox.html">
1273
+ <i class="mdi mdi-email-outline"></i>
1274
+ <span class="nav-text">Message</span>
1275
+ <span class="badge badge-pill badge-primary">24</span>
1276
+ </a>
1277
+ </li>
1278
+ <li>
1279
+ <a class="dropdown-link-item" href="user-activities.html">
1280
+ <i class="mdi mdi-diamond-stone"></i>
1281
+ <span class="nav-text">Activitise</span></a>
1282
+ </li>
1283
+ <li>
1284
+ <a class="dropdown-link-item" href="user-account-settings.html">
1285
+ <i class="mdi mdi-settings"></i>
1286
+ <span class="nav-text">Account Setting</span>
1287
+ </a>
1288
+ </li>
1289
+
1290
+ <li class="dropdown-footer">
1291
+ <a class="dropdown-link-item" href="sign-in.html"> <i class="mdi mdi-logout"></i> Log Out </a>
1292
+ </li>
1293
+ </ul>
1294
+ </li>
1295
+ </ul>
1296
+ </div>
1297
+ </nav>
1298
+
1299
+
1300
+ </header>
1301
+
1302
+ <!-- ====================================
1303
+ ——— CONTENT WRAPPER
1304
+ ===================================== -->
1305
+ <div class="content-wrapper">
1306
+ <div class="content"><!-- For Components documentaion -->
1307
+ <div class="card card-default">
1308
+ <div class="px-6 py-4">
1309
+ <p>Mono provides a variety of <span class="text-secondary text-capitalize">Bootstrap Card</span> components with a little
1310
+ customization that suits its design standards. For more information, please see the official <a
1311
+ class="font-weight-bold" href="https://getbootstrap.com/docs/4.3/components/card/" target="_blank"> Bootstrap
1312
+ documentation.</a></p>
1313
+ </div>
1314
+ </div>
1315
+
1316
+ <!-- Basic Examples -->
1317
+ <div class="card card-default">
1318
+ <div class="card-header">
1319
+ <h2>Basic Examples</h2>
1320
+ <a class="btn mdi mdi-code-tags" data-toggle="collapse" href="#collapse-card-1" role="button"
1321
+ aria-expanded="false" aria-controls="collapse-card-1"> </a>
1322
+
1323
+
1324
+ </div>
1325
+ <div class="card-body">
1326
+ <div class="collapse" id="collapse-card-1">
1327
+ <pre class="language-html mb-4">
1328
+ <code>
1329
+
1330
+ &lt;div class="row">
1331
+ &lt;div class="col-lg-6 col-xl-3">
1332
+ &lt;div class="card mb-4">
1333
+ &lt;img class="card-img-top" src="images/elements/cc1.jpg">
1334
+ &lt;div class="card-body">
1335
+ &lt;h5 class="card-title ">Card Title&lt;/h5>
1336
+ &lt;p class="card-text pb-3">Lorem ipsum dolor sit amet, consectetur adipisicing elit sed do eiusmod tempor &lt;/p>
1337
+ &lt;a href="#" class="btn btn-outline-primary btn-pill">Go somewhere&lt;/a>
1338
+ &lt;/div>
1339
+ &lt;/div>
1340
+ &lt;/div>
1341
+
1342
+ &lt;div class="col-lg-6 col-xl-3">
1343
+ &lt;div class="card mb-4 p-0">
1344
+ &lt;h5 class="card-title pt-4 px-6">Card Title&lt;/h5>
1345
+ &lt;div class="card-body">
1346
+ &lt;img class="card-img-top mb-4 rounded" src="images/elements/cc1a.jpg">
1347
+ &lt;p class="card-text pb-3">Lorem ipsum dolor sit amet, consectetur adipisicing elit sed do eiusmod tempor &lt;/p>
1348
+ &lt;a href="#" class="btn btn-link px-0 mr-3">Go somewhere&lt;/a>
1349
+ &lt;a href="#" class="btn btn-link text-success px-0">Go somewhere&lt;/a>
1350
+ &lt;/div>
1351
+ &lt;/div>
1352
+ &lt;/div>
1353
+
1354
+ &lt;div class="col-lg-6 col-xl-3">
1355
+ &lt;div class="card mb-4 p-0">
1356
+ &lt;h5 class="card-title pt-4 px-6">Card Title&lt;/h5>
1357
+ &lt;div class="card-body">
1358
+ &lt;p class="card-text pb-2">Lorem ipsum dolor sit amet, consectetur adipisicing elit sed do eiusmod tempor &lt;/p>
1359
+ &lt;a href="#" class="btn btn-outline-primary btn-pill">Card Link&lt;/a>
1360
+ &lt;/div>
1361
+ &lt;img class="card-img rounded-0" src="images/elements/cc1b.jpg">
1362
+ &lt;/div>
1363
+ &lt;/div>
1364
+
1365
+ &lt;div class="col-lg-6 col-xl-3">
1366
+ &lt;div class="card mb-4">
1367
+ &lt;div class="card-body">
1368
+ &lt;h5 class="card-title mb-1">Card Title&lt;/h5>
1369
+ &lt;p class="pb-3">Sub-heading text&lt;/p>
1370
+ &lt;img class="mb-4 card-img" src="images/elements/cc1c.jpg">
1371
+ &lt;p class="card-text pb-2">Lorem ipsum dolor sit amet, consectetur adipisicing elit sed do eiusmod tempor &lt;/p>
1372
+ &lt;a href="#" class="btn btn-link px-0 text-info mr-3">Card Link&lt;/a>
1373
+ &lt;a href="#" class="btn btn-link px-0 text-danger">Card Link&lt;/a>
1374
+ &lt;/div>
1375
+ &lt;/div>
1376
+ &lt;/div>
1377
+ &lt;/div>
1378
+
1379
+ </code>
1380
+ </pre>
1381
+ </div>
1382
+ <div class="row">
1383
+ <div class="col-lg-6 col-xl-3">
1384
+ <div class="card mb-4">
1385
+ <img class="card-img-top" src="images/elements/cc1.jpg">
1386
+ <div class="card-body">
1387
+ <h5 class="card-title ">Card Title</h5>
1388
+ <p class="card-text pb-3">Lorem ipsum dolor sit amet, consectetur adipisicing elit sed do eiusmod tempor </p>
1389
+ <a href="#" class="btn btn-outline-primary btn-pill">Go somewhere</a>
1390
+ </div>
1391
+ </div>
1392
+ </div>
1393
+ <div class="col-lg-6 col-xl-3">
1394
+ <div class="card mb-4 p-0">
1395
+ <h5 class="card-title pt-4 px-6">Card Title</h5>
1396
+ <div class="card-body">
1397
+ <img class="card-img-top mb-4 rounded" src="images/elements/cc1a.jpg">
1398
+
1399
+ <p class="card-text pb-3">Lorem ipsum dolor sit amet, consectetur adipisicing elit sed do eiusmod tempor </p>
1400
+ <a href="#" class="btn btn-link px-0 mr-3">Go somewhere</a>
1401
+ <a href="#" class="btn btn-link text-success px-0">Go somewhere</a>
1402
+ </div>
1403
+ </div>
1404
+ </div>
1405
+ <div class="col-lg-6 col-xl-3">
1406
+ <div class="card mb-4 p-0">
1407
+ <h5 class="card-title pt-4 px-6">Card Title</h5>
1408
+
1409
+ <div class="card-body">
1410
+ <p class="card-text pb-2">Lorem ipsum dolor sit amet, consectetur adipisicing elit sed do eiusmod tempor </p>
1411
+ <a href="#" class="btn btn-outline-primary btn-pill">Card Link</a>
1412
+ </div>
1413
+ <img class="card-img rounded-0" src="images/elements/cc1b.jpg">
1414
+ </div>
1415
+ </div>
1416
+ <div class="col-lg-6 col-xl-3">
1417
+ <div class="card mb-4">
1418
+ <div class="card-body">
1419
+ <h5 class="card-title mb-1">Card Title</h5>
1420
+ <p class="pb-3">Sub-heading text</p>
1421
+ <img class="mb-4 card-img" src="images/elements/cc1c.jpg">
1422
+ <p class="card-text pb-2">Lorem ipsum dolor sit amet, consectetur adipisicing elit sed do eiusmod tempor </p>
1423
+ <a href="#" class="btn btn-link px-0 text-info mr-3">Card Link</a>
1424
+ <a href="#" class="btn btn-link px-0 text-danger">Card Link</a>
1425
+ </div>
1426
+ </div>
1427
+ </div>
1428
+ </div>
1429
+
1430
+ </div>
1431
+ </div>
1432
+
1433
+ <!-- Horizontal Cards -->
1434
+ <div class="card card-default">
1435
+ <div class="card-header">
1436
+ <h2>Horizontal Cards</h2>
1437
+ <a class="btn mdi mdi-code-tags" data-toggle="collapse" href="#collapse-card-2" role="button"
1438
+ aria-expanded="false" aria-controls="collapse-card-2"> </a>
1439
+
1440
+
1441
+ </div>
1442
+ <div class="card-body">
1443
+ <div class="collapse" id="collapse-card-2">
1444
+ <pre class="language-html mb-4">
1445
+ <code >
1446
+ &lt;div class="row">
1447
+ &lt;div class="col-xl-6">
1448
+ &lt;div class="card mb-3">
1449
+ &lt;div class="row no-gutters">
1450
+ &lt;div class="col-md-3">
1451
+ &lt;img src="images/elements/hc1.jpg" class="rounded-left horizontal-img" alt="Image">
1452
+ &lt;/div>
1453
+ &lt;div class="col-md-9">
1454
+ &lt;div class="card-body">
1455
+ &lt;h5 class="card-title pt-2">Card title&lt;/h5>
1456
+ &lt;p class="card-text mb-6">Lorem ipsum dolor sit amet consectetur adipisicing elit sed do eiumod tempor
1457
+ incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam quis nostrud exercitation ullamco
1458
+ laboris nisi ut aliquip ex ea commodo consequat.&lt;/p>
1459
+ &lt;a href="#" class="btn btn-outline-primary">go somewhere&lt;/a>
1460
+ &lt;/div>
1461
+ &lt;/div>
1462
+ &lt;/div>
1463
+ &lt;/div>
1464
+ &lt;/div>
1465
+
1466
+ &lt;div class="col-xl-6">
1467
+ &lt;div class="card mb-3">
1468
+ &lt;div class="row no-gutters">
1469
+ &lt;div class="col-md-9">
1470
+ &lt;div class="card-body">
1471
+ &lt;h5 class="card-title pt-2">Card title&lt;/h5>
1472
+ &lt;p class="card-text mb-6">Lorem ipsum dolor sit amet consectetur adipisicing elit sed do eiumod tempor
1473
+ incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam quis nostrud exercitation ullamco
1474
+ laboris
1475
+ nisi ut aliquip ex ea commodo consequat.&lt;/p>
1476
+ &lt;a href="#" class="btn btn-outline-primary">go somewhere&lt;/a>
1477
+ &lt;/div>
1478
+ &lt;/div>
1479
+ &lt;div class="col-md-3">
1480
+ &lt;img src="images/elements/hc2.jpg" class="rounded-right horizontal-img" alt="Image">
1481
+ &lt;/div>
1482
+ &lt;/div>
1483
+ &lt;/div>
1484
+ &lt;/div>
1485
+ &lt;/div>
1486
+ </code>
1487
+ </pre>
1488
+ </div>
1489
+ <div class="row">
1490
+ <div class="col-xl-6">
1491
+ <div class="card mb-3">
1492
+ <div class="row no-gutters">
1493
+ <div class="col-md-3">
1494
+ <img src="images/elements/hc1.jpg" class="rounded-left horizontal-img" alt="Image">
1495
+ </div>
1496
+ <div class="col-md-9">
1497
+ <div class="card-body">
1498
+ <h5 class="card-title pt-2">Card title</h5>
1499
+ <p class="card-text mb-6">Lorem ipsum dolor sit amet consectetur adipisicing elit sed do eiumod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
1500
+ <a href="#" class="btn btn-outline-primary">go somewhere</a>
1501
+ </div>
1502
+ </div>
1503
+ </div>
1504
+ </div>
1505
+ </div>
1506
+
1507
+ <div class="col-xl-6">
1508
+ <div class="card mb-3">
1509
+ <div class="row no-gutters">
1510
+ <div class="col-md-9">
1511
+ <div class="card-body">
1512
+ <h5 class="card-title pt-2">Card title</h5>
1513
+ <p class="card-text mb-6">Lorem ipsum dolor sit amet consectetur adipisicing elit sed do eiumod tempor
1514
+ incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam quis nostrud exercitation ullamco laboris
1515
+ nisi ut aliquip ex ea commodo consequat.</p>
1516
+ <a href="#" class="btn btn-outline-primary">go somewhere</a>
1517
+ </div>
1518
+ </div>
1519
+ <div class="col-md-3">
1520
+ <img src="images/elements/hc2.jpg" class="rounded-right horizontal-img" alt="Image">
1521
+ </div>
1522
+ </div>
1523
+ </div>
1524
+ </div>
1525
+ </div>
1526
+ </div>
1527
+ </div>
1528
+
1529
+ <!-- Card with Deck -->
1530
+ <div class="card card-default">
1531
+ <div class="card-header">
1532
+ <h2>Card with Deck</h2>
1533
+ <a class="btn mdi mdi-code-tags" data-toggle="collapse" href="#collapse-card-3" role="button"
1534
+ aria-expanded="false" aria-controls="collapse-card-3"> </a>
1535
+
1536
+
1537
+ </div>
1538
+ <div class="card-body">
1539
+ <div class="collapse" id="collapse-card-3">
1540
+ <pre class="language-html mb-4">
1541
+ <code >
1542
+ &lt;div class="card-deck"&gt;
1543
+ &lt;div class="card"&gt;
1544
+ &lt;img class="card-img-top" src="images/elements/cc3a.jpg" alt="Card image cap"&gt;
1545
+ &lt;div class="card-body"&gt;
1546
+ &lt;h5 class="card-title "&gt;Card Title&lt;/h5&gt;
1547
+ &lt;p class="card-text pb-3"&gt;Lorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod tempor incididunt
1548
+ ut labore et dolore magna aliqua. enim ad minim veniam, quis nostrud exercitation ullamco ut laboris nisi ut
1549
+ aliquip ex commodo consequat. duis
1550
+ aute irure dolor in reprehenderit.
1551
+ &lt;/p&gt;
1552
+ &lt;p class="card-text"&gt;
1553
+ &lt;small class="text-muted"&gt;Last updated 3 mins ago&lt;/small&gt;
1554
+ &lt;/p&gt;
1555
+ &lt;/div&gt;
1556
+ &lt;/div&gt;
1557
+
1558
+ &lt;div class="card"&gt;
1559
+ &lt;img class="card-img-top" src="images/elements/cc3b.jpg" alt="Card image cap"&gt;
1560
+ &lt;div class="card-body"&gt;
1561
+ &lt;h5 class="card-title "&gt;Card Title&lt;/h5&gt;
1562
+ &lt;p class="card-text pb-3"&gt;Lorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod tempor incididunt
1563
+ ut labore et dolore magna aliqua. enim ad minim veniam, quis nostrud exercitation ullamco ut laboris nisi ut
1564
+ aliquip ex commodo consequat. duis
1565
+ aute irure dolor in reprehenderit.&lt;/p&gt;
1566
+ &lt;p class="card-text"&gt;
1567
+ &lt;small class="text-muted"&gt;Last updated 3 mins ago&lt;/small&gt;
1568
+ &lt;/p&gt;
1569
+ &lt;/div&gt;
1570
+ &lt;/div&gt;
1571
+
1572
+ &lt;div class="card"&gt;
1573
+ &lt;img class="card-img-top" src="images/elements/cc3c.jpg" alt="Card image cap"&gt;
1574
+ &lt;div class="card-body"&gt;
1575
+ &lt;h5 class="card-title "&gt;Card Title&lt;/h5&gt;
1576
+ &lt;p class="card-text pb-3"&gt;Lorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod tempor incididunt
1577
+ ut labore et dolore magna aliqua. enim ad minim veniam, quis nostrud exercitation ullamco ut laboris nisi ut
1578
+ aliquip ex commodo consequat. duis
1579
+ aute irure dolor in reprehenderit.&lt;/p&gt;
1580
+ &lt;p class="card-text"&gt;
1581
+ &lt;small class="text-muted"&gt;Last updated 3 mins ago&lt;/small&gt;
1582
+ &lt;/p&gt;
1583
+ &lt;/div&gt;
1584
+ &lt;/div&gt;
1585
+ &lt;/div&gt;
1586
+ </code>
1587
+ </pre>
1588
+ </div>
1589
+
1590
+ <div class="card-deck">
1591
+ <div class="card">
1592
+ <img class="card-img-top" src="images/elements/cc3a.jpg" alt="Card image cap">
1593
+ <div class="card-body">
1594
+ <h5 class="card-title ">Card Title</h5>
1595
+ <p class="card-text pb-3">Lorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. enim ad minim veniam, quis nostrud exercitation ullamco ut laboris nisi ut aliquip ex commodo consequat. duis
1596
+ aute irure dolor in reprehenderit.
1597
+ </p>
1598
+ <p class="card-text">
1599
+ <small class="text-muted">Last updated 3 mins ago</small>
1600
+ </p>
1601
+ </div>
1602
+ </div>
1603
+ <div class="card">
1604
+ <img class="card-img-top" src="images/elements/cc3b.jpg" alt="Card image cap">
1605
+ <div class="card-body">
1606
+ <h5 class="card-title ">Card Title</h5>
1607
+ <p class="card-text pb-3">Lorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. enim ad minim veniam, quis nostrud exercitation ullamco ut laboris nisi ut aliquip ex commodo consequat. duis
1608
+ aute irure dolor in reprehenderit.</p>
1609
+ <p class="card-text">
1610
+ <small class="text-muted">Last updated 3 mins ago</small>
1611
+ </p>
1612
+ </div>
1613
+ </div>
1614
+ <div class="card">
1615
+ <img class="card-img-top" src="images/elements/cc3c.jpg" alt="Card image cap">
1616
+ <div class="card-body">
1617
+ <h5 class="card-title ">Card Title</h5>
1618
+ <p class="card-text pb-3">Lorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. enim ad minim veniam, quis nostrud exercitation ullamco ut laboris nisi ut aliquip ex commodo consequat. duis
1619
+ aute irure dolor in reprehenderit.</p>
1620
+ <p class="card-text">
1621
+ <small class="text-muted">Last updated 3 mins ago</small>
1622
+ </p>
1623
+ </div>
1624
+ </div>
1625
+ </div>
1626
+
1627
+ </div>
1628
+ </div>
1629
+
1630
+
1631
+ <!-- Text Alignment -->
1632
+ <div class="card card-default">
1633
+ <div class="card-header">
1634
+ <h2>Text Alignment</h2>
1635
+ <a class="btn mdi mdi-code-tags" data-toggle="collapse" href="#collapse-card-4" role="button"
1636
+ aria-expanded="false" aria-controls="collapse-card-4"> </a>
1637
+
1638
+
1639
+ </div>
1640
+ <div class="card-body">
1641
+ <div class="collapse" id="collapse-card-4">
1642
+ <pre class="language-html mb-4">
1643
+ <code >
1644
+ &lt;div class="row"&gt;
1645
+ &lt;div class="col-md-6 col-xl-4"&gt;
1646
+ &lt;div class="card py-3 mb-4"&gt;
1647
+ &lt;div class="card-body"&gt;
1648
+ &lt;h5 class="card-title "&gt;Card Title&lt;/h5&gt;
1649
+ &lt;p class="card-text pb-4 pt-1"&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit sed do eiusmod tempor
1650
+ &lt;/p&gt;
1651
+ &lt;a href="#" class="btn btn-link text-primary px-0"&gt;Go somewhere&lt;/a&gt;
1652
+ &lt;/div&gt;
1653
+ &lt;/div&gt;
1654
+ &lt;/div&gt;
1655
+
1656
+ &lt;div class="col-md-6 col-xl-4"&gt;
1657
+ &lt;div class="card mb-4 py-3"&gt;
1658
+ &lt;div class="card-body text-center"&gt;
1659
+ &lt;h5 class="card-title "&gt;Card Title&lt;/h5&gt;
1660
+ &lt;p class="card-text pb-4 pt-1"&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit sed do eiusmod tempor
1661
+ &lt;/p&gt;
1662
+ &lt;a href="#" class="btn btn-link text-success px-0"&gt;Go somewhere&lt;/a&gt;
1663
+ &lt;/div&gt;
1664
+ &lt;/div&gt;
1665
+ &lt;/div&gt;
1666
+
1667
+ &lt;div class="col-md-6 col-xl-4"&gt;
1668
+ &lt;div class="card mb-4 py-3"&gt;
1669
+ &lt;div class="card-body text-right"&gt;
1670
+ &lt;h5 class="card-title "&gt;Card Title&lt;/h5&gt;
1671
+ &lt;p class="card-text pb-4 pt-1"&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit sed do eiusmod tempor
1672
+ &lt;/p&gt;
1673
+ &lt;a href="#" class="btn btn-link text-danger px-0"&gt;Go somewhere&lt;/a&gt;
1674
+ &lt;/div&gt;
1675
+ &lt;/div&gt;
1676
+ &lt;/div&gt;
1677
+ &lt;/div&gt;
1678
+ </code>
1679
+ </pre>
1680
+ </div>
1681
+
1682
+ <div class="row">
1683
+ <div class="col-md-6 col-xl-4">
1684
+ <div class="card py-3 mb-4">
1685
+ <div class="card-body">
1686
+ <h5 class="card-title ">Card Title</h5>
1687
+ <p class="card-text pb-4 pt-1">Lorem ipsum dolor sit amet, consectetur adipisicing elit sed do eiusmod tempor
1688
+ </p>
1689
+ <a href="#" class="btn btn-link text-primary px-0">Go somewhere</a>
1690
+ </div>
1691
+ </div>
1692
+ </div>
1693
+ <div class="col-md-6 col-xl-4">
1694
+ <div class="card mb-4 py-3">
1695
+ <div class="card-body text-center">
1696
+ <h5 class="card-title ">Card Title</h5>
1697
+ <p class="card-text pb-4 pt-1">Lorem ipsum dolor sit amet, consectetur adipisicing elit sed do eiusmod tempor
1698
+ </p>
1699
+ <a href="#" class="btn btn-link text-success px-0">Go somewhere</a>
1700
+ </div>
1701
+ </div>
1702
+ </div>
1703
+ <div class="col-md-6 col-xl-4">
1704
+ <div class="card mb-4 py-3">
1705
+ <div class="card-body text-right">
1706
+ <h5 class="card-title ">Card Title</h5>
1707
+ <p class="card-text pb-4 pt-1">Lorem ipsum dolor sit amet, consectetur adipisicing elit sed do eiusmod tempor
1708
+ </p>
1709
+ <a href="#" class="btn btn-link text-danger px-0">Go somewhere</a>
1710
+ </div>
1711
+ </div>
1712
+ </div>
1713
+ </div>
1714
+
1715
+ </div>
1716
+ </div>
1717
+
1718
+ <!-- Card with Image Overlay -->
1719
+ <div class="card card-default">
1720
+ <div class="card-header">
1721
+ <h2>Card with Image Overlay</h2>
1722
+ <a class="btn mdi mdi-code-tags" data-toggle="collapse" href="#collapse-card-5" role="button"
1723
+ aria-expanded="false" aria-controls="collapse-card-5"> </a>
1724
+
1725
+
1726
+ </div>
1727
+ <div class="card-body">
1728
+ <div class="collapse" id="collapse-card-5">
1729
+ <pre class="language-html mb-4">
1730
+ <code >
1731
+ &lt;div class="row">
1732
+
1733
+ &lt;div class="col-md-12 col-lg-6 col-xl-3">
1734
+ &lt;div class="card mb-4 bg-overlay-primary">
1735
+ &lt;img class="card-img-top" src="images/elements/cc2a.jpg">
1736
+ &lt;div class="card-img-overlay">
1737
+ &lt;h5 class="card-title text-white">Card Title&lt;/h5>
1738
+ &lt;p class="card-text text-white pb-4 pt-1">Lorem ipsum dolor sit amet, consectetur adipisicing elit sed do
1739
+ eiusmod tempor &lt;/p>
1740
+ &lt;a href="#" class="text-white">Last update 2 mins ago&lt;/a>
1741
+ &lt;/div>
1742
+ &lt;/div>
1743
+ &lt;/div>
1744
+
1745
+ &lt;div class="col-md-12 col-lg-6 col-xl-3">
1746
+ &lt;div class="card mb-4 bg-overlay-success">
1747
+ &lt;img class="card-img-top" src="images/elements/cc2a.jpg">
1748
+ &lt;div class="card-img-overlay">
1749
+ &lt;h5 class="card-title text-white">Card Title&lt;/h5>
1750
+ &lt;p class="card-text pb-4 pt-1 text-white">Lorem ipsum dolor sit amet, consectetur adipisicing elit sed do
1751
+ eiusmod tempor
1752
+ &lt;/p>
1753
+ &lt;a href="#" class="text-white">Last update 2 mins ago&lt;/a>
1754
+ &lt;/div>
1755
+ &lt;/div>
1756
+ &lt;/div>
1757
+
1758
+ &lt;div class="col-md-12 col-lg-6 col-xl-3">
1759
+ &lt;div class="card mb-4 bg-overlay-secondary">
1760
+ &lt;img class="card-img-top" src="images/elements/cc2a.jpg">
1761
+ &lt;div class="card-img-overlay">
1762
+ &lt;h5 class="card-title text-white">Card Title&lt;/h5>
1763
+ &lt;p class="card-text text-white pb-4 pt-1">Lorem ipsum dolor sit amet, consectetur adipisicing elit sed do
1764
+ eiusmod tempor
1765
+ &lt;/p>
1766
+ &lt;a href="#" class="text-white">Last update 2 mins ago&lt;/a>
1767
+ &lt;/div>
1768
+ &lt;/div>
1769
+ &lt;/div>
1770
+
1771
+ &lt;div class="col-md-12 col-lg-6 col-xl-3">
1772
+ &lt;div class="card mb-4 bg-overlay-info">
1773
+ &lt;img class="card-img-top" src="images/elements/cc2a.jpg">
1774
+ &lt;div class="card-img-overlay">
1775
+ &lt;h5 class="card-title text-white ">Card Title&lt;/h5>
1776
+ &lt;p class="card-text pb-4 pt-1 text-white">Lorem ipsum dolor sit amet, consectetur adipisicing elit sed do
1777
+ eiusmod tempor
1778
+ &lt;/p>
1779
+ &lt;a href="#" class="text-white">Last update 2 mins ago&lt;/a>
1780
+ &lt;/div>
1781
+ &lt;/div>
1782
+ &lt;/div>
1783
+
1784
+ &lt;/div>
1785
+ </code>
1786
+ </pre>
1787
+ </div>
1788
+
1789
+ <div class="row">
1790
+
1791
+ <div class="col-md-12 col-lg-6 col-xl-3">
1792
+ <div class="card mb-4 bg-overlay-primary">
1793
+ <img class="card-img-top" src="images/elements/cc2a.jpg">
1794
+ <div class="card-img-overlay">
1795
+ <h5 class="card-title text-white">Card Title</h5>
1796
+ <p class="card-text text-white pb-4 pt-1">Lorem ipsum dolor sit amet, consectetur adipisicing elit sed do
1797
+ eiusmod tempor </p>
1798
+ <a href="#" class="text-white">Last update 2 mins ago</a>
1799
+ </div>
1800
+ </div>
1801
+ </div>
1802
+
1803
+ <div class="col-md-12 col-lg-6 col-xl-3">
1804
+ <div class="card mb-4 bg-overlay-success">
1805
+ <img class="card-img-top" src="images/elements/cc2a.jpg">
1806
+ <div class="card-img-overlay">
1807
+ <h5 class="card-title text-white">Card Title</h5>
1808
+ <p class="card-text pb-4 pt-1 text-white">Lorem ipsum dolor sit amet, consectetur adipisicing elit sed do eiusmod tempor
1809
+ </p>
1810
+ <a href="#" class="text-white">Last update 2 mins ago</a>
1811
+ </div>
1812
+ </div>
1813
+ </div>
1814
+
1815
+ <div class="col-md-12 col-lg-6 col-xl-3">
1816
+ <div class="card mb-4 bg-overlay-secondary">
1817
+ <img class="card-img-top" src="images/elements/cc2a.jpg">
1818
+ <div class="card-img-overlay">
1819
+ <h5 class="card-title text-white">Card Title</h5>
1820
+ <p class="card-text text-white pb-4 pt-1">Lorem ipsum dolor sit amet, consectetur adipisicing elit sed do eiusmod tempor
1821
+ </p>
1822
+ <a href="#" class="text-white">Last update 2 mins ago</a>
1823
+ </div>
1824
+ </div>
1825
+ </div>
1826
+
1827
+ <div class="col-md-12 col-lg-6 col-xl-3">
1828
+ <div class="card mb-4 bg-overlay-info">
1829
+ <img class="card-img-top" src="images/elements/cc2a.jpg">
1830
+ <div class="card-img-overlay">
1831
+ <h5 class="card-title text-white ">Card Title</h5>
1832
+ <p class="card-text pb-4 pt-1 text-white">Lorem ipsum dolor sit amet, consectetur adipisicing elit sed do eiusmod tempor
1833
+ </p>
1834
+ <a href="#" class="text-white">Last update 2 mins ago</a>
1835
+ </div>
1836
+ </div>
1837
+ </div>
1838
+
1839
+ </div>
1840
+
1841
+ </div>
1842
+ </div>
1843
+
1844
+ <!-- Card Groups -->
1845
+ <div class="card card-default">
1846
+ <div class="card-header">
1847
+ <h2>Card Groups</h2>
1848
+ <a class="btn mdi mdi-code-tags" data-toggle="collapse" href="#collapse-card-6" role="button"
1849
+ aria-expanded="false" aria-controls="collapse-card-6"> </a>
1850
+
1851
+
1852
+ </div>
1853
+ <div class="card-body">
1854
+ <div class="collapse" id="collapse-card-6">
1855
+ <pre class="language-html mb-4">
1856
+ <code >
1857
+ &lt;div class="card-group"&gt;
1858
+ &lt;div class="card"&gt;
1859
+ &lt;img class="card-img-top" src="images/elements/cc4a.jpg" alt="Card image cap"&gt;
1860
+ &lt;div class="card-body"&gt;
1861
+ &lt;h5 class="card-title text-primary"&gt;Card Title&lt;/h5&gt;
1862
+ &lt;p class="card-text pb-4"&gt;This is a wider card with supporting text below as a natural lead-in to additional
1863
+ content. This content is a little
1864
+ bit longer.&lt;/p&gt;
1865
+ &lt;p class="card-text"&gt;
1866
+ &lt;small class="text-muted"&gt;Last updated 3 mins ago&lt;/small&gt;
1867
+ &lt;/p&gt;
1868
+ &lt;/div&gt;
1869
+ &lt;/div&gt;
1870
+
1871
+ &lt;div class="card"&gt;
1872
+ &lt;img class="card-img-top" src="images/elements/cc4b.jpg" alt="Card image cap"&gt;
1873
+ &lt;div class="card-body"&gt;
1874
+ &lt;h5 class="card-title text-primary"&gt;Card Title&lt;/h5&gt;
1875
+ &lt;p class="card-text pb-4"&gt;This card has supporting text below as a natural lead-in to additional content.&lt;/p&gt;
1876
+ &lt;p class="card-text"&gt;
1877
+ &lt;small class="text-muted"&gt;Last updated 3 mins ago&lt;/small&gt;
1878
+ &lt;/p&gt;
1879
+ &lt;/div&gt;
1880
+ &lt;/div&gt;
1881
+
1882
+ &lt;div class="card"&gt;
1883
+ &lt;img class="card-img-top" src="images/elements/cc4c.jpg" alt="Card image cap"&gt;
1884
+ &lt;div class="card-body"&gt;
1885
+ &lt;h5 class="card-title text-primary"&gt;Card Title&lt;/h5&gt;
1886
+ &lt;p class="card-text pb-4"&gt;This is a wider card with supporting text below as a natural lead-in to additional
1887
+ content. This card has even longer
1888
+ content than the first to show that equal height action.&lt;/p&gt;
1889
+ &lt;p class="card-text"&gt;
1890
+ &lt;small class="text-muted"&gt;Last updated 3 mins ago&lt;/small&gt;
1891
+ &lt;/p&gt;
1892
+ &lt;/div&gt;
1893
+ &lt;/div&gt;
1894
+ &lt;/div&gt;
1895
+ </code>
1896
+ </pre>
1897
+ </div>
1898
+
1899
+ <div class="card-group">
1900
+ <div class="card">
1901
+ <img class="card-img-top" src="images/elements/cc4a.jpg" alt="Card image cap">
1902
+ <div class="card-body">
1903
+ <h5 class="card-title text-primary">Card Title</h5>
1904
+ <p class="card-text pb-4">This is a wider card with supporting text below as a natural lead-in to additional
1905
+ content. This content is a little
1906
+ bit longer.</p>
1907
+ <p class="card-text">
1908
+ <small class="text-muted">Last updated 3 mins ago</small>
1909
+ </p>
1910
+ </div>
1911
+ </div>
1912
+ <div class="card">
1913
+ <img class="card-img-top" src="images/elements/cc4b.jpg" alt="Card image cap">
1914
+ <div class="card-body">
1915
+ <h5 class="card-title text-primary">Card Title</h5>
1916
+ <p class="card-text pb-4">This card has supporting text below as a natural lead-in to additional content.</p>
1917
+ <p class="card-text">
1918
+ <small class="text-muted">Last updated 3 mins ago</small>
1919
+ </p>
1920
+ </div>
1921
+ </div>
1922
+ <div class="card">
1923
+ <img class="card-img-top" src="images/elements/cc4c.jpg" alt="Card image cap">
1924
+ <div class="card-body">
1925
+ <h5 class="card-title text-primary">Card Title</h5>
1926
+ <p class="card-text pb-4">This is a wider card with supporting text below as a natural lead-in to additional
1927
+ content. This card has even longer
1928
+ content than the first to show that equal height action.</p>
1929
+ <p class="card-text">
1930
+ <small class="text-muted">Last updated 3 mins ago</small>
1931
+ </p>
1932
+ </div>
1933
+ </div>
1934
+ </div>
1935
+
1936
+ </div>
1937
+ </div>
1938
+
1939
+ <!-- Using Utilities -->
1940
+ <div class="card card-default">
1941
+ <div class="card-header">
1942
+ <h2>Using Utilities</h2>
1943
+ <a class="btn mdi mdi-code-tags" data-toggle="collapse" href="#collapse-card-7" role="button"
1944
+ aria-expanded="false" aria-controls="collapse-card-7"> </a>
1945
+
1946
+
1947
+ </div>
1948
+ <div class="card-body">
1949
+ <div class="collapse" id="collapse-card-7">
1950
+ <pre class="language-html mb-4">
1951
+ <code >
1952
+ &lt;div class="card w-75 mb-5"&gt;
1953
+ &lt;div class="card-body"&gt;
1954
+ &lt;h5 class="card-title"&gt;Card title&lt;/h5&gt;
1955
+ &lt;p class="card-text pb-3"&gt;Lorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod tempor incididunt
1956
+ ut labore et dolore magna aliqua. Ut enim ad minim veniam quis nostrud exercitation ullamco laboris nisi ut
1957
+ aliquip.&lt;/p&gt;
1958
+ &lt;a href="#" class="btn btn-outline-primary btn-pill"&gt;Button&lt;/a&gt;
1959
+ &lt;/div&gt;
1960
+ &lt;/div&gt;
1961
+
1962
+ &lt;div class="card w-50 mb-5"&gt;
1963
+ &lt;div class="card-body"&gt;
1964
+ &lt;h5 class="card-title"&gt;Card title&lt;/h5&gt;
1965
+ &lt;p class="card-text pb-3"&gt;Lorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod tempor incididunt
1966
+ ut labore et dolore magna aliqua. Ut enim ad minim veniam quis nostrud exercitation ullamco laboris nisi ut
1967
+ aliquip.&lt;/p&gt;
1968
+ &lt;a href="#" class="btn btn-outline-primary btn-pill"&gt;Button&lt;/a&gt;
1969
+ &lt;/div&gt;
1970
+ &lt;/div&gt;
1971
+ </code>
1972
+ </pre>
1973
+ </div>
1974
+
1975
+ <div class="card w-75 mb-5">
1976
+ <div class="card-body">
1977
+ <h5 class="card-title">Card title</h5>
1978
+ <p class="card-text pb-3">Lorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam quis nostrud exercitation ullamco laboris nisi ut aliquip.</p>
1979
+ <a href="#" class="btn btn-outline-primary btn-pill">Button</a>
1980
+ </div>
1981
+ </div>
1982
+
1983
+ <div class="card w-50 mb-5">
1984
+ <div class="card-body">
1985
+ <h5 class="card-title">Card title</h5>
1986
+ <p class="card-text pb-3">Lorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam quis nostrud exercitation ullamco laboris nisi ut aliquip.</p>
1987
+ <a href="#" class="btn btn-outline-primary btn-pill">Button</a>
1988
+ </div>
1989
+ </div>
1990
+
1991
+ </div>
1992
+ </div>
1993
+
1994
+ <!-- Background variants -->
1995
+ <div class="card card-default">
1996
+ <div class="card-header">
1997
+ <h2>Background variants</h2>
1998
+ <a class="btn mdi mdi-code-tags" data-toggle="collapse" href="#collapse-card-8" role="button"
1999
+ aria-expanded="false" aria-controls="collapse-card-8"> </a>
2000
+
2001
+
2002
+ </div>
2003
+ <div class="card-body">
2004
+ <div class="collapse" id="collapse-card-8">
2005
+ <pre class="language-html mb-4">
2006
+ <code >
2007
+ &lt;div class="row"&gt;
2008
+ &lt;div class="col-md-4"&gt;
2009
+ &lt;div class="card text-white bg-success mb-3"&gt;
2010
+ &lt;h5 class="card-header text-white"&gt;card title&lt;/h5&gt;
2011
+ &lt;div class="card-body"&gt;
2012
+ &lt;p class="card-text"&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit sed do eiusmod tempor incididunt.
2013
+ &lt;/p&gt;
2014
+ &lt;a href="#" class="btn btn-link text-white px-0"&gt;Go Somewhere&lt;/a&gt;
2015
+ &lt;/div&gt;
2016
+ &lt;/div&gt;
2017
+ &lt;/div&gt;
2018
+
2019
+ &lt;div class="col-md-4"&gt;
2020
+ &lt;div class="card text-white bg-primary mb-3"&gt;
2021
+ &lt;h5 class="card-header text-white"&gt;card title&lt;/h5&gt;
2022
+ &lt;div class="card-body"&gt;
2023
+ &lt;p class="card-text"&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit sed do eiusmod tempor incididunt.
2024
+ &lt;/p&gt;
2025
+ &lt;a href="#" class="btn btn-link text-white px-0"&gt;Go Somewhere&lt;/a&gt;
2026
+ &lt;/div&gt;
2027
+ &lt;/div&gt;
2028
+ &lt;/div&gt;
2029
+
2030
+ &lt;div class="col-md-4"&gt;
2031
+ &lt;div class="card text-white bg-secondary mb-3"&gt;
2032
+ &lt;h5 class="card-header text-white"&gt;card title&lt;/h5&gt;
2033
+ &lt;div class="card-body"&gt;
2034
+ &lt;p class="card-text"&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit sed do eiusmod tempor incididunt.
2035
+ &lt;/p&gt;
2036
+ &lt;a href="#" class="btn btn-link text-white px-0"&gt;Go Somewhere&lt;/a&gt;
2037
+ &lt;/div&gt;
2038
+ &lt;/div&gt;
2039
+ &lt;/div&gt;
2040
+ &lt;/div&gt;
2041
+ </code>
2042
+ </pre>
2043
+ </div>
2044
+
2045
+ <div class="row">
2046
+
2047
+ <div class="col-lg-4">
2048
+ <div class="card text-white bg-success mb-3">
2049
+ <h5 class="card-header text-white">card title</h5>
2050
+ <div class="card-body">
2051
+ <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit sed do eiusmod tempor incididunt.</p>
2052
+ <a href="#" class="btn btn-link text-white px-0">Go Somewhere</a>
2053
+ </div>
2054
+ </div>
2055
+ </div>
2056
+
2057
+ <div class="col-lg-4">
2058
+ <div class="card text-white bg-primary mb-3">
2059
+ <h5 class="card-header text-white">card title</h5>
2060
+ <div class="card-body">
2061
+ <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit sed do eiusmod tempor incididunt.
2062
+ </p>
2063
+ <a href="#" class="btn btn-link text-white px-0">Go Somewhere</a>
2064
+ </div>
2065
+ </div>
2066
+ </div>
2067
+
2068
+ <div class="col-lg-4">
2069
+ <div class="card text-white bg-secondary mb-3">
2070
+ <h5 class="card-header text-white">card title</h5>
2071
+ <div class="card-body">
2072
+ <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit sed do eiusmod tempor incididunt.
2073
+ </p>
2074
+ <a href="#" class="btn btn-link text-white px-0">Go Somewhere</a>
2075
+ </div>
2076
+ </div>
2077
+ </div>
2078
+
2079
+ </div>
2080
+
2081
+ </div>
2082
+ </div>
2083
+ </div>
2084
+
2085
+ </div>
2086
+
2087
+ <!-- Footer -->
2088
+ <footer class="footer mt-auto">
2089
+ <div class="copyright bg-white">
2090
+ <p>
2091
+ &copy; <span id="copy-year"></span> Copyright Mono Dashboard Bootstrap Template by <a class="text-primary" href="http://www.iamabdus.com/" target="_blank" >Abdus</a>.
2092
+ </p>
2093
+ </div>
2094
+ <script>
2095
+ var d = new Date();
2096
+ var year = d.getFullYear();
2097
+ document.getElementById("copy-year").innerHTML = year;
2098
+ </script>
2099
+ </footer>
2100
+
2101
+ </div>
2102
+ </div>
2103
+
2104
+ <!-- Card Offcanvas -->
2105
+ <div class="card card-offcanvas" id="contact-off" >
2106
+ <div class="card-header">
2107
+ <h2>Contacts</h2>
2108
+ <a href="#" class="btn btn-primary btn-pill px-4">Add New</a>
2109
+ </div>
2110
+ <div class="card-body">
2111
+
2112
+ <div class="mb-4">
2113
+ <input type="text" class="form-control form-control-lg form-control-secondary rounded-0" placeholder="Search contacts...">
2114
+ </div>
2115
+
2116
+ <div class="media media-sm">
2117
+ <div class="media-sm-wrapper">
2118
+ <a href="user-profile.html">
2119
+ <img src="images/user/user-sm-01.jpg" alt="User Image">
2120
+ <span class="active bg-primary"></span>
2121
+ </a>
2122
+ </div>
2123
+ <div class="media-body">
2124
+ <a href="user-profile.html">
2125
+ <span class="title">Selena Wagner</span>
2126
+ <span class="discribe">Designer</span>
2127
+ </a>
2128
+ </div>
2129
+ </div>
2130
+
2131
+ <div class="media media-sm">
2132
+ <div class="media-sm-wrapper">
2133
+ <a href="user-profile.html">
2134
+ <img src="images/user/user-sm-02.jpg" alt="User Image">
2135
+ <span class="active bg-primary"></span>
2136
+ </a>
2137
+ </div>
2138
+ <div class="media-body">
2139
+ <a href="user-profile.html">
2140
+ <span class="title">Walter Reuter</span>
2141
+ <span>Developer</span>
2142
+ </a>
2143
+ </div>
2144
+ </div>
2145
+
2146
+ <div class="media media-sm">
2147
+ <div class="media-sm-wrapper">
2148
+ <a href="user-profile.html">
2149
+ <img src="images/user/user-sm-03.jpg" alt="User Image">
2150
+ </a>
2151
+ </div>
2152
+ <div class="media-body">
2153
+ <a href="user-profile.html">
2154
+ <span class="title">Larissa Gebhardt</span>
2155
+ <span>Cyber Punk</span>
2156
+ </a>
2157
+ </div>
2158
+ </div>
2159
+
2160
+ <div class="media media-sm">
2161
+ <div class="media-sm-wrapper">
2162
+ <a href="user-profile.html">
2163
+ <img src="images/user/user-sm-04.jpg" alt="User Image">
2164
+ </a>
2165
+
2166
+ </div>
2167
+ <div class="media-body">
2168
+ <a href="user-profile.html">
2169
+ <span class="title">Albrecht Straub</span>
2170
+ <span>Photographer</span>
2171
+ </a>
2172
+ </div>
2173
+ </div>
2174
+
2175
+ <div class="media media-sm">
2176
+ <div class="media-sm-wrapper">
2177
+ <a href="user-profile.html">
2178
+ <img src="images/user/user-sm-05.jpg" alt="User Image">
2179
+ <span class="active bg-danger"></span>
2180
+ </a>
2181
+ </div>
2182
+ <div class="media-body">
2183
+ <a href="user-profile.html">
2184
+ <span class="title">Leopold Ebert</span>
2185
+ <span>Fashion Designer</span>
2186
+ </a>
2187
+ </div>
2188
+ </div>
2189
+
2190
+ <div class="media media-sm">
2191
+ <div class="media-sm-wrapper">
2192
+ <a href="user-profile.html">
2193
+ <img src="images/user/user-sm-06.jpg" alt="User Image">
2194
+ <span class="active bg-primary"></span>
2195
+ </a>
2196
+ </div>
2197
+ <div class="media-body">
2198
+ <a href="user-profile.html">
2199
+ <span class="title">Selena Wagner</span>
2200
+ <span>Photographer</span>
2201
+ </a>
2202
+ </div>
2203
+ </div>
2204
+
2205
+ </div>
2206
+ </div>
2207
+
2208
+
2209
+
2210
+
2211
+ <script src="plugins/jquery/jquery.min.js"></script>
2212
+ <script src="plugins/bootstrap/js/bootstrap.bundle.min.js"></script>
2213
+ <script src="plugins/simplebar/simplebar.min.js"></script>
2214
+ <script src="https://unpkg.com/hotkeys-js/dist/hotkeys.min.js"></script>
2215
+
2216
+
2217
+
2218
+ <script src="plugins/prism/prism.js"></script>
2219
+
2220
+
2221
+ <script src="js/mono.js"></script>
2222
+ <script src="js/chart.js"></script>
2223
+ <script src="js/map.js"></script>
2224
+ <script src="js/custom.js"></script>
2225
+
2226
+
2227
+
2228
+
2229
+ <!-- -->
2230
+
2231
+
2232
+ </body>
2233
+ </html>
carousel.html ADDED
@@ -0,0 +1,1888 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+
3
+ <!--
4
+ // WEBSITE: https://themefisher.com
5
+ // TWITTER: https://twitter.com/themefisher
6
+ // FACEBOOK: https://www.facebook.com/themefisher
7
+ // GITHUB: https://github.com/themefisher/
8
+ -->
9
+
10
+ <html lang="en" dir="ltr">
11
+ <head>
12
+ <meta charset="utf-8" />
13
+ <meta http-equiv="X-UA-Compatible" content="IE=edge" />
14
+ <meta name="viewport" content="width=device-width, initial-scale=1" />
15
+
16
+ <title>Mono - Responsive Admin & Dashboard Template</title>
17
+
18
+ <!-- GOOGLE FONTS -->
19
+ <link href="https://fonts.googleapis.com/css?family=Karla:400,700|Roboto" rel="stylesheet">
20
+ <link href="plugins/material/css/materialdesignicons.min.css" rel="stylesheet" />
21
+ <link href="plugins/simplebar/simplebar.css" rel="stylesheet" />
22
+
23
+ <!-- PLUGINS CSS STYLE -->
24
+ <link href="plugins/nprogress/nprogress.css" rel="stylesheet" />
25
+
26
+
27
+ <link href="plugins/prism/prism.css" rel="stylesheet" />
28
+
29
+
30
+
31
+ <link href="plugins/owl-carousel/assets/owl.carousel.min.css" rel="stylesheet" />
32
+ <link href="plugins/owl-carousel/assets/owl.theme.default.css" rel="stylesheet" />
33
+
34
+
35
+ <!-- MONO CSS -->
36
+ <link id="main-css-href" rel="stylesheet" href="css/style.css" />
37
+
38
+
39
+
40
+
41
+ <!-- FAVICON -->
42
+ <link href="images/favicon.png" rel="shortcut icon" />
43
+
44
+ <!--
45
+ HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries
46
+ -->
47
+ <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
48
+ <!--[if lt IE 9]>
49
+ <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
50
+ <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
51
+ <![endif]-->
52
+ <script src="plugins/nprogress/nprogress.js"></script>
53
+ </head>
54
+
55
+
56
+ <body class="navbar-fixed sidebar-fixed" id="body">
57
+ <script>
58
+ NProgress.configure({ showSpinner: false });
59
+ NProgress.start();
60
+ </script>
61
+
62
+
63
+
64
+ <!-- ====================================
65
+ ——— WRAPPER
66
+ ===================================== -->
67
+ <div class="wrapper">
68
+
69
+
70
+ <!-- ====================================
71
+ ——— LEFT SIDEBAR WITH OUT FOOTER
72
+ ===================================== -->
73
+ <aside class="left-sidebar sidebar-dark" id="left-sidebar">
74
+ <div id="sidebar" class="sidebar sidebar-with-footer">
75
+ <!-- Aplication Brand -->
76
+ <div class="app-brand">
77
+ <a href="/index.html">
78
+ <img src="images/logo.png" alt="Mono">
79
+ <span class="brand-name">MONO</span>
80
+ </a>
81
+ </div>
82
+ <!-- begin sidebar scrollbar -->
83
+ <div class="sidebar-left" data-simplebar style="height: 100%;">
84
+ <!-- sidebar menu -->
85
+ <ul class="nav sidebar-inner" id="sidebar-menu">
86
+
87
+
88
+
89
+ <li
90
+ >
91
+ <a class="sidenav-item-link" href="index.html">
92
+ <i class="mdi mdi-briefcase-account-outline"></i>
93
+ <span class="nav-text">Business Dashboard</span>
94
+ </a>
95
+ </li>
96
+
97
+
98
+
99
+
100
+
101
+ <li
102
+ >
103
+ <a class="sidenav-item-link" href="analytics.html">
104
+ <i class="mdi mdi-chart-line"></i>
105
+ <span class="nav-text">Analytics Dashboard</span>
106
+ </a>
107
+ </li>
108
+
109
+
110
+
111
+
112
+
113
+ <li class="section-title">
114
+ Apps
115
+ </li>
116
+
117
+
118
+
119
+
120
+
121
+ <li
122
+ >
123
+ <a class="sidenav-item-link" href="chat.html">
124
+ <i class="mdi mdi-wechat"></i>
125
+ <span class="nav-text">Chat</span>
126
+ </a>
127
+ </li>
128
+
129
+
130
+
131
+
132
+
133
+ <li
134
+ >
135
+ <a class="sidenav-item-link" href="contacts.html">
136
+ <i class="mdi mdi-phone"></i>
137
+ <span class="nav-text">Contacts</span>
138
+ </a>
139
+ </li>
140
+
141
+
142
+
143
+
144
+
145
+ <li
146
+ >
147
+ <a class="sidenav-item-link" href="team.html">
148
+ <i class="mdi mdi-account-group"></i>
149
+ <span class="nav-text">Team</span>
150
+ </a>
151
+ </li>
152
+
153
+
154
+
155
+
156
+
157
+ <li
158
+ >
159
+ <a class="sidenav-item-link" href="calendar.html">
160
+ <i class="mdi mdi-calendar-check"></i>
161
+ <span class="nav-text">Calendar</span>
162
+ </a>
163
+ </li>
164
+
165
+
166
+
167
+
168
+
169
+ <li class="has-sub" >
170
+ <a class="sidenav-item-link" href="javascript:void(0)" data-toggle="collapse" data-target="#email"
171
+ aria-expanded="false" aria-controls="email">
172
+ <i class="mdi mdi-email"></i>
173
+ <span class="nav-text">email</span> <b class="caret"></b>
174
+ </a>
175
+ <ul class="collapse" id="email"
176
+ data-parent="#sidebar-menu">
177
+ <div class="sub-menu">
178
+
179
+
180
+
181
+ <li >
182
+ <a class="sidenav-item-link" href="email-inbox.html">
183
+ <span class="nav-text">Email Inbox</span>
184
+
185
+ </a>
186
+ </li>
187
+
188
+
189
+
190
+
191
+
192
+
193
+ <li >
194
+ <a class="sidenav-item-link" href="email-details.html">
195
+ <span class="nav-text">Email Details</span>
196
+
197
+ </a>
198
+ </li>
199
+
200
+
201
+
202
+
203
+
204
+
205
+ <li >
206
+ <a class="sidenav-item-link" href="email-compose.html">
207
+ <span class="nav-text">Email Compose</span>
208
+
209
+ </a>
210
+ </li>
211
+
212
+
213
+
214
+
215
+ </div>
216
+ </ul>
217
+ </li>
218
+
219
+
220
+
221
+
222
+
223
+ <li class="section-title">
224
+ UI Elements
225
+ </li>
226
+
227
+
228
+
229
+
230
+
231
+ <li class="has-sub active expand" >
232
+ <a class="sidenav-item-link" href="javascript:void(0)" data-toggle="collapse" data-target="#ui-elements"
233
+ aria-expanded="false" aria-controls="ui-elements">
234
+ <i class="mdi mdi-folder-outline"></i>
235
+ <span class="nav-text">UI Components</span> <b class="caret"></b>
236
+ </a>
237
+ <ul class="collapse show" id="ui-elements"
238
+ data-parent="#sidebar-menu">
239
+ <div class="sub-menu">
240
+
241
+
242
+
243
+ <li >
244
+ <a class="sidenav-item-link" href="alert.html">
245
+ <span class="nav-text">Alert</span>
246
+
247
+ </a>
248
+ </li>
249
+
250
+
251
+
252
+
253
+
254
+
255
+ <li >
256
+ <a class="sidenav-item-link" href="badge.html">
257
+ <span class="nav-text">Badge</span>
258
+
259
+ </a>
260
+ </li>
261
+
262
+
263
+
264
+
265
+
266
+
267
+ <li >
268
+ <a class="sidenav-item-link" href="breadcrumb.html">
269
+ <span class="nav-text">Breadcrumb</span>
270
+
271
+ </a>
272
+ </li>
273
+
274
+
275
+
276
+
277
+
278
+ <li class="has-sub" >
279
+ <a class="sidenav-item-link" href="javascript:void(0)" data-toggle="collapse" data-target="#buttons"
280
+ aria-expanded="false" aria-controls="buttons">
281
+ <span class="nav-text">Buttons</span> <b class="caret"></b>
282
+ </a>
283
+ <ul class="collapse" id="buttons">
284
+ <div class="sub-menu">
285
+
286
+ <li >
287
+ <a href="button-default.html">Button Default</a>
288
+ </li>
289
+
290
+ <li >
291
+ <a href="button-dropdown.html">Button Dropdown</a>
292
+ </li>
293
+
294
+ <li >
295
+ <a href="button-group.html">Button Group</a>
296
+ </li>
297
+
298
+ <li >
299
+ <a href="button-social.html">Button Social</a>
300
+ </li>
301
+
302
+ <li >
303
+ <a href="button-loading.html">Button Loading</a>
304
+ </li>
305
+
306
+ </div>
307
+ </ul>
308
+ </li>
309
+
310
+
311
+
312
+
313
+
314
+ <li >
315
+ <a class="sidenav-item-link" href="card.html">
316
+ <span class="nav-text">Card</span>
317
+
318
+ </a>
319
+ </li>
320
+
321
+
322
+
323
+
324
+
325
+
326
+ <li class="active" >
327
+ <a class="sidenav-item-link" href="carousel.html">
328
+ <span class="nav-text">Carousel</span>
329
+
330
+ </a>
331
+ </li>
332
+
333
+
334
+
335
+
336
+
337
+
338
+ <li >
339
+ <a class="sidenav-item-link" href="collapse.html">
340
+ <span class="nav-text">Collapse</span>
341
+
342
+ </a>
343
+ </li>
344
+
345
+
346
+
347
+
348
+
349
+
350
+ <li >
351
+ <a class="sidenav-item-link" href="editor.html">
352
+ <span class="nav-text">Editor</span>
353
+
354
+ </a>
355
+ </li>
356
+
357
+
358
+
359
+
360
+
361
+
362
+ <li >
363
+ <a class="sidenav-item-link" href="list-group.html">
364
+ <span class="nav-text">List Group</span>
365
+
366
+ </a>
367
+ </li>
368
+
369
+
370
+
371
+
372
+
373
+
374
+ <li >
375
+ <a class="sidenav-item-link" href="modal.html">
376
+ <span class="nav-text">Modal</span>
377
+
378
+ </a>
379
+ </li>
380
+
381
+
382
+
383
+
384
+
385
+
386
+ <li >
387
+ <a class="sidenav-item-link" href="pagination.html">
388
+ <span class="nav-text">Pagination</span>
389
+
390
+ </a>
391
+ </li>
392
+
393
+
394
+
395
+
396
+
397
+
398
+ <li >
399
+ <a class="sidenav-item-link" href="popover-tooltip.html">
400
+ <span class="nav-text">Popover & Tooltip</span>
401
+
402
+ </a>
403
+ </li>
404
+
405
+
406
+
407
+
408
+
409
+
410
+ <li >
411
+ <a class="sidenav-item-link" href="progress-bar.html">
412
+ <span class="nav-text">Progress Bar</span>
413
+
414
+ </a>
415
+ </li>
416
+
417
+
418
+
419
+
420
+
421
+
422
+ <li >
423
+ <a class="sidenav-item-link" href="spinner.html">
424
+ <span class="nav-text">Spinner</span>
425
+
426
+ </a>
427
+ </li>
428
+
429
+
430
+
431
+
432
+
433
+
434
+ <li >
435
+ <a class="sidenav-item-link" href="switches.html">
436
+ <span class="nav-text">Switches</span>
437
+
438
+ </a>
439
+ </li>
440
+
441
+
442
+
443
+
444
+
445
+ <li class="has-sub" >
446
+ <a class="sidenav-item-link" href="javascript:void(0)" data-toggle="collapse" data-target="#tables"
447
+ aria-expanded="false" aria-controls="tables">
448
+ <span class="nav-text">Tables</span> <b class="caret"></b>
449
+ </a>
450
+ <ul class="collapse" id="tables">
451
+ <div class="sub-menu">
452
+
453
+ <li >
454
+ <a href="bootstarp-tables.html">Bootstrap Tables</a>
455
+ </li>
456
+
457
+ <li >
458
+ <a href="data-tables.html">Data Tables</a>
459
+ </li>
460
+
461
+ </div>
462
+ </ul>
463
+ </li>
464
+
465
+
466
+
467
+
468
+
469
+ <li >
470
+ <a class="sidenav-item-link" href="tab.html">
471
+ <span class="nav-text">Tab</span>
472
+
473
+ </a>
474
+ </li>
475
+
476
+
477
+
478
+
479
+
480
+
481
+ <li >
482
+ <a class="sidenav-item-link" href="toaster.html">
483
+ <span class="nav-text">Toaster</span>
484
+
485
+ </a>
486
+ </li>
487
+
488
+
489
+
490
+
491
+
492
+ <li class="has-sub" >
493
+ <a class="sidenav-item-link" href="javascript:void(0)" data-toggle="collapse" data-target="#icons"
494
+ aria-expanded="false" aria-controls="icons">
495
+ <span class="nav-text">Icons</span> <b class="caret"></b>
496
+ </a>
497
+ <ul class="collapse" id="icons">
498
+ <div class="sub-menu">
499
+
500
+ <li >
501
+ <a href="material-icons.html">Material Icon</a>
502
+ </li>
503
+
504
+ <li >
505
+ <a href="flag-icons.html">Flag Icon</a>
506
+ </li>
507
+
508
+ </div>
509
+ </ul>
510
+ </li>
511
+
512
+
513
+
514
+
515
+ <li class="has-sub" >
516
+ <a class="sidenav-item-link" href="javascript:void(0)" data-toggle="collapse" data-target="#forms"
517
+ aria-expanded="false" aria-controls="forms">
518
+ <span class="nav-text">Forms</span> <b class="caret"></b>
519
+ </a>
520
+ <ul class="collapse" id="forms">
521
+ <div class="sub-menu">
522
+
523
+ <li >
524
+ <a href="basic-input.html">Basic Input</a>
525
+ </li>
526
+
527
+ <li >
528
+ <a href="input-group.html">Input Group</a>
529
+ </li>
530
+
531
+ <li >
532
+ <a href="checkbox-radio.html">Checkbox & Radio</a>
533
+ </li>
534
+
535
+ <li >
536
+ <a href="form-validation.html">Form Validation</a>
537
+ </li>
538
+
539
+ <li >
540
+ <a href="form-advance.html">Form Advance</a>
541
+ </li>
542
+
543
+ </div>
544
+ </ul>
545
+ </li>
546
+
547
+
548
+
549
+
550
+ <li class="has-sub" >
551
+ <a class="sidenav-item-link" href="javascript:void(0)" data-toggle="collapse" data-target="#maps"
552
+ aria-expanded="false" aria-controls="maps">
553
+ <span class="nav-text">Maps</span> <b class="caret"></b>
554
+ </a>
555
+ <ul class="collapse" id="maps">
556
+ <div class="sub-menu">
557
+
558
+ <li >
559
+ <a href="google-maps.html">Google Map</a>
560
+ </li>
561
+
562
+ <li >
563
+ <a href="vector-maps.html">Vector Map</a>
564
+ </li>
565
+
566
+ </div>
567
+ </ul>
568
+ </li>
569
+
570
+
571
+
572
+
573
+ <li class="has-sub" >
574
+ <a class="sidenav-item-link" href="javascript:void(0)" data-toggle="collapse" data-target="#widgets"
575
+ aria-expanded="false" aria-controls="widgets">
576
+ <span class="nav-text">Widgets</span> <b class="caret"></b>
577
+ </a>
578
+ <ul class="collapse" id="widgets">
579
+ <div class="sub-menu">
580
+
581
+ <li >
582
+ <a href="widgets-general.html">General Widget</a>
583
+ </li>
584
+
585
+ <li >
586
+ <a href="widgets-chart.html">Chart Widget</a>
587
+ </li>
588
+
589
+ </div>
590
+ </ul>
591
+ </li>
592
+
593
+
594
+
595
+ </div>
596
+ </ul>
597
+ </li>
598
+
599
+
600
+
601
+
602
+
603
+ <li class="has-sub" >
604
+ <a class="sidenav-item-link" href="javascript:void(0)" data-toggle="collapse" data-target="#charts"
605
+ aria-expanded="false" aria-controls="charts">
606
+ <i class="mdi mdi-chart-pie"></i>
607
+ <span class="nav-text">Charts</span> <b class="caret"></b>
608
+ </a>
609
+ <ul class="collapse" id="charts"
610
+ data-parent="#sidebar-menu">
611
+ <div class="sub-menu">
612
+
613
+
614
+
615
+ <li >
616
+ <a class="sidenav-item-link" href="apex-charts.html">
617
+ <span class="nav-text">Apex Charts</span>
618
+
619
+ </a>
620
+ </li>
621
+
622
+
623
+
624
+
625
+ </div>
626
+ </ul>
627
+ </li>
628
+
629
+
630
+
631
+
632
+
633
+ <li class="section-title">
634
+ Pages
635
+ </li>
636
+
637
+
638
+
639
+
640
+
641
+ <li class="has-sub" >
642
+ <a class="sidenav-item-link" href="javascript:void(0)" data-toggle="collapse" data-target="#users"
643
+ aria-expanded="false" aria-controls="users">
644
+ <i class="mdi mdi-image-filter-none"></i>
645
+ <span class="nav-text">User</span> <b class="caret"></b>
646
+ </a>
647
+ <ul class="collapse" id="users"
648
+ data-parent="#sidebar-menu">
649
+ <div class="sub-menu">
650
+
651
+
652
+
653
+ <li >
654
+ <a class="sidenav-item-link" href="user-profile.html">
655
+ <span class="nav-text">User Profile</span>
656
+
657
+ </a>
658
+ </li>
659
+
660
+
661
+
662
+
663
+
664
+
665
+ <li >
666
+ <a class="sidenav-item-link" href="user-activities.html">
667
+ <span class="nav-text">User Activities</span>
668
+
669
+ </a>
670
+ </li>
671
+
672
+
673
+
674
+
675
+
676
+
677
+ <li >
678
+ <a class="sidenav-item-link" href="user-profile-settings.html">
679
+ <span class="nav-text">User Profile Settings</span>
680
+
681
+ </a>
682
+ </li>
683
+
684
+
685
+
686
+
687
+
688
+
689
+ <li >
690
+ <a class="sidenav-item-link" href="user-account-settings.html">
691
+ <span class="nav-text">User Account Settings</span>
692
+
693
+ </a>
694
+ </li>
695
+
696
+
697
+
698
+
699
+
700
+
701
+ <li >
702
+ <a class="sidenav-item-link" href="user-planing-settings.html">
703
+ <span class="nav-text">User Planing Settings</span>
704
+
705
+ </a>
706
+ </li>
707
+
708
+
709
+
710
+
711
+
712
+
713
+ <li >
714
+ <a class="sidenav-item-link" href="user-billing.html">
715
+ <span class="nav-text">User billing</span>
716
+
717
+ </a>
718
+ </li>
719
+
720
+
721
+
722
+
723
+
724
+
725
+ <li >
726
+ <a class="sidenav-item-link" href="user-notify-settings.html">
727
+ <span class="nav-text">User Notify Settings</span>
728
+
729
+ </a>
730
+ </li>
731
+
732
+
733
+
734
+
735
+ </div>
736
+ </ul>
737
+ </li>
738
+
739
+
740
+
741
+
742
+
743
+ <li class="has-sub" >
744
+ <a class="sidenav-item-link" href="javascript:void(0)" data-toggle="collapse" data-target="#authentication"
745
+ aria-expanded="false" aria-controls="authentication">
746
+ <i class="mdi mdi-account"></i>
747
+ <span class="nav-text">Authentication</span> <b class="caret"></b>
748
+ </a>
749
+ <ul class="collapse" id="authentication"
750
+ data-parent="#sidebar-menu">
751
+ <div class="sub-menu">
752
+
753
+
754
+
755
+ <li >
756
+ <a class="sidenav-item-link" href="sign-in.html">
757
+ <span class="nav-text">Sign In</span>
758
+
759
+ </a>
760
+ </li>
761
+
762
+
763
+
764
+
765
+
766
+
767
+ <li >
768
+ <a class="sidenav-item-link" href="sign-up.html">
769
+ <span class="nav-text">Sign Up</span>
770
+
771
+ </a>
772
+ </li>
773
+
774
+
775
+
776
+
777
+
778
+
779
+ <li >
780
+ <a class="sidenav-item-link" href="reset-password.html">
781
+ <span class="nav-text">Reset Password</span>
782
+
783
+ </a>
784
+ </li>
785
+
786
+
787
+
788
+
789
+ </div>
790
+ </ul>
791
+ </li>
792
+
793
+
794
+
795
+
796
+
797
+ <li class="has-sub" >
798
+ <a class="sidenav-item-link" href="javascript:void(0)" data-toggle="collapse" data-target="#other-page"
799
+ aria-expanded="false" aria-controls="other-page">
800
+ <i class="mdi mdi-file-multiple"></i>
801
+ <span class="nav-text">Other pages</span> <b class="caret"></b>
802
+ </a>
803
+ <ul class="collapse" id="other-page"
804
+ data-parent="#sidebar-menu">
805
+ <div class="sub-menu">
806
+
807
+
808
+
809
+ <li >
810
+ <a class="sidenav-item-link" href="invoice.html">
811
+ <span class="nav-text">Invoice</span>
812
+
813
+ </a>
814
+ </li>
815
+
816
+
817
+
818
+
819
+
820
+
821
+ <li >
822
+ <a class="sidenav-item-link" href="404.html">
823
+ <span class="nav-text">404 page</span>
824
+
825
+ </a>
826
+ </li>
827
+
828
+
829
+
830
+
831
+
832
+
833
+ <li >
834
+ <a class="sidenav-item-link" href="page-comingsoon.html">
835
+ <span class="nav-text">Coming Soon</span>
836
+
837
+ </a>
838
+ </li>
839
+
840
+
841
+
842
+
843
+
844
+
845
+ <li >
846
+ <a class="sidenav-item-link" href="page-maintenance.html">
847
+ <span class="nav-text">Maintenance</span>
848
+
849
+ </a>
850
+ </li>
851
+
852
+
853
+
854
+
855
+ </div>
856
+ </ul>
857
+ </li>
858
+
859
+
860
+
861
+
862
+
863
+ <li class="section-title">
864
+ Documentation
865
+ </li>
866
+
867
+
868
+
869
+
870
+
871
+ <li
872
+ >
873
+ <a class="sidenav-item-link" href="getting-started.html">
874
+ <i class="mdi mdi-airplane"></i>
875
+ <span class="nav-text">Getting Started</span>
876
+ </a>
877
+ </li>
878
+
879
+
880
+
881
+
882
+
883
+ <li class="has-sub" >
884
+ <a class="sidenav-item-link" href="javascript:void(0)" data-toggle="collapse" data-target="#customization"
885
+ aria-expanded="false" aria-controls="customization">
886
+ <i class="mdi mdi-square-edit-outline"></i>
887
+ <span class="nav-text">Customization</span> <b class="caret"></b>
888
+ </a>
889
+ <ul class="collapse" id="customization"
890
+ data-parent="#sidebar-menu">
891
+ <div class="sub-menu">
892
+
893
+
894
+
895
+ <li >
896
+ <a class="sidenav-item-link" href="navbar-customization.html">
897
+ <span class="nav-text">Navbar</span>
898
+
899
+ </a>
900
+ </li>
901
+
902
+
903
+
904
+
905
+
906
+
907
+ <li >
908
+ <a class="sidenav-item-link" href="sidebar-customization.html">
909
+ <span class="nav-text">Sidebar</span>
910
+
911
+ </a>
912
+ </li>
913
+
914
+
915
+
916
+
917
+
918
+
919
+ <li >
920
+ <a class="sidenav-item-link" href="styling.html">
921
+ <span class="nav-text">Styling</span>
922
+
923
+ </a>
924
+ </li>
925
+
926
+
927
+
928
+
929
+ </div>
930
+ </ul>
931
+ </li>
932
+
933
+
934
+
935
+ </ul>
936
+
937
+ </div>
938
+
939
+ <div class="sidebar-footer">
940
+ <div class="sidebar-footer-content">
941
+ <ul class="d-flex">
942
+ <li>
943
+ <a href="user-account-settings.html" data-toggle="tooltip" title="Profile settings"><i class="mdi mdi-settings"></i></a></li>
944
+ <li>
945
+ <a href="#" data-toggle="tooltip" title="No chat messages"><i class="mdi mdi-chat-processing"></i></a>
946
+ </li>
947
+ </ul>
948
+ </div>
949
+ </div>
950
+ </div>
951
+ </aside>
952
+
953
+
954
+
955
+ <!-- ====================================
956
+ ——— PAGE WRAPPER
957
+ ===================================== -->
958
+ <div class="page-wrapper">
959
+
960
+ <!-- Header -->
961
+ <header class="main-header" id="header">
962
+ <nav class="navbar navbar-expand-lg navbar-light" id="navbar">
963
+ <!-- Sidebar toggle button -->
964
+ <button id="sidebar-toggler" class="sidebar-toggle">
965
+ <span class="sr-only">Toggle navigation</span>
966
+ </button>
967
+
968
+ <span class="page-title">carousel</span>
969
+
970
+ <div class="navbar-right ">
971
+
972
+ <!-- search form -->
973
+ <div class="search-form">
974
+ <form action="index.html" method="get">
975
+ <div class="input-group input-group-sm" id="input-group-search">
976
+ <input type="text" autocomplete="off" name="query" id="search-input" class="form-control" placeholder="Search..." />
977
+ <div class="input-group-append">
978
+ <button class="btn" type="button">/</button>
979
+ </div>
980
+ </div>
981
+ </form>
982
+ <ul class="dropdown-menu dropdown-menu-search">
983
+
984
+ <li class="nav-item">
985
+ <a class="nav-link" href="index.html">Morbi leo risus</a>
986
+ </li>
987
+ <li class="nav-item">
988
+ <a class="nav-link" href="index.html">Dapibus ac facilisis in</a>
989
+ </li>
990
+ <li class="nav-item">
991
+ <a class="nav-link" href="index.html">Porta ac consectetur ac</a>
992
+ </li>
993
+ <li class="nav-item">
994
+ <a class="nav-link" href="index.html">Vestibulum at eros</a>
995
+ </li>
996
+
997
+ </ul>
998
+
999
+ </div>
1000
+
1001
+ <ul class="nav navbar-nav">
1002
+ <!-- Offcanvas -->
1003
+ <li class="custom-dropdown">
1004
+ <a class="offcanvas-toggler active custom-dropdown-toggler" data-offcanvas="contact-off" href="javascript:" >
1005
+ <i class="mdi mdi-contacts icon"></i>
1006
+ </a>
1007
+ </li>
1008
+ <li class="custom-dropdown">
1009
+ <button class="notify-toggler custom-dropdown-toggler">
1010
+ <i class="mdi mdi-bell-outline icon"></i>
1011
+ <span class="badge badge-xs rounded-circle">21</span>
1012
+ </button>
1013
+ <div class="dropdown-notify">
1014
+
1015
+ <header>
1016
+ <div class="nav nav-underline" id="nav-tab" role="tablist">
1017
+ <a class="nav-item nav-link active" id="all-tabs" data-toggle="tab" href="#all" role="tab" aria-controls="nav-home"
1018
+ aria-selected="true">All (5)</a>
1019
+ <a class="nav-item nav-link" id="message-tab" data-toggle="tab" href="#message" role="tab" aria-controls="nav-profile"
1020
+ aria-selected="false">Msgs (4)</a>
1021
+ <a class="nav-item nav-link" id="other-tab" data-toggle="tab" href="#other" role="tab" aria-controls="nav-contact"
1022
+ aria-selected="false">Others (3)</a>
1023
+ </div>
1024
+ </header>
1025
+
1026
+ <div class="" data-simplebar style="height: 325px;">
1027
+ <div class="tab-content" id="myTabContent">
1028
+
1029
+ <div class="tab-pane fade show active" id="all" role="tabpanel" aria-labelledby="all-tabs">
1030
+
1031
+ <div class="media media-sm bg-warning-10 p-4 mb-0">
1032
+ <div class="media-sm-wrapper">
1033
+ <a href="user-profile.html">
1034
+ <img src="images/user/user-sm-02.jpg" alt="User Image">
1035
+ </a>
1036
+ </div>
1037
+ <div class="media-body">
1038
+ <a href="user-profile.html">
1039
+ <span class="title mb-0">John Doe</span>
1040
+ <span class="discribe">Extremity sweetness difficult behaviour he of. On disposal of as landlord horrible. Afraid at highly months do things on at.</span>
1041
+ <span class="time">
1042
+ <time>Just now</time>...
1043
+ </span>
1044
+ </a>
1045
+ </div>
1046
+ </div>
1047
+
1048
+ <div class="media media-sm p-4 bg-light mb-0">
1049
+ <div class="media-sm-wrapper bg-primary">
1050
+ <a href="user-profile.html">
1051
+ <i class="mdi mdi-calendar-check-outline"></i>
1052
+ </a>
1053
+ </div>
1054
+ <div class="media-body">
1055
+ <a href="user-profile.html">
1056
+ <span class="title mb-0">New event added</span>
1057
+ <span class="discribe">1/3/2014 (1pm - 2pm)</span>
1058
+ <span class="time">
1059
+ <time>10 min ago...</time>...
1060
+ </span>
1061
+ </a>
1062
+ </div>
1063
+ </div>
1064
+
1065
+ <div class="media media-sm p-4 mb-0">
1066
+ <div class="media-sm-wrapper">
1067
+ <a href="user-profile.html">
1068
+ <img src="images/user/user-sm-03.jpg" alt="User Image">
1069
+ </a>
1070
+ </div>
1071
+ <div class="media-body">
1072
+ <a href="user-profile.html">
1073
+ <span class="title mb-0">Sagge Hudson</span>
1074
+ <span class="discribe">On disposal of as landlord Afraid at highly months do things on at.</span>
1075
+ <span class="time">
1076
+ <time>1 hrs ago</time>...
1077
+ </span>
1078
+ </a>
1079
+ </div>
1080
+ </div>
1081
+
1082
+ <div class="media media-sm p-4 mb-0">
1083
+ <div class="media-sm-wrapper bg-info-dark">
1084
+ <a href="user-profile.html">
1085
+ <i class="mdi mdi-account-multiple-check"></i>
1086
+ </a>
1087
+ </div>
1088
+ <div class="media-body">
1089
+ <a href="user-profile.html">
1090
+ <span class="title mb-0">Add request</span>
1091
+ <span class="discribe">Add Dany Jones as your contact.</span>
1092
+ <div class="buttons">
1093
+ <a href="#" class="btn btn-sm btn-success shadow-none text-white">accept</a>
1094
+ <a href="#" class="btn btn-sm shadow-none">delete</a>
1095
+ </div>
1096
+ <span class="time">
1097
+ <time>6 hrs ago</time>...
1098
+ </span>
1099
+ </a>
1100
+ </div>
1101
+ </div>
1102
+
1103
+ <div class="media media-sm p-4 mb-0">
1104
+ <div class="media-sm-wrapper bg-info">
1105
+ <a href="user-profile.html">
1106
+ <i class="mdi mdi-playlist-check"></i>
1107
+ </a>
1108
+ </div>
1109
+ <div class="media-body">
1110
+ <a href="user-profile.html">
1111
+ <span class="title mb-0">Task complete</span>
1112
+ <span class="discribe">Afraid at highly months do things on at.</span>
1113
+ <span class="time">
1114
+ <time>1 hrs ago</time>...
1115
+ </span>
1116
+ </a>
1117
+ </div>
1118
+ </div>
1119
+
1120
+ </div>
1121
+
1122
+ <div class="tab-pane fade" id="message" role="tabpanel" aria-labelledby="message-tab">
1123
+
1124
+ <div class="media media-sm p-4 mb-0">
1125
+ <div class="media-sm-wrapper">
1126
+ <a href="user-profile.html">
1127
+ <img src="images/user/user-sm-01.jpg" alt="User Image">
1128
+ </a>
1129
+ </div>
1130
+ <div class="media-body">
1131
+ <a href="user-profile.html">
1132
+ <span class="title mb-0">Selena Wagner</span>
1133
+ <span class="discribe">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</span>
1134
+ <span class="time">
1135
+ <time>15 min ago</time>...
1136
+ </span>
1137
+ </a>
1138
+ </div>
1139
+ </div>
1140
+
1141
+ <div class="media media-sm p-4 mb-0">
1142
+ <div class="media-sm-wrapper">
1143
+ <a href="user-profile.html">
1144
+ <img src="images/user/user-sm-03.jpg" alt="User Image">
1145
+ </a>
1146
+ </div>
1147
+ <div class="media-body">
1148
+ <a href="user-profile.html">
1149
+ <span class="title mb-0">Sagge Hudson</span>
1150
+ <span class="discribe">On disposal of as landlord Afraid at highly months do things on at.</span>
1151
+ <span class="time">
1152
+ <time>1 hrs ago</time>...
1153
+ </span>
1154
+ </a>
1155
+ </div>
1156
+ </div>
1157
+
1158
+ <div class="media media-sm bg-warning-10 p-4 mb-0">
1159
+ <div class="media-sm-wrapper">
1160
+ <a href="user-profile.html">
1161
+ <img src="images/user/user-sm-02.jpg" alt="User Image">
1162
+ </a>
1163
+ </div>
1164
+ <div class="media-body">
1165
+ <a href="user-profile.html">
1166
+ <span class="title mb-0">John Doe</span>
1167
+ <span class="discribe">Extremity sweetness difficult behaviour he of. On disposal of as landlord horrible. Afraid
1168
+ at highly months do things on at.</span>
1169
+ <span class="time">
1170
+ <time>Just now</time>...
1171
+ </span>
1172
+ </a>
1173
+ </div>
1174
+ </div>
1175
+
1176
+ <div class="media media-sm p-4 mb-0">
1177
+ <div class="media-sm-wrapper">
1178
+ <a href="user-profile.html">
1179
+ <img src="images/user/user-sm-04.jpg" alt="User Image">
1180
+ </a>
1181
+ </div>
1182
+ <div class="media-body">
1183
+ <a href="user-profile.html">
1184
+ <span class="title mb-0">Albrecht Straub</span>
1185
+ <span class="discribe"> Beatae quia natus assumenda laboriosam, nisi perferendis aliquid consectetur expedita non tenetur.</span>
1186
+ <span class="time">
1187
+ <time>Just now</time>...
1188
+ </span>
1189
+ </a>
1190
+ </div>
1191
+ </div>
1192
+
1193
+ </div>
1194
+ <div class="tab-pane fade" id="other" role="tabpanel" aria-labelledby="contact-tab">
1195
+
1196
+ <div class="media media-sm p-4 bg-light mb-0">
1197
+ <div class="media-sm-wrapper bg-primary">
1198
+ <a href="user-profile.html">
1199
+ <i class="mdi mdi-calendar-check-outline"></i>
1200
+ </a>
1201
+ </div>
1202
+ <div class="media-body">
1203
+ <a href="user-profile.html">
1204
+ <span class="title mb-0">New event added</span>
1205
+ <span class="discribe">1/3/2014 (1pm - 2pm)</span>
1206
+ <span class="time">
1207
+ <time>10 min ago...</time>...
1208
+ </span>
1209
+ </a>
1210
+ </div>
1211
+ </div>
1212
+
1213
+ <div class="media media-sm p-4 mb-0">
1214
+ <div class="media-sm-wrapper bg-info-dark">
1215
+ <a href="user-profile.html">
1216
+ <i class="mdi mdi-account-multiple-check"></i>
1217
+ </a>
1218
+ </div>
1219
+ <div class="media-body">
1220
+ <a href="user-profile.html">
1221
+ <span class="title mb-0">Add request</span>
1222
+ <span class="discribe">Add Dany Jones as your contact.</span>
1223
+ <div class="buttons">
1224
+ <a href="#" class="btn btn-sm btn-success shadow-none text-white">accept</a>
1225
+ <a href="#" class="btn btn-sm shadow-none">delete</a>
1226
+ </div>
1227
+ <span class="time">
1228
+ <time>6 hrs ago</time>...
1229
+ </span>
1230
+ </a>
1231
+ </div>
1232
+ </div>
1233
+
1234
+ <div class="media media-sm p-4 mb-0">
1235
+ <div class="media-sm-wrapper bg-info">
1236
+ <a href="user-profile.html">
1237
+ <i class="mdi mdi-playlist-check"></i>
1238
+ </a>
1239
+ </div>
1240
+ <div class="media-body">
1241
+ <a href="user-profile.html">
1242
+ <span class="title mb-0">Task complete</span>
1243
+ <span class="discribe">Afraid at highly months do things on at.</span>
1244
+ <span class="time">
1245
+ <time>1 hrs ago</time>...
1246
+ </span>
1247
+ </a>
1248
+ </div>
1249
+ </div>
1250
+
1251
+ </div>
1252
+ </div>
1253
+ </div>
1254
+
1255
+ <footer class="border-top dropdown-notify-footer">
1256
+ <div class="d-flex justify-content-between align-items-center py-2 px-4">
1257
+ <span>Last updated 3 min ago</span>
1258
+ <a id="refress-button" href="javascript:" class="btn mdi mdi-cached btn-refress"></a>
1259
+ </div>
1260
+ </footer>
1261
+ </div>
1262
+ </li>
1263
+ <!-- User Account -->
1264
+ <li class="dropdown user-menu">
1265
+ <button class="dropdown-toggle nav-link" data-toggle="dropdown">
1266
+ <img src="images/user/user-xs-01.jpg" class="user-image rounded-circle" alt="User Image" />
1267
+ <span class="d-none d-lg-inline-block">John Doe</span>
1268
+ </button>
1269
+ <ul class="dropdown-menu dropdown-menu-right">
1270
+ <li>
1271
+ <a class="dropdown-link-item" href="user-profile.html">
1272
+ <i class="mdi mdi-account-outline"></i>
1273
+ <span class="nav-text">My Profile</span>
1274
+ </a>
1275
+ </li>
1276
+ <li>
1277
+ <a class="dropdown-link-item" href="email-inbox.html">
1278
+ <i class="mdi mdi-email-outline"></i>
1279
+ <span class="nav-text">Message</span>
1280
+ <span class="badge badge-pill badge-primary">24</span>
1281
+ </a>
1282
+ </li>
1283
+ <li>
1284
+ <a class="dropdown-link-item" href="user-activities.html">
1285
+ <i class="mdi mdi-diamond-stone"></i>
1286
+ <span class="nav-text">Activitise</span></a>
1287
+ </li>
1288
+ <li>
1289
+ <a class="dropdown-link-item" href="user-account-settings.html">
1290
+ <i class="mdi mdi-settings"></i>
1291
+ <span class="nav-text">Account Setting</span>
1292
+ </a>
1293
+ </li>
1294
+
1295
+ <li class="dropdown-footer">
1296
+ <a class="dropdown-link-item" href="sign-in.html"> <i class="mdi mdi-logout"></i> Log Out </a>
1297
+ </li>
1298
+ </ul>
1299
+ </li>
1300
+ </ul>
1301
+ </div>
1302
+ </nav>
1303
+
1304
+
1305
+ </header>
1306
+
1307
+ <!-- ====================================
1308
+ ——— CONTENT WRAPPER
1309
+ ===================================== -->
1310
+ <div class="content-wrapper">
1311
+ <div class="content"><!-- For Components documentaion -->
1312
+ <div class="card card-default">
1313
+ <div class="px-6 py-4">
1314
+ <p>Mono provides a variety of <span class="text-secondary text-capitalize"> Owl Carousel </span> components with a
1315
+ little customization that suits its design standards. For more information, please see the official <a
1316
+ class="font-weight-bold" href="https://owlcarousel2.github.io/OwlCarousel2/docs/started-welcome.html" target="_blank"> Owl Carousel Documentaion.</a></p>
1317
+ </div>
1318
+ </div>
1319
+
1320
+ <!-- Slide Only -->
1321
+ <div class="card card-default">
1322
+ <div class="card-header">
1323
+ <h2>Slide Only</h2>
1324
+ <a class="btn mdi mdi-code-tags" data-toggle="collapse" href="#collapse-carousel-1" role="button"
1325
+ aria-expanded="false" aria-controls="collapse-carousel-1"> </a>
1326
+
1327
+
1328
+ </div>
1329
+ <div class="card-body">
1330
+ <div class="collapse" id="collapse-carousel-1">
1331
+ <pre class="language-html mb-4">
1332
+ <code >
1333
+ &lt;div class="owl-carousel slide-only"&gt;
1334
+ &lt;div class="single-item bg-overlay-black-40 rounded"&gt;
1335
+ &lt;img class="rounded" src="images/elements/slide1.jpg" alt="Slide Image"&gt;
1336
+ &lt;/div&gt;
1337
+ &lt;div class="single-item bg-overlay-black-40 rounded"&gt;
1338
+ &lt;img src="images/elements/slide2.jpg" alt="Slide Image"&gt;
1339
+ &lt;/div&gt;
1340
+ &lt;div class="single-item bg-overlay-black-40 rounded"&gt;
1341
+ &lt;img src="images/elements/slide3.jpg" alt="Slide Image"&gt;
1342
+ &lt;/div&gt;
1343
+ &lt;/div&gt;
1344
+ </code>
1345
+ </pre>
1346
+ </div>
1347
+ <!-- Set up your HTML -->
1348
+ <div class="owl-carousel slide-only">
1349
+
1350
+ <div class="single-item bg-overlay-black-40 rounded">
1351
+ <img class="rounded" src="images/elements/slide1.jpg" alt="Slide Image">
1352
+ </div>
1353
+
1354
+ <div class="single-item bg-overlay-black-40 rounded">
1355
+ <img class="rounded" src="images/elements/slide2.jpg" alt="Slide Image">
1356
+ </div>
1357
+
1358
+ <div class="single-item bg-overlay-black-40 rounded">
1359
+ <img class="rounded" src="images/elements/slide3.jpg" alt="Slide Image">
1360
+ </div>
1361
+
1362
+ </div>
1363
+
1364
+ </div>
1365
+ </div>
1366
+
1367
+
1368
+ <!-- With Control -->
1369
+ <div class="card card-default">
1370
+ <div class="card-header">
1371
+ <h2>With Control</h2>
1372
+ <a class="btn mdi mdi-code-tags" data-toggle="collapse" href="#collapse-carousel-2" role="button"
1373
+ aria-expanded="false" aria-controls="collapse-carousel-2"> </a>
1374
+
1375
+
1376
+ </div>
1377
+ <div class="card-body">
1378
+ <div class="collapse" id="collapse-carousel-2">
1379
+ <pre class="language-html mb-4">
1380
+ <code >
1381
+ &lt;div class="owl-carousel owl-theme carousel-with-control"&gt;
1382
+ &lt;div class="single-item bg-overlay-black-40 rounded"&gt;
1383
+ &lt;img class="rounded" src="images/elements/slide2.jpg" alt="Slide Image"&gt;
1384
+ &lt;/div&gt;
1385
+ &lt;div class="single-item bg-overlay-black-40 rounded"&gt;
1386
+ &lt;img class="rounded" src="images/elements/slide1.jpg" alt="Slide Image"&gt;
1387
+ &lt;/div&gt;
1388
+ &lt;div class="single-item bg-overlay-black-40 rounded"&gt;
1389
+ &lt;img class="rounded" src="images/elements/slide3.jpg" alt="Slide Image"&gt;
1390
+ &lt;/div&gt;
1391
+ &lt;/div&gt;
1392
+ </code>
1393
+ </pre>
1394
+ </div>
1395
+ <!-- Set up your HTML -->
1396
+ <div class="owl-carousel owl-theme carousel-with-control">
1397
+
1398
+ <div class="single-item bg-overlay-black-40 rounded">
1399
+ <img class="rounded" src="images/elements/slide2.jpg" alt="Slide Image">
1400
+ </div>
1401
+
1402
+ <div class="single-item bg-overlay-black-40 rounded">
1403
+ <img class="rounded" src="images/elements/slide1.jpg" alt="Slide Image">
1404
+ </div>
1405
+
1406
+ <div class="single-item bg-overlay-black-40 rounded">
1407
+ <img class="rounded" src="images/elements/slide3.jpg" alt="Slide Image">
1408
+ </div>
1409
+
1410
+ </div>
1411
+
1412
+ </div>
1413
+ </div>
1414
+
1415
+ <!-- With Indicators -->
1416
+ <div class="card card-default">
1417
+ <div class="card-header">
1418
+ <h2>With Indicators</h2>
1419
+ <a class="btn mdi mdi-code-tags" data-toggle="collapse" href="#collapse-carousel-3" role="button"
1420
+ aria-expanded="false" aria-controls="collapse-carousel-3"> </a>
1421
+
1422
+
1423
+ </div>
1424
+ <div class="card-body">
1425
+ <div class="collapse" id="collapse-carousel-3">
1426
+ <pre class="language-html mb-4">
1427
+ <code >
1428
+ &lt;div class="owl-carousel owl-theme carousel-with-indicators"&gt;
1429
+ &lt;div class="single-item bg-overlay-black-40 rounded"&gt;
1430
+ &lt;img class="rounded" src="images/elements/slide3.jpg" alt="Slide Image"&gt;
1431
+ &lt;/div&gt;
1432
+ &lt;div class="single-item bg-overlay-black-40 rounded"&gt;
1433
+ &lt;img class="rounded" src="images/elements/slide2.jpg" alt="Slide Image"&gt;
1434
+ &lt;/div&gt;
1435
+ &lt;div class="single-item bg-overlay-black-40 rounded"&gt;
1436
+ &lt;img class="rounded" src="images/elements/slide1.jpg" alt="Slide Image"&gt;
1437
+ &lt;/div&gt;
1438
+ &lt;/div&gt;
1439
+ </code>
1440
+ </pre>
1441
+ </div>
1442
+ <!-- Set up your HTML -->
1443
+ <div class="owl-carousel owl-theme carousel-with-indicators">
1444
+
1445
+ <div class="single-item bg-overlay-black-40 rounded">
1446
+ <img class="rounded" src="images/elements/slide3.jpg" alt="Slide Image">
1447
+ </div>
1448
+
1449
+ <div class="single-item bg-overlay-black-40 rounded">
1450
+ <img class="rounded" src="images/elements/slide2.jpg" alt="Slide Image">
1451
+ </div>
1452
+
1453
+ <div class="single-item bg-overlay-black-40 rounded">
1454
+ <img class="rounded" src="images/elements/slide1.jpg" alt="Slide Image">
1455
+ </div>
1456
+
1457
+ </div>
1458
+
1459
+ </div>
1460
+ </div>
1461
+
1462
+
1463
+ <!-- With Captions -->
1464
+ <div class="card card-default">
1465
+ <div class="card-header">
1466
+ <h2>With Captions</h2>
1467
+ <a class="btn mdi mdi-code-tags" data-toggle="collapse" href="#collapse-carousel-4" role="button"
1468
+ aria-expanded="false" aria-controls="collapse-carousel-4"> </a>
1469
+
1470
+
1471
+ </div>
1472
+ <div class="card-body">
1473
+ <div class="collapse" id="collapse-carousel-4">
1474
+ <pre class="language-html mb-4">
1475
+ <code >
1476
+ &lt;div class="owl-carousel owl-theme carousel-with-captions"&gt;
1477
+ &lt;div class="single-item bg-overlay-black-40 rounded"&gt;
1478
+ &lt;img class="rounded" src="images/elements/slide4.jpg" alt="Slide Image"&gt;
1479
+ &lt;div class="carousel-caption d-none d-md-block"&gt;
1480
+ &lt;h3 class="text-white mb-3"&gt;First Title Goes Here&lt;/h3&gt;
1481
+ &lt;p class="text-white"&gt;Praesent commodo cursus magna vel scelerisque&lt;/p&gt;
1482
+ &lt;/div&gt;
1483
+ &lt;/div&gt;
1484
+ &lt;div class="single-item bg-overlay-black-40 rounded"&gt;
1485
+ &lt;img class="rounded" src="images/elements/slide3.jpg" alt="Slide Image"&gt;
1486
+ &lt;div class="carousel-caption d-none d-md-block"&gt;
1487
+ &lt;h3 class="text-white mb-3"&gt;Second Title Goes Here&lt;/h3&gt;
1488
+ &lt;p class="text-white"&gt;Praesent commodo cursus magna vel scelerisque&lt;/p&gt;
1489
+ &lt;/div&gt;
1490
+ &lt;/div&gt;
1491
+ &lt;div class="single-item bg-overlay-black-40 rounded"&gt;
1492
+ &lt;img class="rounded" src="images/elements/slide1.jpg" alt="Slide Image"&gt;
1493
+ &lt;div class="carousel-caption d-none d-md-block"&gt;
1494
+ &lt;h3 class="text-white mb-3"&gt;Third Title Goes Here&lt;/h3&gt;
1495
+ &lt;p class="text-white"&gt;Praesent commodo cursus magna vel scelerisque&lt;/p&gt;
1496
+ &lt;/div&gt;
1497
+ &lt;/div&gt;
1498
+ &lt;/div&gt;
1499
+ </code>
1500
+ </pre>
1501
+ </div>
1502
+ <!-- Set up your HTML -->
1503
+ <div class="owl-carousel owl-theme carousel-with-captions">
1504
+
1505
+ <div class="single-item bg-overlay-black-40 rounded">
1506
+ <img class="rounded" src="images/elements/slide4.jpg" alt="Slide Image">
1507
+ <div class="carousel-caption d-none d-md-block">
1508
+ <h3 class="text-white mb-3">First Title Goes Here</h3>
1509
+ <p class="text-white">Praesent commodo cursus magna vel scelerisque</p>
1510
+ </div>
1511
+ </div>
1512
+
1513
+ <div class="single-item bg-overlay-black-40 rounded">
1514
+ <img class="rounded" src="images/elements/slide3.jpg" alt="Slide Image">
1515
+ <div class="carousel-caption d-none d-md-block">
1516
+ <h3 class="text-white mb-3">Second Title Goes Here</h3>
1517
+ <p class="text-white">Praesent commodo cursus magna vel scelerisque</p>
1518
+ </div>
1519
+ </div>
1520
+
1521
+ <div class="single-item bg-overlay-black-40 rounded">
1522
+ <img class="rounded" src="images/elements/slide1.jpg" alt="Slide Image">
1523
+ <div class="carousel-caption d-none d-md-block">
1524
+ <h3 class="text-white mb-3">Third Title Goes Here</h3>
1525
+ <p class="text-white">Praesent commodo cursus magna vel scelerisque</p>
1526
+ </div>
1527
+ </div>
1528
+
1529
+ </div>
1530
+
1531
+ </div>
1532
+ </div>
1533
+
1534
+
1535
+ <!-- User Carousel -->
1536
+ <div class="card card-default">
1537
+ <div class="card-header">
1538
+ <h2>User Carousel</h2>
1539
+ <a class="btn mdi mdi-code-tags" data-toggle="collapse" href="#collapse-carousel-5" role="button"
1540
+ aria-expanded="false" aria-controls="collapse-carousel-5"> </a>
1541
+
1542
+
1543
+ </div>
1544
+ <div class="card-body">
1545
+ <div class="collapse" id="collapse-carousel-5">
1546
+ <pre class="language-html mb-4">
1547
+ <code >
1548
+ &lt;div class="container"&gt;
1549
+ &lt;div class="owl-carousel owl-theme carousel-user"&gt;
1550
+ &lt;div class="card border-0"&gt;
1551
+ &lt;img src="images/elements/user-lg-1.jpg" class="card-img-top rounded-circle" alt="User Image"&gt;
1552
+ &lt;div class="card-body text-center"&gt;
1553
+ &lt;span class="h4 d-block"&gt;Steven Foster&lt;/span&gt;
1554
+ &lt;span&gt;Co-Founder&lt;/span&gt;
1555
+ &lt;/div&gt;
1556
+ &lt;/div&gt;
1557
+ &lt;div class="card border-0"&gt;
1558
+ &lt;img src="images/elements/user-lg-2.jpg" class="card-img-top rounded-circle" alt="User Image"&gt;
1559
+ &lt;div class="card-body text-center"&gt;
1560
+ &lt;span class="h4 d-block"&gt;Randy Ortan&lt;/span&gt;
1561
+ &lt;span&gt;Graphic designer&lt;/span&gt;
1562
+ &lt;/div&gt;
1563
+ &lt;/div&gt;
1564
+ &lt;div class="card border-0"&gt;
1565
+ &lt;img src="images/elements/user-lg-3.jpg" class="card-img-top rounded-circle" alt="User Image"&gt;
1566
+ &lt;div class="card-body text-center"&gt;
1567
+ &lt;span class="h4 d-block"&gt;Mark Henry&lt;/span&gt;
1568
+ &lt;span&gt;Photographer&lt;/span&gt;
1569
+ &lt;/div&gt;
1570
+ &lt;/div&gt;
1571
+ &lt;div class="card border-0"&gt;
1572
+ &lt;img src="images/elements/user-lg-4.jpg" class="card-img-top rounded-circle" alt="User Image"&gt;
1573
+ &lt;div class="card-body text-center"&gt;
1574
+ &lt;span class="h4 d-block"&gt;Katy Perry&lt;/span&gt;
1575
+ &lt;span&gt;Interior designer&lt;/span&gt;
1576
+ &lt;/div&gt;
1577
+ &lt;/div&gt;
1578
+ &lt;div class="card border-0"&gt;
1579
+ &lt;img src="images/elements/user-lg-1.jpg" class="card-img-top rounded-circle" alt="User Image"&gt;
1580
+ &lt;div class="card-body text-center"&gt;
1581
+ &lt;span class="h4 d-block"&gt;Steven Foster&lt;/span&gt;
1582
+ &lt;span&gt;Co-Founder&lt;/span&gt;
1583
+ &lt;/div&gt;
1584
+ &lt;/div&gt;
1585
+ &lt;div class="card border-0"&gt;
1586
+ &lt;img src="images/elements/user-lg-2.jpg" class="card-img-top rounded-circle" alt="User Image"&gt;
1587
+ &lt;div class="card-body text-center"&gt;
1588
+ &lt;span class="h4 d-block"&gt;Randy Ortan&lt;/span&gt;
1589
+ &lt;span&gt;Graphic designer&lt;/span&gt;
1590
+ &lt;/div&gt;
1591
+ &lt;/div&gt;
1592
+ &lt;/div&gt;
1593
+ &lt;/div&gt;
1594
+ </code>
1595
+ </pre>
1596
+ </div>
1597
+ <!-- Set up your HTML -->
1598
+ <div class="container">
1599
+ <div class="owl-carousel owl-theme carousel-user">
1600
+ <div class="card border-0">
1601
+ <img src="images/elements/user-lg-1.jpg" class="card-img-top rounded-circle" alt="User Image">
1602
+ <div class="card-body text-center">
1603
+ <span class="h4 d-block">Steven Foster</span>
1604
+ <span>Co-Founder</span>
1605
+ </div>
1606
+ </div>
1607
+ <div class="card border-0">
1608
+ <img src="images/elements/user-lg-2.jpg" class="card-img-top rounded-circle" alt="User Image">
1609
+ <div class="card-body text-center">
1610
+ <span class="h4 d-block">Randy Ortan</span>
1611
+ <span>Graphic designer</span>
1612
+ </div>
1613
+ </div>
1614
+ <div class="card border-0">
1615
+ <img src="images/elements/user-lg-3.jpg" class="card-img-top rounded-circle" alt="User Image">
1616
+ <div class="card-body text-center">
1617
+ <span class="h4 d-block">Mark Henry</span>
1618
+ <span>Photographer</span>
1619
+ </div>
1620
+ </div>
1621
+ <div class="card border-0">
1622
+ <img src="images/elements/user-lg-4.jpg" class="card-img-top rounded-circle" alt="User Image">
1623
+ <div class="card-body text-center">
1624
+ <span class="h4 d-block">Katy Perry</span>
1625
+ <span>Interior designer</span>
1626
+ </div>
1627
+ </div>
1628
+ <div class="card border-0">
1629
+ <img src="images/elements/user-lg-1.jpg" class="card-img-top rounded-circle" alt="User Image">
1630
+ <div class="card-body text-center">
1631
+ <span class="h4 d-block">Steven Foster</span>
1632
+ <span>Co-Founder</span>
1633
+ </div>
1634
+ </div>
1635
+ <div class="card border-0">
1636
+ <img src="images/elements/user-lg-2.jpg" class="card-img-top rounded-circle" alt="User Image">
1637
+ <div class="card-body text-center">
1638
+ <span class="h4 d-block">Randy Ortan</span>
1639
+ <span>Graphic designer</span>
1640
+ </div>
1641
+ </div>
1642
+ </div>
1643
+ </div>
1644
+
1645
+
1646
+ </div>
1647
+ </div>
1648
+
1649
+
1650
+ <!-- Testimonial Carousel -->
1651
+ <div class="card card-default">
1652
+ <div class="card-header">
1653
+ <h2>Testimonial Carousel</h2>
1654
+ <a class="btn mdi mdi-code-tags" data-toggle="collapse" href="#collapse-carousel-6" role="button"
1655
+ aria-expanded="false" aria-controls="collapse-carousel-6"> </a>
1656
+
1657
+
1658
+ </div>
1659
+ <div class="card-body">
1660
+ <div class="collapse" id="collapse-carousel-6">
1661
+ <pre class="language-html mb-4">
1662
+ <code >
1663
+ &lt;div class="owl-carousel owl-theme carousel-testimonial"&gt;
1664
+ &lt;div class="card border-0"&gt;
1665
+ &lt;img src="images/elements/user-md-1.jpg" class="card-img-top rounded-circle mb-5" alt="User Image"&gt;
1666
+ &lt;div class="card-body text-center"&gt;
1667
+ &lt;p class="mb-5"&gt;Lorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore
1668
+ et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
1669
+ commodo consequat. Duis aute irure dolor reprehenderit.&lt;/p&gt;
1670
+ &lt;span class="h4 d-block"&gt;Peter Kain&lt;/span&gt;
1671
+ &lt;span&gt;Consultance Acme. inc.&lt;/span&gt;
1672
+ &lt;/div&gt;
1673
+ &lt;/div&gt;
1674
+ &lt;div class="card border-0"&gt;
1675
+ &lt;img src="images/elements/user-md-2.jpg" class="card-img-top rounded-circle mb-5" alt="User Image"&gt;
1676
+ &lt;div class="card-body text-center"&gt;
1677
+ &lt;p class="mb-5"&gt;Lorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore
1678
+ et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
1679
+ commodo consequat. Duis aute irure dolor reprehenderit.&lt;/p&gt;
1680
+ &lt;span class="h4 d-block"&gt;Mary Johnson&lt;/span&gt;
1681
+ &lt;span&gt;Promotions manager&lt;/span&gt;
1682
+ &lt;/div&gt;
1683
+ &lt;/div&gt;
1684
+ &lt;div class="card border-0"&gt;
1685
+ &lt;img src="images/elements/user-md-3.jpg" class="card-img-top rounded-circle mb-5" alt="User Image"&gt;
1686
+ &lt;div class="card-body text-center"&gt;
1687
+ &lt;p class="mb-5"&gt;Lorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore
1688
+ et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
1689
+ commodo consequat. Duis aute irure dolor reprehenderit.&lt;/p&gt;
1690
+ &lt;span class="h4 d-block"&gt;Mark henry&lt;/span&gt;
1691
+ &lt;span&gt;Fashion designer&lt;/span&gt;
1692
+ &lt;/div&gt;
1693
+ &lt;/div&gt;
1694
+
1695
+ &lt;/div&gt;
1696
+ </code>
1697
+ </pre>
1698
+ </div>
1699
+ <!-- Set up your HTML -->
1700
+ <div class="owl-carousel owl-theme carousel-testimonial">
1701
+
1702
+ <div class="card border-0">
1703
+ <img src="images/elements/user-md-1.jpg" class="card-img-top rounded-circle mb-5" alt="User Image">
1704
+ <div class="card-body text-center">
1705
+ <p class="mb-5">Lorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor reprehenderit.</p>
1706
+ <span class="h4 d-block">Peter Kain</span>
1707
+ <span>Consultance Acme. inc.</span>
1708
+ </div>
1709
+ </div>
1710
+ <div class="card border-0">
1711
+ <img src="images/elements/user-md-2.jpg" class="card-img-top rounded-circle mb-5" alt="User Image">
1712
+ <div class="card-body text-center">
1713
+ <p class="mb-5">Lorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore
1714
+ et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
1715
+ commodo consequat. Duis aute irure dolor reprehenderit.</p>
1716
+ <span class="h4 d-block">Mary Johnson</span>
1717
+ <span>Promotions manager</span>
1718
+ </div>
1719
+ </div>
1720
+ <div class="card border-0">
1721
+ <img src="images/elements/user-md-3.jpg" class="card-img-top rounded-circle mb-5" alt="User Image">
1722
+ <div class="card-body text-center">
1723
+ <p class="mb-5">Lorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore
1724
+ et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
1725
+ commodo consequat. Duis aute irure dolor reprehenderit.</p>
1726
+ <span class="h4 d-block">Mark henry</span>
1727
+ <span>Fashion designer</span>
1728
+ </div>
1729
+ </div>
1730
+
1731
+ </div>
1732
+ </div>
1733
+ </div>
1734
+ </div>
1735
+
1736
+ </div>
1737
+
1738
+ <!-- Footer -->
1739
+ <footer class="footer mt-auto">
1740
+ <div class="copyright bg-white">
1741
+ <p>
1742
+ &copy; <span id="copy-year"></span> Copyright Mono Dashboard Bootstrap Template by <a class="text-primary" href="http://www.iamabdus.com/" target="_blank" >Abdus</a>.
1743
+ </p>
1744
+ </div>
1745
+ <script>
1746
+ var d = new Date();
1747
+ var year = d.getFullYear();
1748
+ document.getElementById("copy-year").innerHTML = year;
1749
+ </script>
1750
+ </footer>
1751
+
1752
+ </div>
1753
+ </div>
1754
+
1755
+ <!-- Card Offcanvas -->
1756
+ <div class="card card-offcanvas" id="contact-off" >
1757
+ <div class="card-header">
1758
+ <h2>Contacts</h2>
1759
+ <a href="#" class="btn btn-primary btn-pill px-4">Add New</a>
1760
+ </div>
1761
+ <div class="card-body">
1762
+
1763
+ <div class="mb-4">
1764
+ <input type="text" class="form-control form-control-lg form-control-secondary rounded-0" placeholder="Search contacts...">
1765
+ </div>
1766
+
1767
+ <div class="media media-sm">
1768
+ <div class="media-sm-wrapper">
1769
+ <a href="user-profile.html">
1770
+ <img src="images/user/user-sm-01.jpg" alt="User Image">
1771
+ <span class="active bg-primary"></span>
1772
+ </a>
1773
+ </div>
1774
+ <div class="media-body">
1775
+ <a href="user-profile.html">
1776
+ <span class="title">Selena Wagner</span>
1777
+ <span class="discribe">Designer</span>
1778
+ </a>
1779
+ </div>
1780
+ </div>
1781
+
1782
+ <div class="media media-sm">
1783
+ <div class="media-sm-wrapper">
1784
+ <a href="user-profile.html">
1785
+ <img src="images/user/user-sm-02.jpg" alt="User Image">
1786
+ <span class="active bg-primary"></span>
1787
+ </a>
1788
+ </div>
1789
+ <div class="media-body">
1790
+ <a href="user-profile.html">
1791
+ <span class="title">Walter Reuter</span>
1792
+ <span>Developer</span>
1793
+ </a>
1794
+ </div>
1795
+ </div>
1796
+
1797
+ <div class="media media-sm">
1798
+ <div class="media-sm-wrapper">
1799
+ <a href="user-profile.html">
1800
+ <img src="images/user/user-sm-03.jpg" alt="User Image">
1801
+ </a>
1802
+ </div>
1803
+ <div class="media-body">
1804
+ <a href="user-profile.html">
1805
+ <span class="title">Larissa Gebhardt</span>
1806
+ <span>Cyber Punk</span>
1807
+ </a>
1808
+ </div>
1809
+ </div>
1810
+
1811
+ <div class="media media-sm">
1812
+ <div class="media-sm-wrapper">
1813
+ <a href="user-profile.html">
1814
+ <img src="images/user/user-sm-04.jpg" alt="User Image">
1815
+ </a>
1816
+
1817
+ </div>
1818
+ <div class="media-body">
1819
+ <a href="user-profile.html">
1820
+ <span class="title">Albrecht Straub</span>
1821
+ <span>Photographer</span>
1822
+ </a>
1823
+ </div>
1824
+ </div>
1825
+
1826
+ <div class="media media-sm">
1827
+ <div class="media-sm-wrapper">
1828
+ <a href="user-profile.html">
1829
+ <img src="images/user/user-sm-05.jpg" alt="User Image">
1830
+ <span class="active bg-danger"></span>
1831
+ </a>
1832
+ </div>
1833
+ <div class="media-body">
1834
+ <a href="user-profile.html">
1835
+ <span class="title">Leopold Ebert</span>
1836
+ <span>Fashion Designer</span>
1837
+ </a>
1838
+ </div>
1839
+ </div>
1840
+
1841
+ <div class="media media-sm">
1842
+ <div class="media-sm-wrapper">
1843
+ <a href="user-profile.html">
1844
+ <img src="images/user/user-sm-06.jpg" alt="User Image">
1845
+ <span class="active bg-primary"></span>
1846
+ </a>
1847
+ </div>
1848
+ <div class="media-body">
1849
+ <a href="user-profile.html">
1850
+ <span class="title">Selena Wagner</span>
1851
+ <span>Photographer</span>
1852
+ </a>
1853
+ </div>
1854
+ </div>
1855
+
1856
+ </div>
1857
+ </div>
1858
+
1859
+
1860
+
1861
+
1862
+ <script src="plugins/jquery/jquery.min.js"></script>
1863
+ <script src="plugins/bootstrap/js/bootstrap.bundle.min.js"></script>
1864
+ <script src="plugins/simplebar/simplebar.min.js"></script>
1865
+ <script src="https://unpkg.com/hotkeys-js/dist/hotkeys.min.js"></script>
1866
+
1867
+
1868
+
1869
+ <script src="plugins/prism/prism.js"></script>
1870
+
1871
+
1872
+
1873
+ <script src="plugins/owl-carousel/owl.carousel.min.js"></script>
1874
+
1875
+
1876
+ <script src="js/mono.js"></script>
1877
+ <script src="js/chart.js"></script>
1878
+ <script src="js/map.js"></script>
1879
+ <script src="js/custom.js"></script>
1880
+
1881
+
1882
+
1883
+
1884
+ <!-- -->
1885
+
1886
+
1887
+ </body>
1888
+ </html>
chat.html ADDED
@@ -0,0 +1,1995 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+
3
+ <!--
4
+ // WEBSITE: https://themefisher.com
5
+ // TWITTER: https://twitter.com/themefisher
6
+ // FACEBOOK: https://www.facebook.com/themefisher
7
+ // GITHUB: https://github.com/themefisher/
8
+ -->
9
+
10
+ <html lang="en" dir="ltr">
11
+ <head>
12
+ <meta charset="utf-8" />
13
+ <meta http-equiv="X-UA-Compatible" content="IE=edge" />
14
+ <meta name="viewport" content="width=device-width, initial-scale=1" />
15
+
16
+ <title>Mono - Responsive Admin & Dashboard Template</title>
17
+
18
+ <!-- GOOGLE FONTS -->
19
+ <link href="https://fonts.googleapis.com/css?family=Karla:400,700|Roboto" rel="stylesheet">
20
+ <link href="plugins/material/css/materialdesignicons.min.css" rel="stylesheet" />
21
+ <link href="plugins/simplebar/simplebar.css" rel="stylesheet" />
22
+
23
+ <!-- PLUGINS CSS STYLE -->
24
+ <link href="plugins/nprogress/nprogress.css" rel="stylesheet" />
25
+
26
+
27
+
28
+
29
+ <link href="plugins/DataTables/DataTables-1.10.18/css/jquery.dataTables.min.css" rel="stylesheet" />
30
+
31
+
32
+
33
+ <link href="plugins/jvectormap/jquery-jvectormap-2.0.3.css" rel="stylesheet" />
34
+
35
+
36
+
37
+ <link href="plugins/daterangepicker/daterangepicker.css" rel="stylesheet" />
38
+
39
+
40
+
41
+ <link href="https://cdn.quilljs.com/1.3.6/quill.snow.css" rel="stylesheet">
42
+
43
+
44
+
45
+ <link href="plugins/toaster/toastr.min.css" rel="stylesheet" />
46
+
47
+
48
+ <!-- MONO CSS -->
49
+ <link id="main-css-href" rel="stylesheet" href="css/style.css" />
50
+
51
+
52
+
53
+
54
+ <!-- FAVICON -->
55
+ <link href="images/favicon.png" rel="shortcut icon" />
56
+
57
+ <!--
58
+ HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries
59
+ -->
60
+ <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
61
+ <!--[if lt IE 9]>
62
+ <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
63
+ <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
64
+ <![endif]-->
65
+ <script src="plugins/nprogress/nprogress.js"></script>
66
+ </head>
67
+
68
+
69
+ <body class="navbar-fixed sidebar-fixed" id="body">
70
+ <script>
71
+ NProgress.configure({ showSpinner: false });
72
+ NProgress.start();
73
+ </script>
74
+
75
+
76
+
77
+ <!-- ====================================
78
+ ——— WRAPPER
79
+ ===================================== -->
80
+ <div class="wrapper">
81
+
82
+
83
+ <!-- ====================================
84
+ ——— LEFT SIDEBAR WITH OUT FOOTER
85
+ ===================================== -->
86
+ <aside class="left-sidebar sidebar-dark" id="left-sidebar">
87
+ <div id="sidebar" class="sidebar sidebar-with-footer">
88
+ <!-- Aplication Brand -->
89
+ <div class="app-brand">
90
+ <a href="/index.html">
91
+ <img src="images/logo.png" alt="Mono">
92
+ <span class="brand-name">MONO</span>
93
+ </a>
94
+ </div>
95
+ <!-- begin sidebar scrollbar -->
96
+ <div class="sidebar-left" data-simplebar style="height: 100%;">
97
+ <!-- sidebar menu -->
98
+ <ul class="nav sidebar-inner" id="sidebar-menu">
99
+
100
+
101
+
102
+ <li
103
+ >
104
+ <a class="sidenav-item-link" href="index.html">
105
+ <i class="mdi mdi-briefcase-account-outline"></i>
106
+ <span class="nav-text">Business Dashboard</span>
107
+ </a>
108
+ </li>
109
+
110
+
111
+
112
+
113
+
114
+ <li
115
+ >
116
+ <a class="sidenav-item-link" href="analytics.html">
117
+ <i class="mdi mdi-chart-line"></i>
118
+ <span class="nav-text">Analytics Dashboard</span>
119
+ </a>
120
+ </li>
121
+
122
+
123
+
124
+
125
+
126
+ <li class="section-title">
127
+ Apps
128
+ </li>
129
+
130
+
131
+
132
+
133
+
134
+ <li
135
+ class="active"
136
+ >
137
+ <a class="sidenav-item-link" href="chat.html">
138
+ <i class="mdi mdi-wechat"></i>
139
+ <span class="nav-text">Chat</span>
140
+ </a>
141
+ </li>
142
+
143
+
144
+
145
+
146
+
147
+ <li
148
+ >
149
+ <a class="sidenav-item-link" href="contacts.html">
150
+ <i class="mdi mdi-phone"></i>
151
+ <span class="nav-text">Contacts</span>
152
+ </a>
153
+ </li>
154
+
155
+
156
+
157
+
158
+
159
+ <li
160
+ >
161
+ <a class="sidenav-item-link" href="team.html">
162
+ <i class="mdi mdi-account-group"></i>
163
+ <span class="nav-text">Team</span>
164
+ </a>
165
+ </li>
166
+
167
+
168
+
169
+
170
+
171
+ <li
172
+ >
173
+ <a class="sidenav-item-link" href="calendar.html">
174
+ <i class="mdi mdi-calendar-check"></i>
175
+ <span class="nav-text">Calendar</span>
176
+ </a>
177
+ </li>
178
+
179
+
180
+
181
+
182
+
183
+ <li class="has-sub" >
184
+ <a class="sidenav-item-link" href="javascript:void(0)" data-toggle="collapse" data-target="#email"
185
+ aria-expanded="false" aria-controls="email">
186
+ <i class="mdi mdi-email"></i>
187
+ <span class="nav-text">email</span> <b class="caret"></b>
188
+ </a>
189
+ <ul class="collapse" id="email"
190
+ data-parent="#sidebar-menu">
191
+ <div class="sub-menu">
192
+
193
+
194
+
195
+ <li >
196
+ <a class="sidenav-item-link" href="email-inbox.html">
197
+ <span class="nav-text">Email Inbox</span>
198
+
199
+ </a>
200
+ </li>
201
+
202
+
203
+
204
+
205
+
206
+
207
+ <li >
208
+ <a class="sidenav-item-link" href="email-details.html">
209
+ <span class="nav-text">Email Details</span>
210
+
211
+ </a>
212
+ </li>
213
+
214
+
215
+
216
+
217
+
218
+
219
+ <li >
220
+ <a class="sidenav-item-link" href="email-compose.html">
221
+ <span class="nav-text">Email Compose</span>
222
+
223
+ </a>
224
+ </li>
225
+
226
+
227
+
228
+
229
+ </div>
230
+ </ul>
231
+ </li>
232
+
233
+
234
+
235
+
236
+
237
+ <li class="section-title">
238
+ UI Elements
239
+ </li>
240
+
241
+
242
+
243
+
244
+
245
+ <li class="has-sub" >
246
+ <a class="sidenav-item-link" href="javascript:void(0)" data-toggle="collapse" data-target="#ui-elements"
247
+ aria-expanded="false" aria-controls="ui-elements">
248
+ <i class="mdi mdi-folder-outline"></i>
249
+ <span class="nav-text">UI Components</span> <b class="caret"></b>
250
+ </a>
251
+ <ul class="collapse" id="ui-elements"
252
+ data-parent="#sidebar-menu">
253
+ <div class="sub-menu">
254
+
255
+
256
+
257
+ <li >
258
+ <a class="sidenav-item-link" href="alert.html">
259
+ <span class="nav-text">Alert</span>
260
+
261
+ </a>
262
+ </li>
263
+
264
+
265
+
266
+
267
+
268
+
269
+ <li >
270
+ <a class="sidenav-item-link" href="badge.html">
271
+ <span class="nav-text">Badge</span>
272
+
273
+ </a>
274
+ </li>
275
+
276
+
277
+
278
+
279
+
280
+
281
+ <li >
282
+ <a class="sidenav-item-link" href="breadcrumb.html">
283
+ <span class="nav-text">Breadcrumb</span>
284
+
285
+ </a>
286
+ </li>
287
+
288
+
289
+
290
+
291
+
292
+ <li class="has-sub" >
293
+ <a class="sidenav-item-link" href="javascript:void(0)" data-toggle="collapse" data-target="#buttons"
294
+ aria-expanded="false" aria-controls="buttons">
295
+ <span class="nav-text">Buttons</span> <b class="caret"></b>
296
+ </a>
297
+ <ul class="collapse" id="buttons">
298
+ <div class="sub-menu">
299
+
300
+ <li >
301
+ <a href="button-default.html">Button Default</a>
302
+ </li>
303
+
304
+ <li >
305
+ <a href="button-dropdown.html">Button Dropdown</a>
306
+ </li>
307
+
308
+ <li >
309
+ <a href="button-group.html">Button Group</a>
310
+ </li>
311
+
312
+ <li >
313
+ <a href="button-social.html">Button Social</a>
314
+ </li>
315
+
316
+ <li >
317
+ <a href="button-loading.html">Button Loading</a>
318
+ </li>
319
+
320
+ </div>
321
+ </ul>
322
+ </li>
323
+
324
+
325
+
326
+
327
+
328
+ <li >
329
+ <a class="sidenav-item-link" href="card.html">
330
+ <span class="nav-text">Card</span>
331
+
332
+ </a>
333
+ </li>
334
+
335
+
336
+
337
+
338
+
339
+
340
+ <li >
341
+ <a class="sidenav-item-link" href="carousel.html">
342
+ <span class="nav-text">Carousel</span>
343
+
344
+ </a>
345
+ </li>
346
+
347
+
348
+
349
+
350
+
351
+
352
+ <li >
353
+ <a class="sidenav-item-link" href="collapse.html">
354
+ <span class="nav-text">Collapse</span>
355
+
356
+ </a>
357
+ </li>
358
+
359
+
360
+
361
+
362
+
363
+
364
+ <li >
365
+ <a class="sidenav-item-link" href="editor.html">
366
+ <span class="nav-text">Editor</span>
367
+
368
+ </a>
369
+ </li>
370
+
371
+
372
+
373
+
374
+
375
+
376
+ <li >
377
+ <a class="sidenav-item-link" href="list-group.html">
378
+ <span class="nav-text">List Group</span>
379
+
380
+ </a>
381
+ </li>
382
+
383
+
384
+
385
+
386
+
387
+
388
+ <li >
389
+ <a class="sidenav-item-link" href="modal.html">
390
+ <span class="nav-text">Modal</span>
391
+
392
+ </a>
393
+ </li>
394
+
395
+
396
+
397
+
398
+
399
+
400
+ <li >
401
+ <a class="sidenav-item-link" href="pagination.html">
402
+ <span class="nav-text">Pagination</span>
403
+
404
+ </a>
405
+ </li>
406
+
407
+
408
+
409
+
410
+
411
+
412
+ <li >
413
+ <a class="sidenav-item-link" href="popover-tooltip.html">
414
+ <span class="nav-text">Popover & Tooltip</span>
415
+
416
+ </a>
417
+ </li>
418
+
419
+
420
+
421
+
422
+
423
+
424
+ <li >
425
+ <a class="sidenav-item-link" href="progress-bar.html">
426
+ <span class="nav-text">Progress Bar</span>
427
+
428
+ </a>
429
+ </li>
430
+
431
+
432
+
433
+
434
+
435
+
436
+ <li >
437
+ <a class="sidenav-item-link" href="spinner.html">
438
+ <span class="nav-text">Spinner</span>
439
+
440
+ </a>
441
+ </li>
442
+
443
+
444
+
445
+
446
+
447
+
448
+ <li >
449
+ <a class="sidenav-item-link" href="switches.html">
450
+ <span class="nav-text">Switches</span>
451
+
452
+ </a>
453
+ </li>
454
+
455
+
456
+
457
+
458
+
459
+ <li class="has-sub" >
460
+ <a class="sidenav-item-link" href="javascript:void(0)" data-toggle="collapse" data-target="#tables"
461
+ aria-expanded="false" aria-controls="tables">
462
+ <span class="nav-text">Tables</span> <b class="caret"></b>
463
+ </a>
464
+ <ul class="collapse" id="tables">
465
+ <div class="sub-menu">
466
+
467
+ <li >
468
+ <a href="bootstarp-tables.html">Bootstrap Tables</a>
469
+ </li>
470
+
471
+ <li >
472
+ <a href="data-tables.html">Data Tables</a>
473
+ </li>
474
+
475
+ </div>
476
+ </ul>
477
+ </li>
478
+
479
+
480
+
481
+
482
+
483
+ <li >
484
+ <a class="sidenav-item-link" href="tab.html">
485
+ <span class="nav-text">Tab</span>
486
+
487
+ </a>
488
+ </li>
489
+
490
+
491
+
492
+
493
+
494
+
495
+ <li >
496
+ <a class="sidenav-item-link" href="toaster.html">
497
+ <span class="nav-text">Toaster</span>
498
+
499
+ </a>
500
+ </li>
501
+
502
+
503
+
504
+
505
+
506
+ <li class="has-sub" >
507
+ <a class="sidenav-item-link" href="javascript:void(0)" data-toggle="collapse" data-target="#icons"
508
+ aria-expanded="false" aria-controls="icons">
509
+ <span class="nav-text">Icons</span> <b class="caret"></b>
510
+ </a>
511
+ <ul class="collapse" id="icons">
512
+ <div class="sub-menu">
513
+
514
+ <li >
515
+ <a href="material-icons.html">Material Icon</a>
516
+ </li>
517
+
518
+ <li >
519
+ <a href="flag-icons.html">Flag Icon</a>
520
+ </li>
521
+
522
+ </div>
523
+ </ul>
524
+ </li>
525
+
526
+
527
+
528
+
529
+ <li class="has-sub" >
530
+ <a class="sidenav-item-link" href="javascript:void(0)" data-toggle="collapse" data-target="#forms"
531
+ aria-expanded="false" aria-controls="forms">
532
+ <span class="nav-text">Forms</span> <b class="caret"></b>
533
+ </a>
534
+ <ul class="collapse" id="forms">
535
+ <div class="sub-menu">
536
+
537
+ <li >
538
+ <a href="basic-input.html">Basic Input</a>
539
+ </li>
540
+
541
+ <li >
542
+ <a href="input-group.html">Input Group</a>
543
+ </li>
544
+
545
+ <li >
546
+ <a href="checkbox-radio.html">Checkbox & Radio</a>
547
+ </li>
548
+
549
+ <li >
550
+ <a href="form-validation.html">Form Validation</a>
551
+ </li>
552
+
553
+ <li >
554
+ <a href="form-advance.html">Form Advance</a>
555
+ </li>
556
+
557
+ </div>
558
+ </ul>
559
+ </li>
560
+
561
+
562
+
563
+
564
+ <li class="has-sub" >
565
+ <a class="sidenav-item-link" href="javascript:void(0)" data-toggle="collapse" data-target="#maps"
566
+ aria-expanded="false" aria-controls="maps">
567
+ <span class="nav-text">Maps</span> <b class="caret"></b>
568
+ </a>
569
+ <ul class="collapse" id="maps">
570
+ <div class="sub-menu">
571
+
572
+ <li >
573
+ <a href="google-maps.html">Google Map</a>
574
+ </li>
575
+
576
+ <li >
577
+ <a href="vector-maps.html">Vector Map</a>
578
+ </li>
579
+
580
+ </div>
581
+ </ul>
582
+ </li>
583
+
584
+
585
+
586
+
587
+ <li class="has-sub" >
588
+ <a class="sidenav-item-link" href="javascript:void(0)" data-toggle="collapse" data-target="#widgets"
589
+ aria-expanded="false" aria-controls="widgets">
590
+ <span class="nav-text">Widgets</span> <b class="caret"></b>
591
+ </a>
592
+ <ul class="collapse" id="widgets">
593
+ <div class="sub-menu">
594
+
595
+ <li >
596
+ <a href="widgets-general.html">General Widget</a>
597
+ </li>
598
+
599
+ <li >
600
+ <a href="widgets-chart.html">Chart Widget</a>
601
+ </li>
602
+
603
+ </div>
604
+ </ul>
605
+ </li>
606
+
607
+
608
+
609
+ </div>
610
+ </ul>
611
+ </li>
612
+
613
+
614
+
615
+
616
+
617
+ <li class="has-sub" >
618
+ <a class="sidenav-item-link" href="javascript:void(0)" data-toggle="collapse" data-target="#charts"
619
+ aria-expanded="false" aria-controls="charts">
620
+ <i class="mdi mdi-chart-pie"></i>
621
+ <span class="nav-text">Charts</span> <b class="caret"></b>
622
+ </a>
623
+ <ul class="collapse" id="charts"
624
+ data-parent="#sidebar-menu">
625
+ <div class="sub-menu">
626
+
627
+
628
+
629
+ <li >
630
+ <a class="sidenav-item-link" href="apex-charts.html">
631
+ <span class="nav-text">Apex Charts</span>
632
+
633
+ </a>
634
+ </li>
635
+
636
+
637
+
638
+
639
+ </div>
640
+ </ul>
641
+ </li>
642
+
643
+
644
+
645
+
646
+
647
+ <li class="section-title">
648
+ Pages
649
+ </li>
650
+
651
+
652
+
653
+
654
+
655
+ <li class="has-sub" >
656
+ <a class="sidenav-item-link" href="javascript:void(0)" data-toggle="collapse" data-target="#users"
657
+ aria-expanded="false" aria-controls="users">
658
+ <i class="mdi mdi-image-filter-none"></i>
659
+ <span class="nav-text">User</span> <b class="caret"></b>
660
+ </a>
661
+ <ul class="collapse" id="users"
662
+ data-parent="#sidebar-menu">
663
+ <div class="sub-menu">
664
+
665
+
666
+
667
+ <li >
668
+ <a class="sidenav-item-link" href="user-profile.html">
669
+ <span class="nav-text">User Profile</span>
670
+
671
+ </a>
672
+ </li>
673
+
674
+
675
+
676
+
677
+
678
+
679
+ <li >
680
+ <a class="sidenav-item-link" href="user-activities.html">
681
+ <span class="nav-text">User Activities</span>
682
+
683
+ </a>
684
+ </li>
685
+
686
+
687
+
688
+
689
+
690
+
691
+ <li >
692
+ <a class="sidenav-item-link" href="user-profile-settings.html">
693
+ <span class="nav-text">User Profile Settings</span>
694
+
695
+ </a>
696
+ </li>
697
+
698
+
699
+
700
+
701
+
702
+
703
+ <li >
704
+ <a class="sidenav-item-link" href="user-account-settings.html">
705
+ <span class="nav-text">User Account Settings</span>
706
+
707
+ </a>
708
+ </li>
709
+
710
+
711
+
712
+
713
+
714
+
715
+ <li >
716
+ <a class="sidenav-item-link" href="user-planing-settings.html">
717
+ <span class="nav-text">User Planing Settings</span>
718
+
719
+ </a>
720
+ </li>
721
+
722
+
723
+
724
+
725
+
726
+
727
+ <li >
728
+ <a class="sidenav-item-link" href="user-billing.html">
729
+ <span class="nav-text">User billing</span>
730
+
731
+ </a>
732
+ </li>
733
+
734
+
735
+
736
+
737
+
738
+
739
+ <li >
740
+ <a class="sidenav-item-link" href="user-notify-settings.html">
741
+ <span class="nav-text">User Notify Settings</span>
742
+
743
+ </a>
744
+ </li>
745
+
746
+
747
+
748
+
749
+ </div>
750
+ </ul>
751
+ </li>
752
+
753
+
754
+
755
+
756
+
757
+ <li class="has-sub" >
758
+ <a class="sidenav-item-link" href="javascript:void(0)" data-toggle="collapse" data-target="#authentication"
759
+ aria-expanded="false" aria-controls="authentication">
760
+ <i class="mdi mdi-account"></i>
761
+ <span class="nav-text">Authentication</span> <b class="caret"></b>
762
+ </a>
763
+ <ul class="collapse" id="authentication"
764
+ data-parent="#sidebar-menu">
765
+ <div class="sub-menu">
766
+
767
+
768
+
769
+ <li >
770
+ <a class="sidenav-item-link" href="sign-in.html">
771
+ <span class="nav-text">Sign In</span>
772
+
773
+ </a>
774
+ </li>
775
+
776
+
777
+
778
+
779
+
780
+
781
+ <li >
782
+ <a class="sidenav-item-link" href="sign-up.html">
783
+ <span class="nav-text">Sign Up</span>
784
+
785
+ </a>
786
+ </li>
787
+
788
+
789
+
790
+
791
+
792
+
793
+ <li >
794
+ <a class="sidenav-item-link" href="reset-password.html">
795
+ <span class="nav-text">Reset Password</span>
796
+
797
+ </a>
798
+ </li>
799
+
800
+
801
+
802
+
803
+ </div>
804
+ </ul>
805
+ </li>
806
+
807
+
808
+
809
+
810
+
811
+ <li class="has-sub" >
812
+ <a class="sidenav-item-link" href="javascript:void(0)" data-toggle="collapse" data-target="#other-page"
813
+ aria-expanded="false" aria-controls="other-page">
814
+ <i class="mdi mdi-file-multiple"></i>
815
+ <span class="nav-text">Other pages</span> <b class="caret"></b>
816
+ </a>
817
+ <ul class="collapse" id="other-page"
818
+ data-parent="#sidebar-menu">
819
+ <div class="sub-menu">
820
+
821
+
822
+
823
+ <li >
824
+ <a class="sidenav-item-link" href="invoice.html">
825
+ <span class="nav-text">Invoice</span>
826
+
827
+ </a>
828
+ </li>
829
+
830
+
831
+
832
+
833
+
834
+
835
+ <li >
836
+ <a class="sidenav-item-link" href="404.html">
837
+ <span class="nav-text">404 page</span>
838
+
839
+ </a>
840
+ </li>
841
+
842
+
843
+
844
+
845
+
846
+
847
+ <li >
848
+ <a class="sidenav-item-link" href="page-comingsoon.html">
849
+ <span class="nav-text">Coming Soon</span>
850
+
851
+ </a>
852
+ </li>
853
+
854
+
855
+
856
+
857
+
858
+
859
+ <li >
860
+ <a class="sidenav-item-link" href="page-maintenance.html">
861
+ <span class="nav-text">Maintenance</span>
862
+
863
+ </a>
864
+ </li>
865
+
866
+
867
+
868
+
869
+ </div>
870
+ </ul>
871
+ </li>
872
+
873
+
874
+
875
+
876
+
877
+ <li class="section-title">
878
+ Documentation
879
+ </li>
880
+
881
+
882
+
883
+
884
+
885
+ <li
886
+ >
887
+ <a class="sidenav-item-link" href="getting-started.html">
888
+ <i class="mdi mdi-airplane"></i>
889
+ <span class="nav-text">Getting Started</span>
890
+ </a>
891
+ </li>
892
+
893
+
894
+
895
+
896
+
897
+ <li class="has-sub" >
898
+ <a class="sidenav-item-link" href="javascript:void(0)" data-toggle="collapse" data-target="#customization"
899
+ aria-expanded="false" aria-controls="customization">
900
+ <i class="mdi mdi-square-edit-outline"></i>
901
+ <span class="nav-text">Customization</span> <b class="caret"></b>
902
+ </a>
903
+ <ul class="collapse" id="customization"
904
+ data-parent="#sidebar-menu">
905
+ <div class="sub-menu">
906
+
907
+
908
+
909
+ <li >
910
+ <a class="sidenav-item-link" href="navbar-customization.html">
911
+ <span class="nav-text">Navbar</span>
912
+
913
+ </a>
914
+ </li>
915
+
916
+
917
+
918
+
919
+
920
+
921
+ <li >
922
+ <a class="sidenav-item-link" href="sidebar-customization.html">
923
+ <span class="nav-text">Sidebar</span>
924
+
925
+ </a>
926
+ </li>
927
+
928
+
929
+
930
+
931
+
932
+
933
+ <li >
934
+ <a class="sidenav-item-link" href="styling.html">
935
+ <span class="nav-text">Styling</span>
936
+
937
+ </a>
938
+ </li>
939
+
940
+
941
+
942
+
943
+ </div>
944
+ </ul>
945
+ </li>
946
+
947
+
948
+
949
+ </ul>
950
+
951
+ </div>
952
+
953
+ <div class="sidebar-footer">
954
+ <div class="sidebar-footer-content">
955
+ <ul class="d-flex">
956
+ <li>
957
+ <a href="user-account-settings.html" data-toggle="tooltip" title="Profile settings"><i class="mdi mdi-settings"></i></a></li>
958
+ <li>
959
+ <a href="#" data-toggle="tooltip" title="No chat messages"><i class="mdi mdi-chat-processing"></i></a>
960
+ </li>
961
+ </ul>
962
+ </div>
963
+ </div>
964
+ </div>
965
+ </aside>
966
+
967
+
968
+
969
+ <!-- ====================================
970
+ ——— PAGE WRAPPER
971
+ ===================================== -->
972
+ <div class="page-wrapper">
973
+
974
+ <!-- Header -->
975
+ <header class="main-header" id="header">
976
+ <nav class="navbar navbar-expand-lg navbar-light" id="navbar">
977
+ <!-- Sidebar toggle button -->
978
+ <button id="sidebar-toggler" class="sidebar-toggle">
979
+ <span class="sr-only">Toggle navigation</span>
980
+ </button>
981
+
982
+ <span class="page-title">chat</span>
983
+
984
+ <div class="navbar-right ">
985
+
986
+ <!-- search form -->
987
+ <div class="search-form">
988
+ <form action="index.html" method="get">
989
+ <div class="input-group input-group-sm" id="input-group-search">
990
+ <input type="text" autocomplete="off" name="query" id="search-input" class="form-control" placeholder="Search..." />
991
+ <div class="input-group-append">
992
+ <button class="btn" type="button">/</button>
993
+ </div>
994
+ </div>
995
+ </form>
996
+ <ul class="dropdown-menu dropdown-menu-search">
997
+
998
+ <li class="nav-item">
999
+ <a class="nav-link" href="index.html">Morbi leo risus</a>
1000
+ </li>
1001
+ <li class="nav-item">
1002
+ <a class="nav-link" href="index.html">Dapibus ac facilisis in</a>
1003
+ </li>
1004
+ <li class="nav-item">
1005
+ <a class="nav-link" href="index.html">Porta ac consectetur ac</a>
1006
+ </li>
1007
+ <li class="nav-item">
1008
+ <a class="nav-link" href="index.html">Vestibulum at eros</a>
1009
+ </li>
1010
+
1011
+ </ul>
1012
+
1013
+ </div>
1014
+
1015
+ <ul class="nav navbar-nav">
1016
+ <!-- Offcanvas -->
1017
+ <li class="custom-dropdown">
1018
+ <a class="offcanvas-toggler active custom-dropdown-toggler" data-offcanvas="contact-off" href="javascript:" >
1019
+ <i class="mdi mdi-contacts icon"></i>
1020
+ </a>
1021
+ </li>
1022
+ <li class="custom-dropdown">
1023
+ <button class="notify-toggler custom-dropdown-toggler">
1024
+ <i class="mdi mdi-bell-outline icon"></i>
1025
+ <span class="badge badge-xs rounded-circle">21</span>
1026
+ </button>
1027
+ <div class="dropdown-notify">
1028
+
1029
+ <header>
1030
+ <div class="nav nav-underline" id="nav-tab" role="tablist">
1031
+ <a class="nav-item nav-link active" id="all-tabs" data-toggle="tab" href="#all" role="tab" aria-controls="nav-home"
1032
+ aria-selected="true">All (5)</a>
1033
+ <a class="nav-item nav-link" id="message-tab" data-toggle="tab" href="#message" role="tab" aria-controls="nav-profile"
1034
+ aria-selected="false">Msgs (4)</a>
1035
+ <a class="nav-item nav-link" id="other-tab" data-toggle="tab" href="#other" role="tab" aria-controls="nav-contact"
1036
+ aria-selected="false">Others (3)</a>
1037
+ </div>
1038
+ </header>
1039
+
1040
+ <div class="" data-simplebar style="height: 325px;">
1041
+ <div class="tab-content" id="myTabContent">
1042
+
1043
+ <div class="tab-pane fade show active" id="all" role="tabpanel" aria-labelledby="all-tabs">
1044
+
1045
+ <div class="media media-sm bg-warning-10 p-4 mb-0">
1046
+ <div class="media-sm-wrapper">
1047
+ <a href="user-profile.html">
1048
+ <img src="images/user/user-sm-02.jpg" alt="User Image">
1049
+ </a>
1050
+ </div>
1051
+ <div class="media-body">
1052
+ <a href="user-profile.html">
1053
+ <span class="title mb-0">John Doe</span>
1054
+ <span class="discribe">Extremity sweetness difficult behaviour he of. On disposal of as landlord horrible. Afraid at highly months do things on at.</span>
1055
+ <span class="time">
1056
+ <time>Just now</time>...
1057
+ </span>
1058
+ </a>
1059
+ </div>
1060
+ </div>
1061
+
1062
+ <div class="media media-sm p-4 bg-light mb-0">
1063
+ <div class="media-sm-wrapper bg-primary">
1064
+ <a href="user-profile.html">
1065
+ <i class="mdi mdi-calendar-check-outline"></i>
1066
+ </a>
1067
+ </div>
1068
+ <div class="media-body">
1069
+ <a href="user-profile.html">
1070
+ <span class="title mb-0">New event added</span>
1071
+ <span class="discribe">1/3/2014 (1pm - 2pm)</span>
1072
+ <span class="time">
1073
+ <time>10 min ago...</time>...
1074
+ </span>
1075
+ </a>
1076
+ </div>
1077
+ </div>
1078
+
1079
+ <div class="media media-sm p-4 mb-0">
1080
+ <div class="media-sm-wrapper">
1081
+ <a href="user-profile.html">
1082
+ <img src="images/user/user-sm-03.jpg" alt="User Image">
1083
+ </a>
1084
+ </div>
1085
+ <div class="media-body">
1086
+ <a href="user-profile.html">
1087
+ <span class="title mb-0">Sagge Hudson</span>
1088
+ <span class="discribe">On disposal of as landlord Afraid at highly months do things on at.</span>
1089
+ <span class="time">
1090
+ <time>1 hrs ago</time>...
1091
+ </span>
1092
+ </a>
1093
+ </div>
1094
+ </div>
1095
+
1096
+ <div class="media media-sm p-4 mb-0">
1097
+ <div class="media-sm-wrapper bg-info-dark">
1098
+ <a href="user-profile.html">
1099
+ <i class="mdi mdi-account-multiple-check"></i>
1100
+ </a>
1101
+ </div>
1102
+ <div class="media-body">
1103
+ <a href="user-profile.html">
1104
+ <span class="title mb-0">Add request</span>
1105
+ <span class="discribe">Add Dany Jones as your contact.</span>
1106
+ <div class="buttons">
1107
+ <a href="#" class="btn btn-sm btn-success shadow-none text-white">accept</a>
1108
+ <a href="#" class="btn btn-sm shadow-none">delete</a>
1109
+ </div>
1110
+ <span class="time">
1111
+ <time>6 hrs ago</time>...
1112
+ </span>
1113
+ </a>
1114
+ </div>
1115
+ </div>
1116
+
1117
+ <div class="media media-sm p-4 mb-0">
1118
+ <div class="media-sm-wrapper bg-info">
1119
+ <a href="user-profile.html">
1120
+ <i class="mdi mdi-playlist-check"></i>
1121
+ </a>
1122
+ </div>
1123
+ <div class="media-body">
1124
+ <a href="user-profile.html">
1125
+ <span class="title mb-0">Task complete</span>
1126
+ <span class="discribe">Afraid at highly months do things on at.</span>
1127
+ <span class="time">
1128
+ <time>1 hrs ago</time>...
1129
+ </span>
1130
+ </a>
1131
+ </div>
1132
+ </div>
1133
+
1134
+ </div>
1135
+
1136
+ <div class="tab-pane fade" id="message" role="tabpanel" aria-labelledby="message-tab">
1137
+
1138
+ <div class="media media-sm p-4 mb-0">
1139
+ <div class="media-sm-wrapper">
1140
+ <a href="user-profile.html">
1141
+ <img src="images/user/user-sm-01.jpg" alt="User Image">
1142
+ </a>
1143
+ </div>
1144
+ <div class="media-body">
1145
+ <a href="user-profile.html">
1146
+ <span class="title mb-0">Selena Wagner</span>
1147
+ <span class="discribe">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</span>
1148
+ <span class="time">
1149
+ <time>15 min ago</time>...
1150
+ </span>
1151
+ </a>
1152
+ </div>
1153
+ </div>
1154
+
1155
+ <div class="media media-sm p-4 mb-0">
1156
+ <div class="media-sm-wrapper">
1157
+ <a href="user-profile.html">
1158
+ <img src="images/user/user-sm-03.jpg" alt="User Image">
1159
+ </a>
1160
+ </div>
1161
+ <div class="media-body">
1162
+ <a href="user-profile.html">
1163
+ <span class="title mb-0">Sagge Hudson</span>
1164
+ <span class="discribe">On disposal of as landlord Afraid at highly months do things on at.</span>
1165
+ <span class="time">
1166
+ <time>1 hrs ago</time>...
1167
+ </span>
1168
+ </a>
1169
+ </div>
1170
+ </div>
1171
+
1172
+ <div class="media media-sm bg-warning-10 p-4 mb-0">
1173
+ <div class="media-sm-wrapper">
1174
+ <a href="user-profile.html">
1175
+ <img src="images/user/user-sm-02.jpg" alt="User Image">
1176
+ </a>
1177
+ </div>
1178
+ <div class="media-body">
1179
+ <a href="user-profile.html">
1180
+ <span class="title mb-0">John Doe</span>
1181
+ <span class="discribe">Extremity sweetness difficult behaviour he of. On disposal of as landlord horrible. Afraid
1182
+ at highly months do things on at.</span>
1183
+ <span class="time">
1184
+ <time>Just now</time>...
1185
+ </span>
1186
+ </a>
1187
+ </div>
1188
+ </div>
1189
+
1190
+ <div class="media media-sm p-4 mb-0">
1191
+ <div class="media-sm-wrapper">
1192
+ <a href="user-profile.html">
1193
+ <img src="images/user/user-sm-04.jpg" alt="User Image">
1194
+ </a>
1195
+ </div>
1196
+ <div class="media-body">
1197
+ <a href="user-profile.html">
1198
+ <span class="title mb-0">Albrecht Straub</span>
1199
+ <span class="discribe"> Beatae quia natus assumenda laboriosam, nisi perferendis aliquid consectetur expedita non tenetur.</span>
1200
+ <span class="time">
1201
+ <time>Just now</time>...
1202
+ </span>
1203
+ </a>
1204
+ </div>
1205
+ </div>
1206
+
1207
+ </div>
1208
+ <div class="tab-pane fade" id="other" role="tabpanel" aria-labelledby="contact-tab">
1209
+
1210
+ <div class="media media-sm p-4 bg-light mb-0">
1211
+ <div class="media-sm-wrapper bg-primary">
1212
+ <a href="user-profile.html">
1213
+ <i class="mdi mdi-calendar-check-outline"></i>
1214
+ </a>
1215
+ </div>
1216
+ <div class="media-body">
1217
+ <a href="user-profile.html">
1218
+ <span class="title mb-0">New event added</span>
1219
+ <span class="discribe">1/3/2014 (1pm - 2pm)</span>
1220
+ <span class="time">
1221
+ <time>10 min ago...</time>...
1222
+ </span>
1223
+ </a>
1224
+ </div>
1225
+ </div>
1226
+
1227
+ <div class="media media-sm p-4 mb-0">
1228
+ <div class="media-sm-wrapper bg-info-dark">
1229
+ <a href="user-profile.html">
1230
+ <i class="mdi mdi-account-multiple-check"></i>
1231
+ </a>
1232
+ </div>
1233
+ <div class="media-body">
1234
+ <a href="user-profile.html">
1235
+ <span class="title mb-0">Add request</span>
1236
+ <span class="discribe">Add Dany Jones as your contact.</span>
1237
+ <div class="buttons">
1238
+ <a href="#" class="btn btn-sm btn-success shadow-none text-white">accept</a>
1239
+ <a href="#" class="btn btn-sm shadow-none">delete</a>
1240
+ </div>
1241
+ <span class="time">
1242
+ <time>6 hrs ago</time>...
1243
+ </span>
1244
+ </a>
1245
+ </div>
1246
+ </div>
1247
+
1248
+ <div class="media media-sm p-4 mb-0">
1249
+ <div class="media-sm-wrapper bg-info">
1250
+ <a href="user-profile.html">
1251
+ <i class="mdi mdi-playlist-check"></i>
1252
+ </a>
1253
+ </div>
1254
+ <div class="media-body">
1255
+ <a href="user-profile.html">
1256
+ <span class="title mb-0">Task complete</span>
1257
+ <span class="discribe">Afraid at highly months do things on at.</span>
1258
+ <span class="time">
1259
+ <time>1 hrs ago</time>...
1260
+ </span>
1261
+ </a>
1262
+ </div>
1263
+ </div>
1264
+
1265
+ </div>
1266
+ </div>
1267
+ </div>
1268
+
1269
+ <footer class="border-top dropdown-notify-footer">
1270
+ <div class="d-flex justify-content-between align-items-center py-2 px-4">
1271
+ <span>Last updated 3 min ago</span>
1272
+ <a id="refress-button" href="javascript:" class="btn mdi mdi-cached btn-refress"></a>
1273
+ </div>
1274
+ </footer>
1275
+ </div>
1276
+ </li>
1277
+ <!-- User Account -->
1278
+ <li class="dropdown user-menu">
1279
+ <button class="dropdown-toggle nav-link" data-toggle="dropdown">
1280
+ <img src="images/user/user-xs-01.jpg" class="user-image rounded-circle" alt="User Image" />
1281
+ <span class="d-none d-lg-inline-block">John Doe</span>
1282
+ </button>
1283
+ <ul class="dropdown-menu dropdown-menu-right">
1284
+ <li>
1285
+ <a class="dropdown-link-item" href="user-profile.html">
1286
+ <i class="mdi mdi-account-outline"></i>
1287
+ <span class="nav-text">My Profile</span>
1288
+ </a>
1289
+ </li>
1290
+ <li>
1291
+ <a class="dropdown-link-item" href="email-inbox.html">
1292
+ <i class="mdi mdi-email-outline"></i>
1293
+ <span class="nav-text">Message</span>
1294
+ <span class="badge badge-pill badge-primary">24</span>
1295
+ </a>
1296
+ </li>
1297
+ <li>
1298
+ <a class="dropdown-link-item" href="user-activities.html">
1299
+ <i class="mdi mdi-diamond-stone"></i>
1300
+ <span class="nav-text">Activitise</span></a>
1301
+ </li>
1302
+ <li>
1303
+ <a class="dropdown-link-item" href="user-account-settings.html">
1304
+ <i class="mdi mdi-settings"></i>
1305
+ <span class="nav-text">Account Setting</span>
1306
+ </a>
1307
+ </li>
1308
+
1309
+ <li class="dropdown-footer">
1310
+ <a class="dropdown-link-item" href="sign-in.html"> <i class="mdi mdi-logout"></i> Log Out </a>
1311
+ </li>
1312
+ </ul>
1313
+ </li>
1314
+ </ul>
1315
+ </div>
1316
+ </nav>
1317
+
1318
+
1319
+ </header>
1320
+
1321
+ <!-- ====================================
1322
+ ——— CONTENT WRAPPER
1323
+ ===================================== -->
1324
+ <div class="content-wrapper">
1325
+ <div class="content"><div class="row no-gutters">
1326
+ <div class="col-lg-5 col-xxl-4">
1327
+ <div class="card card-default chat-left-sidebar">
1328
+ <form class="card-header px-0">
1329
+ <div class="input-group px-5">
1330
+ <input type="text" class="form-control" aria-label="Text input with dropdown button" placeholder="Search...">
1331
+ </div>
1332
+ </form>
1333
+
1334
+ <ul class="card-body px-0" data-simplebar style="height: 630px;">
1335
+ <li class="mb-4 px-5 py-2">
1336
+ <a href="javascript:void(0)" class="media media-message">
1337
+ <div class="position-relative mr-3">
1338
+ <img class="rounded-circle" src="images/user/user-sm-01.jpg" alt="User Image">
1339
+ <span class="status away"></span>
1340
+ </div>
1341
+
1342
+ <div class="media-body">
1343
+ <div class="message-contents">
1344
+ <span class="d-flex justify-content-between align-items-center mb-1">
1345
+ <span class="username text-dark">Anna Patuary</span>
1346
+ <span class="">
1347
+ <span class="state text-smoke"><em>5min</em></span>
1348
+ </span>
1349
+ </span>
1350
+
1351
+ <p class="last-msg text-smoke">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Nam itaque doloremque
1352
+ odio, eligendi delectus vitae.</p>
1353
+ </div>
1354
+ </div>
1355
+ </a>
1356
+ </li>
1357
+
1358
+ <li class="mb-4 px-5 py-2">
1359
+ <a href="javascript:void(0)" class="media media-message">
1360
+ <div class="position-relative mr-3">
1361
+ <img class="rounded-circle" src="images/user/user-sm-02.jpg" alt="User Image">
1362
+ <span class="status away"></span>
1363
+ </div>
1364
+
1365
+ <div class="media-body">
1366
+ <div class="message-contents">
1367
+ <span class="d-flex justify-content-between align-items-center mb-1">
1368
+ <span class="username text-dark">Riman Ghose</span>
1369
+ <span class="">
1370
+ <span class="badge badge-secondary">3</span>
1371
+ <span class="state text-smoke"><em>1hrs</em></span>
1372
+ </span>
1373
+ </span>
1374
+
1375
+ <p class="last-msg text-smoke">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Nam itaque doloremque
1376
+ odio, eligendi delectus vitae.</p>
1377
+ </div>
1378
+ </div>
1379
+ </a>
1380
+ </li>
1381
+
1382
+ <li class="bg-primary mb-4 px-5 py-2">
1383
+ <a href="javascript:void(0)" class="media media-message">
1384
+ <div class="position-relative mr-3">
1385
+ <img class="rounded-circle" src="images/user/user-sm-03.jpg" alt="User Image">
1386
+ <span class="status active"></span>
1387
+ </div>
1388
+
1389
+ <div class="media-body">
1390
+ <div class="message-contents">
1391
+ <span class="d-flex justify-content-between align-items-center mb-1">
1392
+ <span class="username text-white">Anna Patuary</span>
1393
+ <span class="">
1394
+ <span class="state text-white"><em>11:59am</em></span>
1395
+ </span>
1396
+ </span>
1397
+
1398
+ <p class="last-msg text-white">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Nam itaque doloremque
1399
+ odio, eligendi delectus vitae.</p>
1400
+ </div>
1401
+ </div>
1402
+ </a>
1403
+ </li>
1404
+
1405
+ <li class="mb-4 px-5 py-2">
1406
+ <a href="javascript:void(0)" class="media media-message">
1407
+ <div class="position-relative mr-3">
1408
+ <img class="rounded-circle" src="images/user/user-sm-04.jpg" alt="User Image">
1409
+ <span class="status away"></span>
1410
+ </div>
1411
+
1412
+ <div class="media-body">
1413
+ <div class="message-contents">
1414
+ <span class="d-flex justify-content-between align-items-center mb-1">
1415
+ <span class="username text-dark">Riman Ghose</span>
1416
+ <span class="">
1417
+ <span class="state text-smoke"><em>10min</em></span>
1418
+ </span>
1419
+ </span>
1420
+
1421
+ <p class="last-msg text-smoke">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Nam itaque doloremque
1422
+ odio, eligendi delectus vitae.</p>
1423
+ </div>
1424
+ </div>
1425
+ </a>
1426
+ </li>
1427
+
1428
+ <li class="mb-4 px-5 py-2">
1429
+ <a href="javascript:void(0)" class="media media-message">
1430
+ <div class="position-relative mr-3">
1431
+ <img class="rounded-circle" src="images/user/user-sm-05.jpg" alt="User Image">
1432
+ <span class="status away"></span>
1433
+ </div>
1434
+
1435
+ <div class="media-body">
1436
+ <div class="message-contents">
1437
+ <span class="d-flex justify-content-between align-items-center mb-1">
1438
+ <span class="username text-dark">Anna Patuary</span>
1439
+ <span class="">
1440
+ <span class="state text-smoke"><em>26-Jan-20</em></span>
1441
+ </span>
1442
+ </span>
1443
+
1444
+ <p class="last-msg text-smoke">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Nam itaque doloremque
1445
+ odio, eligendi delectus vitae.</p>
1446
+ </div>
1447
+ </div>
1448
+ </a>
1449
+ </li>
1450
+
1451
+ <li class="mb-4 px-5 py-2">
1452
+ <a href="javascript:void(0)" class="media media-message">
1453
+ <div class="position-relative mr-3">
1454
+ <img class="rounded-circle" src="images/user/user-sm-01.jpg" alt="User Image">
1455
+ <span class="status active"></span>
1456
+ </div>
1457
+
1458
+ <div class="media-body">
1459
+ <div class="message-contents">
1460
+ <span class="d-flex justify-content-between align-items-center mb-1">
1461
+ <span class="username text-dark">Anna Patuary</span>
1462
+ <span class="">
1463
+ <span class="badge badge-secondary">4</span>
1464
+ <span class="state text-smoke"><em>2hrs</em></span>
1465
+ </span>
1466
+ </span>
1467
+
1468
+ <p class="last-msg text-smoke">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Nam itaque doloremque
1469
+ odio, eligendi delectus vitae.</p>
1470
+ </div>
1471
+ </div>
1472
+ </a>
1473
+ </li>
1474
+
1475
+ <li class="mb-4 px-5 py-2">
1476
+ <a href="javascript:void(0)" class="media media-message">
1477
+ <div class="position-relative mr-3">
1478
+ <img class="rounded-circle" src="images/user/user-sm-02.jpg" alt="User Image">
1479
+ <span class="status away"></span>
1480
+ </div>
1481
+
1482
+ <div class="media-body">
1483
+ <div class="message-contents">
1484
+ <span class="d-flex justify-content-between align-items-center mb-1">
1485
+ <span class="username text-dark">Riman Ghose</span>
1486
+ <span class="">
1487
+ <span class="state text-smoke"><em>15-Jan-20</em></span>
1488
+ </span>
1489
+ </span>
1490
+
1491
+ <p class="last-msg text-smoke">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Nam itaque doloremque
1492
+ odio, eligendi delectus vitae.</p>
1493
+ </div>
1494
+ </div>
1495
+ </a>
1496
+ </li>
1497
+
1498
+ <li class="mb-4 px-5 py-2">
1499
+ <a href="javascript:void(0)" class="media media-message">
1500
+ <div class="position-relative mr-3">
1501
+ <img class="rounded-circle" src="images/user/user-sm-03.jpg" alt="User Image">
1502
+ <span class="status away"></span>
1503
+ </div>
1504
+
1505
+ <div class="media-body">
1506
+ <div class="message-contents">
1507
+ <span class="d-flex justify-content-between align-items-center mb-1">
1508
+ <span class="username text-dark">Anna Patuary</span>
1509
+ <span class="">
1510
+ <span class="state text-smoke"><em>30min</em></span>
1511
+ </span>
1512
+ </span>
1513
+
1514
+ <p class="last-msg text-smoke">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Nam itaque doloremque
1515
+ odio, eligendi delectus vitae.</p>
1516
+ </div>
1517
+ </div>
1518
+ </a>
1519
+ </li>
1520
+
1521
+ <li class="mb-4 px-5 py-2">
1522
+ <a href="javascript:void(0)" class="media media-message">
1523
+ <div class="position-relative mr-3">
1524
+ <img class="rounded-circle" src="images/user/user-sm-04.jpg" alt="User Image">
1525
+ <span class="status away"></span>
1526
+ </div>
1527
+
1528
+ <div class="media-body">
1529
+ <div class="message-contents">
1530
+ <span class="d-flex justify-content-between align-items-center mb-1">
1531
+ <span class="username text-dark">Riman Ghose</span>
1532
+ <span class="">
1533
+ <span class="state text-smoke"><em>01-Jan-20</em></span>
1534
+ </span>
1535
+ </span>
1536
+
1537
+ <p class="last-msg text-smoke">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Nam itaque doloremque
1538
+ odio, eligendi delectus vitae.</p>
1539
+ </div>
1540
+ </div>
1541
+ </a>
1542
+ </li>
1543
+
1544
+ <li class="mb-4 px-5 py-2">
1545
+ <a href="javascript:void(0)" class="media media-message">
1546
+ <div class="position-relative mr-3">
1547
+ <img class="rounded-circle" src="images/user/user-sm-05.jpg" alt="User Image">
1548
+ <span class="status away"></span>
1549
+ </div>
1550
+
1551
+ <div class="media-body">
1552
+ <div class="message-contents">
1553
+ <span class="d-flex justify-content-between align-items-center mb-1">
1554
+ <span class="username text-dark">Anna Patuary</span>
1555
+ <span class="">
1556
+ <span class="badge badge-secondary">5</span>
1557
+ <span class="state text-smoke"><em>3hrs</em></span>
1558
+ </span>
1559
+ </span>
1560
+
1561
+ <p class="last-msg text-smoke">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Nam itaque doloremque
1562
+ odio, eligendi delectus vitae.</p>
1563
+ </div>
1564
+ </div>
1565
+ </a>
1566
+ </li>
1567
+
1568
+ <li class="mb-4 px-5 py-2">
1569
+ <a href="javascript:void(0)" class="media media-message">
1570
+ <div class="position-relative mr-3">
1571
+ <img class="rounded-circle" src="images/user/user-sm-04.jpg" alt="User Image">
1572
+ <span class="status away"></span>
1573
+ </div>
1574
+
1575
+ <div class="media-body">
1576
+ <div class="message-contents">
1577
+ <span class="d-flex justify-content-between align-items-center mb-1">
1578
+ <span class="username text-dark">Riman Ghose</span>
1579
+ <span class="">
1580
+ <span class="state text-smoke"><em>31-Dec-19</em></span>
1581
+ </span>
1582
+ </span>
1583
+
1584
+ <p class="last-msg text-smoke">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Nam itaque doloremque
1585
+ odio, eligendi delectus vitae.</p>
1586
+ </div>
1587
+ </div>
1588
+ </a>
1589
+ </li>
1590
+
1591
+ <li class="mb-4 px-5 py-2">
1592
+ <a href="javascript:void(0)" class="media media-message">
1593
+ <div class="position-relative mr-3">
1594
+ <img class="rounded-circle" src="images/user/user-sm-05.jpg" alt="User Image">
1595
+ <span class="status away"></span>
1596
+ </div>
1597
+
1598
+ <div class="media-body">
1599
+ <div class="message-contents">
1600
+ <span class="d-flex justify-content-between align-items-center mb-1">
1601
+ <span class="username text-dark">Anna Patuary</span>
1602
+ <span class="">
1603
+ <span class="state text-smoke"><em>26-Dec-19</em></span>
1604
+ </span>
1605
+ </span>
1606
+
1607
+ <p class="last-msg text-smoke">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Nam itaque doloremque
1608
+ odio, eligendi delectus vitae.</p>
1609
+ </div>
1610
+ </div>
1611
+ </a>
1612
+ </li>
1613
+
1614
+ <li class="mb-4 px-5 py-2">
1615
+ <a href="javascript:void(0)" class="media media-message">
1616
+ <div class="position-relative mr-3">
1617
+ <img class="rounded-circle" src="images/user/user-sm-01.jpg" alt="User Image">
1618
+ <span class="status active"></span>
1619
+ </div>
1620
+
1621
+ <div class="media-body">
1622
+ <div class="message-contents">
1623
+ <span class="d-flex justify-content-between align-items-center mb-1">
1624
+ <span class="username text-dark">Anna Patuary</span>
1625
+ <span class="">
1626
+ <span class="state text-smoke"><em>10-Dec-19</em></span>
1627
+ </span>
1628
+ </span>
1629
+
1630
+ <p class="last-msg text-smoke">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Nam itaque doloremque
1631
+ odio, eligendi delectus vitae.</p>
1632
+ </div>
1633
+ </div>
1634
+ </a>
1635
+ </li>
1636
+
1637
+ <li class="mb-4 px-5 py-2">
1638
+ <a href="javascript:void(0)" class="media media-message">
1639
+ <div class="position-relative mr-3">
1640
+ <img class="rounded-circle" src="images/user/user-sm-02.jpg" alt="User Image">
1641
+ <span class="status away"></span>
1642
+ </div>
1643
+
1644
+ <div class="media-body">
1645
+ <div class="message-contents">
1646
+ <span class="d-flex justify-content-between align-items-center mb-1">
1647
+ <span class="username text-dark">Riman Ghose</span>
1648
+ <span class="">
1649
+ <span class="badge badge-secondary">7</span>
1650
+ <span class="state text-smoke"><em>5hrs</em></span>
1651
+ </span>
1652
+ </span>
1653
+
1654
+ <p class="last-msg text-smoke">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Nam itaque doloremque
1655
+ odio, eligendi delectus vitae.</p>
1656
+ </div>
1657
+ </div>
1658
+ </a>
1659
+ </li>
1660
+
1661
+ <li class="mb-4 px-5 py-2">
1662
+ <a href="javascript:void(0)" class="media media-message">
1663
+ <div class="position-relative mr-3">
1664
+ <img class="rounded-circle" src="images/user/user-sm-03.jpg" alt="User Image">
1665
+ <span class="status away"></span>
1666
+ </div>
1667
+
1668
+ <div class="media-body">
1669
+ <div class="message-contents">
1670
+ <span class="d-flex justify-content-between align-items-center mb-1">
1671
+ <span class="username text-dark">Anna Patuary</span>
1672
+ <span class="">
1673
+ <span class="state text-smoke"><em>01-Dec-19</em></span>
1674
+ </span>
1675
+ </span>
1676
+
1677
+ <p class="last-msg text-smoke">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Nam itaque doloremque
1678
+ odio, eligendi delectus vitae.</p>
1679
+ </div>
1680
+ </div>
1681
+ </a>
1682
+ </li>
1683
+
1684
+ </ul>
1685
+ </div>
1686
+ </div>
1687
+
1688
+ <div class="col-lg-7 col-xxl-8">
1689
+ <!-- Chat -->
1690
+ <div class="card card-default chat-right-sidebar">
1691
+ <div class="card-header">
1692
+ <h2>Selena Wagner</h2>
1693
+
1694
+ <div class="dropdown">
1695
+ <div class="dropdown">
1696
+ <a class="dropdown-toggle icon-burger-mini" href="#" role="button" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
1697
+ </a>
1698
+
1699
+ <div class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownMenuLink">
1700
+ <a class="dropdown-item" href="user-profile-settings.html">Profile</a>
1701
+ <a class="dropdown-item" href="javascript:void(0)">Logout</a>
1702
+ </div>
1703
+ </div>
1704
+ </div>
1705
+ </div>
1706
+
1707
+ <div class="card-body pb-0" data-simplebar style="height: 545px;">
1708
+ <!-- Media Chat Left -->
1709
+ <div class="media media-chat">
1710
+ <img src="images/user/user-sm-01.jpg" class="rounded-circle" alt="Avata Image">
1711
+ <div class="media-body">
1712
+ <div class="text-content">
1713
+ <span class="message">Hello my name is anna.</span>
1714
+ <time class="time">5 mins ago</time>
1715
+ </div>
1716
+ </div>
1717
+ </div>
1718
+
1719
+ <!-- Media Chat Right -->
1720
+ <div class="media media-chat media-chat-right">
1721
+ <div class="media-body">
1722
+ <div class="text-content">
1723
+ <span class="message">Hello i am Riman.</span>
1724
+ <time class="time">4 mins ago</time>
1725
+ </div>
1726
+
1727
+ <div class="text-content">
1728
+ <span class="message">I want to know about yourself</span>
1729
+ <time class="time">3 mins ago</time>
1730
+ </div>
1731
+ </div>
1732
+ <img src="images/user/user-sm-02.jpg" class="rounded-circle" alt="Avata Image">
1733
+ </div>
1734
+
1735
+ <!-- Media Chat Left -->
1736
+ <div class="media media-chat">
1737
+ <img src="images/user/user-sm-01.jpg" class="rounded-circle" alt="Avata Image">
1738
+ <div class="media-body">
1739
+ <div class="text-content">
1740
+ <span class="message">Its had resolving otherwise she contented therefore.</span>
1741
+ <time class="time">1 mins ago</time>
1742
+ </div>
1743
+ </div>
1744
+ </div>
1745
+
1746
+ <!-- Media Chat Right -->
1747
+ <div class="media media-chat media-chat-right">
1748
+ <div class="media-body">
1749
+ <div class="text-content">
1750
+ <span class="message">Hello i am Riman.</span>
1751
+ <time class="time">4 mins ago</time>
1752
+ </div>
1753
+
1754
+ <div class="text-content">
1755
+ <span class="message">I want to know about yourself</span>
1756
+ <time class="time">3 mins ago</time>
1757
+ </div>
1758
+ </div>
1759
+ <img src="images/user/user-sm-02.jpg" class="rounded-circle" alt="Avata Image">
1760
+ </div>
1761
+
1762
+ <!-- Media Chat Left -->
1763
+ <div class="media media-chat">
1764
+ <img src="images/user/user-sm-01.jpg" class="rounded-circle" alt="Avata Image">
1765
+ <div class="media-body">
1766
+ <div class="text-content">
1767
+ <span class="message">Its had resolving otherwise she contented therefore.</span>
1768
+ <time class="time">1 mins ago</time>
1769
+ </div>
1770
+ </div>
1771
+ </div>
1772
+
1773
+ <!-- Media Chat Right -->
1774
+ <div class="media media-chat media-chat-right">
1775
+ <div class="media-body">
1776
+ <div class="text-content">
1777
+ <span class="message">Hello i am Riman.</span>
1778
+ <time class="time">4 mins ago</time>
1779
+ </div>
1780
+
1781
+ <div class="text-content">
1782
+ <span class="message">I want to know about yourself</span>
1783
+ <time class="time">3 mins ago</time>
1784
+ </div>
1785
+ </div>
1786
+ <img src="images/user/user-sm-02.jpg" class="rounded-circle" alt="Avata Image">
1787
+ </div>
1788
+
1789
+ </div>
1790
+
1791
+ <div class="chat-footer">
1792
+ <form>
1793
+ <div class="input-group input-group-chat">
1794
+ <div class="input-group-prepend">
1795
+ <span class="emoticon-icon mdi mdi-emoticon-happy-outline"></span>
1796
+ </div>
1797
+ <input type="text" class="form-control" aria-label="Text input with dropdown button">
1798
+ </div>
1799
+ </form>
1800
+ </div>
1801
+ </div>
1802
+ </div>
1803
+ </div>
1804
+ </div>
1805
+
1806
+ </div>
1807
+
1808
+ <!-- Footer -->
1809
+ <footer class="footer mt-auto">
1810
+ <div class="copyright bg-white">
1811
+ <p>
1812
+ &copy; <span id="copy-year"></span> Copyright Mono Dashboard Bootstrap Template by <a class="text-primary" href="http://www.iamabdus.com/" target="_blank" >Abdus</a>.
1813
+ </p>
1814
+ </div>
1815
+ <script>
1816
+ var d = new Date();
1817
+ var year = d.getFullYear();
1818
+ document.getElementById("copy-year").innerHTML = year;
1819
+ </script>
1820
+ </footer>
1821
+
1822
+ </div>
1823
+ </div>
1824
+
1825
+ <!-- Card Offcanvas -->
1826
+ <div class="card card-offcanvas" id="contact-off" >
1827
+ <div class="card-header">
1828
+ <h2>Contacts</h2>
1829
+ <a href="#" class="btn btn-primary btn-pill px-4">Add New</a>
1830
+ </div>
1831
+ <div class="card-body">
1832
+
1833
+ <div class="mb-4">
1834
+ <input type="text" class="form-control form-control-lg form-control-secondary rounded-0" placeholder="Search contacts...">
1835
+ </div>
1836
+
1837
+ <div class="media media-sm">
1838
+ <div class="media-sm-wrapper">
1839
+ <a href="user-profile.html">
1840
+ <img src="images/user/user-sm-01.jpg" alt="User Image">
1841
+ <span class="active bg-primary"></span>
1842
+ </a>
1843
+ </div>
1844
+ <div class="media-body">
1845
+ <a href="user-profile.html">
1846
+ <span class="title">Selena Wagner</span>
1847
+ <span class="discribe">Designer</span>
1848
+ </a>
1849
+ </div>
1850
+ </div>
1851
+
1852
+ <div class="media media-sm">
1853
+ <div class="media-sm-wrapper">
1854
+ <a href="user-profile.html">
1855
+ <img src="images/user/user-sm-02.jpg" alt="User Image">
1856
+ <span class="active bg-primary"></span>
1857
+ </a>
1858
+ </div>
1859
+ <div class="media-body">
1860
+ <a href="user-profile.html">
1861
+ <span class="title">Walter Reuter</span>
1862
+ <span>Developer</span>
1863
+ </a>
1864
+ </div>
1865
+ </div>
1866
+
1867
+ <div class="media media-sm">
1868
+ <div class="media-sm-wrapper">
1869
+ <a href="user-profile.html">
1870
+ <img src="images/user/user-sm-03.jpg" alt="User Image">
1871
+ </a>
1872
+ </div>
1873
+ <div class="media-body">
1874
+ <a href="user-profile.html">
1875
+ <span class="title">Larissa Gebhardt</span>
1876
+ <span>Cyber Punk</span>
1877
+ </a>
1878
+ </div>
1879
+ </div>
1880
+
1881
+ <div class="media media-sm">
1882
+ <div class="media-sm-wrapper">
1883
+ <a href="user-profile.html">
1884
+ <img src="images/user/user-sm-04.jpg" alt="User Image">
1885
+ </a>
1886
+
1887
+ </div>
1888
+ <div class="media-body">
1889
+ <a href="user-profile.html">
1890
+ <span class="title">Albrecht Straub</span>
1891
+ <span>Photographer</span>
1892
+ </a>
1893
+ </div>
1894
+ </div>
1895
+
1896
+ <div class="media media-sm">
1897
+ <div class="media-sm-wrapper">
1898
+ <a href="user-profile.html">
1899
+ <img src="images/user/user-sm-05.jpg" alt="User Image">
1900
+ <span class="active bg-danger"></span>
1901
+ </a>
1902
+ </div>
1903
+ <div class="media-body">
1904
+ <a href="user-profile.html">
1905
+ <span class="title">Leopold Ebert</span>
1906
+ <span>Fashion Designer</span>
1907
+ </a>
1908
+ </div>
1909
+ </div>
1910
+
1911
+ <div class="media media-sm">
1912
+ <div class="media-sm-wrapper">
1913
+ <a href="user-profile.html">
1914
+ <img src="images/user/user-sm-06.jpg" alt="User Image">
1915
+ <span class="active bg-primary"></span>
1916
+ </a>
1917
+ </div>
1918
+ <div class="media-body">
1919
+ <a href="user-profile.html">
1920
+ <span class="title">Selena Wagner</span>
1921
+ <span>Photographer</span>
1922
+ </a>
1923
+ </div>
1924
+ </div>
1925
+
1926
+ </div>
1927
+ </div>
1928
+
1929
+
1930
+
1931
+
1932
+ <script src="plugins/jquery/jquery.min.js"></script>
1933
+ <script src="plugins/bootstrap/js/bootstrap.bundle.min.js"></script>
1934
+ <script src="plugins/simplebar/simplebar.min.js"></script>
1935
+ <script src="https://unpkg.com/hotkeys-js/dist/hotkeys.min.js"></script>
1936
+
1937
+
1938
+
1939
+ <script src="plugins/apexcharts/apexcharts.js"></script>
1940
+
1941
+
1942
+
1943
+ <script src="plugins/DataTables/DataTables-1.10.18/js/jquery.dataTables.min.js"></script>
1944
+
1945
+
1946
+
1947
+ <script src="plugins/jvectormap/jquery-jvectormap-2.0.3.min.js"></script>
1948
+ <script src="plugins/jvectormap/jquery-jvectormap-world-mill.js"></script>
1949
+ <script src="plugins/jvectormap/jquery-jvectormap-us-aea.js"></script>
1950
+
1951
+
1952
+
1953
+ <script src="plugins/daterangepicker/moment.min.js"></script>
1954
+ <script src="plugins/daterangepicker/daterangepicker.js"></script>
1955
+ <script>
1956
+ jQuery(document).ready(function() {
1957
+ jQuery('input[name="dateRange"]').daterangepicker({
1958
+ autoUpdateInput: false,
1959
+ singleDatePicker: true,
1960
+ locale: {
1961
+ cancelLabel: 'Clear'
1962
+ }
1963
+ });
1964
+ jQuery('input[name="dateRange"]').on('apply.daterangepicker', function (ev, picker) {
1965
+ jQuery(this).val(picker.startDate.format('MM/DD/YYYY'));
1966
+ });
1967
+ jQuery('input[name="dateRange"]').on('cancel.daterangepicker', function (ev, picker) {
1968
+ jQuery(this).val('');
1969
+ });
1970
+ });
1971
+ </script>
1972
+
1973
+
1974
+
1975
+ <script src="https://cdn.quilljs.com/1.3.6/quill.js"></script>
1976
+
1977
+
1978
+
1979
+ <script src="plugins/toaster/toastr.min.js"></script>
1980
+
1981
+
1982
+
1983
+ <script src="js/mono.js"></script>
1984
+ <script src="js/chart.js"></script>
1985
+ <script src="js/map.js"></script>
1986
+ <script src="js/custom.js"></script>
1987
+
1988
+
1989
+
1990
+
1991
+ <!-- -->
1992
+
1993
+
1994
+ </body>
1995
+ </html>
checkbox-radio.html ADDED
@@ -0,0 +1,2127 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+
3
+ <!--
4
+ // WEBSITE: https://themefisher.com
5
+ // TWITTER: https://twitter.com/themefisher
6
+ // FACEBOOK: https://www.facebook.com/themefisher
7
+ // GITHUB: https://github.com/themefisher/
8
+ -->
9
+
10
+ <html lang="en" dir="ltr">
11
+ <head>
12
+ <meta charset="utf-8" />
13
+ <meta http-equiv="X-UA-Compatible" content="IE=edge" />
14
+ <meta name="viewport" content="width=device-width, initial-scale=1" />
15
+
16
+ <title>Mono - Responsive Admin & Dashboard Template</title>
17
+
18
+ <!-- GOOGLE FONTS -->
19
+ <link href="https://fonts.googleapis.com/css?family=Karla:400,700|Roboto" rel="stylesheet">
20
+ <link href="plugins/material/css/materialdesignicons.min.css" rel="stylesheet" />
21
+ <link href="plugins/simplebar/simplebar.css" rel="stylesheet" />
22
+
23
+ <!-- PLUGINS CSS STYLE -->
24
+ <link href="plugins/nprogress/nprogress.css" rel="stylesheet" />
25
+
26
+
27
+ <link href="plugins/prism/prism.css" rel="stylesheet" />
28
+
29
+
30
+ <!-- MONO CSS -->
31
+ <link id="main-css-href" rel="stylesheet" href="css/style.css" />
32
+
33
+
34
+
35
+
36
+ <!-- FAVICON -->
37
+ <link href="images/favicon.png" rel="shortcut icon" />
38
+
39
+ <!--
40
+ HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries
41
+ -->
42
+ <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
43
+ <!--[if lt IE 9]>
44
+ <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
45
+ <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
46
+ <![endif]-->
47
+ <script src="plugins/nprogress/nprogress.js"></script>
48
+ </head>
49
+
50
+
51
+ <body class="navbar-fixed sidebar-fixed" id="body">
52
+ <script>
53
+ NProgress.configure({ showSpinner: false });
54
+ NProgress.start();
55
+ </script>
56
+
57
+
58
+
59
+ <!-- ====================================
60
+ ——— WRAPPER
61
+ ===================================== -->
62
+ <div class="wrapper">
63
+
64
+
65
+ <!-- ====================================
66
+ ——— LEFT SIDEBAR WITH OUT FOOTER
67
+ ===================================== -->
68
+ <aside class="left-sidebar sidebar-dark" id="left-sidebar">
69
+ <div id="sidebar" class="sidebar sidebar-with-footer">
70
+ <!-- Aplication Brand -->
71
+ <div class="app-brand">
72
+ <a href="/index.html">
73
+ <img src="images/logo.png" alt="Mono">
74
+ <span class="brand-name">MONO</span>
75
+ </a>
76
+ </div>
77
+ <!-- begin sidebar scrollbar -->
78
+ <div class="sidebar-left" data-simplebar style="height: 100%;">
79
+ <!-- sidebar menu -->
80
+ <ul class="nav sidebar-inner" id="sidebar-menu">
81
+
82
+
83
+
84
+ <li
85
+ >
86
+ <a class="sidenav-item-link" href="index.html">
87
+ <i class="mdi mdi-briefcase-account-outline"></i>
88
+ <span class="nav-text">Business Dashboard</span>
89
+ </a>
90
+ </li>
91
+
92
+
93
+
94
+
95
+
96
+ <li
97
+ >
98
+ <a class="sidenav-item-link" href="analytics.html">
99
+ <i class="mdi mdi-chart-line"></i>
100
+ <span class="nav-text">Analytics Dashboard</span>
101
+ </a>
102
+ </li>
103
+
104
+
105
+
106
+
107
+
108
+ <li class="section-title">
109
+ Apps
110
+ </li>
111
+
112
+
113
+
114
+
115
+
116
+ <li
117
+ >
118
+ <a class="sidenav-item-link" href="chat.html">
119
+ <i class="mdi mdi-wechat"></i>
120
+ <span class="nav-text">Chat</span>
121
+ </a>
122
+ </li>
123
+
124
+
125
+
126
+
127
+
128
+ <li
129
+ >
130
+ <a class="sidenav-item-link" href="contacts.html">
131
+ <i class="mdi mdi-phone"></i>
132
+ <span class="nav-text">Contacts</span>
133
+ </a>
134
+ </li>
135
+
136
+
137
+
138
+
139
+
140
+ <li
141
+ >
142
+ <a class="sidenav-item-link" href="team.html">
143
+ <i class="mdi mdi-account-group"></i>
144
+ <span class="nav-text">Team</span>
145
+ </a>
146
+ </li>
147
+
148
+
149
+
150
+
151
+
152
+ <li
153
+ >
154
+ <a class="sidenav-item-link" href="calendar.html">
155
+ <i class="mdi mdi-calendar-check"></i>
156
+ <span class="nav-text">Calendar</span>
157
+ </a>
158
+ </li>
159
+
160
+
161
+
162
+
163
+
164
+ <li class="has-sub" >
165
+ <a class="sidenav-item-link" href="javascript:void(0)" data-toggle="collapse" data-target="#email"
166
+ aria-expanded="false" aria-controls="email">
167
+ <i class="mdi mdi-email"></i>
168
+ <span class="nav-text">email</span> <b class="caret"></b>
169
+ </a>
170
+ <ul class="collapse" id="email"
171
+ data-parent="#sidebar-menu">
172
+ <div class="sub-menu">
173
+
174
+
175
+
176
+ <li >
177
+ <a class="sidenav-item-link" href="email-inbox.html">
178
+ <span class="nav-text">Email Inbox</span>
179
+
180
+ </a>
181
+ </li>
182
+
183
+
184
+
185
+
186
+
187
+
188
+ <li >
189
+ <a class="sidenav-item-link" href="email-details.html">
190
+ <span class="nav-text">Email Details</span>
191
+
192
+ </a>
193
+ </li>
194
+
195
+
196
+
197
+
198
+
199
+
200
+ <li >
201
+ <a class="sidenav-item-link" href="email-compose.html">
202
+ <span class="nav-text">Email Compose</span>
203
+
204
+ </a>
205
+ </li>
206
+
207
+
208
+
209
+
210
+ </div>
211
+ </ul>
212
+ </li>
213
+
214
+
215
+
216
+
217
+
218
+ <li class="section-title">
219
+ UI Elements
220
+ </li>
221
+
222
+
223
+
224
+
225
+
226
+ <li class="has-sub active expand" >
227
+ <a class="sidenav-item-link" href="javascript:void(0)" data-toggle="collapse" data-target="#ui-elements"
228
+ aria-expanded="false" aria-controls="ui-elements">
229
+ <i class="mdi mdi-folder-outline"></i>
230
+ <span class="nav-text">UI Components</span> <b class="caret"></b>
231
+ </a>
232
+ <ul class="collapse show" id="ui-elements"
233
+ data-parent="#sidebar-menu">
234
+ <div class="sub-menu">
235
+
236
+
237
+
238
+ <li >
239
+ <a class="sidenav-item-link" href="alert.html">
240
+ <span class="nav-text">Alert</span>
241
+
242
+ </a>
243
+ </li>
244
+
245
+
246
+
247
+
248
+
249
+
250
+ <li >
251
+ <a class="sidenav-item-link" href="badge.html">
252
+ <span class="nav-text">Badge</span>
253
+
254
+ </a>
255
+ </li>
256
+
257
+
258
+
259
+
260
+
261
+
262
+ <li >
263
+ <a class="sidenav-item-link" href="breadcrumb.html">
264
+ <span class="nav-text">Breadcrumb</span>
265
+
266
+ </a>
267
+ </li>
268
+
269
+
270
+
271
+
272
+
273
+ <li class="has-sub" >
274
+ <a class="sidenav-item-link" href="javascript:void(0)" data-toggle="collapse" data-target="#buttons"
275
+ aria-expanded="false" aria-controls="buttons">
276
+ <span class="nav-text">Buttons</span> <b class="caret"></b>
277
+ </a>
278
+ <ul class="collapse" id="buttons">
279
+ <div class="sub-menu">
280
+
281
+ <li >
282
+ <a href="button-default.html">Button Default</a>
283
+ </li>
284
+
285
+ <li >
286
+ <a href="button-dropdown.html">Button Dropdown</a>
287
+ </li>
288
+
289
+ <li >
290
+ <a href="button-group.html">Button Group</a>
291
+ </li>
292
+
293
+ <li >
294
+ <a href="button-social.html">Button Social</a>
295
+ </li>
296
+
297
+ <li >
298
+ <a href="button-loading.html">Button Loading</a>
299
+ </li>
300
+
301
+ </div>
302
+ </ul>
303
+ </li>
304
+
305
+
306
+
307
+
308
+
309
+ <li >
310
+ <a class="sidenav-item-link" href="card.html">
311
+ <span class="nav-text">Card</span>
312
+
313
+ </a>
314
+ </li>
315
+
316
+
317
+
318
+
319
+
320
+
321
+ <li >
322
+ <a class="sidenav-item-link" href="carousel.html">
323
+ <span class="nav-text">Carousel</span>
324
+
325
+ </a>
326
+ </li>
327
+
328
+
329
+
330
+
331
+
332
+
333
+ <li >
334
+ <a class="sidenav-item-link" href="collapse.html">
335
+ <span class="nav-text">Collapse</span>
336
+
337
+ </a>
338
+ </li>
339
+
340
+
341
+
342
+
343
+
344
+
345
+ <li >
346
+ <a class="sidenav-item-link" href="editor.html">
347
+ <span class="nav-text">Editor</span>
348
+
349
+ </a>
350
+ </li>
351
+
352
+
353
+
354
+
355
+
356
+
357
+ <li >
358
+ <a class="sidenav-item-link" href="list-group.html">
359
+ <span class="nav-text">List Group</span>
360
+
361
+ </a>
362
+ </li>
363
+
364
+
365
+
366
+
367
+
368
+
369
+ <li >
370
+ <a class="sidenav-item-link" href="modal.html">
371
+ <span class="nav-text">Modal</span>
372
+
373
+ </a>
374
+ </li>
375
+
376
+
377
+
378
+
379
+
380
+
381
+ <li >
382
+ <a class="sidenav-item-link" href="pagination.html">
383
+ <span class="nav-text">Pagination</span>
384
+
385
+ </a>
386
+ </li>
387
+
388
+
389
+
390
+
391
+
392
+
393
+ <li >
394
+ <a class="sidenav-item-link" href="popover-tooltip.html">
395
+ <span class="nav-text">Popover & Tooltip</span>
396
+
397
+ </a>
398
+ </li>
399
+
400
+
401
+
402
+
403
+
404
+
405
+ <li >
406
+ <a class="sidenav-item-link" href="progress-bar.html">
407
+ <span class="nav-text">Progress Bar</span>
408
+
409
+ </a>
410
+ </li>
411
+
412
+
413
+
414
+
415
+
416
+
417
+ <li >
418
+ <a class="sidenav-item-link" href="spinner.html">
419
+ <span class="nav-text">Spinner</span>
420
+
421
+ </a>
422
+ </li>
423
+
424
+
425
+
426
+
427
+
428
+
429
+ <li >
430
+ <a class="sidenav-item-link" href="switches.html">
431
+ <span class="nav-text">Switches</span>
432
+
433
+ </a>
434
+ </li>
435
+
436
+
437
+
438
+
439
+
440
+ <li class="has-sub" >
441
+ <a class="sidenav-item-link" href="javascript:void(0)" data-toggle="collapse" data-target="#tables"
442
+ aria-expanded="false" aria-controls="tables">
443
+ <span class="nav-text">Tables</span> <b class="caret"></b>
444
+ </a>
445
+ <ul class="collapse" id="tables">
446
+ <div class="sub-menu">
447
+
448
+ <li >
449
+ <a href="bootstarp-tables.html">Bootstrap Tables</a>
450
+ </li>
451
+
452
+ <li >
453
+ <a href="data-tables.html">Data Tables</a>
454
+ </li>
455
+
456
+ </div>
457
+ </ul>
458
+ </li>
459
+
460
+
461
+
462
+
463
+
464
+ <li >
465
+ <a class="sidenav-item-link" href="tab.html">
466
+ <span class="nav-text">Tab</span>
467
+
468
+ </a>
469
+ </li>
470
+
471
+
472
+
473
+
474
+
475
+
476
+ <li >
477
+ <a class="sidenav-item-link" href="toaster.html">
478
+ <span class="nav-text">Toaster</span>
479
+
480
+ </a>
481
+ </li>
482
+
483
+
484
+
485
+
486
+
487
+ <li class="has-sub" >
488
+ <a class="sidenav-item-link" href="javascript:void(0)" data-toggle="collapse" data-target="#icons"
489
+ aria-expanded="false" aria-controls="icons">
490
+ <span class="nav-text">Icons</span> <b class="caret"></b>
491
+ </a>
492
+ <ul class="collapse" id="icons">
493
+ <div class="sub-menu">
494
+
495
+ <li >
496
+ <a href="material-icons.html">Material Icon</a>
497
+ </li>
498
+
499
+ <li >
500
+ <a href="flag-icons.html">Flag Icon</a>
501
+ </li>
502
+
503
+ </div>
504
+ </ul>
505
+ </li>
506
+
507
+
508
+
509
+
510
+ <li class="has-sub active expand" >
511
+ <a class="sidenav-item-link" href="javascript:void(0)" data-toggle="collapse" data-target="#forms"
512
+ aria-expanded="false" aria-controls="forms">
513
+ <span class="nav-text">Forms</span> <b class="caret"></b>
514
+ </a>
515
+ <ul class="collapse show" id="forms">
516
+ <div class="sub-menu">
517
+
518
+ <li >
519
+ <a href="basic-input.html">Basic Input</a>
520
+ </li>
521
+
522
+ <li >
523
+ <a href="input-group.html">Input Group</a>
524
+ </li>
525
+
526
+ <li class="active" >
527
+ <a href="checkbox-radio.html">Checkbox & Radio</a>
528
+ </li>
529
+
530
+ <li >
531
+ <a href="form-validation.html">Form Validation</a>
532
+ </li>
533
+
534
+ <li >
535
+ <a href="form-advance.html">Form Advance</a>
536
+ </li>
537
+
538
+ </div>
539
+ </ul>
540
+ </li>
541
+
542
+
543
+
544
+
545
+ <li class="has-sub" >
546
+ <a class="sidenav-item-link" href="javascript:void(0)" data-toggle="collapse" data-target="#maps"
547
+ aria-expanded="false" aria-controls="maps">
548
+ <span class="nav-text">Maps</span> <b class="caret"></b>
549
+ </a>
550
+ <ul class="collapse" id="maps">
551
+ <div class="sub-menu">
552
+
553
+ <li >
554
+ <a href="google-maps.html">Google Map</a>
555
+ </li>
556
+
557
+ <li >
558
+ <a href="vector-maps.html">Vector Map</a>
559
+ </li>
560
+
561
+ </div>
562
+ </ul>
563
+ </li>
564
+
565
+
566
+
567
+
568
+ <li class="has-sub" >
569
+ <a class="sidenav-item-link" href="javascript:void(0)" data-toggle="collapse" data-target="#widgets"
570
+ aria-expanded="false" aria-controls="widgets">
571
+ <span class="nav-text">Widgets</span> <b class="caret"></b>
572
+ </a>
573
+ <ul class="collapse" id="widgets">
574
+ <div class="sub-menu">
575
+
576
+ <li >
577
+ <a href="widgets-general.html">General Widget</a>
578
+ </li>
579
+
580
+ <li >
581
+ <a href="widgets-chart.html">Chart Widget</a>
582
+ </li>
583
+
584
+ </div>
585
+ </ul>
586
+ </li>
587
+
588
+
589
+
590
+ </div>
591
+ </ul>
592
+ </li>
593
+
594
+
595
+
596
+
597
+
598
+ <li class="has-sub" >
599
+ <a class="sidenav-item-link" href="javascript:void(0)" data-toggle="collapse" data-target="#charts"
600
+ aria-expanded="false" aria-controls="charts">
601
+ <i class="mdi mdi-chart-pie"></i>
602
+ <span class="nav-text">Charts</span> <b class="caret"></b>
603
+ </a>
604
+ <ul class="collapse" id="charts"
605
+ data-parent="#sidebar-menu">
606
+ <div class="sub-menu">
607
+
608
+
609
+
610
+ <li >
611
+ <a class="sidenav-item-link" href="apex-charts.html">
612
+ <span class="nav-text">Apex Charts</span>
613
+
614
+ </a>
615
+ </li>
616
+
617
+
618
+
619
+
620
+ </div>
621
+ </ul>
622
+ </li>
623
+
624
+
625
+
626
+
627
+
628
+ <li class="section-title">
629
+ Pages
630
+ </li>
631
+
632
+
633
+
634
+
635
+
636
+ <li class="has-sub" >
637
+ <a class="sidenav-item-link" href="javascript:void(0)" data-toggle="collapse" data-target="#users"
638
+ aria-expanded="false" aria-controls="users">
639
+ <i class="mdi mdi-image-filter-none"></i>
640
+ <span class="nav-text">User</span> <b class="caret"></b>
641
+ </a>
642
+ <ul class="collapse" id="users"
643
+ data-parent="#sidebar-menu">
644
+ <div class="sub-menu">
645
+
646
+
647
+
648
+ <li >
649
+ <a class="sidenav-item-link" href="user-profile.html">
650
+ <span class="nav-text">User Profile</span>
651
+
652
+ </a>
653
+ </li>
654
+
655
+
656
+
657
+
658
+
659
+
660
+ <li >
661
+ <a class="sidenav-item-link" href="user-activities.html">
662
+ <span class="nav-text">User Activities</span>
663
+
664
+ </a>
665
+ </li>
666
+
667
+
668
+
669
+
670
+
671
+
672
+ <li >
673
+ <a class="sidenav-item-link" href="user-profile-settings.html">
674
+ <span class="nav-text">User Profile Settings</span>
675
+
676
+ </a>
677
+ </li>
678
+
679
+
680
+
681
+
682
+
683
+
684
+ <li >
685
+ <a class="sidenav-item-link" href="user-account-settings.html">
686
+ <span class="nav-text">User Account Settings</span>
687
+
688
+ </a>
689
+ </li>
690
+
691
+
692
+
693
+
694
+
695
+
696
+ <li >
697
+ <a class="sidenav-item-link" href="user-planing-settings.html">
698
+ <span class="nav-text">User Planing Settings</span>
699
+
700
+ </a>
701
+ </li>
702
+
703
+
704
+
705
+
706
+
707
+
708
+ <li >
709
+ <a class="sidenav-item-link" href="user-billing.html">
710
+ <span class="nav-text">User billing</span>
711
+
712
+ </a>
713
+ </li>
714
+
715
+
716
+
717
+
718
+
719
+
720
+ <li >
721
+ <a class="sidenav-item-link" href="user-notify-settings.html">
722
+ <span class="nav-text">User Notify Settings</span>
723
+
724
+ </a>
725
+ </li>
726
+
727
+
728
+
729
+
730
+ </div>
731
+ </ul>
732
+ </li>
733
+
734
+
735
+
736
+
737
+
738
+ <li class="has-sub" >
739
+ <a class="sidenav-item-link" href="javascript:void(0)" data-toggle="collapse" data-target="#authentication"
740
+ aria-expanded="false" aria-controls="authentication">
741
+ <i class="mdi mdi-account"></i>
742
+ <span class="nav-text">Authentication</span> <b class="caret"></b>
743
+ </a>
744
+ <ul class="collapse" id="authentication"
745
+ data-parent="#sidebar-menu">
746
+ <div class="sub-menu">
747
+
748
+
749
+
750
+ <li >
751
+ <a class="sidenav-item-link" href="sign-in.html">
752
+ <span class="nav-text">Sign In</span>
753
+
754
+ </a>
755
+ </li>
756
+
757
+
758
+
759
+
760
+
761
+
762
+ <li >
763
+ <a class="sidenav-item-link" href="sign-up.html">
764
+ <span class="nav-text">Sign Up</span>
765
+
766
+ </a>
767
+ </li>
768
+
769
+
770
+
771
+
772
+
773
+
774
+ <li >
775
+ <a class="sidenav-item-link" href="reset-password.html">
776
+ <span class="nav-text">Reset Password</span>
777
+
778
+ </a>
779
+ </li>
780
+
781
+
782
+
783
+
784
+ </div>
785
+ </ul>
786
+ </li>
787
+
788
+
789
+
790
+
791
+
792
+ <li class="has-sub" >
793
+ <a class="sidenav-item-link" href="javascript:void(0)" data-toggle="collapse" data-target="#other-page"
794
+ aria-expanded="false" aria-controls="other-page">
795
+ <i class="mdi mdi-file-multiple"></i>
796
+ <span class="nav-text">Other pages</span> <b class="caret"></b>
797
+ </a>
798
+ <ul class="collapse" id="other-page"
799
+ data-parent="#sidebar-menu">
800
+ <div class="sub-menu">
801
+
802
+
803
+
804
+ <li >
805
+ <a class="sidenav-item-link" href="invoice.html">
806
+ <span class="nav-text">Invoice</span>
807
+
808
+ </a>
809
+ </li>
810
+
811
+
812
+
813
+
814
+
815
+
816
+ <li >
817
+ <a class="sidenav-item-link" href="404.html">
818
+ <span class="nav-text">404 page</span>
819
+
820
+ </a>
821
+ </li>
822
+
823
+
824
+
825
+
826
+
827
+
828
+ <li >
829
+ <a class="sidenav-item-link" href="page-comingsoon.html">
830
+ <span class="nav-text">Coming Soon</span>
831
+
832
+ </a>
833
+ </li>
834
+
835
+
836
+
837
+
838
+
839
+
840
+ <li >
841
+ <a class="sidenav-item-link" href="page-maintenance.html">
842
+ <span class="nav-text">Maintenance</span>
843
+
844
+ </a>
845
+ </li>
846
+
847
+
848
+
849
+
850
+ </div>
851
+ </ul>
852
+ </li>
853
+
854
+
855
+
856
+
857
+
858
+ <li class="section-title">
859
+ Documentation
860
+ </li>
861
+
862
+
863
+
864
+
865
+
866
+ <li
867
+ >
868
+ <a class="sidenav-item-link" href="getting-started.html">
869
+ <i class="mdi mdi-airplane"></i>
870
+ <span class="nav-text">Getting Started</span>
871
+ </a>
872
+ </li>
873
+
874
+
875
+
876
+
877
+
878
+ <li class="has-sub" >
879
+ <a class="sidenav-item-link" href="javascript:void(0)" data-toggle="collapse" data-target="#customization"
880
+ aria-expanded="false" aria-controls="customization">
881
+ <i class="mdi mdi-square-edit-outline"></i>
882
+ <span class="nav-text">Customization</span> <b class="caret"></b>
883
+ </a>
884
+ <ul class="collapse" id="customization"
885
+ data-parent="#sidebar-menu">
886
+ <div class="sub-menu">
887
+
888
+
889
+
890
+ <li >
891
+ <a class="sidenav-item-link" href="navbar-customization.html">
892
+ <span class="nav-text">Navbar</span>
893
+
894
+ </a>
895
+ </li>
896
+
897
+
898
+
899
+
900
+
901
+
902
+ <li >
903
+ <a class="sidenav-item-link" href="sidebar-customization.html">
904
+ <span class="nav-text">Sidebar</span>
905
+
906
+ </a>
907
+ </li>
908
+
909
+
910
+
911
+
912
+
913
+
914
+ <li >
915
+ <a class="sidenav-item-link" href="styling.html">
916
+ <span class="nav-text">Styling</span>
917
+
918
+ </a>
919
+ </li>
920
+
921
+
922
+
923
+
924
+ </div>
925
+ </ul>
926
+ </li>
927
+
928
+
929
+
930
+ </ul>
931
+
932
+ </div>
933
+
934
+ <div class="sidebar-footer">
935
+ <div class="sidebar-footer-content">
936
+ <ul class="d-flex">
937
+ <li>
938
+ <a href="user-account-settings.html" data-toggle="tooltip" title="Profile settings"><i class="mdi mdi-settings"></i></a></li>
939
+ <li>
940
+ <a href="#" data-toggle="tooltip" title="No chat messages"><i class="mdi mdi-chat-processing"></i></a>
941
+ </li>
942
+ </ul>
943
+ </div>
944
+ </div>
945
+ </div>
946
+ </aside>
947
+
948
+
949
+
950
+ <!-- ====================================
951
+ ——— PAGE WRAPPER
952
+ ===================================== -->
953
+ <div class="page-wrapper">
954
+
955
+ <!-- Header -->
956
+ <header class="main-header" id="header">
957
+ <nav class="navbar navbar-expand-lg navbar-light" id="navbar">
958
+ <!-- Sidebar toggle button -->
959
+ <button id="sidebar-toggler" class="sidebar-toggle">
960
+ <span class="sr-only">Toggle navigation</span>
961
+ </button>
962
+
963
+ <span class="page-title">checkbox & radio</span>
964
+
965
+ <div class="navbar-right ">
966
+
967
+ <!-- search form -->
968
+ <div class="search-form">
969
+ <form action="index.html" method="get">
970
+ <div class="input-group input-group-sm" id="input-group-search">
971
+ <input type="text" autocomplete="off" name="query" id="search-input" class="form-control" placeholder="Search..." />
972
+ <div class="input-group-append">
973
+ <button class="btn" type="button">/</button>
974
+ </div>
975
+ </div>
976
+ </form>
977
+ <ul class="dropdown-menu dropdown-menu-search">
978
+
979
+ <li class="nav-item">
980
+ <a class="nav-link" href="index.html">Morbi leo risus</a>
981
+ </li>
982
+ <li class="nav-item">
983
+ <a class="nav-link" href="index.html">Dapibus ac facilisis in</a>
984
+ </li>
985
+ <li class="nav-item">
986
+ <a class="nav-link" href="index.html">Porta ac consectetur ac</a>
987
+ </li>
988
+ <li class="nav-item">
989
+ <a class="nav-link" href="index.html">Vestibulum at eros</a>
990
+ </li>
991
+
992
+ </ul>
993
+
994
+ </div>
995
+
996
+ <ul class="nav navbar-nav">
997
+ <!-- Offcanvas -->
998
+ <li class="custom-dropdown">
999
+ <a class="offcanvas-toggler active custom-dropdown-toggler" data-offcanvas="contact-off" href="javascript:" >
1000
+ <i class="mdi mdi-contacts icon"></i>
1001
+ </a>
1002
+ </li>
1003
+ <li class="custom-dropdown">
1004
+ <button class="notify-toggler custom-dropdown-toggler">
1005
+ <i class="mdi mdi-bell-outline icon"></i>
1006
+ <span class="badge badge-xs rounded-circle">21</span>
1007
+ </button>
1008
+ <div class="dropdown-notify">
1009
+
1010
+ <header>
1011
+ <div class="nav nav-underline" id="nav-tab" role="tablist">
1012
+ <a class="nav-item nav-link active" id="all-tabs" data-toggle="tab" href="#all" role="tab" aria-controls="nav-home"
1013
+ aria-selected="true">All (5)</a>
1014
+ <a class="nav-item nav-link" id="message-tab" data-toggle="tab" href="#message" role="tab" aria-controls="nav-profile"
1015
+ aria-selected="false">Msgs (4)</a>
1016
+ <a class="nav-item nav-link" id="other-tab" data-toggle="tab" href="#other" role="tab" aria-controls="nav-contact"
1017
+ aria-selected="false">Others (3)</a>
1018
+ </div>
1019
+ </header>
1020
+
1021
+ <div class="" data-simplebar style="height: 325px;">
1022
+ <div class="tab-content" id="myTabContent">
1023
+
1024
+ <div class="tab-pane fade show active" id="all" role="tabpanel" aria-labelledby="all-tabs">
1025
+
1026
+ <div class="media media-sm bg-warning-10 p-4 mb-0">
1027
+ <div class="media-sm-wrapper">
1028
+ <a href="user-profile.html">
1029
+ <img src="images/user/user-sm-02.jpg" alt="User Image">
1030
+ </a>
1031
+ </div>
1032
+ <div class="media-body">
1033
+ <a href="user-profile.html">
1034
+ <span class="title mb-0">John Doe</span>
1035
+ <span class="discribe">Extremity sweetness difficult behaviour he of. On disposal of as landlord horrible. Afraid at highly months do things on at.</span>
1036
+ <span class="time">
1037
+ <time>Just now</time>...
1038
+ </span>
1039
+ </a>
1040
+ </div>
1041
+ </div>
1042
+
1043
+ <div class="media media-sm p-4 bg-light mb-0">
1044
+ <div class="media-sm-wrapper bg-primary">
1045
+ <a href="user-profile.html">
1046
+ <i class="mdi mdi-calendar-check-outline"></i>
1047
+ </a>
1048
+ </div>
1049
+ <div class="media-body">
1050
+ <a href="user-profile.html">
1051
+ <span class="title mb-0">New event added</span>
1052
+ <span class="discribe">1/3/2014 (1pm - 2pm)</span>
1053
+ <span class="time">
1054
+ <time>10 min ago...</time>...
1055
+ </span>
1056
+ </a>
1057
+ </div>
1058
+ </div>
1059
+
1060
+ <div class="media media-sm p-4 mb-0">
1061
+ <div class="media-sm-wrapper">
1062
+ <a href="user-profile.html">
1063
+ <img src="images/user/user-sm-03.jpg" alt="User Image">
1064
+ </a>
1065
+ </div>
1066
+ <div class="media-body">
1067
+ <a href="user-profile.html">
1068
+ <span class="title mb-0">Sagge Hudson</span>
1069
+ <span class="discribe">On disposal of as landlord Afraid at highly months do things on at.</span>
1070
+ <span class="time">
1071
+ <time>1 hrs ago</time>...
1072
+ </span>
1073
+ </a>
1074
+ </div>
1075
+ </div>
1076
+
1077
+ <div class="media media-sm p-4 mb-0">
1078
+ <div class="media-sm-wrapper bg-info-dark">
1079
+ <a href="user-profile.html">
1080
+ <i class="mdi mdi-account-multiple-check"></i>
1081
+ </a>
1082
+ </div>
1083
+ <div class="media-body">
1084
+ <a href="user-profile.html">
1085
+ <span class="title mb-0">Add request</span>
1086
+ <span class="discribe">Add Dany Jones as your contact.</span>
1087
+ <div class="buttons">
1088
+ <a href="#" class="btn btn-sm btn-success shadow-none text-white">accept</a>
1089
+ <a href="#" class="btn btn-sm shadow-none">delete</a>
1090
+ </div>
1091
+ <span class="time">
1092
+ <time>6 hrs ago</time>...
1093
+ </span>
1094
+ </a>
1095
+ </div>
1096
+ </div>
1097
+
1098
+ <div class="media media-sm p-4 mb-0">
1099
+ <div class="media-sm-wrapper bg-info">
1100
+ <a href="user-profile.html">
1101
+ <i class="mdi mdi-playlist-check"></i>
1102
+ </a>
1103
+ </div>
1104
+ <div class="media-body">
1105
+ <a href="user-profile.html">
1106
+ <span class="title mb-0">Task complete</span>
1107
+ <span class="discribe">Afraid at highly months do things on at.</span>
1108
+ <span class="time">
1109
+ <time>1 hrs ago</time>...
1110
+ </span>
1111
+ </a>
1112
+ </div>
1113
+ </div>
1114
+
1115
+ </div>
1116
+
1117
+ <div class="tab-pane fade" id="message" role="tabpanel" aria-labelledby="message-tab">
1118
+
1119
+ <div class="media media-sm p-4 mb-0">
1120
+ <div class="media-sm-wrapper">
1121
+ <a href="user-profile.html">
1122
+ <img src="images/user/user-sm-01.jpg" alt="User Image">
1123
+ </a>
1124
+ </div>
1125
+ <div class="media-body">
1126
+ <a href="user-profile.html">
1127
+ <span class="title mb-0">Selena Wagner</span>
1128
+ <span class="discribe">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</span>
1129
+ <span class="time">
1130
+ <time>15 min ago</time>...
1131
+ </span>
1132
+ </a>
1133
+ </div>
1134
+ </div>
1135
+
1136
+ <div class="media media-sm p-4 mb-0">
1137
+ <div class="media-sm-wrapper">
1138
+ <a href="user-profile.html">
1139
+ <img src="images/user/user-sm-03.jpg" alt="User Image">
1140
+ </a>
1141
+ </div>
1142
+ <div class="media-body">
1143
+ <a href="user-profile.html">
1144
+ <span class="title mb-0">Sagge Hudson</span>
1145
+ <span class="discribe">On disposal of as landlord Afraid at highly months do things on at.</span>
1146
+ <span class="time">
1147
+ <time>1 hrs ago</time>...
1148
+ </span>
1149
+ </a>
1150
+ </div>
1151
+ </div>
1152
+
1153
+ <div class="media media-sm bg-warning-10 p-4 mb-0">
1154
+ <div class="media-sm-wrapper">
1155
+ <a href="user-profile.html">
1156
+ <img src="images/user/user-sm-02.jpg" alt="User Image">
1157
+ </a>
1158
+ </div>
1159
+ <div class="media-body">
1160
+ <a href="user-profile.html">
1161
+ <span class="title mb-0">John Doe</span>
1162
+ <span class="discribe">Extremity sweetness difficult behaviour he of. On disposal of as landlord horrible. Afraid
1163
+ at highly months do things on at.</span>
1164
+ <span class="time">
1165
+ <time>Just now</time>...
1166
+ </span>
1167
+ </a>
1168
+ </div>
1169
+ </div>
1170
+
1171
+ <div class="media media-sm p-4 mb-0">
1172
+ <div class="media-sm-wrapper">
1173
+ <a href="user-profile.html">
1174
+ <img src="images/user/user-sm-04.jpg" alt="User Image">
1175
+ </a>
1176
+ </div>
1177
+ <div class="media-body">
1178
+ <a href="user-profile.html">
1179
+ <span class="title mb-0">Albrecht Straub</span>
1180
+ <span class="discribe"> Beatae quia natus assumenda laboriosam, nisi perferendis aliquid consectetur expedita non tenetur.</span>
1181
+ <span class="time">
1182
+ <time>Just now</time>...
1183
+ </span>
1184
+ </a>
1185
+ </div>
1186
+ </div>
1187
+
1188
+ </div>
1189
+ <div class="tab-pane fade" id="other" role="tabpanel" aria-labelledby="contact-tab">
1190
+
1191
+ <div class="media media-sm p-4 bg-light mb-0">
1192
+ <div class="media-sm-wrapper bg-primary">
1193
+ <a href="user-profile.html">
1194
+ <i class="mdi mdi-calendar-check-outline"></i>
1195
+ </a>
1196
+ </div>
1197
+ <div class="media-body">
1198
+ <a href="user-profile.html">
1199
+ <span class="title mb-0">New event added</span>
1200
+ <span class="discribe">1/3/2014 (1pm - 2pm)</span>
1201
+ <span class="time">
1202
+ <time>10 min ago...</time>...
1203
+ </span>
1204
+ </a>
1205
+ </div>
1206
+ </div>
1207
+
1208
+ <div class="media media-sm p-4 mb-0">
1209
+ <div class="media-sm-wrapper bg-info-dark">
1210
+ <a href="user-profile.html">
1211
+ <i class="mdi mdi-account-multiple-check"></i>
1212
+ </a>
1213
+ </div>
1214
+ <div class="media-body">
1215
+ <a href="user-profile.html">
1216
+ <span class="title mb-0">Add request</span>
1217
+ <span class="discribe">Add Dany Jones as your contact.</span>
1218
+ <div class="buttons">
1219
+ <a href="#" class="btn btn-sm btn-success shadow-none text-white">accept</a>
1220
+ <a href="#" class="btn btn-sm shadow-none">delete</a>
1221
+ </div>
1222
+ <span class="time">
1223
+ <time>6 hrs ago</time>...
1224
+ </span>
1225
+ </a>
1226
+ </div>
1227
+ </div>
1228
+
1229
+ <div class="media media-sm p-4 mb-0">
1230
+ <div class="media-sm-wrapper bg-info">
1231
+ <a href="user-profile.html">
1232
+ <i class="mdi mdi-playlist-check"></i>
1233
+ </a>
1234
+ </div>
1235
+ <div class="media-body">
1236
+ <a href="user-profile.html">
1237
+ <span class="title mb-0">Task complete</span>
1238
+ <span class="discribe">Afraid at highly months do things on at.</span>
1239
+ <span class="time">
1240
+ <time>1 hrs ago</time>...
1241
+ </span>
1242
+ </a>
1243
+ </div>
1244
+ </div>
1245
+
1246
+ </div>
1247
+ </div>
1248
+ </div>
1249
+
1250
+ <footer class="border-top dropdown-notify-footer">
1251
+ <div class="d-flex justify-content-between align-items-center py-2 px-4">
1252
+ <span>Last updated 3 min ago</span>
1253
+ <a id="refress-button" href="javascript:" class="btn mdi mdi-cached btn-refress"></a>
1254
+ </div>
1255
+ </footer>
1256
+ </div>
1257
+ </li>
1258
+ <!-- User Account -->
1259
+ <li class="dropdown user-menu">
1260
+ <button class="dropdown-toggle nav-link" data-toggle="dropdown">
1261
+ <img src="images/user/user-xs-01.jpg" class="user-image rounded-circle" alt="User Image" />
1262
+ <span class="d-none d-lg-inline-block">John Doe</span>
1263
+ </button>
1264
+ <ul class="dropdown-menu dropdown-menu-right">
1265
+ <li>
1266
+ <a class="dropdown-link-item" href="user-profile.html">
1267
+ <i class="mdi mdi-account-outline"></i>
1268
+ <span class="nav-text">My Profile</span>
1269
+ </a>
1270
+ </li>
1271
+ <li>
1272
+ <a class="dropdown-link-item" href="email-inbox.html">
1273
+ <i class="mdi mdi-email-outline"></i>
1274
+ <span class="nav-text">Message</span>
1275
+ <span class="badge badge-pill badge-primary">24</span>
1276
+ </a>
1277
+ </li>
1278
+ <li>
1279
+ <a class="dropdown-link-item" href="user-activities.html">
1280
+ <i class="mdi mdi-diamond-stone"></i>
1281
+ <span class="nav-text">Activitise</span></a>
1282
+ </li>
1283
+ <li>
1284
+ <a class="dropdown-link-item" href="user-account-settings.html">
1285
+ <i class="mdi mdi-settings"></i>
1286
+ <span class="nav-text">Account Setting</span>
1287
+ </a>
1288
+ </li>
1289
+
1290
+ <li class="dropdown-footer">
1291
+ <a class="dropdown-link-item" href="sign-in.html"> <i class="mdi mdi-logout"></i> Log Out </a>
1292
+ </li>
1293
+ </ul>
1294
+ </li>
1295
+ </ul>
1296
+ </div>
1297
+ </nav>
1298
+
1299
+
1300
+ </header>
1301
+
1302
+ <!-- ====================================
1303
+ ——— CONTENT WRAPPER
1304
+ ===================================== -->
1305
+ <div class="content-wrapper">
1306
+ <div class="content"><!-- For Components documentaion -->
1307
+ <div class="card card-default">
1308
+ <div class="px-6 py-4">
1309
+ <p>Mono provides a variety of <span class="text-secondary text-capitalize"> Bootstrap checkboxes and radios </span> components with a
1310
+ little customization that suits its design standards. For more information, please see the official <a class="font-weight-bold" href="https://getbootstrap.com/docs/4.3/components/forms/#checkboxes-and-radios" target="_blank"> Bootstrap documentation.</a></p>
1311
+ </div>
1312
+ </div>
1313
+
1314
+ <div class="row">
1315
+ <div class="col-xl-6">
1316
+ <!-- Basic Checkbox -->
1317
+ <div class="card card-default">
1318
+ <div class="card-header">
1319
+ <h2>Basic Checkbox</h2>
1320
+
1321
+ <a class="btn mdi mdi-code-tags" data-toggle="collapse" href="#collapse-basic-input-group" role="button"
1322
+ aria-expanded="false" aria-controls="collapse-basic-input-group"> </a>
1323
+
1324
+
1325
+ </div>
1326
+ <div class="card-body">
1327
+ <div class="collapse" id="collapse-basic-input-group">
1328
+ <pre class="language-html mb-4">
1329
+ <code >
1330
+ &lt;div class="form-check d-inline-block mr-3 mb-3"&gt;
1331
+ &lt;input class="form-check-input" type="checkbox" checked="checked" value="" id="defaultCheck1"&gt;
1332
+ &lt;label class="form-check-label" for="defaultCheck1"&gt;
1333
+ First Checkbox
1334
+ &lt;/label&gt;
1335
+ &lt;/div&gt;
1336
+
1337
+ &lt;div class="form-check d-inline-block mr-3 mb-3"&gt;
1338
+ &lt;input class="form-check-input" type="checkbox" value="" id="defaultCheck2"&gt;
1339
+ &lt;label class="form-check-label" for="defaultCheck2"&gt;
1340
+ Second Checkbox
1341
+ &lt;/label&gt;
1342
+ &lt;/div&gt;
1343
+
1344
+ &lt;div class="form-check d-inline-block mr-3 mb-3"&gt;
1345
+ &lt;input class="form-check-input" type="checkbox" value="" id="disableCheck1" disabled&gt;
1346
+ &lt;label class="form-check-label" for="disableCheck1"&gt;
1347
+ Disabled
1348
+ &lt;/label&gt;
1349
+ &lt;/div&gt;
1350
+
1351
+ &lt;div class="form-check d-inline-block mr-3 mb-3"&gt;
1352
+ &lt;input class="form-check-input" type="checkbox" checked="checked" value="" id="disableCheck2" disabled&gt;
1353
+ &lt;label class="form-check-label" for="disableCheck2"&gt;
1354
+ Disabled checkbox
1355
+ &lt;/label&gt;
1356
+ &lt;/div&gt;
1357
+ </code>
1358
+ </pre>
1359
+ </div>
1360
+
1361
+ <div class="form-check d-inline-block mr-3 mb-3">
1362
+ <input class="form-check-input" type="checkbox" checked="checked" value="" id="defaultCheck1">
1363
+ <label class="form-check-label" for="defaultCheck1">
1364
+ First Checkbox
1365
+ </label>
1366
+ </div>
1367
+
1368
+ <div class="form-check d-inline-block mr-3 mb-3">
1369
+ <input class="form-check-input" type="checkbox" value="" id="defaultCheck2">
1370
+ <label class="form-check-label" for="defaultCheck2">
1371
+ Second Checkbox
1372
+ </label>
1373
+ </div>
1374
+
1375
+ <div class="form-check d-inline-block mr-3 mb-3">
1376
+ <input class="form-check-input" type="checkbox" value="" id="disableCheck1" disabled>
1377
+ <label class="form-check-label" for="disableCheck1">
1378
+ Disabled
1379
+ </label>
1380
+ </div>
1381
+
1382
+ <div class="form-check d-inline-block mr-3 mb-3">
1383
+ <input class="form-check-input" type="checkbox" checked="checked" value="" id="disableCheck2" disabled>
1384
+ <label class="form-check-label" for="disableCheck2">
1385
+ Disabled checkbox
1386
+ </label>
1387
+ </div>
1388
+
1389
+ </div>
1390
+ </div>
1391
+
1392
+ <!-- Custom Checkbox -->
1393
+ <div class="card card-default">
1394
+ <div class="card-header">
1395
+ <h2>Custom Checkbox</h2>
1396
+
1397
+ <a class="btn mdi mdi-code-tags" data-toggle="collapse" href="#collapse-custom-checkbox" role="button"
1398
+ aria-expanded="false" aria-controls="collapse-custom-checkbox"> </a>
1399
+
1400
+
1401
+ </div>
1402
+ <div class="card-body">
1403
+ <div class="collapse" id="collapse-custom-checkbox">
1404
+ <pre class="language-html mb-4">
1405
+ <code >
1406
+ &lt;div class="custom-control custom-checkbox d-inline-block mr-3 mb-3"&gt;
1407
+ &lt;input type="checkbox" class="custom-control-input" id="customCheck1" checked="checked"&gt;
1408
+ &lt;label class="custom-control-label" for="customCheck1"&gt;First Checkbox&lt;/label&gt;
1409
+ &lt;/div&gt;
1410
+
1411
+ &lt;div class="custom-control custom-checkbox d-inline-block mr-3 mb-3"&gt;
1412
+ &lt;input type="checkbox" class="custom-control-input" id="customCheck2"&gt;
1413
+ &lt;label class="custom-control-label" for="customCheck2"&gt;Second Checkbox&lt;/label&gt;
1414
+ &lt;/div&gt;
1415
+
1416
+ &lt;div class="custom-control custom-checkbox d-inline-block mr-3 mb-3"&gt;
1417
+ &lt;input type="checkbox" class="custom-control-input" id="customCheckDisabled1" disabled&gt;
1418
+ &lt;label class="custom-control-label" for="customCheckDisabled1"&gt;Disabled&lt;/label&gt;
1419
+ &lt;/div&gt;
1420
+
1421
+ &lt;div class="custom-control custom-checkbox d-inline-block mr-3 mb-3"&gt;
1422
+ &lt;input type="checkbox" class="custom-control-input" checked="checked" id="customCheckDisabled1" disabled&gt;
1423
+ &lt;label class="custom-control-label" for="customCheckDisabled1"&gt;Disabled Checked&lt;/label&gt;
1424
+ &lt;/div&gt;
1425
+ </code>
1426
+ </pre>
1427
+ </div>
1428
+
1429
+ <div class="custom-control custom-checkbox d-inline-block mr-3 mb-3">
1430
+ <input type="checkbox" class="custom-control-input" id="customCheck1" checked="checked" >
1431
+ <label class="custom-control-label" for="customCheck1">First Checkbox</label>
1432
+ </div>
1433
+
1434
+ <div class="custom-control custom-checkbox d-inline-block mr-3 mb-3">
1435
+ <input type="checkbox" class="custom-control-input" id="customCheck2">
1436
+ <label class="custom-control-label" for="customCheck2">Second Checkbox</label>
1437
+ </div>
1438
+
1439
+ <div class="custom-control custom-checkbox d-inline-block mr-3 mb-3">
1440
+ <input type="checkbox" class="custom-control-input" id="customCheckDisabled1" disabled>
1441
+ <label class="custom-control-label" for="customCheckDisabled1">Disabled</label>
1442
+ </div>
1443
+
1444
+ <div class="custom-control custom-checkbox d-inline-block mr-3 mb-3">
1445
+ <input type="checkbox" class="custom-control-input" checked="checked" id="customCheckDisabled1" disabled>
1446
+ <label class="custom-control-label" for="customCheckDisabled1">Disabled Checked</label>
1447
+ </div>
1448
+
1449
+ </div>
1450
+ </div>
1451
+
1452
+ <!-- Solid Checkbox -->
1453
+ <div class="card card-default">
1454
+ <div class="card-header">
1455
+ <h2>Solid Checkbox</h2>
1456
+
1457
+ <a class="btn mdi mdi-code-tags" data-toggle="collapse" href="#collapse-solid-checkbox" role="button"
1458
+ aria-expanded="false" aria-controls="collapse-solid-checkbox"> </a>
1459
+
1460
+
1461
+ </div>
1462
+ <div class="card-body">
1463
+ <div class="collapse" id="collapse-solid-checkbox">
1464
+ <pre class="language-html mb-4">
1465
+ <code >
1466
+ &lt;div class="custom-control custom-checkbox d-inline-block mr-3 mb-3"&gt;
1467
+ &lt;input type="checkbox" class="custom-control-input" id="customCheckPrimary" checked="checked"&gt;
1468
+ &lt;label class="custom-control-label" for="customCheckPrimary"&gt;default Checkbox&lt;/label&gt;
1469
+ &lt;/div&gt;
1470
+
1471
+ &lt;div class="custom-control custom-checkbox checkbox-secondary d-inline-block mr-3 mb-3"&gt;
1472
+ &lt;input type="checkbox" class="custom-control-input" id="customCheckSecondary" checked="checked"&gt;
1473
+ &lt;label class="custom-control-label" for="customCheckSecondary"&gt;Secondary Checkbox&lt;/label&gt;
1474
+ &lt;/div&gt;
1475
+
1476
+ &lt;div class="custom-control custom-checkbox checkbox-success d-inline-block mr-3 mb-3"&gt;
1477
+ &lt;input type="checkbox" class="custom-control-input" id="customCheckSuccess" checked="checked"&gt;
1478
+ &lt;label class="custom-control-label" for="customCheckSuccess"&gt;Success Checkbox&lt;/label&gt;
1479
+ &lt;/div&gt;
1480
+
1481
+ &lt;div class="custom-control custom-checkbox checkbox-danger d-inline-block mr-3 mb-3"&gt;
1482
+ &lt;input type="checkbox" class="custom-control-input" id="customCheckDanger" checked="checked"&gt;
1483
+ &lt;label class="custom-control-label" for="customCheckDanger"&gt;Danger Checkbox&lt;/label&gt;
1484
+ &lt;/div&gt;
1485
+
1486
+ &lt;div class="custom-control custom-checkbox checkbox-warning d-inline-block mr-3 mb-3"&gt;
1487
+ &lt;input type="checkbox" class="custom-control-input" id="customCheckWarning" checked="checked"&gt;
1488
+ &lt;label class="custom-control-label" for="customCheckWarning"&gt;Warning Checkbox&lt;/label&gt;
1489
+ &lt;/div&gt;
1490
+
1491
+ &lt;div class="custom-control custom-checkbox checkbox-info d-inline-block mr-3 mb-3"&gt;
1492
+ &lt;input type="checkbox" class="custom-control-input" id="customCheckInfo" checked="checked"&gt;
1493
+ &lt;label class="custom-control-label" for="customCheckInfo"&gt;Info Checkbox&lt;/label&gt;
1494
+ &lt;/div&gt;
1495
+
1496
+ &lt;div class="custom-control custom-checkbox checkbox-light d-inline-block mr-3 mb-3"&gt;
1497
+ &lt;input type="checkbox" class="custom-control-input" id="customCheckLight" checked="checked"&gt;
1498
+ &lt;label class="custom-control-label" for="customCheckLight"&gt;Light Checkbox&lt;/label&gt;
1499
+ &lt;/div&gt;
1500
+
1501
+ &lt;div class="custom-control custom-checkbox checkbox-dark d-inline-block mr-3 mb-3"&gt;
1502
+ &lt;input type="checkbox" class="custom-control-input" id="customCheckDark" checked="checked"&gt;
1503
+ &lt;label class="custom-control-label" for="customCheckDark"&gt;Dark Checkbox&lt;/label&gt;
1504
+ &lt;/div&gt;
1505
+ </code>
1506
+ </pre>
1507
+ </div>
1508
+
1509
+ <div class="custom-control custom-checkbox d-inline-block mr-3 mb-3">
1510
+ <input type="checkbox" class="custom-control-input" id="customCheckPrimary" checked="checked">
1511
+ <label class="custom-control-label" for="customCheckPrimary">default Checkbox</label>
1512
+ </div>
1513
+
1514
+ <div class="custom-control custom-checkbox checkbox-secondary d-inline-block mr-3 mb-3">
1515
+ <input type="checkbox" class="custom-control-input" id="customCheckSecondary" checked="checked">
1516
+ <label class="custom-control-label" for="customCheckSecondary">Secondary Checkbox</label>
1517
+ </div>
1518
+
1519
+ <div class="custom-control custom-checkbox checkbox-success d-inline-block mr-3 mb-3">
1520
+ <input type="checkbox" class="custom-control-input" id="customCheckSuccess" checked="checked">
1521
+ <label class="custom-control-label" for="customCheckSuccess">Success Checkbox</label>
1522
+ </div>
1523
+
1524
+ <div class="custom-control custom-checkbox checkbox-danger d-inline-block mr-3 mb-3">
1525
+ <input type="checkbox" class="custom-control-input" id="customCheckDanger" checked="checked">
1526
+ <label class="custom-control-label" for="customCheckDanger">Danger Checkbox</label>
1527
+ </div>
1528
+
1529
+ <div class="custom-control custom-checkbox checkbox-warning d-inline-block mr-3 mb-3">
1530
+ <input type="checkbox" class="custom-control-input" id="customCheckWarning" checked="checked">
1531
+ <label class="custom-control-label" for="customCheckWarning">Warning Checkbox</label>
1532
+ </div>
1533
+
1534
+ <div class="custom-control custom-checkbox checkbox-info d-inline-block mr-3 mb-3">
1535
+ <input type="checkbox" class="custom-control-input" id="customCheckInfo" checked="checked">
1536
+ <label class="custom-control-label" for="customCheckInfo">Info Checkbox</label>
1537
+ </div>
1538
+
1539
+ <div class="custom-control custom-checkbox checkbox-light d-inline-block mr-3 mb-3">
1540
+ <input type="checkbox" class="custom-control-input" id="customCheckLight" checked="checked">
1541
+ <label class="custom-control-label" for="customCheckLight">Light Checkbox</label>
1542
+ </div>
1543
+
1544
+ <div class="custom-control custom-checkbox checkbox-dark d-inline-block mr-3 mb-3">
1545
+ <input type="checkbox" class="custom-control-input" id="customCheckDark" checked="checked">
1546
+ <label class="custom-control-label" for="customCheckDark">Dark Checkbox</label>
1547
+ </div>
1548
+
1549
+ </div>
1550
+ </div>
1551
+
1552
+ <!-- Outline Checkbox -->
1553
+ <div class="card card-default">
1554
+ <div class="card-header">
1555
+ <h2>Outline Checkbox</h2>
1556
+
1557
+ <a class="btn mdi mdi-code-tags" data-toggle="collapse" href="#collapse-outline-chekbox" role="button"
1558
+ aria-expanded="false" aria-controls="collapse-outline-chekbox"> </a>
1559
+
1560
+
1561
+ </div>
1562
+ <div class="card-body">
1563
+ <div class="collapse" id="collapse-outline-chekbox">
1564
+ <pre class="language-html mb-4">
1565
+ <code >
1566
+ &lt;div class="custom-control custom-checkbox checkbox-outline-primary d-inline-block mr-3 mb-3"&gt;
1567
+ &lt;input type="checkbox" class="custom-control-input" id="outline-chekbox-primary" checked="checked"&gt;
1568
+ &lt;label class="custom-control-label" for="outline-chekbox-primary"&gt;default Checkbox&lt;/label&gt;
1569
+ &lt;/div&gt;
1570
+
1571
+ &lt;div class="custom-control custom-checkbox checkbox-outline-secondary d-inline-block mr-3 mb-3"&gt;
1572
+ &lt;input type="checkbox" class="custom-control-input" id="outline-chekbox-secondary" checked="checked"&gt;
1573
+ &lt;label class="custom-control-label" for="outline-chekbox-secondary"&gt;Secondary Checkbox&lt;/label&gt;
1574
+ &lt;/div&gt;
1575
+
1576
+ &lt;div class="custom-control custom-checkbox checkbox-outline-success d-inline-block mr-3 mb-3"&gt;
1577
+ &lt;input type="checkbox" class="custom-control-input" id="outline-chekbox-success" checked="checked"&gt;
1578
+ &lt;label class="custom-control-label" for="outline-chekbox-success"&gt;Success Checkbox&lt;/label&gt;
1579
+ &lt;/div&gt;
1580
+
1581
+ &lt;div class="custom-control custom-checkbox checkbox-outline-danger d-inline-block mr-3 mb-3"&gt;
1582
+ &lt;input type="checkbox" class="custom-control-input" id="outline-chekbox-danger" checked="checked"&gt;
1583
+ &lt;label class="custom-control-label" for="outline-chekbox-danger"&gt;Danger Checkbox&lt;/label&gt;
1584
+ &lt;/div&gt;
1585
+
1586
+ &lt;div class="custom-control custom-checkbox checkbox-outline-warning d-inline-block mr-3 mb-3"&gt;
1587
+ &lt;input type="checkbox" class="custom-control-input" id="outline-chekbox-warning" checked="checked"&gt;
1588
+ &lt;label class="custom-control-label" for="outline-chekbox-warning"&gt;Warning Checkbox&lt;/label&gt;
1589
+ &lt;/div&gt;
1590
+
1591
+ &lt;div class="custom-control custom-checkbox checkbox-outline-info d-inline-block mr-3 mb-3"&gt;
1592
+ &lt;input type="checkbox" class="custom-control-input" id="outline-chekbox-info" checked="checked"&gt;
1593
+ &lt;label class="custom-control-label" for="outline-chekbox-info"&gt;Info Checkbox&lt;/label&gt;
1594
+ &lt;/div&gt;
1595
+
1596
+ &lt;div class="custom-control custom-checkbox checkbox-outline-light d-inline-block mr-3 mb-3"&gt;
1597
+ &lt;input type="checkbox" class="custom-control-input" id="outline-chekbox-light" checked="checked"&gt;
1598
+ &lt;label class="custom-control-label" for="outline-chekbox-light"&gt;Light Checkbox&lt;/label&gt;
1599
+ &lt;/div&gt;
1600
+
1601
+ &lt;div class="custom-control custom-checkbox checkbox-outline-dark d-inline-block mr-3 mb-3"&gt;
1602
+ &lt;input type="checkbox" class="custom-control-input" id="outline-chekbox-dark" checked="checked"&gt;
1603
+ &lt;label class="custom-control-label" for="outline-chekbox-dark"&gt;Dark Checkbox&lt;/label&gt;
1604
+ &lt;/div&gt;
1605
+ </code>
1606
+ </pre>
1607
+ </div>
1608
+
1609
+ <div class="custom-control custom-checkbox checkbox-outline-primary d-inline-block mr-3 mb-3">
1610
+ <input type="checkbox" class="custom-control-input" id="outline-chekbox-primary" checked="checked">
1611
+ <label class="custom-control-label" for="outline-chekbox-primary">default Checkbox</label>
1612
+ </div>
1613
+
1614
+ <div class="custom-control custom-checkbox checkbox-outline-secondary d-inline-block mr-3 mb-3">
1615
+ <input type="checkbox" class="custom-control-input" id="outline-chekbox-secondary" checked="checked">
1616
+ <label class="custom-control-label" for="outline-chekbox-secondary">Secondary Checkbox</label>
1617
+ </div>
1618
+
1619
+ <div class="custom-control custom-checkbox checkbox-outline-success d-inline-block mr-3 mb-3">
1620
+ <input type="checkbox" class="custom-control-input" id="outline-chekbox-success" checked="checked">
1621
+ <label class="custom-control-label" for="outline-chekbox-success">Success Checkbox</label>
1622
+ </div>
1623
+
1624
+ <div class="custom-control custom-checkbox checkbox-outline-danger d-inline-block mr-3 mb-3">
1625
+ <input type="checkbox" class="custom-control-input" id="outline-chekbox-danger" checked="checked">
1626
+ <label class="custom-control-label" for="outline-chekbox-danger">Danger Checkbox</label>
1627
+ </div>
1628
+
1629
+ <div class="custom-control custom-checkbox checkbox-outline-warning d-inline-block mr-3 mb-3">
1630
+ <input type="checkbox" class="custom-control-input" id="outline-chekbox-warning" checked="checked">
1631
+ <label class="custom-control-label" for="outline-chekbox-warning">Warning Checkbox</label>
1632
+ </div>
1633
+
1634
+ <div class="custom-control custom-checkbox checkbox-outline-info d-inline-block mr-3 mb-3">
1635
+ <input type="checkbox" class="custom-control-input" id="outline-chekbox-info" checked="checked">
1636
+ <label class="custom-control-label" for="outline-chekbox-info">Info Checkbox</label>
1637
+ </div>
1638
+
1639
+ <div class="custom-control custom-checkbox checkbox-outline-light d-inline-block mr-3 mb-3">
1640
+ <input type="checkbox" class="custom-control-input" id="outline-chekbox-light" checked="checked">
1641
+ <label class="custom-control-label" for="outline-chekbox-light">Light Checkbox</label>
1642
+ </div>
1643
+
1644
+ <div class="custom-control custom-checkbox checkbox-outline-dark d-inline-block mr-3 mb-3">
1645
+ <input type="checkbox" class="custom-control-input" id="outline-chekbox-dark" checked="checked">
1646
+ <label class="custom-control-label" for="outline-chekbox-dark">Dark Checkbox</label>
1647
+ </div>
1648
+
1649
+ </div>
1650
+ </div>
1651
+
1652
+
1653
+
1654
+
1655
+ </div>
1656
+ <div class="col-xl-6">
1657
+ <!-- Basic Radios -->
1658
+ <div class="card card-default">
1659
+ <div class="card-header">
1660
+ <h2>Basic Radios</h2>
1661
+
1662
+ <a class="btn mdi mdi-code-tags" data-toggle="collapse" href="#collapse-radio-check-box" role="button"
1663
+ aria-expanded="false" aria-controls="collapse-radio-check-box"> </a>
1664
+
1665
+
1666
+ </div>
1667
+ <div class="card-body">
1668
+ <div class="collapse" id="collapse-radio-check-box">
1669
+ <pre class="language-html mb-4">
1670
+ <code >
1671
+ &lt;div class="form-check mr-3 mb-3 d-inline-block"&gt;
1672
+ &lt;input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios1" value="option1" checked&gt;
1673
+ &lt;label class="form-check-label" for="exampleRadios1"&gt;
1674
+ Default radio
1675
+ &lt;/label&gt;
1676
+ &lt;/div&gt;
1677
+
1678
+ &lt;div class="form-check mr-3 mb-3 d-inline-block"&gt;
1679
+ &lt;input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios2" value="option2"&gt;
1680
+ &lt;label class="form-check-label" for="exampleRadios2"&gt;
1681
+ Second radio
1682
+ &lt;/label&gt;
1683
+ &lt;/div&gt;
1684
+
1685
+ &lt;div class="form-check mr-3 mb-3 d-inline-block"&gt;
1686
+ &lt;input class="form-check-input" type="radio" name="exampleRadiosd" id="exampleRadios3" value="option3" disabled&gt;
1687
+ &lt;label class="form-check-label" for="exampleRadios3"&gt;
1688
+ Disabled
1689
+ &lt;/label&gt;
1690
+ &lt;/div&gt;
1691
+
1692
+ &lt;div class="form-check mr-3 mb-3 d-inline-block"&gt;
1693
+ &lt;input class="form-check-input" type="radio" name="exampleRadiosd" id="exampleRadios3" value="option3" checked
1694
+ disabled&gt;
1695
+ &lt;label class="form-check-label" for="exampleRadios3"&gt;
1696
+ Disabled Checked
1697
+ &lt;/label&gt;
1698
+ &lt;/div&gt;
1699
+ </code>
1700
+ </pre>
1701
+ </div>
1702
+
1703
+ <div class="form-check mr-3 mb-3 d-inline-block">
1704
+ <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios1" value="option1" checked>
1705
+ <label class="form-check-label" for="exampleRadios1">
1706
+ Default radio
1707
+ </label>
1708
+ </div>
1709
+
1710
+ <div class="form-check mr-3 mb-3 d-inline-block">
1711
+ <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios2" value="option2">
1712
+ <label class="form-check-label" for="exampleRadios2">
1713
+ Second radio
1714
+ </label>
1715
+ </div>
1716
+
1717
+ <div class="form-check mr-3 mb-3 d-inline-block">
1718
+ <input class="form-check-input" type="radio" name="exampleRadiosd" id="exampleRadios3" value="option3" disabled>
1719
+ <label class="form-check-label" for="exampleRadios3">
1720
+ Disabled
1721
+ </label>
1722
+ </div>
1723
+
1724
+ <div class="form-check mr-3 mb-3 d-inline-block">
1725
+ <input class="form-check-input" type="radio" name="exampleRadiosd" id="exampleRadios3" value="option3" checked disabled>
1726
+ <label class="form-check-label" for="exampleRadios3">
1727
+ Disabled Checked
1728
+ </label>
1729
+ </div>
1730
+
1731
+ </div>
1732
+ </div>
1733
+
1734
+ <!-- Custom Radios -->
1735
+ <div class="card card-default">
1736
+ <div class="card-header">
1737
+ <h2>Custom Radios</h2>
1738
+
1739
+ <a class="btn mdi mdi-code-tags" data-toggle="collapse" href="#collapse-custom-radio" role="button"
1740
+ aria-expanded="false" aria-controls="collapse-custom-radio"> </a>
1741
+
1742
+
1743
+ </div>
1744
+ <div class="card-body">
1745
+ <div class="collapse" id="collapse-custom-radio">
1746
+ <pre class="language-html mb-4">
1747
+ <code >
1748
+ &lt;div class="custom-control custom-radio d-inline-block mr-3 mb-3"&gt;
1749
+ &lt;input type="radio" id="customRadio1" name="customRadio" class="custom-control-input" checked="checked"&gt;
1750
+ &lt;label class="custom-control-label" for="customRadio1"&gt;First Radio&lt;/label&gt;
1751
+ &lt;/div&gt;
1752
+
1753
+ &lt;div class="custom-control custom-radio d-inline-block mr-3 mb-3"&gt;
1754
+ &lt;input type="radio" id="customRadio2" name="customRadio" class="custom-control-input"&gt;
1755
+ &lt;label class="custom-control-label" for="customRadio2"&gt;Second Radio&lt;/label&gt;
1756
+ &lt;/div&gt;
1757
+
1758
+ &lt;div class="custom-control custom-radio d-inline-block mr-3 mb-3"&gt;
1759
+ &lt;input type="radio" id="customRadio2" name="customRadios" class="custom-control-input" disabled&gt;
1760
+ &lt;label class="custom-control-label" for="customRadio2"&gt;Disabled&lt;/label&gt;
1761
+ &lt;/div&gt;
1762
+
1763
+ &lt;div class="custom-control custom-radio d-inline-block mr-3 mb-3"&gt;
1764
+ &lt;input type="radio" id="customRadio1" name="customRadios" class="custom-control-input" checked="checked" disabled&gt;
1765
+ &lt;label class="custom-control-label" for="customRadio1"&gt;Disabled&lt;/label&gt;
1766
+ &lt;/div&gt;
1767
+ </code>
1768
+ </pre>
1769
+ </div>
1770
+
1771
+ <div class="custom-control custom-radio d-inline-block mr-3 mb-3">
1772
+ <input type="radio" id="customRadio1" name="customRadio" class="custom-control-input" checked="checked">
1773
+ <label class="custom-control-label" for="customRadio1">First Radio</label>
1774
+ </div>
1775
+
1776
+ <div class="custom-control custom-radio d-inline-block mr-3 mb-3">
1777
+ <input type="radio" id="customRadio2" name="customRadio" class="custom-control-input">
1778
+ <label class="custom-control-label" for="customRadio2">Second Radio</label>
1779
+ </div>
1780
+
1781
+ <div class="custom-control custom-radio d-inline-block mr-3 mb-3">
1782
+ <input type="radio" id="customRadio2" name="customRadios" class="custom-control-input" disabled>
1783
+ <label class="custom-control-label" for="customRadio2">Disabled</label>
1784
+ </div>
1785
+
1786
+ <div class="custom-control custom-radio d-inline-block mr-3 mb-3">
1787
+ <input type="radio" id="customRadio1" name="customRadios" class="custom-control-input" checked="checked" disabled>
1788
+ <label class="custom-control-label" for="customRadio1">Disabled</label>
1789
+ </div>
1790
+
1791
+ </div>
1792
+ </div>
1793
+
1794
+ <!-- Solid Radios -->
1795
+ <div class="card card-default">
1796
+ <div class="card-header">
1797
+ <h2>Solid Radios</h2>
1798
+
1799
+ <a class="btn mdi mdi-code-tags" data-toggle="collapse" href="#collapse-solid-radio" role="button"
1800
+ aria-expanded="false" aria-controls="collapse-solid-radio"> </a>
1801
+
1802
+
1803
+ </div>
1804
+ <div class="card-body">
1805
+ <div class="collapse" id="collapse-solid-radio">
1806
+ <pre class="language-html mb-4">
1807
+ <code >
1808
+ &lt;div class="custom-control custom-radio d-inline-block mr-3 mb-3"&gt;
1809
+ &lt;input type="radio" id="radio-primary" name="radio-primary" class="custom-control-input" checked&gt;
1810
+ &lt;label class="custom-control-label" for="radio-primary"&gt;Default Radio&lt;/label&gt;
1811
+ &lt;/div&gt;
1812
+
1813
+ &lt;div class="custom-control custom-radio radio-secondary d-inline-block mr-3 mb-3"&gt;
1814
+ &lt;input type="radio" id="radio-secondary" name="radio-secondary" class="custom-control-input" checked&gt;
1815
+ &lt;label class="custom-control-label" for="radio-secondary"&gt;Secondary Radio&lt;/label&gt;
1816
+ &lt;/div&gt;
1817
+
1818
+ &lt;div class="custom-control custom-radio radio-success d-inline-block mr-3 mb-3"&gt;
1819
+ &lt;input type="radio" id="radio-success" name="radio-success" class="custom-control-input" checked&gt;
1820
+ &lt;label class="custom-control-label" for="radio-success"&gt;Success Radio&lt;/label&gt;
1821
+ &lt;/div&gt;
1822
+
1823
+ &lt;div class="custom-control custom-radio radio-danger d-inline-block mr-3 mb-3"&gt;
1824
+ &lt;input type="radio" id="radio-danger" name="radio-danger" class="custom-control-input" checked&gt;
1825
+ &lt;label class="custom-control-label" for="radio-danger"&gt;Danger Radio&lt;/label&gt;
1826
+ &lt;/div&gt;
1827
+
1828
+ &lt;div class="custom-control custom-radio radio-info d-inline-block mr-3 mb-3"&gt;
1829
+ &lt;input type="radio" id="radio-info" name="radio-info" class="custom-control-input" checked&gt;
1830
+ &lt;label class="custom-control-label" for="radio-info"&gt;Info Radio&lt;/label&gt;
1831
+ &lt;/div&gt;
1832
+
1833
+ &lt;div class="custom-control custom-radio radio-light d-inline-block mr-3 mb-3"&gt;
1834
+ &lt;input type="radio" id="radio-light" name="radio-light" class="custom-control-input" checked&gt;
1835
+ &lt;label class="custom-control-label" for="radio-light"&gt;Light Radio&lt;/label&gt;
1836
+ &lt;/div&gt;
1837
+
1838
+ &lt;div class="custom-control custom-radio radio-dark d-inline-block mr-3 mb-3"&gt;
1839
+ &lt;input type="radio" id="radio-dark" name="radio-dark" class="custom-control-input" checked&gt;
1840
+ &lt;label class="custom-control-label" for="radio-dark"&gt;Dark Radio&lt;/label&gt;
1841
+ &lt;/div&gt;
1842
+ </code>
1843
+ </pre>
1844
+ </div>
1845
+
1846
+ <div class="custom-control custom-radio d-inline-block mr-3 mb-3">
1847
+ <input type="radio" id="radio-primary" name="radio-primary" class="custom-control-input" checked>
1848
+ <label class="custom-control-label" for="radio-primary">Default Radio</label>
1849
+ </div>
1850
+
1851
+ <div class="custom-control custom-radio radio-secondary d-inline-block mr-3 mb-3">
1852
+ <input type="radio" id="radio-secondary" name="radio-secondary" class="custom-control-input" checked>
1853
+ <label class="custom-control-label" for="radio-secondary">Secondary Radio</label>
1854
+ </div>
1855
+
1856
+ <div class="custom-control custom-radio radio-success d-inline-block mr-3 mb-3">
1857
+ <input type="radio" id="radio-success" name="radio-success" class="custom-control-input" checked>
1858
+ <label class="custom-control-label" for="radio-success">Success Radio</label>
1859
+ </div>
1860
+
1861
+ <div class="custom-control custom-radio radio-danger d-inline-block mr-3 mb-3">
1862
+ <input type="radio" id="radio-danger" name="radio-danger" class="custom-control-input" checked>
1863
+ <label class="custom-control-label" for="radio-danger">Danger Radio</label>
1864
+ </div>
1865
+
1866
+ <div class="custom-control custom-radio radio-info d-inline-block mr-3 mb-3">
1867
+ <input type="radio" id="radio-info" name="radio-info" class="custom-control-input" checked>
1868
+ <label class="custom-control-label" for="radio-info">Info Radio</label>
1869
+ </div>
1870
+
1871
+ <div class="custom-control custom-radio radio-light d-inline-block mr-3 mb-3">
1872
+ <input type="radio" id="radio-light" name="radio-light" class="custom-control-input" checked>
1873
+ <label class="custom-control-label" for="radio-light">Light Radio</label>
1874
+ </div>
1875
+
1876
+ <div class="custom-control custom-radio radio-dark d-inline-block mr-3 mb-3">
1877
+ <input type="radio" id="radio-dark" name="radio-dark" class="custom-control-input" checked>
1878
+ <label class="custom-control-label" for="radio-dark">Dark Radio</label>
1879
+ </div>
1880
+
1881
+ </div>
1882
+ </div>
1883
+
1884
+ <!-- Outline Radio -->
1885
+ <div class="card card-default">
1886
+ <div class="card-header">
1887
+ <h2>Outline Radio</h2>
1888
+
1889
+ <a class="btn mdi mdi-code-tags" data-toggle="collapse" href="#collapse-radio-outline" role="button"
1890
+ aria-expanded="false" aria-controls="collapse-radio-outline"> </a>
1891
+
1892
+
1893
+ </div>
1894
+ <div class="card-body">
1895
+ <div class="collapse" id="collapse-radio-outline">
1896
+ <pre class="language-html mb-4">
1897
+ <code >
1898
+ &lt;div class="custom-control custom-radio radio-outline-primary d-inline-block mr-3 mb-3"&gt;
1899
+ &lt;input type="radio" id="radio-outline-primary" name="radio-outline-primary" class="custom-control-input" checked&gt;
1900
+ &lt;label class="custom-control-label" for="radio-outline-primary"&gt;Default Radio&lt;/label&gt;
1901
+ &lt;/div&gt;
1902
+
1903
+ &lt;div class="custom-control custom-radio radio-outline-secondary d-inline-block mr-3 mb-3"&gt;
1904
+ &lt;input type="radio" id="radio-outline-secondary" name="radio-outline-secondary" class="custom-control-input" checked&gt;
1905
+ &lt;label class="custom-control-label" for="radio-outline-secondary"&gt;Secondary Radio&lt;/label&gt;
1906
+ &lt;/div&gt;
1907
+
1908
+ &lt;div class="custom-control custom-radio radio-outline-success d-inline-block mr-3 mb-3"&gt;
1909
+ &lt;input type="radio" id="radio-outline-success" name="radio-outline-success" class="custom-control-input" checked&gt;
1910
+ &lt;label class="custom-control-label" for="radio-outline-success"&gt;Success Radio&lt;/label&gt;
1911
+ &lt;/div&gt;
1912
+
1913
+ &lt;div class="custom-control custom-radio radio-outline-danger d-inline-block mr-3 mb-3"&gt;
1914
+ &lt;input type="radio" id="radio-outline-danger" name="radio-outline-danger" class="custom-control-input" checked&gt;
1915
+ &lt;label class="custom-control-label" for="radio-outline-danger"&gt;Danger Radio&lt;/label&gt;
1916
+ &lt;/div&gt;
1917
+
1918
+ &lt;div class="custom-control custom-radio radio-outline-info d-inline-block mr-3 mb-3"&gt;
1919
+ &lt;input type="radio" id="radio-outline-info" name="radio-outline-info" class="custom-control-input" checked&gt;
1920
+ &lt;label class="custom-control-label" for="radio-outline-info"&gt;Info Radio&lt;/label&gt;
1921
+ &lt;/div&gt;
1922
+
1923
+ &lt;div class="custom-control custom-radio radio-outline-light d-inline-block mr-3 mb-3"&gt;
1924
+ &lt;input type="radio" id="radio-outline-light" name="radio-outline-light" class="custom-control-input" checked&gt;
1925
+ &lt;label class="custom-control-label" for="radio-outline-light"&gt;Light Radio&lt;/label&gt;
1926
+ &lt;/div&gt;
1927
+
1928
+ &lt;div class="custom-control custom-radio radio-outline-dark d-inline-block mr-3 mb-3"&gt;
1929
+ &lt;input type="radio" id="radio-outline-dark" name="radio-outline-dark" class="custom-control-input" checked&gt;
1930
+ &lt;label class="custom-control-label" for="radio-outline-dark"&gt;Dark Radio&lt;/label&gt;
1931
+ &lt;/div&gt;
1932
+ </code>
1933
+ </pre>
1934
+ </div>
1935
+
1936
+ <div class="custom-control custom-radio radio-outline-primary d-inline-block mr-3 mb-3">
1937
+ <input type="radio" id="radio-outline-primary" name="radio-outline-primary" class="custom-control-input" checked>
1938
+ <label class="custom-control-label" for="radio-outline-primary">Default Radio</label>
1939
+ </div>
1940
+
1941
+ <div class="custom-control custom-radio radio-outline-secondary d-inline-block mr-3 mb-3">
1942
+ <input type="radio" id="radio-outline-secondary" name="radio-outline-secondary" class="custom-control-input" checked>
1943
+ <label class="custom-control-label" for="radio-outline-secondary">Secondary Radio</label>
1944
+ </div>
1945
+
1946
+ <div class="custom-control custom-radio radio-outline-success d-inline-block mr-3 mb-3">
1947
+ <input type="radio" id="radio-outline-success" name="radio-outline-success" class="custom-control-input" checked>
1948
+ <label class="custom-control-label" for="radio-outline-success">Success Radio</label>
1949
+ </div>
1950
+
1951
+ <div class="custom-control custom-radio radio-outline-danger d-inline-block mr-3 mb-3">
1952
+ <input type="radio" id="radio-outline-danger" name="radio-outline-danger" class="custom-control-input" checked>
1953
+ <label class="custom-control-label" for="radio-outline-danger">Danger Radio</label>
1954
+ </div>
1955
+
1956
+ <div class="custom-control custom-radio radio-outline-info d-inline-block mr-3 mb-3">
1957
+ <input type="radio" id="radio-outline-info" name="radio-outline-info" class="custom-control-input" checked>
1958
+ <label class="custom-control-label" for="radio-outline-info">Info Radio</label>
1959
+ </div>
1960
+
1961
+ <div class="custom-control custom-radio radio-outline-light d-inline-block mr-3 mb-3">
1962
+ <input type="radio" id="radio-outline-light" name="radio-outline-light" class="custom-control-input" checked>
1963
+ <label class="custom-control-label" for="radio-outline-light">Light Radio</label>
1964
+ </div>
1965
+
1966
+ <div class="custom-control custom-radio radio-outline-dark d-inline-block mr-3 mb-3">
1967
+ <input type="radio" id="radio-outline-dark" name="radio-outline-dark" class="custom-control-input" checked>
1968
+ <label class="custom-control-label" for="radio-outline-dark">Dark Radio</label>
1969
+ </div>
1970
+
1971
+ </div>
1972
+ </div>
1973
+
1974
+
1975
+ </div>
1976
+ </div>
1977
+ </div>
1978
+
1979
+ </div>
1980
+
1981
+ <!-- Footer -->
1982
+ <footer class="footer mt-auto">
1983
+ <div class="copyright bg-white">
1984
+ <p>
1985
+ &copy; <span id="copy-year"></span> Copyright Mono Dashboard Bootstrap Template by <a class="text-primary" href="http://www.iamabdus.com/" target="_blank" >Abdus</a>.
1986
+ </p>
1987
+ </div>
1988
+ <script>
1989
+ var d = new Date();
1990
+ var year = d.getFullYear();
1991
+ document.getElementById("copy-year").innerHTML = year;
1992
+ </script>
1993
+ </footer>
1994
+
1995
+ </div>
1996
+ </div>
1997
+
1998
+ <!-- Card Offcanvas -->
1999
+ <div class="card card-offcanvas" id="contact-off" >
2000
+ <div class="card-header">
2001
+ <h2>Contacts</h2>
2002
+ <a href="#" class="btn btn-primary btn-pill px-4">Add New</a>
2003
+ </div>
2004
+ <div class="card-body">
2005
+
2006
+ <div class="mb-4">
2007
+ <input type="text" class="form-control form-control-lg form-control-secondary rounded-0" placeholder="Search contacts...">
2008
+ </div>
2009
+
2010
+ <div class="media media-sm">
2011
+ <div class="media-sm-wrapper">
2012
+ <a href="user-profile.html">
2013
+ <img src="images/user/user-sm-01.jpg" alt="User Image">
2014
+ <span class="active bg-primary"></span>
2015
+ </a>
2016
+ </div>
2017
+ <div class="media-body">
2018
+ <a href="user-profile.html">
2019
+ <span class="title">Selena Wagner</span>
2020
+ <span class="discribe">Designer</span>
2021
+ </a>
2022
+ </div>
2023
+ </div>
2024
+
2025
+ <div class="media media-sm">
2026
+ <div class="media-sm-wrapper">
2027
+ <a href="user-profile.html">
2028
+ <img src="images/user/user-sm-02.jpg" alt="User Image">
2029
+ <span class="active bg-primary"></span>
2030
+ </a>
2031
+ </div>
2032
+ <div class="media-body">
2033
+ <a href="user-profile.html">
2034
+ <span class="title">Walter Reuter</span>
2035
+ <span>Developer</span>
2036
+ </a>
2037
+ </div>
2038
+ </div>
2039
+
2040
+ <div class="media media-sm">
2041
+ <div class="media-sm-wrapper">
2042
+ <a href="user-profile.html">
2043
+ <img src="images/user/user-sm-03.jpg" alt="User Image">
2044
+ </a>
2045
+ </div>
2046
+ <div class="media-body">
2047
+ <a href="user-profile.html">
2048
+ <span class="title">Larissa Gebhardt</span>
2049
+ <span>Cyber Punk</span>
2050
+ </a>
2051
+ </div>
2052
+ </div>
2053
+
2054
+ <div class="media media-sm">
2055
+ <div class="media-sm-wrapper">
2056
+ <a href="user-profile.html">
2057
+ <img src="images/user/user-sm-04.jpg" alt="User Image">
2058
+ </a>
2059
+
2060
+ </div>
2061
+ <div class="media-body">
2062
+ <a href="user-profile.html">
2063
+ <span class="title">Albrecht Straub</span>
2064
+ <span>Photographer</span>
2065
+ </a>
2066
+ </div>
2067
+ </div>
2068
+
2069
+ <div class="media media-sm">
2070
+ <div class="media-sm-wrapper">
2071
+ <a href="user-profile.html">
2072
+ <img src="images/user/user-sm-05.jpg" alt="User Image">
2073
+ <span class="active bg-danger"></span>
2074
+ </a>
2075
+ </div>
2076
+ <div class="media-body">
2077
+ <a href="user-profile.html">
2078
+ <span class="title">Leopold Ebert</span>
2079
+ <span>Fashion Designer</span>
2080
+ </a>
2081
+ </div>
2082
+ </div>
2083
+
2084
+ <div class="media media-sm">
2085
+ <div class="media-sm-wrapper">
2086
+ <a href="user-profile.html">
2087
+ <img src="images/user/user-sm-06.jpg" alt="User Image">
2088
+ <span class="active bg-primary"></span>
2089
+ </a>
2090
+ </div>
2091
+ <div class="media-body">
2092
+ <a href="user-profile.html">
2093
+ <span class="title">Selena Wagner</span>
2094
+ <span>Photographer</span>
2095
+ </a>
2096
+ </div>
2097
+ </div>
2098
+
2099
+ </div>
2100
+ </div>
2101
+
2102
+
2103
+
2104
+
2105
+ <script src="plugins/jquery/jquery.min.js"></script>
2106
+ <script src="plugins/bootstrap/js/bootstrap.bundle.min.js"></script>
2107
+ <script src="plugins/simplebar/simplebar.min.js"></script>
2108
+ <script src="https://unpkg.com/hotkeys-js/dist/hotkeys.min.js"></script>
2109
+
2110
+
2111
+
2112
+ <script src="plugins/prism/prism.js"></script>
2113
+
2114
+
2115
+ <script src="js/mono.js"></script>
2116
+ <script src="js/chart.js"></script>
2117
+ <script src="js/map.js"></script>
2118
+ <script src="js/custom.js"></script>
2119
+
2120
+
2121
+
2122
+
2123
+ <!-- -->
2124
+
2125
+
2126
+ </body>
2127
+ </html>
collapse.html ADDED
@@ -0,0 +1,2079 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+
3
+ <!--
4
+ // WEBSITE: https://themefisher.com
5
+ // TWITTER: https://twitter.com/themefisher
6
+ // FACEBOOK: https://www.facebook.com/themefisher
7
+ // GITHUB: https://github.com/themefisher/
8
+ -->
9
+
10
+ <html lang="en" dir="ltr">
11
+ <head>
12
+ <meta charset="utf-8" />
13
+ <meta http-equiv="X-UA-Compatible" content="IE=edge" />
14
+ <meta name="viewport" content="width=device-width, initial-scale=1" />
15
+
16
+ <title>Mono - Responsive Admin & Dashboard Template</title>
17
+
18
+ <!-- GOOGLE FONTS -->
19
+ <link href="https://fonts.googleapis.com/css?family=Karla:400,700|Roboto" rel="stylesheet">
20
+ <link href="plugins/material/css/materialdesignicons.min.css" rel="stylesheet" />
21
+ <link href="plugins/simplebar/simplebar.css" rel="stylesheet" />
22
+
23
+ <!-- PLUGINS CSS STYLE -->
24
+ <link href="plugins/nprogress/nprogress.css" rel="stylesheet" />
25
+
26
+
27
+ <link href="plugins/prism/prism.css" rel="stylesheet" />
28
+
29
+
30
+ <!-- MONO CSS -->
31
+ <link id="main-css-href" rel="stylesheet" href="css/style.css" />
32
+
33
+
34
+
35
+
36
+ <!-- FAVICON -->
37
+ <link href="images/favicon.png" rel="shortcut icon" />
38
+
39
+ <!--
40
+ HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries
41
+ -->
42
+ <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
43
+ <!--[if lt IE 9]>
44
+ <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
45
+ <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
46
+ <![endif]-->
47
+ <script src="plugins/nprogress/nprogress.js"></script>
48
+ </head>
49
+
50
+
51
+ <body class="navbar-fixed sidebar-fixed" id="body">
52
+ <script>
53
+ NProgress.configure({ showSpinner: false });
54
+ NProgress.start();
55
+ </script>
56
+
57
+
58
+
59
+ <!-- ====================================
60
+ ——— WRAPPER
61
+ ===================================== -->
62
+ <div class="wrapper">
63
+
64
+
65
+ <!-- ====================================
66
+ ——— LEFT SIDEBAR WITH OUT FOOTER
67
+ ===================================== -->
68
+ <aside class="left-sidebar sidebar-dark" id="left-sidebar">
69
+ <div id="sidebar" class="sidebar sidebar-with-footer">
70
+ <!-- Aplication Brand -->
71
+ <div class="app-brand">
72
+ <a href="/index.html">
73
+ <img src="images/logo.png" alt="Mono">
74
+ <span class="brand-name">MONO</span>
75
+ </a>
76
+ </div>
77
+ <!-- begin sidebar scrollbar -->
78
+ <div class="sidebar-left" data-simplebar style="height: 100%;">
79
+ <!-- sidebar menu -->
80
+ <ul class="nav sidebar-inner" id="sidebar-menu">
81
+
82
+
83
+
84
+ <li
85
+ >
86
+ <a class="sidenav-item-link" href="index.html">
87
+ <i class="mdi mdi-briefcase-account-outline"></i>
88
+ <span class="nav-text">Business Dashboard</span>
89
+ </a>
90
+ </li>
91
+
92
+
93
+
94
+
95
+
96
+ <li
97
+ >
98
+ <a class="sidenav-item-link" href="analytics.html">
99
+ <i class="mdi mdi-chart-line"></i>
100
+ <span class="nav-text">Analytics Dashboard</span>
101
+ </a>
102
+ </li>
103
+
104
+
105
+
106
+
107
+
108
+ <li class="section-title">
109
+ Apps
110
+ </li>
111
+
112
+
113
+
114
+
115
+
116
+ <li
117
+ >
118
+ <a class="sidenav-item-link" href="chat.html">
119
+ <i class="mdi mdi-wechat"></i>
120
+ <span class="nav-text">Chat</span>
121
+ </a>
122
+ </li>
123
+
124
+
125
+
126
+
127
+
128
+ <li
129
+ >
130
+ <a class="sidenav-item-link" href="contacts.html">
131
+ <i class="mdi mdi-phone"></i>
132
+ <span class="nav-text">Contacts</span>
133
+ </a>
134
+ </li>
135
+
136
+
137
+
138
+
139
+
140
+ <li
141
+ >
142
+ <a class="sidenav-item-link" href="team.html">
143
+ <i class="mdi mdi-account-group"></i>
144
+ <span class="nav-text">Team</span>
145
+ </a>
146
+ </li>
147
+
148
+
149
+
150
+
151
+
152
+ <li
153
+ >
154
+ <a class="sidenav-item-link" href="calendar.html">
155
+ <i class="mdi mdi-calendar-check"></i>
156
+ <span class="nav-text">Calendar</span>
157
+ </a>
158
+ </li>
159
+
160
+
161
+
162
+
163
+
164
+ <li class="has-sub" >
165
+ <a class="sidenav-item-link" href="javascript:void(0)" data-toggle="collapse" data-target="#email"
166
+ aria-expanded="false" aria-controls="email">
167
+ <i class="mdi mdi-email"></i>
168
+ <span class="nav-text">email</span> <b class="caret"></b>
169
+ </a>
170
+ <ul class="collapse" id="email"
171
+ data-parent="#sidebar-menu">
172
+ <div class="sub-menu">
173
+
174
+
175
+
176
+ <li >
177
+ <a class="sidenav-item-link" href="email-inbox.html">
178
+ <span class="nav-text">Email Inbox</span>
179
+
180
+ </a>
181
+ </li>
182
+
183
+
184
+
185
+
186
+
187
+
188
+ <li >
189
+ <a class="sidenav-item-link" href="email-details.html">
190
+ <span class="nav-text">Email Details</span>
191
+
192
+ </a>
193
+ </li>
194
+
195
+
196
+
197
+
198
+
199
+
200
+ <li >
201
+ <a class="sidenav-item-link" href="email-compose.html">
202
+ <span class="nav-text">Email Compose</span>
203
+
204
+ </a>
205
+ </li>
206
+
207
+
208
+
209
+
210
+ </div>
211
+ </ul>
212
+ </li>
213
+
214
+
215
+
216
+
217
+
218
+ <li class="section-title">
219
+ UI Elements
220
+ </li>
221
+
222
+
223
+
224
+
225
+
226
+ <li class="has-sub active expand" >
227
+ <a class="sidenav-item-link" href="javascript:void(0)" data-toggle="collapse" data-target="#ui-elements"
228
+ aria-expanded="false" aria-controls="ui-elements">
229
+ <i class="mdi mdi-folder-outline"></i>
230
+ <span class="nav-text">UI Components</span> <b class="caret"></b>
231
+ </a>
232
+ <ul class="collapse show" id="ui-elements"
233
+ data-parent="#sidebar-menu">
234
+ <div class="sub-menu">
235
+
236
+
237
+
238
+ <li >
239
+ <a class="sidenav-item-link" href="alert.html">
240
+ <span class="nav-text">Alert</span>
241
+
242
+ </a>
243
+ </li>
244
+
245
+
246
+
247
+
248
+
249
+
250
+ <li >
251
+ <a class="sidenav-item-link" href="badge.html">
252
+ <span class="nav-text">Badge</span>
253
+
254
+ </a>
255
+ </li>
256
+
257
+
258
+
259
+
260
+
261
+
262
+ <li >
263
+ <a class="sidenav-item-link" href="breadcrumb.html">
264
+ <span class="nav-text">Breadcrumb</span>
265
+
266
+ </a>
267
+ </li>
268
+
269
+
270
+
271
+
272
+
273
+ <li class="has-sub" >
274
+ <a class="sidenav-item-link" href="javascript:void(0)" data-toggle="collapse" data-target="#buttons"
275
+ aria-expanded="false" aria-controls="buttons">
276
+ <span class="nav-text">Buttons</span> <b class="caret"></b>
277
+ </a>
278
+ <ul class="collapse" id="buttons">
279
+ <div class="sub-menu">
280
+
281
+ <li >
282
+ <a href="button-default.html">Button Default</a>
283
+ </li>
284
+
285
+ <li >
286
+ <a href="button-dropdown.html">Button Dropdown</a>
287
+ </li>
288
+
289
+ <li >
290
+ <a href="button-group.html">Button Group</a>
291
+ </li>
292
+
293
+ <li >
294
+ <a href="button-social.html">Button Social</a>
295
+ </li>
296
+
297
+ <li >
298
+ <a href="button-loading.html">Button Loading</a>
299
+ </li>
300
+
301
+ </div>
302
+ </ul>
303
+ </li>
304
+
305
+
306
+
307
+
308
+
309
+ <li >
310
+ <a class="sidenav-item-link" href="card.html">
311
+ <span class="nav-text">Card</span>
312
+
313
+ </a>
314
+ </li>
315
+
316
+
317
+
318
+
319
+
320
+
321
+ <li >
322
+ <a class="sidenav-item-link" href="carousel.html">
323
+ <span class="nav-text">Carousel</span>
324
+
325
+ </a>
326
+ </li>
327
+
328
+
329
+
330
+
331
+
332
+
333
+ <li class="active" >
334
+ <a class="sidenav-item-link" href="collapse.html">
335
+ <span class="nav-text">Collapse</span>
336
+
337
+ </a>
338
+ </li>
339
+
340
+
341
+
342
+
343
+
344
+
345
+ <li >
346
+ <a class="sidenav-item-link" href="editor.html">
347
+ <span class="nav-text">Editor</span>
348
+
349
+ </a>
350
+ </li>
351
+
352
+
353
+
354
+
355
+
356
+
357
+ <li >
358
+ <a class="sidenav-item-link" href="list-group.html">
359
+ <span class="nav-text">List Group</span>
360
+
361
+ </a>
362
+ </li>
363
+
364
+
365
+
366
+
367
+
368
+
369
+ <li >
370
+ <a class="sidenav-item-link" href="modal.html">
371
+ <span class="nav-text">Modal</span>
372
+
373
+ </a>
374
+ </li>
375
+
376
+
377
+
378
+
379
+
380
+
381
+ <li >
382
+ <a class="sidenav-item-link" href="pagination.html">
383
+ <span class="nav-text">Pagination</span>
384
+
385
+ </a>
386
+ </li>
387
+
388
+
389
+
390
+
391
+
392
+
393
+ <li >
394
+ <a class="sidenav-item-link" href="popover-tooltip.html">
395
+ <span class="nav-text">Popover & Tooltip</span>
396
+
397
+ </a>
398
+ </li>
399
+
400
+
401
+
402
+
403
+
404
+
405
+ <li >
406
+ <a class="sidenav-item-link" href="progress-bar.html">
407
+ <span class="nav-text">Progress Bar</span>
408
+
409
+ </a>
410
+ </li>
411
+
412
+
413
+
414
+
415
+
416
+
417
+ <li >
418
+ <a class="sidenav-item-link" href="spinner.html">
419
+ <span class="nav-text">Spinner</span>
420
+
421
+ </a>
422
+ </li>
423
+
424
+
425
+
426
+
427
+
428
+
429
+ <li >
430
+ <a class="sidenav-item-link" href="switches.html">
431
+ <span class="nav-text">Switches</span>
432
+
433
+ </a>
434
+ </li>
435
+
436
+
437
+
438
+
439
+
440
+ <li class="has-sub" >
441
+ <a class="sidenav-item-link" href="javascript:void(0)" data-toggle="collapse" data-target="#tables"
442
+ aria-expanded="false" aria-controls="tables">
443
+ <span class="nav-text">Tables</span> <b class="caret"></b>
444
+ </a>
445
+ <ul class="collapse" id="tables">
446
+ <div class="sub-menu">
447
+
448
+ <li >
449
+ <a href="bootstarp-tables.html">Bootstrap Tables</a>
450
+ </li>
451
+
452
+ <li >
453
+ <a href="data-tables.html">Data Tables</a>
454
+ </li>
455
+
456
+ </div>
457
+ </ul>
458
+ </li>
459
+
460
+
461
+
462
+
463
+
464
+ <li >
465
+ <a class="sidenav-item-link" href="tab.html">
466
+ <span class="nav-text">Tab</span>
467
+
468
+ </a>
469
+ </li>
470
+
471
+
472
+
473
+
474
+
475
+
476
+ <li >
477
+ <a class="sidenav-item-link" href="toaster.html">
478
+ <span class="nav-text">Toaster</span>
479
+
480
+ </a>
481
+ </li>
482
+
483
+
484
+
485
+
486
+
487
+ <li class="has-sub" >
488
+ <a class="sidenav-item-link" href="javascript:void(0)" data-toggle="collapse" data-target="#icons"
489
+ aria-expanded="false" aria-controls="icons">
490
+ <span class="nav-text">Icons</span> <b class="caret"></b>
491
+ </a>
492
+ <ul class="collapse" id="icons">
493
+ <div class="sub-menu">
494
+
495
+ <li >
496
+ <a href="material-icons.html">Material Icon</a>
497
+ </li>
498
+
499
+ <li >
500
+ <a href="flag-icons.html">Flag Icon</a>
501
+ </li>
502
+
503
+ </div>
504
+ </ul>
505
+ </li>
506
+
507
+
508
+
509
+
510
+ <li class="has-sub" >
511
+ <a class="sidenav-item-link" href="javascript:void(0)" data-toggle="collapse" data-target="#forms"
512
+ aria-expanded="false" aria-controls="forms">
513
+ <span class="nav-text">Forms</span> <b class="caret"></b>
514
+ </a>
515
+ <ul class="collapse" id="forms">
516
+ <div class="sub-menu">
517
+
518
+ <li >
519
+ <a href="basic-input.html">Basic Input</a>
520
+ </li>
521
+
522
+ <li >
523
+ <a href="input-group.html">Input Group</a>
524
+ </li>
525
+
526
+ <li >
527
+ <a href="checkbox-radio.html">Checkbox & Radio</a>
528
+ </li>
529
+
530
+ <li >
531
+ <a href="form-validation.html">Form Validation</a>
532
+ </li>
533
+
534
+ <li >
535
+ <a href="form-advance.html">Form Advance</a>
536
+ </li>
537
+
538
+ </div>
539
+ </ul>
540
+ </li>
541
+
542
+
543
+
544
+
545
+ <li class="has-sub" >
546
+ <a class="sidenav-item-link" href="javascript:void(0)" data-toggle="collapse" data-target="#maps"
547
+ aria-expanded="false" aria-controls="maps">
548
+ <span class="nav-text">Maps</span> <b class="caret"></b>
549
+ </a>
550
+ <ul class="collapse" id="maps">
551
+ <div class="sub-menu">
552
+
553
+ <li >
554
+ <a href="google-maps.html">Google Map</a>
555
+ </li>
556
+
557
+ <li >
558
+ <a href="vector-maps.html">Vector Map</a>
559
+ </li>
560
+
561
+ </div>
562
+ </ul>
563
+ </li>
564
+
565
+
566
+
567
+
568
+ <li class="has-sub" >
569
+ <a class="sidenav-item-link" href="javascript:void(0)" data-toggle="collapse" data-target="#widgets"
570
+ aria-expanded="false" aria-controls="widgets">
571
+ <span class="nav-text">Widgets</span> <b class="caret"></b>
572
+ </a>
573
+ <ul class="collapse" id="widgets">
574
+ <div class="sub-menu">
575
+
576
+ <li >
577
+ <a href="widgets-general.html">General Widget</a>
578
+ </li>
579
+
580
+ <li >
581
+ <a href="widgets-chart.html">Chart Widget</a>
582
+ </li>
583
+
584
+ </div>
585
+ </ul>
586
+ </li>
587
+
588
+
589
+
590
+ </div>
591
+ </ul>
592
+ </li>
593
+
594
+
595
+
596
+
597
+
598
+ <li class="has-sub" >
599
+ <a class="sidenav-item-link" href="javascript:void(0)" data-toggle="collapse" data-target="#charts"
600
+ aria-expanded="false" aria-controls="charts">
601
+ <i class="mdi mdi-chart-pie"></i>
602
+ <span class="nav-text">Charts</span> <b class="caret"></b>
603
+ </a>
604
+ <ul class="collapse" id="charts"
605
+ data-parent="#sidebar-menu">
606
+ <div class="sub-menu">
607
+
608
+
609
+
610
+ <li >
611
+ <a class="sidenav-item-link" href="apex-charts.html">
612
+ <span class="nav-text">Apex Charts</span>
613
+
614
+ </a>
615
+ </li>
616
+
617
+
618
+
619
+
620
+ </div>
621
+ </ul>
622
+ </li>
623
+
624
+
625
+
626
+
627
+
628
+ <li class="section-title">
629
+ Pages
630
+ </li>
631
+
632
+
633
+
634
+
635
+
636
+ <li class="has-sub" >
637
+ <a class="sidenav-item-link" href="javascript:void(0)" data-toggle="collapse" data-target="#users"
638
+ aria-expanded="false" aria-controls="users">
639
+ <i class="mdi mdi-image-filter-none"></i>
640
+ <span class="nav-text">User</span> <b class="caret"></b>
641
+ </a>
642
+ <ul class="collapse" id="users"
643
+ data-parent="#sidebar-menu">
644
+ <div class="sub-menu">
645
+
646
+
647
+
648
+ <li >
649
+ <a class="sidenav-item-link" href="user-profile.html">
650
+ <span class="nav-text">User Profile</span>
651
+
652
+ </a>
653
+ </li>
654
+
655
+
656
+
657
+
658
+
659
+
660
+ <li >
661
+ <a class="sidenav-item-link" href="user-activities.html">
662
+ <span class="nav-text">User Activities</span>
663
+
664
+ </a>
665
+ </li>
666
+
667
+
668
+
669
+
670
+
671
+
672
+ <li >
673
+ <a class="sidenav-item-link" href="user-profile-settings.html">
674
+ <span class="nav-text">User Profile Settings</span>
675
+
676
+ </a>
677
+ </li>
678
+
679
+
680
+
681
+
682
+
683
+
684
+ <li >
685
+ <a class="sidenav-item-link" href="user-account-settings.html">
686
+ <span class="nav-text">User Account Settings</span>
687
+
688
+ </a>
689
+ </li>
690
+
691
+
692
+
693
+
694
+
695
+
696
+ <li >
697
+ <a class="sidenav-item-link" href="user-planing-settings.html">
698
+ <span class="nav-text">User Planing Settings</span>
699
+
700
+ </a>
701
+ </li>
702
+
703
+
704
+
705
+
706
+
707
+
708
+ <li >
709
+ <a class="sidenav-item-link" href="user-billing.html">
710
+ <span class="nav-text">User billing</span>
711
+
712
+ </a>
713
+ </li>
714
+
715
+
716
+
717
+
718
+
719
+
720
+ <li >
721
+ <a class="sidenav-item-link" href="user-notify-settings.html">
722
+ <span class="nav-text">User Notify Settings</span>
723
+
724
+ </a>
725
+ </li>
726
+
727
+
728
+
729
+
730
+ </div>
731
+ </ul>
732
+ </li>
733
+
734
+
735
+
736
+
737
+
738
+ <li class="has-sub" >
739
+ <a class="sidenav-item-link" href="javascript:void(0)" data-toggle="collapse" data-target="#authentication"
740
+ aria-expanded="false" aria-controls="authentication">
741
+ <i class="mdi mdi-account"></i>
742
+ <span class="nav-text">Authentication</span> <b class="caret"></b>
743
+ </a>
744
+ <ul class="collapse" id="authentication"
745
+ data-parent="#sidebar-menu">
746
+ <div class="sub-menu">
747
+
748
+
749
+
750
+ <li >
751
+ <a class="sidenav-item-link" href="sign-in.html">
752
+ <span class="nav-text">Sign In</span>
753
+
754
+ </a>
755
+ </li>
756
+
757
+
758
+
759
+
760
+
761
+
762
+ <li >
763
+ <a class="sidenav-item-link" href="sign-up.html">
764
+ <span class="nav-text">Sign Up</span>
765
+
766
+ </a>
767
+ </li>
768
+
769
+
770
+
771
+
772
+
773
+
774
+ <li >
775
+ <a class="sidenav-item-link" href="reset-password.html">
776
+ <span class="nav-text">Reset Password</span>
777
+
778
+ </a>
779
+ </li>
780
+
781
+
782
+
783
+
784
+ </div>
785
+ </ul>
786
+ </li>
787
+
788
+
789
+
790
+
791
+
792
+ <li class="has-sub" >
793
+ <a class="sidenav-item-link" href="javascript:void(0)" data-toggle="collapse" data-target="#other-page"
794
+ aria-expanded="false" aria-controls="other-page">
795
+ <i class="mdi mdi-file-multiple"></i>
796
+ <span class="nav-text">Other pages</span> <b class="caret"></b>
797
+ </a>
798
+ <ul class="collapse" id="other-page"
799
+ data-parent="#sidebar-menu">
800
+ <div class="sub-menu">
801
+
802
+
803
+
804
+ <li >
805
+ <a class="sidenav-item-link" href="invoice.html">
806
+ <span class="nav-text">Invoice</span>
807
+
808
+ </a>
809
+ </li>
810
+
811
+
812
+
813
+
814
+
815
+
816
+ <li >
817
+ <a class="sidenav-item-link" href="404.html">
818
+ <span class="nav-text">404 page</span>
819
+
820
+ </a>
821
+ </li>
822
+
823
+
824
+
825
+
826
+
827
+
828
+ <li >
829
+ <a class="sidenav-item-link" href="page-comingsoon.html">
830
+ <span class="nav-text">Coming Soon</span>
831
+
832
+ </a>
833
+ </li>
834
+
835
+
836
+
837
+
838
+
839
+
840
+ <li >
841
+ <a class="sidenav-item-link" href="page-maintenance.html">
842
+ <span class="nav-text">Maintenance</span>
843
+
844
+ </a>
845
+ </li>
846
+
847
+
848
+
849
+
850
+ </div>
851
+ </ul>
852
+ </li>
853
+
854
+
855
+
856
+
857
+
858
+ <li class="section-title">
859
+ Documentation
860
+ </li>
861
+
862
+
863
+
864
+
865
+
866
+ <li
867
+ >
868
+ <a class="sidenav-item-link" href="getting-started.html">
869
+ <i class="mdi mdi-airplane"></i>
870
+ <span class="nav-text">Getting Started</span>
871
+ </a>
872
+ </li>
873
+
874
+
875
+
876
+
877
+
878
+ <li class="has-sub" >
879
+ <a class="sidenav-item-link" href="javascript:void(0)" data-toggle="collapse" data-target="#customization"
880
+ aria-expanded="false" aria-controls="customization">
881
+ <i class="mdi mdi-square-edit-outline"></i>
882
+ <span class="nav-text">Customization</span> <b class="caret"></b>
883
+ </a>
884
+ <ul class="collapse" id="customization"
885
+ data-parent="#sidebar-menu">
886
+ <div class="sub-menu">
887
+
888
+
889
+
890
+ <li >
891
+ <a class="sidenav-item-link" href="navbar-customization.html">
892
+ <span class="nav-text">Navbar</span>
893
+
894
+ </a>
895
+ </li>
896
+
897
+
898
+
899
+
900
+
901
+
902
+ <li >
903
+ <a class="sidenav-item-link" href="sidebar-customization.html">
904
+ <span class="nav-text">Sidebar</span>
905
+
906
+ </a>
907
+ </li>
908
+
909
+
910
+
911
+
912
+
913
+
914
+ <li >
915
+ <a class="sidenav-item-link" href="styling.html">
916
+ <span class="nav-text">Styling</span>
917
+
918
+ </a>
919
+ </li>
920
+
921
+
922
+
923
+
924
+ </div>
925
+ </ul>
926
+ </li>
927
+
928
+
929
+
930
+ </ul>
931
+
932
+ </div>
933
+
934
+ <div class="sidebar-footer">
935
+ <div class="sidebar-footer-content">
936
+ <ul class="d-flex">
937
+ <li>
938
+ <a href="user-account-settings.html" data-toggle="tooltip" title="Profile settings"><i class="mdi mdi-settings"></i></a></li>
939
+ <li>
940
+ <a href="#" data-toggle="tooltip" title="No chat messages"><i class="mdi mdi-chat-processing"></i></a>
941
+ </li>
942
+ </ul>
943
+ </div>
944
+ </div>
945
+ </div>
946
+ </aside>
947
+
948
+
949
+
950
+ <!-- ====================================
951
+ ——— PAGE WRAPPER
952
+ ===================================== -->
953
+ <div class="page-wrapper">
954
+
955
+ <!-- Header -->
956
+ <header class="main-header" id="header">
957
+ <nav class="navbar navbar-expand-lg navbar-light" id="navbar">
958
+ <!-- Sidebar toggle button -->
959
+ <button id="sidebar-toggler" class="sidebar-toggle">
960
+ <span class="sr-only">Toggle navigation</span>
961
+ </button>
962
+
963
+ <span class="page-title">collapse</span>
964
+
965
+ <div class="navbar-right ">
966
+
967
+ <!-- search form -->
968
+ <div class="search-form">
969
+ <form action="index.html" method="get">
970
+ <div class="input-group input-group-sm" id="input-group-search">
971
+ <input type="text" autocomplete="off" name="query" id="search-input" class="form-control" placeholder="Search..." />
972
+ <div class="input-group-append">
973
+ <button class="btn" type="button">/</button>
974
+ </div>
975
+ </div>
976
+ </form>
977
+ <ul class="dropdown-menu dropdown-menu-search">
978
+
979
+ <li class="nav-item">
980
+ <a class="nav-link" href="index.html">Morbi leo risus</a>
981
+ </li>
982
+ <li class="nav-item">
983
+ <a class="nav-link" href="index.html">Dapibus ac facilisis in</a>
984
+ </li>
985
+ <li class="nav-item">
986
+ <a class="nav-link" href="index.html">Porta ac consectetur ac</a>
987
+ </li>
988
+ <li class="nav-item">
989
+ <a class="nav-link" href="index.html">Vestibulum at eros</a>
990
+ </li>
991
+
992
+ </ul>
993
+
994
+ </div>
995
+
996
+ <ul class="nav navbar-nav">
997
+ <!-- Offcanvas -->
998
+ <li class="custom-dropdown">
999
+ <a class="offcanvas-toggler active custom-dropdown-toggler" data-offcanvas="contact-off" href="javascript:" >
1000
+ <i class="mdi mdi-contacts icon"></i>
1001
+ </a>
1002
+ </li>
1003
+ <li class="custom-dropdown">
1004
+ <button class="notify-toggler custom-dropdown-toggler">
1005
+ <i class="mdi mdi-bell-outline icon"></i>
1006
+ <span class="badge badge-xs rounded-circle">21</span>
1007
+ </button>
1008
+ <div class="dropdown-notify">
1009
+
1010
+ <header>
1011
+ <div class="nav nav-underline" id="nav-tab" role="tablist">
1012
+ <a class="nav-item nav-link active" id="all-tabs" data-toggle="tab" href="#all" role="tab" aria-controls="nav-home"
1013
+ aria-selected="true">All (5)</a>
1014
+ <a class="nav-item nav-link" id="message-tab" data-toggle="tab" href="#message" role="tab" aria-controls="nav-profile"
1015
+ aria-selected="false">Msgs (4)</a>
1016
+ <a class="nav-item nav-link" id="other-tab" data-toggle="tab" href="#other" role="tab" aria-controls="nav-contact"
1017
+ aria-selected="false">Others (3)</a>
1018
+ </div>
1019
+ </header>
1020
+
1021
+ <div class="" data-simplebar style="height: 325px;">
1022
+ <div class="tab-content" id="myTabContent">
1023
+
1024
+ <div class="tab-pane fade show active" id="all" role="tabpanel" aria-labelledby="all-tabs">
1025
+
1026
+ <div class="media media-sm bg-warning-10 p-4 mb-0">
1027
+ <div class="media-sm-wrapper">
1028
+ <a href="user-profile.html">
1029
+ <img src="images/user/user-sm-02.jpg" alt="User Image">
1030
+ </a>
1031
+ </div>
1032
+ <div class="media-body">
1033
+ <a href="user-profile.html">
1034
+ <span class="title mb-0">John Doe</span>
1035
+ <span class="discribe">Extremity sweetness difficult behaviour he of. On disposal of as landlord horrible. Afraid at highly months do things on at.</span>
1036
+ <span class="time">
1037
+ <time>Just now</time>...
1038
+ </span>
1039
+ </a>
1040
+ </div>
1041
+ </div>
1042
+
1043
+ <div class="media media-sm p-4 bg-light mb-0">
1044
+ <div class="media-sm-wrapper bg-primary">
1045
+ <a href="user-profile.html">
1046
+ <i class="mdi mdi-calendar-check-outline"></i>
1047
+ </a>
1048
+ </div>
1049
+ <div class="media-body">
1050
+ <a href="user-profile.html">
1051
+ <span class="title mb-0">New event added</span>
1052
+ <span class="discribe">1/3/2014 (1pm - 2pm)</span>
1053
+ <span class="time">
1054
+ <time>10 min ago...</time>...
1055
+ </span>
1056
+ </a>
1057
+ </div>
1058
+ </div>
1059
+
1060
+ <div class="media media-sm p-4 mb-0">
1061
+ <div class="media-sm-wrapper">
1062
+ <a href="user-profile.html">
1063
+ <img src="images/user/user-sm-03.jpg" alt="User Image">
1064
+ </a>
1065
+ </div>
1066
+ <div class="media-body">
1067
+ <a href="user-profile.html">
1068
+ <span class="title mb-0">Sagge Hudson</span>
1069
+ <span class="discribe">On disposal of as landlord Afraid at highly months do things on at.</span>
1070
+ <span class="time">
1071
+ <time>1 hrs ago</time>...
1072
+ </span>
1073
+ </a>
1074
+ </div>
1075
+ </div>
1076
+
1077
+ <div class="media media-sm p-4 mb-0">
1078
+ <div class="media-sm-wrapper bg-info-dark">
1079
+ <a href="user-profile.html">
1080
+ <i class="mdi mdi-account-multiple-check"></i>
1081
+ </a>
1082
+ </div>
1083
+ <div class="media-body">
1084
+ <a href="user-profile.html">
1085
+ <span class="title mb-0">Add request</span>
1086
+ <span class="discribe">Add Dany Jones as your contact.</span>
1087
+ <div class="buttons">
1088
+ <a href="#" class="btn btn-sm btn-success shadow-none text-white">accept</a>
1089
+ <a href="#" class="btn btn-sm shadow-none">delete</a>
1090
+ </div>
1091
+ <span class="time">
1092
+ <time>6 hrs ago</time>...
1093
+ </span>
1094
+ </a>
1095
+ </div>
1096
+ </div>
1097
+
1098
+ <div class="media media-sm p-4 mb-0">
1099
+ <div class="media-sm-wrapper bg-info">
1100
+ <a href="user-profile.html">
1101
+ <i class="mdi mdi-playlist-check"></i>
1102
+ </a>
1103
+ </div>
1104
+ <div class="media-body">
1105
+ <a href="user-profile.html">
1106
+ <span class="title mb-0">Task complete</span>
1107
+ <span class="discribe">Afraid at highly months do things on at.</span>
1108
+ <span class="time">
1109
+ <time>1 hrs ago</time>...
1110
+ </span>
1111
+ </a>
1112
+ </div>
1113
+ </div>
1114
+
1115
+ </div>
1116
+
1117
+ <div class="tab-pane fade" id="message" role="tabpanel" aria-labelledby="message-tab">
1118
+
1119
+ <div class="media media-sm p-4 mb-0">
1120
+ <div class="media-sm-wrapper">
1121
+ <a href="user-profile.html">
1122
+ <img src="images/user/user-sm-01.jpg" alt="User Image">
1123
+ </a>
1124
+ </div>
1125
+ <div class="media-body">
1126
+ <a href="user-profile.html">
1127
+ <span class="title mb-0">Selena Wagner</span>
1128
+ <span class="discribe">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</span>
1129
+ <span class="time">
1130
+ <time>15 min ago</time>...
1131
+ </span>
1132
+ </a>
1133
+ </div>
1134
+ </div>
1135
+
1136
+ <div class="media media-sm p-4 mb-0">
1137
+ <div class="media-sm-wrapper">
1138
+ <a href="user-profile.html">
1139
+ <img src="images/user/user-sm-03.jpg" alt="User Image">
1140
+ </a>
1141
+ </div>
1142
+ <div class="media-body">
1143
+ <a href="user-profile.html">
1144
+ <span class="title mb-0">Sagge Hudson</span>
1145
+ <span class="discribe">On disposal of as landlord Afraid at highly months do things on at.</span>
1146
+ <span class="time">
1147
+ <time>1 hrs ago</time>...
1148
+ </span>
1149
+ </a>
1150
+ </div>
1151
+ </div>
1152
+
1153
+ <div class="media media-sm bg-warning-10 p-4 mb-0">
1154
+ <div class="media-sm-wrapper">
1155
+ <a href="user-profile.html">
1156
+ <img src="images/user/user-sm-02.jpg" alt="User Image">
1157
+ </a>
1158
+ </div>
1159
+ <div class="media-body">
1160
+ <a href="user-profile.html">
1161
+ <span class="title mb-0">John Doe</span>
1162
+ <span class="discribe">Extremity sweetness difficult behaviour he of. On disposal of as landlord horrible. Afraid
1163
+ at highly months do things on at.</span>
1164
+ <span class="time">
1165
+ <time>Just now</time>...
1166
+ </span>
1167
+ </a>
1168
+ </div>
1169
+ </div>
1170
+
1171
+ <div class="media media-sm p-4 mb-0">
1172
+ <div class="media-sm-wrapper">
1173
+ <a href="user-profile.html">
1174
+ <img src="images/user/user-sm-04.jpg" alt="User Image">
1175
+ </a>
1176
+ </div>
1177
+ <div class="media-body">
1178
+ <a href="user-profile.html">
1179
+ <span class="title mb-0">Albrecht Straub</span>
1180
+ <span class="discribe"> Beatae quia natus assumenda laboriosam, nisi perferendis aliquid consectetur expedita non tenetur.</span>
1181
+ <span class="time">
1182
+ <time>Just now</time>...
1183
+ </span>
1184
+ </a>
1185
+ </div>
1186
+ </div>
1187
+
1188
+ </div>
1189
+ <div class="tab-pane fade" id="other" role="tabpanel" aria-labelledby="contact-tab">
1190
+
1191
+ <div class="media media-sm p-4 bg-light mb-0">
1192
+ <div class="media-sm-wrapper bg-primary">
1193
+ <a href="user-profile.html">
1194
+ <i class="mdi mdi-calendar-check-outline"></i>
1195
+ </a>
1196
+ </div>
1197
+ <div class="media-body">
1198
+ <a href="user-profile.html">
1199
+ <span class="title mb-0">New event added</span>
1200
+ <span class="discribe">1/3/2014 (1pm - 2pm)</span>
1201
+ <span class="time">
1202
+ <time>10 min ago...</time>...
1203
+ </span>
1204
+ </a>
1205
+ </div>
1206
+ </div>
1207
+
1208
+ <div class="media media-sm p-4 mb-0">
1209
+ <div class="media-sm-wrapper bg-info-dark">
1210
+ <a href="user-profile.html">
1211
+ <i class="mdi mdi-account-multiple-check"></i>
1212
+ </a>
1213
+ </div>
1214
+ <div class="media-body">
1215
+ <a href="user-profile.html">
1216
+ <span class="title mb-0">Add request</span>
1217
+ <span class="discribe">Add Dany Jones as your contact.</span>
1218
+ <div class="buttons">
1219
+ <a href="#" class="btn btn-sm btn-success shadow-none text-white">accept</a>
1220
+ <a href="#" class="btn btn-sm shadow-none">delete</a>
1221
+ </div>
1222
+ <span class="time">
1223
+ <time>6 hrs ago</time>...
1224
+ </span>
1225
+ </a>
1226
+ </div>
1227
+ </div>
1228
+
1229
+ <div class="media media-sm p-4 mb-0">
1230
+ <div class="media-sm-wrapper bg-info">
1231
+ <a href="user-profile.html">
1232
+ <i class="mdi mdi-playlist-check"></i>
1233
+ </a>
1234
+ </div>
1235
+ <div class="media-body">
1236
+ <a href="user-profile.html">
1237
+ <span class="title mb-0">Task complete</span>
1238
+ <span class="discribe">Afraid at highly months do things on at.</span>
1239
+ <span class="time">
1240
+ <time>1 hrs ago</time>...
1241
+ </span>
1242
+ </a>
1243
+ </div>
1244
+ </div>
1245
+
1246
+ </div>
1247
+ </div>
1248
+ </div>
1249
+
1250
+ <footer class="border-top dropdown-notify-footer">
1251
+ <div class="d-flex justify-content-between align-items-center py-2 px-4">
1252
+ <span>Last updated 3 min ago</span>
1253
+ <a id="refress-button" href="javascript:" class="btn mdi mdi-cached btn-refress"></a>
1254
+ </div>
1255
+ </footer>
1256
+ </div>
1257
+ </li>
1258
+ <!-- User Account -->
1259
+ <li class="dropdown user-menu">
1260
+ <button class="dropdown-toggle nav-link" data-toggle="dropdown">
1261
+ <img src="images/user/user-xs-01.jpg" class="user-image rounded-circle" alt="User Image" />
1262
+ <span class="d-none d-lg-inline-block">John Doe</span>
1263
+ </button>
1264
+ <ul class="dropdown-menu dropdown-menu-right">
1265
+ <li>
1266
+ <a class="dropdown-link-item" href="user-profile.html">
1267
+ <i class="mdi mdi-account-outline"></i>
1268
+ <span class="nav-text">My Profile</span>
1269
+ </a>
1270
+ </li>
1271
+ <li>
1272
+ <a class="dropdown-link-item" href="email-inbox.html">
1273
+ <i class="mdi mdi-email-outline"></i>
1274
+ <span class="nav-text">Message</span>
1275
+ <span class="badge badge-pill badge-primary">24</span>
1276
+ </a>
1277
+ </li>
1278
+ <li>
1279
+ <a class="dropdown-link-item" href="user-activities.html">
1280
+ <i class="mdi mdi-diamond-stone"></i>
1281
+ <span class="nav-text">Activitise</span></a>
1282
+ </li>
1283
+ <li>
1284
+ <a class="dropdown-link-item" href="user-account-settings.html">
1285
+ <i class="mdi mdi-settings"></i>
1286
+ <span class="nav-text">Account Setting</span>
1287
+ </a>
1288
+ </li>
1289
+
1290
+ <li class="dropdown-footer">
1291
+ <a class="dropdown-link-item" href="sign-in.html"> <i class="mdi mdi-logout"></i> Log Out </a>
1292
+ </li>
1293
+ </ul>
1294
+ </li>
1295
+ </ul>
1296
+ </div>
1297
+ </nav>
1298
+
1299
+
1300
+ </header>
1301
+
1302
+ <!-- ====================================
1303
+ ——— CONTENT WRAPPER
1304
+ ===================================== -->
1305
+ <div class="content-wrapper">
1306
+ <div class="content"><!-- For Components documentaion -->
1307
+ <div class="card card-default">
1308
+ <div class="px-6 py-4">
1309
+ <p>Mono provides a variety of <span class="text-secondary text-capitalize"> Bootstrap collapse </span> components with a
1310
+ little customization that suits its design standards. For more information, please see the official <a class="font-weight-bold" href="https://getbootstrap.com/docs/4.3/components/collapse/" target="_blank"> Bootstrap documentation.</a></p>
1311
+ </div>
1312
+ </div>
1313
+
1314
+ <div class="row">
1315
+
1316
+ <div class="col-xl-6">
1317
+ <!-- Collapse Default -->
1318
+ <div class="card card-default">
1319
+ <div class="card-header">
1320
+ <h2>collapse Default</h2>
1321
+
1322
+ <a class="btn mdi mdi-code-tags" data-toggle="collapse" href="#collapse-default" role="button"
1323
+ aria-expanded="false" aria-controls="collapse-default"> </a>
1324
+
1325
+
1326
+ </div>
1327
+ <div class="card-body">
1328
+ <div class="collapse" id="collapse-default">
1329
+ <pre class="language-html mb-4">
1330
+ <code >
1331
+ &lt;div class="accordion" id="accordionTwo">
1332
+ &lt;div class="card">
1333
+ &lt;div class="card-header" id="headingBorderOne">
1334
+ &lt;h2 class="mb-0">
1335
+ &lt;button class="btn btn-link" type="button" data-toggle="collapse" data-target="#collapseBorderOne"
1336
+ aria-expanded="true" aria-controls="collapseBorderOne">
1337
+ Collapsible Group Item #1
1338
+ &lt;/button>
1339
+ &lt;/h2>
1340
+ &lt;/div>
1341
+ &lt;div id="collapseBorderOne" class="collapse show" aria-labelledby="headingBorderOne" data-parent="#accordionTwo">
1342
+ &lt;div class="card-body">
1343
+ Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf
1344
+ moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3
1345
+ wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil
1346
+ anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur
1347
+ butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you
1348
+ probably haven't heard of them accusamus labore sustainable VHS.
1349
+ &lt;/div>
1350
+ &lt;/div>
1351
+ &lt;/div>
1352
+ &lt;div class="card">
1353
+ &lt;div class="card-header" id="headingBorderTwo">
1354
+ &lt;h2 class="mb-0">
1355
+ &lt;button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#collapseBorderTwo"
1356
+ aria-expanded="false" aria-controls="collapseBorderTwo">
1357
+ Collapsible Group Item #2
1358
+ &lt;/button>
1359
+ &lt;/h2>
1360
+ &lt;/div>
1361
+ &lt;div id="collapseBorderTwo" class="collapse" aria-labelledby="headingBorderTwo" data-parent="#accordionTwo">
1362
+ &lt;div class="card-body">
1363
+ Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf
1364
+ moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3
1365
+ wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil
1366
+ anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur
1367
+ butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you
1368
+ probably haven't heard of them accusamus labore sustainable VHS.
1369
+ &lt;/div>
1370
+ &lt;/div>
1371
+ &lt;/div>
1372
+ &lt;div class="card">
1373
+ &lt;div class="card-header" id="headingBorderThree">
1374
+ &lt;h2 class="mb-0">
1375
+ &lt;button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#collapseBorderThree"
1376
+ aria-expanded="false" aria-controls="collapseBorderThree">
1377
+ Collapsible Group Item #3
1378
+ &lt;/button>
1379
+ &lt;/h2>
1380
+ &lt;/div>
1381
+ &lt;div id="collapseBorderThree" class="collapse" aria-labelledby="headingBorderThree" data-parent="#accordionTwo">
1382
+ &lt;div class="card-body">
1383
+ Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf
1384
+ moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3
1385
+ wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil
1386
+ anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur
1387
+ butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you
1388
+ probably haven't heard of them accusamus labore sustainable VHS.
1389
+ &lt;/div>
1390
+ &lt;/div>
1391
+ &lt;/div>
1392
+ &lt;/div>
1393
+ </code>
1394
+ </pre>
1395
+ </div>
1396
+ <div class="accordion" id="accordionTwo">
1397
+ <div class="card">
1398
+ <div class="card-header" id="headingBorderOne">
1399
+ <h2 class="mb-0">
1400
+ <button class="btn btn-link" type="button" data-toggle="collapse" data-target="#collapseBorderOne"
1401
+ aria-expanded="true" aria-controls="collapseBorderOne">
1402
+ Collapsible Group Item #1
1403
+ </button>
1404
+ </h2>
1405
+ </div>
1406
+
1407
+ <div id="collapseBorderOne" class="collapse show" aria-labelledby="headingBorderOne"
1408
+ data-parent="#accordionTwo">
1409
+ <div class="card-body">
1410
+ Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf
1411
+ moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3
1412
+ wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil
1413
+ anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur
1414
+ butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you
1415
+ probably haven't heard of them accusamus labore sustainable VHS.
1416
+ </div>
1417
+ </div>
1418
+ </div>
1419
+ <div class="card">
1420
+ <div class="card-header" id="headingBorderTwo">
1421
+ <h2 class="mb-0">
1422
+ <button class="btn btn-link collapsed" type="button" data-toggle="collapse"
1423
+ data-target="#collapseBorderTwo" aria-expanded="false" aria-controls="collapseBorderTwo">
1424
+ Collapsible Group Item #2
1425
+ </button>
1426
+ </h2>
1427
+ </div>
1428
+ <div id="collapseBorderTwo" class="collapse" aria-labelledby="headingBorderTwo" data-parent="#accordionTwo">
1429
+ <div class="card-body">
1430
+ Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf
1431
+ moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3
1432
+ wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil
1433
+ anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur
1434
+ butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you
1435
+ probably haven't heard of them accusamus labore sustainable VHS.
1436
+ </div>
1437
+ </div>
1438
+ </div>
1439
+ <div class="card">
1440
+ <div class="card-header" id="headingBorderThree">
1441
+ <h2 class="mb-0">
1442
+ <button class="btn btn-link collapsed" type="button" data-toggle="collapse"
1443
+ data-target="#collapseBorderThree" aria-expanded="false" aria-controls="collapseBorderThree">
1444
+ Collapsible Group Item #3
1445
+ </button>
1446
+ </h2>
1447
+ </div>
1448
+ <div id="collapseBorderThree" class="collapse" aria-labelledby="headingBorderThree"
1449
+ data-parent="#accordionTwo">
1450
+ <div class="card-body">
1451
+ Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf
1452
+ moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3
1453
+ wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil
1454
+ anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur
1455
+ butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you
1456
+ probably haven't heard of them accusamus labore sustainable VHS.
1457
+ </div>
1458
+ </div>
1459
+ </div>
1460
+ </div>
1461
+
1462
+ </div>
1463
+ </div>
1464
+
1465
+ <!-- Collapse Shadow -->
1466
+ <div class="card card-default">
1467
+ <div class="card-header">
1468
+ <h2>Collapse Shadow</h2>
1469
+
1470
+ <a class="btn mdi mdi-code-tags" data-toggle="collapse" href="#collapse-shadow" role="button"
1471
+ aria-expanded="false" aria-controls="collapse-shadow"> </a>
1472
+
1473
+
1474
+ </div>
1475
+ <div class="card-body">
1476
+ <div class="collapse" id="collapse-shadow">
1477
+ <pre class="language-html mb-4">
1478
+ <code >
1479
+ &lt;div class="accordion accordion-shadow" id="accordionShadow">
1480
+ &lt;div class="card">
1481
+ &lt;div class="card-header" id="headingShadowOne">
1482
+ &lt;h2 class="mb-0">
1483
+ &lt;button class="btn btn-link" type="button" data-toggle="collapse" data-target="#collapseShadowOne"
1484
+ aria-expanded="true" aria-controls="collapseShadowOne">
1485
+ Collapsible Group Item #1
1486
+ &lt;/button>
1487
+ &lt;/h2>
1488
+ &lt;/div>
1489
+ &lt;div id="collapseShadowOne" class="collapse show" aria-labelledby="headingShadowOne" data-parent="#accordionShadow">
1490
+ &lt;div class="card-body">
1491
+ Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf
1492
+ moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3
1493
+ wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil
1494
+ anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur
1495
+ butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you
1496
+ probably haven't heard of them accusamus labore sustainable VHS.
1497
+ &lt;/div>
1498
+ &lt;/div>
1499
+ &lt;/div>
1500
+ &lt;div class="card">
1501
+ &lt;div class="card-header" id="headingShadowTwo">
1502
+ &lt;h2 class="mb-0">
1503
+ &lt;button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#collapseShadowTwo"
1504
+ aria-expanded="false" aria-controls="collapseShadowTwo">
1505
+ Collapsible Group Item #2
1506
+ &lt;/button>
1507
+ &lt;/h2>
1508
+ &lt;/div>
1509
+ &lt;div id="collapseShadowTwo" class="collapse" aria-labelledby="headingShadowTwo" data-parent="#accordionShadow">
1510
+ &lt;div class="card-body">
1511
+ Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf
1512
+ moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3
1513
+ wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil
1514
+ anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur
1515
+ butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you
1516
+ probably haven't heard of them accusamus labore sustainable VHS.
1517
+ &lt;/div>
1518
+ &lt;/div>
1519
+ &lt;/div>
1520
+ &lt;div class="card">
1521
+ &lt;div class="card-header" id="headingShadowThree">
1522
+ &lt;h2 class="mb-0">
1523
+ &lt;button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#collapseShadowThree"
1524
+ aria-expanded="false" aria-controls="collapseShadowThree">
1525
+ Collapsible Group Item #3
1526
+ &lt;/button>
1527
+ &lt;/h2>
1528
+ &lt;/div>
1529
+ &lt;div id="collapseShadowThree" class="collapse" aria-labelledby="headingShadowThree" data-parent="#accordionShadow">
1530
+ &lt;div class="card-body">
1531
+ Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf
1532
+ moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3
1533
+ wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil
1534
+ anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur
1535
+ butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you
1536
+ probably haven't heard of them accusamus labore sustainable VHS.
1537
+ &lt;/div>
1538
+ &lt;/div>
1539
+ &lt;/div>
1540
+ &lt;/div>
1541
+ </code>
1542
+ </pre>
1543
+ </div>
1544
+ <div class="accordion accordion-shadow" id="accordionShadow">
1545
+ <div class="card">
1546
+ <div class="card-header" id="headingShadowOne">
1547
+ <h2 class="mb-0">
1548
+ <button class="btn btn-link" type="button" data-toggle="collapse" data-target="#collapseShadowOne"
1549
+ aria-expanded="true" aria-controls="collapseShadowOne">
1550
+ Collapsible Group Item #1
1551
+ </button>
1552
+ </h2>
1553
+ </div>
1554
+
1555
+ <div id="collapseShadowOne" class="collapse show" aria-labelledby="headingShadowOne"
1556
+ data-parent="#accordionShadow">
1557
+ <div class="card-body">
1558
+ Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf
1559
+ moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch
1560
+ 3
1561
+ wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et.
1562
+ Nihil
1563
+ anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan
1564
+ excepteur
1565
+ butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you
1566
+ probably haven't heard of them accusamus labore sustainable VHS.
1567
+ </div>
1568
+ </div>
1569
+ </div>
1570
+ <div class="card">
1571
+ <div class="card-header" id="headingShadowTwo">
1572
+ <h2 class="mb-0">
1573
+ <button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#collapseShadowTwo"
1574
+ aria-expanded="false" aria-controls="collapseShadowTwo">
1575
+ Collapsible Group Item #2
1576
+ </button>
1577
+ </h2>
1578
+ </div>
1579
+ <div id="collapseShadowTwo" class="collapse" aria-labelledby="headingShadowTwo" data-parent="#accordionShadow">
1580
+ <div class="card-body">
1581
+ Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf
1582
+ moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch
1583
+ 3
1584
+ wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et.
1585
+ Nihil
1586
+ anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan
1587
+ excepteur
1588
+ butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you
1589
+ probably haven't heard of them accusamus labore sustainable VHS.
1590
+ </div>
1591
+ </div>
1592
+ </div>
1593
+ <div class="card">
1594
+ <div class="card-header" id="headingShadowThree">
1595
+ <h2 class="mb-0">
1596
+ <button class="btn btn-link collapsed" type="button" data-toggle="collapse"
1597
+ data-target="#collapseShadowThree" aria-expanded="false" aria-controls="collapseShadowThree">
1598
+ Collapsible Group Item #3
1599
+ </button>
1600
+ </h2>
1601
+ </div>
1602
+ <div id="collapseShadowThree" class="collapse" aria-labelledby="headingShadowThree"
1603
+ data-parent="#accordionShadow">
1604
+ <div class="card-body">
1605
+ Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf
1606
+ moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch
1607
+ 3
1608
+ wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et.
1609
+ Nihil
1610
+ anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan
1611
+ excepteur
1612
+ butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you
1613
+ probably haven't heard of them accusamus labore sustainable VHS.
1614
+ </div>
1615
+ </div>
1616
+ </div>
1617
+ </div>
1618
+
1619
+ </div>
1620
+ </div>
1621
+
1622
+
1623
+ </div>
1624
+
1625
+ <div class="col-xl-6">
1626
+ <!-- Collapse Borderless -->
1627
+ <div class="card card-default">
1628
+ <div class="card-header">
1629
+ <h2>Collapse Borderless</h2>
1630
+
1631
+ <a class="btn mdi mdi-code-tags" data-toggle="collapse" href="#collapse-buttons-1" role="button"
1632
+ aria-expanded="false" aria-controls="collapse-buttons-1"> </a>
1633
+
1634
+
1635
+ </div>
1636
+ <div class="card-body">
1637
+ <div class="collapse" id="collapse-buttons-1">
1638
+ <pre class="language-html mb-4">
1639
+ <code >
1640
+ &lt;div class="accordion" id="accordionOne">
1641
+ &lt;div class="card border-0">
1642
+ &lt;div class="card-header" id="headingOne">
1643
+ &lt;h2 class="mb-0">
1644
+ &lt;button class="btn btn-link" type="button" data-toggle="collapse" data-target="#collapseOne"
1645
+ aria-expanded="true" aria-controls="collapseOne">
1646
+ Collapsible Group Item #1
1647
+ &lt;/button>
1648
+ &lt;/h2>
1649
+ &lt;/div>
1650
+ &lt;div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordionOne">
1651
+ &lt;div class="card-body">
1652
+ Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon
1653
+ officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf
1654
+ moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim
1655
+ keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur
1656
+ butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably
1657
+ haven't heard of them accusamus labore sustainable VHS.
1658
+ &lt;/div>
1659
+ &lt;/div>
1660
+ &lt;/div>
1661
+ &lt;div class="card border-0">
1662
+ &lt;div class="card-header" id="headingTwo">
1663
+ &lt;h2 class="mb-0">
1664
+ &lt;button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#collapseTwo"
1665
+ aria-expanded="false" aria-controls="collapseTwo">
1666
+ Collapsible Group Item #2
1667
+ &lt;/button>
1668
+ &lt;/h2>
1669
+ &lt;/div>
1670
+ &lt;div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordionOne">
1671
+ &lt;div class="card-body">
1672
+ Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon
1673
+ officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf
1674
+ moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim
1675
+ keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur
1676
+ butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably
1677
+ haven't heard of them accusamus labore sustainable VHS.
1678
+ &lt;/div>
1679
+ &lt;/div>
1680
+ &lt;/div>
1681
+ &lt;div class="card border-0">
1682
+ &lt;div class="card-header" id="headingThree">
1683
+ &lt;h2 class="mb-0">
1684
+ &lt;button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#collapseThree"
1685
+ aria-expanded="false" aria-controls="collapseThree">
1686
+ Collapsible Group Item #3
1687
+ &lt;/button>
1688
+ &lt;/h2>
1689
+ &lt;/div>
1690
+ &lt;div id="collapseThree" class="collapse" aria-labelledby="headingThree" data-parent="#accordionOne">
1691
+ &lt;div class="card-body">
1692
+ Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon
1693
+ officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf
1694
+ moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim
1695
+ keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur
1696
+ butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably
1697
+ haven't heard of them accusamus labore sustainable VHS.
1698
+ &lt;/div>
1699
+ &lt;/div>
1700
+ &lt;/div>
1701
+ &lt;/div>
1702
+ </code>
1703
+ </pre>
1704
+ </div>
1705
+ <div class="accordion" id="accordionOne">
1706
+ <div class="card border-0">
1707
+ <div class="card-header" id="headingOne">
1708
+ <h2 class="mb-0">
1709
+ <button class="btn btn-link" type="button" data-toggle="collapse" data-target="#collapseOne"
1710
+ aria-expanded="true" aria-controls="collapseOne">
1711
+ Collapsible Group Item #1
1712
+ </button>
1713
+ </h2>
1714
+ </div>
1715
+
1716
+ <div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordionOne">
1717
+ <div class="card-body">
1718
+ Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon
1719
+ officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3
1720
+ wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et.
1721
+ Nihil
1722
+ anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan
1723
+ excepteur
1724
+ butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you
1725
+ probably haven't heard of them accusamus labore sustainable VHS.
1726
+ </div>
1727
+ </div>
1728
+ </div>
1729
+ <div class="card border-0">
1730
+ <div class="card-header" id="headingTwo">
1731
+ <h2 class="mb-0">
1732
+ <button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#collapseTwo"
1733
+ aria-expanded="false" aria-controls="collapseTwo">
1734
+ Collapsible Group Item #2
1735
+ </button>
1736
+ </h2>
1737
+ </div>
1738
+ <div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordionOne">
1739
+ <div class="card-body">
1740
+ Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon
1741
+ officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3
1742
+ wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et.
1743
+ Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan
1744
+ excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you
1745
+ probably haven't heard of them accusamus labore sustainable VHS.
1746
+ </div>
1747
+ </div>
1748
+ </div>
1749
+ <div class="card border-0">
1750
+ <div class="card-header" id="headingThree">
1751
+ <h2 class="mb-0">
1752
+ <button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#collapseThree"
1753
+ aria-expanded="false" aria-controls="collapseThree">
1754
+ Collapsible Group Item #3
1755
+ </button>
1756
+ </h2>
1757
+ </div>
1758
+ <div id="collapseThree" class="collapse" aria-labelledby="headingThree" data-parent="#accordionOne">
1759
+ <div class="card-body">
1760
+ Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon
1761
+ officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3
1762
+ wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et.
1763
+ Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan
1764
+ excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you
1765
+ probably haven't heard of them accusamus labore sustainable VHS.
1766
+ </div>
1767
+ </div>
1768
+ </div>
1769
+ </div>
1770
+
1771
+ </div>
1772
+ </div>
1773
+
1774
+ <!-- Collapse Border Bottom -->
1775
+ <div class="card card-default">
1776
+ <div class="card-header">
1777
+ <h2>Collapse Border Bottom</h2>
1778
+
1779
+ <a class="btn mdi mdi-code-tags" data-toggle="collapse" href="#collapse-border-bottom" role="button"
1780
+ aria-expanded="false" aria-controls="collapse-border-bottom"> </a>
1781
+
1782
+
1783
+ </div>
1784
+ <div class="card-body">
1785
+ <div class="collapse" id="collapse-border-bottom">
1786
+ <pre class="language-html mb-4">
1787
+ <code >
1788
+ &lt;div class="accordion accordion-header-border-bottom" id="accordionHeaderBorderBottom">
1789
+ &lt;div class="card">
1790
+ &lt;div class="card-header" id="headingBorderBottomOne">
1791
+ &lt;h2 class="mb-0">
1792
+ &lt;button class="btn btn-link" type="button" data-toggle="collapse" data-target="#collapseBorderBottomOne"
1793
+ aria-expanded="true" aria-controls="collapseBorderBottomOne">
1794
+ Collapsible Group Item #1
1795
+ &lt;/button>
1796
+ &lt;/h2>
1797
+ &lt;/div>
1798
+ &lt;div id="collapseBorderBottomOne" class="collapse show" aria-labelledby="headingBorderBottomOne"
1799
+ data-parent="#accordionHeaderBorderBottom">
1800
+ &lt;div class="card-body">
1801
+ Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf
1802
+ moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3
1803
+ wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil
1804
+ anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur
1805
+ butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you
1806
+ probably haven't heard of them accusamus labore sustainable VHS.
1807
+ &lt;/div>
1808
+ &lt;/div>
1809
+ &lt;/div>
1810
+ &lt;div class="card">
1811
+ &lt;div class="card-header" id="headingBorderBottomTwo">
1812
+ &lt;h2 class="mb-0">
1813
+ &lt;button class="btn btn-link collapsed" type="button" data-toggle="collapse"
1814
+ data-target="#collapseBorderBottomTwo" aria-expanded="false" aria-controls="collapseBorderBottomTwo">
1815
+ Collapsible Group Item #2
1816
+ &lt;/button>
1817
+ &lt;/h2>
1818
+ &lt;/div>
1819
+ &lt;div id="collapseBorderBottomTwo" class="collapse" aria-labelledby="headingBorderBottomTwo"
1820
+ data-parent="#accordionHeaderBorderBottom">
1821
+ &lt;div class="card-body">
1822
+ Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf
1823
+ moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3
1824
+ wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil
1825
+ anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur
1826
+ butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you
1827
+ probably haven't heard of them accusamus labore sustainable VHS.
1828
+ &lt;/div>
1829
+ &lt;/div>
1830
+ &lt;/div>
1831
+ &lt;div class="card">
1832
+ &lt;div class="card-header" id="headingBorderBottomThree">
1833
+ &lt;h2 class="mb-0">
1834
+ &lt;button class="btn btn-link collapsed" type="button" data-toggle="collapse"
1835
+ data-target="#collapseBorderBottomThree" aria-expanded="false" aria-controls="collapseBorderBottomThree">
1836
+ Collapsible Group Item #3
1837
+ &lt;/button>
1838
+ &lt;/h2>
1839
+ &lt;/div>
1840
+ &lt;div id="collapseBorderBottomThree" class="collapse" aria-labelledby="headingBorderBottomThree"
1841
+ data-parent="#accordionHeaderBorderBottom">
1842
+ &lt;div class="card-body">
1843
+ Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf
1844
+ moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3
1845
+ wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil
1846
+ anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur
1847
+ butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you
1848
+ probably haven't heard of them accusamus labore sustainable VHS.
1849
+ &lt;/div>
1850
+ &lt;/div>
1851
+ &lt;/div>
1852
+ &lt;/div>
1853
+ </code>
1854
+ </pre>
1855
+ </div>
1856
+ <div class="accordion accordion-header-border-bottom" id="accordionHeaderBorderBottom">
1857
+ <div class="card">
1858
+ <div class="card-header" id="headingBorderBottomOne">
1859
+ <h2 class="mb-0">
1860
+ <button class="btn btn-link" type="button" data-toggle="collapse" data-target="#collapseBorderBottomOne"
1861
+ aria-expanded="true" aria-controls="collapseBorderBottomOne">
1862
+ Collapsible Group Item #1
1863
+ </button>
1864
+ </h2>
1865
+ </div>
1866
+
1867
+ <div id="collapseBorderBottomOne" class="collapse show" aria-labelledby="headingBorderBottomOne"
1868
+ data-parent="#accordionHeaderBorderBottom">
1869
+ <div class="card-body">
1870
+ Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf
1871
+ moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3
1872
+ wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil
1873
+ anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur
1874
+ butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you
1875
+ probably haven't heard of them accusamus labore sustainable VHS.
1876
+ </div>
1877
+ </div>
1878
+ </div>
1879
+ <div class="card">
1880
+ <div class="card-header" id="headingBorderBottomTwo">
1881
+ <h2 class="mb-0">
1882
+ <button class="btn btn-link collapsed" type="button" data-toggle="collapse"
1883
+ data-target="#collapseBorderBottomTwo" aria-expanded="false" aria-controls="collapseBorderBottomTwo">
1884
+ Collapsible Group Item #2
1885
+ </button>
1886
+ </h2>
1887
+ </div>
1888
+ <div id="collapseBorderBottomTwo" class="collapse" aria-labelledby="headingBorderBottomTwo"
1889
+ data-parent="#accordionHeaderBorderBottom">
1890
+ <div class="card-body">
1891
+ Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf
1892
+ moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3
1893
+ wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil
1894
+ anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur
1895
+ butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you
1896
+ probably haven't heard of them accusamus labore sustainable VHS.
1897
+ </div>
1898
+ </div>
1899
+ </div>
1900
+ <div class="card">
1901
+ <div class="card-header" id="headingBorderBottomThree">
1902
+ <h2 class="mb-0">
1903
+ <button class="btn btn-link collapsed" type="button" data-toggle="collapse"
1904
+ data-target="#collapseBorderBottomThree" aria-expanded="false" aria-controls="collapseBorderBottomThree">
1905
+ Collapsible Group Item #3
1906
+ </button>
1907
+ </h2>
1908
+ </div>
1909
+ <div id="collapseBorderBottomThree" class="collapse" aria-labelledby="headingBorderBottomThree"
1910
+ data-parent="#accordionHeaderBorderBottom">
1911
+ <div class="card-body">
1912
+ Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf
1913
+ moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3
1914
+ wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil
1915
+ anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur
1916
+ butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you
1917
+ probably haven't heard of them accusamus labore sustainable VHS.
1918
+ </div>
1919
+ </div>
1920
+ </div>
1921
+ </div>
1922
+
1923
+ </div>
1924
+ </div>
1925
+ </div>
1926
+
1927
+ </div>
1928
+
1929
+ </div>
1930
+
1931
+ </div>
1932
+
1933
+ <!-- Footer -->
1934
+ <footer class="footer mt-auto">
1935
+ <div class="copyright bg-white">
1936
+ <p>
1937
+ &copy; <span id="copy-year"></span> Copyright Mono Dashboard Bootstrap Template by <a class="text-primary" href="http://www.iamabdus.com/" target="_blank" >Abdus</a>.
1938
+ </p>
1939
+ </div>
1940
+ <script>
1941
+ var d = new Date();
1942
+ var year = d.getFullYear();
1943
+ document.getElementById("copy-year").innerHTML = year;
1944
+ </script>
1945
+ </footer>
1946
+
1947
+ </div>
1948
+ </div>
1949
+
1950
+ <!-- Card Offcanvas -->
1951
+ <div class="card card-offcanvas" id="contact-off" >
1952
+ <div class="card-header">
1953
+ <h2>Contacts</h2>
1954
+ <a href="#" class="btn btn-primary btn-pill px-4">Add New</a>
1955
+ </div>
1956
+ <div class="card-body">
1957
+
1958
+ <div class="mb-4">
1959
+ <input type="text" class="form-control form-control-lg form-control-secondary rounded-0" placeholder="Search contacts...">
1960
+ </div>
1961
+
1962
+ <div class="media media-sm">
1963
+ <div class="media-sm-wrapper">
1964
+ <a href="user-profile.html">
1965
+ <img src="images/user/user-sm-01.jpg" alt="User Image">
1966
+ <span class="active bg-primary"></span>
1967
+ </a>
1968
+ </div>
1969
+ <div class="media-body">
1970
+ <a href="user-profile.html">
1971
+ <span class="title">Selena Wagner</span>
1972
+ <span class="discribe">Designer</span>
1973
+ </a>
1974
+ </div>
1975
+ </div>
1976
+
1977
+ <div class="media media-sm">
1978
+ <div class="media-sm-wrapper">
1979
+ <a href="user-profile.html">
1980
+ <img src="images/user/user-sm-02.jpg" alt="User Image">
1981
+ <span class="active bg-primary"></span>
1982
+ </a>
1983
+ </div>
1984
+ <div class="media-body">
1985
+ <a href="user-profile.html">
1986
+ <span class="title">Walter Reuter</span>
1987
+ <span>Developer</span>
1988
+ </a>
1989
+ </div>
1990
+ </div>
1991
+
1992
+ <div class="media media-sm">
1993
+ <div class="media-sm-wrapper">
1994
+ <a href="user-profile.html">
1995
+ <img src="images/user/user-sm-03.jpg" alt="User Image">
1996
+ </a>
1997
+ </div>
1998
+ <div class="media-body">
1999
+ <a href="user-profile.html">
2000
+ <span class="title">Larissa Gebhardt</span>
2001
+ <span>Cyber Punk</span>
2002
+ </a>
2003
+ </div>
2004
+ </div>
2005
+
2006
+ <div class="media media-sm">
2007
+ <div class="media-sm-wrapper">
2008
+ <a href="user-profile.html">
2009
+ <img src="images/user/user-sm-04.jpg" alt="User Image">
2010
+ </a>
2011
+
2012
+ </div>
2013
+ <div class="media-body">
2014
+ <a href="user-profile.html">
2015
+ <span class="title">Albrecht Straub</span>
2016
+ <span>Photographer</span>
2017
+ </a>
2018
+ </div>
2019
+ </div>
2020
+
2021
+ <div class="media media-sm">
2022
+ <div class="media-sm-wrapper">
2023
+ <a href="user-profile.html">
2024
+ <img src="images/user/user-sm-05.jpg" alt="User Image">
2025
+ <span class="active bg-danger"></span>
2026
+ </a>
2027
+ </div>
2028
+ <div class="media-body">
2029
+ <a href="user-profile.html">
2030
+ <span class="title">Leopold Ebert</span>
2031
+ <span>Fashion Designer</span>
2032
+ </a>
2033
+ </div>
2034
+ </div>
2035
+
2036
+ <div class="media media-sm">
2037
+ <div class="media-sm-wrapper">
2038
+ <a href="user-profile.html">
2039
+ <img src="images/user/user-sm-06.jpg" alt="User Image">
2040
+ <span class="active bg-primary"></span>
2041
+ </a>
2042
+ </div>
2043
+ <div class="media-body">
2044
+ <a href="user-profile.html">
2045
+ <span class="title">Selena Wagner</span>
2046
+ <span>Photographer</span>
2047
+ </a>
2048
+ </div>
2049
+ </div>
2050
+
2051
+ </div>
2052
+ </div>
2053
+
2054
+
2055
+
2056
+
2057
+ <script src="plugins/jquery/jquery.min.js"></script>
2058
+ <script src="plugins/bootstrap/js/bootstrap.bundle.min.js"></script>
2059
+ <script src="plugins/simplebar/simplebar.min.js"></script>
2060
+ <script src="https://unpkg.com/hotkeys-js/dist/hotkeys.min.js"></script>
2061
+
2062
+
2063
+
2064
+ <script src="plugins/prism/prism.js"></script>
2065
+
2066
+
2067
+ <script src="js/mono.js"></script>
2068
+ <script src="js/chart.js"></script>
2069
+ <script src="js/map.js"></script>
2070
+ <script src="js/custom.js"></script>
2071
+
2072
+
2073
+
2074
+
2075
+ <!-- -->
2076
+
2077
+
2078
+ </body>
2079
+ </html>
contacts.html ADDED
@@ -0,0 +1,1930 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+
3
+ <!--
4
+ // WEBSITE: https://themefisher.com
5
+ // TWITTER: https://twitter.com/themefisher
6
+ // FACEBOOK: https://www.facebook.com/themefisher
7
+ // GITHUB: https://github.com/themefisher/
8
+ -->
9
+
10
+ <html lang="en" dir="ltr">
11
+ <head>
12
+ <meta charset="utf-8" />
13
+ <meta http-equiv="X-UA-Compatible" content="IE=edge" />
14
+ <meta name="viewport" content="width=device-width, initial-scale=1" />
15
+
16
+ <title>Mono - Responsive Admin & Dashboard Template</title>
17
+
18
+ <!-- GOOGLE FONTS -->
19
+ <link href="https://fonts.googleapis.com/css?family=Karla:400,700|Roboto" rel="stylesheet">
20
+ <link href="plugins/material/css/materialdesignicons.min.css" rel="stylesheet" />
21
+ <link href="plugins/simplebar/simplebar.css" rel="stylesheet" />
22
+
23
+ <!-- PLUGINS CSS STYLE -->
24
+ <link href="plugins/nprogress/nprogress.css" rel="stylesheet" />
25
+
26
+ <!-- MONO CSS -->
27
+ <link id="main-css-href" rel="stylesheet" href="css/style.css" />
28
+
29
+
30
+
31
+
32
+ <!-- FAVICON -->
33
+ <link href="images/favicon.png" rel="shortcut icon" />
34
+
35
+ <!--
36
+ HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries
37
+ -->
38
+ <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
39
+ <!--[if lt IE 9]>
40
+ <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
41
+ <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
42
+ <![endif]-->
43
+ <script src="plugins/nprogress/nprogress.js"></script>
44
+ </head>
45
+
46
+
47
+ <body class="navbar-fixed sidebar-fixed" id="body">
48
+ <script>
49
+ NProgress.configure({ showSpinner: false });
50
+ NProgress.start();
51
+ </script>
52
+
53
+
54
+
55
+ <!-- ====================================
56
+ ——— WRAPPER
57
+ ===================================== -->
58
+ <div class="wrapper">
59
+
60
+
61
+ <!-- ====================================
62
+ ——— LEFT SIDEBAR WITH OUT FOOTER
63
+ ===================================== -->
64
+ <aside class="left-sidebar sidebar-dark" id="left-sidebar">
65
+ <div id="sidebar" class="sidebar sidebar-with-footer">
66
+ <!-- Aplication Brand -->
67
+ <div class="app-brand">
68
+ <a href="/index.html">
69
+ <img src="images/logo.png" alt="Mono">
70
+ <span class="brand-name">MONO</span>
71
+ </a>
72
+ </div>
73
+ <!-- begin sidebar scrollbar -->
74
+ <div class="sidebar-left" data-simplebar style="height: 100%;">
75
+ <!-- sidebar menu -->
76
+ <ul class="nav sidebar-inner" id="sidebar-menu">
77
+
78
+
79
+
80
+ <li
81
+ >
82
+ <a class="sidenav-item-link" href="index.html">
83
+ <i class="mdi mdi-briefcase-account-outline"></i>
84
+ <span class="nav-text">Business Dashboard</span>
85
+ </a>
86
+ </li>
87
+
88
+
89
+
90
+
91
+
92
+ <li
93
+ >
94
+ <a class="sidenav-item-link" href="analytics.html">
95
+ <i class="mdi mdi-chart-line"></i>
96
+ <span class="nav-text">Analytics Dashboard</span>
97
+ </a>
98
+ </li>
99
+
100
+
101
+
102
+
103
+
104
+ <li class="section-title">
105
+ Apps
106
+ </li>
107
+
108
+
109
+
110
+
111
+
112
+ <li
113
+ >
114
+ <a class="sidenav-item-link" href="chat.html">
115
+ <i class="mdi mdi-wechat"></i>
116
+ <span class="nav-text">Chat</span>
117
+ </a>
118
+ </li>
119
+
120
+
121
+
122
+
123
+
124
+ <li
125
+ class="active"
126
+ >
127
+ <a class="sidenav-item-link" href="contacts.html">
128
+ <i class="mdi mdi-phone"></i>
129
+ <span class="nav-text">Contacts</span>
130
+ </a>
131
+ </li>
132
+
133
+
134
+
135
+
136
+
137
+ <li
138
+ >
139
+ <a class="sidenav-item-link" href="team.html">
140
+ <i class="mdi mdi-account-group"></i>
141
+ <span class="nav-text">Team</span>
142
+ </a>
143
+ </li>
144
+
145
+
146
+
147
+
148
+
149
+ <li
150
+ >
151
+ <a class="sidenav-item-link" href="calendar.html">
152
+ <i class="mdi mdi-calendar-check"></i>
153
+ <span class="nav-text">Calendar</span>
154
+ </a>
155
+ </li>
156
+
157
+
158
+
159
+
160
+
161
+ <li class="has-sub" >
162
+ <a class="sidenav-item-link" href="javascript:void(0)" data-toggle="collapse" data-target="#email"
163
+ aria-expanded="false" aria-controls="email">
164
+ <i class="mdi mdi-email"></i>
165
+ <span class="nav-text">email</span> <b class="caret"></b>
166
+ </a>
167
+ <ul class="collapse" id="email"
168
+ data-parent="#sidebar-menu">
169
+ <div class="sub-menu">
170
+
171
+
172
+
173
+ <li >
174
+ <a class="sidenav-item-link" href="email-inbox.html">
175
+ <span class="nav-text">Email Inbox</span>
176
+
177
+ </a>
178
+ </li>
179
+
180
+
181
+
182
+
183
+
184
+
185
+ <li >
186
+ <a class="sidenav-item-link" href="email-details.html">
187
+ <span class="nav-text">Email Details</span>
188
+
189
+ </a>
190
+ </li>
191
+
192
+
193
+
194
+
195
+
196
+
197
+ <li >
198
+ <a class="sidenav-item-link" href="email-compose.html">
199
+ <span class="nav-text">Email Compose</span>
200
+
201
+ </a>
202
+ </li>
203
+
204
+
205
+
206
+
207
+ </div>
208
+ </ul>
209
+ </li>
210
+
211
+
212
+
213
+
214
+
215
+ <li class="section-title">
216
+ UI Elements
217
+ </li>
218
+
219
+
220
+
221
+
222
+
223
+ <li class="has-sub" >
224
+ <a class="sidenav-item-link" href="javascript:void(0)" data-toggle="collapse" data-target="#ui-elements"
225
+ aria-expanded="false" aria-controls="ui-elements">
226
+ <i class="mdi mdi-folder-outline"></i>
227
+ <span class="nav-text">UI Components</span> <b class="caret"></b>
228
+ </a>
229
+ <ul class="collapse" id="ui-elements"
230
+ data-parent="#sidebar-menu">
231
+ <div class="sub-menu">
232
+
233
+
234
+
235
+ <li >
236
+ <a class="sidenav-item-link" href="alert.html">
237
+ <span class="nav-text">Alert</span>
238
+
239
+ </a>
240
+ </li>
241
+
242
+
243
+
244
+
245
+
246
+
247
+ <li >
248
+ <a class="sidenav-item-link" href="badge.html">
249
+ <span class="nav-text">Badge</span>
250
+
251
+ </a>
252
+ </li>
253
+
254
+
255
+
256
+
257
+
258
+
259
+ <li >
260
+ <a class="sidenav-item-link" href="breadcrumb.html">
261
+ <span class="nav-text">Breadcrumb</span>
262
+
263
+ </a>
264
+ </li>
265
+
266
+
267
+
268
+
269
+
270
+ <li class="has-sub" >
271
+ <a class="sidenav-item-link" href="javascript:void(0)" data-toggle="collapse" data-target="#buttons"
272
+ aria-expanded="false" aria-controls="buttons">
273
+ <span class="nav-text">Buttons</span> <b class="caret"></b>
274
+ </a>
275
+ <ul class="collapse" id="buttons">
276
+ <div class="sub-menu">
277
+
278
+ <li >
279
+ <a href="button-default.html">Button Default</a>
280
+ </li>
281
+
282
+ <li >
283
+ <a href="button-dropdown.html">Button Dropdown</a>
284
+ </li>
285
+
286
+ <li >
287
+ <a href="button-group.html">Button Group</a>
288
+ </li>
289
+
290
+ <li >
291
+ <a href="button-social.html">Button Social</a>
292
+ </li>
293
+
294
+ <li >
295
+ <a href="button-loading.html">Button Loading</a>
296
+ </li>
297
+
298
+ </div>
299
+ </ul>
300
+ </li>
301
+
302
+
303
+
304
+
305
+
306
+ <li >
307
+ <a class="sidenav-item-link" href="card.html">
308
+ <span class="nav-text">Card</span>
309
+
310
+ </a>
311
+ </li>
312
+
313
+
314
+
315
+
316
+
317
+
318
+ <li >
319
+ <a class="sidenav-item-link" href="carousel.html">
320
+ <span class="nav-text">Carousel</span>
321
+
322
+ </a>
323
+ </li>
324
+
325
+
326
+
327
+
328
+
329
+
330
+ <li >
331
+ <a class="sidenav-item-link" href="collapse.html">
332
+ <span class="nav-text">Collapse</span>
333
+
334
+ </a>
335
+ </li>
336
+
337
+
338
+
339
+
340
+
341
+
342
+ <li >
343
+ <a class="sidenav-item-link" href="editor.html">
344
+ <span class="nav-text">Editor</span>
345
+
346
+ </a>
347
+ </li>
348
+
349
+
350
+
351
+
352
+
353
+
354
+ <li >
355
+ <a class="sidenav-item-link" href="list-group.html">
356
+ <span class="nav-text">List Group</span>
357
+
358
+ </a>
359
+ </li>
360
+
361
+
362
+
363
+
364
+
365
+
366
+ <li >
367
+ <a class="sidenav-item-link" href="modal.html">
368
+ <span class="nav-text">Modal</span>
369
+
370
+ </a>
371
+ </li>
372
+
373
+
374
+
375
+
376
+
377
+
378
+ <li >
379
+ <a class="sidenav-item-link" href="pagination.html">
380
+ <span class="nav-text">Pagination</span>
381
+
382
+ </a>
383
+ </li>
384
+
385
+
386
+
387
+
388
+
389
+
390
+ <li >
391
+ <a class="sidenav-item-link" href="popover-tooltip.html">
392
+ <span class="nav-text">Popover & Tooltip</span>
393
+
394
+ </a>
395
+ </li>
396
+
397
+
398
+
399
+
400
+
401
+
402
+ <li >
403
+ <a class="sidenav-item-link" href="progress-bar.html">
404
+ <span class="nav-text">Progress Bar</span>
405
+
406
+ </a>
407
+ </li>
408
+
409
+
410
+
411
+
412
+
413
+
414
+ <li >
415
+ <a class="sidenav-item-link" href="spinner.html">
416
+ <span class="nav-text">Spinner</span>
417
+
418
+ </a>
419
+ </li>
420
+
421
+
422
+
423
+
424
+
425
+
426
+ <li >
427
+ <a class="sidenav-item-link" href="switches.html">
428
+ <span class="nav-text">Switches</span>
429
+
430
+ </a>
431
+ </li>
432
+
433
+
434
+
435
+
436
+
437
+ <li class="has-sub" >
438
+ <a class="sidenav-item-link" href="javascript:void(0)" data-toggle="collapse" data-target="#tables"
439
+ aria-expanded="false" aria-controls="tables">
440
+ <span class="nav-text">Tables</span> <b class="caret"></b>
441
+ </a>
442
+ <ul class="collapse" id="tables">
443
+ <div class="sub-menu">
444
+
445
+ <li >
446
+ <a href="bootstarp-tables.html">Bootstrap Tables</a>
447
+ </li>
448
+
449
+ <li >
450
+ <a href="data-tables.html">Data Tables</a>
451
+ </li>
452
+
453
+ </div>
454
+ </ul>
455
+ </li>
456
+
457
+
458
+
459
+
460
+
461
+ <li >
462
+ <a class="sidenav-item-link" href="tab.html">
463
+ <span class="nav-text">Tab</span>
464
+
465
+ </a>
466
+ </li>
467
+
468
+
469
+
470
+
471
+
472
+
473
+ <li >
474
+ <a class="sidenav-item-link" href="toaster.html">
475
+ <span class="nav-text">Toaster</span>
476
+
477
+ </a>
478
+ </li>
479
+
480
+
481
+
482
+
483
+
484
+ <li class="has-sub" >
485
+ <a class="sidenav-item-link" href="javascript:void(0)" data-toggle="collapse" data-target="#icons"
486
+ aria-expanded="false" aria-controls="icons">
487
+ <span class="nav-text">Icons</span> <b class="caret"></b>
488
+ </a>
489
+ <ul class="collapse" id="icons">
490
+ <div class="sub-menu">
491
+
492
+ <li >
493
+ <a href="material-icons.html">Material Icon</a>
494
+ </li>
495
+
496
+ <li >
497
+ <a href="flag-icons.html">Flag Icon</a>
498
+ </li>
499
+
500
+ </div>
501
+ </ul>
502
+ </li>
503
+
504
+
505
+
506
+
507
+ <li class="has-sub" >
508
+ <a class="sidenav-item-link" href="javascript:void(0)" data-toggle="collapse" data-target="#forms"
509
+ aria-expanded="false" aria-controls="forms">
510
+ <span class="nav-text">Forms</span> <b class="caret"></b>
511
+ </a>
512
+ <ul class="collapse" id="forms">
513
+ <div class="sub-menu">
514
+
515
+ <li >
516
+ <a href="basic-input.html">Basic Input</a>
517
+ </li>
518
+
519
+ <li >
520
+ <a href="input-group.html">Input Group</a>
521
+ </li>
522
+
523
+ <li >
524
+ <a href="checkbox-radio.html">Checkbox & Radio</a>
525
+ </li>
526
+
527
+ <li >
528
+ <a href="form-validation.html">Form Validation</a>
529
+ </li>
530
+
531
+ <li >
532
+ <a href="form-advance.html">Form Advance</a>
533
+ </li>
534
+
535
+ </div>
536
+ </ul>
537
+ </li>
538
+
539
+
540
+
541
+
542
+ <li class="has-sub" >
543
+ <a class="sidenav-item-link" href="javascript:void(0)" data-toggle="collapse" data-target="#maps"
544
+ aria-expanded="false" aria-controls="maps">
545
+ <span class="nav-text">Maps</span> <b class="caret"></b>
546
+ </a>
547
+ <ul class="collapse" id="maps">
548
+ <div class="sub-menu">
549
+
550
+ <li >
551
+ <a href="google-maps.html">Google Map</a>
552
+ </li>
553
+
554
+ <li >
555
+ <a href="vector-maps.html">Vector Map</a>
556
+ </li>
557
+
558
+ </div>
559
+ </ul>
560
+ </li>
561
+
562
+
563
+
564
+
565
+ <li class="has-sub" >
566
+ <a class="sidenav-item-link" href="javascript:void(0)" data-toggle="collapse" data-target="#widgets"
567
+ aria-expanded="false" aria-controls="widgets">
568
+ <span class="nav-text">Widgets</span> <b class="caret"></b>
569
+ </a>
570
+ <ul class="collapse" id="widgets">
571
+ <div class="sub-menu">
572
+
573
+ <li >
574
+ <a href="widgets-general.html">General Widget</a>
575
+ </li>
576
+
577
+ <li >
578
+ <a href="widgets-chart.html">Chart Widget</a>
579
+ </li>
580
+
581
+ </div>
582
+ </ul>
583
+ </li>
584
+
585
+
586
+
587
+ </div>
588
+ </ul>
589
+ </li>
590
+
591
+
592
+
593
+
594
+
595
+ <li class="has-sub" >
596
+ <a class="sidenav-item-link" href="javascript:void(0)" data-toggle="collapse" data-target="#charts"
597
+ aria-expanded="false" aria-controls="charts">
598
+ <i class="mdi mdi-chart-pie"></i>
599
+ <span class="nav-text">Charts</span> <b class="caret"></b>
600
+ </a>
601
+ <ul class="collapse" id="charts"
602
+ data-parent="#sidebar-menu">
603
+ <div class="sub-menu">
604
+
605
+
606
+
607
+ <li >
608
+ <a class="sidenav-item-link" href="apex-charts.html">
609
+ <span class="nav-text">Apex Charts</span>
610
+
611
+ </a>
612
+ </li>
613
+
614
+
615
+
616
+
617
+ </div>
618
+ </ul>
619
+ </li>
620
+
621
+
622
+
623
+
624
+
625
+ <li class="section-title">
626
+ Pages
627
+ </li>
628
+
629
+
630
+
631
+
632
+
633
+ <li class="has-sub" >
634
+ <a class="sidenav-item-link" href="javascript:void(0)" data-toggle="collapse" data-target="#users"
635
+ aria-expanded="false" aria-controls="users">
636
+ <i class="mdi mdi-image-filter-none"></i>
637
+ <span class="nav-text">User</span> <b class="caret"></b>
638
+ </a>
639
+ <ul class="collapse" id="users"
640
+ data-parent="#sidebar-menu">
641
+ <div class="sub-menu">
642
+
643
+
644
+
645
+ <li >
646
+ <a class="sidenav-item-link" href="user-profile.html">
647
+ <span class="nav-text">User Profile</span>
648
+
649
+ </a>
650
+ </li>
651
+
652
+
653
+
654
+
655
+
656
+
657
+ <li >
658
+ <a class="sidenav-item-link" href="user-activities.html">
659
+ <span class="nav-text">User Activities</span>
660
+
661
+ </a>
662
+ </li>
663
+
664
+
665
+
666
+
667
+
668
+
669
+ <li >
670
+ <a class="sidenav-item-link" href="user-profile-settings.html">
671
+ <span class="nav-text">User Profile Settings</span>
672
+
673
+ </a>
674
+ </li>
675
+
676
+
677
+
678
+
679
+
680
+
681
+ <li >
682
+ <a class="sidenav-item-link" href="user-account-settings.html">
683
+ <span class="nav-text">User Account Settings</span>
684
+
685
+ </a>
686
+ </li>
687
+
688
+
689
+
690
+
691
+
692
+
693
+ <li >
694
+ <a class="sidenav-item-link" href="user-planing-settings.html">
695
+ <span class="nav-text">User Planing Settings</span>
696
+
697
+ </a>
698
+ </li>
699
+
700
+
701
+
702
+
703
+
704
+
705
+ <li >
706
+ <a class="sidenav-item-link" href="user-billing.html">
707
+ <span class="nav-text">User billing</span>
708
+
709
+ </a>
710
+ </li>
711
+
712
+
713
+
714
+
715
+
716
+
717
+ <li >
718
+ <a class="sidenav-item-link" href="user-notify-settings.html">
719
+ <span class="nav-text">User Notify Settings</span>
720
+
721
+ </a>
722
+ </li>
723
+
724
+
725
+
726
+
727
+ </div>
728
+ </ul>
729
+ </li>
730
+
731
+
732
+
733
+
734
+
735
+ <li class="has-sub" >
736
+ <a class="sidenav-item-link" href="javascript:void(0)" data-toggle="collapse" data-target="#authentication"
737
+ aria-expanded="false" aria-controls="authentication">
738
+ <i class="mdi mdi-account"></i>
739
+ <span class="nav-text">Authentication</span> <b class="caret"></b>
740
+ </a>
741
+ <ul class="collapse" id="authentication"
742
+ data-parent="#sidebar-menu">
743
+ <div class="sub-menu">
744
+
745
+
746
+
747
+ <li >
748
+ <a class="sidenav-item-link" href="sign-in.html">
749
+ <span class="nav-text">Sign In</span>
750
+
751
+ </a>
752
+ </li>
753
+
754
+
755
+
756
+
757
+
758
+
759
+ <li >
760
+ <a class="sidenav-item-link" href="sign-up.html">
761
+ <span class="nav-text">Sign Up</span>
762
+
763
+ </a>
764
+ </li>
765
+
766
+
767
+
768
+
769
+
770
+
771
+ <li >
772
+ <a class="sidenav-item-link" href="reset-password.html">
773
+ <span class="nav-text">Reset Password</span>
774
+
775
+ </a>
776
+ </li>
777
+
778
+
779
+
780
+
781
+ </div>
782
+ </ul>
783
+ </li>
784
+
785
+
786
+
787
+
788
+
789
+ <li class="has-sub" >
790
+ <a class="sidenav-item-link" href="javascript:void(0)" data-toggle="collapse" data-target="#other-page"
791
+ aria-expanded="false" aria-controls="other-page">
792
+ <i class="mdi mdi-file-multiple"></i>
793
+ <span class="nav-text">Other pages</span> <b class="caret"></b>
794
+ </a>
795
+ <ul class="collapse" id="other-page"
796
+ data-parent="#sidebar-menu">
797
+ <div class="sub-menu">
798
+
799
+
800
+
801
+ <li >
802
+ <a class="sidenav-item-link" href="invoice.html">
803
+ <span class="nav-text">Invoice</span>
804
+
805
+ </a>
806
+ </li>
807
+
808
+
809
+
810
+
811
+
812
+
813
+ <li >
814
+ <a class="sidenav-item-link" href="404.html">
815
+ <span class="nav-text">404 page</span>
816
+
817
+ </a>
818
+ </li>
819
+
820
+
821
+
822
+
823
+
824
+
825
+ <li >
826
+ <a class="sidenav-item-link" href="page-comingsoon.html">
827
+ <span class="nav-text">Coming Soon</span>
828
+
829
+ </a>
830
+ </li>
831
+
832
+
833
+
834
+
835
+
836
+
837
+ <li >
838
+ <a class="sidenav-item-link" href="page-maintenance.html">
839
+ <span class="nav-text">Maintenance</span>
840
+
841
+ </a>
842
+ </li>
843
+
844
+
845
+
846
+
847
+ </div>
848
+ </ul>
849
+ </li>
850
+
851
+
852
+
853
+
854
+
855
+ <li class="section-title">
856
+ Documentation
857
+ </li>
858
+
859
+
860
+
861
+
862
+
863
+ <li
864
+ >
865
+ <a class="sidenav-item-link" href="getting-started.html">
866
+ <i class="mdi mdi-airplane"></i>
867
+ <span class="nav-text">Getting Started</span>
868
+ </a>
869
+ </li>
870
+
871
+
872
+
873
+
874
+
875
+ <li class="has-sub" >
876
+ <a class="sidenav-item-link" href="javascript:void(0)" data-toggle="collapse" data-target="#customization"
877
+ aria-expanded="false" aria-controls="customization">
878
+ <i class="mdi mdi-square-edit-outline"></i>
879
+ <span class="nav-text">Customization</span> <b class="caret"></b>
880
+ </a>
881
+ <ul class="collapse" id="customization"
882
+ data-parent="#sidebar-menu">
883
+ <div class="sub-menu">
884
+
885
+
886
+
887
+ <li >
888
+ <a class="sidenav-item-link" href="navbar-customization.html">
889
+ <span class="nav-text">Navbar</span>
890
+
891
+ </a>
892
+ </li>
893
+
894
+
895
+
896
+
897
+
898
+
899
+ <li >
900
+ <a class="sidenav-item-link" href="sidebar-customization.html">
901
+ <span class="nav-text">Sidebar</span>
902
+
903
+ </a>
904
+ </li>
905
+
906
+
907
+
908
+
909
+
910
+
911
+ <li >
912
+ <a class="sidenav-item-link" href="styling.html">
913
+ <span class="nav-text">Styling</span>
914
+
915
+ </a>
916
+ </li>
917
+
918
+
919
+
920
+
921
+ </div>
922
+ </ul>
923
+ </li>
924
+
925
+
926
+
927
+ </ul>
928
+
929
+ </div>
930
+
931
+ <div class="sidebar-footer">
932
+ <div class="sidebar-footer-content">
933
+ <ul class="d-flex">
934
+ <li>
935
+ <a href="user-account-settings.html" data-toggle="tooltip" title="Profile settings"><i class="mdi mdi-settings"></i></a></li>
936
+ <li>
937
+ <a href="#" data-toggle="tooltip" title="No chat messages"><i class="mdi mdi-chat-processing"></i></a>
938
+ </li>
939
+ </ul>
940
+ </div>
941
+ </div>
942
+ </div>
943
+ </aside>
944
+
945
+
946
+
947
+ <!-- ====================================
948
+ ——— PAGE WRAPPER
949
+ ===================================== -->
950
+ <div class="page-wrapper">
951
+
952
+ <!-- Header -->
953
+ <header class="main-header" id="header">
954
+ <nav class="navbar navbar-expand-lg navbar-light" id="navbar">
955
+ <!-- Sidebar toggle button -->
956
+ <button id="sidebar-toggler" class="sidebar-toggle">
957
+ <span class="sr-only">Toggle navigation</span>
958
+ </button>
959
+
960
+ <span class="page-title"></span>
961
+
962
+ <div class="navbar-right ">
963
+
964
+ <!-- search form -->
965
+ <div class="search-form">
966
+ <form action="index.html" method="get">
967
+ <div class="input-group input-group-sm" id="input-group-search">
968
+ <input type="text" autocomplete="off" name="query" id="search-input" class="form-control" placeholder="Search..." />
969
+ <div class="input-group-append">
970
+ <button class="btn" type="button">/</button>
971
+ </div>
972
+ </div>
973
+ </form>
974
+ <ul class="dropdown-menu dropdown-menu-search">
975
+
976
+ <li class="nav-item">
977
+ <a class="nav-link" href="index.html">Morbi leo risus</a>
978
+ </li>
979
+ <li class="nav-item">
980
+ <a class="nav-link" href="index.html">Dapibus ac facilisis in</a>
981
+ </li>
982
+ <li class="nav-item">
983
+ <a class="nav-link" href="index.html">Porta ac consectetur ac</a>
984
+ </li>
985
+ <li class="nav-item">
986
+ <a class="nav-link" href="index.html">Vestibulum at eros</a>
987
+ </li>
988
+
989
+ </ul>
990
+
991
+ </div>
992
+
993
+ <ul class="nav navbar-nav">
994
+ <!-- Offcanvas -->
995
+ <li class="custom-dropdown">
996
+ <a class="offcanvas-toggler active custom-dropdown-toggler" data-offcanvas="contact-off" href="javascript:" >
997
+ <i class="mdi mdi-contacts icon"></i>
998
+ </a>
999
+ </li>
1000
+ <li class="custom-dropdown">
1001
+ <button class="notify-toggler custom-dropdown-toggler">
1002
+ <i class="mdi mdi-bell-outline icon"></i>
1003
+ <span class="badge badge-xs rounded-circle">21</span>
1004
+ </button>
1005
+ <div class="dropdown-notify">
1006
+
1007
+ <header>
1008
+ <div class="nav nav-underline" id="nav-tab" role="tablist">
1009
+ <a class="nav-item nav-link active" id="all-tabs" data-toggle="tab" href="#all" role="tab" aria-controls="nav-home"
1010
+ aria-selected="true">All (5)</a>
1011
+ <a class="nav-item nav-link" id="message-tab" data-toggle="tab" href="#message" role="tab" aria-controls="nav-profile"
1012
+ aria-selected="false">Msgs (4)</a>
1013
+ <a class="nav-item nav-link" id="other-tab" data-toggle="tab" href="#other" role="tab" aria-controls="nav-contact"
1014
+ aria-selected="false">Others (3)</a>
1015
+ </div>
1016
+ </header>
1017
+
1018
+ <div class="" data-simplebar style="height: 325px;">
1019
+ <div class="tab-content" id="myTabContent">
1020
+
1021
+ <div class="tab-pane fade show active" id="all" role="tabpanel" aria-labelledby="all-tabs">
1022
+
1023
+ <div class="media media-sm bg-warning-10 p-4 mb-0">
1024
+ <div class="media-sm-wrapper">
1025
+ <a href="user-profile.html">
1026
+ <img src="images/user/user-sm-02.jpg" alt="User Image">
1027
+ </a>
1028
+ </div>
1029
+ <div class="media-body">
1030
+ <a href="user-profile.html">
1031
+ <span class="title mb-0">John Doe</span>
1032
+ <span class="discribe">Extremity sweetness difficult behaviour he of. On disposal of as landlord horrible. Afraid at highly months do things on at.</span>
1033
+ <span class="time">
1034
+ <time>Just now</time>...
1035
+ </span>
1036
+ </a>
1037
+ </div>
1038
+ </div>
1039
+
1040
+ <div class="media media-sm p-4 bg-light mb-0">
1041
+ <div class="media-sm-wrapper bg-primary">
1042
+ <a href="user-profile.html">
1043
+ <i class="mdi mdi-calendar-check-outline"></i>
1044
+ </a>
1045
+ </div>
1046
+ <div class="media-body">
1047
+ <a href="user-profile.html">
1048
+ <span class="title mb-0">New event added</span>
1049
+ <span class="discribe">1/3/2014 (1pm - 2pm)</span>
1050
+ <span class="time">
1051
+ <time>10 min ago...</time>...
1052
+ </span>
1053
+ </a>
1054
+ </div>
1055
+ </div>
1056
+
1057
+ <div class="media media-sm p-4 mb-0">
1058
+ <div class="media-sm-wrapper">
1059
+ <a href="user-profile.html">
1060
+ <img src="images/user/user-sm-03.jpg" alt="User Image">
1061
+ </a>
1062
+ </div>
1063
+ <div class="media-body">
1064
+ <a href="user-profile.html">
1065
+ <span class="title mb-0">Sagge Hudson</span>
1066
+ <span class="discribe">On disposal of as landlord Afraid at highly months do things on at.</span>
1067
+ <span class="time">
1068
+ <time>1 hrs ago</time>...
1069
+ </span>
1070
+ </a>
1071
+ </div>
1072
+ </div>
1073
+
1074
+ <div class="media media-sm p-4 mb-0">
1075
+ <div class="media-sm-wrapper bg-info-dark">
1076
+ <a href="user-profile.html">
1077
+ <i class="mdi mdi-account-multiple-check"></i>
1078
+ </a>
1079
+ </div>
1080
+ <div class="media-body">
1081
+ <a href="user-profile.html">
1082
+ <span class="title mb-0">Add request</span>
1083
+ <span class="discribe">Add Dany Jones as your contact.</span>
1084
+ <div class="buttons">
1085
+ <a href="#" class="btn btn-sm btn-success shadow-none text-white">accept</a>
1086
+ <a href="#" class="btn btn-sm shadow-none">delete</a>
1087
+ </div>
1088
+ <span class="time">
1089
+ <time>6 hrs ago</time>...
1090
+ </span>
1091
+ </a>
1092
+ </div>
1093
+ </div>
1094
+
1095
+ <div class="media media-sm p-4 mb-0">
1096
+ <div class="media-sm-wrapper bg-info">
1097
+ <a href="user-profile.html">
1098
+ <i class="mdi mdi-playlist-check"></i>
1099
+ </a>
1100
+ </div>
1101
+ <div class="media-body">
1102
+ <a href="user-profile.html">
1103
+ <span class="title mb-0">Task complete</span>
1104
+ <span class="discribe">Afraid at highly months do things on at.</span>
1105
+ <span class="time">
1106
+ <time>1 hrs ago</time>...
1107
+ </span>
1108
+ </a>
1109
+ </div>
1110
+ </div>
1111
+
1112
+ </div>
1113
+
1114
+ <div class="tab-pane fade" id="message" role="tabpanel" aria-labelledby="message-tab">
1115
+
1116
+ <div class="media media-sm p-4 mb-0">
1117
+ <div class="media-sm-wrapper">
1118
+ <a href="user-profile.html">
1119
+ <img src="images/user/user-sm-01.jpg" alt="User Image">
1120
+ </a>
1121
+ </div>
1122
+ <div class="media-body">
1123
+ <a href="user-profile.html">
1124
+ <span class="title mb-0">Selena Wagner</span>
1125
+ <span class="discribe">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</span>
1126
+ <span class="time">
1127
+ <time>15 min ago</time>...
1128
+ </span>
1129
+ </a>
1130
+ </div>
1131
+ </div>
1132
+
1133
+ <div class="media media-sm p-4 mb-0">
1134
+ <div class="media-sm-wrapper">
1135
+ <a href="user-profile.html">
1136
+ <img src="images/user/user-sm-03.jpg" alt="User Image">
1137
+ </a>
1138
+ </div>
1139
+ <div class="media-body">
1140
+ <a href="user-profile.html">
1141
+ <span class="title mb-0">Sagge Hudson</span>
1142
+ <span class="discribe">On disposal of as landlord Afraid at highly months do things on at.</span>
1143
+ <span class="time">
1144
+ <time>1 hrs ago</time>...
1145
+ </span>
1146
+ </a>
1147
+ </div>
1148
+ </div>
1149
+
1150
+ <div class="media media-sm bg-warning-10 p-4 mb-0">
1151
+ <div class="media-sm-wrapper">
1152
+ <a href="user-profile.html">
1153
+ <img src="images/user/user-sm-02.jpg" alt="User Image">
1154
+ </a>
1155
+ </div>
1156
+ <div class="media-body">
1157
+ <a href="user-profile.html">
1158
+ <span class="title mb-0">John Doe</span>
1159
+ <span class="discribe">Extremity sweetness difficult behaviour he of. On disposal of as landlord horrible. Afraid
1160
+ at highly months do things on at.</span>
1161
+ <span class="time">
1162
+ <time>Just now</time>...
1163
+ </span>
1164
+ </a>
1165
+ </div>
1166
+ </div>
1167
+
1168
+ <div class="media media-sm p-4 mb-0">
1169
+ <div class="media-sm-wrapper">
1170
+ <a href="user-profile.html">
1171
+ <img src="images/user/user-sm-04.jpg" alt="User Image">
1172
+ </a>
1173
+ </div>
1174
+ <div class="media-body">
1175
+ <a href="user-profile.html">
1176
+ <span class="title mb-0">Albrecht Straub</span>
1177
+ <span class="discribe"> Beatae quia natus assumenda laboriosam, nisi perferendis aliquid consectetur expedita non tenetur.</span>
1178
+ <span class="time">
1179
+ <time>Just now</time>...
1180
+ </span>
1181
+ </a>
1182
+ </div>
1183
+ </div>
1184
+
1185
+ </div>
1186
+ <div class="tab-pane fade" id="other" role="tabpanel" aria-labelledby="contact-tab">
1187
+
1188
+ <div class="media media-sm p-4 bg-light mb-0">
1189
+ <div class="media-sm-wrapper bg-primary">
1190
+ <a href="user-profile.html">
1191
+ <i class="mdi mdi-calendar-check-outline"></i>
1192
+ </a>
1193
+ </div>
1194
+ <div class="media-body">
1195
+ <a href="user-profile.html">
1196
+ <span class="title mb-0">New event added</span>
1197
+ <span class="discribe">1/3/2014 (1pm - 2pm)</span>
1198
+ <span class="time">
1199
+ <time>10 min ago...</time>...
1200
+ </span>
1201
+ </a>
1202
+ </div>
1203
+ </div>
1204
+
1205
+ <div class="media media-sm p-4 mb-0">
1206
+ <div class="media-sm-wrapper bg-info-dark">
1207
+ <a href="user-profile.html">
1208
+ <i class="mdi mdi-account-multiple-check"></i>
1209
+ </a>
1210
+ </div>
1211
+ <div class="media-body">
1212
+ <a href="user-profile.html">
1213
+ <span class="title mb-0">Add request</span>
1214
+ <span class="discribe">Add Dany Jones as your contact.</span>
1215
+ <div class="buttons">
1216
+ <a href="#" class="btn btn-sm btn-success shadow-none text-white">accept</a>
1217
+ <a href="#" class="btn btn-sm shadow-none">delete</a>
1218
+ </div>
1219
+ <span class="time">
1220
+ <time>6 hrs ago</time>...
1221
+ </span>
1222
+ </a>
1223
+ </div>
1224
+ </div>
1225
+
1226
+ <div class="media media-sm p-4 mb-0">
1227
+ <div class="media-sm-wrapper bg-info">
1228
+ <a href="user-profile.html">
1229
+ <i class="mdi mdi-playlist-check"></i>
1230
+ </a>
1231
+ </div>
1232
+ <div class="media-body">
1233
+ <a href="user-profile.html">
1234
+ <span class="title mb-0">Task complete</span>
1235
+ <span class="discribe">Afraid at highly months do things on at.</span>
1236
+ <span class="time">
1237
+ <time>1 hrs ago</time>...
1238
+ </span>
1239
+ </a>
1240
+ </div>
1241
+ </div>
1242
+
1243
+ </div>
1244
+ </div>
1245
+ </div>
1246
+
1247
+ <footer class="border-top dropdown-notify-footer">
1248
+ <div class="d-flex justify-content-between align-items-center py-2 px-4">
1249
+ <span>Last updated 3 min ago</span>
1250
+ <a id="refress-button" href="javascript:" class="btn mdi mdi-cached btn-refress"></a>
1251
+ </div>
1252
+ </footer>
1253
+ </div>
1254
+ </li>
1255
+ <!-- User Account -->
1256
+ <li class="dropdown user-menu">
1257
+ <button class="dropdown-toggle nav-link" data-toggle="dropdown">
1258
+ <img src="images/user/user-xs-01.jpg" class="user-image rounded-circle" alt="User Image" />
1259
+ <span class="d-none d-lg-inline-block">John Doe</span>
1260
+ </button>
1261
+ <ul class="dropdown-menu dropdown-menu-right">
1262
+ <li>
1263
+ <a class="dropdown-link-item" href="user-profile.html">
1264
+ <i class="mdi mdi-account-outline"></i>
1265
+ <span class="nav-text">My Profile</span>
1266
+ </a>
1267
+ </li>
1268
+ <li>
1269
+ <a class="dropdown-link-item" href="email-inbox.html">
1270
+ <i class="mdi mdi-email-outline"></i>
1271
+ <span class="nav-text">Message</span>
1272
+ <span class="badge badge-pill badge-primary">24</span>
1273
+ </a>
1274
+ </li>
1275
+ <li>
1276
+ <a class="dropdown-link-item" href="user-activities.html">
1277
+ <i class="mdi mdi-diamond-stone"></i>
1278
+ <span class="nav-text">Activitise</span></a>
1279
+ </li>
1280
+ <li>
1281
+ <a class="dropdown-link-item" href="user-account-settings.html">
1282
+ <i class="mdi mdi-settings"></i>
1283
+ <span class="nav-text">Account Setting</span>
1284
+ </a>
1285
+ </li>
1286
+
1287
+ <li class="dropdown-footer">
1288
+ <a class="dropdown-link-item" href="sign-in.html"> <i class="mdi mdi-logout"></i> Log Out </a>
1289
+ </li>
1290
+ </ul>
1291
+ </li>
1292
+ </ul>
1293
+ </div>
1294
+ </nav>
1295
+
1296
+
1297
+ </header>
1298
+
1299
+ <!-- ====================================
1300
+ ——— CONTENT WRAPPER
1301
+ ===================================== -->
1302
+ <div class="content-wrapper">
1303
+ <div class="content"><div class="card card-default">
1304
+ <div class="card-header align-items-center px-3 px-md-5">
1305
+ <h2>Contacts</h2>
1306
+
1307
+ <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#modal-add-contact"> Add Contact
1308
+ </button>
1309
+ </div>
1310
+
1311
+ <div class="card-body px-3 px-md-5">
1312
+ <div class="row">
1313
+ <div class="col-lg-6 col-xl-4">
1314
+ <div class="card card-default p-4">
1315
+ <a href="javascript:0" class="media text-secondary" data-toggle="modal" data-target="#modal-contact">
1316
+ <img src="images/user/u-xl-1.jpg" class="mr-3 img-fluid rounded" alt="Avatar Image">
1317
+
1318
+ <div class="media-body">
1319
+ <h5 class="mt-0 mb-2 text-dark">Emma Smith</h5>
1320
+ <ul class="list-unstyled text-smoke text-smoke">
1321
+ <li class="d-flex">
1322
+ <i class="mdi mdi-map mr-1"></i>
1323
+ <span>Nulla vel metus 15/178</span>
1324
+ </li>
1325
+ <li class="d-flex">
1326
+ <i class="mdi mdi-email mr-1"></i>
1327
+ <span>exmaple@email.com</span>
1328
+ </li>
1329
+ <li class="d-flex">
1330
+ <i class="mdi mdi-phone mr-1"></i>
1331
+ <span>(123) 888 777 632</span>
1332
+ </li>
1333
+ </ul>
1334
+ </div>
1335
+ </a>
1336
+ </div>
1337
+ </div>
1338
+
1339
+ <div class="col-lg-6 col-xl-4">
1340
+ <div class="card card-default p-4">
1341
+ <a href="javascript:0" class="media text-secondary" data-toggle="modal" data-target="#modal-contact">
1342
+ <img src="images/user/u-xl-2.jpg" class="mr-3 img-fluid rounded" alt="Avatar Image">
1343
+
1344
+ <div class="media-body">
1345
+ <h5 class="mt-0 mb-2 text-dark">Emma Smith</h5>
1346
+ <ul class="list-unstyled text-smoke">
1347
+ <li class="d-flex">
1348
+ <i class="mdi mdi-map mr-1"></i>
1349
+ <span>Nulla vel metus 15/178</span>
1350
+ </li>
1351
+ <li class="d-flex">
1352
+ <i class="mdi mdi-email mr-1"></i>
1353
+ <span>exmaple@email.com</span>
1354
+ </li>
1355
+ <li class="d-flex">
1356
+ <i class="mdi mdi-phone mr-1"></i>
1357
+ <span>(123) 888 777 632</span>
1358
+ </li>
1359
+ </ul>
1360
+ </div>
1361
+ </a>
1362
+ </div>
1363
+ </div>
1364
+
1365
+ <div class="col-lg-6 col-xl-4">
1366
+ <div class="card card-default p-4">
1367
+ <a href="javascript:0" class="media text-secondary" data-toggle="modal" data-target="#modal-contact">
1368
+ <img src="images/user/u-xl-3.jpg" class="mr-3 img-fluid rounded" alt="Avatar Image">
1369
+
1370
+ <div class="media-body">
1371
+ <h5 class="mt-0 mb-2 text-dark">Emma Smith</h5>
1372
+ <ul class="list-unstyled text-smoke">
1373
+ <li class="d-flex">
1374
+ <i class="mdi mdi-map mr-1"></i>
1375
+ <span>Nulla vel metus 15/178</span>
1376
+ </li>
1377
+ <li class="d-flex">
1378
+ <i class="mdi mdi-email mr-1"></i>
1379
+ <span>exmaple@email.com</span>
1380
+ </li>
1381
+ <li class="d-flex">
1382
+ <i class="mdi mdi-phone mr-1"></i>
1383
+ <span>(123) 888 777 632</span>
1384
+ </li>
1385
+ </ul>
1386
+
1387
+ </div>
1388
+ </a>
1389
+ </div>
1390
+ </div>
1391
+
1392
+ <div class="col-lg-6 col-xl-4">
1393
+ <div class="card card-default p-4">
1394
+ <a href="javascript:0" class="media text-secondary" data-toggle="modal" data-target="#modal-contact">
1395
+ <img src="images/user/u-xl-4.jpg" class="mr-3 img-fluid rounded" alt="Avatar Image">
1396
+
1397
+ <div class="media-body">
1398
+ <h5 class="mt-0 mb-2 text-dark">Emma Smith</h5>
1399
+ <ul class="list-unstyled text-smoke">
1400
+ <li class="d-flex">
1401
+ <i class="mdi mdi-map mr-1"></i>
1402
+ <span>Nulla vel metus 15/178</span>
1403
+ </li>
1404
+ <li class="d-flex">
1405
+ <i class="mdi mdi-email mr-1"></i>
1406
+ <span>exmaple@email.com</span>
1407
+ </li>
1408
+ <li class="d-flex">
1409
+ <i class="mdi mdi-phone mr-1"></i>
1410
+ <span>(123) 888 777 632</span>
1411
+ </li>
1412
+ </ul>
1413
+ </div>
1414
+ </a>
1415
+ </div>
1416
+ </div>
1417
+
1418
+ <div class="col-lg-6 col-xl-4">
1419
+ <div class="card card-default p-4">
1420
+ <a href="javascript:0" class="media text-secondary" data-toggle="modal" data-target="#modal-contact">
1421
+ <img src="images/user/u-xl-5.jpg" class="mr-3 img-fluid rounded" alt="Avatar Image">
1422
+
1423
+ <div class="media-body">
1424
+ <h5 class="mt-0 mb-2 text-dark">Emma Smith</h5>
1425
+ <ul class="list-unstyled text-smoke">
1426
+ <li class="d-flex">
1427
+ <i class="mdi mdi-map mr-1"></i>
1428
+ <span>Nulla vel metus 15/178</span>
1429
+ </li>
1430
+ <li class="d-flex">
1431
+ <i class="mdi mdi-email mr-1"></i>
1432
+ <span>exmaple@email.com</span>
1433
+ </li>
1434
+ <li class="d-flex">
1435
+ <i class="mdi mdi-phone mr-1"></i>
1436
+ <span>(123) 888 777 632</span>
1437
+ </li>
1438
+ </ul>
1439
+ </div>
1440
+ </a>
1441
+ </div>
1442
+ </div>
1443
+
1444
+ <div class="col-lg-6 col-xl-4">
1445
+ <div class="card card-default p-4">
1446
+ <a href="javascript:0" class="media text-secondary" data-toggle="modal" data-target="#modal-contact">
1447
+ <img src="images/user/u-xl-6.jpg" class="mr-3 img-fluid rounded" alt="Avatar Image">
1448
+ <div class="media-body">
1449
+ <h5 class="mt-0 mb-2 text-dark">Emma Smith</h5>
1450
+ <ul class="list-unstyled text-smoke">
1451
+ <li class="d-flex">
1452
+ <i class="mdi mdi-map mr-1"></i>
1453
+ <span>Nulla vel metus 15/178</span>
1454
+ </li>
1455
+ <li class="d-flex">
1456
+ <i class="mdi mdi-email mr-1"></i>
1457
+ <span>exmaple@email.com</span>
1458
+ </li>
1459
+ <li class="d-flex">
1460
+ <i class="mdi mdi-phone mr-1"></i>
1461
+ <span>(123) 888 777 632</span>
1462
+ </li>
1463
+ </ul>
1464
+ </div>
1465
+ </a>
1466
+ </div>
1467
+ </div>
1468
+
1469
+ <div class="col-lg-6 col-xl-4">
1470
+ <div class="card card-default p-4">
1471
+ <a href="javascript:0" class="media text-secondary" data-toggle="modal" data-target="#modal-contact">
1472
+ <img src="images/user/u-xl-7.jpg" class="mr-3 img-fluid rounded" alt="Avatar Image">
1473
+
1474
+ <div class="media-body">
1475
+ <h5 class="mt-0 mb-2 text-dark">Emma Smith</h5>
1476
+ <ul class="list-unstyled text-smoke">
1477
+ <li class="d-flex">
1478
+ <i class="mdi mdi-map mr-1"></i>
1479
+ <span>Nulla vel metus 15/178</span>
1480
+ </li>
1481
+ <li class="d-flex">
1482
+ <i class="mdi mdi-email mr-1"></i>
1483
+ <span>exmaple@email.com</span>
1484
+ </li>
1485
+ <li class="d-flex">
1486
+ <i class="mdi mdi-phone mr-1"></i>
1487
+ <span>(123) 888 777 632</span>
1488
+ </li>
1489
+ </ul>
1490
+ </div>
1491
+ </a>
1492
+ </div>
1493
+ </div>
1494
+
1495
+ <div class="col-lg-6 col-xl-4">
1496
+ <div class="card card-default p-4">
1497
+ <a href="javascript:0" class="media text-secondary" data-toggle="modal" data-target="#modal-contact">
1498
+ <img src="images/user/u-xl-8.jpg" class="mr-3 img-fluid rounded" alt="Avatar Image">
1499
+
1500
+ <div class="media-body">
1501
+ <h5 class="mt-0 mb-2 text-dark">Emma Smith</h5>
1502
+ <ul class="list-unstyled text-smoke">
1503
+ <li class="d-flex">
1504
+ <i class="mdi mdi-map mr-1"></i>
1505
+ <span>Nulla vel metus 15/178</span>
1506
+ </li>
1507
+ <li class="d-flex">
1508
+ <i class="mdi mdi-email mr-1"></i>
1509
+ <span>exmaple@email.com</span>
1510
+ </li>
1511
+ <li class="d-flex">
1512
+ <i class="mdi mdi-phone mr-1"></i>
1513
+ <span>(123) 888 777 632</span>
1514
+ </li>
1515
+ </ul>
1516
+ </div>
1517
+ </a>
1518
+ </div>
1519
+ </div>
1520
+
1521
+ <div class="col-lg-6 col-xl-4">
1522
+ <div class="card card-default p-4">
1523
+ <a href="javascript:0" class="media text-secondary" data-toggle="modal" data-target="#modal-contact">
1524
+ <img src="images/user/u-xl-9.jpg" class="mr-3 img-fluid rounded" alt="Avatar Image">
1525
+
1526
+ <div class="media-body">
1527
+ <h5 class="mt-0 mb-2 text-dark">Emma Smith</h5>
1528
+ <ul class="list-unstyled text-smoke">
1529
+ <li class="d-flex">
1530
+ <i class="mdi mdi-map mr-1"></i>
1531
+ <span>Nulla vel metus 15/178</span>
1532
+ </li>
1533
+ <li class="d-flex">
1534
+ <i class="mdi mdi-email mr-1"></i>
1535
+ <span>exmaple@email.com</span>
1536
+ </li>
1537
+ <li class="d-flex">
1538
+ <i class="mdi mdi-phone mr-1"></i>
1539
+ <span>(123) 888 777 632</span>
1540
+ </li>
1541
+ </ul>
1542
+ </div>
1543
+ </a>
1544
+ </div>
1545
+ </div>
1546
+
1547
+ <div class="col-lg-6 col-xl-4">
1548
+ <div class="card card-default p-4">
1549
+ <a href="javascript:0" class="media text-secondary" data-toggle="modal" data-target="#modal-contact">
1550
+ <img src="images/user/u-xl-10.jpg" class="mr-3 img-fluid rounded" alt="Avatar Image">
1551
+
1552
+ <div class="media-body">
1553
+ <h5 class="mt-0 mb-2 text-dark">Emma Smith</h5>
1554
+ <ul class="list-unstyled text-smoke">
1555
+ <li class="d-flex">
1556
+ <i class="mdi mdi-map mr-1"></i>
1557
+ <span>Nulla vel metus 15/178</span>
1558
+ </li>
1559
+ <li class="d-flex">
1560
+ <i class="mdi mdi-email mr-1"></i>
1561
+ <span>exmaple@email.com</span>
1562
+ </li>
1563
+ <li class="d-flex">
1564
+ <i class="mdi mdi-phone mr-1"></i>
1565
+ <span>(123) 888 777 632</span>
1566
+ </li>
1567
+ </ul>
1568
+ </div>
1569
+ </a>
1570
+ </div>
1571
+ </div>
1572
+
1573
+ <div class="col-lg-6 col-xl-4">
1574
+ <div class="card card-default p-4">
1575
+ <a href="javascript:0" class="media text-secondary" data-toggle="modal" data-target="#modal-contact">
1576
+ <img src="images/user/u-xl-11.jpg" class="mr-3 img-fluid rounded" alt="Avatar Image">
1577
+
1578
+ <div class="media-body">
1579
+ <h5 class="mt-0 mb-2 text-dark">Emma Smith</h5>
1580
+ <ul class="list-unstyled text-smoke">
1581
+ <li class="d-flex">
1582
+ <i class="mdi mdi-map mr-1"></i>
1583
+ <span>Nulla vel metus 15/178</span>
1584
+ </li>
1585
+ <li class="d-flex">
1586
+ <i class="mdi mdi-email mr-1"></i>
1587
+ <span>exmaple@email.com</span>
1588
+ </li>
1589
+ <li class="d-flex">
1590
+ <i class="mdi mdi-phone mr-1"></i>
1591
+ <span>(123) 888 777 632</span>
1592
+ </li>
1593
+ </ul>
1594
+ </div>
1595
+ </a>
1596
+ </div>
1597
+ </div>
1598
+
1599
+ <div class="col-lg-6 col-xl-4">
1600
+ <div class="card card-default p-4">
1601
+ <a href="javascript:0" class="media text-secondary" data-toggle="modal" data-target="#modal-contact">
1602
+ <img src="images/user/u-xl-12.jpg" class="mr-3 img-fluid rounded" alt="Avatar Image">
1603
+
1604
+ <div class="media-body">
1605
+ <h5 class="mt-0 mb-2 text-dark">Emma Smith</h5>
1606
+ <ul class="list-unstyled text-smoke">
1607
+ <li class="d-flex">
1608
+ <i class="mdi mdi-map mr-1"></i>
1609
+ <span>Nulla vel metus 15/178</span>
1610
+ </li>
1611
+ <li class="d-flex">
1612
+ <i class="mdi mdi-email mr-1"></i>
1613
+ <span>exmaple@email.com</span>
1614
+ </li>
1615
+ <li class="d-flex">
1616
+ <i class="mdi mdi-phone mr-1"></i>
1617
+ <span>(123) 888 777 632</span>
1618
+ </li>
1619
+ </ul>
1620
+ </div>
1621
+ </a>
1622
+ </div>
1623
+ </div>
1624
+ </div>
1625
+ </div>
1626
+ </div>
1627
+
1628
+
1629
+ <!-- Contact Modal -->
1630
+ <div class="modal fade" id="modal-contact" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
1631
+ aria-hidden="true">
1632
+ <div class="modal-dialog modal-dialog-centered modal-lg" role="document">
1633
+ <div class="modal-content">
1634
+ <div class="modal-header justify-content-end border-bottom-0">
1635
+ <button type="button" class="btn-edit-icon" data-dismiss="modal" aria-label="Close">
1636
+ <i class="mdi mdi-pencil"></i>
1637
+ </button>
1638
+
1639
+ <div class="dropdown">
1640
+ <button class="btn-dots-icon" type="button" id="dropdownMenuButton" data-toggle="dropdown"
1641
+ aria-haspopup="true" aria-expanded="false">
1642
+ <i class="mdi mdi-dots-vertical"></i>
1643
+ </button>
1644
+
1645
+ <div class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownMenuButton">
1646
+ <a class="dropdown-item" href="javascript:void(0)">Action</a>
1647
+ <a class="dropdown-item" href="javascript:void(0)">Another action</a>
1648
+ <a class="dropdown-item" href="javascript:void(0)">Something else here</a>
1649
+ </div>
1650
+ </div>
1651
+
1652
+ <button type="button" class="btn-close-icon" data-dismiss="modal" aria-label="Close">
1653
+ <i class="mdi mdi-close"></i>
1654
+ </button>
1655
+ </div>
1656
+
1657
+ <div class="modal-body pt-0">
1658
+ <div class="row no-gutters">
1659
+ <div class="col-md-6">
1660
+ <div class="profile-content-left px-4">
1661
+ <div class="card text-center px-0 border-0">
1662
+ <div class="card-img mx-auto">
1663
+ <img class="rounded-circle" src="images/user/u6.jpg" alt="user image">
1664
+ </div>
1665
+
1666
+ <div class="card-body">
1667
+ <h4 class="py-2">Albrecht Straub</h4>
1668
+ <p>Albrecht.straub@gmail.com</p>
1669
+ <a class="btn btn-primary btn-pill btn-lg my-4" href="javascript:void(0)">Follow</a>
1670
+ </div>
1671
+ </div>
1672
+
1673
+ <div class="d-flex justify-content-between ">
1674
+ <div class="text-center pb-4">
1675
+ <h6 class="pb-2">1503</h6>
1676
+ <p>Friends</p>
1677
+ </div>
1678
+
1679
+ <div class="text-center pb-4">
1680
+ <h6 class="pb-2">2905</h6>
1681
+ <p>Followers</p>
1682
+ </div>
1683
+
1684
+ <div class="text-center pb-4">
1685
+ <h6 class="pb-2">1200</h6>
1686
+ <p>Following</p>
1687
+ </div>
1688
+ </div>
1689
+ </div>
1690
+ </div>
1691
+
1692
+ <div class="col-md-6">
1693
+ <div class="contact-info px-4">
1694
+ <h4 class="mb-1">Contact Details</h4>
1695
+ <p class="text-dark font-weight-medium pt-4 mb-2">Email address</p>
1696
+ <p>Albrecht.straub@gmail.com</p>
1697
+ <p class="text-dark font-weight-medium pt-4 mb-2">Phone Number</p>
1698
+ <p>+99 9539 2641 31</p>
1699
+ <p class="text-dark font-weight-medium pt-4 mb-2">Birthday</p>
1700
+ <p>Nov 15, 1990</p>
1701
+ <p class="text-dark font-weight-medium pt-4 mb-2">Event</p>
1702
+ <p>Lorem, ipsum dolor</p>
1703
+ </div>
1704
+ </div>
1705
+ </div>
1706
+ </div>
1707
+ </div>
1708
+ </div>
1709
+ </div>
1710
+
1711
+ <!-- Add Contact Button -->
1712
+ <div class="modal fade" id="modal-add-contact" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle"
1713
+ aria-hidden="true">
1714
+ <div class="modal-dialog modal-dialog-centered modal-lg" role="document">
1715
+ <div class="modal-content">
1716
+ <form >
1717
+ <div class="modal-header px-4">
1718
+ <h5 class="modal-title" id="exampleModalCenterTitle">Create New Contact</h5>
1719
+ </div>
1720
+ <div class="modal-body px-4">
1721
+
1722
+ <div class="form-group row mb-6">
1723
+ <label for="coverImage" class="col-sm-4 col-lg-2 col-form-label">User Image</label>
1724
+ <div class="col-sm-8 col-lg-10">
1725
+ <div class="custom-file mb-1">
1726
+ <input type="file" class="custom-file-input" id="coverImage" required>
1727
+ <label class="custom-file-label" for="coverImage">Choose file...</label>
1728
+ <div class="invalid-feedback">Example invalid custom file feedback</div>
1729
+ </div>
1730
+ </div>
1731
+ </div>
1732
+
1733
+ <div class="row mb-2">
1734
+ <div class="col-lg-6">
1735
+ <div class="form-group">
1736
+ <label for="firstName">First name</label>
1737
+ <input type="text" class="form-control" id="firstName" value="Albrecht">
1738
+ </div>
1739
+ </div>
1740
+
1741
+ <div class="col-lg-6">
1742
+ <div class="form-group">
1743
+ <label for="lastName">Last name</label>
1744
+ <input type="text" class="form-control" id="lastName" value="Straub">
1745
+ </div>
1746
+ </div>
1747
+
1748
+ <div class="col-lg-6">
1749
+ <div class="form-group mb-4">
1750
+ <label for="userName">User name</label>
1751
+ <input type="text" class="form-control" id="userName" value="Doe">
1752
+ </div>
1753
+ </div>
1754
+
1755
+ <div class="col-lg-6">
1756
+ <div class="form-group mb-4">
1757
+ <label for="email">Email</label>
1758
+ <input type="email" class="form-control" id="email" value="albrecht.straub@gmail.com">
1759
+ </div>
1760
+ </div>
1761
+
1762
+ <div class="col-lg-6">
1763
+ <div class="form-group mb-4">
1764
+ <label for="Birthday">Birthday</label>
1765
+ <input type="text" class="form-control" id="Birthday" value="01-10-1993">
1766
+ </div>
1767
+ </div>
1768
+
1769
+ <div class="col-lg-6">
1770
+ <div class="form-group mb-4">
1771
+ <label for="event">Event</label>
1772
+ <input type="text" class="form-control" id="event" value="Some value for event">
1773
+ </div>
1774
+ </div>
1775
+ </div>
1776
+ </div>
1777
+ <div class="modal-footer px-4">
1778
+ <button type="button" class="btn btn-smoke btn-pill" data-dismiss="modal">Cancel</button>
1779
+ <button type="button" class="btn btn-primary btn-pill">Save Contact</button>
1780
+ </div>
1781
+ </form>
1782
+ </div>
1783
+ </div>
1784
+ </div></div>
1785
+
1786
+ </div>
1787
+
1788
+ <!-- Footer -->
1789
+ <footer class="footer mt-auto">
1790
+ <div class="copyright bg-white">
1791
+ <p>
1792
+ &copy; <span id="copy-year"></span> Copyright Mono Dashboard Bootstrap Template by <a class="text-primary" href="http://www.iamabdus.com/" target="_blank" >Abdus</a>.
1793
+ </p>
1794
+ </div>
1795
+ <script>
1796
+ var d = new Date();
1797
+ var year = d.getFullYear();
1798
+ document.getElementById("copy-year").innerHTML = year;
1799
+ </script>
1800
+ </footer>
1801
+
1802
+ </div>
1803
+ </div>
1804
+
1805
+ <!-- Card Offcanvas -->
1806
+ <div class="card card-offcanvas" id="contact-off" >
1807
+ <div class="card-header">
1808
+ <h2>Contacts</h2>
1809
+ <a href="#" class="btn btn-primary btn-pill px-4">Add New</a>
1810
+ </div>
1811
+ <div class="card-body">
1812
+
1813
+ <div class="mb-4">
1814
+ <input type="text" class="form-control form-control-lg form-control-secondary rounded-0" placeholder="Search contacts...">
1815
+ </div>
1816
+
1817
+ <div class="media media-sm">
1818
+ <div class="media-sm-wrapper">
1819
+ <a href="user-profile.html">
1820
+ <img src="images/user/user-sm-01.jpg" alt="User Image">
1821
+ <span class="active bg-primary"></span>
1822
+ </a>
1823
+ </div>
1824
+ <div class="media-body">
1825
+ <a href="user-profile.html">
1826
+ <span class="title">Selena Wagner</span>
1827
+ <span class="discribe">Designer</span>
1828
+ </a>
1829
+ </div>
1830
+ </div>
1831
+
1832
+ <div class="media media-sm">
1833
+ <div class="media-sm-wrapper">
1834
+ <a href="user-profile.html">
1835
+ <img src="images/user/user-sm-02.jpg" alt="User Image">
1836
+ <span class="active bg-primary"></span>
1837
+ </a>
1838
+ </div>
1839
+ <div class="media-body">
1840
+ <a href="user-profile.html">
1841
+ <span class="title">Walter Reuter</span>
1842
+ <span>Developer</span>
1843
+ </a>
1844
+ </div>
1845
+ </div>
1846
+
1847
+ <div class="media media-sm">
1848
+ <div class="media-sm-wrapper">
1849
+ <a href="user-profile.html">
1850
+ <img src="images/user/user-sm-03.jpg" alt="User Image">
1851
+ </a>
1852
+ </div>
1853
+ <div class="media-body">
1854
+ <a href="user-profile.html">
1855
+ <span class="title">Larissa Gebhardt</span>
1856
+ <span>Cyber Punk</span>
1857
+ </a>
1858
+ </div>
1859
+ </div>
1860
+
1861
+ <div class="media media-sm">
1862
+ <div class="media-sm-wrapper">
1863
+ <a href="user-profile.html">
1864
+ <img src="images/user/user-sm-04.jpg" alt="User Image">
1865
+ </a>
1866
+
1867
+ </div>
1868
+ <div class="media-body">
1869
+ <a href="user-profile.html">
1870
+ <span class="title">Albrecht Straub</span>
1871
+ <span>Photographer</span>
1872
+ </a>
1873
+ </div>
1874
+ </div>
1875
+
1876
+ <div class="media media-sm">
1877
+ <div class="media-sm-wrapper">
1878
+ <a href="user-profile.html">
1879
+ <img src="images/user/user-sm-05.jpg" alt="User Image">
1880
+ <span class="active bg-danger"></span>
1881
+ </a>
1882
+ </div>
1883
+ <div class="media-body">
1884
+ <a href="user-profile.html">
1885
+ <span class="title">Leopold Ebert</span>
1886
+ <span>Fashion Designer</span>
1887
+ </a>
1888
+ </div>
1889
+ </div>
1890
+
1891
+ <div class="media media-sm">
1892
+ <div class="media-sm-wrapper">
1893
+ <a href="user-profile.html">
1894
+ <img src="images/user/user-sm-06.jpg" alt="User Image">
1895
+ <span class="active bg-primary"></span>
1896
+ </a>
1897
+ </div>
1898
+ <div class="media-body">
1899
+ <a href="user-profile.html">
1900
+ <span class="title">Selena Wagner</span>
1901
+ <span>Photographer</span>
1902
+ </a>
1903
+ </div>
1904
+ </div>
1905
+
1906
+ </div>
1907
+ </div>
1908
+
1909
+
1910
+
1911
+
1912
+ <script src="plugins/jquery/jquery.min.js"></script>
1913
+ <script src="plugins/bootstrap/js/bootstrap.bundle.min.js"></script>
1914
+ <script src="plugins/simplebar/simplebar.min.js"></script>
1915
+ <script src="https://unpkg.com/hotkeys-js/dist/hotkeys.min.js"></script>
1916
+
1917
+
1918
+ <script src="js/mono.js"></script>
1919
+ <script src="js/chart.js"></script>
1920
+ <script src="js/map.js"></script>
1921
+ <script src="js/custom.js"></script>
1922
+
1923
+
1924
+
1925
+
1926
+ <!-- -->
1927
+
1928
+
1929
+ </body>
1930
+ </html>
css/style.css ADDED
The diff for this file is too large to render. See raw diff
 
css/style.css.map ADDED
The diff for this file is too large to render. See raw diff
 
data-tables.html ADDED
@@ -0,0 +1,2407 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+
3
+ <!--
4
+ // WEBSITE: https://themefisher.com
5
+ // TWITTER: https://twitter.com/themefisher
6
+ // FACEBOOK: https://www.facebook.com/themefisher
7
+ // GITHUB: https://github.com/themefisher/
8
+ -->
9
+
10
+ <html lang="en" dir="ltr">
11
+ <head>
12
+ <meta charset="utf-8" />
13
+ <meta http-equiv="X-UA-Compatible" content="IE=edge" />
14
+ <meta name="viewport" content="width=device-width, initial-scale=1" />
15
+
16
+ <title>Mono - Responsive Admin & Dashboard Template</title>
17
+
18
+ <!-- GOOGLE FONTS -->
19
+ <link href="https://fonts.googleapis.com/css?family=Karla:400,700|Roboto" rel="stylesheet">
20
+ <link href="plugins/material/css/materialdesignicons.min.css" rel="stylesheet" />
21
+ <link href="plugins/simplebar/simplebar.css" rel="stylesheet" />
22
+
23
+ <!-- PLUGINS CSS STYLE -->
24
+ <link href="plugins/nprogress/nprogress.css" rel="stylesheet" />
25
+
26
+
27
+ <link href="plugins/prism/prism.css" rel="stylesheet" />
28
+
29
+
30
+
31
+ <link href="plugins/DataTables/DataTables-1.10.18/css/jquery.dataTables.min.css" rel="stylesheet" />
32
+
33
+
34
+
35
+
36
+ <!-- MONO CSS -->
37
+ <link id="main-css-href" rel="stylesheet" href="css/style.css" />
38
+
39
+
40
+
41
+
42
+ <!-- FAVICON -->
43
+ <link href="images/favicon.png" rel="shortcut icon" />
44
+
45
+ <!--
46
+ HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries
47
+ -->
48
+ <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
49
+ <!--[if lt IE 9]>
50
+ <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
51
+ <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
52
+ <![endif]-->
53
+ <script src="plugins/nprogress/nprogress.js"></script>
54
+ </head>
55
+
56
+
57
+ <body class="navbar-fixed sidebar-fixed" id="body">
58
+ <script>
59
+ NProgress.configure({ showSpinner: false });
60
+ NProgress.start();
61
+ </script>
62
+
63
+
64
+
65
+ <!-- ====================================
66
+ ——— WRAPPER
67
+ ===================================== -->
68
+ <div class="wrapper">
69
+
70
+
71
+ <!-- ====================================
72
+ ——— LEFT SIDEBAR WITH OUT FOOTER
73
+ ===================================== -->
74
+ <aside class="left-sidebar sidebar-dark" id="left-sidebar">
75
+ <div id="sidebar" class="sidebar sidebar-with-footer">
76
+ <!-- Aplication Brand -->
77
+ <div class="app-brand">
78
+ <a href="/index.html">
79
+ <img src="images/logo.png" alt="Mono">
80
+ <span class="brand-name">MONO</span>
81
+ </a>
82
+ </div>
83
+ <!-- begin sidebar scrollbar -->
84
+ <div class="sidebar-left" data-simplebar style="height: 100%;">
85
+ <!-- sidebar menu -->
86
+ <ul class="nav sidebar-inner" id="sidebar-menu">
87
+
88
+
89
+
90
+ <li
91
+ >
92
+ <a class="sidenav-item-link" href="index.html">
93
+ <i class="mdi mdi-briefcase-account-outline"></i>
94
+ <span class="nav-text">Business Dashboard</span>
95
+ </a>
96
+ </li>
97
+
98
+
99
+
100
+
101
+
102
+ <li
103
+ >
104
+ <a class="sidenav-item-link" href="analytics.html">
105
+ <i class="mdi mdi-chart-line"></i>
106
+ <span class="nav-text">Analytics Dashboard</span>
107
+ </a>
108
+ </li>
109
+
110
+
111
+
112
+
113
+
114
+ <li class="section-title">
115
+ Apps
116
+ </li>
117
+
118
+
119
+
120
+
121
+
122
+ <li
123
+ >
124
+ <a class="sidenav-item-link" href="chat.html">
125
+ <i class="mdi mdi-wechat"></i>
126
+ <span class="nav-text">Chat</span>
127
+ </a>
128
+ </li>
129
+
130
+
131
+
132
+
133
+
134
+ <li
135
+ >
136
+ <a class="sidenav-item-link" href="contacts.html">
137
+ <i class="mdi mdi-phone"></i>
138
+ <span class="nav-text">Contacts</span>
139
+ </a>
140
+ </li>
141
+
142
+
143
+
144
+
145
+
146
+ <li
147
+ >
148
+ <a class="sidenav-item-link" href="team.html">
149
+ <i class="mdi mdi-account-group"></i>
150
+ <span class="nav-text">Team</span>
151
+ </a>
152
+ </li>
153
+
154
+
155
+
156
+
157
+
158
+ <li
159
+ >
160
+ <a class="sidenav-item-link" href="calendar.html">
161
+ <i class="mdi mdi-calendar-check"></i>
162
+ <span class="nav-text">Calendar</span>
163
+ </a>
164
+ </li>
165
+
166
+
167
+
168
+
169
+
170
+ <li class="has-sub" >
171
+ <a class="sidenav-item-link" href="javascript:void(0)" data-toggle="collapse" data-target="#email"
172
+ aria-expanded="false" aria-controls="email">
173
+ <i class="mdi mdi-email"></i>
174
+ <span class="nav-text">email</span> <b class="caret"></b>
175
+ </a>
176
+ <ul class="collapse" id="email"
177
+ data-parent="#sidebar-menu">
178
+ <div class="sub-menu">
179
+
180
+
181
+
182
+ <li >
183
+ <a class="sidenav-item-link" href="email-inbox.html">
184
+ <span class="nav-text">Email Inbox</span>
185
+
186
+ </a>
187
+ </li>
188
+
189
+
190
+
191
+
192
+
193
+
194
+ <li >
195
+ <a class="sidenav-item-link" href="email-details.html">
196
+ <span class="nav-text">Email Details</span>
197
+
198
+ </a>
199
+ </li>
200
+
201
+
202
+
203
+
204
+
205
+
206
+ <li >
207
+ <a class="sidenav-item-link" href="email-compose.html">
208
+ <span class="nav-text">Email Compose</span>
209
+
210
+ </a>
211
+ </li>
212
+
213
+
214
+
215
+
216
+ </div>
217
+ </ul>
218
+ </li>
219
+
220
+
221
+
222
+
223
+
224
+ <li class="section-title">
225
+ UI Elements
226
+ </li>
227
+
228
+
229
+
230
+
231
+
232
+ <li class="has-sub active expand" >
233
+ <a class="sidenav-item-link" href="javascript:void(0)" data-toggle="collapse" data-target="#ui-elements"
234
+ aria-expanded="false" aria-controls="ui-elements">
235
+ <i class="mdi mdi-folder-outline"></i>
236
+ <span class="nav-text">UI Components</span> <b class="caret"></b>
237
+ </a>
238
+ <ul class="collapse show" id="ui-elements"
239
+ data-parent="#sidebar-menu">
240
+ <div class="sub-menu">
241
+
242
+
243
+
244
+ <li >
245
+ <a class="sidenav-item-link" href="alert.html">
246
+ <span class="nav-text">Alert</span>
247
+
248
+ </a>
249
+ </li>
250
+
251
+
252
+
253
+
254
+
255
+
256
+ <li >
257
+ <a class="sidenav-item-link" href="badge.html">
258
+ <span class="nav-text">Badge</span>
259
+
260
+ </a>
261
+ </li>
262
+
263
+
264
+
265
+
266
+
267
+
268
+ <li >
269
+ <a class="sidenav-item-link" href="breadcrumb.html">
270
+ <span class="nav-text">Breadcrumb</span>
271
+
272
+ </a>
273
+ </li>
274
+
275
+
276
+
277
+
278
+
279
+ <li class="has-sub" >
280
+ <a class="sidenav-item-link" href="javascript:void(0)" data-toggle="collapse" data-target="#buttons"
281
+ aria-expanded="false" aria-controls="buttons">
282
+ <span class="nav-text">Buttons</span> <b class="caret"></b>
283
+ </a>
284
+ <ul class="collapse" id="buttons">
285
+ <div class="sub-menu">
286
+
287
+ <li >
288
+ <a href="button-default.html">Button Default</a>
289
+ </li>
290
+
291
+ <li >
292
+ <a href="button-dropdown.html">Button Dropdown</a>
293
+ </li>
294
+
295
+ <li >
296
+ <a href="button-group.html">Button Group</a>
297
+ </li>
298
+
299
+ <li >
300
+ <a href="button-social.html">Button Social</a>
301
+ </li>
302
+
303
+ <li >
304
+ <a href="button-loading.html">Button Loading</a>
305
+ </li>
306
+
307
+ </div>
308
+ </ul>
309
+ </li>
310
+
311
+
312
+
313
+
314
+
315
+ <li >
316
+ <a class="sidenav-item-link" href="card.html">
317
+ <span class="nav-text">Card</span>
318
+
319
+ </a>
320
+ </li>
321
+
322
+
323
+
324
+
325
+
326
+
327
+ <li >
328
+ <a class="sidenav-item-link" href="carousel.html">
329
+ <span class="nav-text">Carousel</span>
330
+
331
+ </a>
332
+ </li>
333
+
334
+
335
+
336
+
337
+
338
+
339
+ <li >
340
+ <a class="sidenav-item-link" href="collapse.html">
341
+ <span class="nav-text">Collapse</span>
342
+
343
+ </a>
344
+ </li>
345
+
346
+
347
+
348
+
349
+
350
+
351
+ <li >
352
+ <a class="sidenav-item-link" href="editor.html">
353
+ <span class="nav-text">Editor</span>
354
+
355
+ </a>
356
+ </li>
357
+
358
+
359
+
360
+
361
+
362
+
363
+ <li >
364
+ <a class="sidenav-item-link" href="list-group.html">
365
+ <span class="nav-text">List Group</span>
366
+
367
+ </a>
368
+ </li>
369
+
370
+
371
+
372
+
373
+
374
+
375
+ <li >
376
+ <a class="sidenav-item-link" href="modal.html">
377
+ <span class="nav-text">Modal</span>
378
+
379
+ </a>
380
+ </li>
381
+
382
+
383
+
384
+
385
+
386
+
387
+ <li >
388
+ <a class="sidenav-item-link" href="pagination.html">
389
+ <span class="nav-text">Pagination</span>
390
+
391
+ </a>
392
+ </li>
393
+
394
+
395
+
396
+
397
+
398
+
399
+ <li >
400
+ <a class="sidenav-item-link" href="popover-tooltip.html">
401
+ <span class="nav-text">Popover & Tooltip</span>
402
+
403
+ </a>
404
+ </li>
405
+
406
+
407
+
408
+
409
+
410
+
411
+ <li >
412
+ <a class="sidenav-item-link" href="progress-bar.html">
413
+ <span class="nav-text">Progress Bar</span>
414
+
415
+ </a>
416
+ </li>
417
+
418
+
419
+
420
+
421
+
422
+
423
+ <li >
424
+ <a class="sidenav-item-link" href="spinner.html">
425
+ <span class="nav-text">Spinner</span>
426
+
427
+ </a>
428
+ </li>
429
+
430
+
431
+
432
+
433
+
434
+
435
+ <li >
436
+ <a class="sidenav-item-link" href="switches.html">
437
+ <span class="nav-text">Switches</span>
438
+
439
+ </a>
440
+ </li>
441
+
442
+
443
+
444
+
445
+
446
+ <li class="has-sub active expand" >
447
+ <a class="sidenav-item-link" href="javascript:void(0)" data-toggle="collapse" data-target="#tables"
448
+ aria-expanded="false" aria-controls="tables">
449
+ <span class="nav-text">Tables</span> <b class="caret"></b>
450
+ </a>
451
+ <ul class="collapse show" id="tables">
452
+ <div class="sub-menu">
453
+
454
+ <li >
455
+ <a href="bootstarp-tables.html">Bootstrap Tables</a>
456
+ </li>
457
+
458
+ <li class="active" >
459
+ <a href="data-tables.html">Data Tables</a>
460
+ </li>
461
+
462
+ </div>
463
+ </ul>
464
+ </li>
465
+
466
+
467
+
468
+
469
+
470
+ <li >
471
+ <a class="sidenav-item-link" href="tab.html">
472
+ <span class="nav-text">Tab</span>
473
+
474
+ </a>
475
+ </li>
476
+
477
+
478
+
479
+
480
+
481
+
482
+ <li >
483
+ <a class="sidenav-item-link" href="toaster.html">
484
+ <span class="nav-text">Toaster</span>
485
+
486
+ </a>
487
+ </li>
488
+
489
+
490
+
491
+
492
+
493
+ <li class="has-sub" >
494
+ <a class="sidenav-item-link" href="javascript:void(0)" data-toggle="collapse" data-target="#icons"
495
+ aria-expanded="false" aria-controls="icons">
496
+ <span class="nav-text">Icons</span> <b class="caret"></b>
497
+ </a>
498
+ <ul class="collapse" id="icons">
499
+ <div class="sub-menu">
500
+
501
+ <li >
502
+ <a href="material-icons.html">Material Icon</a>
503
+ </li>
504
+
505
+ <li >
506
+ <a href="flag-icons.html">Flag Icon</a>
507
+ </li>
508
+
509
+ </div>
510
+ </ul>
511
+ </li>
512
+
513
+
514
+
515
+
516
+ <li class="has-sub" >
517
+ <a class="sidenav-item-link" href="javascript:void(0)" data-toggle="collapse" data-target="#forms"
518
+ aria-expanded="false" aria-controls="forms">
519
+ <span class="nav-text">Forms</span> <b class="caret"></b>
520
+ </a>
521
+ <ul class="collapse" id="forms">
522
+ <div class="sub-menu">
523
+
524
+ <li >
525
+ <a href="basic-input.html">Basic Input</a>
526
+ </li>
527
+
528
+ <li >
529
+ <a href="input-group.html">Input Group</a>
530
+ </li>
531
+
532
+ <li >
533
+ <a href="checkbox-radio.html">Checkbox & Radio</a>
534
+ </li>
535
+
536
+ <li >
537
+ <a href="form-validation.html">Form Validation</a>
538
+ </li>
539
+
540
+ <li >
541
+ <a href="form-advance.html">Form Advance</a>
542
+ </li>
543
+
544
+ </div>
545
+ </ul>
546
+ </li>
547
+
548
+
549
+
550
+
551
+ <li class="has-sub" >
552
+ <a class="sidenav-item-link" href="javascript:void(0)" data-toggle="collapse" data-target="#maps"
553
+ aria-expanded="false" aria-controls="maps">
554
+ <span class="nav-text">Maps</span> <b class="caret"></b>
555
+ </a>
556
+ <ul class="collapse" id="maps">
557
+ <div class="sub-menu">
558
+
559
+ <li >
560
+ <a href="google-maps.html">Google Map</a>
561
+ </li>
562
+
563
+ <li >
564
+ <a href="vector-maps.html">Vector Map</a>
565
+ </li>
566
+
567
+ </div>
568
+ </ul>
569
+ </li>
570
+
571
+
572
+
573
+
574
+ <li class="has-sub" >
575
+ <a class="sidenav-item-link" href="javascript:void(0)" data-toggle="collapse" data-target="#widgets"
576
+ aria-expanded="false" aria-controls="widgets">
577
+ <span class="nav-text">Widgets</span> <b class="caret"></b>
578
+ </a>
579
+ <ul class="collapse" id="widgets">
580
+ <div class="sub-menu">
581
+
582
+ <li >
583
+ <a href="widgets-general.html">General Widget</a>
584
+ </li>
585
+
586
+ <li >
587
+ <a href="widgets-chart.html">Chart Widget</a>
588
+ </li>
589
+
590
+ </div>
591
+ </ul>
592
+ </li>
593
+
594
+
595
+
596
+ </div>
597
+ </ul>
598
+ </li>
599
+
600
+
601
+
602
+
603
+
604
+ <li class="has-sub" >
605
+ <a class="sidenav-item-link" href="javascript:void(0)" data-toggle="collapse" data-target="#charts"
606
+ aria-expanded="false" aria-controls="charts">
607
+ <i class="mdi mdi-chart-pie"></i>
608
+ <span class="nav-text">Charts</span> <b class="caret"></b>
609
+ </a>
610
+ <ul class="collapse" id="charts"
611
+ data-parent="#sidebar-menu">
612
+ <div class="sub-menu">
613
+
614
+
615
+
616
+ <li >
617
+ <a class="sidenav-item-link" href="apex-charts.html">
618
+ <span class="nav-text">Apex Charts</span>
619
+
620
+ </a>
621
+ </li>
622
+
623
+
624
+
625
+
626
+ </div>
627
+ </ul>
628
+ </li>
629
+
630
+
631
+
632
+
633
+
634
+ <li class="section-title">
635
+ Pages
636
+ </li>
637
+
638
+
639
+
640
+
641
+
642
+ <li class="has-sub" >
643
+ <a class="sidenav-item-link" href="javascript:void(0)" data-toggle="collapse" data-target="#users"
644
+ aria-expanded="false" aria-controls="users">
645
+ <i class="mdi mdi-image-filter-none"></i>
646
+ <span class="nav-text">User</span> <b class="caret"></b>
647
+ </a>
648
+ <ul class="collapse" id="users"
649
+ data-parent="#sidebar-menu">
650
+ <div class="sub-menu">
651
+
652
+
653
+
654
+ <li >
655
+ <a class="sidenav-item-link" href="user-profile.html">
656
+ <span class="nav-text">User Profile</span>
657
+
658
+ </a>
659
+ </li>
660
+
661
+
662
+
663
+
664
+
665
+
666
+ <li >
667
+ <a class="sidenav-item-link" href="user-activities.html">
668
+ <span class="nav-text">User Activities</span>
669
+
670
+ </a>
671
+ </li>
672
+
673
+
674
+
675
+
676
+
677
+
678
+ <li >
679
+ <a class="sidenav-item-link" href="user-profile-settings.html">
680
+ <span class="nav-text">User Profile Settings</span>
681
+
682
+ </a>
683
+ </li>
684
+
685
+
686
+
687
+
688
+
689
+
690
+ <li >
691
+ <a class="sidenav-item-link" href="user-account-settings.html">
692
+ <span class="nav-text">User Account Settings</span>
693
+
694
+ </a>
695
+ </li>
696
+
697
+
698
+
699
+
700
+
701
+
702
+ <li >
703
+ <a class="sidenav-item-link" href="user-planing-settings.html">
704
+ <span class="nav-text">User Planing Settings</span>
705
+
706
+ </a>
707
+ </li>
708
+
709
+
710
+
711
+
712
+
713
+
714
+ <li >
715
+ <a class="sidenav-item-link" href="user-billing.html">
716
+ <span class="nav-text">User billing</span>
717
+
718
+ </a>
719
+ </li>
720
+
721
+
722
+
723
+
724
+
725
+
726
+ <li >
727
+ <a class="sidenav-item-link" href="user-notify-settings.html">
728
+ <span class="nav-text">User Notify Settings</span>
729
+
730
+ </a>
731
+ </li>
732
+
733
+
734
+
735
+
736
+ </div>
737
+ </ul>
738
+ </li>
739
+
740
+
741
+
742
+
743
+
744
+ <li class="has-sub" >
745
+ <a class="sidenav-item-link" href="javascript:void(0)" data-toggle="collapse" data-target="#authentication"
746
+ aria-expanded="false" aria-controls="authentication">
747
+ <i class="mdi mdi-account"></i>
748
+ <span class="nav-text">Authentication</span> <b class="caret"></b>
749
+ </a>
750
+ <ul class="collapse" id="authentication"
751
+ data-parent="#sidebar-menu">
752
+ <div class="sub-menu">
753
+
754
+
755
+
756
+ <li >
757
+ <a class="sidenav-item-link" href="sign-in.html">
758
+ <span class="nav-text">Sign In</span>
759
+
760
+ </a>
761
+ </li>
762
+
763
+
764
+
765
+
766
+
767
+
768
+ <li >
769
+ <a class="sidenav-item-link" href="sign-up.html">
770
+ <span class="nav-text">Sign Up</span>
771
+
772
+ </a>
773
+ </li>
774
+
775
+
776
+
777
+
778
+
779
+
780
+ <li >
781
+ <a class="sidenav-item-link" href="reset-password.html">
782
+ <span class="nav-text">Reset Password</span>
783
+
784
+ </a>
785
+ </li>
786
+
787
+
788
+
789
+
790
+ </div>
791
+ </ul>
792
+ </li>
793
+
794
+
795
+
796
+
797
+
798
+ <li class="has-sub" >
799
+ <a class="sidenav-item-link" href="javascript:void(0)" data-toggle="collapse" data-target="#other-page"
800
+ aria-expanded="false" aria-controls="other-page">
801
+ <i class="mdi mdi-file-multiple"></i>
802
+ <span class="nav-text">Other pages</span> <b class="caret"></b>
803
+ </a>
804
+ <ul class="collapse" id="other-page"
805
+ data-parent="#sidebar-menu">
806
+ <div class="sub-menu">
807
+
808
+
809
+
810
+ <li >
811
+ <a class="sidenav-item-link" href="invoice.html">
812
+ <span class="nav-text">Invoice</span>
813
+
814
+ </a>
815
+ </li>
816
+
817
+
818
+
819
+
820
+
821
+
822
+ <li >
823
+ <a class="sidenav-item-link" href="404.html">
824
+ <span class="nav-text">404 page</span>
825
+
826
+ </a>
827
+ </li>
828
+
829
+
830
+
831
+
832
+
833
+
834
+ <li >
835
+ <a class="sidenav-item-link" href="page-comingsoon.html">
836
+ <span class="nav-text">Coming Soon</span>
837
+
838
+ </a>
839
+ </li>
840
+
841
+
842
+
843
+
844
+
845
+
846
+ <li >
847
+ <a class="sidenav-item-link" href="page-maintenance.html">
848
+ <span class="nav-text">Maintenance</span>
849
+
850
+ </a>
851
+ </li>
852
+
853
+
854
+
855
+
856
+ </div>
857
+ </ul>
858
+ </li>
859
+
860
+
861
+
862
+
863
+
864
+ <li class="section-title">
865
+ Documentation
866
+ </li>
867
+
868
+
869
+
870
+
871
+
872
+ <li
873
+ >
874
+ <a class="sidenav-item-link" href="getting-started.html">
875
+ <i class="mdi mdi-airplane"></i>
876
+ <span class="nav-text">Getting Started</span>
877
+ </a>
878
+ </li>
879
+
880
+
881
+
882
+
883
+
884
+ <li class="has-sub" >
885
+ <a class="sidenav-item-link" href="javascript:void(0)" data-toggle="collapse" data-target="#customization"
886
+ aria-expanded="false" aria-controls="customization">
887
+ <i class="mdi mdi-square-edit-outline"></i>
888
+ <span class="nav-text">Customization</span> <b class="caret"></b>
889
+ </a>
890
+ <ul class="collapse" id="customization"
891
+ data-parent="#sidebar-menu">
892
+ <div class="sub-menu">
893
+
894
+
895
+
896
+ <li >
897
+ <a class="sidenav-item-link" href="navbar-customization.html">
898
+ <span class="nav-text">Navbar</span>
899
+
900
+ </a>
901
+ </li>
902
+
903
+
904
+
905
+
906
+
907
+
908
+ <li >
909
+ <a class="sidenav-item-link" href="sidebar-customization.html">
910
+ <span class="nav-text">Sidebar</span>
911
+
912
+ </a>
913
+ </li>
914
+
915
+
916
+
917
+
918
+
919
+
920
+ <li >
921
+ <a class="sidenav-item-link" href="styling.html">
922
+ <span class="nav-text">Styling</span>
923
+
924
+ </a>
925
+ </li>
926
+
927
+
928
+
929
+
930
+ </div>
931
+ </ul>
932
+ </li>
933
+
934
+
935
+
936
+ </ul>
937
+
938
+ </div>
939
+
940
+ <div class="sidebar-footer">
941
+ <div class="sidebar-footer-content">
942
+ <ul class="d-flex">
943
+ <li>
944
+ <a href="user-account-settings.html" data-toggle="tooltip" title="Profile settings"><i class="mdi mdi-settings"></i></a></li>
945
+ <li>
946
+ <a href="#" data-toggle="tooltip" title="No chat messages"><i class="mdi mdi-chat-processing"></i></a>
947
+ </li>
948
+ </ul>
949
+ </div>
950
+ </div>
951
+ </div>
952
+ </aside>
953
+
954
+
955
+
956
+ <!-- ====================================
957
+ ——— PAGE WRAPPER
958
+ ===================================== -->
959
+ <div class="page-wrapper">
960
+
961
+ <!-- Header -->
962
+ <header class="main-header" id="header">
963
+ <nav class="navbar navbar-expand-lg navbar-light" id="navbar">
964
+ <!-- Sidebar toggle button -->
965
+ <button id="sidebar-toggler" class="sidebar-toggle">
966
+ <span class="sr-only">Toggle navigation</span>
967
+ </button>
968
+
969
+ <span class="page-title">data tables</span>
970
+
971
+ <div class="navbar-right ">
972
+
973
+ <!-- search form -->
974
+ <div class="search-form">
975
+ <form action="index.html" method="get">
976
+ <div class="input-group input-group-sm" id="input-group-search">
977
+ <input type="text" autocomplete="off" name="query" id="search-input" class="form-control" placeholder="Search..." />
978
+ <div class="input-group-append">
979
+ <button class="btn" type="button">/</button>
980
+ </div>
981
+ </div>
982
+ </form>
983
+ <ul class="dropdown-menu dropdown-menu-search">
984
+
985
+ <li class="nav-item">
986
+ <a class="nav-link" href="index.html">Morbi leo risus</a>
987
+ </li>
988
+ <li class="nav-item">
989
+ <a class="nav-link" href="index.html">Dapibus ac facilisis in</a>
990
+ </li>
991
+ <li class="nav-item">
992
+ <a class="nav-link" href="index.html">Porta ac consectetur ac</a>
993
+ </li>
994
+ <li class="nav-item">
995
+ <a class="nav-link" href="index.html">Vestibulum at eros</a>
996
+ </li>
997
+
998
+ </ul>
999
+
1000
+ </div>
1001
+
1002
+ <ul class="nav navbar-nav">
1003
+ <!-- Offcanvas -->
1004
+ <li class="custom-dropdown">
1005
+ <a class="offcanvas-toggler active custom-dropdown-toggler" data-offcanvas="contact-off" href="javascript:" >
1006
+ <i class="mdi mdi-contacts icon"></i>
1007
+ </a>
1008
+ </li>
1009
+ <li class="custom-dropdown">
1010
+ <button class="notify-toggler custom-dropdown-toggler">
1011
+ <i class="mdi mdi-bell-outline icon"></i>
1012
+ <span class="badge badge-xs rounded-circle">21</span>
1013
+ </button>
1014
+ <div class="dropdown-notify">
1015
+
1016
+ <header>
1017
+ <div class="nav nav-underline" id="nav-tab" role="tablist">
1018
+ <a class="nav-item nav-link active" id="all-tabs" data-toggle="tab" href="#all" role="tab" aria-controls="nav-home"
1019
+ aria-selected="true">All (5)</a>
1020
+ <a class="nav-item nav-link" id="message-tab" data-toggle="tab" href="#message" role="tab" aria-controls="nav-profile"
1021
+ aria-selected="false">Msgs (4)</a>
1022
+ <a class="nav-item nav-link" id="other-tab" data-toggle="tab" href="#other" role="tab" aria-controls="nav-contact"
1023
+ aria-selected="false">Others (3)</a>
1024
+ </div>
1025
+ </header>
1026
+
1027
+ <div class="" data-simplebar style="height: 325px;">
1028
+ <div class="tab-content" id="myTabContent">
1029
+
1030
+ <div class="tab-pane fade show active" id="all" role="tabpanel" aria-labelledby="all-tabs">
1031
+
1032
+ <div class="media media-sm bg-warning-10 p-4 mb-0">
1033
+ <div class="media-sm-wrapper">
1034
+ <a href="user-profile.html">
1035
+ <img src="images/user/user-sm-02.jpg" alt="User Image">
1036
+ </a>
1037
+ </div>
1038
+ <div class="media-body">
1039
+ <a href="user-profile.html">
1040
+ <span class="title mb-0">John Doe</span>
1041
+ <span class="discribe">Extremity sweetness difficult behaviour he of. On disposal of as landlord horrible. Afraid at highly months do things on at.</span>
1042
+ <span class="time">
1043
+ <time>Just now</time>...
1044
+ </span>
1045
+ </a>
1046
+ </div>
1047
+ </div>
1048
+
1049
+ <div class="media media-sm p-4 bg-light mb-0">
1050
+ <div class="media-sm-wrapper bg-primary">
1051
+ <a href="user-profile.html">
1052
+ <i class="mdi mdi-calendar-check-outline"></i>
1053
+ </a>
1054
+ </div>
1055
+ <div class="media-body">
1056
+ <a href="user-profile.html">
1057
+ <span class="title mb-0">New event added</span>
1058
+ <span class="discribe">1/3/2014 (1pm - 2pm)</span>
1059
+ <span class="time">
1060
+ <time>10 min ago...</time>...
1061
+ </span>
1062
+ </a>
1063
+ </div>
1064
+ </div>
1065
+
1066
+ <div class="media media-sm p-4 mb-0">
1067
+ <div class="media-sm-wrapper">
1068
+ <a href="user-profile.html">
1069
+ <img src="images/user/user-sm-03.jpg" alt="User Image">
1070
+ </a>
1071
+ </div>
1072
+ <div class="media-body">
1073
+ <a href="user-profile.html">
1074
+ <span class="title mb-0">Sagge Hudson</span>
1075
+ <span class="discribe">On disposal of as landlord Afraid at highly months do things on at.</span>
1076
+ <span class="time">
1077
+ <time>1 hrs ago</time>...
1078
+ </span>
1079
+ </a>
1080
+ </div>
1081
+ </div>
1082
+
1083
+ <div class="media media-sm p-4 mb-0">
1084
+ <div class="media-sm-wrapper bg-info-dark">
1085
+ <a href="user-profile.html">
1086
+ <i class="mdi mdi-account-multiple-check"></i>
1087
+ </a>
1088
+ </div>
1089
+ <div class="media-body">
1090
+ <a href="user-profile.html">
1091
+ <span class="title mb-0">Add request</span>
1092
+ <span class="discribe">Add Dany Jones as your contact.</span>
1093
+ <div class="buttons">
1094
+ <a href="#" class="btn btn-sm btn-success shadow-none text-white">accept</a>
1095
+ <a href="#" class="btn btn-sm shadow-none">delete</a>
1096
+ </div>
1097
+ <span class="time">
1098
+ <time>6 hrs ago</time>...
1099
+ </span>
1100
+ </a>
1101
+ </div>
1102
+ </div>
1103
+
1104
+ <div class="media media-sm p-4 mb-0">
1105
+ <div class="media-sm-wrapper bg-info">
1106
+ <a href="user-profile.html">
1107
+ <i class="mdi mdi-playlist-check"></i>
1108
+ </a>
1109
+ </div>
1110
+ <div class="media-body">
1111
+ <a href="user-profile.html">
1112
+ <span class="title mb-0">Task complete</span>
1113
+ <span class="discribe">Afraid at highly months do things on at.</span>
1114
+ <span class="time">
1115
+ <time>1 hrs ago</time>...
1116
+ </span>
1117
+ </a>
1118
+ </div>
1119
+ </div>
1120
+
1121
+ </div>
1122
+
1123
+ <div class="tab-pane fade" id="message" role="tabpanel" aria-labelledby="message-tab">
1124
+
1125
+ <div class="media media-sm p-4 mb-0">
1126
+ <div class="media-sm-wrapper">
1127
+ <a href="user-profile.html">
1128
+ <img src="images/user/user-sm-01.jpg" alt="User Image">
1129
+ </a>
1130
+ </div>
1131
+ <div class="media-body">
1132
+ <a href="user-profile.html">
1133
+ <span class="title mb-0">Selena Wagner</span>
1134
+ <span class="discribe">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</span>
1135
+ <span class="time">
1136
+ <time>15 min ago</time>...
1137
+ </span>
1138
+ </a>
1139
+ </div>
1140
+ </div>
1141
+
1142
+ <div class="media media-sm p-4 mb-0">
1143
+ <div class="media-sm-wrapper">
1144
+ <a href="user-profile.html">
1145
+ <img src="images/user/user-sm-03.jpg" alt="User Image">
1146
+ </a>
1147
+ </div>
1148
+ <div class="media-body">
1149
+ <a href="user-profile.html">
1150
+ <span class="title mb-0">Sagge Hudson</span>
1151
+ <span class="discribe">On disposal of as landlord Afraid at highly months do things on at.</span>
1152
+ <span class="time">
1153
+ <time>1 hrs ago</time>...
1154
+ </span>
1155
+ </a>
1156
+ </div>
1157
+ </div>
1158
+
1159
+ <div class="media media-sm bg-warning-10 p-4 mb-0">
1160
+ <div class="media-sm-wrapper">
1161
+ <a href="user-profile.html">
1162
+ <img src="images/user/user-sm-02.jpg" alt="User Image">
1163
+ </a>
1164
+ </div>
1165
+ <div class="media-body">
1166
+ <a href="user-profile.html">
1167
+ <span class="title mb-0">John Doe</span>
1168
+ <span class="discribe">Extremity sweetness difficult behaviour he of. On disposal of as landlord horrible. Afraid
1169
+ at highly months do things on at.</span>
1170
+ <span class="time">
1171
+ <time>Just now</time>...
1172
+ </span>
1173
+ </a>
1174
+ </div>
1175
+ </div>
1176
+
1177
+ <div class="media media-sm p-4 mb-0">
1178
+ <div class="media-sm-wrapper">
1179
+ <a href="user-profile.html">
1180
+ <img src="images/user/user-sm-04.jpg" alt="User Image">
1181
+ </a>
1182
+ </div>
1183
+ <div class="media-body">
1184
+ <a href="user-profile.html">
1185
+ <span class="title mb-0">Albrecht Straub</span>
1186
+ <span class="discribe"> Beatae quia natus assumenda laboriosam, nisi perferendis aliquid consectetur expedita non tenetur.</span>
1187
+ <span class="time">
1188
+ <time>Just now</time>...
1189
+ </span>
1190
+ </a>
1191
+ </div>
1192
+ </div>
1193
+
1194
+ </div>
1195
+ <div class="tab-pane fade" id="other" role="tabpanel" aria-labelledby="contact-tab">
1196
+
1197
+ <div class="media media-sm p-4 bg-light mb-0">
1198
+ <div class="media-sm-wrapper bg-primary">
1199
+ <a href="user-profile.html">
1200
+ <i class="mdi mdi-calendar-check-outline"></i>
1201
+ </a>
1202
+ </div>
1203
+ <div class="media-body">
1204
+ <a href="user-profile.html">
1205
+ <span class="title mb-0">New event added</span>
1206
+ <span class="discribe">1/3/2014 (1pm - 2pm)</span>
1207
+ <span class="time">
1208
+ <time>10 min ago...</time>...
1209
+ </span>
1210
+ </a>
1211
+ </div>
1212
+ </div>
1213
+
1214
+ <div class="media media-sm p-4 mb-0">
1215
+ <div class="media-sm-wrapper bg-info-dark">
1216
+ <a href="user-profile.html">
1217
+ <i class="mdi mdi-account-multiple-check"></i>
1218
+ </a>
1219
+ </div>
1220
+ <div class="media-body">
1221
+ <a href="user-profile.html">
1222
+ <span class="title mb-0">Add request</span>
1223
+ <span class="discribe">Add Dany Jones as your contact.</span>
1224
+ <div class="buttons">
1225
+ <a href="#" class="btn btn-sm btn-success shadow-none text-white">accept</a>
1226
+ <a href="#" class="btn btn-sm shadow-none">delete</a>
1227
+ </div>
1228
+ <span class="time">
1229
+ <time>6 hrs ago</time>...
1230
+ </span>
1231
+ </a>
1232
+ </div>
1233
+ </div>
1234
+
1235
+ <div class="media media-sm p-4 mb-0">
1236
+ <div class="media-sm-wrapper bg-info">
1237
+ <a href="user-profile.html">
1238
+ <i class="mdi mdi-playlist-check"></i>
1239
+ </a>
1240
+ </div>
1241
+ <div class="media-body">
1242
+ <a href="user-profile.html">
1243
+ <span class="title mb-0">Task complete</span>
1244
+ <span class="discribe">Afraid at highly months do things on at.</span>
1245
+ <span class="time">
1246
+ <time>1 hrs ago</time>...
1247
+ </span>
1248
+ </a>
1249
+ </div>
1250
+ </div>
1251
+
1252
+ </div>
1253
+ </div>
1254
+ </div>
1255
+
1256
+ <footer class="border-top dropdown-notify-footer">
1257
+ <div class="d-flex justify-content-between align-items-center py-2 px-4">
1258
+ <span>Last updated 3 min ago</span>
1259
+ <a id="refress-button" href="javascript:" class="btn mdi mdi-cached btn-refress"></a>
1260
+ </div>
1261
+ </footer>
1262
+ </div>
1263
+ </li>
1264
+ <!-- User Account -->
1265
+ <li class="dropdown user-menu">
1266
+ <button class="dropdown-toggle nav-link" data-toggle="dropdown">
1267
+ <img src="images/user/user-xs-01.jpg" class="user-image rounded-circle" alt="User Image" />
1268
+ <span class="d-none d-lg-inline-block">John Doe</span>
1269
+ </button>
1270
+ <ul class="dropdown-menu dropdown-menu-right">
1271
+ <li>
1272
+ <a class="dropdown-link-item" href="user-profile.html">
1273
+ <i class="mdi mdi-account-outline"></i>
1274
+ <span class="nav-text">My Profile</span>
1275
+ </a>
1276
+ </li>
1277
+ <li>
1278
+ <a class="dropdown-link-item" href="email-inbox.html">
1279
+ <i class="mdi mdi-email-outline"></i>
1280
+ <span class="nav-text">Message</span>
1281
+ <span class="badge badge-pill badge-primary">24</span>
1282
+ </a>
1283
+ </li>
1284
+ <li>
1285
+ <a class="dropdown-link-item" href="user-activities.html">
1286
+ <i class="mdi mdi-diamond-stone"></i>
1287
+ <span class="nav-text">Activitise</span></a>
1288
+ </li>
1289
+ <li>
1290
+ <a class="dropdown-link-item" href="user-account-settings.html">
1291
+ <i class="mdi mdi-settings"></i>
1292
+ <span class="nav-text">Account Setting</span>
1293
+ </a>
1294
+ </li>
1295
+
1296
+ <li class="dropdown-footer">
1297
+ <a class="dropdown-link-item" href="sign-in.html"> <i class="mdi mdi-logout"></i> Log Out </a>
1298
+ </li>
1299
+ </ul>
1300
+ </li>
1301
+ </ul>
1302
+ </div>
1303
+ </nav>
1304
+
1305
+
1306
+ </header>
1307
+
1308
+ <!-- ====================================
1309
+ ——— CONTENT WRAPPER
1310
+ ===================================== -->
1311
+ <div class="content-wrapper">
1312
+ <div class="content"><!-- For Components documentaion -->
1313
+ <div class="card card-default">
1314
+ <div class="px-6 py-4">
1315
+ <p>Mono provides a variety of <span class="text-secondary text-capitalize"> datatables </span> components with a
1316
+ little customization that suits its design standards. For more information, please see the official <a
1317
+ class="font-weight-bold" href="https://datatables.net/" target="_blank"> Datatables Documentaion.</a></p>
1318
+ </div>
1319
+ </div>
1320
+
1321
+ <!-- Products Inventory -->
1322
+ <div class="card card-default">
1323
+ <div class="card-header">
1324
+ <h2>Products Inventory</h2>
1325
+
1326
+ <a class="btn mdi mdi-code-tags" data-toggle="collapse" href="#collapse-data-tables" role="button" aria-expanded="false"
1327
+ aria-controls="collapse-data-tables"> </a>
1328
+
1329
+ </div>
1330
+ <div class="card-body">
1331
+ <div class="collapse" id="collapse-data-tables">
1332
+ <pre class="language-html mb-4">
1333
+ <code >
1334
+ &lt;table id="productsTable" class="table table-hover table-product" style="width:100%">
1335
+ &lt;thead>
1336
+ &lt;tr>
1337
+ &lt;th>Image&lt;/th>
1338
+ &lt;th>Product Name&lt;/th>
1339
+ &lt;th>ID&lt;/th>
1340
+ &lt;th>Qty&lt;/th>
1341
+ &lt;th>Variants&lt;/th>
1342
+ &lt;th>Committed&lt;/th>
1343
+ &lt;th>User Activity&lt;/th>
1344
+ &lt;th>Sold&lt;/th>
1345
+ &lt;th>In Stock&lt;/th>
1346
+ &lt;th>&lt;/th>
1347
+ &lt;/tr>
1348
+ &lt;/thead>
1349
+ &lt;tbody>
1350
+
1351
+ &lt;tr>
1352
+ &lt;td class="py-0">
1353
+ &lt;img src="images/products/products-xs-01.jpg" alt="Product Image">
1354
+ &lt;/td>
1355
+ &lt;td>Coach Swagger&lt;/td>
1356
+ &lt;td>24541&lt;/td>
1357
+ &lt;td>27&lt;/td>
1358
+ &lt;td>1&lt;/td>
1359
+ &lt;td>2&lt;/td>
1360
+ &lt;td>
1361
+ &lt;div id="tbl-chart-01">&lt;/div>
1362
+ &lt;/td>
1363
+ &lt;td>4&lt;/td>
1364
+ &lt;td>18&lt;/td>
1365
+ &lt;td>
1366
+ &lt;div class="dropdown">
1367
+ &lt;a class="dropdown-toggle icon-burger-mini" href="#" role="button" id="dropdownMenuLink"
1368
+ data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" data-display="static">
1369
+ &lt;/a>
1370
+
1371
+ &lt;div class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownMenuLink">
1372
+ &lt;a class="dropdown-item" href="#">Action&lt;/a>
1373
+ &lt;a class="dropdown-item" href="#">Another action&lt;/a>
1374
+ &lt;a class="dropdown-item" href="#">Something else here&lt;/a>
1375
+ &lt;/div>
1376
+ &lt;/div>
1377
+ &lt;/td>
1378
+ &lt;/tr>
1379
+
1380
+ &lt;tr>
1381
+ &lt;td class="py-0">
1382
+ &lt;img src="images/products/products-xs-02.jpg" alt="Product Image">
1383
+ &lt;/td>
1384
+ &lt;td>Toddler Shoes, Gucci Watch&lt;/td>
1385
+ &lt;td>24542&lt;/td>
1386
+ &lt;td>18&lt;/td>
1387
+ &lt;td>7&lt;/td>
1388
+ &lt;td>5&lt;/td>
1389
+ &lt;td>
1390
+ &lt;div id="tbl-chart-02">&lt;/div>
1391
+ &lt;/td>
1392
+ &lt;td>1&lt;/td>
1393
+ &lt;td>14&lt;/td>
1394
+ &lt;td>
1395
+ &lt;div class="dropdown">
1396
+ &lt;a class="dropdown-toggle icon-burger-mini" href="#" role="button" id="dropdownMenuLink"
1397
+ data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" data-display="static">
1398
+ &lt;/a>
1399
+
1400
+ &lt;div class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownMenuLink">
1401
+ &lt;a class="dropdown-item" href="#">Action&lt;/a>
1402
+ &lt;a class="dropdown-item" href="#">Another action&lt;/a>
1403
+ &lt;a class="dropdown-item" href="#">Something else here&lt;/a>
1404
+ &lt;/div>
1405
+ &lt;/div>
1406
+ &lt;/td>
1407
+ &lt;/tr>
1408
+
1409
+ &lt;tr>
1410
+ &lt;td class="py-0">
1411
+ &lt;img src="images/products/products-xs-03.jpg" alt="Product Image">
1412
+ &lt;/td>
1413
+ &lt;td>Hat Black Suits&lt;/td>
1414
+ &lt;td>24543&lt;/td>
1415
+ &lt;td>20&lt;/td>
1416
+ &lt;td>3&lt;/td>
1417
+ &lt;td>7&lt;/td>
1418
+ &lt;td>
1419
+ &lt;div id="tbl-chart-03">&lt;/div>
1420
+ &lt;/td>
1421
+ &lt;td>6&lt;/td>
1422
+ &lt;td>26&lt;/td>
1423
+ &lt;td>
1424
+ &lt;div class="dropdown">
1425
+ &lt;a class="dropdown-toggle icon-burger-mini" href="#" role="button" id="dropdownMenuLink"
1426
+ data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" data-display="static">
1427
+ &lt;/a>
1428
+
1429
+ &lt;div class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownMenuLink">
1430
+ &lt;a class="dropdown-item" href="#">Action&lt;/a>
1431
+ &lt;a class="dropdown-item" href="#">Another action&lt;/a>
1432
+ &lt;a class="dropdown-item" href="#">Something else here&lt;/a>
1433
+ &lt;/div>
1434
+ &lt;/div>
1435
+ &lt;/td>
1436
+ &lt;/tr>
1437
+
1438
+ &lt;tr>
1439
+ &lt;td class="py-0">
1440
+ &lt;img src="images/products/products-xs-04.jpg" alt="Product Image">
1441
+ &lt;/td>
1442
+ &lt;td>Backpack Gents&lt;/td>
1443
+ &lt;td>24544&lt;/td>
1444
+ &lt;td>37&lt;/td>
1445
+ &lt;td>8&lt;/td>
1446
+ &lt;td>3&lt;/td>
1447
+ &lt;td>
1448
+ &lt;div id="tbl-chart-04">&lt;/div>
1449
+ &lt;/td>
1450
+ &lt;td>6&lt;/td>
1451
+ &lt;td>7&lt;/td>
1452
+ &lt;td>
1453
+ &lt;div class="dropdown">
1454
+ &lt;a class="dropdown-toggle icon-burger-mini" href="#" role="button" id="dropdownMenuLink"
1455
+ data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" data-display="static">
1456
+ &lt;/a>
1457
+
1458
+ &lt;div class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownMenuLink">
1459
+ &lt;a class="dropdown-item" href="#">Action&lt;/a>
1460
+ &lt;a class="dropdown-item" href="#">Another action&lt;/a>
1461
+ &lt;a class="dropdown-item" href="#">Something else here&lt;/a>
1462
+ &lt;/div>
1463
+ &lt;/div>
1464
+ &lt;/td>
1465
+ &lt;/tr>
1466
+
1467
+ &lt;tr>
1468
+ &lt;td class="py-0">
1469
+ &lt;img src="images/products/products-xs-05.jpg" alt="Product Image">
1470
+ &lt;/td>
1471
+ &lt;td>Speed 500 Ignite&lt;/td>
1472
+ &lt;td>24545&lt;/td>
1473
+ &lt;td>8&lt;/td>
1474
+ &lt;td>3&lt;/td>
1475
+ &lt;td>4&lt;/td>
1476
+ &lt;td>
1477
+ &lt;div id="tbl-chart-05">&lt;/div>
1478
+ &lt;/td>
1479
+ &lt;td>8&lt;/td>
1480
+ &lt;td>42&lt;/td>
1481
+ &lt;td>
1482
+ &lt;div class="dropdown">
1483
+ &lt;a class="dropdown-toggle icon-burger-mini" href="#" role="button" id="dropdownMenuLink"
1484
+ data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" data-display="static">
1485
+ &lt;/a>
1486
+
1487
+ &lt;div class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownMenuLink">
1488
+ &lt;a class="dropdown-item" href="#">Action&lt;/a>
1489
+ &lt;a class="dropdown-item" href="#">Another action&lt;/a>
1490
+ &lt;a class="dropdown-item" href="#">Something else here&lt;/a>
1491
+ &lt;/div>
1492
+ &lt;/div>
1493
+ &lt;/td>
1494
+ &lt;/tr>
1495
+
1496
+ &lt;tr>
1497
+ &lt;td class="py-0">
1498
+ &lt;img src="images/products/products-xs-06.jpg" alt="Product Image">
1499
+ &lt;/td>
1500
+ &lt;td>Olay&lt;/td>
1501
+ &lt;td>24546&lt;/td>
1502
+ &lt;td>19&lt;/td>
1503
+ &lt;td>6&lt;/td>
1504
+ &lt;td>6&lt;/td>
1505
+ &lt;td>
1506
+ &lt;div id="tbl-chart-06">&lt;/div>
1507
+ &lt;/td>
1508
+ &lt;td>79&lt;/td>
1509
+ &lt;td>12&lt;/td>
1510
+ &lt;td>
1511
+ &lt;div class="dropdown">
1512
+ &lt;a class="dropdown-toggle icon-burger-mini" href="#" role="button" id="dropdownMenuLink"
1513
+ data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" data-display="static">
1514
+ &lt;/a>
1515
+
1516
+ &lt;div class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownMenuLink">
1517
+ &lt;a class="dropdown-item" href="#">Action&lt;/a>
1518
+ &lt;a class="dropdown-item" href="#">Another action&lt;/a>
1519
+ &lt;a class="dropdown-item" href="#">Something else here&lt;/a>
1520
+ &lt;/div>
1521
+ &lt;/div>
1522
+ &lt;/td>
1523
+ &lt;/tr>
1524
+
1525
+ &lt;tr>
1526
+ &lt;td class="py-0">
1527
+ &lt;img src="images/products/products-xs-07.jpg" alt="Product Image">
1528
+ &lt;/td>
1529
+ &lt;td>Ledger Nano X&lt;/td>
1530
+ &lt;td>24547&lt;/td>
1531
+ &lt;td>61&lt;/td>
1532
+ &lt;td>46&lt;/td>
1533
+ &lt;td>18&lt;/td>
1534
+ &lt;td>
1535
+ &lt;div id="tbl-chart-07">&lt;/div>
1536
+ &lt;/td>
1537
+ &lt;td>76&lt;/td>
1538
+ &lt;td>36&lt;/td>
1539
+ &lt;td>
1540
+ &lt;div class="dropdown">
1541
+ &lt;a class="dropdown-toggle icon-burger-mini" href="#" role="button" id="dropdownMenuLink"
1542
+ data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" data-display="static">
1543
+ &lt;/a>
1544
+
1545
+ &lt;div class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownMenuLink">
1546
+ &lt;a class="dropdown-item" href="#">Action&lt;/a>
1547
+ &lt;a class="dropdown-item" href="#">Another action&lt;/a>
1548
+ &lt;a class="dropdown-item" href="#">Something else here&lt;/a>
1549
+ &lt;/div>
1550
+ &lt;/div>
1551
+ &lt;/td>
1552
+ &lt;/tr>
1553
+
1554
+ &lt;tr>
1555
+ &lt;td class="py-0">
1556
+ &lt;img src="images/products/products-xs-08.jpg" alt="Product Image">
1557
+ &lt;/td>
1558
+ &lt;td>Surface Laptop 2&lt;/td>
1559
+ &lt;td>24548&lt;/td>
1560
+ &lt;td>33&lt;/td>
1561
+ &lt;td>56&lt;/td>
1562
+ &lt;td>89&lt;/td>
1563
+ &lt;td>
1564
+ &lt;div id="tbl-chart-08">&lt;/div>
1565
+ &lt;/td>
1566
+ &lt;td>38&lt;/td>
1567
+ &lt;td>5&lt;/td>
1568
+ &lt;td>
1569
+ &lt;div class="dropdown">
1570
+ &lt;a class="dropdown-toggle icon-burger-mini" href="#" role="button" id="dropdownMenuLink"
1571
+ data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" data-display="static">
1572
+ &lt;/a>
1573
+
1574
+ &lt;div class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownMenuLink">
1575
+ &lt;a class="dropdown-item" href="#">Action&lt;/a>
1576
+ &lt;a class="dropdown-item" href="#">Another action&lt;/a>
1577
+ &lt;a class="dropdown-item" href="#">Something else here&lt;/a>
1578
+ &lt;/div>
1579
+ &lt;/div>
1580
+ &lt;/td>
1581
+ &lt;/tr>
1582
+
1583
+ &lt;tr>
1584
+ &lt;td class="py-0">
1585
+ &lt;img src="images/products/products-xs-09.jpg" alt="Product Image">
1586
+ &lt;/td>
1587
+ &lt;td>TIGI Bed Head Superstar Queen&lt;/td>
1588
+ &lt;td>24549&lt;/td>
1589
+ &lt;td>3&lt;/td>
1590
+ &lt;td>9&lt;/td>
1591
+ &lt;td>15&lt;/td>
1592
+ &lt;td>
1593
+ &lt;div id="tbl-chart-09">&lt;/div>
1594
+ &lt;/td>
1595
+ &lt;td>6&lt;/td>
1596
+ &lt;td>46&lt;/td>
1597
+ &lt;td>
1598
+ &lt;div class="dropdown">
1599
+ &lt;a class="dropdown-toggle icon-burger-mini" href="#" role="button" id="dropdownMenuLink"
1600
+ data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" data-display="static">
1601
+ &lt;/a>
1602
+
1603
+ &lt;div class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownMenuLink">
1604
+ &lt;a class="dropdown-item" href="#">Action&lt;/a>
1605
+ &lt;a class="dropdown-item" href="#">Another action&lt;/a>
1606
+ &lt;a class="dropdown-item" href="#">Something else here&lt;/a>
1607
+ &lt;/div>
1608
+ &lt;/div>
1609
+ &lt;/td>
1610
+ &lt;/tr>
1611
+
1612
+ &lt;tr>
1613
+ &lt;td class="py-0">
1614
+ &lt;img src="images/products/products-xs-10.jpg" alt="Product Image">
1615
+ &lt;/td>
1616
+ &lt;td>Wattbike Atom&lt;/td>
1617
+ &lt;td>24550&lt;/td>
1618
+ &lt;td>61&lt;/td>
1619
+ &lt;td>56&lt;/td>
1620
+ &lt;td>68&lt;/td>
1621
+ &lt;td>
1622
+ &lt;div id="tbl-chart-10">&lt;/div>
1623
+ &lt;/td>
1624
+ &lt;td>3&lt;/td>
1625
+ &lt;td>19&lt;/td>
1626
+ &lt;td>
1627
+ &lt;div class="dropdown">
1628
+ &lt;a class="dropdown-toggle icon-burger-mini" href="#" role="button" id="dropdownMenuLink"
1629
+ data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" data-display="static">
1630
+ &lt;/a>
1631
+
1632
+ &lt;div class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownMenuLink">
1633
+ &lt;a class="dropdown-item" href="#">Action&lt;/a>
1634
+ &lt;a class="dropdown-item" href="#">Another action&lt;/a>
1635
+ &lt;a class="dropdown-item" href="#">Something else here&lt;/a>
1636
+ &lt;/div>
1637
+ &lt;/div>
1638
+ &lt;/td>
1639
+ &lt;/tr>
1640
+
1641
+ &lt;tr>
1642
+ &lt;td class="py-0">
1643
+ &lt;img src="images/products/products-xs-11.jpg" alt="Product Image">
1644
+ &lt;/td>
1645
+ &lt;td>Smart Watch&lt;/td>
1646
+ &lt;td>24551&lt;/td>
1647
+ &lt;td>19&lt;/td>
1648
+ &lt;td>76&lt;/td>
1649
+ &lt;td>38&lt;/td>
1650
+ &lt;td>
1651
+ &lt;div id="tbl-chart-11">&lt;/div>
1652
+ &lt;/td>
1653
+ &lt;td>3&lt;/td>
1654
+ &lt;td>17&lt;/td>
1655
+ &lt;td>
1656
+ &lt;div class="dropdown">
1657
+ &lt;a class="dropdown-toggle icon-burger-mini" href="#" role="button" id="dropdownMenuLink"
1658
+ data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" data-display="static">
1659
+ &lt;/a>
1660
+
1661
+ &lt;div class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownMenuLink">
1662
+ &lt;a class="dropdown-item" href="#">Action&lt;/a>
1663
+ &lt;a class="dropdown-item" href="#">Another action&lt;/a>
1664
+ &lt;a class="dropdown-item" href="#">Something else here&lt;/a>
1665
+ &lt;/div>
1666
+ &lt;/div>
1667
+ &lt;/td>
1668
+ &lt;/tr>
1669
+
1670
+ &lt;tr>
1671
+ &lt;td class="py-0">
1672
+ &lt;img src="images/products/products-xs-12.jpg" alt="Product Image">
1673
+ &lt;/td>
1674
+ &lt;td>Magic Bullet Blender&lt;/td>
1675
+ &lt;td>24552&lt;/td>
1676
+ &lt;td>12&lt;/td>
1677
+ &lt;td>30&lt;/td>
1678
+ &lt;td>14&lt;/td>
1679
+ &lt;td>
1680
+ &lt;div id="tbl-chart-12">&lt;/div>
1681
+ &lt;/td>
1682
+ &lt;td>26&lt;/td>
1683
+ &lt;td>9&lt;/td>
1684
+ &lt;td>
1685
+ &lt;div class="dropdown">
1686
+ &lt;a class="dropdown-toggle icon-burger-mini" href="#" role="button" id="dropdownMenuLink"
1687
+ data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" data-display="static">
1688
+ &lt;/a>
1689
+
1690
+ &lt;div class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownMenuLink">
1691
+ &lt;a class="dropdown-item" href="#">Action&lt;/a>
1692
+ &lt;a class="dropdown-item" href="#">Another action&lt;/a>
1693
+ &lt;a class="dropdown-item" href="#">Something else here&lt;/a>
1694
+ &lt;/div>
1695
+ &lt;/div>
1696
+ &lt;/td>
1697
+ &lt;/tr>
1698
+
1699
+ &lt;tr>
1700
+ &lt;td class="py-0">
1701
+ &lt;img src="images/products/products-xs-13.jpg" alt="Product Image">
1702
+ &lt;/td>
1703
+ &lt;td>Kanana rucksack&lt;/td>
1704
+ &lt;td>24553&lt;/td>
1705
+ &lt;td>14&lt;/td>
1706
+ &lt;td>65&lt;/td>
1707
+ &lt;td>39&lt;/td>
1708
+ &lt;td>
1709
+ &lt;div id="tbl-chart-13">&lt;/div>
1710
+ &lt;/td>
1711
+ &lt;td>9&lt;/td>
1712
+ &lt;td>55&lt;/td>
1713
+ &lt;td>
1714
+ &lt;div class="dropdown">
1715
+ &lt;a class="dropdown-toggle icon-burger-mini" href="#" role="button" id="dropdownMenuLink"
1716
+ data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" data-display="static">
1717
+ &lt;/a>
1718
+
1719
+ &lt;div class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownMenuLink">
1720
+ &lt;a class="dropdown-item" href="#">Action&lt;/a>
1721
+ &lt;a class="dropdown-item" href="#">Another action&lt;/a>
1722
+ &lt;a class="dropdown-item" href="#">Something else here&lt;/a>
1723
+ &lt;/div>
1724
+ &lt;/div>
1725
+ &lt;/td>
1726
+ &lt;/tr>
1727
+
1728
+ &lt;tr>
1729
+ &lt;td class="py-0">
1730
+ &lt;img src="images/products/products-xs-14.jpg" alt="Product Image">
1731
+ &lt;/td>
1732
+ &lt;td>Copic Opaque White&lt;/td>
1733
+ &lt;td>24554&lt;/td>
1734
+ &lt;td>43&lt;/td>
1735
+ &lt;td>29&lt;/td>
1736
+ &lt;td>75&lt;/td>
1737
+ &lt;td>
1738
+ &lt;div id="tbl-chart-14">&lt;/div>
1739
+ &lt;/td>
1740
+ &lt;td>7&lt;/td>
1741
+ &lt;td>15&lt;/td>
1742
+ &lt;td>
1743
+ &lt;div class="dropdown">
1744
+ &lt;a class="dropdown-toggle icon-burger-mini" href="#" role="button" id="dropdownMenuLink"
1745
+ data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" data-display="static">
1746
+ &lt;/a>
1747
+
1748
+ &lt;div class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownMenuLink">
1749
+ &lt;a class="dropdown-item" href="#">Action&lt;/a>
1750
+ &lt;a class="dropdown-item" href="#">Another action&lt;/a>
1751
+ &lt;a class="dropdown-item" href="#">Something else here&lt;/a>
1752
+ &lt;/div>
1753
+ &lt;/div>
1754
+ &lt;/td>
1755
+ &lt;/tr>
1756
+
1757
+ &lt;tr>
1758
+ &lt;td class="py-0">
1759
+ &lt;img src="images/products/products-xs-15.jpg" alt="Product Image">
1760
+ &lt;/td>
1761
+ &lt;td>Headphones&lt;/td>
1762
+ &lt;td>24555&lt;/td>
1763
+ &lt;td>17&lt;/td>
1764
+ &lt;td>6&lt;/td>
1765
+ &lt;td>7&lt;/td>
1766
+ &lt;td>
1767
+ &lt;div id="tbl-chart-15">&lt;/div>
1768
+ &lt;/td>
1769
+ &lt;td>6&lt;/td>
1770
+ &lt;td>98&lt;/td>
1771
+ &lt;td>
1772
+ &lt;div class="dropdown">
1773
+ &lt;a class="dropdown-toggle icon-burger-mini" href="#" role="button" id="dropdownMenuLink"
1774
+ data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" data-display="static">
1775
+ &lt;/a>
1776
+
1777
+ &lt;div class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownMenuLink">
1778
+ &lt;a class="dropdown-item" href="#">Action&lt;/a>
1779
+ &lt;a class="dropdown-item" href="#">Another action&lt;/a>
1780
+ &lt;a class="dropdown-item" href="#">Something else here&lt;/a>
1781
+ &lt;/div>
1782
+ &lt;/div>
1783
+ &lt;/td>
1784
+ &lt;/tr>
1785
+ &lt;/tbody>
1786
+ &lt;/table>
1787
+ </code>
1788
+ </pre>
1789
+ </div>
1790
+ <table id="productsTable" class="table table-hover table-product" style="width:100%">
1791
+ <thead>
1792
+ <tr>
1793
+ <th>Image</th>
1794
+ <th>Product Name</th>
1795
+ <th>ID</th>
1796
+ <th>Qty</th>
1797
+ <th>Variants</th>
1798
+ <th>Committed</th>
1799
+ <th>User Activity</th>
1800
+ <th>Sold</th>
1801
+ <th>In Stock</th>
1802
+ <th></th>
1803
+ </tr>
1804
+ </thead>
1805
+ <tbody>
1806
+
1807
+ <tr>
1808
+ <td class="py-0">
1809
+ <img src="images/products/products-xs-01.jpg" alt="Product Image">
1810
+ </td>
1811
+ <td>Coach Swagger</td>
1812
+ <td>24541</td>
1813
+ <td>27</td>
1814
+ <td>1</td>
1815
+ <td>2</td>
1816
+ <td>
1817
+ <div id="tbl-chart-01"></div>
1818
+ </td>
1819
+ <td>4</td>
1820
+ <td>18</td>
1821
+ <td>
1822
+ <div class="dropdown">
1823
+ <a class="dropdown-toggle icon-burger-mini" href="#" role="button" id="dropdownMenuLink"
1824
+ data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" data-display="static">
1825
+ </a>
1826
+
1827
+ <div class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownMenuLink">
1828
+ <a class="dropdown-item" href="#">Action</a>
1829
+ <a class="dropdown-item" href="#">Another action</a>
1830
+ <a class="dropdown-item" href="#">Something else here</a>
1831
+ </div>
1832
+ </div>
1833
+ </td>
1834
+ </tr>
1835
+
1836
+ <tr>
1837
+ <td class="py-0">
1838
+ <img src="images/products/products-xs-02.jpg" alt="Product Image">
1839
+ </td>
1840
+ <td>Toddler Shoes, Gucci Watch</td>
1841
+ <td>24542</td>
1842
+ <td>18</td>
1843
+ <td>7</td>
1844
+ <td>5</td>
1845
+ <td>
1846
+ <div id="tbl-chart-02"></div>
1847
+ </td>
1848
+ <td>1</td>
1849
+ <td>14</td>
1850
+ <td>
1851
+ <div class="dropdown">
1852
+ <a class="dropdown-toggle icon-burger-mini" href="#" role="button" id="dropdownMenuLink"
1853
+ data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" data-display="static">
1854
+ </a>
1855
+
1856
+ <div class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownMenuLink">
1857
+ <a class="dropdown-item" href="#">Action</a>
1858
+ <a class="dropdown-item" href="#">Another action</a>
1859
+ <a class="dropdown-item" href="#">Something else here</a>
1860
+ </div>
1861
+ </div>
1862
+ </td>
1863
+ </tr>
1864
+
1865
+ <tr>
1866
+ <td class="py-0">
1867
+ <img src="images/products/products-xs-03.jpg" alt="Product Image">
1868
+ </td>
1869
+ <td>Hat Black Suits</td>
1870
+ <td>24543</td>
1871
+ <td>20</td>
1872
+ <td>3</td>
1873
+ <td>7</td>
1874
+ <td>
1875
+ <div id="tbl-chart-03"></div>
1876
+ </td>
1877
+ <td>6</td>
1878
+ <td>26</td>
1879
+ <td>
1880
+ <div class="dropdown">
1881
+ <a class="dropdown-toggle icon-burger-mini" href="#" role="button" id="dropdownMenuLink"
1882
+ data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" data-display="static">
1883
+ </a>
1884
+
1885
+ <div class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownMenuLink">
1886
+ <a class="dropdown-item" href="#">Action</a>
1887
+ <a class="dropdown-item" href="#">Another action</a>
1888
+ <a class="dropdown-item" href="#">Something else here</a>
1889
+ </div>
1890
+ </div>
1891
+ </td>
1892
+ </tr>
1893
+
1894
+ <tr>
1895
+ <td class="py-0">
1896
+ <img src="images/products/products-xs-04.jpg" alt="Product Image">
1897
+ </td>
1898
+ <td>Backpack Gents</td>
1899
+ <td>24544</td>
1900
+ <td>37</td>
1901
+ <td>8</td>
1902
+ <td>3</td>
1903
+ <td>
1904
+ <div id="tbl-chart-04"></div>
1905
+ </td>
1906
+ <td>6</td>
1907
+ <td>7</td>
1908
+ <td>
1909
+ <div class="dropdown">
1910
+ <a class="dropdown-toggle icon-burger-mini" href="#" role="button" id="dropdownMenuLink"
1911
+ data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" data-display="static">
1912
+ </a>
1913
+
1914
+ <div class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownMenuLink">
1915
+ <a class="dropdown-item" href="#">Action</a>
1916
+ <a class="dropdown-item" href="#">Another action</a>
1917
+ <a class="dropdown-item" href="#">Something else here</a>
1918
+ </div>
1919
+ </div>
1920
+ </td>
1921
+ </tr>
1922
+
1923
+ <tr>
1924
+ <td class="py-0">
1925
+ <img src="images/products/products-xs-05.jpg" alt="Product Image">
1926
+ </td>
1927
+ <td>Speed 500 Ignite</td>
1928
+ <td>24545</td>
1929
+ <td>8</td>
1930
+ <td>3</td>
1931
+ <td>4</td>
1932
+ <td>
1933
+ <div id="tbl-chart-05"></div>
1934
+ </td>
1935
+ <td>8</td>
1936
+ <td>42</td>
1937
+ <td>
1938
+ <div class="dropdown">
1939
+ <a class="dropdown-toggle icon-burger-mini" href="#" role="button" id="dropdownMenuLink"
1940
+ data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" data-display="static">
1941
+ </a>
1942
+
1943
+ <div class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownMenuLink">
1944
+ <a class="dropdown-item" href="#">Action</a>
1945
+ <a class="dropdown-item" href="#">Another action</a>
1946
+ <a class="dropdown-item" href="#">Something else here</a>
1947
+ </div>
1948
+ </div>
1949
+ </td>
1950
+ </tr>
1951
+
1952
+ <tr>
1953
+ <td class="py-0">
1954
+ <img src="images/products/products-xs-06.jpg" alt="Product Image">
1955
+ </td>
1956
+ <td>Olay</td>
1957
+ <td>24546</td>
1958
+ <td>19</td>
1959
+ <td>6</td>
1960
+ <td>6</td>
1961
+ <td>
1962
+ <div id="tbl-chart-06"></div>
1963
+ </td>
1964
+ <td>79</td>
1965
+ <td>12</td>
1966
+ <td>
1967
+ <div class="dropdown">
1968
+ <a class="dropdown-toggle icon-burger-mini" href="#" role="button" id="dropdownMenuLink"
1969
+ data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" data-display="static">
1970
+ </a>
1971
+
1972
+ <div class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownMenuLink">
1973
+ <a class="dropdown-item" href="#">Action</a>
1974
+ <a class="dropdown-item" href="#">Another action</a>
1975
+ <a class="dropdown-item" href="#">Something else here</a>
1976
+ </div>
1977
+ </div>
1978
+ </td>
1979
+ </tr>
1980
+
1981
+ <tr>
1982
+ <td class="py-0">
1983
+ <img src="images/products/products-xs-07.jpg" alt="Product Image">
1984
+ </td>
1985
+ <td>Ledger Nano X</td>
1986
+ <td>24547</td>
1987
+ <td>61</td>
1988
+ <td>46</td>
1989
+ <td>18</td>
1990
+ <td>
1991
+ <div id="tbl-chart-07"></div>
1992
+ </td>
1993
+ <td>76</td>
1994
+ <td>36</td>
1995
+ <td>
1996
+ <div class="dropdown">
1997
+ <a class="dropdown-toggle icon-burger-mini" href="#" role="button" id="dropdownMenuLink"
1998
+ data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" data-display="static">
1999
+ </a>
2000
+
2001
+ <div class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownMenuLink">
2002
+ <a class="dropdown-item" href="#">Action</a>
2003
+ <a class="dropdown-item" href="#">Another action</a>
2004
+ <a class="dropdown-item" href="#">Something else here</a>
2005
+ </div>
2006
+ </div>
2007
+ </td>
2008
+ </tr>
2009
+
2010
+ <tr>
2011
+ <td class="py-0">
2012
+ <img src="images/products/products-xs-08.jpg" alt="Product Image">
2013
+ </td>
2014
+ <td>Surface Laptop 2</td>
2015
+ <td>24548</td>
2016
+ <td>33</td>
2017
+ <td>56</td>
2018
+ <td>89</td>
2019
+ <td>
2020
+ <div id="tbl-chart-08"></div>
2021
+ </td>
2022
+ <td>38</td>
2023
+ <td>5</td>
2024
+ <td>
2025
+ <div class="dropdown">
2026
+ <a class="dropdown-toggle icon-burger-mini" href="#" role="button" id="dropdownMenuLink"
2027
+ data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" data-display="static">
2028
+ </a>
2029
+
2030
+ <div class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownMenuLink">
2031
+ <a class="dropdown-item" href="#">Action</a>
2032
+ <a class="dropdown-item" href="#">Another action</a>
2033
+ <a class="dropdown-item" href="#">Something else here</a>
2034
+ </div>
2035
+ </div>
2036
+ </td>
2037
+ </tr>
2038
+
2039
+ <tr>
2040
+ <td class="py-0">
2041
+ <img src="images/products/products-xs-09.jpg" alt="Product Image">
2042
+ </td>
2043
+ <td>TIGI Bed Head Superstar Queen</td>
2044
+ <td>24549</td>
2045
+ <td>3</td>
2046
+ <td>9</td>
2047
+ <td>15</td>
2048
+ <td>
2049
+ <div id="tbl-chart-09"></div>
2050
+ </td>
2051
+ <td>6</td>
2052
+ <td>46</td>
2053
+ <td>
2054
+ <div class="dropdown">
2055
+ <a class="dropdown-toggle icon-burger-mini" href="#" role="button" id="dropdownMenuLink"
2056
+ data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" data-display="static">
2057
+ </a>
2058
+
2059
+ <div class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownMenuLink">
2060
+ <a class="dropdown-item" href="#">Action</a>
2061
+ <a class="dropdown-item" href="#">Another action</a>
2062
+ <a class="dropdown-item" href="#">Something else here</a>
2063
+ </div>
2064
+ </div>
2065
+ </td>
2066
+ </tr>
2067
+
2068
+ <tr>
2069
+ <td class="py-0">
2070
+ <img src="images/products/products-xs-10.jpg" alt="Product Image">
2071
+ </td>
2072
+ <td>Wattbike Atom</td>
2073
+ <td>24550</td>
2074
+ <td>61</td>
2075
+ <td>56</td>
2076
+ <td>68</td>
2077
+ <td>
2078
+ <div id="tbl-chart-10"></div>
2079
+ </td>
2080
+ <td>3</td>
2081
+ <td>19</td>
2082
+ <td>
2083
+ <div class="dropdown">
2084
+ <a class="dropdown-toggle icon-burger-mini" href="#" role="button" id="dropdownMenuLink"
2085
+ data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" data-display="static">
2086
+ </a>
2087
+
2088
+ <div class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownMenuLink">
2089
+ <a class="dropdown-item" href="#">Action</a>
2090
+ <a class="dropdown-item" href="#">Another action</a>
2091
+ <a class="dropdown-item" href="#">Something else here</a>
2092
+ </div>
2093
+ </div>
2094
+ </td>
2095
+ </tr>
2096
+
2097
+ <tr>
2098
+ <td class="py-0">
2099
+ <img src="images/products/products-xs-11.jpg" alt="Product Image">
2100
+ </td>
2101
+ <td>Smart Watch</td>
2102
+ <td>24551</td>
2103
+ <td>19</td>
2104
+ <td>76</td>
2105
+ <td>38</td>
2106
+ <td>
2107
+ <div id="tbl-chart-11"></div>
2108
+ </td>
2109
+ <td>3</td>
2110
+ <td>17</td>
2111
+ <td>
2112
+ <div class="dropdown">
2113
+ <a class="dropdown-toggle icon-burger-mini" href="#" role="button" id="dropdownMenuLink"
2114
+ data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" data-display="static">
2115
+ </a>
2116
+
2117
+ <div class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownMenuLink">
2118
+ <a class="dropdown-item" href="#">Action</a>
2119
+ <a class="dropdown-item" href="#">Another action</a>
2120
+ <a class="dropdown-item" href="#">Something else here</a>
2121
+ </div>
2122
+ </div>
2123
+ </td>
2124
+ </tr>
2125
+
2126
+ <tr>
2127
+ <td class="py-0">
2128
+ <img src="images/products/products-xs-12.jpg" alt="Product Image">
2129
+ </td>
2130
+ <td>Magic Bullet Blender</td>
2131
+ <td>24552</td>
2132
+ <td>12</td>
2133
+ <td>30</td>
2134
+ <td>14</td>
2135
+ <td>
2136
+ <div id="tbl-chart-12"></div>
2137
+ </td>
2138
+ <td>26</td>
2139
+ <td>9</td>
2140
+ <td>
2141
+ <div class="dropdown">
2142
+ <a class="dropdown-toggle icon-burger-mini" href="#" role="button" id="dropdownMenuLink"
2143
+ data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" data-display="static">
2144
+ </a>
2145
+
2146
+ <div class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownMenuLink">
2147
+ <a class="dropdown-item" href="#">Action</a>
2148
+ <a class="dropdown-item" href="#">Another action</a>
2149
+ <a class="dropdown-item" href="#">Something else here</a>
2150
+ </div>
2151
+ </div>
2152
+ </td>
2153
+ </tr>
2154
+
2155
+ <tr>
2156
+ <td class="py-0">
2157
+ <img src="images/products/products-xs-13.jpg" alt="Product Image">
2158
+ </td>
2159
+ <td>Kanana rucksack</td>
2160
+ <td>24553</td>
2161
+ <td>14</td>
2162
+ <td>65</td>
2163
+ <td>39</td>
2164
+ <td>
2165
+ <div id="tbl-chart-13"></div>
2166
+ </td>
2167
+ <td>9</td>
2168
+ <td>55</td>
2169
+ <td>
2170
+ <div class="dropdown">
2171
+ <a class="dropdown-toggle icon-burger-mini" href="#" role="button" id="dropdownMenuLink"
2172
+ data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" data-display="static">
2173
+ </a>
2174
+
2175
+ <div class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownMenuLink">
2176
+ <a class="dropdown-item" href="#">Action</a>
2177
+ <a class="dropdown-item" href="#">Another action</a>
2178
+ <a class="dropdown-item" href="#">Something else here</a>
2179
+ </div>
2180
+ </div>
2181
+ </td>
2182
+ </tr>
2183
+
2184
+ <tr>
2185
+ <td class="py-0">
2186
+ <img src="images/products/products-xs-14.jpg" alt="Product Image">
2187
+ </td>
2188
+ <td>Copic Opaque White</td>
2189
+ <td>24554</td>
2190
+ <td>43</td>
2191
+ <td>29</td>
2192
+ <td>75</td>
2193
+ <td>
2194
+ <div id="tbl-chart-14"></div>
2195
+ </td>
2196
+ <td>7</td>
2197
+ <td>15</td>
2198
+ <td>
2199
+ <div class="dropdown">
2200
+ <a class="dropdown-toggle icon-burger-mini" href="#" role="button" id="dropdownMenuLink"
2201
+ data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" data-display="static">
2202
+ </a>
2203
+
2204
+ <div class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownMenuLink">
2205
+ <a class="dropdown-item" href="#">Action</a>
2206
+ <a class="dropdown-item" href="#">Another action</a>
2207
+ <a class="dropdown-item" href="#">Something else here</a>
2208
+ </div>
2209
+ </div>
2210
+ </td>
2211
+ </tr>
2212
+
2213
+ <tr>
2214
+ <td class="py-0">
2215
+ <img src="images/products/products-xs-15.jpg" alt="Product Image">
2216
+ </td>
2217
+ <td>Headphones</td>
2218
+ <td>24555</td>
2219
+ <td>17</td>
2220
+ <td>6</td>
2221
+ <td>7</td>
2222
+ <td>
2223
+ <div id="tbl-chart-15"></div>
2224
+ </td>
2225
+ <td>6</td>
2226
+ <td>98</td>
2227
+ <td>
2228
+ <div class="dropdown">
2229
+ <a class="dropdown-toggle icon-burger-mini" href="#" role="button" id="dropdownMenuLink"
2230
+ data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" data-display="static">
2231
+ </a>
2232
+
2233
+ <div class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownMenuLink">
2234
+ <a class="dropdown-item" href="#">Action</a>
2235
+ <a class="dropdown-item" href="#">Another action</a>
2236
+ <a class="dropdown-item" href="#">Something else here</a>
2237
+ </div>
2238
+ </div>
2239
+ </td>
2240
+ </tr>
2241
+
2242
+
2243
+
2244
+ </tbody>
2245
+ </table>
2246
+
2247
+ </div>
2248
+ </div>
2249
+ </div>
2250
+
2251
+ </div>
2252
+
2253
+ <!-- Footer -->
2254
+ <footer class="footer mt-auto">
2255
+ <div class="copyright bg-white">
2256
+ <p>
2257
+ &copy; <span id="copy-year"></span> Copyright Mono Dashboard Bootstrap Template by <a class="text-primary" href="http://www.iamabdus.com/" target="_blank" >Abdus</a>.
2258
+ </p>
2259
+ </div>
2260
+ <script>
2261
+ var d = new Date();
2262
+ var year = d.getFullYear();
2263
+ document.getElementById("copy-year").innerHTML = year;
2264
+ </script>
2265
+ </footer>
2266
+
2267
+ </div>
2268
+ </div>
2269
+
2270
+ <!-- Card Offcanvas -->
2271
+ <div class="card card-offcanvas" id="contact-off" >
2272
+ <div class="card-header">
2273
+ <h2>Contacts</h2>
2274
+ <a href="#" class="btn btn-primary btn-pill px-4">Add New</a>
2275
+ </div>
2276
+ <div class="card-body">
2277
+
2278
+ <div class="mb-4">
2279
+ <input type="text" class="form-control form-control-lg form-control-secondary rounded-0" placeholder="Search contacts...">
2280
+ </div>
2281
+
2282
+ <div class="media media-sm">
2283
+ <div class="media-sm-wrapper">
2284
+ <a href="user-profile.html">
2285
+ <img src="images/user/user-sm-01.jpg" alt="User Image">
2286
+ <span class="active bg-primary"></span>
2287
+ </a>
2288
+ </div>
2289
+ <div class="media-body">
2290
+ <a href="user-profile.html">
2291
+ <span class="title">Selena Wagner</span>
2292
+ <span class="discribe">Designer</span>
2293
+ </a>
2294
+ </div>
2295
+ </div>
2296
+
2297
+ <div class="media media-sm">
2298
+ <div class="media-sm-wrapper">
2299
+ <a href="user-profile.html">
2300
+ <img src="images/user/user-sm-02.jpg" alt="User Image">
2301
+ <span class="active bg-primary"></span>
2302
+ </a>
2303
+ </div>
2304
+ <div class="media-body">
2305
+ <a href="user-profile.html">
2306
+ <span class="title">Walter Reuter</span>
2307
+ <span>Developer</span>
2308
+ </a>
2309
+ </div>
2310
+ </div>
2311
+
2312
+ <div class="media media-sm">
2313
+ <div class="media-sm-wrapper">
2314
+ <a href="user-profile.html">
2315
+ <img src="images/user/user-sm-03.jpg" alt="User Image">
2316
+ </a>
2317
+ </div>
2318
+ <div class="media-body">
2319
+ <a href="user-profile.html">
2320
+ <span class="title">Larissa Gebhardt</span>
2321
+ <span>Cyber Punk</span>
2322
+ </a>
2323
+ </div>
2324
+ </div>
2325
+
2326
+ <div class="media media-sm">
2327
+ <div class="media-sm-wrapper">
2328
+ <a href="user-profile.html">
2329
+ <img src="images/user/user-sm-04.jpg" alt="User Image">
2330
+ </a>
2331
+
2332
+ </div>
2333
+ <div class="media-body">
2334
+ <a href="user-profile.html">
2335
+ <span class="title">Albrecht Straub</span>
2336
+ <span>Photographer</span>
2337
+ </a>
2338
+ </div>
2339
+ </div>
2340
+
2341
+ <div class="media media-sm">
2342
+ <div class="media-sm-wrapper">
2343
+ <a href="user-profile.html">
2344
+ <img src="images/user/user-sm-05.jpg" alt="User Image">
2345
+ <span class="active bg-danger"></span>
2346
+ </a>
2347
+ </div>
2348
+ <div class="media-body">
2349
+ <a href="user-profile.html">
2350
+ <span class="title">Leopold Ebert</span>
2351
+ <span>Fashion Designer</span>
2352
+ </a>
2353
+ </div>
2354
+ </div>
2355
+
2356
+ <div class="media media-sm">
2357
+ <div class="media-sm-wrapper">
2358
+ <a href="user-profile.html">
2359
+ <img src="images/user/user-sm-06.jpg" alt="User Image">
2360
+ <span class="active bg-primary"></span>
2361
+ </a>
2362
+ </div>
2363
+ <div class="media-body">
2364
+ <a href="user-profile.html">
2365
+ <span class="title">Selena Wagner</span>
2366
+ <span>Photographer</span>
2367
+ </a>
2368
+ </div>
2369
+ </div>
2370
+
2371
+ </div>
2372
+ </div>
2373
+
2374
+
2375
+
2376
+
2377
+ <script src="plugins/jquery/jquery.min.js"></script>
2378
+ <script src="plugins/bootstrap/js/bootstrap.bundle.min.js"></script>
2379
+ <script src="plugins/simplebar/simplebar.min.js"></script>
2380
+ <script src="https://unpkg.com/hotkeys-js/dist/hotkeys.min.js"></script>
2381
+
2382
+
2383
+
2384
+ <script src="plugins/prism/prism.js"></script>
2385
+
2386
+
2387
+
2388
+ <script src="plugins/DataTables/DataTables-1.10.18/js/jquery.dataTables.min.js"></script>
2389
+
2390
+
2391
+
2392
+ <script src="plugins/apexcharts/apexcharts.js"></script>
2393
+
2394
+
2395
+ <script src="js/mono.js"></script>
2396
+ <script src="js/chart.js"></script>
2397
+ <script src="js/map.js"></script>
2398
+ <script src="js/custom.js"></script>
2399
+
2400
+
2401
+
2402
+
2403
+ <!-- -->
2404
+
2405
+
2406
+ </body>
2407
+ </html>
data/search.json ADDED
@@ -0,0 +1,386 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ [
2
+ {
3
+ "label": "Email Inbox",
4
+ "link": "email-inbox.html",
5
+ "tags": "",
6
+ "location": "email"
7
+ },
8
+
9
+ {
10
+ "label": "Email Details",
11
+ "link": "email-details.html",
12
+ "tags": "",
13
+ "location": "email"
14
+ },
15
+
16
+ {
17
+ "label": "Email Compose",
18
+ "link": "email-compose.html",
19
+ "tags": "",
20
+ "location": "email"
21
+ },
22
+
23
+ {
24
+ "label": "Alert",
25
+ "link": "alert.html",
26
+ "tags": "",
27
+ "location": "UI Components"
28
+ },
29
+
30
+ {
31
+ "label": "Badge",
32
+ "link": "badge.html",
33
+ "tags": "",
34
+ "location": "UI Components"
35
+ },
36
+
37
+ {
38
+ "label": "Breadcrumb",
39
+ "link": "breadcrumb.html",
40
+ "tags": "",
41
+ "location": "UI Components"
42
+ },
43
+
44
+ {
45
+ "label": "Button Default",
46
+ "link": "button-default.html",
47
+ "tags": "",
48
+ "location": "Buttons"
49
+ },
50
+
51
+ {
52
+ "label": "Button Dropdown",
53
+ "link": "button-dropdown.html",
54
+ "tags": "",
55
+ "location": "Buttons"
56
+ },
57
+
58
+ {
59
+ "label": "Button Group",
60
+ "link": "button-group.html",
61
+ "tags": "",
62
+ "location": "Buttons"
63
+ },
64
+
65
+ {
66
+ "label": "Button Social",
67
+ "link": "button-social.html",
68
+ "tags": "",
69
+ "location": "Buttons"
70
+ },
71
+
72
+ {
73
+ "label": "Button Loading",
74
+ "link": "button-loading.html",
75
+ "tags": "",
76
+ "location": "Buttons"
77
+ },
78
+
79
+ {
80
+ "label": "Card",
81
+ "link": "card.html",
82
+ "tags": "",
83
+ "location": "UI Components"
84
+ },
85
+
86
+ {
87
+ "label": "Carousel",
88
+ "link": "carousel.html",
89
+ "tags": "",
90
+ "location": "UI Components"
91
+ },
92
+
93
+ {
94
+ "label": "Collapse",
95
+ "link": "collapse.html",
96
+ "tags": "",
97
+ "location": "UI Components"
98
+ },
99
+
100
+ {
101
+ "label": "Editor",
102
+ "link": "editor.html",
103
+ "tags": "",
104
+ "location": "UI Components"
105
+ },
106
+
107
+ {
108
+ "label": "List Group",
109
+ "link": "list-group.html",
110
+ "tags": "",
111
+ "location": "UI Components"
112
+ },
113
+
114
+ {
115
+ "label": "Modal",
116
+ "link": "modal.html",
117
+ "tags": "",
118
+ "location": "UI Components"
119
+ },
120
+
121
+ {
122
+ "label": "Pagination",
123
+ "link": "pagination.html",
124
+ "tags": "",
125
+ "location": "UI Components"
126
+ },
127
+
128
+ {
129
+ "label": "Popover &amp; Tooltip",
130
+ "link": "popover-tooltip.html",
131
+ "tags": "",
132
+ "location": "UI Components"
133
+ },
134
+
135
+ {
136
+ "label": "Progress Bar",
137
+ "link": "progress-bar.html",
138
+ "tags": "",
139
+ "location": "UI Components"
140
+ },
141
+
142
+ {
143
+ "label": "Spinner",
144
+ "link": "spinner.html",
145
+ "tags": "",
146
+ "location": "UI Components"
147
+ },
148
+
149
+ {
150
+ "label": "Switches",
151
+ "link": "switches.html",
152
+ "tags": "",
153
+ "location": "UI Components"
154
+ },
155
+
156
+ {
157
+ "label": "Bootstrap Tables",
158
+ "link": "bootstarp-tables.html",
159
+ "tags": "",
160
+ "location": "Tables"
161
+ },
162
+
163
+ {
164
+ "label": "Data Tables",
165
+ "link": "data-tables.html",
166
+ "tags": "",
167
+ "location": "Tables"
168
+ },
169
+
170
+ {
171
+ "label": "Tab",
172
+ "link": "tab.html",
173
+ "tags": "",
174
+ "location": "UI Components"
175
+ },
176
+
177
+ {
178
+ "label": "Toaster",
179
+ "link": "toaster.html",
180
+ "tags": "",
181
+ "location": "UI Components"
182
+ },
183
+
184
+ {
185
+ "label": "Material Icon",
186
+ "link": "material-icons.html",
187
+ "tags": "",
188
+ "location": "Icons"
189
+ },
190
+
191
+ {
192
+ "label": "Flag Icon",
193
+ "link": "flag-icons.html",
194
+ "tags": "",
195
+ "location": "Icons"
196
+ },
197
+
198
+ {
199
+ "label": "Basic Input",
200
+ "link": "basic-input.html",
201
+ "tags": "",
202
+ "location": "Forms"
203
+ },
204
+
205
+ {
206
+ "label": "Input Group",
207
+ "link": "input-group.html",
208
+ "tags": "",
209
+ "location": "Forms"
210
+ },
211
+
212
+ {
213
+ "label": "Checkbox &amp; Radio",
214
+ "link": "checkbox-radio.html",
215
+ "tags": "",
216
+ "location": "Forms"
217
+ },
218
+
219
+ {
220
+ "label": "Form Validation",
221
+ "link": "form-validation.html",
222
+ "tags": "",
223
+ "location": "Forms"
224
+ },
225
+
226
+ {
227
+ "label": "Form Advance",
228
+ "link": "form-advance.html",
229
+ "tags": "",
230
+ "location": "Forms"
231
+ },
232
+
233
+ {
234
+ "label": "Google Map",
235
+ "link": "google-maps.html",
236
+ "tags": "",
237
+ "location": "Maps"
238
+ },
239
+
240
+ {
241
+ "label": "Vector Map",
242
+ "link": "vector-maps.html",
243
+ "tags": "",
244
+ "location": "Maps"
245
+ },
246
+
247
+ {
248
+ "label": "General Widget",
249
+ "link": "widgets-general.html",
250
+ "tags": "maps, todos, profiles, notifications, customers, cards",
251
+ "location": "Widgets"
252
+ },
253
+
254
+ {
255
+ "label": "Chart Widget",
256
+ "link": "widgets-chart.html",
257
+ "tags": "",
258
+ "location": "Widgets"
259
+ },
260
+
261
+ {
262
+ "label": "Apex Charts",
263
+ "link": "apex-charts.html",
264
+ "tags": "",
265
+ "location": "Charts"
266
+ },
267
+
268
+ {
269
+ "label": "User Profile",
270
+ "link": "user-profile.html",
271
+ "tags": "",
272
+ "location": "User"
273
+ },
274
+
275
+ {
276
+ "label": "User Activities",
277
+ "link": "user-activities.html",
278
+ "tags": "",
279
+ "location": "User"
280
+ },
281
+
282
+ {
283
+ "label": "User Profile Settings",
284
+ "link": "user-profile-settings.html",
285
+ "tags": "",
286
+ "location": "User"
287
+ },
288
+
289
+ {
290
+ "label": "User Account Settings",
291
+ "link": "user-account-settings.html",
292
+ "tags": "",
293
+ "location": "User"
294
+ },
295
+
296
+ {
297
+ "label": "User Planing Settings",
298
+ "link": "user-planing-settings.html",
299
+ "tags": "",
300
+ "location": "User"
301
+ },
302
+
303
+ {
304
+ "label": "User billing",
305
+ "link": "user-billing.html",
306
+ "tags": "",
307
+ "location": "User"
308
+ },
309
+
310
+ {
311
+ "label": "User Notify Settings",
312
+ "link": "user-notify-settings.html",
313
+ "tags": "",
314
+ "location": "User"
315
+ },
316
+
317
+ {
318
+ "label": "Sign In",
319
+ "link": "sign-in.html",
320
+ "tags": "",
321
+ "location": "Authentication"
322
+ },
323
+
324
+ {
325
+ "label": "Sign Up",
326
+ "link": "sign-up.html",
327
+ "tags": "",
328
+ "location": "Authentication"
329
+ },
330
+
331
+ {
332
+ "label": "Reset Password",
333
+ "link": "reset-password.html",
334
+ "tags": "",
335
+ "location": "Authentication"
336
+ },
337
+
338
+ {
339
+ "label": "Invoice",
340
+ "link": "invoice.html",
341
+ "tags": "",
342
+ "location": "Other pages"
343
+ },
344
+
345
+ {
346
+ "label": "404 page",
347
+ "link": "404.html",
348
+ "tags": "",
349
+ "location": "Other pages"
350
+ },
351
+
352
+ {
353
+ "label": "Coming Soon",
354
+ "link": "page-comingsoon.html",
355
+ "tags": "",
356
+ "location": "Other pages"
357
+ },
358
+
359
+ {
360
+ "label": "Maintenance",
361
+ "link": "page-maintenance.html",
362
+ "tags": "",
363
+ "location": "Other pages"
364
+ },
365
+
366
+ {
367
+ "label": "Navbar",
368
+ "link": "navbar-customization.html",
369
+ "tags": "",
370
+ "location": "Customization"
371
+ },
372
+
373
+ {
374
+ "label": "Sidebar",
375
+ "link": "sidebar-customization.html",
376
+ "tags": "",
377
+ "location": "Customization"
378
+ },
379
+
380
+ {
381
+ "label": "Styling",
382
+ "link": "styling.html",
383
+ "tags": "",
384
+ "location": "Customization"
385
+ }
386
+ ]
editor.html ADDED
@@ -0,0 +1,1595 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+
3
+ <!--
4
+ // WEBSITE: https://themefisher.com
5
+ // TWITTER: https://twitter.com/themefisher
6
+ // FACEBOOK: https://www.facebook.com/themefisher
7
+ // GITHUB: https://github.com/themefisher/
8
+ -->
9
+
10
+ <html lang="en" dir="ltr">
11
+ <head>
12
+ <meta charset="utf-8" />
13
+ <meta http-equiv="X-UA-Compatible" content="IE=edge" />
14
+ <meta name="viewport" content="width=device-width, initial-scale=1" />
15
+
16
+ <title>Mono - Responsive Admin & Dashboard Template</title>
17
+
18
+ <!-- GOOGLE FONTS -->
19
+ <link href="https://fonts.googleapis.com/css?family=Karla:400,700|Roboto" rel="stylesheet">
20
+ <link href="plugins/material/css/materialdesignicons.min.css" rel="stylesheet" />
21
+ <link href="plugins/simplebar/simplebar.css" rel="stylesheet" />
22
+
23
+ <!-- PLUGINS CSS STYLE -->
24
+ <link href="plugins/nprogress/nprogress.css" rel="stylesheet" />
25
+
26
+
27
+ <link href="plugins/prism/prism.css" rel="stylesheet" />
28
+
29
+
30
+
31
+ <link href="plugins/codemirror/codemirror.css" rel="stylesheet">
32
+ <link href="plugins/codemirror/addon/hint/show-hint.css" rel="stylesheet">
33
+
34
+
35
+
36
+ <link href="https://cdn.quilljs.com/1.3.6/quill.snow.css" rel="stylesheet">
37
+
38
+
39
+ <!-- MONO CSS -->
40
+ <link id="main-css-href" rel="stylesheet" href="css/style.css" />
41
+
42
+
43
+
44
+
45
+ <!-- FAVICON -->
46
+ <link href="images/favicon.png" rel="shortcut icon" />
47
+
48
+ <!--
49
+ HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries
50
+ -->
51
+ <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
52
+ <!--[if lt IE 9]>
53
+ <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
54
+ <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
55
+ <![endif]-->
56
+ <script src="plugins/nprogress/nprogress.js"></script>
57
+ </head>
58
+
59
+
60
+ <body class="navbar-fixed sidebar-fixed" id="body">
61
+ <script>
62
+ NProgress.configure({ showSpinner: false });
63
+ NProgress.start();
64
+ </script>
65
+
66
+
67
+
68
+ <!-- ====================================
69
+ ——— WRAPPER
70
+ ===================================== -->
71
+ <div class="wrapper">
72
+
73
+
74
+ <!-- ====================================
75
+ ——— LEFT SIDEBAR WITH OUT FOOTER
76
+ ===================================== -->
77
+ <aside class="left-sidebar sidebar-dark" id="left-sidebar">
78
+ <div id="sidebar" class="sidebar sidebar-with-footer">
79
+ <!-- Aplication Brand -->
80
+ <div class="app-brand">
81
+ <a href="/index.html">
82
+ <img src="images/logo.png" alt="Mono">
83
+ <span class="brand-name">MONO</span>
84
+ </a>
85
+ </div>
86
+ <!-- begin sidebar scrollbar -->
87
+ <div class="sidebar-left" data-simplebar style="height: 100%;">
88
+ <!-- sidebar menu -->
89
+ <ul class="nav sidebar-inner" id="sidebar-menu">
90
+
91
+
92
+
93
+ <li
94
+ >
95
+ <a class="sidenav-item-link" href="index.html">
96
+ <i class="mdi mdi-briefcase-account-outline"></i>
97
+ <span class="nav-text">Business Dashboard</span>
98
+ </a>
99
+ </li>
100
+
101
+
102
+
103
+
104
+
105
+ <li
106
+ >
107
+ <a class="sidenav-item-link" href="analytics.html">
108
+ <i class="mdi mdi-chart-line"></i>
109
+ <span class="nav-text">Analytics Dashboard</span>
110
+ </a>
111
+ </li>
112
+
113
+
114
+
115
+
116
+
117
+ <li class="section-title">
118
+ Apps
119
+ </li>
120
+
121
+
122
+
123
+
124
+
125
+ <li
126
+ >
127
+ <a class="sidenav-item-link" href="chat.html">
128
+ <i class="mdi mdi-wechat"></i>
129
+ <span class="nav-text">Chat</span>
130
+ </a>
131
+ </li>
132
+
133
+
134
+
135
+
136
+
137
+ <li
138
+ >
139
+ <a class="sidenav-item-link" href="contacts.html">
140
+ <i class="mdi mdi-phone"></i>
141
+ <span class="nav-text">Contacts</span>
142
+ </a>
143
+ </li>
144
+
145
+
146
+
147
+
148
+
149
+ <li
150
+ >
151
+ <a class="sidenav-item-link" href="team.html">
152
+ <i class="mdi mdi-account-group"></i>
153
+ <span class="nav-text">Team</span>
154
+ </a>
155
+ </li>
156
+
157
+
158
+
159
+
160
+
161
+ <li
162
+ >
163
+ <a class="sidenav-item-link" href="calendar.html">
164
+ <i class="mdi mdi-calendar-check"></i>
165
+ <span class="nav-text">Calendar</span>
166
+ </a>
167
+ </li>
168
+
169
+
170
+
171
+
172
+
173
+ <li class="has-sub" >
174
+ <a class="sidenav-item-link" href="javascript:void(0)" data-toggle="collapse" data-target="#email"
175
+ aria-expanded="false" aria-controls="email">
176
+ <i class="mdi mdi-email"></i>
177
+ <span class="nav-text">email</span> <b class="caret"></b>
178
+ </a>
179
+ <ul class="collapse" id="email"
180
+ data-parent="#sidebar-menu">
181
+ <div class="sub-menu">
182
+
183
+
184
+
185
+ <li >
186
+ <a class="sidenav-item-link" href="email-inbox.html">
187
+ <span class="nav-text">Email Inbox</span>
188
+
189
+ </a>
190
+ </li>
191
+
192
+
193
+
194
+
195
+
196
+
197
+ <li >
198
+ <a class="sidenav-item-link" href="email-details.html">
199
+ <span class="nav-text">Email Details</span>
200
+
201
+ </a>
202
+ </li>
203
+
204
+
205
+
206
+
207
+
208
+
209
+ <li >
210
+ <a class="sidenav-item-link" href="email-compose.html">
211
+ <span class="nav-text">Email Compose</span>
212
+
213
+ </a>
214
+ </li>
215
+
216
+
217
+
218
+
219
+ </div>
220
+ </ul>
221
+ </li>
222
+
223
+
224
+
225
+
226
+
227
+ <li class="section-title">
228
+ UI Elements
229
+ </li>
230
+
231
+
232
+
233
+
234
+
235
+ <li class="has-sub active expand" >
236
+ <a class="sidenav-item-link" href="javascript:void(0)" data-toggle="collapse" data-target="#ui-elements"
237
+ aria-expanded="false" aria-controls="ui-elements">
238
+ <i class="mdi mdi-folder-outline"></i>
239
+ <span class="nav-text">UI Components</span> <b class="caret"></b>
240
+ </a>
241
+ <ul class="collapse show" id="ui-elements"
242
+ data-parent="#sidebar-menu">
243
+ <div class="sub-menu">
244
+
245
+
246
+
247
+ <li >
248
+ <a class="sidenav-item-link" href="alert.html">
249
+ <span class="nav-text">Alert</span>
250
+
251
+ </a>
252
+ </li>
253
+
254
+
255
+
256
+
257
+
258
+
259
+ <li >
260
+ <a class="sidenav-item-link" href="badge.html">
261
+ <span class="nav-text">Badge</span>
262
+
263
+ </a>
264
+ </li>
265
+
266
+
267
+
268
+
269
+
270
+
271
+ <li >
272
+ <a class="sidenav-item-link" href="breadcrumb.html">
273
+ <span class="nav-text">Breadcrumb</span>
274
+
275
+ </a>
276
+ </li>
277
+
278
+
279
+
280
+
281
+
282
+ <li class="has-sub" >
283
+ <a class="sidenav-item-link" href="javascript:void(0)" data-toggle="collapse" data-target="#buttons"
284
+ aria-expanded="false" aria-controls="buttons">
285
+ <span class="nav-text">Buttons</span> <b class="caret"></b>
286
+ </a>
287
+ <ul class="collapse" id="buttons">
288
+ <div class="sub-menu">
289
+
290
+ <li >
291
+ <a href="button-default.html">Button Default</a>
292
+ </li>
293
+
294
+ <li >
295
+ <a href="button-dropdown.html">Button Dropdown</a>
296
+ </li>
297
+
298
+ <li >
299
+ <a href="button-group.html">Button Group</a>
300
+ </li>
301
+
302
+ <li >
303
+ <a href="button-social.html">Button Social</a>
304
+ </li>
305
+
306
+ <li >
307
+ <a href="button-loading.html">Button Loading</a>
308
+ </li>
309
+
310
+ </div>
311
+ </ul>
312
+ </li>
313
+
314
+
315
+
316
+
317
+
318
+ <li >
319
+ <a class="sidenav-item-link" href="card.html">
320
+ <span class="nav-text">Card</span>
321
+
322
+ </a>
323
+ </li>
324
+
325
+
326
+
327
+
328
+
329
+
330
+ <li >
331
+ <a class="sidenav-item-link" href="carousel.html">
332
+ <span class="nav-text">Carousel</span>
333
+
334
+ </a>
335
+ </li>
336
+
337
+
338
+
339
+
340
+
341
+
342
+ <li >
343
+ <a class="sidenav-item-link" href="collapse.html">
344
+ <span class="nav-text">Collapse</span>
345
+
346
+ </a>
347
+ </li>
348
+
349
+
350
+
351
+
352
+
353
+
354
+ <li class="active" >
355
+ <a class="sidenav-item-link" href="editor.html">
356
+ <span class="nav-text">Editor</span>
357
+
358
+ </a>
359
+ </li>
360
+
361
+
362
+
363
+
364
+
365
+
366
+ <li >
367
+ <a class="sidenav-item-link" href="list-group.html">
368
+ <span class="nav-text">List Group</span>
369
+
370
+ </a>
371
+ </li>
372
+
373
+
374
+
375
+
376
+
377
+
378
+ <li >
379
+ <a class="sidenav-item-link" href="modal.html">
380
+ <span class="nav-text">Modal</span>
381
+
382
+ </a>
383
+ </li>
384
+
385
+
386
+
387
+
388
+
389
+
390
+ <li >
391
+ <a class="sidenav-item-link" href="pagination.html">
392
+ <span class="nav-text">Pagination</span>
393
+
394
+ </a>
395
+ </li>
396
+
397
+
398
+
399
+
400
+
401
+
402
+ <li >
403
+ <a class="sidenav-item-link" href="popover-tooltip.html">
404
+ <span class="nav-text">Popover & Tooltip</span>
405
+
406
+ </a>
407
+ </li>
408
+
409
+
410
+
411
+
412
+
413
+
414
+ <li >
415
+ <a class="sidenav-item-link" href="progress-bar.html">
416
+ <span class="nav-text">Progress Bar</span>
417
+
418
+ </a>
419
+ </li>
420
+
421
+
422
+
423
+
424
+
425
+
426
+ <li >
427
+ <a class="sidenav-item-link" href="spinner.html">
428
+ <span class="nav-text">Spinner</span>
429
+
430
+ </a>
431
+ </li>
432
+
433
+
434
+
435
+
436
+
437
+
438
+ <li >
439
+ <a class="sidenav-item-link" href="switches.html">
440
+ <span class="nav-text">Switches</span>
441
+
442
+ </a>
443
+ </li>
444
+
445
+
446
+
447
+
448
+
449
+ <li class="has-sub" >
450
+ <a class="sidenav-item-link" href="javascript:void(0)" data-toggle="collapse" data-target="#tables"
451
+ aria-expanded="false" aria-controls="tables">
452
+ <span class="nav-text">Tables</span> <b class="caret"></b>
453
+ </a>
454
+ <ul class="collapse" id="tables">
455
+ <div class="sub-menu">
456
+
457
+ <li >
458
+ <a href="bootstarp-tables.html">Bootstrap Tables</a>
459
+ </li>
460
+
461
+ <li >
462
+ <a href="data-tables.html">Data Tables</a>
463
+ </li>
464
+
465
+ </div>
466
+ </ul>
467
+ </li>
468
+
469
+
470
+
471
+
472
+
473
+ <li >
474
+ <a class="sidenav-item-link" href="tab.html">
475
+ <span class="nav-text">Tab</span>
476
+
477
+ </a>
478
+ </li>
479
+
480
+
481
+
482
+
483
+
484
+
485
+ <li >
486
+ <a class="sidenav-item-link" href="toaster.html">
487
+ <span class="nav-text">Toaster</span>
488
+
489
+ </a>
490
+ </li>
491
+
492
+
493
+
494
+
495
+
496
+ <li class="has-sub" >
497
+ <a class="sidenav-item-link" href="javascript:void(0)" data-toggle="collapse" data-target="#icons"
498
+ aria-expanded="false" aria-controls="icons">
499
+ <span class="nav-text">Icons</span> <b class="caret"></b>
500
+ </a>
501
+ <ul class="collapse" id="icons">
502
+ <div class="sub-menu">
503
+
504
+ <li >
505
+ <a href="material-icons.html">Material Icon</a>
506
+ </li>
507
+
508
+ <li >
509
+ <a href="flag-icons.html">Flag Icon</a>
510
+ </li>
511
+
512
+ </div>
513
+ </ul>
514
+ </li>
515
+
516
+
517
+
518
+
519
+ <li class="has-sub" >
520
+ <a class="sidenav-item-link" href="javascript:void(0)" data-toggle="collapse" data-target="#forms"
521
+ aria-expanded="false" aria-controls="forms">
522
+ <span class="nav-text">Forms</span> <b class="caret"></b>
523
+ </a>
524
+ <ul class="collapse" id="forms">
525
+ <div class="sub-menu">
526
+
527
+ <li >
528
+ <a href="basic-input.html">Basic Input</a>
529
+ </li>
530
+
531
+ <li >
532
+ <a href="input-group.html">Input Group</a>
533
+ </li>
534
+
535
+ <li >
536
+ <a href="checkbox-radio.html">Checkbox & Radio</a>
537
+ </li>
538
+
539
+ <li >
540
+ <a href="form-validation.html">Form Validation</a>
541
+ </li>
542
+
543
+ <li >
544
+ <a href="form-advance.html">Form Advance</a>
545
+ </li>
546
+
547
+ </div>
548
+ </ul>
549
+ </li>
550
+
551
+
552
+
553
+
554
+ <li class="has-sub" >
555
+ <a class="sidenav-item-link" href="javascript:void(0)" data-toggle="collapse" data-target="#maps"
556
+ aria-expanded="false" aria-controls="maps">
557
+ <span class="nav-text">Maps</span> <b class="caret"></b>
558
+ </a>
559
+ <ul class="collapse" id="maps">
560
+ <div class="sub-menu">
561
+
562
+ <li >
563
+ <a href="google-maps.html">Google Map</a>
564
+ </li>
565
+
566
+ <li >
567
+ <a href="vector-maps.html">Vector Map</a>
568
+ </li>
569
+
570
+ </div>
571
+ </ul>
572
+ </li>
573
+
574
+
575
+
576
+
577
+ <li class="has-sub" >
578
+ <a class="sidenav-item-link" href="javascript:void(0)" data-toggle="collapse" data-target="#widgets"
579
+ aria-expanded="false" aria-controls="widgets">
580
+ <span class="nav-text">Widgets</span> <b class="caret"></b>
581
+ </a>
582
+ <ul class="collapse" id="widgets">
583
+ <div class="sub-menu">
584
+
585
+ <li >
586
+ <a href="widgets-general.html">General Widget</a>
587
+ </li>
588
+
589
+ <li >
590
+ <a href="widgets-chart.html">Chart Widget</a>
591
+ </li>
592
+
593
+ </div>
594
+ </ul>
595
+ </li>
596
+
597
+
598
+
599
+ </div>
600
+ </ul>
601
+ </li>
602
+
603
+
604
+
605
+
606
+
607
+ <li class="has-sub" >
608
+ <a class="sidenav-item-link" href="javascript:void(0)" data-toggle="collapse" data-target="#charts"
609
+ aria-expanded="false" aria-controls="charts">
610
+ <i class="mdi mdi-chart-pie"></i>
611
+ <span class="nav-text">Charts</span> <b class="caret"></b>
612
+ </a>
613
+ <ul class="collapse" id="charts"
614
+ data-parent="#sidebar-menu">
615
+ <div class="sub-menu">
616
+
617
+
618
+
619
+ <li >
620
+ <a class="sidenav-item-link" href="apex-charts.html">
621
+ <span class="nav-text">Apex Charts</span>
622
+
623
+ </a>
624
+ </li>
625
+
626
+
627
+
628
+
629
+ </div>
630
+ </ul>
631
+ </li>
632
+
633
+
634
+
635
+
636
+
637
+ <li class="section-title">
638
+ Pages
639
+ </li>
640
+
641
+
642
+
643
+
644
+
645
+ <li class="has-sub" >
646
+ <a class="sidenav-item-link" href="javascript:void(0)" data-toggle="collapse" data-target="#users"
647
+ aria-expanded="false" aria-controls="users">
648
+ <i class="mdi mdi-image-filter-none"></i>
649
+ <span class="nav-text">User</span> <b class="caret"></b>
650
+ </a>
651
+ <ul class="collapse" id="users"
652
+ data-parent="#sidebar-menu">
653
+ <div class="sub-menu">
654
+
655
+
656
+
657
+ <li >
658
+ <a class="sidenav-item-link" href="user-profile.html">
659
+ <span class="nav-text">User Profile</span>
660
+
661
+ </a>
662
+ </li>
663
+
664
+
665
+
666
+
667
+
668
+
669
+ <li >
670
+ <a class="sidenav-item-link" href="user-activities.html">
671
+ <span class="nav-text">User Activities</span>
672
+
673
+ </a>
674
+ </li>
675
+
676
+
677
+
678
+
679
+
680
+
681
+ <li >
682
+ <a class="sidenav-item-link" href="user-profile-settings.html">
683
+ <span class="nav-text">User Profile Settings</span>
684
+
685
+ </a>
686
+ </li>
687
+
688
+
689
+
690
+
691
+
692
+
693
+ <li >
694
+ <a class="sidenav-item-link" href="user-account-settings.html">
695
+ <span class="nav-text">User Account Settings</span>
696
+
697
+ </a>
698
+ </li>
699
+
700
+
701
+
702
+
703
+
704
+
705
+ <li >
706
+ <a class="sidenav-item-link" href="user-planing-settings.html">
707
+ <span class="nav-text">User Planing Settings</span>
708
+
709
+ </a>
710
+ </li>
711
+
712
+
713
+
714
+
715
+
716
+
717
+ <li >
718
+ <a class="sidenav-item-link" href="user-billing.html">
719
+ <span class="nav-text">User billing</span>
720
+
721
+ </a>
722
+ </li>
723
+
724
+
725
+
726
+
727
+
728
+
729
+ <li >
730
+ <a class="sidenav-item-link" href="user-notify-settings.html">
731
+ <span class="nav-text">User Notify Settings</span>
732
+
733
+ </a>
734
+ </li>
735
+
736
+
737
+
738
+
739
+ </div>
740
+ </ul>
741
+ </li>
742
+
743
+
744
+
745
+
746
+
747
+ <li class="has-sub" >
748
+ <a class="sidenav-item-link" href="javascript:void(0)" data-toggle="collapse" data-target="#authentication"
749
+ aria-expanded="false" aria-controls="authentication">
750
+ <i class="mdi mdi-account"></i>
751
+ <span class="nav-text">Authentication</span> <b class="caret"></b>
752
+ </a>
753
+ <ul class="collapse" id="authentication"
754
+ data-parent="#sidebar-menu">
755
+ <div class="sub-menu">
756
+
757
+
758
+
759
+ <li >
760
+ <a class="sidenav-item-link" href="sign-in.html">
761
+ <span class="nav-text">Sign In</span>
762
+
763
+ </a>
764
+ </li>
765
+
766
+
767
+
768
+
769
+
770
+
771
+ <li >
772
+ <a class="sidenav-item-link" href="sign-up.html">
773
+ <span class="nav-text">Sign Up</span>
774
+
775
+ </a>
776
+ </li>
777
+
778
+
779
+
780
+
781
+
782
+
783
+ <li >
784
+ <a class="sidenav-item-link" href="reset-password.html">
785
+ <span class="nav-text">Reset Password</span>
786
+
787
+ </a>
788
+ </li>
789
+
790
+
791
+
792
+
793
+ </div>
794
+ </ul>
795
+ </li>
796
+
797
+
798
+
799
+
800
+
801
+ <li class="has-sub" >
802
+ <a class="sidenav-item-link" href="javascript:void(0)" data-toggle="collapse" data-target="#other-page"
803
+ aria-expanded="false" aria-controls="other-page">
804
+ <i class="mdi mdi-file-multiple"></i>
805
+ <span class="nav-text">Other pages</span> <b class="caret"></b>
806
+ </a>
807
+ <ul class="collapse" id="other-page"
808
+ data-parent="#sidebar-menu">
809
+ <div class="sub-menu">
810
+
811
+
812
+
813
+ <li >
814
+ <a class="sidenav-item-link" href="invoice.html">
815
+ <span class="nav-text">Invoice</span>
816
+
817
+ </a>
818
+ </li>
819
+
820
+
821
+
822
+
823
+
824
+
825
+ <li >
826
+ <a class="sidenav-item-link" href="404.html">
827
+ <span class="nav-text">404 page</span>
828
+
829
+ </a>
830
+ </li>
831
+
832
+
833
+
834
+
835
+
836
+
837
+ <li >
838
+ <a class="sidenav-item-link" href="page-comingsoon.html">
839
+ <span class="nav-text">Coming Soon</span>
840
+
841
+ </a>
842
+ </li>
843
+
844
+
845
+
846
+
847
+
848
+
849
+ <li >
850
+ <a class="sidenav-item-link" href="page-maintenance.html">
851
+ <span class="nav-text">Maintenance</span>
852
+
853
+ </a>
854
+ </li>
855
+
856
+
857
+
858
+
859
+ </div>
860
+ </ul>
861
+ </li>
862
+
863
+
864
+
865
+
866
+
867
+ <li class="section-title">
868
+ Documentation
869
+ </li>
870
+
871
+
872
+
873
+
874
+
875
+ <li
876
+ >
877
+ <a class="sidenav-item-link" href="getting-started.html">
878
+ <i class="mdi mdi-airplane"></i>
879
+ <span class="nav-text">Getting Started</span>
880
+ </a>
881
+ </li>
882
+
883
+
884
+
885
+
886
+
887
+ <li class="has-sub" >
888
+ <a class="sidenav-item-link" href="javascript:void(0)" data-toggle="collapse" data-target="#customization"
889
+ aria-expanded="false" aria-controls="customization">
890
+ <i class="mdi mdi-square-edit-outline"></i>
891
+ <span class="nav-text">Customization</span> <b class="caret"></b>
892
+ </a>
893
+ <ul class="collapse" id="customization"
894
+ data-parent="#sidebar-menu">
895
+ <div class="sub-menu">
896
+
897
+
898
+
899
+ <li >
900
+ <a class="sidenav-item-link" href="navbar-customization.html">
901
+ <span class="nav-text">Navbar</span>
902
+
903
+ </a>
904
+ </li>
905
+
906
+
907
+
908
+
909
+
910
+
911
+ <li >
912
+ <a class="sidenav-item-link" href="sidebar-customization.html">
913
+ <span class="nav-text">Sidebar</span>
914
+
915
+ </a>
916
+ </li>
917
+
918
+
919
+
920
+
921
+
922
+
923
+ <li >
924
+ <a class="sidenav-item-link" href="styling.html">
925
+ <span class="nav-text">Styling</span>
926
+
927
+ </a>
928
+ </li>
929
+
930
+
931
+
932
+
933
+ </div>
934
+ </ul>
935
+ </li>
936
+
937
+
938
+
939
+ </ul>
940
+
941
+ </div>
942
+
943
+ <div class="sidebar-footer">
944
+ <div class="sidebar-footer-content">
945
+ <ul class="d-flex">
946
+ <li>
947
+ <a href="user-account-settings.html" data-toggle="tooltip" title="Profile settings"><i class="mdi mdi-settings"></i></a></li>
948
+ <li>
949
+ <a href="#" data-toggle="tooltip" title="No chat messages"><i class="mdi mdi-chat-processing"></i></a>
950
+ </li>
951
+ </ul>
952
+ </div>
953
+ </div>
954
+ </div>
955
+ </aside>
956
+
957
+
958
+
959
+ <!-- ====================================
960
+ ——— PAGE WRAPPER
961
+ ===================================== -->
962
+ <div class="page-wrapper">
963
+
964
+ <!-- Header -->
965
+ <header class="main-header" id="header">
966
+ <nav class="navbar navbar-expand-lg navbar-light" id="navbar">
967
+ <!-- Sidebar toggle button -->
968
+ <button id="sidebar-toggler" class="sidebar-toggle">
969
+ <span class="sr-only">Toggle navigation</span>
970
+ </button>
971
+
972
+ <span class="page-title">editor</span>
973
+
974
+ <div class="navbar-right ">
975
+
976
+ <!-- search form -->
977
+ <div class="search-form">
978
+ <form action="index.html" method="get">
979
+ <div class="input-group input-group-sm" id="input-group-search">
980
+ <input type="text" autocomplete="off" name="query" id="search-input" class="form-control" placeholder="Search..." />
981
+ <div class="input-group-append">
982
+ <button class="btn" type="button">/</button>
983
+ </div>
984
+ </div>
985
+ </form>
986
+ <ul class="dropdown-menu dropdown-menu-search">
987
+
988
+ <li class="nav-item">
989
+ <a class="nav-link" href="index.html">Morbi leo risus</a>
990
+ </li>
991
+ <li class="nav-item">
992
+ <a class="nav-link" href="index.html">Dapibus ac facilisis in</a>
993
+ </li>
994
+ <li class="nav-item">
995
+ <a class="nav-link" href="index.html">Porta ac consectetur ac</a>
996
+ </li>
997
+ <li class="nav-item">
998
+ <a class="nav-link" href="index.html">Vestibulum at eros</a>
999
+ </li>
1000
+
1001
+ </ul>
1002
+
1003
+ </div>
1004
+
1005
+ <ul class="nav navbar-nav">
1006
+ <!-- Offcanvas -->
1007
+ <li class="custom-dropdown">
1008
+ <a class="offcanvas-toggler active custom-dropdown-toggler" data-offcanvas="contact-off" href="javascript:" >
1009
+ <i class="mdi mdi-contacts icon"></i>
1010
+ </a>
1011
+ </li>
1012
+ <li class="custom-dropdown">
1013
+ <button class="notify-toggler custom-dropdown-toggler">
1014
+ <i class="mdi mdi-bell-outline icon"></i>
1015
+ <span class="badge badge-xs rounded-circle">21</span>
1016
+ </button>
1017
+ <div class="dropdown-notify">
1018
+
1019
+ <header>
1020
+ <div class="nav nav-underline" id="nav-tab" role="tablist">
1021
+ <a class="nav-item nav-link active" id="all-tabs" data-toggle="tab" href="#all" role="tab" aria-controls="nav-home"
1022
+ aria-selected="true">All (5)</a>
1023
+ <a class="nav-item nav-link" id="message-tab" data-toggle="tab" href="#message" role="tab" aria-controls="nav-profile"
1024
+ aria-selected="false">Msgs (4)</a>
1025
+ <a class="nav-item nav-link" id="other-tab" data-toggle="tab" href="#other" role="tab" aria-controls="nav-contact"
1026
+ aria-selected="false">Others (3)</a>
1027
+ </div>
1028
+ </header>
1029
+
1030
+ <div class="" data-simplebar style="height: 325px;">
1031
+ <div class="tab-content" id="myTabContent">
1032
+
1033
+ <div class="tab-pane fade show active" id="all" role="tabpanel" aria-labelledby="all-tabs">
1034
+
1035
+ <div class="media media-sm bg-warning-10 p-4 mb-0">
1036
+ <div class="media-sm-wrapper">
1037
+ <a href="user-profile.html">
1038
+ <img src="images/user/user-sm-02.jpg" alt="User Image">
1039
+ </a>
1040
+ </div>
1041
+ <div class="media-body">
1042
+ <a href="user-profile.html">
1043
+ <span class="title mb-0">John Doe</span>
1044
+ <span class="discribe">Extremity sweetness difficult behaviour he of. On disposal of as landlord horrible. Afraid at highly months do things on at.</span>
1045
+ <span class="time">
1046
+ <time>Just now</time>...
1047
+ </span>
1048
+ </a>
1049
+ </div>
1050
+ </div>
1051
+
1052
+ <div class="media media-sm p-4 bg-light mb-0">
1053
+ <div class="media-sm-wrapper bg-primary">
1054
+ <a href="user-profile.html">
1055
+ <i class="mdi mdi-calendar-check-outline"></i>
1056
+ </a>
1057
+ </div>
1058
+ <div class="media-body">
1059
+ <a href="user-profile.html">
1060
+ <span class="title mb-0">New event added</span>
1061
+ <span class="discribe">1/3/2014 (1pm - 2pm)</span>
1062
+ <span class="time">
1063
+ <time>10 min ago...</time>...
1064
+ </span>
1065
+ </a>
1066
+ </div>
1067
+ </div>
1068
+
1069
+ <div class="media media-sm p-4 mb-0">
1070
+ <div class="media-sm-wrapper">
1071
+ <a href="user-profile.html">
1072
+ <img src="images/user/user-sm-03.jpg" alt="User Image">
1073
+ </a>
1074
+ </div>
1075
+ <div class="media-body">
1076
+ <a href="user-profile.html">
1077
+ <span class="title mb-0">Sagge Hudson</span>
1078
+ <span class="discribe">On disposal of as landlord Afraid at highly months do things on at.</span>
1079
+ <span class="time">
1080
+ <time>1 hrs ago</time>...
1081
+ </span>
1082
+ </a>
1083
+ </div>
1084
+ </div>
1085
+
1086
+ <div class="media media-sm p-4 mb-0">
1087
+ <div class="media-sm-wrapper bg-info-dark">
1088
+ <a href="user-profile.html">
1089
+ <i class="mdi mdi-account-multiple-check"></i>
1090
+ </a>
1091
+ </div>
1092
+ <div class="media-body">
1093
+ <a href="user-profile.html">
1094
+ <span class="title mb-0">Add request</span>
1095
+ <span class="discribe">Add Dany Jones as your contact.</span>
1096
+ <div class="buttons">
1097
+ <a href="#" class="btn btn-sm btn-success shadow-none text-white">accept</a>
1098
+ <a href="#" class="btn btn-sm shadow-none">delete</a>
1099
+ </div>
1100
+ <span class="time">
1101
+ <time>6 hrs ago</time>...
1102
+ </span>
1103
+ </a>
1104
+ </div>
1105
+ </div>
1106
+
1107
+ <div class="media media-sm p-4 mb-0">
1108
+ <div class="media-sm-wrapper bg-info">
1109
+ <a href="user-profile.html">
1110
+ <i class="mdi mdi-playlist-check"></i>
1111
+ </a>
1112
+ </div>
1113
+ <div class="media-body">
1114
+ <a href="user-profile.html">
1115
+ <span class="title mb-0">Task complete</span>
1116
+ <span class="discribe">Afraid at highly months do things on at.</span>
1117
+ <span class="time">
1118
+ <time>1 hrs ago</time>...
1119
+ </span>
1120
+ </a>
1121
+ </div>
1122
+ </div>
1123
+
1124
+ </div>
1125
+
1126
+ <div class="tab-pane fade" id="message" role="tabpanel" aria-labelledby="message-tab">
1127
+
1128
+ <div class="media media-sm p-4 mb-0">
1129
+ <div class="media-sm-wrapper">
1130
+ <a href="user-profile.html">
1131
+ <img src="images/user/user-sm-01.jpg" alt="User Image">
1132
+ </a>
1133
+ </div>
1134
+ <div class="media-body">
1135
+ <a href="user-profile.html">
1136
+ <span class="title mb-0">Selena Wagner</span>
1137
+ <span class="discribe">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</span>
1138
+ <span class="time">
1139
+ <time>15 min ago</time>...
1140
+ </span>
1141
+ </a>
1142
+ </div>
1143
+ </div>
1144
+
1145
+ <div class="media media-sm p-4 mb-0">
1146
+ <div class="media-sm-wrapper">
1147
+ <a href="user-profile.html">
1148
+ <img src="images/user/user-sm-03.jpg" alt="User Image">
1149
+ </a>
1150
+ </div>
1151
+ <div class="media-body">
1152
+ <a href="user-profile.html">
1153
+ <span class="title mb-0">Sagge Hudson</span>
1154
+ <span class="discribe">On disposal of as landlord Afraid at highly months do things on at.</span>
1155
+ <span class="time">
1156
+ <time>1 hrs ago</time>...
1157
+ </span>
1158
+ </a>
1159
+ </div>
1160
+ </div>
1161
+
1162
+ <div class="media media-sm bg-warning-10 p-4 mb-0">
1163
+ <div class="media-sm-wrapper">
1164
+ <a href="user-profile.html">
1165
+ <img src="images/user/user-sm-02.jpg" alt="User Image">
1166
+ </a>
1167
+ </div>
1168
+ <div class="media-body">
1169
+ <a href="user-profile.html">
1170
+ <span class="title mb-0">John Doe</span>
1171
+ <span class="discribe">Extremity sweetness difficult behaviour he of. On disposal of as landlord horrible. Afraid
1172
+ at highly months do things on at.</span>
1173
+ <span class="time">
1174
+ <time>Just now</time>...
1175
+ </span>
1176
+ </a>
1177
+ </div>
1178
+ </div>
1179
+
1180
+ <div class="media media-sm p-4 mb-0">
1181
+ <div class="media-sm-wrapper">
1182
+ <a href="user-profile.html">
1183
+ <img src="images/user/user-sm-04.jpg" alt="User Image">
1184
+ </a>
1185
+ </div>
1186
+ <div class="media-body">
1187
+ <a href="user-profile.html">
1188
+ <span class="title mb-0">Albrecht Straub</span>
1189
+ <span class="discribe"> Beatae quia natus assumenda laboriosam, nisi perferendis aliquid consectetur expedita non tenetur.</span>
1190
+ <span class="time">
1191
+ <time>Just now</time>...
1192
+ </span>
1193
+ </a>
1194
+ </div>
1195
+ </div>
1196
+
1197
+ </div>
1198
+ <div class="tab-pane fade" id="other" role="tabpanel" aria-labelledby="contact-tab">
1199
+
1200
+ <div class="media media-sm p-4 bg-light mb-0">
1201
+ <div class="media-sm-wrapper bg-primary">
1202
+ <a href="user-profile.html">
1203
+ <i class="mdi mdi-calendar-check-outline"></i>
1204
+ </a>
1205
+ </div>
1206
+ <div class="media-body">
1207
+ <a href="user-profile.html">
1208
+ <span class="title mb-0">New event added</span>
1209
+ <span class="discribe">1/3/2014 (1pm - 2pm)</span>
1210
+ <span class="time">
1211
+ <time>10 min ago...</time>...
1212
+ </span>
1213
+ </a>
1214
+ </div>
1215
+ </div>
1216
+
1217
+ <div class="media media-sm p-4 mb-0">
1218
+ <div class="media-sm-wrapper bg-info-dark">
1219
+ <a href="user-profile.html">
1220
+ <i class="mdi mdi-account-multiple-check"></i>
1221
+ </a>
1222
+ </div>
1223
+ <div class="media-body">
1224
+ <a href="user-profile.html">
1225
+ <span class="title mb-0">Add request</span>
1226
+ <span class="discribe">Add Dany Jones as your contact.</span>
1227
+ <div class="buttons">
1228
+ <a href="#" class="btn btn-sm btn-success shadow-none text-white">accept</a>
1229
+ <a href="#" class="btn btn-sm shadow-none">delete</a>
1230
+ </div>
1231
+ <span class="time">
1232
+ <time>6 hrs ago</time>...
1233
+ </span>
1234
+ </a>
1235
+ </div>
1236
+ </div>
1237
+
1238
+ <div class="media media-sm p-4 mb-0">
1239
+ <div class="media-sm-wrapper bg-info">
1240
+ <a href="user-profile.html">
1241
+ <i class="mdi mdi-playlist-check"></i>
1242
+ </a>
1243
+ </div>
1244
+ <div class="media-body">
1245
+ <a href="user-profile.html">
1246
+ <span class="title mb-0">Task complete</span>
1247
+ <span class="discribe">Afraid at highly months do things on at.</span>
1248
+ <span class="time">
1249
+ <time>1 hrs ago</time>...
1250
+ </span>
1251
+ </a>
1252
+ </div>
1253
+ </div>
1254
+
1255
+ </div>
1256
+ </div>
1257
+ </div>
1258
+
1259
+ <footer class="border-top dropdown-notify-footer">
1260
+ <div class="d-flex justify-content-between align-items-center py-2 px-4">
1261
+ <span>Last updated 3 min ago</span>
1262
+ <a id="refress-button" href="javascript:" class="btn mdi mdi-cached btn-refress"></a>
1263
+ </div>
1264
+ </footer>
1265
+ </div>
1266
+ </li>
1267
+ <!-- User Account -->
1268
+ <li class="dropdown user-menu">
1269
+ <button class="dropdown-toggle nav-link" data-toggle="dropdown">
1270
+ <img src="images/user/user-xs-01.jpg" class="user-image rounded-circle" alt="User Image" />
1271
+ <span class="d-none d-lg-inline-block">John Doe</span>
1272
+ </button>
1273
+ <ul class="dropdown-menu dropdown-menu-right">
1274
+ <li>
1275
+ <a class="dropdown-link-item" href="user-profile.html">
1276
+ <i class="mdi mdi-account-outline"></i>
1277
+ <span class="nav-text">My Profile</span>
1278
+ </a>
1279
+ </li>
1280
+ <li>
1281
+ <a class="dropdown-link-item" href="email-inbox.html">
1282
+ <i class="mdi mdi-email-outline"></i>
1283
+ <span class="nav-text">Message</span>
1284
+ <span class="badge badge-pill badge-primary">24</span>
1285
+ </a>
1286
+ </li>
1287
+ <li>
1288
+ <a class="dropdown-link-item" href="user-activities.html">
1289
+ <i class="mdi mdi-diamond-stone"></i>
1290
+ <span class="nav-text">Activitise</span></a>
1291
+ </li>
1292
+ <li>
1293
+ <a class="dropdown-link-item" href="user-account-settings.html">
1294
+ <i class="mdi mdi-settings"></i>
1295
+ <span class="nav-text">Account Setting</span>
1296
+ </a>
1297
+ </li>
1298
+
1299
+ <li class="dropdown-footer">
1300
+ <a class="dropdown-link-item" href="sign-in.html"> <i class="mdi mdi-logout"></i> Log Out </a>
1301
+ </li>
1302
+ </ul>
1303
+ </li>
1304
+ </ul>
1305
+ </div>
1306
+ </nav>
1307
+
1308
+
1309
+ </header>
1310
+
1311
+ <!-- ====================================
1312
+ ——— CONTENT WRAPPER
1313
+ ===================================== -->
1314
+ <div class="content-wrapper">
1315
+ <div class="content"><!-- For Components documentaion -->
1316
+ <div class="card card-default">
1317
+ <div class="px-6 py-4">
1318
+ <p>Mono provides a <span class="text-secondary text-capitalize"> quill js text editor </span> with a
1319
+ little customization that suits its design standards. For more information, please see the official <a
1320
+ class="font-weight-bold" href="https://quilljs.com/docs/quickstart/" target="_blank"> Quilljs Documentaion.</a></p>
1321
+ </div>
1322
+ </div>
1323
+ <!-- Editor -->
1324
+ <div class="card card-default">
1325
+ <div class="card-header">
1326
+ <h2>Editor</h2>
1327
+
1328
+ <a class="btn mdi mdi-code-tags" data-toggle="collapse" href="#collapse-text-editor" role="button" aria-expanded="false"
1329
+ aria-controls="collapse-text-editor"> </a>
1330
+
1331
+
1332
+ </div>
1333
+ <div class="card-body">
1334
+ <div class="collapse" id="collapse-text-editor">
1335
+ <pre class="language-html mb-4">
1336
+ <code >
1337
+ &lt;div id="standalone">
1338
+ &lt;div id="toolbar">
1339
+ &lt;span class="ql-formats">
1340
+ &lt;select class="ql-font">&lt;/select>
1341
+ &lt;select class="ql-size">&lt;/select>
1342
+ &lt;/span>
1343
+ &lt;span class="ql-formats">
1344
+ &lt;button class="ql-bold">&lt;/button>
1345
+ &lt;button class="ql-italic">&lt;/button>
1346
+ &lt;button class="ql-underline">&lt;/button>
1347
+ &lt;/span>
1348
+ &lt;span class="ql-formats">
1349
+ &lt;select class="ql-color">&lt;/select>
1350
+ &lt;/span>
1351
+ &lt;span class="ql-formats">
1352
+ &lt;button class="ql-blockquote">&lt;/button>
1353
+ &lt;/span>
1354
+ &lt;span class="ql-formats">
1355
+ &lt;button class="ql-list" value="ordered">&lt;/button>
1356
+ &lt;button class="ql-list" value="bullet">&lt;/button>
1357
+ &lt;button class="ql-indent" value="-1">&lt;/button>
1358
+ &lt;button class="ql-indent" value="+1">&lt;/button>
1359
+ &lt;/span>
1360
+ &lt;span class="ql-formats">
1361
+ &lt;button class="ql-direction" value="rtl">&lt;/button>
1362
+ &lt;select class="ql-align">&lt;/select>
1363
+ &lt;/span>
1364
+ &lt;/div>
1365
+ &lt;/div>
1366
+ &lt;div id="editor">&lt;/div>
1367
+ </code>
1368
+ </pre>
1369
+ </div>
1370
+ <div id="standalone">
1371
+ <div id="toolbar">
1372
+ <span class="ql-formats">
1373
+ <select class="ql-font"></select>
1374
+ <select class="ql-size"></select>
1375
+ </span>
1376
+ <span class="ql-formats">
1377
+ <button class="ql-bold"></button>
1378
+ <button class="ql-italic"></button>
1379
+ <button class="ql-underline"></button>
1380
+ </span>
1381
+ <span class="ql-formats">
1382
+ <select class="ql-color"></select>
1383
+ </span>
1384
+ <span class="ql-formats">
1385
+ <button class="ql-blockquote"></button>
1386
+ </span>
1387
+ <span class="ql-formats">
1388
+ <button class="ql-list" value="ordered"></button>
1389
+ <button class="ql-list" value="bullet"></button>
1390
+ <button class="ql-indent" value="-1"></button>
1391
+ <button class="ql-indent" value="+1"></button>
1392
+ </span>
1393
+ <span class="ql-formats">
1394
+ <button class="ql-direction" value="rtl"></button>
1395
+ <select class="ql-align"></select>
1396
+ </span>
1397
+ </div>
1398
+ </div>
1399
+ <div id="editor"></div>
1400
+ </div>
1401
+ </div>
1402
+
1403
+ <!-- For Components documentaion -->
1404
+ <div class="card card-default">
1405
+ <div class="px-6 py-4">
1406
+ <p>Mono provides a <span class="text-secondary text-capitalize"> codemirror Editor </span> with a
1407
+ little customization that suits its design standards. For more information, please see the official <a
1408
+ class="font-weight-bold" href="https://codemirror.net/index.html" target="_blank"> CodeMirror Documentaion.</a></p>
1409
+ </div>
1410
+ </div>
1411
+
1412
+ <!-- CodeMirror Editor -->
1413
+ <div class="card card-default">
1414
+ <div class="card-header">
1415
+ <h2>CodeMirror Editor</h2>
1416
+
1417
+ <a class="btn mdi mdi-code-tags" data-toggle="collapse" href="#collapse-codeMirror-editor" role="button" aria-expanded="false"
1418
+ aria-controls="collapse-codeMirror-editor"> </a>
1419
+
1420
+
1421
+ </div>
1422
+ <div class="card-body">
1423
+ <div class="collapse" id="collapse-codeMirror-editor">
1424
+ <pre class="language-html mb-4">
1425
+ <code >
1426
+ &lt;div id="code-editor">&lt;/div>
1427
+ </code>
1428
+ </pre>
1429
+ </div>
1430
+ <div id="code-editor"></div>
1431
+ </div>
1432
+ </div>
1433
+
1434
+
1435
+ </div>
1436
+
1437
+ </div>
1438
+
1439
+ <!-- Footer -->
1440
+ <footer class="footer mt-auto">
1441
+ <div class="copyright bg-white">
1442
+ <p>
1443
+ &copy; <span id="copy-year"></span> Copyright Mono Dashboard Bootstrap Template by <a class="text-primary" href="http://www.iamabdus.com/" target="_blank" >Abdus</a>.
1444
+ </p>
1445
+ </div>
1446
+ <script>
1447
+ var d = new Date();
1448
+ var year = d.getFullYear();
1449
+ document.getElementById("copy-year").innerHTML = year;
1450
+ </script>
1451
+ </footer>
1452
+
1453
+ </div>
1454
+ </div>
1455
+
1456
+ <!-- Card Offcanvas -->
1457
+ <div class="card card-offcanvas" id="contact-off" >
1458
+ <div class="card-header">
1459
+ <h2>Contacts</h2>
1460
+ <a href="#" class="btn btn-primary btn-pill px-4">Add New</a>
1461
+ </div>
1462
+ <div class="card-body">
1463
+
1464
+ <div class="mb-4">
1465
+ <input type="text" class="form-control form-control-lg form-control-secondary rounded-0" placeholder="Search contacts...">
1466
+ </div>
1467
+
1468
+ <div class="media media-sm">
1469
+ <div class="media-sm-wrapper">
1470
+ <a href="user-profile.html">
1471
+ <img src="images/user/user-sm-01.jpg" alt="User Image">
1472
+ <span class="active bg-primary"></span>
1473
+ </a>
1474
+ </div>
1475
+ <div class="media-body">
1476
+ <a href="user-profile.html">
1477
+ <span class="title">Selena Wagner</span>
1478
+ <span class="discribe">Designer</span>
1479
+ </a>
1480
+ </div>
1481
+ </div>
1482
+
1483
+ <div class="media media-sm">
1484
+ <div class="media-sm-wrapper">
1485
+ <a href="user-profile.html">
1486
+ <img src="images/user/user-sm-02.jpg" alt="User Image">
1487
+ <span class="active bg-primary"></span>
1488
+ </a>
1489
+ </div>
1490
+ <div class="media-body">
1491
+ <a href="user-profile.html">
1492
+ <span class="title">Walter Reuter</span>
1493
+ <span>Developer</span>
1494
+ </a>
1495
+ </div>
1496
+ </div>
1497
+
1498
+ <div class="media media-sm">
1499
+ <div class="media-sm-wrapper">
1500
+ <a href="user-profile.html">
1501
+ <img src="images/user/user-sm-03.jpg" alt="User Image">
1502
+ </a>
1503
+ </div>
1504
+ <div class="media-body">
1505
+ <a href="user-profile.html">
1506
+ <span class="title">Larissa Gebhardt</span>
1507
+ <span>Cyber Punk</span>
1508
+ </a>
1509
+ </div>
1510
+ </div>
1511
+
1512
+ <div class="media media-sm">
1513
+ <div class="media-sm-wrapper">
1514
+ <a href="user-profile.html">
1515
+ <img src="images/user/user-sm-04.jpg" alt="User Image">
1516
+ </a>
1517
+
1518
+ </div>
1519
+ <div class="media-body">
1520
+ <a href="user-profile.html">
1521
+ <span class="title">Albrecht Straub</span>
1522
+ <span>Photographer</span>
1523
+ </a>
1524
+ </div>
1525
+ </div>
1526
+
1527
+ <div class="media media-sm">
1528
+ <div class="media-sm-wrapper">
1529
+ <a href="user-profile.html">
1530
+ <img src="images/user/user-sm-05.jpg" alt="User Image">
1531
+ <span class="active bg-danger"></span>
1532
+ </a>
1533
+ </div>
1534
+ <div class="media-body">
1535
+ <a href="user-profile.html">
1536
+ <span class="title">Leopold Ebert</span>
1537
+ <span>Fashion Designer</span>
1538
+ </a>
1539
+ </div>
1540
+ </div>
1541
+
1542
+ <div class="media media-sm">
1543
+ <div class="media-sm-wrapper">
1544
+ <a href="user-profile.html">
1545
+ <img src="images/user/user-sm-06.jpg" alt="User Image">
1546
+ <span class="active bg-primary"></span>
1547
+ </a>
1548
+ </div>
1549
+ <div class="media-body">
1550
+ <a href="user-profile.html">
1551
+ <span class="title">Selena Wagner</span>
1552
+ <span>Photographer</span>
1553
+ </a>
1554
+ </div>
1555
+ </div>
1556
+
1557
+ </div>
1558
+ </div>
1559
+
1560
+
1561
+
1562
+
1563
+ <script src="plugins/jquery/jquery.min.js"></script>
1564
+ <script src="plugins/bootstrap/js/bootstrap.bundle.min.js"></script>
1565
+ <script src="plugins/simplebar/simplebar.min.js"></script>
1566
+ <script src="https://unpkg.com/hotkeys-js/dist/hotkeys.min.js"></script>
1567
+
1568
+
1569
+
1570
+ <script src="plugins/prism/prism.js"></script>
1571
+
1572
+
1573
+
1574
+ <script src="plugins/codemirror/codemirror.js"></script>
1575
+ <script src="plugins/codemirror/mode/xml/xml.js"></script>
1576
+ <script src="plugins/codemirror/mode/css/css.js"></script>
1577
+
1578
+
1579
+
1580
+ <script src="https://cdn.quilljs.com/1.3.6/quill.js"></script>
1581
+
1582
+
1583
+ <script src="js/mono.js"></script>
1584
+ <script src="js/chart.js"></script>
1585
+ <script src="js/map.js"></script>
1586
+ <script src="js/custom.js"></script>
1587
+
1588
+
1589
+
1590
+
1591
+ <!-- -->
1592
+
1593
+
1594
+ </body>
1595
+ </html>
email-compose.html ADDED
@@ -0,0 +1,1570 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+
3
+ <!--
4
+ // WEBSITE: https://themefisher.com
5
+ // TWITTER: https://twitter.com/themefisher
6
+ // FACEBOOK: https://www.facebook.com/themefisher
7
+ // GITHUB: https://github.com/themefisher/
8
+ -->
9
+
10
+ <html lang="en" dir="ltr">
11
+ <head>
12
+ <meta charset="utf-8" />
13
+ <meta http-equiv="X-UA-Compatible" content="IE=edge" />
14
+ <meta name="viewport" content="width=device-width, initial-scale=1" />
15
+
16
+ <title>Mono - Responsive Admin & Dashboard Template</title>
17
+
18
+ <!-- GOOGLE FONTS -->
19
+ <link href="https://fonts.googleapis.com/css?family=Karla:400,700|Roboto" rel="stylesheet">
20
+ <link href="plugins/material/css/materialdesignicons.min.css" rel="stylesheet" />
21
+ <link href="plugins/simplebar/simplebar.css" rel="stylesheet" />
22
+
23
+ <!-- PLUGINS CSS STYLE -->
24
+ <link href="plugins/nprogress/nprogress.css" rel="stylesheet" />
25
+
26
+
27
+ <link href="https://cdn.quilljs.com/1.3.6/quill.snow.css" rel="stylesheet">
28
+
29
+
30
+
31
+
32
+ <!-- MONO CSS -->
33
+ <link id="main-css-href" rel="stylesheet" href="css/style.css" />
34
+
35
+
36
+
37
+
38
+ <!-- FAVICON -->
39
+ <link href="images/favicon.png" rel="shortcut icon" />
40
+
41
+ <!--
42
+ HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries
43
+ -->
44
+ <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
45
+ <!--[if lt IE 9]>
46
+ <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
47
+ <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
48
+ <![endif]-->
49
+ <script src="plugins/nprogress/nprogress.js"></script>
50
+ </head>
51
+
52
+
53
+ <body class="navbar-fixed sidebar-fixed" id="body">
54
+ <script>
55
+ NProgress.configure({ showSpinner: false });
56
+ NProgress.start();
57
+ </script>
58
+
59
+
60
+
61
+ <!-- ====================================
62
+ ——— WRAPPER
63
+ ===================================== -->
64
+ <div class="wrapper">
65
+
66
+
67
+ <!-- ====================================
68
+ ——— LEFT SIDEBAR WITH OUT FOOTER
69
+ ===================================== -->
70
+ <aside class="left-sidebar sidebar-dark" id="left-sidebar">
71
+ <div id="sidebar" class="sidebar sidebar-with-footer">
72
+ <!-- Aplication Brand -->
73
+ <div class="app-brand">
74
+ <a href="/index.html">
75
+ <img src="images/logo.png" alt="Mono">
76
+ <span class="brand-name">MONO</span>
77
+ </a>
78
+ </div>
79
+ <!-- begin sidebar scrollbar -->
80
+ <div class="sidebar-left" data-simplebar style="height: 100%;">
81
+ <!-- sidebar menu -->
82
+ <ul class="nav sidebar-inner" id="sidebar-menu">
83
+
84
+
85
+
86
+ <li
87
+ >
88
+ <a class="sidenav-item-link" href="index.html">
89
+ <i class="mdi mdi-briefcase-account-outline"></i>
90
+ <span class="nav-text">Business Dashboard</span>
91
+ </a>
92
+ </li>
93
+
94
+
95
+
96
+
97
+
98
+ <li
99
+ >
100
+ <a class="sidenav-item-link" href="analytics.html">
101
+ <i class="mdi mdi-chart-line"></i>
102
+ <span class="nav-text">Analytics Dashboard</span>
103
+ </a>
104
+ </li>
105
+
106
+
107
+
108
+
109
+
110
+ <li class="section-title">
111
+ Apps
112
+ </li>
113
+
114
+
115
+
116
+
117
+
118
+ <li
119
+ >
120
+ <a class="sidenav-item-link" href="chat.html">
121
+ <i class="mdi mdi-wechat"></i>
122
+ <span class="nav-text">Chat</span>
123
+ </a>
124
+ </li>
125
+
126
+
127
+
128
+
129
+
130
+ <li
131
+ >
132
+ <a class="sidenav-item-link" href="contacts.html">
133
+ <i class="mdi mdi-phone"></i>
134
+ <span class="nav-text">Contacts</span>
135
+ </a>
136
+ </li>
137
+
138
+
139
+
140
+
141
+
142
+ <li
143
+ >
144
+ <a class="sidenav-item-link" href="team.html">
145
+ <i class="mdi mdi-account-group"></i>
146
+ <span class="nav-text">Team</span>
147
+ </a>
148
+ </li>
149
+
150
+
151
+
152
+
153
+
154
+ <li
155
+ >
156
+ <a class="sidenav-item-link" href="calendar.html">
157
+ <i class="mdi mdi-calendar-check"></i>
158
+ <span class="nav-text">Calendar</span>
159
+ </a>
160
+ </li>
161
+
162
+
163
+
164
+
165
+
166
+ <li class="has-sub active expand" >
167
+ <a class="sidenav-item-link" href="javascript:void(0)" data-toggle="collapse" data-target="#email"
168
+ aria-expanded="false" aria-controls="email">
169
+ <i class="mdi mdi-email"></i>
170
+ <span class="nav-text">email</span> <b class="caret"></b>
171
+ </a>
172
+ <ul class="collapse show" id="email"
173
+ data-parent="#sidebar-menu">
174
+ <div class="sub-menu">
175
+
176
+
177
+
178
+ <li >
179
+ <a class="sidenav-item-link" href="email-inbox.html">
180
+ <span class="nav-text">Email Inbox</span>
181
+
182
+ </a>
183
+ </li>
184
+
185
+
186
+
187
+
188
+
189
+
190
+ <li >
191
+ <a class="sidenav-item-link" href="email-details.html">
192
+ <span class="nav-text">Email Details</span>
193
+
194
+ </a>
195
+ </li>
196
+
197
+
198
+
199
+
200
+
201
+
202
+ <li class="active" >
203
+ <a class="sidenav-item-link" href="email-compose.html">
204
+ <span class="nav-text">Email Compose</span>
205
+
206
+ </a>
207
+ </li>
208
+
209
+
210
+
211
+
212
+ </div>
213
+ </ul>
214
+ </li>
215
+
216
+
217
+
218
+
219
+
220
+ <li class="section-title">
221
+ UI Elements
222
+ </li>
223
+
224
+
225
+
226
+
227
+
228
+ <li class="has-sub" >
229
+ <a class="sidenav-item-link" href="javascript:void(0)" data-toggle="collapse" data-target="#ui-elements"
230
+ aria-expanded="false" aria-controls="ui-elements">
231
+ <i class="mdi mdi-folder-outline"></i>
232
+ <span class="nav-text">UI Components</span> <b class="caret"></b>
233
+ </a>
234
+ <ul class="collapse" id="ui-elements"
235
+ data-parent="#sidebar-menu">
236
+ <div class="sub-menu">
237
+
238
+
239
+
240
+ <li >
241
+ <a class="sidenav-item-link" href="alert.html">
242
+ <span class="nav-text">Alert</span>
243
+
244
+ </a>
245
+ </li>
246
+
247
+
248
+
249
+
250
+
251
+
252
+ <li >
253
+ <a class="sidenav-item-link" href="badge.html">
254
+ <span class="nav-text">Badge</span>
255
+
256
+ </a>
257
+ </li>
258
+
259
+
260
+
261
+
262
+
263
+
264
+ <li >
265
+ <a class="sidenav-item-link" href="breadcrumb.html">
266
+ <span class="nav-text">Breadcrumb</span>
267
+
268
+ </a>
269
+ </li>
270
+
271
+
272
+
273
+
274
+
275
+ <li class="has-sub" >
276
+ <a class="sidenav-item-link" href="javascript:void(0)" data-toggle="collapse" data-target="#buttons"
277
+ aria-expanded="false" aria-controls="buttons">
278
+ <span class="nav-text">Buttons</span> <b class="caret"></b>
279
+ </a>
280
+ <ul class="collapse" id="buttons">
281
+ <div class="sub-menu">
282
+
283
+ <li >
284
+ <a href="button-default.html">Button Default</a>
285
+ </li>
286
+
287
+ <li >
288
+ <a href="button-dropdown.html">Button Dropdown</a>
289
+ </li>
290
+
291
+ <li >
292
+ <a href="button-group.html">Button Group</a>
293
+ </li>
294
+
295
+ <li >
296
+ <a href="button-social.html">Button Social</a>
297
+ </li>
298
+
299
+ <li >
300
+ <a href="button-loading.html">Button Loading</a>
301
+ </li>
302
+
303
+ </div>
304
+ </ul>
305
+ </li>
306
+
307
+
308
+
309
+
310
+
311
+ <li >
312
+ <a class="sidenav-item-link" href="card.html">
313
+ <span class="nav-text">Card</span>
314
+
315
+ </a>
316
+ </li>
317
+
318
+
319
+
320
+
321
+
322
+
323
+ <li >
324
+ <a class="sidenav-item-link" href="carousel.html">
325
+ <span class="nav-text">Carousel</span>
326
+
327
+ </a>
328
+ </li>
329
+
330
+
331
+
332
+
333
+
334
+
335
+ <li >
336
+ <a class="sidenav-item-link" href="collapse.html">
337
+ <span class="nav-text">Collapse</span>
338
+
339
+ </a>
340
+ </li>
341
+
342
+
343
+
344
+
345
+
346
+
347
+ <li >
348
+ <a class="sidenav-item-link" href="editor.html">
349
+ <span class="nav-text">Editor</span>
350
+
351
+ </a>
352
+ </li>
353
+
354
+
355
+
356
+
357
+
358
+
359
+ <li >
360
+ <a class="sidenav-item-link" href="list-group.html">
361
+ <span class="nav-text">List Group</span>
362
+
363
+ </a>
364
+ </li>
365
+
366
+
367
+
368
+
369
+
370
+
371
+ <li >
372
+ <a class="sidenav-item-link" href="modal.html">
373
+ <span class="nav-text">Modal</span>
374
+
375
+ </a>
376
+ </li>
377
+
378
+
379
+
380
+
381
+
382
+
383
+ <li >
384
+ <a class="sidenav-item-link" href="pagination.html">
385
+ <span class="nav-text">Pagination</span>
386
+
387
+ </a>
388
+ </li>
389
+
390
+
391
+
392
+
393
+
394
+
395
+ <li >
396
+ <a class="sidenav-item-link" href="popover-tooltip.html">
397
+ <span class="nav-text">Popover & Tooltip</span>
398
+
399
+ </a>
400
+ </li>
401
+
402
+
403
+
404
+
405
+
406
+
407
+ <li >
408
+ <a class="sidenav-item-link" href="progress-bar.html">
409
+ <span class="nav-text">Progress Bar</span>
410
+
411
+ </a>
412
+ </li>
413
+
414
+
415
+
416
+
417
+
418
+
419
+ <li >
420
+ <a class="sidenav-item-link" href="spinner.html">
421
+ <span class="nav-text">Spinner</span>
422
+
423
+ </a>
424
+ </li>
425
+
426
+
427
+
428
+
429
+
430
+
431
+ <li >
432
+ <a class="sidenav-item-link" href="switches.html">
433
+ <span class="nav-text">Switches</span>
434
+
435
+ </a>
436
+ </li>
437
+
438
+
439
+
440
+
441
+
442
+ <li class="has-sub" >
443
+ <a class="sidenav-item-link" href="javascript:void(0)" data-toggle="collapse" data-target="#tables"
444
+ aria-expanded="false" aria-controls="tables">
445
+ <span class="nav-text">Tables</span> <b class="caret"></b>
446
+ </a>
447
+ <ul class="collapse" id="tables">
448
+ <div class="sub-menu">
449
+
450
+ <li >
451
+ <a href="bootstarp-tables.html">Bootstrap Tables</a>
452
+ </li>
453
+
454
+ <li >
455
+ <a href="data-tables.html">Data Tables</a>
456
+ </li>
457
+
458
+ </div>
459
+ </ul>
460
+ </li>
461
+
462
+
463
+
464
+
465
+
466
+ <li >
467
+ <a class="sidenav-item-link" href="tab.html">
468
+ <span class="nav-text">Tab</span>
469
+
470
+ </a>
471
+ </li>
472
+
473
+
474
+
475
+
476
+
477
+
478
+ <li >
479
+ <a class="sidenav-item-link" href="toaster.html">
480
+ <span class="nav-text">Toaster</span>
481
+
482
+ </a>
483
+ </li>
484
+
485
+
486
+
487
+
488
+
489
+ <li class="has-sub" >
490
+ <a class="sidenav-item-link" href="javascript:void(0)" data-toggle="collapse" data-target="#icons"
491
+ aria-expanded="false" aria-controls="icons">
492
+ <span class="nav-text">Icons</span> <b class="caret"></b>
493
+ </a>
494
+ <ul class="collapse" id="icons">
495
+ <div class="sub-menu">
496
+
497
+ <li >
498
+ <a href="material-icons.html">Material Icon</a>
499
+ </li>
500
+
501
+ <li >
502
+ <a href="flag-icons.html">Flag Icon</a>
503
+ </li>
504
+
505
+ </div>
506
+ </ul>
507
+ </li>
508
+
509
+
510
+
511
+
512
+ <li class="has-sub" >
513
+ <a class="sidenav-item-link" href="javascript:void(0)" data-toggle="collapse" data-target="#forms"
514
+ aria-expanded="false" aria-controls="forms">
515
+ <span class="nav-text">Forms</span> <b class="caret"></b>
516
+ </a>
517
+ <ul class="collapse" id="forms">
518
+ <div class="sub-menu">
519
+
520
+ <li >
521
+ <a href="basic-input.html">Basic Input</a>
522
+ </li>
523
+
524
+ <li >
525
+ <a href="input-group.html">Input Group</a>
526
+ </li>
527
+
528
+ <li >
529
+ <a href="checkbox-radio.html">Checkbox & Radio</a>
530
+ </li>
531
+
532
+ <li >
533
+ <a href="form-validation.html">Form Validation</a>
534
+ </li>
535
+
536
+ <li >
537
+ <a href="form-advance.html">Form Advance</a>
538
+ </li>
539
+
540
+ </div>
541
+ </ul>
542
+ </li>
543
+
544
+
545
+
546
+
547
+ <li class="has-sub" >
548
+ <a class="sidenav-item-link" href="javascript:void(0)" data-toggle="collapse" data-target="#maps"
549
+ aria-expanded="false" aria-controls="maps">
550
+ <span class="nav-text">Maps</span> <b class="caret"></b>
551
+ </a>
552
+ <ul class="collapse" id="maps">
553
+ <div class="sub-menu">
554
+
555
+ <li >
556
+ <a href="google-maps.html">Google Map</a>
557
+ </li>
558
+
559
+ <li >
560
+ <a href="vector-maps.html">Vector Map</a>
561
+ </li>
562
+
563
+ </div>
564
+ </ul>
565
+ </li>
566
+
567
+
568
+
569
+
570
+ <li class="has-sub" >
571
+ <a class="sidenav-item-link" href="javascript:void(0)" data-toggle="collapse" data-target="#widgets"
572
+ aria-expanded="false" aria-controls="widgets">
573
+ <span class="nav-text">Widgets</span> <b class="caret"></b>
574
+ </a>
575
+ <ul class="collapse" id="widgets">
576
+ <div class="sub-menu">
577
+
578
+ <li >
579
+ <a href="widgets-general.html">General Widget</a>
580
+ </li>
581
+
582
+ <li >
583
+ <a href="widgets-chart.html">Chart Widget</a>
584
+ </li>
585
+
586
+ </div>
587
+ </ul>
588
+ </li>
589
+
590
+
591
+
592
+ </div>
593
+ </ul>
594
+ </li>
595
+
596
+
597
+
598
+
599
+
600
+ <li class="has-sub" >
601
+ <a class="sidenav-item-link" href="javascript:void(0)" data-toggle="collapse" data-target="#charts"
602
+ aria-expanded="false" aria-controls="charts">
603
+ <i class="mdi mdi-chart-pie"></i>
604
+ <span class="nav-text">Charts</span> <b class="caret"></b>
605
+ </a>
606
+ <ul class="collapse" id="charts"
607
+ data-parent="#sidebar-menu">
608
+ <div class="sub-menu">
609
+
610
+
611
+
612
+ <li >
613
+ <a class="sidenav-item-link" href="apex-charts.html">
614
+ <span class="nav-text">Apex Charts</span>
615
+
616
+ </a>
617
+ </li>
618
+
619
+
620
+
621
+
622
+ </div>
623
+ </ul>
624
+ </li>
625
+
626
+
627
+
628
+
629
+
630
+ <li class="section-title">
631
+ Pages
632
+ </li>
633
+
634
+
635
+
636
+
637
+
638
+ <li class="has-sub" >
639
+ <a class="sidenav-item-link" href="javascript:void(0)" data-toggle="collapse" data-target="#users"
640
+ aria-expanded="false" aria-controls="users">
641
+ <i class="mdi mdi-image-filter-none"></i>
642
+ <span class="nav-text">User</span> <b class="caret"></b>
643
+ </a>
644
+ <ul class="collapse" id="users"
645
+ data-parent="#sidebar-menu">
646
+ <div class="sub-menu">
647
+
648
+
649
+
650
+ <li >
651
+ <a class="sidenav-item-link" href="user-profile.html">
652
+ <span class="nav-text">User Profile</span>
653
+
654
+ </a>
655
+ </li>
656
+
657
+
658
+
659
+
660
+
661
+
662
+ <li >
663
+ <a class="sidenav-item-link" href="user-activities.html">
664
+ <span class="nav-text">User Activities</span>
665
+
666
+ </a>
667
+ </li>
668
+
669
+
670
+
671
+
672
+
673
+
674
+ <li >
675
+ <a class="sidenav-item-link" href="user-profile-settings.html">
676
+ <span class="nav-text">User Profile Settings</span>
677
+
678
+ </a>
679
+ </li>
680
+
681
+
682
+
683
+
684
+
685
+
686
+ <li >
687
+ <a class="sidenav-item-link" href="user-account-settings.html">
688
+ <span class="nav-text">User Account Settings</span>
689
+
690
+ </a>
691
+ </li>
692
+
693
+
694
+
695
+
696
+
697
+
698
+ <li >
699
+ <a class="sidenav-item-link" href="user-planing-settings.html">
700
+ <span class="nav-text">User Planing Settings</span>
701
+
702
+ </a>
703
+ </li>
704
+
705
+
706
+
707
+
708
+
709
+
710
+ <li >
711
+ <a class="sidenav-item-link" href="user-billing.html">
712
+ <span class="nav-text">User billing</span>
713
+
714
+ </a>
715
+ </li>
716
+
717
+
718
+
719
+
720
+
721
+
722
+ <li >
723
+ <a class="sidenav-item-link" href="user-notify-settings.html">
724
+ <span class="nav-text">User Notify Settings</span>
725
+
726
+ </a>
727
+ </li>
728
+
729
+
730
+
731
+
732
+ </div>
733
+ </ul>
734
+ </li>
735
+
736
+
737
+
738
+
739
+
740
+ <li class="has-sub" >
741
+ <a class="sidenav-item-link" href="javascript:void(0)" data-toggle="collapse" data-target="#authentication"
742
+ aria-expanded="false" aria-controls="authentication">
743
+ <i class="mdi mdi-account"></i>
744
+ <span class="nav-text">Authentication</span> <b class="caret"></b>
745
+ </a>
746
+ <ul class="collapse" id="authentication"
747
+ data-parent="#sidebar-menu">
748
+ <div class="sub-menu">
749
+
750
+
751
+
752
+ <li >
753
+ <a class="sidenav-item-link" href="sign-in.html">
754
+ <span class="nav-text">Sign In</span>
755
+
756
+ </a>
757
+ </li>
758
+
759
+
760
+
761
+
762
+
763
+
764
+ <li >
765
+ <a class="sidenav-item-link" href="sign-up.html">
766
+ <span class="nav-text">Sign Up</span>
767
+
768
+ </a>
769
+ </li>
770
+
771
+
772
+
773
+
774
+
775
+
776
+ <li >
777
+ <a class="sidenav-item-link" href="reset-password.html">
778
+ <span class="nav-text">Reset Password</span>
779
+
780
+ </a>
781
+ </li>
782
+
783
+
784
+
785
+
786
+ </div>
787
+ </ul>
788
+ </li>
789
+
790
+
791
+
792
+
793
+
794
+ <li class="has-sub" >
795
+ <a class="sidenav-item-link" href="javascript:void(0)" data-toggle="collapse" data-target="#other-page"
796
+ aria-expanded="false" aria-controls="other-page">
797
+ <i class="mdi mdi-file-multiple"></i>
798
+ <span class="nav-text">Other pages</span> <b class="caret"></b>
799
+ </a>
800
+ <ul class="collapse" id="other-page"
801
+ data-parent="#sidebar-menu">
802
+ <div class="sub-menu">
803
+
804
+
805
+
806
+ <li >
807
+ <a class="sidenav-item-link" href="invoice.html">
808
+ <span class="nav-text">Invoice</span>
809
+
810
+ </a>
811
+ </li>
812
+
813
+
814
+
815
+
816
+
817
+
818
+ <li >
819
+ <a class="sidenav-item-link" href="404.html">
820
+ <span class="nav-text">404 page</span>
821
+
822
+ </a>
823
+ </li>
824
+
825
+
826
+
827
+
828
+
829
+
830
+ <li >
831
+ <a class="sidenav-item-link" href="page-comingsoon.html">
832
+ <span class="nav-text">Coming Soon</span>
833
+
834
+ </a>
835
+ </li>
836
+
837
+
838
+
839
+
840
+
841
+
842
+ <li >
843
+ <a class="sidenav-item-link" href="page-maintenance.html">
844
+ <span class="nav-text">Maintenance</span>
845
+
846
+ </a>
847
+ </li>
848
+
849
+
850
+
851
+
852
+ </div>
853
+ </ul>
854
+ </li>
855
+
856
+
857
+
858
+
859
+
860
+ <li class="section-title">
861
+ Documentation
862
+ </li>
863
+
864
+
865
+
866
+
867
+
868
+ <li
869
+ >
870
+ <a class="sidenav-item-link" href="getting-started.html">
871
+ <i class="mdi mdi-airplane"></i>
872
+ <span class="nav-text">Getting Started</span>
873
+ </a>
874
+ </li>
875
+
876
+
877
+
878
+
879
+
880
+ <li class="has-sub" >
881
+ <a class="sidenav-item-link" href="javascript:void(0)" data-toggle="collapse" data-target="#customization"
882
+ aria-expanded="false" aria-controls="customization">
883
+ <i class="mdi mdi-square-edit-outline"></i>
884
+ <span class="nav-text">Customization</span> <b class="caret"></b>
885
+ </a>
886
+ <ul class="collapse" id="customization"
887
+ data-parent="#sidebar-menu">
888
+ <div class="sub-menu">
889
+
890
+
891
+
892
+ <li >
893
+ <a class="sidenav-item-link" href="navbar-customization.html">
894
+ <span class="nav-text">Navbar</span>
895
+
896
+ </a>
897
+ </li>
898
+
899
+
900
+
901
+
902
+
903
+
904
+ <li >
905
+ <a class="sidenav-item-link" href="sidebar-customization.html">
906
+ <span class="nav-text">Sidebar</span>
907
+
908
+ </a>
909
+ </li>
910
+
911
+
912
+
913
+
914
+
915
+
916
+ <li >
917
+ <a class="sidenav-item-link" href="styling.html">
918
+ <span class="nav-text">Styling</span>
919
+
920
+ </a>
921
+ </li>
922
+
923
+
924
+
925
+
926
+ </div>
927
+ </ul>
928
+ </li>
929
+
930
+
931
+
932
+ </ul>
933
+
934
+ </div>
935
+
936
+ <div class="sidebar-footer">
937
+ <div class="sidebar-footer-content">
938
+ <ul class="d-flex">
939
+ <li>
940
+ <a href="user-account-settings.html" data-toggle="tooltip" title="Profile settings"><i class="mdi mdi-settings"></i></a></li>
941
+ <li>
942
+ <a href="#" data-toggle="tooltip" title="No chat messages"><i class="mdi mdi-chat-processing"></i></a>
943
+ </li>
944
+ </ul>
945
+ </div>
946
+ </div>
947
+ </div>
948
+ </aside>
949
+
950
+
951
+
952
+ <!-- ====================================
953
+ ——— PAGE WRAPPER
954
+ ===================================== -->
955
+ <div class="page-wrapper">
956
+
957
+ <!-- Header -->
958
+ <header class="main-header" id="header">
959
+ <nav class="navbar navbar-expand-lg navbar-light" id="navbar">
960
+ <!-- Sidebar toggle button -->
961
+ <button id="sidebar-toggler" class="sidebar-toggle">
962
+ <span class="sr-only">Toggle navigation</span>
963
+ </button>
964
+
965
+ <span class="page-title">email compose</span>
966
+
967
+ <div class="navbar-right ">
968
+
969
+ <!-- search form -->
970
+ <div class="search-form">
971
+ <form action="index.html" method="get">
972
+ <div class="input-group input-group-sm" id="input-group-search">
973
+ <input type="text" autocomplete="off" name="query" id="search-input" class="form-control" placeholder="Search..." />
974
+ <div class="input-group-append">
975
+ <button class="btn" type="button">/</button>
976
+ </div>
977
+ </div>
978
+ </form>
979
+ <ul class="dropdown-menu dropdown-menu-search">
980
+
981
+ <li class="nav-item">
982
+ <a class="nav-link" href="index.html">Morbi leo risus</a>
983
+ </li>
984
+ <li class="nav-item">
985
+ <a class="nav-link" href="index.html">Dapibus ac facilisis in</a>
986
+ </li>
987
+ <li class="nav-item">
988
+ <a class="nav-link" href="index.html">Porta ac consectetur ac</a>
989
+ </li>
990
+ <li class="nav-item">
991
+ <a class="nav-link" href="index.html">Vestibulum at eros</a>
992
+ </li>
993
+
994
+ </ul>
995
+
996
+ </div>
997
+
998
+ <ul class="nav navbar-nav">
999
+ <!-- Offcanvas -->
1000
+ <li class="custom-dropdown">
1001
+ <a class="offcanvas-toggler active custom-dropdown-toggler" data-offcanvas="contact-off" href="javascript:" >
1002
+ <i class="mdi mdi-contacts icon"></i>
1003
+ </a>
1004
+ </li>
1005
+ <li class="custom-dropdown">
1006
+ <button class="notify-toggler custom-dropdown-toggler">
1007
+ <i class="mdi mdi-bell-outline icon"></i>
1008
+ <span class="badge badge-xs rounded-circle">21</span>
1009
+ </button>
1010
+ <div class="dropdown-notify">
1011
+
1012
+ <header>
1013
+ <div class="nav nav-underline" id="nav-tab" role="tablist">
1014
+ <a class="nav-item nav-link active" id="all-tabs" data-toggle="tab" href="#all" role="tab" aria-controls="nav-home"
1015
+ aria-selected="true">All (5)</a>
1016
+ <a class="nav-item nav-link" id="message-tab" data-toggle="tab" href="#message" role="tab" aria-controls="nav-profile"
1017
+ aria-selected="false">Msgs (4)</a>
1018
+ <a class="nav-item nav-link" id="other-tab" data-toggle="tab" href="#other" role="tab" aria-controls="nav-contact"
1019
+ aria-selected="false">Others (3)</a>
1020
+ </div>
1021
+ </header>
1022
+
1023
+ <div class="" data-simplebar style="height: 325px;">
1024
+ <div class="tab-content" id="myTabContent">
1025
+
1026
+ <div class="tab-pane fade show active" id="all" role="tabpanel" aria-labelledby="all-tabs">
1027
+
1028
+ <div class="media media-sm bg-warning-10 p-4 mb-0">
1029
+ <div class="media-sm-wrapper">
1030
+ <a href="user-profile.html">
1031
+ <img src="images/user/user-sm-02.jpg" alt="User Image">
1032
+ </a>
1033
+ </div>
1034
+ <div class="media-body">
1035
+ <a href="user-profile.html">
1036
+ <span class="title mb-0">John Doe</span>
1037
+ <span class="discribe">Extremity sweetness difficult behaviour he of. On disposal of as landlord horrible. Afraid at highly months do things on at.</span>
1038
+ <span class="time">
1039
+ <time>Just now</time>...
1040
+ </span>
1041
+ </a>
1042
+ </div>
1043
+ </div>
1044
+
1045
+ <div class="media media-sm p-4 bg-light mb-0">
1046
+ <div class="media-sm-wrapper bg-primary">
1047
+ <a href="user-profile.html">
1048
+ <i class="mdi mdi-calendar-check-outline"></i>
1049
+ </a>
1050
+ </div>
1051
+ <div class="media-body">
1052
+ <a href="user-profile.html">
1053
+ <span class="title mb-0">New event added</span>
1054
+ <span class="discribe">1/3/2014 (1pm - 2pm)</span>
1055
+ <span class="time">
1056
+ <time>10 min ago...</time>...
1057
+ </span>
1058
+ </a>
1059
+ </div>
1060
+ </div>
1061
+
1062
+ <div class="media media-sm p-4 mb-0">
1063
+ <div class="media-sm-wrapper">
1064
+ <a href="user-profile.html">
1065
+ <img src="images/user/user-sm-03.jpg" alt="User Image">
1066
+ </a>
1067
+ </div>
1068
+ <div class="media-body">
1069
+ <a href="user-profile.html">
1070
+ <span class="title mb-0">Sagge Hudson</span>
1071
+ <span class="discribe">On disposal of as landlord Afraid at highly months do things on at.</span>
1072
+ <span class="time">
1073
+ <time>1 hrs ago</time>...
1074
+ </span>
1075
+ </a>
1076
+ </div>
1077
+ </div>
1078
+
1079
+ <div class="media media-sm p-4 mb-0">
1080
+ <div class="media-sm-wrapper bg-info-dark">
1081
+ <a href="user-profile.html">
1082
+ <i class="mdi mdi-account-multiple-check"></i>
1083
+ </a>
1084
+ </div>
1085
+ <div class="media-body">
1086
+ <a href="user-profile.html">
1087
+ <span class="title mb-0">Add request</span>
1088
+ <span class="discribe">Add Dany Jones as your contact.</span>
1089
+ <div class="buttons">
1090
+ <a href="#" class="btn btn-sm btn-success shadow-none text-white">accept</a>
1091
+ <a href="#" class="btn btn-sm shadow-none">delete</a>
1092
+ </div>
1093
+ <span class="time">
1094
+ <time>6 hrs ago</time>...
1095
+ </span>
1096
+ </a>
1097
+ </div>
1098
+ </div>
1099
+
1100
+ <div class="media media-sm p-4 mb-0">
1101
+ <div class="media-sm-wrapper bg-info">
1102
+ <a href="user-profile.html">
1103
+ <i class="mdi mdi-playlist-check"></i>
1104
+ </a>
1105
+ </div>
1106
+ <div class="media-body">
1107
+ <a href="user-profile.html">
1108
+ <span class="title mb-0">Task complete</span>
1109
+ <span class="discribe">Afraid at highly months do things on at.</span>
1110
+ <span class="time">
1111
+ <time>1 hrs ago</time>...
1112
+ </span>
1113
+ </a>
1114
+ </div>
1115
+ </div>
1116
+
1117
+ </div>
1118
+
1119
+ <div class="tab-pane fade" id="message" role="tabpanel" aria-labelledby="message-tab">
1120
+
1121
+ <div class="media media-sm p-4 mb-0">
1122
+ <div class="media-sm-wrapper">
1123
+ <a href="user-profile.html">
1124
+ <img src="images/user/user-sm-01.jpg" alt="User Image">
1125
+ </a>
1126
+ </div>
1127
+ <div class="media-body">
1128
+ <a href="user-profile.html">
1129
+ <span class="title mb-0">Selena Wagner</span>
1130
+ <span class="discribe">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</span>
1131
+ <span class="time">
1132
+ <time>15 min ago</time>...
1133
+ </span>
1134
+ </a>
1135
+ </div>
1136
+ </div>
1137
+
1138
+ <div class="media media-sm p-4 mb-0">
1139
+ <div class="media-sm-wrapper">
1140
+ <a href="user-profile.html">
1141
+ <img src="images/user/user-sm-03.jpg" alt="User Image">
1142
+ </a>
1143
+ </div>
1144
+ <div class="media-body">
1145
+ <a href="user-profile.html">
1146
+ <span class="title mb-0">Sagge Hudson</span>
1147
+ <span class="discribe">On disposal of as landlord Afraid at highly months do things on at.</span>
1148
+ <span class="time">
1149
+ <time>1 hrs ago</time>...
1150
+ </span>
1151
+ </a>
1152
+ </div>
1153
+ </div>
1154
+
1155
+ <div class="media media-sm bg-warning-10 p-4 mb-0">
1156
+ <div class="media-sm-wrapper">
1157
+ <a href="user-profile.html">
1158
+ <img src="images/user/user-sm-02.jpg" alt="User Image">
1159
+ </a>
1160
+ </div>
1161
+ <div class="media-body">
1162
+ <a href="user-profile.html">
1163
+ <span class="title mb-0">John Doe</span>
1164
+ <span class="discribe">Extremity sweetness difficult behaviour he of. On disposal of as landlord horrible. Afraid
1165
+ at highly months do things on at.</span>
1166
+ <span class="time">
1167
+ <time>Just now</time>...
1168
+ </span>
1169
+ </a>
1170
+ </div>
1171
+ </div>
1172
+
1173
+ <div class="media media-sm p-4 mb-0">
1174
+ <div class="media-sm-wrapper">
1175
+ <a href="user-profile.html">
1176
+ <img src="images/user/user-sm-04.jpg" alt="User Image">
1177
+ </a>
1178
+ </div>
1179
+ <div class="media-body">
1180
+ <a href="user-profile.html">
1181
+ <span class="title mb-0">Albrecht Straub</span>
1182
+ <span class="discribe"> Beatae quia natus assumenda laboriosam, nisi perferendis aliquid consectetur expedita non tenetur.</span>
1183
+ <span class="time">
1184
+ <time>Just now</time>...
1185
+ </span>
1186
+ </a>
1187
+ </div>
1188
+ </div>
1189
+
1190
+ </div>
1191
+ <div class="tab-pane fade" id="other" role="tabpanel" aria-labelledby="contact-tab">
1192
+
1193
+ <div class="media media-sm p-4 bg-light mb-0">
1194
+ <div class="media-sm-wrapper bg-primary">
1195
+ <a href="user-profile.html">
1196
+ <i class="mdi mdi-calendar-check-outline"></i>
1197
+ </a>
1198
+ </div>
1199
+ <div class="media-body">
1200
+ <a href="user-profile.html">
1201
+ <span class="title mb-0">New event added</span>
1202
+ <span class="discribe">1/3/2014 (1pm - 2pm)</span>
1203
+ <span class="time">
1204
+ <time>10 min ago...</time>...
1205
+ </span>
1206
+ </a>
1207
+ </div>
1208
+ </div>
1209
+
1210
+ <div class="media media-sm p-4 mb-0">
1211
+ <div class="media-sm-wrapper bg-info-dark">
1212
+ <a href="user-profile.html">
1213
+ <i class="mdi mdi-account-multiple-check"></i>
1214
+ </a>
1215
+ </div>
1216
+ <div class="media-body">
1217
+ <a href="user-profile.html">
1218
+ <span class="title mb-0">Add request</span>
1219
+ <span class="discribe">Add Dany Jones as your contact.</span>
1220
+ <div class="buttons">
1221
+ <a href="#" class="btn btn-sm btn-success shadow-none text-white">accept</a>
1222
+ <a href="#" class="btn btn-sm shadow-none">delete</a>
1223
+ </div>
1224
+ <span class="time">
1225
+ <time>6 hrs ago</time>...
1226
+ </span>
1227
+ </a>
1228
+ </div>
1229
+ </div>
1230
+
1231
+ <div class="media media-sm p-4 mb-0">
1232
+ <div class="media-sm-wrapper bg-info">
1233
+ <a href="user-profile.html">
1234
+ <i class="mdi mdi-playlist-check"></i>
1235
+ </a>
1236
+ </div>
1237
+ <div class="media-body">
1238
+ <a href="user-profile.html">
1239
+ <span class="title mb-0">Task complete</span>
1240
+ <span class="discribe">Afraid at highly months do things on at.</span>
1241
+ <span class="time">
1242
+ <time>1 hrs ago</time>...
1243
+ </span>
1244
+ </a>
1245
+ </div>
1246
+ </div>
1247
+
1248
+ </div>
1249
+ </div>
1250
+ </div>
1251
+
1252
+ <footer class="border-top dropdown-notify-footer">
1253
+ <div class="d-flex justify-content-between align-items-center py-2 px-4">
1254
+ <span>Last updated 3 min ago</span>
1255
+ <a id="refress-button" href="javascript:" class="btn mdi mdi-cached btn-refress"></a>
1256
+ </div>
1257
+ </footer>
1258
+ </div>
1259
+ </li>
1260
+ <!-- User Account -->
1261
+ <li class="dropdown user-menu">
1262
+ <button class="dropdown-toggle nav-link" data-toggle="dropdown">
1263
+ <img src="images/user/user-xs-01.jpg" class="user-image rounded-circle" alt="User Image" />
1264
+ <span class="d-none d-lg-inline-block">John Doe</span>
1265
+ </button>
1266
+ <ul class="dropdown-menu dropdown-menu-right">
1267
+ <li>
1268
+ <a class="dropdown-link-item" href="user-profile.html">
1269
+ <i class="mdi mdi-account-outline"></i>
1270
+ <span class="nav-text">My Profile</span>
1271
+ </a>
1272
+ </li>
1273
+ <li>
1274
+ <a class="dropdown-link-item" href="email-inbox.html">
1275
+ <i class="mdi mdi-email-outline"></i>
1276
+ <span class="nav-text">Message</span>
1277
+ <span class="badge badge-pill badge-primary">24</span>
1278
+ </a>
1279
+ </li>
1280
+ <li>
1281
+ <a class="dropdown-link-item" href="user-activities.html">
1282
+ <i class="mdi mdi-diamond-stone"></i>
1283
+ <span class="nav-text">Activitise</span></a>
1284
+ </li>
1285
+ <li>
1286
+ <a class="dropdown-link-item" href="user-account-settings.html">
1287
+ <i class="mdi mdi-settings"></i>
1288
+ <span class="nav-text">Account Setting</span>
1289
+ </a>
1290
+ </li>
1291
+
1292
+ <li class="dropdown-footer">
1293
+ <a class="dropdown-link-item" href="sign-in.html"> <i class="mdi mdi-logout"></i> Log Out </a>
1294
+ </li>
1295
+ </ul>
1296
+ </li>
1297
+ </ul>
1298
+ </div>
1299
+ </nav>
1300
+
1301
+
1302
+ </header>
1303
+
1304
+ <!-- ====================================
1305
+ ——— CONTENT WRAPPER
1306
+ ===================================== -->
1307
+ <div class="content-wrapper">
1308
+ <div class="content"> <!-- ====================================
1309
+ ——— EMAIL WRAPPER
1310
+ ===================================== -->
1311
+ <div class="email-wrapper rounded border bg-white">
1312
+ <div class="row no-gutters justify-content-center">
1313
+ <div class="col-lg-4 col-xl-3 col-xxl-2">
1314
+ <div class="email-left-column email-options p-4 p-xl-5">
1315
+ <a href="email-compose.html" class="btn btn-block btn-primary btn-pill mb-4 mb-xl-5">Compose</a>
1316
+ <ul class="pb-2">
1317
+ <li class="d-block active mb-4">
1318
+ <a href="email-inbox.html">
1319
+ <i class="mdi mdi-download mr-2"></i> Inbox</a>
1320
+ <span class="badge badge-secondary">20</span>
1321
+ </li>
1322
+ <li class="d-block mb-4">
1323
+ <a href="#">
1324
+ <i class="mdi mdi-star-outline mr-2"></i> Favorite</a>
1325
+ <span class="badge badge-secondary">56</span>
1326
+ </li>
1327
+ <li class="d-block mb-4">
1328
+ <a href="#">
1329
+ <i class="mdi mdi-playlist-edit mr-2"></i> Drafts</a>
1330
+ </li>
1331
+ <li class="d-block mb-4">
1332
+ <a href="#">
1333
+ <i class="mdi mdi-open-in-new mr-2"></i> Sent Mail</a>
1334
+ </li>
1335
+ <li class="d-block mb-4">
1336
+ <a href="#">
1337
+ <i class="mdi mdi-trash-can-outline mr-2"></i> Trash</a>
1338
+ </li>
1339
+ </ul>
1340
+ <p class="text-dark font-weight-medium">Labels</p>
1341
+ <ul>
1342
+ <li class="mt-4">
1343
+ <a href="#">
1344
+ <i class="mdi mdi-checkbox-blank-circle-outline text-primary mr-3"></i>Work</a>
1345
+ </li>
1346
+ <li class="mt-4">
1347
+ <a href="#">
1348
+ <i class="mdi mdi-checkbox-blank-circle-outline text-warning mr-3"></i>Private</a>
1349
+ </li>
1350
+ <li class="mt-4">
1351
+ <a href="#">
1352
+ <i class="mdi mdi-checkbox-blank-circle-outline text-danger mr-3"></i>Family</a>
1353
+ </li>
1354
+ <li class="mt-4">
1355
+ <a href="#">
1356
+ <i class="mdi mdi-checkbox-blank-circle-outline text-success mr-3"></i>Friends</a>
1357
+ </li>
1358
+ </ul>
1359
+ </div>
1360
+ </div>
1361
+ <div class="col-lg-8 col-xl-9 col-xxl-10">
1362
+ <div class="email-right-column email-body p-4 p-xl-5">
1363
+ <div class="email-body-head mb-5 ">
1364
+ <h4 class="text-dark">New Message</h4>
1365
+ </div>
1366
+ <form class="email-compose">
1367
+ <div class="form-group">
1368
+ <input type="email" class="form-control" id="exampleEmail" placeholder="To: ">
1369
+ </div>
1370
+ <div class="form-group">
1371
+ <input type="text" class="form-control" id="exampleSubject" placeholder="Subject ">
1372
+ </div>
1373
+ <div id="standalone">
1374
+ <div id="toolbar">
1375
+ <span class="ql-formats">
1376
+ <select class="ql-font"></select>
1377
+ <select class="ql-size"></select>
1378
+ </span>
1379
+ <span class="ql-formats">
1380
+ <button class="ql-bold"></button>
1381
+ <button class="ql-italic"></button>
1382
+ <button class="ql-underline"></button>
1383
+ </span>
1384
+ <span class="ql-formats">
1385
+ <select class="ql-color"></select>
1386
+ </span>
1387
+ <span class="ql-formats">
1388
+ <button class="ql-blockquote"></button>
1389
+ </span>
1390
+ <span class="ql-formats">
1391
+ <button class="ql-list" value="ordered"></button>
1392
+ <button class="ql-list" value="bullet"></button>
1393
+ <button class="ql-indent" value="-1"></button>
1394
+ <button class="ql-indent" value="+1"></button>
1395
+ </span>
1396
+ <span class="ql-formats">
1397
+ <button class="ql-direction" value="rtl"></button>
1398
+ <select class="ql-align"></select>
1399
+ </span>
1400
+ </div>
1401
+ </div>
1402
+ <div id="editor"></div>
1403
+ <div class="email-attachment mt-4 mb-3">
1404
+ <i class="fa fa-paperclip fa-1x"></i>
1405
+ <span class="text-dark d-inline-block font-weight-medium pl-2">Attachment</span>
1406
+ </div>
1407
+ </form>
1408
+ <div class="border rounded mb-5">
1409
+ <form action="./" class="dropzone"></form>
1410
+ </div>
1411
+ <button class="btn btn-primary btn-pill mb-5" type="submit">Send Message</button>
1412
+ </div>
1413
+ </div>
1414
+ </div>
1415
+ </div>
1416
+ </div>
1417
+
1418
+ </div>
1419
+
1420
+ <!-- Footer -->
1421
+ <footer class="footer mt-auto">
1422
+ <div class="copyright bg-white">
1423
+ <p>
1424
+ &copy; <span id="copy-year"></span> Copyright Mono Dashboard Bootstrap Template by <a class="text-primary" href="http://www.iamabdus.com/" target="_blank" >Abdus</a>.
1425
+ </p>
1426
+ </div>
1427
+ <script>
1428
+ var d = new Date();
1429
+ var year = d.getFullYear();
1430
+ document.getElementById("copy-year").innerHTML = year;
1431
+ </script>
1432
+ </footer>
1433
+
1434
+ </div>
1435
+ </div>
1436
+
1437
+ <!-- Card Offcanvas -->
1438
+ <div class="card card-offcanvas" id="contact-off" >
1439
+ <div class="card-header">
1440
+ <h2>Contacts</h2>
1441
+ <a href="#" class="btn btn-primary btn-pill px-4">Add New</a>
1442
+ </div>
1443
+ <div class="card-body">
1444
+
1445
+ <div class="mb-4">
1446
+ <input type="text" class="form-control form-control-lg form-control-secondary rounded-0" placeholder="Search contacts...">
1447
+ </div>
1448
+
1449
+ <div class="media media-sm">
1450
+ <div class="media-sm-wrapper">
1451
+ <a href="user-profile.html">
1452
+ <img src="images/user/user-sm-01.jpg" alt="User Image">
1453
+ <span class="active bg-primary"></span>
1454
+ </a>
1455
+ </div>
1456
+ <div class="media-body">
1457
+ <a href="user-profile.html">
1458
+ <span class="title">Selena Wagner</span>
1459
+ <span class="discribe">Designer</span>
1460
+ </a>
1461
+ </div>
1462
+ </div>
1463
+
1464
+ <div class="media media-sm">
1465
+ <div class="media-sm-wrapper">
1466
+ <a href="user-profile.html">
1467
+ <img src="images/user/user-sm-02.jpg" alt="User Image">
1468
+ <span class="active bg-primary"></span>
1469
+ </a>
1470
+ </div>
1471
+ <div class="media-body">
1472
+ <a href="user-profile.html">
1473
+ <span class="title">Walter Reuter</span>
1474
+ <span>Developer</span>
1475
+ </a>
1476
+ </div>
1477
+ </div>
1478
+
1479
+ <div class="media media-sm">
1480
+ <div class="media-sm-wrapper">
1481
+ <a href="user-profile.html">
1482
+ <img src="images/user/user-sm-03.jpg" alt="User Image">
1483
+ </a>
1484
+ </div>
1485
+ <div class="media-body">
1486
+ <a href="user-profile.html">
1487
+ <span class="title">Larissa Gebhardt</span>
1488
+ <span>Cyber Punk</span>
1489
+ </a>
1490
+ </div>
1491
+ </div>
1492
+
1493
+ <div class="media media-sm">
1494
+ <div class="media-sm-wrapper">
1495
+ <a href="user-profile.html">
1496
+ <img src="images/user/user-sm-04.jpg" alt="User Image">
1497
+ </a>
1498
+
1499
+ </div>
1500
+ <div class="media-body">
1501
+ <a href="user-profile.html">
1502
+ <span class="title">Albrecht Straub</span>
1503
+ <span>Photographer</span>
1504
+ </a>
1505
+ </div>
1506
+ </div>
1507
+
1508
+ <div class="media media-sm">
1509
+ <div class="media-sm-wrapper">
1510
+ <a href="user-profile.html">
1511
+ <img src="images/user/user-sm-05.jpg" alt="User Image">
1512
+ <span class="active bg-danger"></span>
1513
+ </a>
1514
+ </div>
1515
+ <div class="media-body">
1516
+ <a href="user-profile.html">
1517
+ <span class="title">Leopold Ebert</span>
1518
+ <span>Fashion Designer</span>
1519
+ </a>
1520
+ </div>
1521
+ </div>
1522
+
1523
+ <div class="media media-sm">
1524
+ <div class="media-sm-wrapper">
1525
+ <a href="user-profile.html">
1526
+ <img src="images/user/user-sm-06.jpg" alt="User Image">
1527
+ <span class="active bg-primary"></span>
1528
+ </a>
1529
+ </div>
1530
+ <div class="media-body">
1531
+ <a href="user-profile.html">
1532
+ <span class="title">Selena Wagner</span>
1533
+ <span>Photographer</span>
1534
+ </a>
1535
+ </div>
1536
+ </div>
1537
+
1538
+ </div>
1539
+ </div>
1540
+
1541
+
1542
+
1543
+
1544
+ <script src="plugins/jquery/jquery.min.js"></script>
1545
+ <script src="plugins/bootstrap/js/bootstrap.bundle.min.js"></script>
1546
+ <script src="plugins/simplebar/simplebar.min.js"></script>
1547
+ <script src="https://unpkg.com/hotkeys-js/dist/hotkeys.min.js"></script>
1548
+
1549
+
1550
+
1551
+ <script src="https://cdn.quilljs.com/1.3.6/quill.js"></script>
1552
+
1553
+
1554
+
1555
+ <script src="plugins/dropzone/dropzone.js"></script>
1556
+
1557
+
1558
+ <script src="js/mono.js"></script>
1559
+ <script src="js/chart.js"></script>
1560
+ <script src="js/map.js"></script>
1561
+ <script src="js/custom.js"></script>
1562
+
1563
+
1564
+
1565
+
1566
+ <!-- -->
1567
+
1568
+
1569
+ </body>
1570
+ </html>
email-details.html ADDED
@@ -0,0 +1,1625 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+
3
+ <!--
4
+ // WEBSITE: https://themefisher.com
5
+ // TWITTER: https://twitter.com/themefisher
6
+ // FACEBOOK: https://www.facebook.com/themefisher
7
+ // GITHUB: https://github.com/themefisher/
8
+ -->
9
+
10
+ <html lang="en" dir="ltr">
11
+ <head>
12
+ <meta charset="utf-8" />
13
+ <meta http-equiv="X-UA-Compatible" content="IE=edge" />
14
+ <meta name="viewport" content="width=device-width, initial-scale=1" />
15
+
16
+ <title>Mono - Responsive Admin & Dashboard Template</title>
17
+
18
+ <!-- GOOGLE FONTS -->
19
+ <link href="https://fonts.googleapis.com/css?family=Karla:400,700|Roboto" rel="stylesheet">
20
+ <link href="plugins/material/css/materialdesignicons.min.css" rel="stylesheet" />
21
+ <link href="plugins/simplebar/simplebar.css" rel="stylesheet" />
22
+
23
+ <!-- PLUGINS CSS STYLE -->
24
+ <link href="plugins/nprogress/nprogress.css" rel="stylesheet" />
25
+
26
+ <!-- MONO CSS -->
27
+ <link id="main-css-href" rel="stylesheet" href="css/style.css" />
28
+
29
+
30
+
31
+
32
+ <!-- FAVICON -->
33
+ <link href="images/favicon.png" rel="shortcut icon" />
34
+
35
+ <!--
36
+ HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries
37
+ -->
38
+ <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
39
+ <!--[if lt IE 9]>
40
+ <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
41
+ <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
42
+ <![endif]-->
43
+ <script src="plugins/nprogress/nprogress.js"></script>
44
+ </head>
45
+
46
+
47
+ <body class="navbar-fixed sidebar-fixed" id="body">
48
+ <script>
49
+ NProgress.configure({ showSpinner: false });
50
+ NProgress.start();
51
+ </script>
52
+
53
+
54
+
55
+ <!-- ====================================
56
+ ——— WRAPPER
57
+ ===================================== -->
58
+ <div class="wrapper">
59
+
60
+
61
+ <!-- ====================================
62
+ ——— LEFT SIDEBAR WITH OUT FOOTER
63
+ ===================================== -->
64
+ <aside class="left-sidebar sidebar-dark" id="left-sidebar">
65
+ <div id="sidebar" class="sidebar sidebar-with-footer">
66
+ <!-- Aplication Brand -->
67
+ <div class="app-brand">
68
+ <a href="/index.html">
69
+ <img src="images/logo.png" alt="Mono">
70
+ <span class="brand-name">MONO</span>
71
+ </a>
72
+ </div>
73
+ <!-- begin sidebar scrollbar -->
74
+ <div class="sidebar-left" data-simplebar style="height: 100%;">
75
+ <!-- sidebar menu -->
76
+ <ul class="nav sidebar-inner" id="sidebar-menu">
77
+
78
+
79
+
80
+ <li
81
+ >
82
+ <a class="sidenav-item-link" href="index.html">
83
+ <i class="mdi mdi-briefcase-account-outline"></i>
84
+ <span class="nav-text">Business Dashboard</span>
85
+ </a>
86
+ </li>
87
+
88
+
89
+
90
+
91
+
92
+ <li
93
+ >
94
+ <a class="sidenav-item-link" href="analytics.html">
95
+ <i class="mdi mdi-chart-line"></i>
96
+ <span class="nav-text">Analytics Dashboard</span>
97
+ </a>
98
+ </li>
99
+
100
+
101
+
102
+
103
+
104
+ <li class="section-title">
105
+ Apps
106
+ </li>
107
+
108
+
109
+
110
+
111
+
112
+ <li
113
+ >
114
+ <a class="sidenav-item-link" href="chat.html">
115
+ <i class="mdi mdi-wechat"></i>
116
+ <span class="nav-text">Chat</span>
117
+ </a>
118
+ </li>
119
+
120
+
121
+
122
+
123
+
124
+ <li
125
+ >
126
+ <a class="sidenav-item-link" href="contacts.html">
127
+ <i class="mdi mdi-phone"></i>
128
+ <span class="nav-text">Contacts</span>
129
+ </a>
130
+ </li>
131
+
132
+
133
+
134
+
135
+
136
+ <li
137
+ >
138
+ <a class="sidenav-item-link" href="team.html">
139
+ <i class="mdi mdi-account-group"></i>
140
+ <span class="nav-text">Team</span>
141
+ </a>
142
+ </li>
143
+
144
+
145
+
146
+
147
+
148
+ <li
149
+ >
150
+ <a class="sidenav-item-link" href="calendar.html">
151
+ <i class="mdi mdi-calendar-check"></i>
152
+ <span class="nav-text">Calendar</span>
153
+ </a>
154
+ </li>
155
+
156
+
157
+
158
+
159
+
160
+ <li class="has-sub active expand" >
161
+ <a class="sidenav-item-link" href="javascript:void(0)" data-toggle="collapse" data-target="#email"
162
+ aria-expanded="false" aria-controls="email">
163
+ <i class="mdi mdi-email"></i>
164
+ <span class="nav-text">email</span> <b class="caret"></b>
165
+ </a>
166
+ <ul class="collapse show" id="email"
167
+ data-parent="#sidebar-menu">
168
+ <div class="sub-menu">
169
+
170
+
171
+
172
+ <li >
173
+ <a class="sidenav-item-link" href="email-inbox.html">
174
+ <span class="nav-text">Email Inbox</span>
175
+
176
+ </a>
177
+ </li>
178
+
179
+
180
+
181
+
182
+
183
+
184
+ <li class="active" >
185
+ <a class="sidenav-item-link" href="email-details.html">
186
+ <span class="nav-text">Email Details</span>
187
+
188
+ </a>
189
+ </li>
190
+
191
+
192
+
193
+
194
+
195
+
196
+ <li >
197
+ <a class="sidenav-item-link" href="email-compose.html">
198
+ <span class="nav-text">Email Compose</span>
199
+
200
+ </a>
201
+ </li>
202
+
203
+
204
+
205
+
206
+ </div>
207
+ </ul>
208
+ </li>
209
+
210
+
211
+
212
+
213
+
214
+ <li class="section-title">
215
+ UI Elements
216
+ </li>
217
+
218
+
219
+
220
+
221
+
222
+ <li class="has-sub" >
223
+ <a class="sidenav-item-link" href="javascript:void(0)" data-toggle="collapse" data-target="#ui-elements"
224
+ aria-expanded="false" aria-controls="ui-elements">
225
+ <i class="mdi mdi-folder-outline"></i>
226
+ <span class="nav-text">UI Components</span> <b class="caret"></b>
227
+ </a>
228
+ <ul class="collapse" id="ui-elements"
229
+ data-parent="#sidebar-menu">
230
+ <div class="sub-menu">
231
+
232
+
233
+
234
+ <li >
235
+ <a class="sidenav-item-link" href="alert.html">
236
+ <span class="nav-text">Alert</span>
237
+
238
+ </a>
239
+ </li>
240
+
241
+
242
+
243
+
244
+
245
+
246
+ <li >
247
+ <a class="sidenav-item-link" href="badge.html">
248
+ <span class="nav-text">Badge</span>
249
+
250
+ </a>
251
+ </li>
252
+
253
+
254
+
255
+
256
+
257
+
258
+ <li >
259
+ <a class="sidenav-item-link" href="breadcrumb.html">
260
+ <span class="nav-text">Breadcrumb</span>
261
+
262
+ </a>
263
+ </li>
264
+
265
+
266
+
267
+
268
+
269
+ <li class="has-sub" >
270
+ <a class="sidenav-item-link" href="javascript:void(0)" data-toggle="collapse" data-target="#buttons"
271
+ aria-expanded="false" aria-controls="buttons">
272
+ <span class="nav-text">Buttons</span> <b class="caret"></b>
273
+ </a>
274
+ <ul class="collapse" id="buttons">
275
+ <div class="sub-menu">
276
+
277
+ <li >
278
+ <a href="button-default.html">Button Default</a>
279
+ </li>
280
+
281
+ <li >
282
+ <a href="button-dropdown.html">Button Dropdown</a>
283
+ </li>
284
+
285
+ <li >
286
+ <a href="button-group.html">Button Group</a>
287
+ </li>
288
+
289
+ <li >
290
+ <a href="button-social.html">Button Social</a>
291
+ </li>
292
+
293
+ <li >
294
+ <a href="button-loading.html">Button Loading</a>
295
+ </li>
296
+
297
+ </div>
298
+ </ul>
299
+ </li>
300
+
301
+
302
+
303
+
304
+
305
+ <li >
306
+ <a class="sidenav-item-link" href="card.html">
307
+ <span class="nav-text">Card</span>
308
+
309
+ </a>
310
+ </li>
311
+
312
+
313
+
314
+
315
+
316
+
317
+ <li >
318
+ <a class="sidenav-item-link" href="carousel.html">
319
+ <span class="nav-text">Carousel</span>
320
+
321
+ </a>
322
+ </li>
323
+
324
+
325
+
326
+
327
+
328
+
329
+ <li >
330
+ <a class="sidenav-item-link" href="collapse.html">
331
+ <span class="nav-text">Collapse</span>
332
+
333
+ </a>
334
+ </li>
335
+
336
+
337
+
338
+
339
+
340
+
341
+ <li >
342
+ <a class="sidenav-item-link" href="editor.html">
343
+ <span class="nav-text">Editor</span>
344
+
345
+ </a>
346
+ </li>
347
+
348
+
349
+
350
+
351
+
352
+
353
+ <li >
354
+ <a class="sidenav-item-link" href="list-group.html">
355
+ <span class="nav-text">List Group</span>
356
+
357
+ </a>
358
+ </li>
359
+
360
+
361
+
362
+
363
+
364
+
365
+ <li >
366
+ <a class="sidenav-item-link" href="modal.html">
367
+ <span class="nav-text">Modal</span>
368
+
369
+ </a>
370
+ </li>
371
+
372
+
373
+
374
+
375
+
376
+
377
+ <li >
378
+ <a class="sidenav-item-link" href="pagination.html">
379
+ <span class="nav-text">Pagination</span>
380
+
381
+ </a>
382
+ </li>
383
+
384
+
385
+
386
+
387
+
388
+
389
+ <li >
390
+ <a class="sidenav-item-link" href="popover-tooltip.html">
391
+ <span class="nav-text">Popover & Tooltip</span>
392
+
393
+ </a>
394
+ </li>
395
+
396
+
397
+
398
+
399
+
400
+
401
+ <li >
402
+ <a class="sidenav-item-link" href="progress-bar.html">
403
+ <span class="nav-text">Progress Bar</span>
404
+
405
+ </a>
406
+ </li>
407
+
408
+
409
+
410
+
411
+
412
+
413
+ <li >
414
+ <a class="sidenav-item-link" href="spinner.html">
415
+ <span class="nav-text">Spinner</span>
416
+
417
+ </a>
418
+ </li>
419
+
420
+
421
+
422
+
423
+
424
+
425
+ <li >
426
+ <a class="sidenav-item-link" href="switches.html">
427
+ <span class="nav-text">Switches</span>
428
+
429
+ </a>
430
+ </li>
431
+
432
+
433
+
434
+
435
+
436
+ <li class="has-sub" >
437
+ <a class="sidenav-item-link" href="javascript:void(0)" data-toggle="collapse" data-target="#tables"
438
+ aria-expanded="false" aria-controls="tables">
439
+ <span class="nav-text">Tables</span> <b class="caret"></b>
440
+ </a>
441
+ <ul class="collapse" id="tables">
442
+ <div class="sub-menu">
443
+
444
+ <li >
445
+ <a href="bootstarp-tables.html">Bootstrap Tables</a>
446
+ </li>
447
+
448
+ <li >
449
+ <a href="data-tables.html">Data Tables</a>
450
+ </li>
451
+
452
+ </div>
453
+ </ul>
454
+ </li>
455
+
456
+
457
+
458
+
459
+
460
+ <li >
461
+ <a class="sidenav-item-link" href="tab.html">
462
+ <span class="nav-text">Tab</span>
463
+
464
+ </a>
465
+ </li>
466
+
467
+
468
+
469
+
470
+
471
+
472
+ <li >
473
+ <a class="sidenav-item-link" href="toaster.html">
474
+ <span class="nav-text">Toaster</span>
475
+
476
+ </a>
477
+ </li>
478
+
479
+
480
+
481
+
482
+
483
+ <li class="has-sub" >
484
+ <a class="sidenav-item-link" href="javascript:void(0)" data-toggle="collapse" data-target="#icons"
485
+ aria-expanded="false" aria-controls="icons">
486
+ <span class="nav-text">Icons</span> <b class="caret"></b>
487
+ </a>
488
+ <ul class="collapse" id="icons">
489
+ <div class="sub-menu">
490
+
491
+ <li >
492
+ <a href="material-icons.html">Material Icon</a>
493
+ </li>
494
+
495
+ <li >
496
+ <a href="flag-icons.html">Flag Icon</a>
497
+ </li>
498
+
499
+ </div>
500
+ </ul>
501
+ </li>
502
+
503
+
504
+
505
+
506
+ <li class="has-sub" >
507
+ <a class="sidenav-item-link" href="javascript:void(0)" data-toggle="collapse" data-target="#forms"
508
+ aria-expanded="false" aria-controls="forms">
509
+ <span class="nav-text">Forms</span> <b class="caret"></b>
510
+ </a>
511
+ <ul class="collapse" id="forms">
512
+ <div class="sub-menu">
513
+
514
+ <li >
515
+ <a href="basic-input.html">Basic Input</a>
516
+ </li>
517
+
518
+ <li >
519
+ <a href="input-group.html">Input Group</a>
520
+ </li>
521
+
522
+ <li >
523
+ <a href="checkbox-radio.html">Checkbox & Radio</a>
524
+ </li>
525
+
526
+ <li >
527
+ <a href="form-validation.html">Form Validation</a>
528
+ </li>
529
+
530
+ <li >
531
+ <a href="form-advance.html">Form Advance</a>
532
+ </li>
533
+
534
+ </div>
535
+ </ul>
536
+ </li>
537
+
538
+
539
+
540
+
541
+ <li class="has-sub" >
542
+ <a class="sidenav-item-link" href="javascript:void(0)" data-toggle="collapse" data-target="#maps"
543
+ aria-expanded="false" aria-controls="maps">
544
+ <span class="nav-text">Maps</span> <b class="caret"></b>
545
+ </a>
546
+ <ul class="collapse" id="maps">
547
+ <div class="sub-menu">
548
+
549
+ <li >
550
+ <a href="google-maps.html">Google Map</a>
551
+ </li>
552
+
553
+ <li >
554
+ <a href="vector-maps.html">Vector Map</a>
555
+ </li>
556
+
557
+ </div>
558
+ </ul>
559
+ </li>
560
+
561
+
562
+
563
+
564
+ <li class="has-sub" >
565
+ <a class="sidenav-item-link" href="javascript:void(0)" data-toggle="collapse" data-target="#widgets"
566
+ aria-expanded="false" aria-controls="widgets">
567
+ <span class="nav-text">Widgets</span> <b class="caret"></b>
568
+ </a>
569
+ <ul class="collapse" id="widgets">
570
+ <div class="sub-menu">
571
+
572
+ <li >
573
+ <a href="widgets-general.html">General Widget</a>
574
+ </li>
575
+
576
+ <li >
577
+ <a href="widgets-chart.html">Chart Widget</a>
578
+ </li>
579
+
580
+ </div>
581
+ </ul>
582
+ </li>
583
+
584
+
585
+
586
+ </div>
587
+ </ul>
588
+ </li>
589
+
590
+
591
+
592
+
593
+
594
+ <li class="has-sub" >
595
+ <a class="sidenav-item-link" href="javascript:void(0)" data-toggle="collapse" data-target="#charts"
596
+ aria-expanded="false" aria-controls="charts">
597
+ <i class="mdi mdi-chart-pie"></i>
598
+ <span class="nav-text">Charts</span> <b class="caret"></b>
599
+ </a>
600
+ <ul class="collapse" id="charts"
601
+ data-parent="#sidebar-menu">
602
+ <div class="sub-menu">
603
+
604
+
605
+
606
+ <li >
607
+ <a class="sidenav-item-link" href="apex-charts.html">
608
+ <span class="nav-text">Apex Charts</span>
609
+
610
+ </a>
611
+ </li>
612
+
613
+
614
+
615
+
616
+ </div>
617
+ </ul>
618
+ </li>
619
+
620
+
621
+
622
+
623
+
624
+ <li class="section-title">
625
+ Pages
626
+ </li>
627
+
628
+
629
+
630
+
631
+
632
+ <li class="has-sub" >
633
+ <a class="sidenav-item-link" href="javascript:void(0)" data-toggle="collapse" data-target="#users"
634
+ aria-expanded="false" aria-controls="users">
635
+ <i class="mdi mdi-image-filter-none"></i>
636
+ <span class="nav-text">User</span> <b class="caret"></b>
637
+ </a>
638
+ <ul class="collapse" id="users"
639
+ data-parent="#sidebar-menu">
640
+ <div class="sub-menu">
641
+
642
+
643
+
644
+ <li >
645
+ <a class="sidenav-item-link" href="user-profile.html">
646
+ <span class="nav-text">User Profile</span>
647
+
648
+ </a>
649
+ </li>
650
+
651
+
652
+
653
+
654
+
655
+
656
+ <li >
657
+ <a class="sidenav-item-link" href="user-activities.html">
658
+ <span class="nav-text">User Activities</span>
659
+
660
+ </a>
661
+ </li>
662
+
663
+
664
+
665
+
666
+
667
+
668
+ <li >
669
+ <a class="sidenav-item-link" href="user-profile-settings.html">
670
+ <span class="nav-text">User Profile Settings</span>
671
+
672
+ </a>
673
+ </li>
674
+
675
+
676
+
677
+
678
+
679
+
680
+ <li >
681
+ <a class="sidenav-item-link" href="user-account-settings.html">
682
+ <span class="nav-text">User Account Settings</span>
683
+
684
+ </a>
685
+ </li>
686
+
687
+
688
+
689
+
690
+
691
+
692
+ <li >
693
+ <a class="sidenav-item-link" href="user-planing-settings.html">
694
+ <span class="nav-text">User Planing Settings</span>
695
+
696
+ </a>
697
+ </li>
698
+
699
+
700
+
701
+
702
+
703
+
704
+ <li >
705
+ <a class="sidenav-item-link" href="user-billing.html">
706
+ <span class="nav-text">User billing</span>
707
+
708
+ </a>
709
+ </li>
710
+
711
+
712
+
713
+
714
+
715
+
716
+ <li >
717
+ <a class="sidenav-item-link" href="user-notify-settings.html">
718
+ <span class="nav-text">User Notify Settings</span>
719
+
720
+ </a>
721
+ </li>
722
+
723
+
724
+
725
+
726
+ </div>
727
+ </ul>
728
+ </li>
729
+
730
+
731
+
732
+
733
+
734
+ <li class="has-sub" >
735
+ <a class="sidenav-item-link" href="javascript:void(0)" data-toggle="collapse" data-target="#authentication"
736
+ aria-expanded="false" aria-controls="authentication">
737
+ <i class="mdi mdi-account"></i>
738
+ <span class="nav-text">Authentication</span> <b class="caret"></b>
739
+ </a>
740
+ <ul class="collapse" id="authentication"
741
+ data-parent="#sidebar-menu">
742
+ <div class="sub-menu">
743
+
744
+
745
+
746
+ <li >
747
+ <a class="sidenav-item-link" href="sign-in.html">
748
+ <span class="nav-text">Sign In</span>
749
+
750
+ </a>
751
+ </li>
752
+
753
+
754
+
755
+
756
+
757
+
758
+ <li >
759
+ <a class="sidenav-item-link" href="sign-up.html">
760
+ <span class="nav-text">Sign Up</span>
761
+
762
+ </a>
763
+ </li>
764
+
765
+
766
+
767
+
768
+
769
+
770
+ <li >
771
+ <a class="sidenav-item-link" href="reset-password.html">
772
+ <span class="nav-text">Reset Password</span>
773
+
774
+ </a>
775
+ </li>
776
+
777
+
778
+
779
+
780
+ </div>
781
+ </ul>
782
+ </li>
783
+
784
+
785
+
786
+
787
+
788
+ <li class="has-sub" >
789
+ <a class="sidenav-item-link" href="javascript:void(0)" data-toggle="collapse" data-target="#other-page"
790
+ aria-expanded="false" aria-controls="other-page">
791
+ <i class="mdi mdi-file-multiple"></i>
792
+ <span class="nav-text">Other pages</span> <b class="caret"></b>
793
+ </a>
794
+ <ul class="collapse" id="other-page"
795
+ data-parent="#sidebar-menu">
796
+ <div class="sub-menu">
797
+
798
+
799
+
800
+ <li >
801
+ <a class="sidenav-item-link" href="invoice.html">
802
+ <span class="nav-text">Invoice</span>
803
+
804
+ </a>
805
+ </li>
806
+
807
+
808
+
809
+
810
+
811
+
812
+ <li >
813
+ <a class="sidenav-item-link" href="404.html">
814
+ <span class="nav-text">404 page</span>
815
+
816
+ </a>
817
+ </li>
818
+
819
+
820
+
821
+
822
+
823
+
824
+ <li >
825
+ <a class="sidenav-item-link" href="page-comingsoon.html">
826
+ <span class="nav-text">Coming Soon</span>
827
+
828
+ </a>
829
+ </li>
830
+
831
+
832
+
833
+
834
+
835
+
836
+ <li >
837
+ <a class="sidenav-item-link" href="page-maintenance.html">
838
+ <span class="nav-text">Maintenance</span>
839
+
840
+ </a>
841
+ </li>
842
+
843
+
844
+
845
+
846
+ </div>
847
+ </ul>
848
+ </li>
849
+
850
+
851
+
852
+
853
+
854
+ <li class="section-title">
855
+ Documentation
856
+ </li>
857
+
858
+
859
+
860
+
861
+
862
+ <li
863
+ >
864
+ <a class="sidenav-item-link" href="getting-started.html">
865
+ <i class="mdi mdi-airplane"></i>
866
+ <span class="nav-text">Getting Started</span>
867
+ </a>
868
+ </li>
869
+
870
+
871
+
872
+
873
+
874
+ <li class="has-sub" >
875
+ <a class="sidenav-item-link" href="javascript:void(0)" data-toggle="collapse" data-target="#customization"
876
+ aria-expanded="false" aria-controls="customization">
877
+ <i class="mdi mdi-square-edit-outline"></i>
878
+ <span class="nav-text">Customization</span> <b class="caret"></b>
879
+ </a>
880
+ <ul class="collapse" id="customization"
881
+ data-parent="#sidebar-menu">
882
+ <div class="sub-menu">
883
+
884
+
885
+
886
+ <li >
887
+ <a class="sidenav-item-link" href="navbar-customization.html">
888
+ <span class="nav-text">Navbar</span>
889
+
890
+ </a>
891
+ </li>
892
+
893
+
894
+
895
+
896
+
897
+
898
+ <li >
899
+ <a class="sidenav-item-link" href="sidebar-customization.html">
900
+ <span class="nav-text">Sidebar</span>
901
+
902
+ </a>
903
+ </li>
904
+
905
+
906
+
907
+
908
+
909
+
910
+ <li >
911
+ <a class="sidenav-item-link" href="styling.html">
912
+ <span class="nav-text">Styling</span>
913
+
914
+ </a>
915
+ </li>
916
+
917
+
918
+
919
+
920
+ </div>
921
+ </ul>
922
+ </li>
923
+
924
+
925
+
926
+ </ul>
927
+
928
+ </div>
929
+
930
+ <div class="sidebar-footer">
931
+ <div class="sidebar-footer-content">
932
+ <ul class="d-flex">
933
+ <li>
934
+ <a href="user-account-settings.html" data-toggle="tooltip" title="Profile settings"><i class="mdi mdi-settings"></i></a></li>
935
+ <li>
936
+ <a href="#" data-toggle="tooltip" title="No chat messages"><i class="mdi mdi-chat-processing"></i></a>
937
+ </li>
938
+ </ul>
939
+ </div>
940
+ </div>
941
+ </div>
942
+ </aside>
943
+
944
+
945
+
946
+ <!-- ====================================
947
+ ——— PAGE WRAPPER
948
+ ===================================== -->
949
+ <div class="page-wrapper">
950
+
951
+ <!-- Header -->
952
+ <header class="main-header" id="header">
953
+ <nav class="navbar navbar-expand-lg navbar-light" id="navbar">
954
+ <!-- Sidebar toggle button -->
955
+ <button id="sidebar-toggler" class="sidebar-toggle">
956
+ <span class="sr-only">Toggle navigation</span>
957
+ </button>
958
+
959
+ <span class="page-title">email details</span>
960
+
961
+ <div class="navbar-right ">
962
+
963
+ <!-- search form -->
964
+ <div class="search-form">
965
+ <form action="index.html" method="get">
966
+ <div class="input-group input-group-sm" id="input-group-search">
967
+ <input type="text" autocomplete="off" name="query" id="search-input" class="form-control" placeholder="Search..." />
968
+ <div class="input-group-append">
969
+ <button class="btn" type="button">/</button>
970
+ </div>
971
+ </div>
972
+ </form>
973
+ <ul class="dropdown-menu dropdown-menu-search">
974
+
975
+ <li class="nav-item">
976
+ <a class="nav-link" href="index.html">Morbi leo risus</a>
977
+ </li>
978
+ <li class="nav-item">
979
+ <a class="nav-link" href="index.html">Dapibus ac facilisis in</a>
980
+ </li>
981
+ <li class="nav-item">
982
+ <a class="nav-link" href="index.html">Porta ac consectetur ac</a>
983
+ </li>
984
+ <li class="nav-item">
985
+ <a class="nav-link" href="index.html">Vestibulum at eros</a>
986
+ </li>
987
+
988
+ </ul>
989
+
990
+ </div>
991
+
992
+ <ul class="nav navbar-nav">
993
+ <!-- Offcanvas -->
994
+ <li class="custom-dropdown">
995
+ <a class="offcanvas-toggler active custom-dropdown-toggler" data-offcanvas="contact-off" href="javascript:" >
996
+ <i class="mdi mdi-contacts icon"></i>
997
+ </a>
998
+ </li>
999
+ <li class="custom-dropdown">
1000
+ <button class="notify-toggler custom-dropdown-toggler">
1001
+ <i class="mdi mdi-bell-outline icon"></i>
1002
+ <span class="badge badge-xs rounded-circle">21</span>
1003
+ </button>
1004
+ <div class="dropdown-notify">
1005
+
1006
+ <header>
1007
+ <div class="nav nav-underline" id="nav-tab" role="tablist">
1008
+ <a class="nav-item nav-link active" id="all-tabs" data-toggle="tab" href="#all" role="tab" aria-controls="nav-home"
1009
+ aria-selected="true">All (5)</a>
1010
+ <a class="nav-item nav-link" id="message-tab" data-toggle="tab" href="#message" role="tab" aria-controls="nav-profile"
1011
+ aria-selected="false">Msgs (4)</a>
1012
+ <a class="nav-item nav-link" id="other-tab" data-toggle="tab" href="#other" role="tab" aria-controls="nav-contact"
1013
+ aria-selected="false">Others (3)</a>
1014
+ </div>
1015
+ </header>
1016
+
1017
+ <div class="" data-simplebar style="height: 325px;">
1018
+ <div class="tab-content" id="myTabContent">
1019
+
1020
+ <div class="tab-pane fade show active" id="all" role="tabpanel" aria-labelledby="all-tabs">
1021
+
1022
+ <div class="media media-sm bg-warning-10 p-4 mb-0">
1023
+ <div class="media-sm-wrapper">
1024
+ <a href="user-profile.html">
1025
+ <img src="images/user/user-sm-02.jpg" alt="User Image">
1026
+ </a>
1027
+ </div>
1028
+ <div class="media-body">
1029
+ <a href="user-profile.html">
1030
+ <span class="title mb-0">John Doe</span>
1031
+ <span class="discribe">Extremity sweetness difficult behaviour he of. On disposal of as landlord horrible. Afraid at highly months do things on at.</span>
1032
+ <span class="time">
1033
+ <time>Just now</time>...
1034
+ </span>
1035
+ </a>
1036
+ </div>
1037
+ </div>
1038
+
1039
+ <div class="media media-sm p-4 bg-light mb-0">
1040
+ <div class="media-sm-wrapper bg-primary">
1041
+ <a href="user-profile.html">
1042
+ <i class="mdi mdi-calendar-check-outline"></i>
1043
+ </a>
1044
+ </div>
1045
+ <div class="media-body">
1046
+ <a href="user-profile.html">
1047
+ <span class="title mb-0">New event added</span>
1048
+ <span class="discribe">1/3/2014 (1pm - 2pm)</span>
1049
+ <span class="time">
1050
+ <time>10 min ago...</time>...
1051
+ </span>
1052
+ </a>
1053
+ </div>
1054
+ </div>
1055
+
1056
+ <div class="media media-sm p-4 mb-0">
1057
+ <div class="media-sm-wrapper">
1058
+ <a href="user-profile.html">
1059
+ <img src="images/user/user-sm-03.jpg" alt="User Image">
1060
+ </a>
1061
+ </div>
1062
+ <div class="media-body">
1063
+ <a href="user-profile.html">
1064
+ <span class="title mb-0">Sagge Hudson</span>
1065
+ <span class="discribe">On disposal of as landlord Afraid at highly months do things on at.</span>
1066
+ <span class="time">
1067
+ <time>1 hrs ago</time>...
1068
+ </span>
1069
+ </a>
1070
+ </div>
1071
+ </div>
1072
+
1073
+ <div class="media media-sm p-4 mb-0">
1074
+ <div class="media-sm-wrapper bg-info-dark">
1075
+ <a href="user-profile.html">
1076
+ <i class="mdi mdi-account-multiple-check"></i>
1077
+ </a>
1078
+ </div>
1079
+ <div class="media-body">
1080
+ <a href="user-profile.html">
1081
+ <span class="title mb-0">Add request</span>
1082
+ <span class="discribe">Add Dany Jones as your contact.</span>
1083
+ <div class="buttons">
1084
+ <a href="#" class="btn btn-sm btn-success shadow-none text-white">accept</a>
1085
+ <a href="#" class="btn btn-sm shadow-none">delete</a>
1086
+ </div>
1087
+ <span class="time">
1088
+ <time>6 hrs ago</time>...
1089
+ </span>
1090
+ </a>
1091
+ </div>
1092
+ </div>
1093
+
1094
+ <div class="media media-sm p-4 mb-0">
1095
+ <div class="media-sm-wrapper bg-info">
1096
+ <a href="user-profile.html">
1097
+ <i class="mdi mdi-playlist-check"></i>
1098
+ </a>
1099
+ </div>
1100
+ <div class="media-body">
1101
+ <a href="user-profile.html">
1102
+ <span class="title mb-0">Task complete</span>
1103
+ <span class="discribe">Afraid at highly months do things on at.</span>
1104
+ <span class="time">
1105
+ <time>1 hrs ago</time>...
1106
+ </span>
1107
+ </a>
1108
+ </div>
1109
+ </div>
1110
+
1111
+ </div>
1112
+
1113
+ <div class="tab-pane fade" id="message" role="tabpanel" aria-labelledby="message-tab">
1114
+
1115
+ <div class="media media-sm p-4 mb-0">
1116
+ <div class="media-sm-wrapper">
1117
+ <a href="user-profile.html">
1118
+ <img src="images/user/user-sm-01.jpg" alt="User Image">
1119
+ </a>
1120
+ </div>
1121
+ <div class="media-body">
1122
+ <a href="user-profile.html">
1123
+ <span class="title mb-0">Selena Wagner</span>
1124
+ <span class="discribe">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</span>
1125
+ <span class="time">
1126
+ <time>15 min ago</time>...
1127
+ </span>
1128
+ </a>
1129
+ </div>
1130
+ </div>
1131
+
1132
+ <div class="media media-sm p-4 mb-0">
1133
+ <div class="media-sm-wrapper">
1134
+ <a href="user-profile.html">
1135
+ <img src="images/user/user-sm-03.jpg" alt="User Image">
1136
+ </a>
1137
+ </div>
1138
+ <div class="media-body">
1139
+ <a href="user-profile.html">
1140
+ <span class="title mb-0">Sagge Hudson</span>
1141
+ <span class="discribe">On disposal of as landlord Afraid at highly months do things on at.</span>
1142
+ <span class="time">
1143
+ <time>1 hrs ago</time>...
1144
+ </span>
1145
+ </a>
1146
+ </div>
1147
+ </div>
1148
+
1149
+ <div class="media media-sm bg-warning-10 p-4 mb-0">
1150
+ <div class="media-sm-wrapper">
1151
+ <a href="user-profile.html">
1152
+ <img src="images/user/user-sm-02.jpg" alt="User Image">
1153
+ </a>
1154
+ </div>
1155
+ <div class="media-body">
1156
+ <a href="user-profile.html">
1157
+ <span class="title mb-0">John Doe</span>
1158
+ <span class="discribe">Extremity sweetness difficult behaviour he of. On disposal of as landlord horrible. Afraid
1159
+ at highly months do things on at.</span>
1160
+ <span class="time">
1161
+ <time>Just now</time>...
1162
+ </span>
1163
+ </a>
1164
+ </div>
1165
+ </div>
1166
+
1167
+ <div class="media media-sm p-4 mb-0">
1168
+ <div class="media-sm-wrapper">
1169
+ <a href="user-profile.html">
1170
+ <img src="images/user/user-sm-04.jpg" alt="User Image">
1171
+ </a>
1172
+ </div>
1173
+ <div class="media-body">
1174
+ <a href="user-profile.html">
1175
+ <span class="title mb-0">Albrecht Straub</span>
1176
+ <span class="discribe"> Beatae quia natus assumenda laboriosam, nisi perferendis aliquid consectetur expedita non tenetur.</span>
1177
+ <span class="time">
1178
+ <time>Just now</time>...
1179
+ </span>
1180
+ </a>
1181
+ </div>
1182
+ </div>
1183
+
1184
+ </div>
1185
+ <div class="tab-pane fade" id="other" role="tabpanel" aria-labelledby="contact-tab">
1186
+
1187
+ <div class="media media-sm p-4 bg-light mb-0">
1188
+ <div class="media-sm-wrapper bg-primary">
1189
+ <a href="user-profile.html">
1190
+ <i class="mdi mdi-calendar-check-outline"></i>
1191
+ </a>
1192
+ </div>
1193
+ <div class="media-body">
1194
+ <a href="user-profile.html">
1195
+ <span class="title mb-0">New event added</span>
1196
+ <span class="discribe">1/3/2014 (1pm - 2pm)</span>
1197
+ <span class="time">
1198
+ <time>10 min ago...</time>...
1199
+ </span>
1200
+ </a>
1201
+ </div>
1202
+ </div>
1203
+
1204
+ <div class="media media-sm p-4 mb-0">
1205
+ <div class="media-sm-wrapper bg-info-dark">
1206
+ <a href="user-profile.html">
1207
+ <i class="mdi mdi-account-multiple-check"></i>
1208
+ </a>
1209
+ </div>
1210
+ <div class="media-body">
1211
+ <a href="user-profile.html">
1212
+ <span class="title mb-0">Add request</span>
1213
+ <span class="discribe">Add Dany Jones as your contact.</span>
1214
+ <div class="buttons">
1215
+ <a href="#" class="btn btn-sm btn-success shadow-none text-white">accept</a>
1216
+ <a href="#" class="btn btn-sm shadow-none">delete</a>
1217
+ </div>
1218
+ <span class="time">
1219
+ <time>6 hrs ago</time>...
1220
+ </span>
1221
+ </a>
1222
+ </div>
1223
+ </div>
1224
+
1225
+ <div class="media media-sm p-4 mb-0">
1226
+ <div class="media-sm-wrapper bg-info">
1227
+ <a href="user-profile.html">
1228
+ <i class="mdi mdi-playlist-check"></i>
1229
+ </a>
1230
+ </div>
1231
+ <div class="media-body">
1232
+ <a href="user-profile.html">
1233
+ <span class="title mb-0">Task complete</span>
1234
+ <span class="discribe">Afraid at highly months do things on at.</span>
1235
+ <span class="time">
1236
+ <time>1 hrs ago</time>...
1237
+ </span>
1238
+ </a>
1239
+ </div>
1240
+ </div>
1241
+
1242
+ </div>
1243
+ </div>
1244
+ </div>
1245
+
1246
+ <footer class="border-top dropdown-notify-footer">
1247
+ <div class="d-flex justify-content-between align-items-center py-2 px-4">
1248
+ <span>Last updated 3 min ago</span>
1249
+ <a id="refress-button" href="javascript:" class="btn mdi mdi-cached btn-refress"></a>
1250
+ </div>
1251
+ </footer>
1252
+ </div>
1253
+ </li>
1254
+ <!-- User Account -->
1255
+ <li class="dropdown user-menu">
1256
+ <button class="dropdown-toggle nav-link" data-toggle="dropdown">
1257
+ <img src="images/user/user-xs-01.jpg" class="user-image rounded-circle" alt="User Image" />
1258
+ <span class="d-none d-lg-inline-block">John Doe</span>
1259
+ </button>
1260
+ <ul class="dropdown-menu dropdown-menu-right">
1261
+ <li>
1262
+ <a class="dropdown-link-item" href="user-profile.html">
1263
+ <i class="mdi mdi-account-outline"></i>
1264
+ <span class="nav-text">My Profile</span>
1265
+ </a>
1266
+ </li>
1267
+ <li>
1268
+ <a class="dropdown-link-item" href="email-inbox.html">
1269
+ <i class="mdi mdi-email-outline"></i>
1270
+ <span class="nav-text">Message</span>
1271
+ <span class="badge badge-pill badge-primary">24</span>
1272
+ </a>
1273
+ </li>
1274
+ <li>
1275
+ <a class="dropdown-link-item" href="user-activities.html">
1276
+ <i class="mdi mdi-diamond-stone"></i>
1277
+ <span class="nav-text">Activitise</span></a>
1278
+ </li>
1279
+ <li>
1280
+ <a class="dropdown-link-item" href="user-account-settings.html">
1281
+ <i class="mdi mdi-settings"></i>
1282
+ <span class="nav-text">Account Setting</span>
1283
+ </a>
1284
+ </li>
1285
+
1286
+ <li class="dropdown-footer">
1287
+ <a class="dropdown-link-item" href="sign-in.html"> <i class="mdi mdi-logout"></i> Log Out </a>
1288
+ </li>
1289
+ </ul>
1290
+ </li>
1291
+ </ul>
1292
+ </div>
1293
+ </nav>
1294
+
1295
+
1296
+ </header>
1297
+
1298
+ <!-- ====================================
1299
+ ——— CONTENT WRAPPER
1300
+ ===================================== -->
1301
+ <div class="content-wrapper">
1302
+ <div class="content"> <!-- ====================================
1303
+ ——— EMAIL WRAPPER
1304
+ ===================================== -->
1305
+ <div class="email-wrapper rounded border bg-white">
1306
+ <div class="row no-gutters justify-content-center">
1307
+ <div class="col-lg-4 col-xl-3 col-xxl-2">
1308
+ <div class="email-left-column email-options p-4 p-xl-5">
1309
+ <a href="email-compose.html" class="btn btn-block btn-primary btn-pill mb-4 mb-xl-5">Compose</a>
1310
+ <ul class="pb-2">
1311
+ <li class="d-block active mb-4">
1312
+ <a href="email-inbox.html">
1313
+ <i class="mdi mdi-download mr-2"></i> Inbox</a>
1314
+ <span class="badge badge-secondary">20</span>
1315
+ </li>
1316
+ <li class="d-block mb-4">
1317
+ <a href="#">
1318
+ <i class="mdi mdi-star-outline mr-2"></i> Favorite</a>
1319
+ <span class="badge badge-secondary">56</span>
1320
+ </li>
1321
+ <li class="d-block mb-4">
1322
+ <a href="#">
1323
+ <i class="mdi mdi-playlist-edit mr-2"></i> Drafts</a>
1324
+ </li>
1325
+ <li class="d-block mb-4">
1326
+ <a href="#">
1327
+ <i class="mdi mdi-open-in-new mr-2"></i> Sent Mail</a>
1328
+ </li>
1329
+ <li class="d-block mb-4">
1330
+ <a href="#">
1331
+ <i class="mdi mdi-trash-can-outline mr-2"></i> Trash</a>
1332
+ </li>
1333
+ </ul>
1334
+ <p class="text-dark font-weight-medium">Labels</p>
1335
+ <ul>
1336
+ <li class="mt-4">
1337
+ <a href="#">
1338
+ <i class="mdi mdi-checkbox-blank-circle-outline text-primary mr-3"></i>Work</a>
1339
+ </li>
1340
+ <li class="mt-4">
1341
+ <a href="#">
1342
+ <i class="mdi mdi-checkbox-blank-circle-outline text-warning mr-3"></i>Private</a>
1343
+ </li>
1344
+ <li class="mt-4">
1345
+ <a href="#">
1346
+ <i class="mdi mdi-checkbox-blank-circle-outline text-danger mr-3"></i>Family</a>
1347
+ </li>
1348
+ <li class="mt-4">
1349
+ <a href="#">
1350
+ <i class="mdi mdi-checkbox-blank-circle-outline text-success mr-3"></i>Friends</a>
1351
+ </li>
1352
+ </ul>
1353
+ </div>
1354
+ </div>
1355
+ <div class="col-lg-8 col-xl-9 col-xxl-10">
1356
+ <div class="email-right-column p-4 p-xl-5">
1357
+ <!-- Email Right Header -->
1358
+ <div class="email-right-header mb-5">
1359
+ <!-- head left option -->
1360
+ <div class="head-left-options">
1361
+ <button type="button" class="btn btn-icon btn-outline btn-rounded-circle">
1362
+ <i class="mdi mdi-refresh"></i>
1363
+ </button>
1364
+ <div class="dropdown">
1365
+ <button class="btn dropdown-toggle border rounded-pill" type="button" id="dropdownMenuButton"
1366
+ data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">More
1367
+ </button>
1368
+ <div class="dropdown-menu" aria-labelledby="dropdownMenuButton" x-placement="bottom-start"
1369
+ style="position: absolute; transform: translate3d(0px, 40px, 0px); top: 0px; left: 0px; will-change: transform;">
1370
+ <a class="dropdown-item" href="#">Action</a>
1371
+ <a class="dropdown-item" href="#">Another action</a>
1372
+ <a class="dropdown-item" href="#">Something else here</a>
1373
+ </div>
1374
+ </div>
1375
+ </div>
1376
+ <!-- head right option -->
1377
+ <div class="head-right-options">
1378
+ <div class="btn-group" role="group" aria-label="Basic example">
1379
+ <button type="button" class="btn border btn-pill">
1380
+ <i class="mdi mdi-chevron-left"></i>
1381
+ </button>
1382
+ <button type="button" class="btn border btn-pill">
1383
+ <i class="mdi mdi-chevron-right"></i>
1384
+ </button>
1385
+ </div>
1386
+ </div>
1387
+ </div>
1388
+ <div class="border rounded email-details">
1389
+
1390
+ <div class="email-details-header">
1391
+ <h4 class="text-dark">Introducing our new tool</h4>
1392
+ </div>
1393
+
1394
+ <div class="email-details-content">
1395
+ <div class="email-details-content-header">
1396
+
1397
+ <div class="media media-sm mb-lg-0">
1398
+ <div class="media-sm-wrapper">
1399
+ <img src="images/user/user-sm-03.jpg" alt="User Image">
1400
+ </div>
1401
+ <div class="media-body">
1402
+ <h6 class="mt-0 text-dark font-weight-bold">Larissa Gebhardt</h6>
1403
+ <span>
1404
+ From:
1405
+ <i class="mdi mdi-chevron-left"></i>@selena.oi
1406
+ <i class="mdi mdi-chevron-right"></i>to me
1407
+ </span>
1408
+ </div>
1409
+ </div>
1410
+
1411
+ <div class="email-details-content-header-right">
1412
+ <time class="p-1 p-xl-2">Mar 18</time>
1413
+
1414
+ <a class="text-color p-1 p-xl-2" href="#">
1415
+ <i class="mdi mdi-star-outline"></i>
1416
+ </a>
1417
+
1418
+ <a class="text-color p-1 p-xl-2" href="#">
1419
+ <i class="mdi mdi-attachment"></i>
1420
+ </a>
1421
+
1422
+ <div class="btn-group p-1 p-xl-2" role="group" aria-label="Basic example">
1423
+ <button type="button" class="btn btn-pill mdi mdi-reply"></button>
1424
+ <button type="button" class="btn btn-pill mdi mdi-printer"></button>
1425
+ <button type="button" class="btn btn-pill mdi mdi-trash-can-outline"></button>
1426
+ </div>
1427
+
1428
+ <div class="dropdown">
1429
+
1430
+ <a class="btn dropdown-toggle icon-burger-mini" href="#" role="button" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
1431
+ </a>
1432
+
1433
+ <div class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownMenuLink">
1434
+ <a class="dropdown-item" href="#">Action</a>
1435
+ <a class="dropdown-item" href="#">Another action</a>
1436
+ <a class="dropdown-item" href="#">Something else here</a>
1437
+ </div>
1438
+ </div>
1439
+
1440
+
1441
+ </div>
1442
+ </div>
1443
+ <p class="pb-4">Hi Selena</p>
1444
+ <p>
1445
+ Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
1446
+ </p>
1447
+ <br>
1448
+ <p>
1449
+ Perspiciatis unde omnis iste natus error sit voluptatem accusantium oloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto.
1450
+ </p>
1451
+ <p class="pt-4">
1452
+ <i class="fa fa-paperclip ml-2"></i>
1453
+ <span class="text-dark">4 Attachments</span>
1454
+ </p>
1455
+ <div class="email-img d-inline-block rounded overflow-hidden mt-3 mt-lg-4 mr-2 mr-md-3 mr-lg-4">
1456
+ <img src="images/products/pa1.jpg" alt="Product">
1457
+ </div>
1458
+ <div class="email-img d-inline-block rounded overflow-hidden mt-3 mt-lg-4 mr-2 mr-md-3 mr-lg-4">
1459
+ <img src="images/products/pa2.jpg" alt="Product">
1460
+ </div>
1461
+ <div class="email-img d-inline-block rounded overflow-hidden mt-3 mt-lg-4 mr-2 mr-md-3 mr-lg-4">
1462
+ <img src="images/products/pa3.jpg" alt="Product">
1463
+ </div>
1464
+ <div class="email-img d-inline-block rounded overflow-hidden mt-3 mt-lg-4 mr-2 mr-md-3 mr-lg-4">
1465
+ <img src="images/products/pa4.jpg" alt="Product">
1466
+ </div>
1467
+
1468
+ <div class="email-content-footer mt-5 pb-5 px-4 pt-4 border rounded">
1469
+ <p>Click here to
1470
+ <a class="text-blue btn btn-primary btn-pill ml-2" href="#">Reply</a>
1471
+ </p>
1472
+ </div>
1473
+ </div>
1474
+ </div>
1475
+ </div>
1476
+ </div>
1477
+ </div>
1478
+ </div>
1479
+ </div>
1480
+
1481
+ </div>
1482
+
1483
+ <!-- Footer -->
1484
+ <footer class="footer mt-auto">
1485
+ <div class="copyright bg-white">
1486
+ <p>
1487
+ &copy; <span id="copy-year"></span> Copyright Mono Dashboard Bootstrap Template by <a class="text-primary" href="http://www.iamabdus.com/" target="_blank" >Abdus</a>.
1488
+ </p>
1489
+ </div>
1490
+ <script>
1491
+ var d = new Date();
1492
+ var year = d.getFullYear();
1493
+ document.getElementById("copy-year").innerHTML = year;
1494
+ </script>
1495
+ </footer>
1496
+
1497
+ </div>
1498
+ </div>
1499
+
1500
+ <!-- Card Offcanvas -->
1501
+ <div class="card card-offcanvas" id="contact-off" >
1502
+ <div class="card-header">
1503
+ <h2>Contacts</h2>
1504
+ <a href="#" class="btn btn-primary btn-pill px-4">Add New</a>
1505
+ </div>
1506
+ <div class="card-body">
1507
+
1508
+ <div class="mb-4">
1509
+ <input type="text" class="form-control form-control-lg form-control-secondary rounded-0" placeholder="Search contacts...">
1510
+ </div>
1511
+
1512
+ <div class="media media-sm">
1513
+ <div class="media-sm-wrapper">
1514
+ <a href="user-profile.html">
1515
+ <img src="images/user/user-sm-01.jpg" alt="User Image">
1516
+ <span class="active bg-primary"></span>
1517
+ </a>
1518
+ </div>
1519
+ <div class="media-body">
1520
+ <a href="user-profile.html">
1521
+ <span class="title">Selena Wagner</span>
1522
+ <span class="discribe">Designer</span>
1523
+ </a>
1524
+ </div>
1525
+ </div>
1526
+
1527
+ <div class="media media-sm">
1528
+ <div class="media-sm-wrapper">
1529
+ <a href="user-profile.html">
1530
+ <img src="images/user/user-sm-02.jpg" alt="User Image">
1531
+ <span class="active bg-primary"></span>
1532
+ </a>
1533
+ </div>
1534
+ <div class="media-body">
1535
+ <a href="user-profile.html">
1536
+ <span class="title">Walter Reuter</span>
1537
+ <span>Developer</span>
1538
+ </a>
1539
+ </div>
1540
+ </div>
1541
+
1542
+ <div class="media media-sm">
1543
+ <div class="media-sm-wrapper">
1544
+ <a href="user-profile.html">
1545
+ <img src="images/user/user-sm-03.jpg" alt="User Image">
1546
+ </a>
1547
+ </div>
1548
+ <div class="media-body">
1549
+ <a href="user-profile.html">
1550
+ <span class="title">Larissa Gebhardt</span>
1551
+ <span>Cyber Punk</span>
1552
+ </a>
1553
+ </div>
1554
+ </div>
1555
+
1556
+ <div class="media media-sm">
1557
+ <div class="media-sm-wrapper">
1558
+ <a href="user-profile.html">
1559
+ <img src="images/user/user-sm-04.jpg" alt="User Image">
1560
+ </a>
1561
+
1562
+ </div>
1563
+ <div class="media-body">
1564
+ <a href="user-profile.html">
1565
+ <span class="title">Albrecht Straub</span>
1566
+ <span>Photographer</span>
1567
+ </a>
1568
+ </div>
1569
+ </div>
1570
+
1571
+ <div class="media media-sm">
1572
+ <div class="media-sm-wrapper">
1573
+ <a href="user-profile.html">
1574
+ <img src="images/user/user-sm-05.jpg" alt="User Image">
1575
+ <span class="active bg-danger"></span>
1576
+ </a>
1577
+ </div>
1578
+ <div class="media-body">
1579
+ <a href="user-profile.html">
1580
+ <span class="title">Leopold Ebert</span>
1581
+ <span>Fashion Designer</span>
1582
+ </a>
1583
+ </div>
1584
+ </div>
1585
+
1586
+ <div class="media media-sm">
1587
+ <div class="media-sm-wrapper">
1588
+ <a href="user-profile.html">
1589
+ <img src="images/user/user-sm-06.jpg" alt="User Image">
1590
+ <span class="active bg-primary"></span>
1591
+ </a>
1592
+ </div>
1593
+ <div class="media-body">
1594
+ <a href="user-profile.html">
1595
+ <span class="title">Selena Wagner</span>
1596
+ <span>Photographer</span>
1597
+ </a>
1598
+ </div>
1599
+ </div>
1600
+
1601
+ </div>
1602
+ </div>
1603
+
1604
+
1605
+
1606
+
1607
+ <script src="plugins/jquery/jquery.min.js"></script>
1608
+ <script src="plugins/bootstrap/js/bootstrap.bundle.min.js"></script>
1609
+ <script src="plugins/simplebar/simplebar.min.js"></script>
1610
+ <script src="https://unpkg.com/hotkeys-js/dist/hotkeys.min.js"></script>
1611
+
1612
+
1613
+ <script src="js/mono.js"></script>
1614
+ <script src="js/chart.js"></script>
1615
+ <script src="js/map.js"></script>
1616
+ <script src="js/custom.js"></script>
1617
+
1618
+
1619
+
1620
+
1621
+ <!-- -->
1622
+
1623
+
1624
+ </body>
1625
+ </html>
email-inbox.html ADDED
@@ -0,0 +1,1975 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+
3
+ <!--
4
+ // WEBSITE: https://themefisher.com
5
+ // TWITTER: https://twitter.com/themefisher
6
+ // FACEBOOK: https://www.facebook.com/themefisher
7
+ // GITHUB: https://github.com/themefisher/
8
+ -->
9
+
10
+ <html lang="en" dir="ltr">
11
+ <head>
12
+ <meta charset="utf-8" />
13
+ <meta http-equiv="X-UA-Compatible" content="IE=edge" />
14
+ <meta name="viewport" content="width=device-width, initial-scale=1" />
15
+
16
+ <title>Mono - Responsive Admin & Dashboard Template</title>
17
+
18
+ <!-- GOOGLE FONTS -->
19
+ <link href="https://fonts.googleapis.com/css?family=Karla:400,700|Roboto" rel="stylesheet">
20
+ <link href="plugins/material/css/materialdesignicons.min.css" rel="stylesheet" />
21
+ <link href="plugins/simplebar/simplebar.css" rel="stylesheet" />
22
+
23
+ <!-- PLUGINS CSS STYLE -->
24
+ <link href="plugins/nprogress/nprogress.css" rel="stylesheet" />
25
+
26
+ <!-- MONO CSS -->
27
+ <link id="main-css-href" rel="stylesheet" href="css/style.css" />
28
+
29
+
30
+
31
+
32
+ <!-- FAVICON -->
33
+ <link href="images/favicon.png" rel="shortcut icon" />
34
+
35
+ <!--
36
+ HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries
37
+ -->
38
+ <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
39
+ <!--[if lt IE 9]>
40
+ <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
41
+ <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
42
+ <![endif]-->
43
+ <script src="plugins/nprogress/nprogress.js"></script>
44
+ </head>
45
+
46
+
47
+ <body class="navbar-fixed sidebar-fixed" id="body">
48
+ <script>
49
+ NProgress.configure({ showSpinner: false });
50
+ NProgress.start();
51
+ </script>
52
+
53
+
54
+
55
+ <!-- ====================================
56
+ ——— WRAPPER
57
+ ===================================== -->
58
+ <div class="wrapper">
59
+
60
+
61
+ <!-- ====================================
62
+ ——— LEFT SIDEBAR WITH OUT FOOTER
63
+ ===================================== -->
64
+ <aside class="left-sidebar sidebar-dark" id="left-sidebar">
65
+ <div id="sidebar" class="sidebar sidebar-with-footer">
66
+ <!-- Aplication Brand -->
67
+ <div class="app-brand">
68
+ <a href="/index.html">
69
+ <img src="images/logo.png" alt="Mono">
70
+ <span class="brand-name">MONO</span>
71
+ </a>
72
+ </div>
73
+ <!-- begin sidebar scrollbar -->
74
+ <div class="sidebar-left" data-simplebar style="height: 100%;">
75
+ <!-- sidebar menu -->
76
+ <ul class="nav sidebar-inner" id="sidebar-menu">
77
+
78
+
79
+
80
+ <li
81
+ >
82
+ <a class="sidenav-item-link" href="index.html">
83
+ <i class="mdi mdi-briefcase-account-outline"></i>
84
+ <span class="nav-text">Business Dashboard</span>
85
+ </a>
86
+ </li>
87
+
88
+
89
+
90
+
91
+
92
+ <li
93
+ >
94
+ <a class="sidenav-item-link" href="analytics.html">
95
+ <i class="mdi mdi-chart-line"></i>
96
+ <span class="nav-text">Analytics Dashboard</span>
97
+ </a>
98
+ </li>
99
+
100
+
101
+
102
+
103
+
104
+ <li class="section-title">
105
+ Apps
106
+ </li>
107
+
108
+
109
+
110
+
111
+
112
+ <li
113
+ >
114
+ <a class="sidenav-item-link" href="chat.html">
115
+ <i class="mdi mdi-wechat"></i>
116
+ <span class="nav-text">Chat</span>
117
+ </a>
118
+ </li>
119
+
120
+
121
+
122
+
123
+
124
+ <li
125
+ >
126
+ <a class="sidenav-item-link" href="contacts.html">
127
+ <i class="mdi mdi-phone"></i>
128
+ <span class="nav-text">Contacts</span>
129
+ </a>
130
+ </li>
131
+
132
+
133
+
134
+
135
+
136
+ <li
137
+ >
138
+ <a class="sidenav-item-link" href="team.html">
139
+ <i class="mdi mdi-account-group"></i>
140
+ <span class="nav-text">Team</span>
141
+ </a>
142
+ </li>
143
+
144
+
145
+
146
+
147
+
148
+ <li
149
+ >
150
+ <a class="sidenav-item-link" href="calendar.html">
151
+ <i class="mdi mdi-calendar-check"></i>
152
+ <span class="nav-text">Calendar</span>
153
+ </a>
154
+ </li>
155
+
156
+
157
+
158
+
159
+
160
+ <li class="has-sub active expand" >
161
+ <a class="sidenav-item-link" href="javascript:void(0)" data-toggle="collapse" data-target="#email"
162
+ aria-expanded="false" aria-controls="email">
163
+ <i class="mdi mdi-email"></i>
164
+ <span class="nav-text">email</span> <b class="caret"></b>
165
+ </a>
166
+ <ul class="collapse show" id="email"
167
+ data-parent="#sidebar-menu">
168
+ <div class="sub-menu">
169
+
170
+
171
+
172
+ <li class="active" >
173
+ <a class="sidenav-item-link" href="email-inbox.html">
174
+ <span class="nav-text">Email Inbox</span>
175
+
176
+ </a>
177
+ </li>
178
+
179
+
180
+
181
+
182
+
183
+
184
+ <li >
185
+ <a class="sidenav-item-link" href="email-details.html">
186
+ <span class="nav-text">Email Details</span>
187
+
188
+ </a>
189
+ </li>
190
+
191
+
192
+
193
+
194
+
195
+
196
+ <li >
197
+ <a class="sidenav-item-link" href="email-compose.html">
198
+ <span class="nav-text">Email Compose</span>
199
+
200
+ </a>
201
+ </li>
202
+
203
+
204
+
205
+
206
+ </div>
207
+ </ul>
208
+ </li>
209
+
210
+
211
+
212
+
213
+
214
+ <li class="section-title">
215
+ UI Elements
216
+ </li>
217
+
218
+
219
+
220
+
221
+
222
+ <li class="has-sub" >
223
+ <a class="sidenav-item-link" href="javascript:void(0)" data-toggle="collapse" data-target="#ui-elements"
224
+ aria-expanded="false" aria-controls="ui-elements">
225
+ <i class="mdi mdi-folder-outline"></i>
226
+ <span class="nav-text">UI Components</span> <b class="caret"></b>
227
+ </a>
228
+ <ul class="collapse" id="ui-elements"
229
+ data-parent="#sidebar-menu">
230
+ <div class="sub-menu">
231
+
232
+
233
+
234
+ <li >
235
+ <a class="sidenav-item-link" href="alert.html">
236
+ <span class="nav-text">Alert</span>
237
+
238
+ </a>
239
+ </li>
240
+
241
+
242
+
243
+
244
+
245
+
246
+ <li >
247
+ <a class="sidenav-item-link" href="badge.html">
248
+ <span class="nav-text">Badge</span>
249
+
250
+ </a>
251
+ </li>
252
+
253
+
254
+
255
+
256
+
257
+
258
+ <li >
259
+ <a class="sidenav-item-link" href="breadcrumb.html">
260
+ <span class="nav-text">Breadcrumb</span>
261
+
262
+ </a>
263
+ </li>
264
+
265
+
266
+
267
+
268
+
269
+ <li class="has-sub" >
270
+ <a class="sidenav-item-link" href="javascript:void(0)" data-toggle="collapse" data-target="#buttons"
271
+ aria-expanded="false" aria-controls="buttons">
272
+ <span class="nav-text">Buttons</span> <b class="caret"></b>
273
+ </a>
274
+ <ul class="collapse" id="buttons">
275
+ <div class="sub-menu">
276
+
277
+ <li >
278
+ <a href="button-default.html">Button Default</a>
279
+ </li>
280
+
281
+ <li >
282
+ <a href="button-dropdown.html">Button Dropdown</a>
283
+ </li>
284
+
285
+ <li >
286
+ <a href="button-group.html">Button Group</a>
287
+ </li>
288
+
289
+ <li >
290
+ <a href="button-social.html">Button Social</a>
291
+ </li>
292
+
293
+ <li >
294
+ <a href="button-loading.html">Button Loading</a>
295
+ </li>
296
+
297
+ </div>
298
+ </ul>
299
+ </li>
300
+
301
+
302
+
303
+
304
+
305
+ <li >
306
+ <a class="sidenav-item-link" href="card.html">
307
+ <span class="nav-text">Card</span>
308
+
309
+ </a>
310
+ </li>
311
+
312
+
313
+
314
+
315
+
316
+
317
+ <li >
318
+ <a class="sidenav-item-link" href="carousel.html">
319
+ <span class="nav-text">Carousel</span>
320
+
321
+ </a>
322
+ </li>
323
+
324
+
325
+
326
+
327
+
328
+
329
+ <li >
330
+ <a class="sidenav-item-link" href="collapse.html">
331
+ <span class="nav-text">Collapse</span>
332
+
333
+ </a>
334
+ </li>
335
+
336
+
337
+
338
+
339
+
340
+
341
+ <li >
342
+ <a class="sidenav-item-link" href="editor.html">
343
+ <span class="nav-text">Editor</span>
344
+
345
+ </a>
346
+ </li>
347
+
348
+
349
+
350
+
351
+
352
+
353
+ <li >
354
+ <a class="sidenav-item-link" href="list-group.html">
355
+ <span class="nav-text">List Group</span>
356
+
357
+ </a>
358
+ </li>
359
+
360
+
361
+
362
+
363
+
364
+
365
+ <li >
366
+ <a class="sidenav-item-link" href="modal.html">
367
+ <span class="nav-text">Modal</span>
368
+
369
+ </a>
370
+ </li>
371
+
372
+
373
+
374
+
375
+
376
+
377
+ <li >
378
+ <a class="sidenav-item-link" href="pagination.html">
379
+ <span class="nav-text">Pagination</span>
380
+
381
+ </a>
382
+ </li>
383
+
384
+
385
+
386
+
387
+
388
+
389
+ <li >
390
+ <a class="sidenav-item-link" href="popover-tooltip.html">
391
+ <span class="nav-text">Popover & Tooltip</span>
392
+
393
+ </a>
394
+ </li>
395
+
396
+
397
+
398
+
399
+
400
+
401
+ <li >
402
+ <a class="sidenav-item-link" href="progress-bar.html">
403
+ <span class="nav-text">Progress Bar</span>
404
+
405
+ </a>
406
+ </li>
407
+
408
+
409
+
410
+
411
+
412
+
413
+ <li >
414
+ <a class="sidenav-item-link" href="spinner.html">
415
+ <span class="nav-text">Spinner</span>
416
+
417
+ </a>
418
+ </li>
419
+
420
+
421
+
422
+
423
+
424
+
425
+ <li >
426
+ <a class="sidenav-item-link" href="switches.html">
427
+ <span class="nav-text">Switches</span>
428
+
429
+ </a>
430
+ </li>
431
+
432
+
433
+
434
+
435
+
436
+ <li class="has-sub" >
437
+ <a class="sidenav-item-link" href="javascript:void(0)" data-toggle="collapse" data-target="#tables"
438
+ aria-expanded="false" aria-controls="tables">
439
+ <span class="nav-text">Tables</span> <b class="caret"></b>
440
+ </a>
441
+ <ul class="collapse" id="tables">
442
+ <div class="sub-menu">
443
+
444
+ <li >
445
+ <a href="bootstarp-tables.html">Bootstrap Tables</a>
446
+ </li>
447
+
448
+ <li >
449
+ <a href="data-tables.html">Data Tables</a>
450
+ </li>
451
+
452
+ </div>
453
+ </ul>
454
+ </li>
455
+
456
+
457
+
458
+
459
+
460
+ <li >
461
+ <a class="sidenav-item-link" href="tab.html">
462
+ <span class="nav-text">Tab</span>
463
+
464
+ </a>
465
+ </li>
466
+
467
+
468
+
469
+
470
+
471
+
472
+ <li >
473
+ <a class="sidenav-item-link" href="toaster.html">
474
+ <span class="nav-text">Toaster</span>
475
+
476
+ </a>
477
+ </li>
478
+
479
+
480
+
481
+
482
+
483
+ <li class="has-sub" >
484
+ <a class="sidenav-item-link" href="javascript:void(0)" data-toggle="collapse" data-target="#icons"
485
+ aria-expanded="false" aria-controls="icons">
486
+ <span class="nav-text">Icons</span> <b class="caret"></b>
487
+ </a>
488
+ <ul class="collapse" id="icons">
489
+ <div class="sub-menu">
490
+
491
+ <li >
492
+ <a href="material-icons.html">Material Icon</a>
493
+ </li>
494
+
495
+ <li >
496
+ <a href="flag-icons.html">Flag Icon</a>
497
+ </li>
498
+
499
+ </div>
500
+ </ul>
501
+ </li>
502
+
503
+
504
+
505
+
506
+ <li class="has-sub" >
507
+ <a class="sidenav-item-link" href="javascript:void(0)" data-toggle="collapse" data-target="#forms"
508
+ aria-expanded="false" aria-controls="forms">
509
+ <span class="nav-text">Forms</span> <b class="caret"></b>
510
+ </a>
511
+ <ul class="collapse" id="forms">
512
+ <div class="sub-menu">
513
+
514
+ <li >
515
+ <a href="basic-input.html">Basic Input</a>
516
+ </li>
517
+
518
+ <li >
519
+ <a href="input-group.html">Input Group</a>
520
+ </li>
521
+
522
+ <li >
523
+ <a href="checkbox-radio.html">Checkbox & Radio</a>
524
+ </li>
525
+
526
+ <li >
527
+ <a href="form-validation.html">Form Validation</a>
528
+ </li>
529
+
530
+ <li >
531
+ <a href="form-advance.html">Form Advance</a>
532
+ </li>
533
+
534
+ </div>
535
+ </ul>
536
+ </li>
537
+
538
+
539
+
540
+
541
+ <li class="has-sub" >
542
+ <a class="sidenav-item-link" href="javascript:void(0)" data-toggle="collapse" data-target="#maps"
543
+ aria-expanded="false" aria-controls="maps">
544
+ <span class="nav-text">Maps</span> <b class="caret"></b>
545
+ </a>
546
+ <ul class="collapse" id="maps">
547
+ <div class="sub-menu">
548
+
549
+ <li >
550
+ <a href="google-maps.html">Google Map</a>
551
+ </li>
552
+
553
+ <li >
554
+ <a href="vector-maps.html">Vector Map</a>
555
+ </li>
556
+
557
+ </div>
558
+ </ul>
559
+ </li>
560
+
561
+
562
+
563
+
564
+ <li class="has-sub" >
565
+ <a class="sidenav-item-link" href="javascript:void(0)" data-toggle="collapse" data-target="#widgets"
566
+ aria-expanded="false" aria-controls="widgets">
567
+ <span class="nav-text">Widgets</span> <b class="caret"></b>
568
+ </a>
569
+ <ul class="collapse" id="widgets">
570
+ <div class="sub-menu">
571
+
572
+ <li >
573
+ <a href="widgets-general.html">General Widget</a>
574
+ </li>
575
+
576
+ <li >
577
+ <a href="widgets-chart.html">Chart Widget</a>
578
+ </li>
579
+
580
+ </div>
581
+ </ul>
582
+ </li>
583
+
584
+
585
+
586
+ </div>
587
+ </ul>
588
+ </li>
589
+
590
+
591
+
592
+
593
+
594
+ <li class="has-sub" >
595
+ <a class="sidenav-item-link" href="javascript:void(0)" data-toggle="collapse" data-target="#charts"
596
+ aria-expanded="false" aria-controls="charts">
597
+ <i class="mdi mdi-chart-pie"></i>
598
+ <span class="nav-text">Charts</span> <b class="caret"></b>
599
+ </a>
600
+ <ul class="collapse" id="charts"
601
+ data-parent="#sidebar-menu">
602
+ <div class="sub-menu">
603
+
604
+
605
+
606
+ <li >
607
+ <a class="sidenav-item-link" href="apex-charts.html">
608
+ <span class="nav-text">Apex Charts</span>
609
+
610
+ </a>
611
+ </li>
612
+
613
+
614
+
615
+
616
+ </div>
617
+ </ul>
618
+ </li>
619
+
620
+
621
+
622
+
623
+
624
+ <li class="section-title">
625
+ Pages
626
+ </li>
627
+
628
+
629
+
630
+
631
+
632
+ <li class="has-sub" >
633
+ <a class="sidenav-item-link" href="javascript:void(0)" data-toggle="collapse" data-target="#users"
634
+ aria-expanded="false" aria-controls="users">
635
+ <i class="mdi mdi-image-filter-none"></i>
636
+ <span class="nav-text">User</span> <b class="caret"></b>
637
+ </a>
638
+ <ul class="collapse" id="users"
639
+ data-parent="#sidebar-menu">
640
+ <div class="sub-menu">
641
+
642
+
643
+
644
+ <li >
645
+ <a class="sidenav-item-link" href="user-profile.html">
646
+ <span class="nav-text">User Profile</span>
647
+
648
+ </a>
649
+ </li>
650
+
651
+
652
+
653
+
654
+
655
+
656
+ <li >
657
+ <a class="sidenav-item-link" href="user-activities.html">
658
+ <span class="nav-text">User Activities</span>
659
+
660
+ </a>
661
+ </li>
662
+
663
+
664
+
665
+
666
+
667
+
668
+ <li >
669
+ <a class="sidenav-item-link" href="user-profile-settings.html">
670
+ <span class="nav-text">User Profile Settings</span>
671
+
672
+ </a>
673
+ </li>
674
+
675
+
676
+
677
+
678
+
679
+
680
+ <li >
681
+ <a class="sidenav-item-link" href="user-account-settings.html">
682
+ <span class="nav-text">User Account Settings</span>
683
+
684
+ </a>
685
+ </li>
686
+
687
+
688
+
689
+
690
+
691
+
692
+ <li >
693
+ <a class="sidenav-item-link" href="user-planing-settings.html">
694
+ <span class="nav-text">User Planing Settings</span>
695
+
696
+ </a>
697
+ </li>
698
+
699
+
700
+
701
+
702
+
703
+
704
+ <li >
705
+ <a class="sidenav-item-link" href="user-billing.html">
706
+ <span class="nav-text">User billing</span>
707
+
708
+ </a>
709
+ </li>
710
+
711
+
712
+
713
+
714
+
715
+
716
+ <li >
717
+ <a class="sidenav-item-link" href="user-notify-settings.html">
718
+ <span class="nav-text">User Notify Settings</span>
719
+
720
+ </a>
721
+ </li>
722
+
723
+
724
+
725
+
726
+ </div>
727
+ </ul>
728
+ </li>
729
+
730
+
731
+
732
+
733
+
734
+ <li class="has-sub" >
735
+ <a class="sidenav-item-link" href="javascript:void(0)" data-toggle="collapse" data-target="#authentication"
736
+ aria-expanded="false" aria-controls="authentication">
737
+ <i class="mdi mdi-account"></i>
738
+ <span class="nav-text">Authentication</span> <b class="caret"></b>
739
+ </a>
740
+ <ul class="collapse" id="authentication"
741
+ data-parent="#sidebar-menu">
742
+ <div class="sub-menu">
743
+
744
+
745
+
746
+ <li >
747
+ <a class="sidenav-item-link" href="sign-in.html">
748
+ <span class="nav-text">Sign In</span>
749
+
750
+ </a>
751
+ </li>
752
+
753
+
754
+
755
+
756
+
757
+
758
+ <li >
759
+ <a class="sidenav-item-link" href="sign-up.html">
760
+ <span class="nav-text">Sign Up</span>
761
+
762
+ </a>
763
+ </li>
764
+
765
+
766
+
767
+
768
+
769
+
770
+ <li >
771
+ <a class="sidenav-item-link" href="reset-password.html">
772
+ <span class="nav-text">Reset Password</span>
773
+
774
+ </a>
775
+ </li>
776
+
777
+
778
+
779
+
780
+ </div>
781
+ </ul>
782
+ </li>
783
+
784
+
785
+
786
+
787
+
788
+ <li class="has-sub" >
789
+ <a class="sidenav-item-link" href="javascript:void(0)" data-toggle="collapse" data-target="#other-page"
790
+ aria-expanded="false" aria-controls="other-page">
791
+ <i class="mdi mdi-file-multiple"></i>
792
+ <span class="nav-text">Other pages</span> <b class="caret"></b>
793
+ </a>
794
+ <ul class="collapse" id="other-page"
795
+ data-parent="#sidebar-menu">
796
+ <div class="sub-menu">
797
+
798
+
799
+
800
+ <li >
801
+ <a class="sidenav-item-link" href="invoice.html">
802
+ <span class="nav-text">Invoice</span>
803
+
804
+ </a>
805
+ </li>
806
+
807
+
808
+
809
+
810
+
811
+
812
+ <li >
813
+ <a class="sidenav-item-link" href="404.html">
814
+ <span class="nav-text">404 page</span>
815
+
816
+ </a>
817
+ </li>
818
+
819
+
820
+
821
+
822
+
823
+
824
+ <li >
825
+ <a class="sidenav-item-link" href="page-comingsoon.html">
826
+ <span class="nav-text">Coming Soon</span>
827
+
828
+ </a>
829
+ </li>
830
+
831
+
832
+
833
+
834
+
835
+
836
+ <li >
837
+ <a class="sidenav-item-link" href="page-maintenance.html">
838
+ <span class="nav-text">Maintenance</span>
839
+
840
+ </a>
841
+ </li>
842
+
843
+
844
+
845
+
846
+ </div>
847
+ </ul>
848
+ </li>
849
+
850
+
851
+
852
+
853
+
854
+ <li class="section-title">
855
+ Documentation
856
+ </li>
857
+
858
+
859
+
860
+
861
+
862
+ <li
863
+ >
864
+ <a class="sidenav-item-link" href="getting-started.html">
865
+ <i class="mdi mdi-airplane"></i>
866
+ <span class="nav-text">Getting Started</span>
867
+ </a>
868
+ </li>
869
+
870
+
871
+
872
+
873
+
874
+ <li class="has-sub" >
875
+ <a class="sidenav-item-link" href="javascript:void(0)" data-toggle="collapse" data-target="#customization"
876
+ aria-expanded="false" aria-controls="customization">
877
+ <i class="mdi mdi-square-edit-outline"></i>
878
+ <span class="nav-text">Customization</span> <b class="caret"></b>
879
+ </a>
880
+ <ul class="collapse" id="customization"
881
+ data-parent="#sidebar-menu">
882
+ <div class="sub-menu">
883
+
884
+
885
+
886
+ <li >
887
+ <a class="sidenav-item-link" href="navbar-customization.html">
888
+ <span class="nav-text">Navbar</span>
889
+
890
+ </a>
891
+ </li>
892
+
893
+
894
+
895
+
896
+
897
+
898
+ <li >
899
+ <a class="sidenav-item-link" href="sidebar-customization.html">
900
+ <span class="nav-text">Sidebar</span>
901
+
902
+ </a>
903
+ </li>
904
+
905
+
906
+
907
+
908
+
909
+
910
+ <li >
911
+ <a class="sidenav-item-link" href="styling.html">
912
+ <span class="nav-text">Styling</span>
913
+
914
+ </a>
915
+ </li>
916
+
917
+
918
+
919
+
920
+ </div>
921
+ </ul>
922
+ </li>
923
+
924
+
925
+
926
+ </ul>
927
+
928
+ </div>
929
+
930
+ <div class="sidebar-footer">
931
+ <div class="sidebar-footer-content">
932
+ <ul class="d-flex">
933
+ <li>
934
+ <a href="user-account-settings.html" data-toggle="tooltip" title="Profile settings"><i class="mdi mdi-settings"></i></a></li>
935
+ <li>
936
+ <a href="#" data-toggle="tooltip" title="No chat messages"><i class="mdi mdi-chat-processing"></i></a>
937
+ </li>
938
+ </ul>
939
+ </div>
940
+ </div>
941
+ </div>
942
+ </aside>
943
+
944
+
945
+
946
+ <!-- ====================================
947
+ ——— PAGE WRAPPER
948
+ ===================================== -->
949
+ <div class="page-wrapper">
950
+
951
+ <!-- Header -->
952
+ <header class="main-header" id="header">
953
+ <nav class="navbar navbar-expand-lg navbar-light" id="navbar">
954
+ <!-- Sidebar toggle button -->
955
+ <button id="sidebar-toggler" class="sidebar-toggle">
956
+ <span class="sr-only">Toggle navigation</span>
957
+ </button>
958
+
959
+ <span class="page-title">email inbox</span>
960
+
961
+ <div class="navbar-right ">
962
+
963
+ <!-- search form -->
964
+ <div class="search-form">
965
+ <form action="index.html" method="get">
966
+ <div class="input-group input-group-sm" id="input-group-search">
967
+ <input type="text" autocomplete="off" name="query" id="search-input" class="form-control" placeholder="Search..." />
968
+ <div class="input-group-append">
969
+ <button class="btn" type="button">/</button>
970
+ </div>
971
+ </div>
972
+ </form>
973
+ <ul class="dropdown-menu dropdown-menu-search">
974
+
975
+ <li class="nav-item">
976
+ <a class="nav-link" href="index.html">Morbi leo risus</a>
977
+ </li>
978
+ <li class="nav-item">
979
+ <a class="nav-link" href="index.html">Dapibus ac facilisis in</a>
980
+ </li>
981
+ <li class="nav-item">
982
+ <a class="nav-link" href="index.html">Porta ac consectetur ac</a>
983
+ </li>
984
+ <li class="nav-item">
985
+ <a class="nav-link" href="index.html">Vestibulum at eros</a>
986
+ </li>
987
+
988
+ </ul>
989
+
990
+ </div>
991
+
992
+ <ul class="nav navbar-nav">
993
+ <!-- Offcanvas -->
994
+ <li class="custom-dropdown">
995
+ <a class="offcanvas-toggler active custom-dropdown-toggler" data-offcanvas="contact-off" href="javascript:" >
996
+ <i class="mdi mdi-contacts icon"></i>
997
+ </a>
998
+ </li>
999
+ <li class="custom-dropdown">
1000
+ <button class="notify-toggler custom-dropdown-toggler">
1001
+ <i class="mdi mdi-bell-outline icon"></i>
1002
+ <span class="badge badge-xs rounded-circle">21</span>
1003
+ </button>
1004
+ <div class="dropdown-notify">
1005
+
1006
+ <header>
1007
+ <div class="nav nav-underline" id="nav-tab" role="tablist">
1008
+ <a class="nav-item nav-link active" id="all-tabs" data-toggle="tab" href="#all" role="tab" aria-controls="nav-home"
1009
+ aria-selected="true">All (5)</a>
1010
+ <a class="nav-item nav-link" id="message-tab" data-toggle="tab" href="#message" role="tab" aria-controls="nav-profile"
1011
+ aria-selected="false">Msgs (4)</a>
1012
+ <a class="nav-item nav-link" id="other-tab" data-toggle="tab" href="#other" role="tab" aria-controls="nav-contact"
1013
+ aria-selected="false">Others (3)</a>
1014
+ </div>
1015
+ </header>
1016
+
1017
+ <div class="" data-simplebar style="height: 325px;">
1018
+ <div class="tab-content" id="myTabContent">
1019
+
1020
+ <div class="tab-pane fade show active" id="all" role="tabpanel" aria-labelledby="all-tabs">
1021
+
1022
+ <div class="media media-sm bg-warning-10 p-4 mb-0">
1023
+ <div class="media-sm-wrapper">
1024
+ <a href="user-profile.html">
1025
+ <img src="images/user/user-sm-02.jpg" alt="User Image">
1026
+ </a>
1027
+ </div>
1028
+ <div class="media-body">
1029
+ <a href="user-profile.html">
1030
+ <span class="title mb-0">John Doe</span>
1031
+ <span class="discribe">Extremity sweetness difficult behaviour he of. On disposal of as landlord horrible. Afraid at highly months do things on at.</span>
1032
+ <span class="time">
1033
+ <time>Just now</time>...
1034
+ </span>
1035
+ </a>
1036
+ </div>
1037
+ </div>
1038
+
1039
+ <div class="media media-sm p-4 bg-light mb-0">
1040
+ <div class="media-sm-wrapper bg-primary">
1041
+ <a href="user-profile.html">
1042
+ <i class="mdi mdi-calendar-check-outline"></i>
1043
+ </a>
1044
+ </div>
1045
+ <div class="media-body">
1046
+ <a href="user-profile.html">
1047
+ <span class="title mb-0">New event added</span>
1048
+ <span class="discribe">1/3/2014 (1pm - 2pm)</span>
1049
+ <span class="time">
1050
+ <time>10 min ago...</time>...
1051
+ </span>
1052
+ </a>
1053
+ </div>
1054
+ </div>
1055
+
1056
+ <div class="media media-sm p-4 mb-0">
1057
+ <div class="media-sm-wrapper">
1058
+ <a href="user-profile.html">
1059
+ <img src="images/user/user-sm-03.jpg" alt="User Image">
1060
+ </a>
1061
+ </div>
1062
+ <div class="media-body">
1063
+ <a href="user-profile.html">
1064
+ <span class="title mb-0">Sagge Hudson</span>
1065
+ <span class="discribe">On disposal of as landlord Afraid at highly months do things on at.</span>
1066
+ <span class="time">
1067
+ <time>1 hrs ago</time>...
1068
+ </span>
1069
+ </a>
1070
+ </div>
1071
+ </div>
1072
+
1073
+ <div class="media media-sm p-4 mb-0">
1074
+ <div class="media-sm-wrapper bg-info-dark">
1075
+ <a href="user-profile.html">
1076
+ <i class="mdi mdi-account-multiple-check"></i>
1077
+ </a>
1078
+ </div>
1079
+ <div class="media-body">
1080
+ <a href="user-profile.html">
1081
+ <span class="title mb-0">Add request</span>
1082
+ <span class="discribe">Add Dany Jones as your contact.</span>
1083
+ <div class="buttons">
1084
+ <a href="#" class="btn btn-sm btn-success shadow-none text-white">accept</a>
1085
+ <a href="#" class="btn btn-sm shadow-none">delete</a>
1086
+ </div>
1087
+ <span class="time">
1088
+ <time>6 hrs ago</time>...
1089
+ </span>
1090
+ </a>
1091
+ </div>
1092
+ </div>
1093
+
1094
+ <div class="media media-sm p-4 mb-0">
1095
+ <div class="media-sm-wrapper bg-info">
1096
+ <a href="user-profile.html">
1097
+ <i class="mdi mdi-playlist-check"></i>
1098
+ </a>
1099
+ </div>
1100
+ <div class="media-body">
1101
+ <a href="user-profile.html">
1102
+ <span class="title mb-0">Task complete</span>
1103
+ <span class="discribe">Afraid at highly months do things on at.</span>
1104
+ <span class="time">
1105
+ <time>1 hrs ago</time>...
1106
+ </span>
1107
+ </a>
1108
+ </div>
1109
+ </div>
1110
+
1111
+ </div>
1112
+
1113
+ <div class="tab-pane fade" id="message" role="tabpanel" aria-labelledby="message-tab">
1114
+
1115
+ <div class="media media-sm p-4 mb-0">
1116
+ <div class="media-sm-wrapper">
1117
+ <a href="user-profile.html">
1118
+ <img src="images/user/user-sm-01.jpg" alt="User Image">
1119
+ </a>
1120
+ </div>
1121
+ <div class="media-body">
1122
+ <a href="user-profile.html">
1123
+ <span class="title mb-0">Selena Wagner</span>
1124
+ <span class="discribe">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</span>
1125
+ <span class="time">
1126
+ <time>15 min ago</time>...
1127
+ </span>
1128
+ </a>
1129
+ </div>
1130
+ </div>
1131
+
1132
+ <div class="media media-sm p-4 mb-0">
1133
+ <div class="media-sm-wrapper">
1134
+ <a href="user-profile.html">
1135
+ <img src="images/user/user-sm-03.jpg" alt="User Image">
1136
+ </a>
1137
+ </div>
1138
+ <div class="media-body">
1139
+ <a href="user-profile.html">
1140
+ <span class="title mb-0">Sagge Hudson</span>
1141
+ <span class="discribe">On disposal of as landlord Afraid at highly months do things on at.</span>
1142
+ <span class="time">
1143
+ <time>1 hrs ago</time>...
1144
+ </span>
1145
+ </a>
1146
+ </div>
1147
+ </div>
1148
+
1149
+ <div class="media media-sm bg-warning-10 p-4 mb-0">
1150
+ <div class="media-sm-wrapper">
1151
+ <a href="user-profile.html">
1152
+ <img src="images/user/user-sm-02.jpg" alt="User Image">
1153
+ </a>
1154
+ </div>
1155
+ <div class="media-body">
1156
+ <a href="user-profile.html">
1157
+ <span class="title mb-0">John Doe</span>
1158
+ <span class="discribe">Extremity sweetness difficult behaviour he of. On disposal of as landlord horrible. Afraid
1159
+ at highly months do things on at.</span>
1160
+ <span class="time">
1161
+ <time>Just now</time>...
1162
+ </span>
1163
+ </a>
1164
+ </div>
1165
+ </div>
1166
+
1167
+ <div class="media media-sm p-4 mb-0">
1168
+ <div class="media-sm-wrapper">
1169
+ <a href="user-profile.html">
1170
+ <img src="images/user/user-sm-04.jpg" alt="User Image">
1171
+ </a>
1172
+ </div>
1173
+ <div class="media-body">
1174
+ <a href="user-profile.html">
1175
+ <span class="title mb-0">Albrecht Straub</span>
1176
+ <span class="discribe"> Beatae quia natus assumenda laboriosam, nisi perferendis aliquid consectetur expedita non tenetur.</span>
1177
+ <span class="time">
1178
+ <time>Just now</time>...
1179
+ </span>
1180
+ </a>
1181
+ </div>
1182
+ </div>
1183
+
1184
+ </div>
1185
+ <div class="tab-pane fade" id="other" role="tabpanel" aria-labelledby="contact-tab">
1186
+
1187
+ <div class="media media-sm p-4 bg-light mb-0">
1188
+ <div class="media-sm-wrapper bg-primary">
1189
+ <a href="user-profile.html">
1190
+ <i class="mdi mdi-calendar-check-outline"></i>
1191
+ </a>
1192
+ </div>
1193
+ <div class="media-body">
1194
+ <a href="user-profile.html">
1195
+ <span class="title mb-0">New event added</span>
1196
+ <span class="discribe">1/3/2014 (1pm - 2pm)</span>
1197
+ <span class="time">
1198
+ <time>10 min ago...</time>...
1199
+ </span>
1200
+ </a>
1201
+ </div>
1202
+ </div>
1203
+
1204
+ <div class="media media-sm p-4 mb-0">
1205
+ <div class="media-sm-wrapper bg-info-dark">
1206
+ <a href="user-profile.html">
1207
+ <i class="mdi mdi-account-multiple-check"></i>
1208
+ </a>
1209
+ </div>
1210
+ <div class="media-body">
1211
+ <a href="user-profile.html">
1212
+ <span class="title mb-0">Add request</span>
1213
+ <span class="discribe">Add Dany Jones as your contact.</span>
1214
+ <div class="buttons">
1215
+ <a href="#" class="btn btn-sm btn-success shadow-none text-white">accept</a>
1216
+ <a href="#" class="btn btn-sm shadow-none">delete</a>
1217
+ </div>
1218
+ <span class="time">
1219
+ <time>6 hrs ago</time>...
1220
+ </span>
1221
+ </a>
1222
+ </div>
1223
+ </div>
1224
+
1225
+ <div class="media media-sm p-4 mb-0">
1226
+ <div class="media-sm-wrapper bg-info">
1227
+ <a href="user-profile.html">
1228
+ <i class="mdi mdi-playlist-check"></i>
1229
+ </a>
1230
+ </div>
1231
+ <div class="media-body">
1232
+ <a href="user-profile.html">
1233
+ <span class="title mb-0">Task complete</span>
1234
+ <span class="discribe">Afraid at highly months do things on at.</span>
1235
+ <span class="time">
1236
+ <time>1 hrs ago</time>...
1237
+ </span>
1238
+ </a>
1239
+ </div>
1240
+ </div>
1241
+
1242
+ </div>
1243
+ </div>
1244
+ </div>
1245
+
1246
+ <footer class="border-top dropdown-notify-footer">
1247
+ <div class="d-flex justify-content-between align-items-center py-2 px-4">
1248
+ <span>Last updated 3 min ago</span>
1249
+ <a id="refress-button" href="javascript:" class="btn mdi mdi-cached btn-refress"></a>
1250
+ </div>
1251
+ </footer>
1252
+ </div>
1253
+ </li>
1254
+ <!-- User Account -->
1255
+ <li class="dropdown user-menu">
1256
+ <button class="dropdown-toggle nav-link" data-toggle="dropdown">
1257
+ <img src="images/user/user-xs-01.jpg" class="user-image rounded-circle" alt="User Image" />
1258
+ <span class="d-none d-lg-inline-block">John Doe</span>
1259
+ </button>
1260
+ <ul class="dropdown-menu dropdown-menu-right">
1261
+ <li>
1262
+ <a class="dropdown-link-item" href="user-profile.html">
1263
+ <i class="mdi mdi-account-outline"></i>
1264
+ <span class="nav-text">My Profile</span>
1265
+ </a>
1266
+ </li>
1267
+ <li>
1268
+ <a class="dropdown-link-item" href="email-inbox.html">
1269
+ <i class="mdi mdi-email-outline"></i>
1270
+ <span class="nav-text">Message</span>
1271
+ <span class="badge badge-pill badge-primary">24</span>
1272
+ </a>
1273
+ </li>
1274
+ <li>
1275
+ <a class="dropdown-link-item" href="user-activities.html">
1276
+ <i class="mdi mdi-diamond-stone"></i>
1277
+ <span class="nav-text">Activitise</span></a>
1278
+ </li>
1279
+ <li>
1280
+ <a class="dropdown-link-item" href="user-account-settings.html">
1281
+ <i class="mdi mdi-settings"></i>
1282
+ <span class="nav-text">Account Setting</span>
1283
+ </a>
1284
+ </li>
1285
+
1286
+ <li class="dropdown-footer">
1287
+ <a class="dropdown-link-item" href="sign-in.html"> <i class="mdi mdi-logout"></i> Log Out </a>
1288
+ </li>
1289
+ </ul>
1290
+ </li>
1291
+ </ul>
1292
+ </div>
1293
+ </nav>
1294
+
1295
+
1296
+ </header>
1297
+
1298
+ <!-- ====================================
1299
+ ——— CONTENT WRAPPER
1300
+ ===================================== -->
1301
+ <div class="content-wrapper">
1302
+ <div class="content"> <!-- ====================================
1303
+ ——— EMAIL WRAPPER
1304
+ ===================================== -->
1305
+ <div class="email-wrapper rounded border bg-white">
1306
+ <div class="row no-gutters justify-content-center">
1307
+ <div class="col-lg-4 col-xl-3 col-xxl-2">
1308
+ <div class="email-left-column email-options p-4 p-xl-5">
1309
+ <a href="email-compose.html" class="btn btn-block btn-primary btn-pill mb-4 mb-xl-5">Compose</a>
1310
+ <ul class="pb-2">
1311
+ <li class="d-block active mb-4">
1312
+ <a href="email-inbox.html">
1313
+ <i class="mdi mdi-download mr-2"></i> Inbox</a>
1314
+ <span class="badge badge-secondary">20</span>
1315
+ </li>
1316
+ <li class="d-block mb-4">
1317
+ <a href="#">
1318
+ <i class="mdi mdi-star-outline mr-2"></i> Favorite</a>
1319
+ <span class="badge badge-secondary">56</span>
1320
+ </li>
1321
+ <li class="d-block mb-4">
1322
+ <a href="#">
1323
+ <i class="mdi mdi-playlist-edit mr-2"></i> Drafts</a>
1324
+ </li>
1325
+ <li class="d-block mb-4">
1326
+ <a href="#">
1327
+ <i class="mdi mdi-open-in-new mr-2"></i> Sent Mail</a>
1328
+ </li>
1329
+ <li class="d-block mb-4">
1330
+ <a href="#">
1331
+ <i class="mdi mdi-trash-can-outline mr-2"></i> Trash</a>
1332
+ </li>
1333
+ </ul>
1334
+ <p class="text-dark font-weight-medium">Labels</p>
1335
+ <ul>
1336
+ <li class="mt-4">
1337
+ <a href="#">
1338
+ <i class="mdi mdi-checkbox-blank-circle-outline text-primary mr-3"></i>Work</a>
1339
+ </li>
1340
+ <li class="mt-4">
1341
+ <a href="#">
1342
+ <i class="mdi mdi-checkbox-blank-circle-outline text-warning mr-3"></i>Private</a>
1343
+ </li>
1344
+ <li class="mt-4">
1345
+ <a href="#">
1346
+ <i class="mdi mdi-checkbox-blank-circle-outline text-danger mr-3"></i>Family</a>
1347
+ </li>
1348
+ <li class="mt-4">
1349
+ <a href="#">
1350
+ <i class="mdi mdi-checkbox-blank-circle-outline text-success mr-3"></i>Friends</a>
1351
+ </li>
1352
+ </ul>
1353
+ </div>
1354
+ </div>
1355
+ <div class="col-lg-8 col-xl-9 col-xxl-10">
1356
+ <div class="email-right-column p-4 p-xl-5">
1357
+ <!-- Email Right Header -->
1358
+ <div class="email-right-header mb-5">
1359
+ <!-- head left option -->
1360
+ <div class="head-left-options">
1361
+ <div class="form-check">
1362
+ <input class="form-check-input" type="checkbox" id="defaultCheck1">
1363
+ <label class="form-check-label" for="defaultCheck1">Select All</label>
1364
+ </div>
1365
+ <button type="button" class="btn btn-icon btn-outline btn-rounded-circle">
1366
+ <i class="mdi mdi-refresh"></i>
1367
+ </button>
1368
+ <div class="dropdown">
1369
+ <button class="btn dropdown-toggle border rounded-pill" type="button" id="dropdownMenuButton"
1370
+ data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">More
1371
+ </button>
1372
+ <div class="dropdown-menu" aria-labelledby="dropdownMenuButton" x-placement="bottom-start"
1373
+ style="position: absolute; transform: translate3d(0px, 40px, 0px); top: 0px; left: 0px; will-change: transform;">
1374
+ <a class="dropdown-item" href="#">Action</a>
1375
+ <a class="dropdown-item" href="#">Another action</a>
1376
+ <a class="dropdown-item" href="#">Something else here</a>
1377
+ </div>
1378
+ </div>
1379
+ </div>
1380
+ <!-- head right option -->
1381
+ <div class="head-right-options">
1382
+ <div class="btn-group" role="group" aria-label="Basic example">
1383
+ <button type="button" class="btn border btn-pill">
1384
+ <i class="mdi mdi-chevron-left"></i>
1385
+ </button>
1386
+ <button type="button" class="btn border btn-pill">
1387
+ <i class="mdi mdi-chevron-right"></i>
1388
+ </button>
1389
+ </div>
1390
+ </div>
1391
+ </div>
1392
+ <div class="border border-top-0 rounded table-responsive email-list">
1393
+ <table class="table mb-0 table-email">
1394
+ <tbody>
1395
+ <tr class="unread">
1396
+ <td class="mark-mail">
1397
+ <label class="control control-checkbox mb-0">
1398
+ <input type="checkbox" />
1399
+ <div class="control-indicator"></div>
1400
+ </label>
1401
+ </td>
1402
+ <td class="star">
1403
+ <i class="mdi mdi-star-outline"></i>
1404
+ </td>
1405
+ <td class="sender-name text-dark">
1406
+ Walter Reuter
1407
+ </td>
1408
+ <td class="">
1409
+ <a href="email-details.html" class="text-default d-inline-block text-smoke">
1410
+ <span class="badge badge-primary">New</span>
1411
+ <span class="subject text-dark">
1412
+ Statement belting with double
1413
+ </span>
1414
+ - Lorem ipsum dolor sit amet consectetur adipisicing elit. Impedit nihil illum animi vitae beatae. Dolorum eos tempora ex autem voluptatum sint voluptas, explicabo debitis perferendis distinctio labore quibusdam quam quaerat quas architecto minus tempore.
1415
+ </a>
1416
+ </td>
1417
+ <td class="attachment">
1418
+ <i class="mdi mdi-paperclip"></i>
1419
+ </td>
1420
+ <td class="date">
1421
+ Mar 18
1422
+ </td>
1423
+ </tr>
1424
+ <tr class="read">
1425
+ <td class="mark-mail">
1426
+ <label class="control control-checkbox mb-0">
1427
+ <input type="checkbox" />
1428
+ <div class="control-indicator"></div>
1429
+ </label>
1430
+ </td>
1431
+ <td class="">
1432
+ <i class="mdi mdi-star-outline"></i>
1433
+ </td>
1434
+ <td class="sender-name text-dark">
1435
+ Antoine Chevallier
1436
+ </td>
1437
+ <td class="">
1438
+ <a href="email-details.html" class="text-default d-inline-block text-smoke">
1439
+ <span class="subject text-dark">
1440
+ Statement belting with double
1441
+ </span>
1442
+ - Duis nec ligula sed augue consequat mattis sed eget lacusq uisque erat urna, gravida id orci in, euismod scelerisque tortor. In hac habitasse platea dictumst. Aenean efficitur varius volutpat. Donec eu faucibus leo. Quisque lacinia tempor quam sit amet consectetur.
1443
+ </p>
1444
+ </td>
1445
+ <td class="attachment">
1446
+
1447
+ </td>
1448
+ <td class="date">
1449
+ Mar 10
1450
+ </td>
1451
+ </tr>
1452
+ <tr class="unread">
1453
+ <td class="mark-mail">
1454
+ <label class="control control-checkbox mb-0">
1455
+ <input type="checkbox" />
1456
+ <div class="control-indicator"></div>
1457
+ </label>
1458
+ </td>
1459
+ <td class="">
1460
+ <i class="mdi mdi-star-outline"></i>
1461
+ </td>
1462
+ <td class="sender-name text-dark">
1463
+ Nicolas Dumas
1464
+ </td>
1465
+ <td class="">
1466
+ <a href="email-details.html" class="text-default d-inline-block">
1467
+ <span class="badge badge-primary">New</span>
1468
+ <span class="subject text-dark">
1469
+ Statement belting with double
1470
+ </span>
1471
+ - In hac habitasse platea dictumst. Morbi eu elit vitae nunc porttitor ornare. Etiam tristique lorem leo, vitae eleifend arcu semper et. Sed eget erat sit amet tortor ultrices vestibulum nec et nunc. Nunc lobortis turpis mi, sit amet lacinia quam bibendum in.
1472
+ </a>
1473
+ </td>
1474
+ <td class="attachment">
1475
+
1476
+ </td>
1477
+ <td class="date">
1478
+ Feb 20
1479
+ </td>
1480
+ </tr>
1481
+ <tr class="read">
1482
+ <td class="mark-mail">
1483
+ <label class="control control-checkbox mb-0">
1484
+ <input type="checkbox" />
1485
+ <div class="control-indicator"></div>
1486
+ </label>
1487
+ </td>
1488
+ <td class="favorites text-warning">
1489
+ <i class="mdi mdi-star"></i>
1490
+ </td>
1491
+ <td class="sender-name text-dark">
1492
+ Walter Reuter
1493
+ </td>
1494
+ <td class="">
1495
+ <a href="email-details.html" class="text-default d-inline-block text-smoke">
1496
+ <span class="subject text-dark">
1497
+ Statement belting with double
1498
+ </span>
1499
+ - Egestas vitae dapibus sit amet pretium ut nulla fusce euligula quis justo vulputate luctus quis eu libero. Praesent ultricies elit sem, eu iaculis ipsum viverra a. Aenean pretium a diam vitae consectetur. Phasellus pretium, nunc vitae vulputate consequat.
1500
+ </a>
1501
+ </td>
1502
+ <td class="attachment">
1503
+ <i class="mdi mdi-paperclip"></i>
1504
+ </td>
1505
+ <td class="date">
1506
+ Feb 2
1507
+ </td>
1508
+ </tr>
1509
+ <tr class="read">
1510
+ <td class="mark-mail">
1511
+ <label class="control control-checkbox mb-0">
1512
+ <input type="checkbox" />
1513
+ <div class="control-indicator"></div>
1514
+ </label>
1515
+ </td>
1516
+ <td class="">
1517
+ <i class="mdi mdi-star-outline"></i>
1518
+ </td>
1519
+ <td class="sender-name text-dark">
1520
+ Sylvie Rey
1521
+ </td>
1522
+ <td class="">
1523
+ <a href="email-details.html" class="text-default d-inline-block text-smoke">
1524
+ <span class="subject text-dark">
1525
+ Statement belting with double
1526
+ </span>
1527
+ - Sed iaculis ipsum lacus, in conse ctetur elit solli citu dinsed fusce at odio cursus orci rhoncus imperdiet. Proin cursus consequat sem, ut rutrum sapien facilisis vitae. Maecenas massa massa, mollis eget nisl non, accumsan gravida turpis. Quisque quis.
1528
+ </a>
1529
+ </td>
1530
+ <td class="attachment">
1531
+
1532
+ </td>
1533
+ <td class="date">
1534
+ Jan 31
1535
+ </td>
1536
+ </tr>
1537
+ <tr class="read">
1538
+ <td class="mark-mail">
1539
+ <label class="control control-checkbox mb-0">
1540
+ <input type="checkbox" />
1541
+ <div class="control-indicator"></div>
1542
+ </label>
1543
+ </td>
1544
+ <td class="">
1545
+ <i class="mdi mdi-star-outline"></i>
1546
+ </td>
1547
+ <td class="sender-name text-dark">
1548
+ Nath Collin
1549
+ </td>
1550
+ <td class="">
1551
+ <a href="email-details.html" class="text-default d-inline-block text-smoke">
1552
+ <span class="subject text-dark">
1553
+ Statement belting with double
1554
+ </span>
1555
+ - Nam dapibus at ex a porta. Aenean arcu dui, eleifend sedornare ornare, accumsan id lectus. Vivamus non nisi eget metus bibendum placerat iaculis a nibh. Phasellus ut orci lacinia, gravida est eget, rhoncus diam. Pellentesque nulla felis, ultrices nec.
1556
+ </a>
1557
+ </td>
1558
+ <td class="attachment">
1559
+ <i class="mdi mdi-paperclip"></i>
1560
+ </td>
1561
+ <td class="date">
1562
+ Jan 22
1563
+ </td>
1564
+ </tr>
1565
+ <tr class="read">
1566
+ <td class="mark-mail">
1567
+ <label class="control control-checkbox mb-0">
1568
+ <input type="checkbox" />
1569
+ <div class="control-indicator"></div>
1570
+ </label>
1571
+ </td>
1572
+ <td class="favorites text-warning">
1573
+ <i class="mdi mdi-star"></i>
1574
+ </td>
1575
+ <td class="sender-name text-dark">
1576
+ Diane Gay
1577
+ </td>
1578
+ <td class="">
1579
+ <a href="email-details.html" class="text-default d-inline-block">
1580
+ <span class="badge badge-success">Work</span>
1581
+ <span class="subject text-dark">
1582
+ Statement belting with double
1583
+ </span>
1584
+ - Integer ac justo augue. Aenean pellentesque, eliteget hendrerit pharetra, augue elit porttitor nunc, vitae pulvinar sem dui eget velit. Morbi iaculis vestibulum risus, non consequat ex vulputate nec. Sed venenatis turpis vulputate pellentesque posuere.
1585
+ </a>
1586
+ </td>
1587
+ <td class="attachment">
1588
+ <i class="mdi mdi-paperclip"></i>
1589
+ </td>
1590
+ <td class="date">
1591
+ Jan 15
1592
+ </td>
1593
+ </tr>
1594
+ <tr class="read">
1595
+ <td class="mark-mail">
1596
+ <label class="control control-checkbox mb-0">
1597
+ <input type="checkbox" />
1598
+ <div class="control-indicator"></div>
1599
+ </label>
1600
+ </td>
1601
+ <td class="">
1602
+ <i class="mdi mdi-star-outline"></i>
1603
+ </td>
1604
+ <td class="sender-name text-dark">
1605
+ Colette Bazin
1606
+ </td>
1607
+ <td class="">
1608
+ <a href="email-details.html" class="text-default d-inline-block text-smoke">
1609
+ <span class="badge badge-warning">Family</span>
1610
+ <span class="subject text-dark">
1611
+ Statement belting with double
1612
+ </span>
1613
+ - Curabitur eget elementum justo. Phasellus lectus magna, vulputate eget tempor ac, elementum in nulla. Nam volutpat quam vitae vehicula consectetur. Cras placerat mauris ut erat convallis, sagittis volutpat lorem interdum phasellus lectus elementum.
1614
+ </a>
1615
+ </td>
1616
+ <td class="attachment">
1617
+
1618
+ </td>
1619
+ <td class="date">
1620
+ Jan 09
1621
+ </td>
1622
+ </tr>
1623
+ <tr class="read">
1624
+ <td class="mark-mail">
1625
+ <label class="control control-checkbox mb-0">
1626
+ <input type="checkbox" />
1627
+ <div class="control-indicator"></div>
1628
+ </label>
1629
+ </td>
1630
+ <td class="">
1631
+ <i class="mdi mdi-star-outline"></i>
1632
+ </td>
1633
+ <td class="sender-name text-dark">
1634
+ Marine Aubry
1635
+ </td>
1636
+ <td class="">
1637
+ <a href="email-details.html" class="text-default d-inline-block">
1638
+ <span class="subject text-dark">
1639
+ Statement belting with double
1640
+ </span>
1641
+ - Metus in et dui eu urna viverra semper. Aenean mollis ornare sem eu hendrerit. Cras ac viverra elit. Integer ullamcorper pharetra orci, at feugiat turpis aliquam nec. Vivamus vel metus non est lacinia iaculis at sed tortor. Vivamus vehicula ornare erat.
1642
+ </a>
1643
+ </td>
1644
+ <td class="attachment">
1645
+ </td>
1646
+ <td class="date">
1647
+ Jan 1
1648
+ </td>
1649
+ </tr>
1650
+ <tr class="read">
1651
+ <td class="mark-mail">
1652
+ <label class="control control-checkbox mb-0">
1653
+ <input type="checkbox" />
1654
+ <div class="control-indicator"></div>
1655
+ </label>
1656
+ </td>
1657
+ <td class="">
1658
+ <i class="mdi mdi-star-outline"></i>
1659
+ </td>
1660
+ <td class="sender-name text-dark">
1661
+ Laurent Pons
1662
+ </td>
1663
+ <td class="">
1664
+ <a href="email-details.html" class="text-default d-inline-block text-smoke">
1665
+ <span class="subject text-dark">
1666
+ Statement belting with double
1667
+ </span>
1668
+ - Duis ante nunc, accumsan ut suscipit at, suscipit in leo quisque in urna in metus elementum molestie. Sed vitae efficitur tellus. Pellentesque eu ligula vel orci dictum tempor. Vestibulum efficitur tincidunt lectus at aliquam. Nullam quis luctus nisl.
1669
+ </a>
1670
+ </td>
1671
+ <td class="attachment">
1672
+ <i class="mdi mdi-paperclip"></i>
1673
+ </td>
1674
+ <td class="date">
1675
+ 12/19/17
1676
+ </td>
1677
+ </tr>
1678
+ <tr class="read">
1679
+ <td class="mark-mail">
1680
+ <label class="control control-checkbox mb-0">
1681
+ <input type="checkbox" />
1682
+ <div class="control-indicator"></div>
1683
+ </label>
1684
+ </td>
1685
+ <td class="">
1686
+ <i class="mdi mdi-star-outline"></i>
1687
+ </td>
1688
+ <td class="sender-name text-dark">
1689
+ Diane Gay
1690
+ </td>
1691
+ <td class="">
1692
+ <a href="email-details.html" class="text-default d-inline-block text-smoke">
1693
+ <span class="badge badge-primary">New</span>
1694
+ <span class="subject text-dark">
1695
+ Statement belting with double
1696
+ </span>
1697
+ - Sed vel dictum erat. Proin efficitur fringilla libe roaport titor enim varius quis. Phasellus quis molestie turpis. Mauris ut lectus a sapien pulvinar sagittis quis blandit turpis. Etiam porta congue eros ac consectetur. Vestibulum ante ipsum primis.
1698
+ </a>
1699
+ </td>
1700
+ <td class="attachment">
1701
+
1702
+ </td>
1703
+ <td class="date">
1704
+ 12/5/17
1705
+ </td>
1706
+ </tr>
1707
+ <tr class="unread">
1708
+ <td class="mark-mail">
1709
+ <label class="control control-checkbox mb-0">
1710
+ <input type="checkbox" />
1711
+ <div class="control-indicator"></div>
1712
+ </label>
1713
+ </td>
1714
+ <td class="">
1715
+ <i class="mdi mdi-star-outline"></i>
1716
+ </td>
1717
+ <td class="sender-name text-dark">
1718
+ Roger Labbe
1719
+ </td>
1720
+ <td class="">
1721
+ <a href="email-details.html" class="text-default d-inline-block text-smoke">
1722
+ <span class="badge badge-primary">New</span>
1723
+ <span class="subject text-dark">
1724
+ Statement belting with double
1725
+ </span>
1726
+ - Curabitur sem nunc, pharetra eu turpis sed, tristique condimentum justo. Mauris auctor sollicitudin elit, ut bibendum libero pulvinar consectetur. Nunc et risus eleifend, iaculis mi vitae, rhoncus libero. Nam fermentum posuere accumsan. Nunc nec malesuada leo.
1727
+ </a>
1728
+ </td>
1729
+ <td class="attachment">
1730
+ <i class="mdi mdi-paperclip"></i>
1731
+ </td>
1732
+ <td class="date">
1733
+ 11/10/17
1734
+ </td>
1735
+ </tr>
1736
+ <tr class="read">
1737
+ <td class="mark-mail">
1738
+ <label class="control control-checkbox mb-0">
1739
+ <input type="checkbox" />
1740
+ <div class="control-indicator"></div>
1741
+ </label>
1742
+ </td>
1743
+ <td class="">
1744
+ <i class="mdi mdi-star-outline"></i>
1745
+ </td>
1746
+ <td class="sender-name text-dark">
1747
+ Juliette Ferreira
1748
+ </td>
1749
+ <td class="">
1750
+ <a href="email-details.html" class="text-default d-inline-block text-smoke">
1751
+ <span class="subject text-dark">
1752
+ Statement belting with double
1753
+ </span>
1754
+ - Quisque congue ligula ut facilisis pellentesque. Aenean feugiat, turpis ut consequat sodales, lacus nisi sollicitudin mi, ac ultrices arcu orci eget sapien. Sed varius velit neque, eget venenatis neque suscipit a. Suspendisse nec facilisis neque. Curabitur ac.
1755
+ </a>
1756
+ </td>
1757
+ <td class="attachment">
1758
+ <i class="mdi mdi-paperclip"></i>
1759
+ </td>
1760
+ <td class="date">
1761
+ 11/2/17
1762
+ </td>
1763
+ </tr>
1764
+ <tr class="read">
1765
+ <td class="mark-mail">
1766
+ <label class="control control-checkbox mb-0">
1767
+ <input type="checkbox" />
1768
+ <div class="control-indicator"></div>
1769
+ </label>
1770
+ </td>
1771
+ <td class="">
1772
+ <i class="mdi mdi-star-outline"></i>
1773
+ </td>
1774
+ <td class="sender-name text-dark">
1775
+ Anne Lesage
1776
+ </td>
1777
+ <td class="">
1778
+ <a href="email-details.html" class="text-default d-inline-block">
1779
+ <span class="badge bg-purple ">Friends</span>
1780
+ <span class="subject text-dark">
1781
+ Statement belting with double
1782
+ </span>
1783
+ - Vivamus facilisis sodales imperd quisque velegestas elit. Praesent id tellus egestas mauris laoreet laoreet amet at sapien. Pellentesque elementum neque a bibendum dapibus. Aliquam euismod, nisi sed congue congue, elit diam elementum sapien.
1784
+ </a>
1785
+ </td>
1786
+ <td class="attachment">
1787
+
1788
+ </td>
1789
+ <td class="date">
1790
+ 10/10/17
1791
+ </td>
1792
+ </tr>
1793
+ <tr class="unread">
1794
+ <td class="mark-mail">
1795
+ <label class="control control-checkbox mb-0">
1796
+ <input type="checkbox" />
1797
+ <div class="control-indicator"></div>
1798
+ </label>
1799
+ </td>
1800
+ <td class="">
1801
+ <i class="mdi mdi-star-outline"></i>
1802
+ </td>
1803
+ <td class="sender-name text-dark">
1804
+ Jean Poirier
1805
+ </td>
1806
+ <td class="">
1807
+ <a href="email-details.html" class="text-default d-inline-block text-smoke">
1808
+ <span class="badge badge-primary">New</span>
1809
+ <span class="subject text-dark">
1810
+ Statement belting with double
1811
+ </span>
1812
+ - Risus nec ligula imperdiet, sit amet fermentum felis pretium. In sit amet enim tristique, mollis arcu ultricies, mollis libero. Proin at euismod mauris. Morbi eu nibh eu nulla convallis pulvinar. Ut ac cursus nunc. Integer accumsan aliquet commodo.
1813
+ </a>
1814
+ </td>
1815
+ <td class="attachment">
1816
+
1817
+ </td>
1818
+ <td class="date">
1819
+ 10/1/17
1820
+ </td>
1821
+ </tr>
1822
+ </tbody>
1823
+ </table>
1824
+ </div>
1825
+ </div>
1826
+ </div>
1827
+ </div>
1828
+ </div>
1829
+ </div>
1830
+
1831
+ </div>
1832
+
1833
+ <!-- Footer -->
1834
+ <footer class="footer mt-auto">
1835
+ <div class="copyright bg-white">
1836
+ <p>
1837
+ &copy; <span id="copy-year"></span> Copyright Mono Dashboard Bootstrap Template by <a class="text-primary" href="http://www.iamabdus.com/" target="_blank" >Abdus</a>.
1838
+ </p>
1839
+ </div>
1840
+ <script>
1841
+ var d = new Date();
1842
+ var year = d.getFullYear();
1843
+ document.getElementById("copy-year").innerHTML = year;
1844
+ </script>
1845
+ </footer>
1846
+
1847
+ </div>
1848
+ </div>
1849
+
1850
+ <!-- Card Offcanvas -->
1851
+ <div class="card card-offcanvas" id="contact-off" >
1852
+ <div class="card-header">
1853
+ <h2>Contacts</h2>
1854
+ <a href="#" class="btn btn-primary btn-pill px-4">Add New</a>
1855
+ </div>
1856
+ <div class="card-body">
1857
+
1858
+ <div class="mb-4">
1859
+ <input type="text" class="form-control form-control-lg form-control-secondary rounded-0" placeholder="Search contacts...">
1860
+ </div>
1861
+
1862
+ <div class="media media-sm">
1863
+ <div class="media-sm-wrapper">
1864
+ <a href="user-profile.html">
1865
+ <img src="images/user/user-sm-01.jpg" alt="User Image">
1866
+ <span class="active bg-primary"></span>
1867
+ </a>
1868
+ </div>
1869
+ <div class="media-body">
1870
+ <a href="user-profile.html">
1871
+ <span class="title">Selena Wagner</span>
1872
+ <span class="discribe">Designer</span>
1873
+ </a>
1874
+ </div>
1875
+ </div>
1876
+
1877
+ <div class="media media-sm">
1878
+ <div class="media-sm-wrapper">
1879
+ <a href="user-profile.html">
1880
+ <img src="images/user/user-sm-02.jpg" alt="User Image">
1881
+ <span class="active bg-primary"></span>
1882
+ </a>
1883
+ </div>
1884
+ <div class="media-body">
1885
+ <a href="user-profile.html">
1886
+ <span class="title">Walter Reuter</span>
1887
+ <span>Developer</span>
1888
+ </a>
1889
+ </div>
1890
+ </div>
1891
+
1892
+ <div class="media media-sm">
1893
+ <div class="media-sm-wrapper">
1894
+ <a href="user-profile.html">
1895
+ <img src="images/user/user-sm-03.jpg" alt="User Image">
1896
+ </a>
1897
+ </div>
1898
+ <div class="media-body">
1899
+ <a href="user-profile.html">
1900
+ <span class="title">Larissa Gebhardt</span>
1901
+ <span>Cyber Punk</span>
1902
+ </a>
1903
+ </div>
1904
+ </div>
1905
+
1906
+ <div class="media media-sm">
1907
+ <div class="media-sm-wrapper">
1908
+ <a href="user-profile.html">
1909
+ <img src="images/user/user-sm-04.jpg" alt="User Image">
1910
+ </a>
1911
+
1912
+ </div>
1913
+ <div class="media-body">
1914
+ <a href="user-profile.html">
1915
+ <span class="title">Albrecht Straub</span>
1916
+ <span>Photographer</span>
1917
+ </a>
1918
+ </div>
1919
+ </div>
1920
+
1921
+ <div class="media media-sm">
1922
+ <div class="media-sm-wrapper">
1923
+ <a href="user-profile.html">
1924
+ <img src="images/user/user-sm-05.jpg" alt="User Image">
1925
+ <span class="active bg-danger"></span>
1926
+ </a>
1927
+ </div>
1928
+ <div class="media-body">
1929
+ <a href="user-profile.html">
1930
+ <span class="title">Leopold Ebert</span>
1931
+ <span>Fashion Designer</span>
1932
+ </a>
1933
+ </div>
1934
+ </div>
1935
+
1936
+ <div class="media media-sm">
1937
+ <div class="media-sm-wrapper">
1938
+ <a href="user-profile.html">
1939
+ <img src="images/user/user-sm-06.jpg" alt="User Image">
1940
+ <span class="active bg-primary"></span>
1941
+ </a>
1942
+ </div>
1943
+ <div class="media-body">
1944
+ <a href="user-profile.html">
1945
+ <span class="title">Selena Wagner</span>
1946
+ <span>Photographer</span>
1947
+ </a>
1948
+ </div>
1949
+ </div>
1950
+
1951
+ </div>
1952
+ </div>
1953
+
1954
+
1955
+
1956
+
1957
+ <script src="plugins/jquery/jquery.min.js"></script>
1958
+ <script src="plugins/bootstrap/js/bootstrap.bundle.min.js"></script>
1959
+ <script src="plugins/simplebar/simplebar.min.js"></script>
1960
+ <script src="https://unpkg.com/hotkeys-js/dist/hotkeys.min.js"></script>
1961
+
1962
+
1963
+ <script src="js/mono.js"></script>
1964
+ <script src="js/chart.js"></script>
1965
+ <script src="js/map.js"></script>
1966
+ <script src="js/custom.js"></script>
1967
+
1968
+
1969
+
1970
+
1971
+ <!-- -->
1972
+
1973
+
1974
+ </body>
1975
+ </html>
flag-icons.html ADDED
The diff for this file is too large to render. See raw diff
 
form-advance.html ADDED
@@ -0,0 +1,1695 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+
3
+ <!--
4
+ // WEBSITE: https://themefisher.com
5
+ // TWITTER: https://twitter.com/themefisher
6
+ // FACEBOOK: https://www.facebook.com/themefisher
7
+ // GITHUB: https://github.com/themefisher/
8
+ -->
9
+
10
+ <html lang="en" dir="ltr">
11
+ <head>
12
+ <meta charset="utf-8" />
13
+ <meta http-equiv="X-UA-Compatible" content="IE=edge" />
14
+ <meta name="viewport" content="width=device-width, initial-scale=1" />
15
+
16
+ <title>Mono - Responsive Admin & Dashboard Template</title>
17
+
18
+ <!-- GOOGLE FONTS -->
19
+ <link href="https://fonts.googleapis.com/css?family=Karla:400,700|Roboto" rel="stylesheet">
20
+ <link href="plugins/material/css/materialdesignicons.min.css" rel="stylesheet" />
21
+ <link href="plugins/simplebar/simplebar.css" rel="stylesheet" />
22
+
23
+ <!-- PLUGINS CSS STYLE -->
24
+ <link href="plugins/nprogress/nprogress.css" rel="stylesheet" />
25
+
26
+
27
+ <link href="plugins/prism/prism.css" rel="stylesheet" />
28
+
29
+
30
+
31
+ <link href="plugins/select2/css/select2.min.css" rel="stylesheet" />
32
+
33
+
34
+
35
+
36
+ <!-- MONO CSS -->
37
+ <link id="main-css-href" rel="stylesheet" href="css/style.css" />
38
+
39
+
40
+
41
+
42
+ <!-- FAVICON -->
43
+ <link href="images/favicon.png" rel="shortcut icon" />
44
+
45
+ <!--
46
+ HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries
47
+ -->
48
+ <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
49
+ <!--[if lt IE 9]>
50
+ <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
51
+ <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
52
+ <![endif]-->
53
+ <script src="plugins/nprogress/nprogress.js"></script>
54
+ </head>
55
+
56
+
57
+ <body class="navbar-fixed sidebar-fixed" id="body">
58
+ <script>
59
+ NProgress.configure({ showSpinner: false });
60
+ NProgress.start();
61
+ </script>
62
+
63
+
64
+
65
+ <!-- ====================================
66
+ ——— WRAPPER
67
+ ===================================== -->
68
+ <div class="wrapper">
69
+
70
+
71
+ <!-- ====================================
72
+ ——— LEFT SIDEBAR WITH OUT FOOTER
73
+ ===================================== -->
74
+ <aside class="left-sidebar sidebar-dark" id="left-sidebar">
75
+ <div id="sidebar" class="sidebar sidebar-with-footer">
76
+ <!-- Aplication Brand -->
77
+ <div class="app-brand">
78
+ <a href="/index.html">
79
+ <img src="images/logo.png" alt="Mono">
80
+ <span class="brand-name">MONO</span>
81
+ </a>
82
+ </div>
83
+ <!-- begin sidebar scrollbar -->
84
+ <div class="sidebar-left" data-simplebar style="height: 100%;">
85
+ <!-- sidebar menu -->
86
+ <ul class="nav sidebar-inner" id="sidebar-menu">
87
+
88
+
89
+
90
+ <li
91
+ >
92
+ <a class="sidenav-item-link" href="index.html">
93
+ <i class="mdi mdi-briefcase-account-outline"></i>
94
+ <span class="nav-text">Business Dashboard</span>
95
+ </a>
96
+ </li>
97
+
98
+
99
+
100
+
101
+
102
+ <li
103
+ >
104
+ <a class="sidenav-item-link" href="analytics.html">
105
+ <i class="mdi mdi-chart-line"></i>
106
+ <span class="nav-text">Analytics Dashboard</span>
107
+ </a>
108
+ </li>
109
+
110
+
111
+
112
+
113
+
114
+ <li class="section-title">
115
+ Apps
116
+ </li>
117
+
118
+
119
+
120
+
121
+
122
+ <li
123
+ >
124
+ <a class="sidenav-item-link" href="chat.html">
125
+ <i class="mdi mdi-wechat"></i>
126
+ <span class="nav-text">Chat</span>
127
+ </a>
128
+ </li>
129
+
130
+
131
+
132
+
133
+
134
+ <li
135
+ >
136
+ <a class="sidenav-item-link" href="contacts.html">
137
+ <i class="mdi mdi-phone"></i>
138
+ <span class="nav-text">Contacts</span>
139
+ </a>
140
+ </li>
141
+
142
+
143
+
144
+
145
+
146
+ <li
147
+ >
148
+ <a class="sidenav-item-link" href="team.html">
149
+ <i class="mdi mdi-account-group"></i>
150
+ <span class="nav-text">Team</span>
151
+ </a>
152
+ </li>
153
+
154
+
155
+
156
+
157
+
158
+ <li
159
+ >
160
+ <a class="sidenav-item-link" href="calendar.html">
161
+ <i class="mdi mdi-calendar-check"></i>
162
+ <span class="nav-text">Calendar</span>
163
+ </a>
164
+ </li>
165
+
166
+
167
+
168
+
169
+
170
+ <li class="has-sub" >
171
+ <a class="sidenav-item-link" href="javascript:void(0)" data-toggle="collapse" data-target="#email"
172
+ aria-expanded="false" aria-controls="email">
173
+ <i class="mdi mdi-email"></i>
174
+ <span class="nav-text">email</span> <b class="caret"></b>
175
+ </a>
176
+ <ul class="collapse" id="email"
177
+ data-parent="#sidebar-menu">
178
+ <div class="sub-menu">
179
+
180
+
181
+
182
+ <li >
183
+ <a class="sidenav-item-link" href="email-inbox.html">
184
+ <span class="nav-text">Email Inbox</span>
185
+
186
+ </a>
187
+ </li>
188
+
189
+
190
+
191
+
192
+
193
+
194
+ <li >
195
+ <a class="sidenav-item-link" href="email-details.html">
196
+ <span class="nav-text">Email Details</span>
197
+
198
+ </a>
199
+ </li>
200
+
201
+
202
+
203
+
204
+
205
+
206
+ <li >
207
+ <a class="sidenav-item-link" href="email-compose.html">
208
+ <span class="nav-text">Email Compose</span>
209
+
210
+ </a>
211
+ </li>
212
+
213
+
214
+
215
+
216
+ </div>
217
+ </ul>
218
+ </li>
219
+
220
+
221
+
222
+
223
+
224
+ <li class="section-title">
225
+ UI Elements
226
+ </li>
227
+
228
+
229
+
230
+
231
+
232
+ <li class="has-sub active expand" >
233
+ <a class="sidenav-item-link" href="javascript:void(0)" data-toggle="collapse" data-target="#ui-elements"
234
+ aria-expanded="false" aria-controls="ui-elements">
235
+ <i class="mdi mdi-folder-outline"></i>
236
+ <span class="nav-text">UI Components</span> <b class="caret"></b>
237
+ </a>
238
+ <ul class="collapse show" id="ui-elements"
239
+ data-parent="#sidebar-menu">
240
+ <div class="sub-menu">
241
+
242
+
243
+
244
+ <li >
245
+ <a class="sidenav-item-link" href="alert.html">
246
+ <span class="nav-text">Alert</span>
247
+
248
+ </a>
249
+ </li>
250
+
251
+
252
+
253
+
254
+
255
+
256
+ <li >
257
+ <a class="sidenav-item-link" href="badge.html">
258
+ <span class="nav-text">Badge</span>
259
+
260
+ </a>
261
+ </li>
262
+
263
+
264
+
265
+
266
+
267
+
268
+ <li >
269
+ <a class="sidenav-item-link" href="breadcrumb.html">
270
+ <span class="nav-text">Breadcrumb</span>
271
+
272
+ </a>
273
+ </li>
274
+
275
+
276
+
277
+
278
+
279
+ <li class="has-sub" >
280
+ <a class="sidenav-item-link" href="javascript:void(0)" data-toggle="collapse" data-target="#buttons"
281
+ aria-expanded="false" aria-controls="buttons">
282
+ <span class="nav-text">Buttons</span> <b class="caret"></b>
283
+ </a>
284
+ <ul class="collapse" id="buttons">
285
+ <div class="sub-menu">
286
+
287
+ <li >
288
+ <a href="button-default.html">Button Default</a>
289
+ </li>
290
+
291
+ <li >
292
+ <a href="button-dropdown.html">Button Dropdown</a>
293
+ </li>
294
+
295
+ <li >
296
+ <a href="button-group.html">Button Group</a>
297
+ </li>
298
+
299
+ <li >
300
+ <a href="button-social.html">Button Social</a>
301
+ </li>
302
+
303
+ <li >
304
+ <a href="button-loading.html">Button Loading</a>
305
+ </li>
306
+
307
+ </div>
308
+ </ul>
309
+ </li>
310
+
311
+
312
+
313
+
314
+
315
+ <li >
316
+ <a class="sidenav-item-link" href="card.html">
317
+ <span class="nav-text">Card</span>
318
+
319
+ </a>
320
+ </li>
321
+
322
+
323
+
324
+
325
+
326
+
327
+ <li >
328
+ <a class="sidenav-item-link" href="carousel.html">
329
+ <span class="nav-text">Carousel</span>
330
+
331
+ </a>
332
+ </li>
333
+
334
+
335
+
336
+
337
+
338
+
339
+ <li >
340
+ <a class="sidenav-item-link" href="collapse.html">
341
+ <span class="nav-text">Collapse</span>
342
+
343
+ </a>
344
+ </li>
345
+
346
+
347
+
348
+
349
+
350
+
351
+ <li >
352
+ <a class="sidenav-item-link" href="editor.html">
353
+ <span class="nav-text">Editor</span>
354
+
355
+ </a>
356
+ </li>
357
+
358
+
359
+
360
+
361
+
362
+
363
+ <li >
364
+ <a class="sidenav-item-link" href="list-group.html">
365
+ <span class="nav-text">List Group</span>
366
+
367
+ </a>
368
+ </li>
369
+
370
+
371
+
372
+
373
+
374
+
375
+ <li >
376
+ <a class="sidenav-item-link" href="modal.html">
377
+ <span class="nav-text">Modal</span>
378
+
379
+ </a>
380
+ </li>
381
+
382
+
383
+
384
+
385
+
386
+
387
+ <li >
388
+ <a class="sidenav-item-link" href="pagination.html">
389
+ <span class="nav-text">Pagination</span>
390
+
391
+ </a>
392
+ </li>
393
+
394
+
395
+
396
+
397
+
398
+
399
+ <li >
400
+ <a class="sidenav-item-link" href="popover-tooltip.html">
401
+ <span class="nav-text">Popover & Tooltip</span>
402
+
403
+ </a>
404
+ </li>
405
+
406
+
407
+
408
+
409
+
410
+
411
+ <li >
412
+ <a class="sidenav-item-link" href="progress-bar.html">
413
+ <span class="nav-text">Progress Bar</span>
414
+
415
+ </a>
416
+ </li>
417
+
418
+
419
+
420
+
421
+
422
+
423
+ <li >
424
+ <a class="sidenav-item-link" href="spinner.html">
425
+ <span class="nav-text">Spinner</span>
426
+
427
+ </a>
428
+ </li>
429
+
430
+
431
+
432
+
433
+
434
+
435
+ <li >
436
+ <a class="sidenav-item-link" href="switches.html">
437
+ <span class="nav-text">Switches</span>
438
+
439
+ </a>
440
+ </li>
441
+
442
+
443
+
444
+
445
+
446
+ <li class="has-sub" >
447
+ <a class="sidenav-item-link" href="javascript:void(0)" data-toggle="collapse" data-target="#tables"
448
+ aria-expanded="false" aria-controls="tables">
449
+ <span class="nav-text">Tables</span> <b class="caret"></b>
450
+ </a>
451
+ <ul class="collapse" id="tables">
452
+ <div class="sub-menu">
453
+
454
+ <li >
455
+ <a href="bootstarp-tables.html">Bootstrap Tables</a>
456
+ </li>
457
+
458
+ <li >
459
+ <a href="data-tables.html">Data Tables</a>
460
+ </li>
461
+
462
+ </div>
463
+ </ul>
464
+ </li>
465
+
466
+
467
+
468
+
469
+
470
+ <li >
471
+ <a class="sidenav-item-link" href="tab.html">
472
+ <span class="nav-text">Tab</span>
473
+
474
+ </a>
475
+ </li>
476
+
477
+
478
+
479
+
480
+
481
+
482
+ <li >
483
+ <a class="sidenav-item-link" href="toaster.html">
484
+ <span class="nav-text">Toaster</span>
485
+
486
+ </a>
487
+ </li>
488
+
489
+
490
+
491
+
492
+
493
+ <li class="has-sub" >
494
+ <a class="sidenav-item-link" href="javascript:void(0)" data-toggle="collapse" data-target="#icons"
495
+ aria-expanded="false" aria-controls="icons">
496
+ <span class="nav-text">Icons</span> <b class="caret"></b>
497
+ </a>
498
+ <ul class="collapse" id="icons">
499
+ <div class="sub-menu">
500
+
501
+ <li >
502
+ <a href="material-icons.html">Material Icon</a>
503
+ </li>
504
+
505
+ <li >
506
+ <a href="flag-icons.html">Flag Icon</a>
507
+ </li>
508
+
509
+ </div>
510
+ </ul>
511
+ </li>
512
+
513
+
514
+
515
+
516
+ <li class="has-sub active expand" >
517
+ <a class="sidenav-item-link" href="javascript:void(0)" data-toggle="collapse" data-target="#forms"
518
+ aria-expanded="false" aria-controls="forms">
519
+ <span class="nav-text">Forms</span> <b class="caret"></b>
520
+ </a>
521
+ <ul class="collapse show" id="forms">
522
+ <div class="sub-menu">
523
+
524
+ <li >
525
+ <a href="basic-input.html">Basic Input</a>
526
+ </li>
527
+
528
+ <li >
529
+ <a href="input-group.html">Input Group</a>
530
+ </li>
531
+
532
+ <li >
533
+ <a href="checkbox-radio.html">Checkbox & Radio</a>
534
+ </li>
535
+
536
+ <li >
537
+ <a href="form-validation.html">Form Validation</a>
538
+ </li>
539
+
540
+ <li class="active" >
541
+ <a href="form-advance.html">Form Advance</a>
542
+ </li>
543
+
544
+ </div>
545
+ </ul>
546
+ </li>
547
+
548
+
549
+
550
+
551
+ <li class="has-sub" >
552
+ <a class="sidenav-item-link" href="javascript:void(0)" data-toggle="collapse" data-target="#maps"
553
+ aria-expanded="false" aria-controls="maps">
554
+ <span class="nav-text">Maps</span> <b class="caret"></b>
555
+ </a>
556
+ <ul class="collapse" id="maps">
557
+ <div class="sub-menu">
558
+
559
+ <li >
560
+ <a href="google-maps.html">Google Map</a>
561
+ </li>
562
+
563
+ <li >
564
+ <a href="vector-maps.html">Vector Map</a>
565
+ </li>
566
+
567
+ </div>
568
+ </ul>
569
+ </li>
570
+
571
+
572
+
573
+
574
+ <li class="has-sub" >
575
+ <a class="sidenav-item-link" href="javascript:void(0)" data-toggle="collapse" data-target="#widgets"
576
+ aria-expanded="false" aria-controls="widgets">
577
+ <span class="nav-text">Widgets</span> <b class="caret"></b>
578
+ </a>
579
+ <ul class="collapse" id="widgets">
580
+ <div class="sub-menu">
581
+
582
+ <li >
583
+ <a href="widgets-general.html">General Widget</a>
584
+ </li>
585
+
586
+ <li >
587
+ <a href="widgets-chart.html">Chart Widget</a>
588
+ </li>
589
+
590
+ </div>
591
+ </ul>
592
+ </li>
593
+
594
+
595
+
596
+ </div>
597
+ </ul>
598
+ </li>
599
+
600
+
601
+
602
+
603
+
604
+ <li class="has-sub" >
605
+ <a class="sidenav-item-link" href="javascript:void(0)" data-toggle="collapse" data-target="#charts"
606
+ aria-expanded="false" aria-controls="charts">
607
+ <i class="mdi mdi-chart-pie"></i>
608
+ <span class="nav-text">Charts</span> <b class="caret"></b>
609
+ </a>
610
+ <ul class="collapse" id="charts"
611
+ data-parent="#sidebar-menu">
612
+ <div class="sub-menu">
613
+
614
+
615
+
616
+ <li >
617
+ <a class="sidenav-item-link" href="apex-charts.html">
618
+ <span class="nav-text">Apex Charts</span>
619
+
620
+ </a>
621
+ </li>
622
+
623
+
624
+
625
+
626
+ </div>
627
+ </ul>
628
+ </li>
629
+
630
+
631
+
632
+
633
+
634
+ <li class="section-title">
635
+ Pages
636
+ </li>
637
+
638
+
639
+
640
+
641
+
642
+ <li class="has-sub" >
643
+ <a class="sidenav-item-link" href="javascript:void(0)" data-toggle="collapse" data-target="#users"
644
+ aria-expanded="false" aria-controls="users">
645
+ <i class="mdi mdi-image-filter-none"></i>
646
+ <span class="nav-text">User</span> <b class="caret"></b>
647
+ </a>
648
+ <ul class="collapse" id="users"
649
+ data-parent="#sidebar-menu">
650
+ <div class="sub-menu">
651
+
652
+
653
+
654
+ <li >
655
+ <a class="sidenav-item-link" href="user-profile.html">
656
+ <span class="nav-text">User Profile</span>
657
+
658
+ </a>
659
+ </li>
660
+
661
+
662
+
663
+
664
+
665
+
666
+ <li >
667
+ <a class="sidenav-item-link" href="user-activities.html">
668
+ <span class="nav-text">User Activities</span>
669
+
670
+ </a>
671
+ </li>
672
+
673
+
674
+
675
+
676
+
677
+
678
+ <li >
679
+ <a class="sidenav-item-link" href="user-profile-settings.html">
680
+ <span class="nav-text">User Profile Settings</span>
681
+
682
+ </a>
683
+ </li>
684
+
685
+
686
+
687
+
688
+
689
+
690
+ <li >
691
+ <a class="sidenav-item-link" href="user-account-settings.html">
692
+ <span class="nav-text">User Account Settings</span>
693
+
694
+ </a>
695
+ </li>
696
+
697
+
698
+
699
+
700
+
701
+
702
+ <li >
703
+ <a class="sidenav-item-link" href="user-planing-settings.html">
704
+ <span class="nav-text">User Planing Settings</span>
705
+
706
+ </a>
707
+ </li>
708
+
709
+
710
+
711
+
712
+
713
+
714
+ <li >
715
+ <a class="sidenav-item-link" href="user-billing.html">
716
+ <span class="nav-text">User billing</span>
717
+
718
+ </a>
719
+ </li>
720
+
721
+
722
+
723
+
724
+
725
+
726
+ <li >
727
+ <a class="sidenav-item-link" href="user-notify-settings.html">
728
+ <span class="nav-text">User Notify Settings</span>
729
+
730
+ </a>
731
+ </li>
732
+
733
+
734
+
735
+
736
+ </div>
737
+ </ul>
738
+ </li>
739
+
740
+
741
+
742
+
743
+
744
+ <li class="has-sub" >
745
+ <a class="sidenav-item-link" href="javascript:void(0)" data-toggle="collapse" data-target="#authentication"
746
+ aria-expanded="false" aria-controls="authentication">
747
+ <i class="mdi mdi-account"></i>
748
+ <span class="nav-text">Authentication</span> <b class="caret"></b>
749
+ </a>
750
+ <ul class="collapse" id="authentication"
751
+ data-parent="#sidebar-menu">
752
+ <div class="sub-menu">
753
+
754
+
755
+
756
+ <li >
757
+ <a class="sidenav-item-link" href="sign-in.html">
758
+ <span class="nav-text">Sign In</span>
759
+
760
+ </a>
761
+ </li>
762
+
763
+
764
+
765
+
766
+
767
+
768
+ <li >
769
+ <a class="sidenav-item-link" href="sign-up.html">
770
+ <span class="nav-text">Sign Up</span>
771
+
772
+ </a>
773
+ </li>
774
+
775
+
776
+
777
+
778
+
779
+
780
+ <li >
781
+ <a class="sidenav-item-link" href="reset-password.html">
782
+ <span class="nav-text">Reset Password</span>
783
+
784
+ </a>
785
+ </li>
786
+
787
+
788
+
789
+
790
+ </div>
791
+ </ul>
792
+ </li>
793
+
794
+
795
+
796
+
797
+
798
+ <li class="has-sub" >
799
+ <a class="sidenav-item-link" href="javascript:void(0)" data-toggle="collapse" data-target="#other-page"
800
+ aria-expanded="false" aria-controls="other-page">
801
+ <i class="mdi mdi-file-multiple"></i>
802
+ <span class="nav-text">Other pages</span> <b class="caret"></b>
803
+ </a>
804
+ <ul class="collapse" id="other-page"
805
+ data-parent="#sidebar-menu">
806
+ <div class="sub-menu">
807
+
808
+
809
+
810
+ <li >
811
+ <a class="sidenav-item-link" href="invoice.html">
812
+ <span class="nav-text">Invoice</span>
813
+
814
+ </a>
815
+ </li>
816
+
817
+
818
+
819
+
820
+
821
+
822
+ <li >
823
+ <a class="sidenav-item-link" href="404.html">
824
+ <span class="nav-text">404 page</span>
825
+
826
+ </a>
827
+ </li>
828
+
829
+
830
+
831
+
832
+
833
+
834
+ <li >
835
+ <a class="sidenav-item-link" href="page-comingsoon.html">
836
+ <span class="nav-text">Coming Soon</span>
837
+
838
+ </a>
839
+ </li>
840
+
841
+
842
+
843
+
844
+
845
+
846
+ <li >
847
+ <a class="sidenav-item-link" href="page-maintenance.html">
848
+ <span class="nav-text">Maintenance</span>
849
+
850
+ </a>
851
+ </li>
852
+
853
+
854
+
855
+
856
+ </div>
857
+ </ul>
858
+ </li>
859
+
860
+
861
+
862
+
863
+
864
+ <li class="section-title">
865
+ Documentation
866
+ </li>
867
+
868
+
869
+
870
+
871
+
872
+ <li
873
+ >
874
+ <a class="sidenav-item-link" href="getting-started.html">
875
+ <i class="mdi mdi-airplane"></i>
876
+ <span class="nav-text">Getting Started</span>
877
+ </a>
878
+ </li>
879
+
880
+
881
+
882
+
883
+
884
+ <li class="has-sub" >
885
+ <a class="sidenav-item-link" href="javascript:void(0)" data-toggle="collapse" data-target="#customization"
886
+ aria-expanded="false" aria-controls="customization">
887
+ <i class="mdi mdi-square-edit-outline"></i>
888
+ <span class="nav-text">Customization</span> <b class="caret"></b>
889
+ </a>
890
+ <ul class="collapse" id="customization"
891
+ data-parent="#sidebar-menu">
892
+ <div class="sub-menu">
893
+
894
+
895
+
896
+ <li >
897
+ <a class="sidenav-item-link" href="navbar-customization.html">
898
+ <span class="nav-text">Navbar</span>
899
+
900
+ </a>
901
+ </li>
902
+
903
+
904
+
905
+
906
+
907
+
908
+ <li >
909
+ <a class="sidenav-item-link" href="sidebar-customization.html">
910
+ <span class="nav-text">Sidebar</span>
911
+
912
+ </a>
913
+ </li>
914
+
915
+
916
+
917
+
918
+
919
+
920
+ <li >
921
+ <a class="sidenav-item-link" href="styling.html">
922
+ <span class="nav-text">Styling</span>
923
+
924
+ </a>
925
+ </li>
926
+
927
+
928
+
929
+
930
+ </div>
931
+ </ul>
932
+ </li>
933
+
934
+
935
+
936
+ </ul>
937
+
938
+ </div>
939
+
940
+ <div class="sidebar-footer">
941
+ <div class="sidebar-footer-content">
942
+ <ul class="d-flex">
943
+ <li>
944
+ <a href="user-account-settings.html" data-toggle="tooltip" title="Profile settings"><i class="mdi mdi-settings"></i></a></li>
945
+ <li>
946
+ <a href="#" data-toggle="tooltip" title="No chat messages"><i class="mdi mdi-chat-processing"></i></a>
947
+ </li>
948
+ </ul>
949
+ </div>
950
+ </div>
951
+ </div>
952
+ </aside>
953
+
954
+
955
+
956
+ <!-- ====================================
957
+ ——— PAGE WRAPPER
958
+ ===================================== -->
959
+ <div class="page-wrapper">
960
+
961
+ <!-- Header -->
962
+ <header class="main-header" id="header">
963
+ <nav class="navbar navbar-expand-lg navbar-light" id="navbar">
964
+ <!-- Sidebar toggle button -->
965
+ <button id="sidebar-toggler" class="sidebar-toggle">
966
+ <span class="sr-only">Toggle navigation</span>
967
+ </button>
968
+
969
+ <span class="page-title">form advance</span>
970
+
971
+ <div class="navbar-right ">
972
+
973
+ <!-- search form -->
974
+ <div class="search-form">
975
+ <form action="index.html" method="get">
976
+ <div class="input-group input-group-sm" id="input-group-search">
977
+ <input type="text" autocomplete="off" name="query" id="search-input" class="form-control" placeholder="Search..." />
978
+ <div class="input-group-append">
979
+ <button class="btn" type="button">/</button>
980
+ </div>
981
+ </div>
982
+ </form>
983
+ <ul class="dropdown-menu dropdown-menu-search">
984
+
985
+ <li class="nav-item">
986
+ <a class="nav-link" href="index.html">Morbi leo risus</a>
987
+ </li>
988
+ <li class="nav-item">
989
+ <a class="nav-link" href="index.html">Dapibus ac facilisis in</a>
990
+ </li>
991
+ <li class="nav-item">
992
+ <a class="nav-link" href="index.html">Porta ac consectetur ac</a>
993
+ </li>
994
+ <li class="nav-item">
995
+ <a class="nav-link" href="index.html">Vestibulum at eros</a>
996
+ </li>
997
+
998
+ </ul>
999
+
1000
+ </div>
1001
+
1002
+ <ul class="nav navbar-nav">
1003
+ <!-- Offcanvas -->
1004
+ <li class="custom-dropdown">
1005
+ <a class="offcanvas-toggler active custom-dropdown-toggler" data-offcanvas="contact-off" href="javascript:" >
1006
+ <i class="mdi mdi-contacts icon"></i>
1007
+ </a>
1008
+ </li>
1009
+ <li class="custom-dropdown">
1010
+ <button class="notify-toggler custom-dropdown-toggler">
1011
+ <i class="mdi mdi-bell-outline icon"></i>
1012
+ <span class="badge badge-xs rounded-circle">21</span>
1013
+ </button>
1014
+ <div class="dropdown-notify">
1015
+
1016
+ <header>
1017
+ <div class="nav nav-underline" id="nav-tab" role="tablist">
1018
+ <a class="nav-item nav-link active" id="all-tabs" data-toggle="tab" href="#all" role="tab" aria-controls="nav-home"
1019
+ aria-selected="true">All (5)</a>
1020
+ <a class="nav-item nav-link" id="message-tab" data-toggle="tab" href="#message" role="tab" aria-controls="nav-profile"
1021
+ aria-selected="false">Msgs (4)</a>
1022
+ <a class="nav-item nav-link" id="other-tab" data-toggle="tab" href="#other" role="tab" aria-controls="nav-contact"
1023
+ aria-selected="false">Others (3)</a>
1024
+ </div>
1025
+ </header>
1026
+
1027
+ <div class="" data-simplebar style="height: 325px;">
1028
+ <div class="tab-content" id="myTabContent">
1029
+
1030
+ <div class="tab-pane fade show active" id="all" role="tabpanel" aria-labelledby="all-tabs">
1031
+
1032
+ <div class="media media-sm bg-warning-10 p-4 mb-0">
1033
+ <div class="media-sm-wrapper">
1034
+ <a href="user-profile.html">
1035
+ <img src="images/user/user-sm-02.jpg" alt="User Image">
1036
+ </a>
1037
+ </div>
1038
+ <div class="media-body">
1039
+ <a href="user-profile.html">
1040
+ <span class="title mb-0">John Doe</span>
1041
+ <span class="discribe">Extremity sweetness difficult behaviour he of. On disposal of as landlord horrible. Afraid at highly months do things on at.</span>
1042
+ <span class="time">
1043
+ <time>Just now</time>...
1044
+ </span>
1045
+ </a>
1046
+ </div>
1047
+ </div>
1048
+
1049
+ <div class="media media-sm p-4 bg-light mb-0">
1050
+ <div class="media-sm-wrapper bg-primary">
1051
+ <a href="user-profile.html">
1052
+ <i class="mdi mdi-calendar-check-outline"></i>
1053
+ </a>
1054
+ </div>
1055
+ <div class="media-body">
1056
+ <a href="user-profile.html">
1057
+ <span class="title mb-0">New event added</span>
1058
+ <span class="discribe">1/3/2014 (1pm - 2pm)</span>
1059
+ <span class="time">
1060
+ <time>10 min ago...</time>...
1061
+ </span>
1062
+ </a>
1063
+ </div>
1064
+ </div>
1065
+
1066
+ <div class="media media-sm p-4 mb-0">
1067
+ <div class="media-sm-wrapper">
1068
+ <a href="user-profile.html">
1069
+ <img src="images/user/user-sm-03.jpg" alt="User Image">
1070
+ </a>
1071
+ </div>
1072
+ <div class="media-body">
1073
+ <a href="user-profile.html">
1074
+ <span class="title mb-0">Sagge Hudson</span>
1075
+ <span class="discribe">On disposal of as landlord Afraid at highly months do things on at.</span>
1076
+ <span class="time">
1077
+ <time>1 hrs ago</time>...
1078
+ </span>
1079
+ </a>
1080
+ </div>
1081
+ </div>
1082
+
1083
+ <div class="media media-sm p-4 mb-0">
1084
+ <div class="media-sm-wrapper bg-info-dark">
1085
+ <a href="user-profile.html">
1086
+ <i class="mdi mdi-account-multiple-check"></i>
1087
+ </a>
1088
+ </div>
1089
+ <div class="media-body">
1090
+ <a href="user-profile.html">
1091
+ <span class="title mb-0">Add request</span>
1092
+ <span class="discribe">Add Dany Jones as your contact.</span>
1093
+ <div class="buttons">
1094
+ <a href="#" class="btn btn-sm btn-success shadow-none text-white">accept</a>
1095
+ <a href="#" class="btn btn-sm shadow-none">delete</a>
1096
+ </div>
1097
+ <span class="time">
1098
+ <time>6 hrs ago</time>...
1099
+ </span>
1100
+ </a>
1101
+ </div>
1102
+ </div>
1103
+
1104
+ <div class="media media-sm p-4 mb-0">
1105
+ <div class="media-sm-wrapper bg-info">
1106
+ <a href="user-profile.html">
1107
+ <i class="mdi mdi-playlist-check"></i>
1108
+ </a>
1109
+ </div>
1110
+ <div class="media-body">
1111
+ <a href="user-profile.html">
1112
+ <span class="title mb-0">Task complete</span>
1113
+ <span class="discribe">Afraid at highly months do things on at.</span>
1114
+ <span class="time">
1115
+ <time>1 hrs ago</time>...
1116
+ </span>
1117
+ </a>
1118
+ </div>
1119
+ </div>
1120
+
1121
+ </div>
1122
+
1123
+ <div class="tab-pane fade" id="message" role="tabpanel" aria-labelledby="message-tab">
1124
+
1125
+ <div class="media media-sm p-4 mb-0">
1126
+ <div class="media-sm-wrapper">
1127
+ <a href="user-profile.html">
1128
+ <img src="images/user/user-sm-01.jpg" alt="User Image">
1129
+ </a>
1130
+ </div>
1131
+ <div class="media-body">
1132
+ <a href="user-profile.html">
1133
+ <span class="title mb-0">Selena Wagner</span>
1134
+ <span class="discribe">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</span>
1135
+ <span class="time">
1136
+ <time>15 min ago</time>...
1137
+ </span>
1138
+ </a>
1139
+ </div>
1140
+ </div>
1141
+
1142
+ <div class="media media-sm p-4 mb-0">
1143
+ <div class="media-sm-wrapper">
1144
+ <a href="user-profile.html">
1145
+ <img src="images/user/user-sm-03.jpg" alt="User Image">
1146
+ </a>
1147
+ </div>
1148
+ <div class="media-body">
1149
+ <a href="user-profile.html">
1150
+ <span class="title mb-0">Sagge Hudson</span>
1151
+ <span class="discribe">On disposal of as landlord Afraid at highly months do things on at.</span>
1152
+ <span class="time">
1153
+ <time>1 hrs ago</time>...
1154
+ </span>
1155
+ </a>
1156
+ </div>
1157
+ </div>
1158
+
1159
+ <div class="media media-sm bg-warning-10 p-4 mb-0">
1160
+ <div class="media-sm-wrapper">
1161
+ <a href="user-profile.html">
1162
+ <img src="images/user/user-sm-02.jpg" alt="User Image">
1163
+ </a>
1164
+ </div>
1165
+ <div class="media-body">
1166
+ <a href="user-profile.html">
1167
+ <span class="title mb-0">John Doe</span>
1168
+ <span class="discribe">Extremity sweetness difficult behaviour he of. On disposal of as landlord horrible. Afraid
1169
+ at highly months do things on at.</span>
1170
+ <span class="time">
1171
+ <time>Just now</time>...
1172
+ </span>
1173
+ </a>
1174
+ </div>
1175
+ </div>
1176
+
1177
+ <div class="media media-sm p-4 mb-0">
1178
+ <div class="media-sm-wrapper">
1179
+ <a href="user-profile.html">
1180
+ <img src="images/user/user-sm-04.jpg" alt="User Image">
1181
+ </a>
1182
+ </div>
1183
+ <div class="media-body">
1184
+ <a href="user-profile.html">
1185
+ <span class="title mb-0">Albrecht Straub</span>
1186
+ <span class="discribe"> Beatae quia natus assumenda laboriosam, nisi perferendis aliquid consectetur expedita non tenetur.</span>
1187
+ <span class="time">
1188
+ <time>Just now</time>...
1189
+ </span>
1190
+ </a>
1191
+ </div>
1192
+ </div>
1193
+
1194
+ </div>
1195
+ <div class="tab-pane fade" id="other" role="tabpanel" aria-labelledby="contact-tab">
1196
+
1197
+ <div class="media media-sm p-4 bg-light mb-0">
1198
+ <div class="media-sm-wrapper bg-primary">
1199
+ <a href="user-profile.html">
1200
+ <i class="mdi mdi-calendar-check-outline"></i>
1201
+ </a>
1202
+ </div>
1203
+ <div class="media-body">
1204
+ <a href="user-profile.html">
1205
+ <span class="title mb-0">New event added</span>
1206
+ <span class="discribe">1/3/2014 (1pm - 2pm)</span>
1207
+ <span class="time">
1208
+ <time>10 min ago...</time>...
1209
+ </span>
1210
+ </a>
1211
+ </div>
1212
+ </div>
1213
+
1214
+ <div class="media media-sm p-4 mb-0">
1215
+ <div class="media-sm-wrapper bg-info-dark">
1216
+ <a href="user-profile.html">
1217
+ <i class="mdi mdi-account-multiple-check"></i>
1218
+ </a>
1219
+ </div>
1220
+ <div class="media-body">
1221
+ <a href="user-profile.html">
1222
+ <span class="title mb-0">Add request</span>
1223
+ <span class="discribe">Add Dany Jones as your contact.</span>
1224
+ <div class="buttons">
1225
+ <a href="#" class="btn btn-sm btn-success shadow-none text-white">accept</a>
1226
+ <a href="#" class="btn btn-sm shadow-none">delete</a>
1227
+ </div>
1228
+ <span class="time">
1229
+ <time>6 hrs ago</time>...
1230
+ </span>
1231
+ </a>
1232
+ </div>
1233
+ </div>
1234
+
1235
+ <div class="media media-sm p-4 mb-0">
1236
+ <div class="media-sm-wrapper bg-info">
1237
+ <a href="user-profile.html">
1238
+ <i class="mdi mdi-playlist-check"></i>
1239
+ </a>
1240
+ </div>
1241
+ <div class="media-body">
1242
+ <a href="user-profile.html">
1243
+ <span class="title mb-0">Task complete</span>
1244
+ <span class="discribe">Afraid at highly months do things on at.</span>
1245
+ <span class="time">
1246
+ <time>1 hrs ago</time>...
1247
+ </span>
1248
+ </a>
1249
+ </div>
1250
+ </div>
1251
+
1252
+ </div>
1253
+ </div>
1254
+ </div>
1255
+
1256
+ <footer class="border-top dropdown-notify-footer">
1257
+ <div class="d-flex justify-content-between align-items-center py-2 px-4">
1258
+ <span>Last updated 3 min ago</span>
1259
+ <a id="refress-button" href="javascript:" class="btn mdi mdi-cached btn-refress"></a>
1260
+ </div>
1261
+ </footer>
1262
+ </div>
1263
+ </li>
1264
+ <!-- User Account -->
1265
+ <li class="dropdown user-menu">
1266
+ <button class="dropdown-toggle nav-link" data-toggle="dropdown">
1267
+ <img src="images/user/user-xs-01.jpg" class="user-image rounded-circle" alt="User Image" />
1268
+ <span class="d-none d-lg-inline-block">John Doe</span>
1269
+ </button>
1270
+ <ul class="dropdown-menu dropdown-menu-right">
1271
+ <li>
1272
+ <a class="dropdown-link-item" href="user-profile.html">
1273
+ <i class="mdi mdi-account-outline"></i>
1274
+ <span class="nav-text">My Profile</span>
1275
+ </a>
1276
+ </li>
1277
+ <li>
1278
+ <a class="dropdown-link-item" href="email-inbox.html">
1279
+ <i class="mdi mdi-email-outline"></i>
1280
+ <span class="nav-text">Message</span>
1281
+ <span class="badge badge-pill badge-primary">24</span>
1282
+ </a>
1283
+ </li>
1284
+ <li>
1285
+ <a class="dropdown-link-item" href="user-activities.html">
1286
+ <i class="mdi mdi-diamond-stone"></i>
1287
+ <span class="nav-text">Activitise</span></a>
1288
+ </li>
1289
+ <li>
1290
+ <a class="dropdown-link-item" href="user-account-settings.html">
1291
+ <i class="mdi mdi-settings"></i>
1292
+ <span class="nav-text">Account Setting</span>
1293
+ </a>
1294
+ </li>
1295
+
1296
+ <li class="dropdown-footer">
1297
+ <a class="dropdown-link-item" href="sign-in.html"> <i class="mdi mdi-logout"></i> Log Out </a>
1298
+ </li>
1299
+ </ul>
1300
+ </li>
1301
+ </ul>
1302
+ </div>
1303
+ </nav>
1304
+
1305
+
1306
+ </header>
1307
+
1308
+ <!-- ====================================
1309
+ ——— CONTENT WRAPPER
1310
+ ===================================== -->
1311
+ <div class="content-wrapper">
1312
+ <div class="content"><!-- For Components documentaion -->
1313
+ <div class="card card-default">
1314
+ <div class="px-6 py-4">
1315
+ <p>Mono provides a variety of <span class="text-secondary text-capitalize"> Mask Plugin </span> components with a
1316
+ little customization that suits its design standards. For more information, please see the official <a
1317
+ class="font-weight-bold" href="https://igorescobar.github.io/jQuery-Mask-Plugin/docs.html" target="_blank">Mask Plugin Documentaion.</a></p>
1318
+ </div>
1319
+ </div>
1320
+
1321
+ <!-- Masked Input -->
1322
+ <div class="card card-default">
1323
+ <div class="card-header">
1324
+ <h2>Masked Input</h2>
1325
+
1326
+ <a class="btn mdi mdi-code-tags" data-toggle="collapse" href="#collapse-input-musk" role="button" aria-expanded="false" aria-controls="collapse-input-musk"> </a>
1327
+
1328
+
1329
+ </div>
1330
+ <div class="card-body">
1331
+ <div class="collapse" id="collapse-input-musk">
1332
+ <pre class="language-html mb-4">
1333
+ <code >
1334
+ &lt;!-- Data Input --&gt;
1335
+ &lt;label class="text-dark font-weight-medium" for=""&gt;Date input&lt;/label&gt;
1336
+ &lt;div class="input-group mb-3"&gt;
1337
+ &lt;div class="input-group-prepend"&gt;
1338
+ &lt;span class="input-group-text mdi mdi-calendar" id="basic-addon1"&gt;&lt;/span&gt;
1339
+ &lt;/div&gt;
1340
+ &lt;input type="text" class="form-control" data-mask="00/00/0000"&gt;
1341
+ &lt;/div&gt;
1342
+ &lt;p style="font-size: 90%"&gt;ex. 99/99/9999&lt;/p&gt;
1343
+
1344
+ &lt;!-- Phone input --&gt;
1345
+ &lt;label class="text-dark font-weight-medium"&gt;Phone input&lt;/label&gt;
1346
+ &lt;div class="input-group mb-3"&gt;
1347
+ &lt;div class="input-group-prepend"&gt;
1348
+ &lt;span class="input-group-text mdi mdi-phone" id="basic-addon1"&gt;&lt;/span&gt;
1349
+ &lt;/div&gt;
1350
+ &lt;input type="text" class="form-control" data-mask="(999) 999-9999"&gt;
1351
+ &lt;/div&gt;
1352
+ &lt;p style="font-size: 90%"&gt;ex. (999) 999-9999&lt;/p&gt;
1353
+
1354
+ &lt;!-- Taxpayer Identification Numbers --&gt;
1355
+ &lt;label class="text-dark font-weight-medium"&gt;Taxpayer Identification Numbers&lt;/label&gt;
1356
+ &lt;div class="input-group mb-3"&gt;
1357
+ &lt;div class="input-group-prepend"&gt;
1358
+ &lt;span class="input-group-text mdi mdi-currency-usd" id="basic-addon1"&gt;&lt;/span&gt;
1359
+ &lt;/div&gt;
1360
+ &lt;input type="text" class="form-control" data-mask="99-9999999"&gt;
1361
+ &lt;/div&gt;
1362
+ &lt;p style="font-size: 90%"&gt;ex. 99-9999999&lt;/p&gt;
1363
+
1364
+ &lt;!-- Social Security Number --&gt;
1365
+ &lt;label class="text-dark font-weight-medium"&gt;Social Security Number&lt;/label&gt;
1366
+ &lt;div class="input-group mb-3"&gt;
1367
+ &lt;div class="input-group-prepend"&gt;
1368
+ &lt;span class="input-group-text mdi mdi-server-security" id="basic-addon1"&gt;&lt;/span&gt;
1369
+ &lt;/div&gt;
1370
+ &lt;input type="text" class="form-control" data-mask="999-99-9999"&gt;
1371
+ &lt;/div&gt;
1372
+ &lt;p style="font-size: 90%"&gt;ex. 999-99-9999&lt;/p&gt;
1373
+
1374
+ &lt;!-- Eye Script --&gt;
1375
+ &lt;label class="text-dark font-weight-medium"&gt;Eye Script&lt;/label&gt;
1376
+ &lt;div class="input-group mb-3"&gt;
1377
+ &lt;div class="input-group-prepend"&gt;
1378
+ &lt;span class="input-group-text mdi mdi-settings" id="basic-addon1"&gt;&lt;/span&gt;
1379
+ &lt;/div&gt;
1380
+ &lt;input type="text" class="form-control" data-mask="~9.99 ~9.99 999"&gt;
1381
+ &lt;/div&gt;
1382
+ &lt;p style="font-size: 90%"&gt;ex. ~9.99 ~9.99 999&lt;/p&gt;
1383
+
1384
+ &lt;!-- Credit Card Number --&gt;
1385
+ &lt;label class="text-dark font-weight-medium"&gt;Credit Card Number&lt;/label&gt;
1386
+ &lt;div class="input-group mb-3"&gt;
1387
+ &lt;div class="input-group-prepend"&gt;
1388
+ &lt;span class="input-group-text mdi mdi-credit-card" id="basic-addon1"&gt;&lt;/span&gt;
1389
+ &lt;/div&gt;
1390
+ &lt;input type="text" class="form-control" data-mask="9999 9999 9999 9999"&gt;
1391
+ &lt;/div&gt;
1392
+ &lt;p style="font-size: 90%"&gt;ex. 9999 9999 9999 9999&lt;/p&gt;
1393
+ </code>
1394
+ </pre>
1395
+ </div>
1396
+
1397
+ <div class="row">
1398
+ <div class="col-xl-6">
1399
+ <div class="mb-5">
1400
+ <label class="text-dark font-weight-medium" for="">Date input</label>
1401
+ <div class="input-group mb-3">
1402
+ <div class="input-group-prepend">
1403
+ <span class="input-group-text mdi mdi-calendar" id="basic-addon1"></span>
1404
+ </div>
1405
+ <input type="text" class="form-control" data-mask="00/00/0000">
1406
+ </div>
1407
+ <p style="font-size: 90%">ex. 99/99/9999</p>
1408
+ </div>
1409
+ </div>
1410
+
1411
+ <div class="col-xl-6">
1412
+ <div class="mb-5">
1413
+ <label class="text-dark font-weight-medium">Phone input</label>
1414
+ <div class="input-group mb-3">
1415
+ <div class="input-group-prepend">
1416
+ <span class="input-group-text mdi mdi-phone" id="basic-addon1"></span>
1417
+ </div>
1418
+ <input type="text" class="form-control" data-mask="(999) 999-9999">
1419
+ </div>
1420
+ <p style="font-size: 90%">ex. (999) 999-9999</p>
1421
+ </div>
1422
+ </div>
1423
+
1424
+ <div class="col-xl-6">
1425
+ <div class="mb-5">
1426
+ <label class="text-dark font-weight-medium">Taxpayer Identification Numbers</label>
1427
+ <div class="input-group mb-3">
1428
+ <div class="input-group-prepend">
1429
+ <span class="input-group-text mdi mdi-currency-usd" id="basic-addon1"></span>
1430
+ </div>
1431
+ <input type="text" class="form-control" data-mask="99-9999999">
1432
+ </div>
1433
+ <p style="font-size: 90%">ex. 99-9999999</p>
1434
+ </div>
1435
+ </div>
1436
+
1437
+ <div class="col-xl-6">
1438
+ <div class="mb-5">
1439
+ <label class="text-dark font-weight-medium">Social Security Number</label>
1440
+ <div class="input-group mb-3">
1441
+ <div class="input-group-prepend">
1442
+ <span class="input-group-text mdi mdi-server-security" id="basic-addon1"></span>
1443
+ </div>
1444
+ <input type="text" class="form-control" data-mask="999-99-9999">
1445
+ </div>
1446
+ <p style="font-size: 90%">ex. 999-99-9999</p>
1447
+ </div>
1448
+ </div>
1449
+
1450
+ <div class="col-xl-6">
1451
+ <div class="mb-5">
1452
+ <label class="text-dark font-weight-medium">Eye Script</label>
1453
+ <div class="input-group mb-3">
1454
+ <div class="input-group-prepend">
1455
+ <span class="input-group-text mdi mdi-settings" id="basic-addon1"></span>
1456
+ </div>
1457
+ <input type="text" class="form-control" data-mask="~9.99 ~9.99 999">
1458
+ </div>
1459
+ <p style="font-size: 90%">ex. ~9.99 ~9.99 999</p>
1460
+ </div>
1461
+ </div>
1462
+
1463
+ <div class="col-xl-6">
1464
+ <div class="mb-5">
1465
+ <label class="text-dark font-weight-medium">Credit Card Number</label>
1466
+ <div class="input-group mb-3">
1467
+ <div class="input-group-prepend">
1468
+ <span class="input-group-text mdi mdi-credit-card" id="basic-addon1"></span>
1469
+ </div>
1470
+ <input type="text" class="form-control" data-mask="9999 9999 9999 9999">
1471
+ </div>
1472
+ <p style="font-size: 90%">ex. 9999 9999 9999 9999</p>
1473
+ </div>
1474
+ </div>
1475
+ </div>
1476
+
1477
+ </div>
1478
+ </div>
1479
+
1480
+ <!-- For Components documentaion -->
1481
+ <div class="card card-default">
1482
+ <div class="px-6 py-4">
1483
+ <p>Mono provides a <span class="text-secondary text-capitalize"> Select 2 </span> component with a
1484
+ little customization that suits its design standards. For more information, please see the official <a
1485
+ class="font-weight-bold" href="https://select2.org/" target="_blank">Select 2 Documentaion.</a></p>
1486
+ </div>
1487
+ </div>
1488
+
1489
+ <!-- Multiple Select -->
1490
+ <div class="card card-default">
1491
+ <div class="card-header">
1492
+ <h2>Multiple Select</h2>
1493
+
1494
+ <a class="btn mdi mdi-code-tags" data-toggle="collapse" href="#collapse-select-multiple" role="button"
1495
+ aria-expanded="false" aria-controls="collapse-select-multiple"> </a>
1496
+
1497
+
1498
+ </div>
1499
+ <div class="card-body">
1500
+ <div class="collapse" id="collapse-select-multiple">
1501
+ <pre class="language-html mb-4">
1502
+ <code >
1503
+ &lt;!-- Multiple Select --&gt;
1504
+ &lt;label class="text-dark font-weight-medium"&gt;Multiple Select&lt;/label&gt;
1505
+ &lt;div class="form-group"&gt;
1506
+ &lt;select class="js-example-basic-multiple form-control" name="states[]" multiple="multiple"&gt;
1507
+ &lt;option value="AL"&gt;Alabana&lt;/option&gt;
1508
+ &lt;option value="NY"&gt;New York&lt;/option&gt;
1509
+ &lt;option value="VR"&gt;Virginia&lt;/option&gt;
1510
+ &lt;option value="WA"&gt;Washington&lt;/option&gt;
1511
+ &lt;option value="CA"&gt;California&lt;/option&gt;
1512
+ &lt;option value="WY"&gt;Wyoming&lt;/option&gt;
1513
+ &lt;/select&gt;
1514
+ &lt;/div&gt;
1515
+ </code>
1516
+ </pre>
1517
+ </div>
1518
+
1519
+ <div>
1520
+ <label class="text-dark font-weight-medium">State</label>
1521
+ <div class="form-group">
1522
+ <select class="js-example-basic-multiple form-control" name="states[]" multiple="multiple">
1523
+ <option value="AL">Alabana</option>
1524
+ <option value="NY">New York</option>
1525
+ <option value="VR">Virginia</option>
1526
+ <option value="WA">Washington</option>
1527
+ <option value="CA">California</option>
1528
+ <option value="WY">Wyoming</option>
1529
+ </select>
1530
+ </div>
1531
+ </div>
1532
+
1533
+
1534
+ </div>
1535
+ </div>
1536
+
1537
+ </div>
1538
+
1539
+ </div>
1540
+
1541
+ <!-- Footer -->
1542
+ <footer class="footer mt-auto">
1543
+ <div class="copyright bg-white">
1544
+ <p>
1545
+ &copy; <span id="copy-year"></span> Copyright Mono Dashboard Bootstrap Template by <a class="text-primary" href="http://www.iamabdus.com/" target="_blank" >Abdus</a>.
1546
+ </p>
1547
+ </div>
1548
+ <script>
1549
+ var d = new Date();
1550
+ var year = d.getFullYear();
1551
+ document.getElementById("copy-year").innerHTML = year;
1552
+ </script>
1553
+ </footer>
1554
+
1555
+ </div>
1556
+ </div>
1557
+
1558
+ <!-- Card Offcanvas -->
1559
+ <div class="card card-offcanvas" id="contact-off" >
1560
+ <div class="card-header">
1561
+ <h2>Contacts</h2>
1562
+ <a href="#" class="btn btn-primary btn-pill px-4">Add New</a>
1563
+ </div>
1564
+ <div class="card-body">
1565
+
1566
+ <div class="mb-4">
1567
+ <input type="text" class="form-control form-control-lg form-control-secondary rounded-0" placeholder="Search contacts...">
1568
+ </div>
1569
+
1570
+ <div class="media media-sm">
1571
+ <div class="media-sm-wrapper">
1572
+ <a href="user-profile.html">
1573
+ <img src="images/user/user-sm-01.jpg" alt="User Image">
1574
+ <span class="active bg-primary"></span>
1575
+ </a>
1576
+ </div>
1577
+ <div class="media-body">
1578
+ <a href="user-profile.html">
1579
+ <span class="title">Selena Wagner</span>
1580
+ <span class="discribe">Designer</span>
1581
+ </a>
1582
+ </div>
1583
+ </div>
1584
+
1585
+ <div class="media media-sm">
1586
+ <div class="media-sm-wrapper">
1587
+ <a href="user-profile.html">
1588
+ <img src="images/user/user-sm-02.jpg" alt="User Image">
1589
+ <span class="active bg-primary"></span>
1590
+ </a>
1591
+ </div>
1592
+ <div class="media-body">
1593
+ <a href="user-profile.html">
1594
+ <span class="title">Walter Reuter</span>
1595
+ <span>Developer</span>
1596
+ </a>
1597
+ </div>
1598
+ </div>
1599
+
1600
+ <div class="media media-sm">
1601
+ <div class="media-sm-wrapper">
1602
+ <a href="user-profile.html">
1603
+ <img src="images/user/user-sm-03.jpg" alt="User Image">
1604
+ </a>
1605
+ </div>
1606
+ <div class="media-body">
1607
+ <a href="user-profile.html">
1608
+ <span class="title">Larissa Gebhardt</span>
1609
+ <span>Cyber Punk</span>
1610
+ </a>
1611
+ </div>
1612
+ </div>
1613
+
1614
+ <div class="media media-sm">
1615
+ <div class="media-sm-wrapper">
1616
+ <a href="user-profile.html">
1617
+ <img src="images/user/user-sm-04.jpg" alt="User Image">
1618
+ </a>
1619
+
1620
+ </div>
1621
+ <div class="media-body">
1622
+ <a href="user-profile.html">
1623
+ <span class="title">Albrecht Straub</span>
1624
+ <span>Photographer</span>
1625
+ </a>
1626
+ </div>
1627
+ </div>
1628
+
1629
+ <div class="media media-sm">
1630
+ <div class="media-sm-wrapper">
1631
+ <a href="user-profile.html">
1632
+ <img src="images/user/user-sm-05.jpg" alt="User Image">
1633
+ <span class="active bg-danger"></span>
1634
+ </a>
1635
+ </div>
1636
+ <div class="media-body">
1637
+ <a href="user-profile.html">
1638
+ <span class="title">Leopold Ebert</span>
1639
+ <span>Fashion Designer</span>
1640
+ </a>
1641
+ </div>
1642
+ </div>
1643
+
1644
+ <div class="media media-sm">
1645
+ <div class="media-sm-wrapper">
1646
+ <a href="user-profile.html">
1647
+ <img src="images/user/user-sm-06.jpg" alt="User Image">
1648
+ <span class="active bg-primary"></span>
1649
+ </a>
1650
+ </div>
1651
+ <div class="media-body">
1652
+ <a href="user-profile.html">
1653
+ <span class="title">Selena Wagner</span>
1654
+ <span>Photographer</span>
1655
+ </a>
1656
+ </div>
1657
+ </div>
1658
+
1659
+ </div>
1660
+ </div>
1661
+
1662
+
1663
+
1664
+
1665
+ <script src="plugins/jquery/jquery.min.js"></script>
1666
+ <script src="plugins/bootstrap/js/bootstrap.bundle.min.js"></script>
1667
+ <script src="plugins/simplebar/simplebar.min.js"></script>
1668
+ <script src="https://unpkg.com/hotkeys-js/dist/hotkeys.min.js"></script>
1669
+
1670
+
1671
+
1672
+ <script src="plugins/prism/prism.js"></script>
1673
+
1674
+
1675
+
1676
+ <script src="plugins/select2/js/select2.min.js"></script>
1677
+
1678
+
1679
+
1680
+ <script src="plugins/jquery-mask-input/jquery.mask.min.js"></script>
1681
+
1682
+
1683
+ <script src="js/mono.js"></script>
1684
+ <script src="js/chart.js"></script>
1685
+ <script src="js/map.js"></script>
1686
+ <script src="js/custom.js"></script>
1687
+
1688
+
1689
+
1690
+
1691
+ <!-- -->
1692
+
1693
+
1694
+ </body>
1695
+ </html>
form-validation.html ADDED
@@ -0,0 +1,1917 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+
3
+ <!--
4
+ // WEBSITE: https://themefisher.com
5
+ // TWITTER: https://twitter.com/themefisher
6
+ // FACEBOOK: https://www.facebook.com/themefisher
7
+ // GITHUB: https://github.com/themefisher/
8
+ -->
9
+
10
+ <html lang="en" dir="ltr">
11
+ <head>
12
+ <meta charset="utf-8" />
13
+ <meta http-equiv="X-UA-Compatible" content="IE=edge" />
14
+ <meta name="viewport" content="width=device-width, initial-scale=1" />
15
+
16
+ <title>Mono - Responsive Admin & Dashboard Template</title>
17
+
18
+ <!-- GOOGLE FONTS -->
19
+ <link href="https://fonts.googleapis.com/css?family=Karla:400,700|Roboto" rel="stylesheet">
20
+ <link href="plugins/material/css/materialdesignicons.min.css" rel="stylesheet" />
21
+ <link href="plugins/simplebar/simplebar.css" rel="stylesheet" />
22
+
23
+ <!-- PLUGINS CSS STYLE -->
24
+ <link href="plugins/nprogress/nprogress.css" rel="stylesheet" />
25
+
26
+
27
+ <link href="plugins/prism/prism.css" rel="stylesheet" />
28
+
29
+
30
+ <!-- MONO CSS -->
31
+ <link id="main-css-href" rel="stylesheet" href="css/style.css" />
32
+
33
+
34
+
35
+
36
+ <!-- FAVICON -->
37
+ <link href="images/favicon.png" rel="shortcut icon" />
38
+
39
+ <!--
40
+ HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries
41
+ -->
42
+ <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
43
+ <!--[if lt IE 9]>
44
+ <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
45
+ <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
46
+ <![endif]-->
47
+ <script src="plugins/nprogress/nprogress.js"></script>
48
+ </head>
49
+
50
+
51
+ <body class="navbar-fixed sidebar-fixed" id="body">
52
+ <script>
53
+ NProgress.configure({ showSpinner: false });
54
+ NProgress.start();
55
+ </script>
56
+
57
+
58
+
59
+ <!-- ====================================
60
+ ——— WRAPPER
61
+ ===================================== -->
62
+ <div class="wrapper">
63
+
64
+
65
+ <!-- ====================================
66
+ ——— LEFT SIDEBAR WITH OUT FOOTER
67
+ ===================================== -->
68
+ <aside class="left-sidebar sidebar-dark" id="left-sidebar">
69
+ <div id="sidebar" class="sidebar sidebar-with-footer">
70
+ <!-- Aplication Brand -->
71
+ <div class="app-brand">
72
+ <a href="/index.html">
73
+ <img src="images/logo.png" alt="Mono">
74
+ <span class="brand-name">MONO</span>
75
+ </a>
76
+ </div>
77
+ <!-- begin sidebar scrollbar -->
78
+ <div class="sidebar-left" data-simplebar style="height: 100%;">
79
+ <!-- sidebar menu -->
80
+ <ul class="nav sidebar-inner" id="sidebar-menu">
81
+
82
+
83
+
84
+ <li
85
+ >
86
+ <a class="sidenav-item-link" href="index.html">
87
+ <i class="mdi mdi-briefcase-account-outline"></i>
88
+ <span class="nav-text">Business Dashboard</span>
89
+ </a>
90
+ </li>
91
+
92
+
93
+
94
+
95
+
96
+ <li
97
+ >
98
+ <a class="sidenav-item-link" href="analytics.html">
99
+ <i class="mdi mdi-chart-line"></i>
100
+ <span class="nav-text">Analytics Dashboard</span>
101
+ </a>
102
+ </li>
103
+
104
+
105
+
106
+
107
+
108
+ <li class="section-title">
109
+ Apps
110
+ </li>
111
+
112
+
113
+
114
+
115
+
116
+ <li
117
+ >
118
+ <a class="sidenav-item-link" href="chat.html">
119
+ <i class="mdi mdi-wechat"></i>
120
+ <span class="nav-text">Chat</span>
121
+ </a>
122
+ </li>
123
+
124
+
125
+
126
+
127
+
128
+ <li
129
+ >
130
+ <a class="sidenav-item-link" href="contacts.html">
131
+ <i class="mdi mdi-phone"></i>
132
+ <span class="nav-text">Contacts</span>
133
+ </a>
134
+ </li>
135
+
136
+
137
+
138
+
139
+
140
+ <li
141
+ >
142
+ <a class="sidenav-item-link" href="team.html">
143
+ <i class="mdi mdi-account-group"></i>
144
+ <span class="nav-text">Team</span>
145
+ </a>
146
+ </li>
147
+
148
+
149
+
150
+
151
+
152
+ <li
153
+ >
154
+ <a class="sidenav-item-link" href="calendar.html">
155
+ <i class="mdi mdi-calendar-check"></i>
156
+ <span class="nav-text">Calendar</span>
157
+ </a>
158
+ </li>
159
+
160
+
161
+
162
+
163
+
164
+ <li class="has-sub" >
165
+ <a class="sidenav-item-link" href="javascript:void(0)" data-toggle="collapse" data-target="#email"
166
+ aria-expanded="false" aria-controls="email">
167
+ <i class="mdi mdi-email"></i>
168
+ <span class="nav-text">email</span> <b class="caret"></b>
169
+ </a>
170
+ <ul class="collapse" id="email"
171
+ data-parent="#sidebar-menu">
172
+ <div class="sub-menu">
173
+
174
+
175
+
176
+ <li >
177
+ <a class="sidenav-item-link" href="email-inbox.html">
178
+ <span class="nav-text">Email Inbox</span>
179
+
180
+ </a>
181
+ </li>
182
+
183
+
184
+
185
+
186
+
187
+
188
+ <li >
189
+ <a class="sidenav-item-link" href="email-details.html">
190
+ <span class="nav-text">Email Details</span>
191
+
192
+ </a>
193
+ </li>
194
+
195
+
196
+
197
+
198
+
199
+
200
+ <li >
201
+ <a class="sidenav-item-link" href="email-compose.html">
202
+ <span class="nav-text">Email Compose</span>
203
+
204
+ </a>
205
+ </li>
206
+
207
+
208
+
209
+
210
+ </div>
211
+ </ul>
212
+ </li>
213
+
214
+
215
+
216
+
217
+
218
+ <li class="section-title">
219
+ UI Elements
220
+ </li>
221
+
222
+
223
+
224
+
225
+
226
+ <li class="has-sub active expand" >
227
+ <a class="sidenav-item-link" href="javascript:void(0)" data-toggle="collapse" data-target="#ui-elements"
228
+ aria-expanded="false" aria-controls="ui-elements">
229
+ <i class="mdi mdi-folder-outline"></i>
230
+ <span class="nav-text">UI Components</span> <b class="caret"></b>
231
+ </a>
232
+ <ul class="collapse show" id="ui-elements"
233
+ data-parent="#sidebar-menu">
234
+ <div class="sub-menu">
235
+
236
+
237
+
238
+ <li >
239
+ <a class="sidenav-item-link" href="alert.html">
240
+ <span class="nav-text">Alert</span>
241
+
242
+ </a>
243
+ </li>
244
+
245
+
246
+
247
+
248
+
249
+
250
+ <li >
251
+ <a class="sidenav-item-link" href="badge.html">
252
+ <span class="nav-text">Badge</span>
253
+
254
+ </a>
255
+ </li>
256
+
257
+
258
+
259
+
260
+
261
+
262
+ <li >
263
+ <a class="sidenav-item-link" href="breadcrumb.html">
264
+ <span class="nav-text">Breadcrumb</span>
265
+
266
+ </a>
267
+ </li>
268
+
269
+
270
+
271
+
272
+
273
+ <li class="has-sub" >
274
+ <a class="sidenav-item-link" href="javascript:void(0)" data-toggle="collapse" data-target="#buttons"
275
+ aria-expanded="false" aria-controls="buttons">
276
+ <span class="nav-text">Buttons</span> <b class="caret"></b>
277
+ </a>
278
+ <ul class="collapse" id="buttons">
279
+ <div class="sub-menu">
280
+
281
+ <li >
282
+ <a href="button-default.html">Button Default</a>
283
+ </li>
284
+
285
+ <li >
286
+ <a href="button-dropdown.html">Button Dropdown</a>
287
+ </li>
288
+
289
+ <li >
290
+ <a href="button-group.html">Button Group</a>
291
+ </li>
292
+
293
+ <li >
294
+ <a href="button-social.html">Button Social</a>
295
+ </li>
296
+
297
+ <li >
298
+ <a href="button-loading.html">Button Loading</a>
299
+ </li>
300
+
301
+ </div>
302
+ </ul>
303
+ </li>
304
+
305
+
306
+
307
+
308
+
309
+ <li >
310
+ <a class="sidenav-item-link" href="card.html">
311
+ <span class="nav-text">Card</span>
312
+
313
+ </a>
314
+ </li>
315
+
316
+
317
+
318
+
319
+
320
+
321
+ <li >
322
+ <a class="sidenav-item-link" href="carousel.html">
323
+ <span class="nav-text">Carousel</span>
324
+
325
+ </a>
326
+ </li>
327
+
328
+
329
+
330
+
331
+
332
+
333
+ <li >
334
+ <a class="sidenav-item-link" href="collapse.html">
335
+ <span class="nav-text">Collapse</span>
336
+
337
+ </a>
338
+ </li>
339
+
340
+
341
+
342
+
343
+
344
+
345
+ <li >
346
+ <a class="sidenav-item-link" href="editor.html">
347
+ <span class="nav-text">Editor</span>
348
+
349
+ </a>
350
+ </li>
351
+
352
+
353
+
354
+
355
+
356
+
357
+ <li >
358
+ <a class="sidenav-item-link" href="list-group.html">
359
+ <span class="nav-text">List Group</span>
360
+
361
+ </a>
362
+ </li>
363
+
364
+
365
+
366
+
367
+
368
+
369
+ <li >
370
+ <a class="sidenav-item-link" href="modal.html">
371
+ <span class="nav-text">Modal</span>
372
+
373
+ </a>
374
+ </li>
375
+
376
+
377
+
378
+
379
+
380
+
381
+ <li >
382
+ <a class="sidenav-item-link" href="pagination.html">
383
+ <span class="nav-text">Pagination</span>
384
+
385
+ </a>
386
+ </li>
387
+
388
+
389
+
390
+
391
+
392
+
393
+ <li >
394
+ <a class="sidenav-item-link" href="popover-tooltip.html">
395
+ <span class="nav-text">Popover & Tooltip</span>
396
+
397
+ </a>
398
+ </li>
399
+
400
+
401
+
402
+
403
+
404
+
405
+ <li >
406
+ <a class="sidenav-item-link" href="progress-bar.html">
407
+ <span class="nav-text">Progress Bar</span>
408
+
409
+ </a>
410
+ </li>
411
+
412
+
413
+
414
+
415
+
416
+
417
+ <li >
418
+ <a class="sidenav-item-link" href="spinner.html">
419
+ <span class="nav-text">Spinner</span>
420
+
421
+ </a>
422
+ </li>
423
+
424
+
425
+
426
+
427
+
428
+
429
+ <li >
430
+ <a class="sidenav-item-link" href="switches.html">
431
+ <span class="nav-text">Switches</span>
432
+
433
+ </a>
434
+ </li>
435
+
436
+
437
+
438
+
439
+
440
+ <li class="has-sub" >
441
+ <a class="sidenav-item-link" href="javascript:void(0)" data-toggle="collapse" data-target="#tables"
442
+ aria-expanded="false" aria-controls="tables">
443
+ <span class="nav-text">Tables</span> <b class="caret"></b>
444
+ </a>
445
+ <ul class="collapse" id="tables">
446
+ <div class="sub-menu">
447
+
448
+ <li >
449
+ <a href="bootstarp-tables.html">Bootstrap Tables</a>
450
+ </li>
451
+
452
+ <li >
453
+ <a href="data-tables.html">Data Tables</a>
454
+ </li>
455
+
456
+ </div>
457
+ </ul>
458
+ </li>
459
+
460
+
461
+
462
+
463
+
464
+ <li >
465
+ <a class="sidenav-item-link" href="tab.html">
466
+ <span class="nav-text">Tab</span>
467
+
468
+ </a>
469
+ </li>
470
+
471
+
472
+
473
+
474
+
475
+
476
+ <li >
477
+ <a class="sidenav-item-link" href="toaster.html">
478
+ <span class="nav-text">Toaster</span>
479
+
480
+ </a>
481
+ </li>
482
+
483
+
484
+
485
+
486
+
487
+ <li class="has-sub" >
488
+ <a class="sidenav-item-link" href="javascript:void(0)" data-toggle="collapse" data-target="#icons"
489
+ aria-expanded="false" aria-controls="icons">
490
+ <span class="nav-text">Icons</span> <b class="caret"></b>
491
+ </a>
492
+ <ul class="collapse" id="icons">
493
+ <div class="sub-menu">
494
+
495
+ <li >
496
+ <a href="material-icons.html">Material Icon</a>
497
+ </li>
498
+
499
+ <li >
500
+ <a href="flag-icons.html">Flag Icon</a>
501
+ </li>
502
+
503
+ </div>
504
+ </ul>
505
+ </li>
506
+
507
+
508
+
509
+
510
+ <li class="has-sub active expand" >
511
+ <a class="sidenav-item-link" href="javascript:void(0)" data-toggle="collapse" data-target="#forms"
512
+ aria-expanded="false" aria-controls="forms">
513
+ <span class="nav-text">Forms</span> <b class="caret"></b>
514
+ </a>
515
+ <ul class="collapse show" id="forms">
516
+ <div class="sub-menu">
517
+
518
+ <li >
519
+ <a href="basic-input.html">Basic Input</a>
520
+ </li>
521
+
522
+ <li >
523
+ <a href="input-group.html">Input Group</a>
524
+ </li>
525
+
526
+ <li >
527
+ <a href="checkbox-radio.html">Checkbox & Radio</a>
528
+ </li>
529
+
530
+ <li class="active" >
531
+ <a href="form-validation.html">Form Validation</a>
532
+ </li>
533
+
534
+ <li >
535
+ <a href="form-advance.html">Form Advance</a>
536
+ </li>
537
+
538
+ </div>
539
+ </ul>
540
+ </li>
541
+
542
+
543
+
544
+
545
+ <li class="has-sub" >
546
+ <a class="sidenav-item-link" href="javascript:void(0)" data-toggle="collapse" data-target="#maps"
547
+ aria-expanded="false" aria-controls="maps">
548
+ <span class="nav-text">Maps</span> <b class="caret"></b>
549
+ </a>
550
+ <ul class="collapse" id="maps">
551
+ <div class="sub-menu">
552
+
553
+ <li >
554
+ <a href="google-maps.html">Google Map</a>
555
+ </li>
556
+
557
+ <li >
558
+ <a href="vector-maps.html">Vector Map</a>
559
+ </li>
560
+
561
+ </div>
562
+ </ul>
563
+ </li>
564
+
565
+
566
+
567
+
568
+ <li class="has-sub" >
569
+ <a class="sidenav-item-link" href="javascript:void(0)" data-toggle="collapse" data-target="#widgets"
570
+ aria-expanded="false" aria-controls="widgets">
571
+ <span class="nav-text">Widgets</span> <b class="caret"></b>
572
+ </a>
573
+ <ul class="collapse" id="widgets">
574
+ <div class="sub-menu">
575
+
576
+ <li >
577
+ <a href="widgets-general.html">General Widget</a>
578
+ </li>
579
+
580
+ <li >
581
+ <a href="widgets-chart.html">Chart Widget</a>
582
+ </li>
583
+
584
+ </div>
585
+ </ul>
586
+ </li>
587
+
588
+
589
+
590
+ </div>
591
+ </ul>
592
+ </li>
593
+
594
+
595
+
596
+
597
+
598
+ <li class="has-sub" >
599
+ <a class="sidenav-item-link" href="javascript:void(0)" data-toggle="collapse" data-target="#charts"
600
+ aria-expanded="false" aria-controls="charts">
601
+ <i class="mdi mdi-chart-pie"></i>
602
+ <span class="nav-text">Charts</span> <b class="caret"></b>
603
+ </a>
604
+ <ul class="collapse" id="charts"
605
+ data-parent="#sidebar-menu">
606
+ <div class="sub-menu">
607
+
608
+
609
+
610
+ <li >
611
+ <a class="sidenav-item-link" href="apex-charts.html">
612
+ <span class="nav-text">Apex Charts</span>
613
+
614
+ </a>
615
+ </li>
616
+
617
+
618
+
619
+
620
+ </div>
621
+ </ul>
622
+ </li>
623
+
624
+
625
+
626
+
627
+
628
+ <li class="section-title">
629
+ Pages
630
+ </li>
631
+
632
+
633
+
634
+
635
+
636
+ <li class="has-sub" >
637
+ <a class="sidenav-item-link" href="javascript:void(0)" data-toggle="collapse" data-target="#users"
638
+ aria-expanded="false" aria-controls="users">
639
+ <i class="mdi mdi-image-filter-none"></i>
640
+ <span class="nav-text">User</span> <b class="caret"></b>
641
+ </a>
642
+ <ul class="collapse" id="users"
643
+ data-parent="#sidebar-menu">
644
+ <div class="sub-menu">
645
+
646
+
647
+
648
+ <li >
649
+ <a class="sidenav-item-link" href="user-profile.html">
650
+ <span class="nav-text">User Profile</span>
651
+
652
+ </a>
653
+ </li>
654
+
655
+
656
+
657
+
658
+
659
+
660
+ <li >
661
+ <a class="sidenav-item-link" href="user-activities.html">
662
+ <span class="nav-text">User Activities</span>
663
+
664
+ </a>
665
+ </li>
666
+
667
+
668
+
669
+
670
+
671
+
672
+ <li >
673
+ <a class="sidenav-item-link" href="user-profile-settings.html">
674
+ <span class="nav-text">User Profile Settings</span>
675
+
676
+ </a>
677
+ </li>
678
+
679
+
680
+
681
+
682
+
683
+
684
+ <li >
685
+ <a class="sidenav-item-link" href="user-account-settings.html">
686
+ <span class="nav-text">User Account Settings</span>
687
+
688
+ </a>
689
+ </li>
690
+
691
+
692
+
693
+
694
+
695
+
696
+ <li >
697
+ <a class="sidenav-item-link" href="user-planing-settings.html">
698
+ <span class="nav-text">User Planing Settings</span>
699
+
700
+ </a>
701
+ </li>
702
+
703
+
704
+
705
+
706
+
707
+
708
+ <li >
709
+ <a class="sidenav-item-link" href="user-billing.html">
710
+ <span class="nav-text">User billing</span>
711
+
712
+ </a>
713
+ </li>
714
+
715
+
716
+
717
+
718
+
719
+
720
+ <li >
721
+ <a class="sidenav-item-link" href="user-notify-settings.html">
722
+ <span class="nav-text">User Notify Settings</span>
723
+
724
+ </a>
725
+ </li>
726
+
727
+
728
+
729
+
730
+ </div>
731
+ </ul>
732
+ </li>
733
+
734
+
735
+
736
+
737
+
738
+ <li class="has-sub" >
739
+ <a class="sidenav-item-link" href="javascript:void(0)" data-toggle="collapse" data-target="#authentication"
740
+ aria-expanded="false" aria-controls="authentication">
741
+ <i class="mdi mdi-account"></i>
742
+ <span class="nav-text">Authentication</span> <b class="caret"></b>
743
+ </a>
744
+ <ul class="collapse" id="authentication"
745
+ data-parent="#sidebar-menu">
746
+ <div class="sub-menu">
747
+
748
+
749
+
750
+ <li >
751
+ <a class="sidenav-item-link" href="sign-in.html">
752
+ <span class="nav-text">Sign In</span>
753
+
754
+ </a>
755
+ </li>
756
+
757
+
758
+
759
+
760
+
761
+
762
+ <li >
763
+ <a class="sidenav-item-link" href="sign-up.html">
764
+ <span class="nav-text">Sign Up</span>
765
+
766
+ </a>
767
+ </li>
768
+
769
+
770
+
771
+
772
+
773
+
774
+ <li >
775
+ <a class="sidenav-item-link" href="reset-password.html">
776
+ <span class="nav-text">Reset Password</span>
777
+
778
+ </a>
779
+ </li>
780
+
781
+
782
+
783
+
784
+ </div>
785
+ </ul>
786
+ </li>
787
+
788
+
789
+
790
+
791
+
792
+ <li class="has-sub" >
793
+ <a class="sidenav-item-link" href="javascript:void(0)" data-toggle="collapse" data-target="#other-page"
794
+ aria-expanded="false" aria-controls="other-page">
795
+ <i class="mdi mdi-file-multiple"></i>
796
+ <span class="nav-text">Other pages</span> <b class="caret"></b>
797
+ </a>
798
+ <ul class="collapse" id="other-page"
799
+ data-parent="#sidebar-menu">
800
+ <div class="sub-menu">
801
+
802
+
803
+
804
+ <li >
805
+ <a class="sidenav-item-link" href="invoice.html">
806
+ <span class="nav-text">Invoice</span>
807
+
808
+ </a>
809
+ </li>
810
+
811
+
812
+
813
+
814
+
815
+
816
+ <li >
817
+ <a class="sidenav-item-link" href="404.html">
818
+ <span class="nav-text">404 page</span>
819
+
820
+ </a>
821
+ </li>
822
+
823
+
824
+
825
+
826
+
827
+
828
+ <li >
829
+ <a class="sidenav-item-link" href="page-comingsoon.html">
830
+ <span class="nav-text">Coming Soon</span>
831
+
832
+ </a>
833
+ </li>
834
+
835
+
836
+
837
+
838
+
839
+
840
+ <li >
841
+ <a class="sidenav-item-link" href="page-maintenance.html">
842
+ <span class="nav-text">Maintenance</span>
843
+
844
+ </a>
845
+ </li>
846
+
847
+
848
+
849
+
850
+ </div>
851
+ </ul>
852
+ </li>
853
+
854
+
855
+
856
+
857
+
858
+ <li class="section-title">
859
+ Documentation
860
+ </li>
861
+
862
+
863
+
864
+
865
+
866
+ <li
867
+ >
868
+ <a class="sidenav-item-link" href="getting-started.html">
869
+ <i class="mdi mdi-airplane"></i>
870
+ <span class="nav-text">Getting Started</span>
871
+ </a>
872
+ </li>
873
+
874
+
875
+
876
+
877
+
878
+ <li class="has-sub" >
879
+ <a class="sidenav-item-link" href="javascript:void(0)" data-toggle="collapse" data-target="#customization"
880
+ aria-expanded="false" aria-controls="customization">
881
+ <i class="mdi mdi-square-edit-outline"></i>
882
+ <span class="nav-text">Customization</span> <b class="caret"></b>
883
+ </a>
884
+ <ul class="collapse" id="customization"
885
+ data-parent="#sidebar-menu">
886
+ <div class="sub-menu">
887
+
888
+
889
+
890
+ <li >
891
+ <a class="sidenav-item-link" href="navbar-customization.html">
892
+ <span class="nav-text">Navbar</span>
893
+
894
+ </a>
895
+ </li>
896
+
897
+
898
+
899
+
900
+
901
+
902
+ <li >
903
+ <a class="sidenav-item-link" href="sidebar-customization.html">
904
+ <span class="nav-text">Sidebar</span>
905
+
906
+ </a>
907
+ </li>
908
+
909
+
910
+
911
+
912
+
913
+
914
+ <li >
915
+ <a class="sidenav-item-link" href="styling.html">
916
+ <span class="nav-text">Styling</span>
917
+
918
+ </a>
919
+ </li>
920
+
921
+
922
+
923
+
924
+ </div>
925
+ </ul>
926
+ </li>
927
+
928
+
929
+
930
+ </ul>
931
+
932
+ </div>
933
+
934
+ <div class="sidebar-footer">
935
+ <div class="sidebar-footer-content">
936
+ <ul class="d-flex">
937
+ <li>
938
+ <a href="user-account-settings.html" data-toggle="tooltip" title="Profile settings"><i class="mdi mdi-settings"></i></a></li>
939
+ <li>
940
+ <a href="#" data-toggle="tooltip" title="No chat messages"><i class="mdi mdi-chat-processing"></i></a>
941
+ </li>
942
+ </ul>
943
+ </div>
944
+ </div>
945
+ </div>
946
+ </aside>
947
+
948
+
949
+
950
+ <!-- ====================================
951
+ ——— PAGE WRAPPER
952
+ ===================================== -->
953
+ <div class="page-wrapper">
954
+
955
+ <!-- Header -->
956
+ <header class="main-header" id="header">
957
+ <nav class="navbar navbar-expand-lg navbar-light" id="navbar">
958
+ <!-- Sidebar toggle button -->
959
+ <button id="sidebar-toggler" class="sidebar-toggle">
960
+ <span class="sr-only">Toggle navigation</span>
961
+ </button>
962
+
963
+ <span class="page-title">form validation</span>
964
+
965
+ <div class="navbar-right ">
966
+
967
+ <!-- search form -->
968
+ <div class="search-form">
969
+ <form action="index.html" method="get">
970
+ <div class="input-group input-group-sm" id="input-group-search">
971
+ <input type="text" autocomplete="off" name="query" id="search-input" class="form-control" placeholder="Search..." />
972
+ <div class="input-group-append">
973
+ <button class="btn" type="button">/</button>
974
+ </div>
975
+ </div>
976
+ </form>
977
+ <ul class="dropdown-menu dropdown-menu-search">
978
+
979
+ <li class="nav-item">
980
+ <a class="nav-link" href="index.html">Morbi leo risus</a>
981
+ </li>
982
+ <li class="nav-item">
983
+ <a class="nav-link" href="index.html">Dapibus ac facilisis in</a>
984
+ </li>
985
+ <li class="nav-item">
986
+ <a class="nav-link" href="index.html">Porta ac consectetur ac</a>
987
+ </li>
988
+ <li class="nav-item">
989
+ <a class="nav-link" href="index.html">Vestibulum at eros</a>
990
+ </li>
991
+
992
+ </ul>
993
+
994
+ </div>
995
+
996
+ <ul class="nav navbar-nav">
997
+ <!-- Offcanvas -->
998
+ <li class="custom-dropdown">
999
+ <a class="offcanvas-toggler active custom-dropdown-toggler" data-offcanvas="contact-off" href="javascript:" >
1000
+ <i class="mdi mdi-contacts icon"></i>
1001
+ </a>
1002
+ </li>
1003
+ <li class="custom-dropdown">
1004
+ <button class="notify-toggler custom-dropdown-toggler">
1005
+ <i class="mdi mdi-bell-outline icon"></i>
1006
+ <span class="badge badge-xs rounded-circle">21</span>
1007
+ </button>
1008
+ <div class="dropdown-notify">
1009
+
1010
+ <header>
1011
+ <div class="nav nav-underline" id="nav-tab" role="tablist">
1012
+ <a class="nav-item nav-link active" id="all-tabs" data-toggle="tab" href="#all" role="tab" aria-controls="nav-home"
1013
+ aria-selected="true">All (5)</a>
1014
+ <a class="nav-item nav-link" id="message-tab" data-toggle="tab" href="#message" role="tab" aria-controls="nav-profile"
1015
+ aria-selected="false">Msgs (4)</a>
1016
+ <a class="nav-item nav-link" id="other-tab" data-toggle="tab" href="#other" role="tab" aria-controls="nav-contact"
1017
+ aria-selected="false">Others (3)</a>
1018
+ </div>
1019
+ </header>
1020
+
1021
+ <div class="" data-simplebar style="height: 325px;">
1022
+ <div class="tab-content" id="myTabContent">
1023
+
1024
+ <div class="tab-pane fade show active" id="all" role="tabpanel" aria-labelledby="all-tabs">
1025
+
1026
+ <div class="media media-sm bg-warning-10 p-4 mb-0">
1027
+ <div class="media-sm-wrapper">
1028
+ <a href="user-profile.html">
1029
+ <img src="images/user/user-sm-02.jpg" alt="User Image">
1030
+ </a>
1031
+ </div>
1032
+ <div class="media-body">
1033
+ <a href="user-profile.html">
1034
+ <span class="title mb-0">John Doe</span>
1035
+ <span class="discribe">Extremity sweetness difficult behaviour he of. On disposal of as landlord horrible. Afraid at highly months do things on at.</span>
1036
+ <span class="time">
1037
+ <time>Just now</time>...
1038
+ </span>
1039
+ </a>
1040
+ </div>
1041
+ </div>
1042
+
1043
+ <div class="media media-sm p-4 bg-light mb-0">
1044
+ <div class="media-sm-wrapper bg-primary">
1045
+ <a href="user-profile.html">
1046
+ <i class="mdi mdi-calendar-check-outline"></i>
1047
+ </a>
1048
+ </div>
1049
+ <div class="media-body">
1050
+ <a href="user-profile.html">
1051
+ <span class="title mb-0">New event added</span>
1052
+ <span class="discribe">1/3/2014 (1pm - 2pm)</span>
1053
+ <span class="time">
1054
+ <time>10 min ago...</time>...
1055
+ </span>
1056
+ </a>
1057
+ </div>
1058
+ </div>
1059
+
1060
+ <div class="media media-sm p-4 mb-0">
1061
+ <div class="media-sm-wrapper">
1062
+ <a href="user-profile.html">
1063
+ <img src="images/user/user-sm-03.jpg" alt="User Image">
1064
+ </a>
1065
+ </div>
1066
+ <div class="media-body">
1067
+ <a href="user-profile.html">
1068
+ <span class="title mb-0">Sagge Hudson</span>
1069
+ <span class="discribe">On disposal of as landlord Afraid at highly months do things on at.</span>
1070
+ <span class="time">
1071
+ <time>1 hrs ago</time>...
1072
+ </span>
1073
+ </a>
1074
+ </div>
1075
+ </div>
1076
+
1077
+ <div class="media media-sm p-4 mb-0">
1078
+ <div class="media-sm-wrapper bg-info-dark">
1079
+ <a href="user-profile.html">
1080
+ <i class="mdi mdi-account-multiple-check"></i>
1081
+ </a>
1082
+ </div>
1083
+ <div class="media-body">
1084
+ <a href="user-profile.html">
1085
+ <span class="title mb-0">Add request</span>
1086
+ <span class="discribe">Add Dany Jones as your contact.</span>
1087
+ <div class="buttons">
1088
+ <a href="#" class="btn btn-sm btn-success shadow-none text-white">accept</a>
1089
+ <a href="#" class="btn btn-sm shadow-none">delete</a>
1090
+ </div>
1091
+ <span class="time">
1092
+ <time>6 hrs ago</time>...
1093
+ </span>
1094
+ </a>
1095
+ </div>
1096
+ </div>
1097
+
1098
+ <div class="media media-sm p-4 mb-0">
1099
+ <div class="media-sm-wrapper bg-info">
1100
+ <a href="user-profile.html">
1101
+ <i class="mdi mdi-playlist-check"></i>
1102
+ </a>
1103
+ </div>
1104
+ <div class="media-body">
1105
+ <a href="user-profile.html">
1106
+ <span class="title mb-0">Task complete</span>
1107
+ <span class="discribe">Afraid at highly months do things on at.</span>
1108
+ <span class="time">
1109
+ <time>1 hrs ago</time>...
1110
+ </span>
1111
+ </a>
1112
+ </div>
1113
+ </div>
1114
+
1115
+ </div>
1116
+
1117
+ <div class="tab-pane fade" id="message" role="tabpanel" aria-labelledby="message-tab">
1118
+
1119
+ <div class="media media-sm p-4 mb-0">
1120
+ <div class="media-sm-wrapper">
1121
+ <a href="user-profile.html">
1122
+ <img src="images/user/user-sm-01.jpg" alt="User Image">
1123
+ </a>
1124
+ </div>
1125
+ <div class="media-body">
1126
+ <a href="user-profile.html">
1127
+ <span class="title mb-0">Selena Wagner</span>
1128
+ <span class="discribe">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</span>
1129
+ <span class="time">
1130
+ <time>15 min ago</time>...
1131
+ </span>
1132
+ </a>
1133
+ </div>
1134
+ </div>
1135
+
1136
+ <div class="media media-sm p-4 mb-0">
1137
+ <div class="media-sm-wrapper">
1138
+ <a href="user-profile.html">
1139
+ <img src="images/user/user-sm-03.jpg" alt="User Image">
1140
+ </a>
1141
+ </div>
1142
+ <div class="media-body">
1143
+ <a href="user-profile.html">
1144
+ <span class="title mb-0">Sagge Hudson</span>
1145
+ <span class="discribe">On disposal of as landlord Afraid at highly months do things on at.</span>
1146
+ <span class="time">
1147
+ <time>1 hrs ago</time>...
1148
+ </span>
1149
+ </a>
1150
+ </div>
1151
+ </div>
1152
+
1153
+ <div class="media media-sm bg-warning-10 p-4 mb-0">
1154
+ <div class="media-sm-wrapper">
1155
+ <a href="user-profile.html">
1156
+ <img src="images/user/user-sm-02.jpg" alt="User Image">
1157
+ </a>
1158
+ </div>
1159
+ <div class="media-body">
1160
+ <a href="user-profile.html">
1161
+ <span class="title mb-0">John Doe</span>
1162
+ <span class="discribe">Extremity sweetness difficult behaviour he of. On disposal of as landlord horrible. Afraid
1163
+ at highly months do things on at.</span>
1164
+ <span class="time">
1165
+ <time>Just now</time>...
1166
+ </span>
1167
+ </a>
1168
+ </div>
1169
+ </div>
1170
+
1171
+ <div class="media media-sm p-4 mb-0">
1172
+ <div class="media-sm-wrapper">
1173
+ <a href="user-profile.html">
1174
+ <img src="images/user/user-sm-04.jpg" alt="User Image">
1175
+ </a>
1176
+ </div>
1177
+ <div class="media-body">
1178
+ <a href="user-profile.html">
1179
+ <span class="title mb-0">Albrecht Straub</span>
1180
+ <span class="discribe"> Beatae quia natus assumenda laboriosam, nisi perferendis aliquid consectetur expedita non tenetur.</span>
1181
+ <span class="time">
1182
+ <time>Just now</time>...
1183
+ </span>
1184
+ </a>
1185
+ </div>
1186
+ </div>
1187
+
1188
+ </div>
1189
+ <div class="tab-pane fade" id="other" role="tabpanel" aria-labelledby="contact-tab">
1190
+
1191
+ <div class="media media-sm p-4 bg-light mb-0">
1192
+ <div class="media-sm-wrapper bg-primary">
1193
+ <a href="user-profile.html">
1194
+ <i class="mdi mdi-calendar-check-outline"></i>
1195
+ </a>
1196
+ </div>
1197
+ <div class="media-body">
1198
+ <a href="user-profile.html">
1199
+ <span class="title mb-0">New event added</span>
1200
+ <span class="discribe">1/3/2014 (1pm - 2pm)</span>
1201
+ <span class="time">
1202
+ <time>10 min ago...</time>...
1203
+ </span>
1204
+ </a>
1205
+ </div>
1206
+ </div>
1207
+
1208
+ <div class="media media-sm p-4 mb-0">
1209
+ <div class="media-sm-wrapper bg-info-dark">
1210
+ <a href="user-profile.html">
1211
+ <i class="mdi mdi-account-multiple-check"></i>
1212
+ </a>
1213
+ </div>
1214
+ <div class="media-body">
1215
+ <a href="user-profile.html">
1216
+ <span class="title mb-0">Add request</span>
1217
+ <span class="discribe">Add Dany Jones as your contact.</span>
1218
+ <div class="buttons">
1219
+ <a href="#" class="btn btn-sm btn-success shadow-none text-white">accept</a>
1220
+ <a href="#" class="btn btn-sm shadow-none">delete</a>
1221
+ </div>
1222
+ <span class="time">
1223
+ <time>6 hrs ago</time>...
1224
+ </span>
1225
+ </a>
1226
+ </div>
1227
+ </div>
1228
+
1229
+ <div class="media media-sm p-4 mb-0">
1230
+ <div class="media-sm-wrapper bg-info">
1231
+ <a href="user-profile.html">
1232
+ <i class="mdi mdi-playlist-check"></i>
1233
+ </a>
1234
+ </div>
1235
+ <div class="media-body">
1236
+ <a href="user-profile.html">
1237
+ <span class="title mb-0">Task complete</span>
1238
+ <span class="discribe">Afraid at highly months do things on at.</span>
1239
+ <span class="time">
1240
+ <time>1 hrs ago</time>...
1241
+ </span>
1242
+ </a>
1243
+ </div>
1244
+ </div>
1245
+
1246
+ </div>
1247
+ </div>
1248
+ </div>
1249
+
1250
+ <footer class="border-top dropdown-notify-footer">
1251
+ <div class="d-flex justify-content-between align-items-center py-2 px-4">
1252
+ <span>Last updated 3 min ago</span>
1253
+ <a id="refress-button" href="javascript:" class="btn mdi mdi-cached btn-refress"></a>
1254
+ </div>
1255
+ </footer>
1256
+ </div>
1257
+ </li>
1258
+ <!-- User Account -->
1259
+ <li class="dropdown user-menu">
1260
+ <button class="dropdown-toggle nav-link" data-toggle="dropdown">
1261
+ <img src="images/user/user-xs-01.jpg" class="user-image rounded-circle" alt="User Image" />
1262
+ <span class="d-none d-lg-inline-block">John Doe</span>
1263
+ </button>
1264
+ <ul class="dropdown-menu dropdown-menu-right">
1265
+ <li>
1266
+ <a class="dropdown-link-item" href="user-profile.html">
1267
+ <i class="mdi mdi-account-outline"></i>
1268
+ <span class="nav-text">My Profile</span>
1269
+ </a>
1270
+ </li>
1271
+ <li>
1272
+ <a class="dropdown-link-item" href="email-inbox.html">
1273
+ <i class="mdi mdi-email-outline"></i>
1274
+ <span class="nav-text">Message</span>
1275
+ <span class="badge badge-pill badge-primary">24</span>
1276
+ </a>
1277
+ </li>
1278
+ <li>
1279
+ <a class="dropdown-link-item" href="user-activities.html">
1280
+ <i class="mdi mdi-diamond-stone"></i>
1281
+ <span class="nav-text">Activitise</span></a>
1282
+ </li>
1283
+ <li>
1284
+ <a class="dropdown-link-item" href="user-account-settings.html">
1285
+ <i class="mdi mdi-settings"></i>
1286
+ <span class="nav-text">Account Setting</span>
1287
+ </a>
1288
+ </li>
1289
+
1290
+ <li class="dropdown-footer">
1291
+ <a class="dropdown-link-item" href="sign-in.html"> <i class="mdi mdi-logout"></i> Log Out </a>
1292
+ </li>
1293
+ </ul>
1294
+ </li>
1295
+ </ul>
1296
+ </div>
1297
+ </nav>
1298
+
1299
+
1300
+ </header>
1301
+
1302
+ <!-- ====================================
1303
+ ——— CONTENT WRAPPER
1304
+ ===================================== -->
1305
+ <div class="content-wrapper">
1306
+ <div class="content"><!-- For Components documentaion -->
1307
+ <div class="card card-default">
1308
+ <div class="px-6 py-4">
1309
+ <p>Mono provides a variety of <span class="text-secondary text-capitalize"> Bootstrap Forms Validation </span> components with a
1310
+ little customization that suits its design standards. For more information, please see the official <a class="font-weight-bold" href="https://getbootstrap.com/docs/4.3/components/forms/#validation" target="_blank"> Bootstrap documentation.</a></p>
1311
+ </div>
1312
+ </div>
1313
+
1314
+ <div class="row">
1315
+ <div class="col-xl-6">
1316
+ <!-- Basic Checkbox -->
1317
+ <div class="card card-default">
1318
+ <div class="card-header">
1319
+ <h2>Basic Checkbox</h2>
1320
+
1321
+ <a class="btn mdi mdi-code-tags" data-toggle="collapse" href="#collapse-from-validation" role="button"
1322
+ aria-expanded="false" aria-controls="collapse-from-validation"> </a>
1323
+
1324
+
1325
+ </div>
1326
+ <div class="card-body">
1327
+ <div class="collapse" id="collapse-from-validation">
1328
+ <pre class="language-html mb-4">
1329
+ <code >
1330
+ &lt;form>
1331
+ &lt;div class="form-row">
1332
+ &lt;div class="col-md-12 mb-3">
1333
+ &lt;label for="validationServer01">Input with success&lt;/label>
1334
+ &lt;input type="text" class="form-control border-success" id="validationServer01" placeholder="First name" required>
1335
+ &lt;div class="text-success small mt-1">
1336
+ Looks good!
1337
+ &lt;/div>
1338
+ &lt;/div>
1339
+ &lt;div class="col-md-12 mb-3">
1340
+ &lt;label for="validationServer02">Input with info&lt;/label>
1341
+ &lt;input type="text" class="form-control border-info" id="validationServer02" placeholder="Last name"
1342
+ value="Last Name" required>
1343
+ &lt;div class="text-info small mt-1">
1344
+ We'll never share your email with anyone else.
1345
+ &lt;/div>
1346
+ &lt;/div>
1347
+ &lt;div class="col-md-12 mb-3">
1348
+ &lt;label for="validationServer02">Input with warning&lt;/label>
1349
+ &lt;input type="text" class="form-control border-warning" id="validationServer02" placeholder="Last name"
1350
+ value="Last Name" required>
1351
+ &lt;div class="text-warning small mt-1">
1352
+ Shucks, check the formatting of that and try again.
1353
+ &lt;/div>
1354
+ &lt;/div>
1355
+ &lt;div class="col-md-12 mb-3">
1356
+ &lt;label for="validationServer02">Input with danger&lt;/label>
1357
+ &lt;input type="text" class="form-control border-danger" id="validationServer02" placeholder="Last name"
1358
+ value="Last Name" required>
1359
+ &lt;div class="text-daborder-danger small mt-1">
1360
+ Sorry, that username's taken. Try another?
1361
+ &lt;/div>
1362
+ &lt;/div>
1363
+ &lt;/div>
1364
+ &lt;button class="btn btn-primary btn-pill mr-2" type="submit">Submit&lt;/button>
1365
+ &lt;button class="btn btn-light btn-pill" type="submit">Cancel&lt;/button>
1366
+ &lt;/form>
1367
+ </code>
1368
+ </pre>
1369
+ </div>
1370
+
1371
+ <form>
1372
+ <div class="form-row">
1373
+ <div class="col-md-12 mb-3">
1374
+ <label for="validationServer01">Input with success</label>
1375
+ <input type="text" class="form-control border-success" id="validationServer01" placeholder="First name" required >
1376
+ <div class="text-success small mt-1">
1377
+ Looks good!
1378
+ </div>
1379
+ </div>
1380
+ <div class="col-md-12 mb-3">
1381
+ <label for="validationServer02">Input with info</label>
1382
+ <input type="text" class="form-control border-info" id="validationServer02" placeholder="Last name" value="Last Name"
1383
+ required>
1384
+ <div class="text-info small mt-1">
1385
+ We'll never share your email with anyone else.
1386
+ </div>
1387
+ </div>
1388
+ <div class="col-md-12 mb-3">
1389
+ <label for="validationServer02">Input with warning</label>
1390
+ <input type="text" class="form-control border-warning" id="validationServer02" placeholder="Last name" value="Last Name"
1391
+ required>
1392
+ <div class="text-warning small mt-1">
1393
+ Shucks, check the formatting of that and try again.
1394
+ </div>
1395
+ </div>
1396
+ <div class="col-md-12 mb-3">
1397
+ <label for="validationServer02">Input with danger</label>
1398
+ <input type="text" class="form-control border-danger" id="validationServer02" placeholder="Last name"
1399
+ value="Last Name" required>
1400
+ <div class="text-daborder-danger small mt-1">
1401
+ Sorry, that username's taken. Try another?
1402
+ </div>
1403
+ </div>
1404
+ </div>
1405
+ <button class="btn btn-primary btn-pill mr-2" type="submit">Submit</button>
1406
+ <button class="btn btn-light btn-pill" type="submit">Cancel</button>
1407
+ </form>
1408
+
1409
+ </div>
1410
+ </div>
1411
+
1412
+ <!-- Iconic Validation -->
1413
+ <div class="card card-default">
1414
+ <div class="card-header">
1415
+ <h2>Iconic Validation</h2>
1416
+
1417
+ <a class="btn mdi mdi-code-tags" data-toggle="collapse" href="#collapse-form-validation-iconic" role="button"
1418
+ aria-expanded="false" aria-controls="collapse-form-validation-iconic"> </a>
1419
+
1420
+
1421
+ </div>
1422
+ <div class="card-body">
1423
+ <div class="collapse" id="collapse-form-validation-iconic">
1424
+ <pre class="language-html mb-4">
1425
+ <code >
1426
+ &lt;form>
1427
+ &lt;div class="mb-5">
1428
+ &lt;label for="validationServer01">Left Addon&lt;/label>
1429
+ &lt;div class="input-group">
1430
+ &lt;div class="input-group-prepend">
1431
+ &lt;span class="input-group-text" id="basic-addon1">@&lt;/span>
1432
+ &lt;/div>
1433
+ &lt;input type="text" class="form-control" placeholder="Username" aria-label="Username"
1434
+ aria-describedby="basic-addon1">
1435
+ &lt;/div>
1436
+ &lt;div class="text-success small mt-1">
1437
+ Looks good!
1438
+ &lt;/div>
1439
+ &lt;/div>
1440
+
1441
+ &lt;div class="mb-5">
1442
+ &lt;label for="validationServer01">Right Addon&lt;/label>
1443
+ &lt;div class="input-group">
1444
+ &lt;input type="text" class="form-control" placeholder="Recipient's username" aria-label="Recipient's username"
1445
+ aria-describedby="basic-addon2">
1446
+ &lt;div class="input-group-append">
1447
+ &lt;span class="input-group-text" id="basic-addon2">@example.com&lt;/span>
1448
+ &lt;/div>
1449
+ &lt;/div>
1450
+ &lt;div class="text-warning small mt-1">
1451
+ Shucks, check the formatting of that and try again.
1452
+ &lt;/div>
1453
+ &lt;/div>
1454
+
1455
+ &lt;div class="mb-5">
1456
+ &lt;label for="validationServer01">Input with danger&lt;/label>
1457
+ &lt;div class="input-group">
1458
+ &lt;div class="input-group-prepend">
1459
+ &lt;span class="input-group-text">$&lt;/span>
1460
+ &lt;/div>
1461
+ &lt;input type="text" class="form-control" aria-label="Amount (to the nearest dollar)">
1462
+ &lt;div class="input-group-append">
1463
+ &lt;span class="input-group-text">.00&lt;/span>
1464
+ &lt;/div>
1465
+ &lt;/div>
1466
+ &lt;div class="text-danger small mt-1">
1467
+ Sorry, that username's taken. Try another?
1468
+ &lt;/div>
1469
+ &lt;/div>
1470
+
1471
+ &lt;button class="btn btn-primary btn-pill mr-2" type="submit">Submit&lt;/button>
1472
+ &lt;button class="btn btn-light btn-pill" type="submit">Cancel&lt;/button>
1473
+ &lt;/form>
1474
+ </code>
1475
+ </pre>
1476
+ </div>
1477
+
1478
+ <form>
1479
+ <div class="mb-5">
1480
+ <label for="validationServer01">Left Addon</label>
1481
+ <div class="input-group">
1482
+ <div class="input-group-prepend">
1483
+ <span class="input-group-text" id="basic-addon1">@</span>
1484
+ </div>
1485
+ <input type="text" class="form-control" placeholder="Username" aria-label="Username" aria-describedby="basic-addon1">
1486
+ </div>
1487
+ <div class="text-success small mt-1">
1488
+ Looks good!
1489
+ </div>
1490
+ </div>
1491
+
1492
+ <div class="mb-5">
1493
+ <label for="validationServer01">Right Addon</label>
1494
+ <div class="input-group">
1495
+ <input type="text" class="form-control" placeholder="Recipient's username" aria-label="Recipient's username"
1496
+ aria-describedby="basic-addon2">
1497
+ <div class="input-group-append">
1498
+ <span class="input-group-text" id="basic-addon2">@example.com</span>
1499
+ </div>
1500
+ </div>
1501
+ <div class="text-warning small mt-1">
1502
+ Shucks, check the formatting of that and try again.
1503
+ </div>
1504
+ </div>
1505
+
1506
+ <div class="mb-5">
1507
+ <label for="validationServer01">Input with danger</label>
1508
+ <div class="input-group">
1509
+ <div class="input-group-prepend">
1510
+ <span class="input-group-text">$</span>
1511
+ </div>
1512
+ <input type="text" class="form-control" aria-label="Amount (to the nearest dollar)">
1513
+ <div class="input-group-append">
1514
+ <span class="input-group-text">.00</span>
1515
+ </div>
1516
+ </div>
1517
+ <div class="text-danger small mt-1">
1518
+ Sorry, that username's taken. Try another?
1519
+ </div>
1520
+ </div>
1521
+
1522
+ <button class="btn btn-primary btn-pill mr-2" type="submit">Submit</button>
1523
+ <button class="btn btn-light btn-pill" type="submit">Cancel</button>
1524
+ </form>
1525
+
1526
+ </div>
1527
+ </div>
1528
+
1529
+ </div>
1530
+ <div class="col-xl-6">
1531
+ <!-- Horizontal Validation -->
1532
+ <div class="card card-default">
1533
+ <div class="card-header">
1534
+ <h2>Horizontal Validation</h2>
1535
+
1536
+ <a class="btn mdi mdi-code-tags" data-toggle="collapse" href="#collapse-horizontal-validation" role="button"
1537
+ aria-expanded="false" aria-controls="collapse-horizontal-validation"> </a>
1538
+
1539
+
1540
+ </div>
1541
+ <div class="card-body">
1542
+ <div class="collapse" id="collapse-horizontal-validation">
1543
+ <pre class="language-html mb-4">
1544
+ <code >
1545
+ &lt;form>
1546
+ &lt;div class="form-group row mb-6">
1547
+ &lt;label for="staticEmail" class="col-sm-4 col-form-label">Input with success&lt;/label>
1548
+ &lt;div class="col-sm-8">
1549
+ &lt;input type="text" class="form-control border-success" id="validationServer01" placeholder="First name" required>
1550
+ &lt;div class="text-success small mt-1">
1551
+ Looks good!
1552
+ &lt;/div>
1553
+ &lt;/div>
1554
+ &lt;/div>
1555
+
1556
+ &lt;div class="form-group row mb-6">
1557
+ &lt;label for="staticEmail" class="col-sm-4 col-form-label">Input with info&lt;/label>
1558
+ &lt;div class="col-sm-8">
1559
+ &lt;input type="text" class="form-control border-info" id="validationServer01" placeholder="First name" required>
1560
+ &lt;div class="text-info small mt-1">
1561
+ Looks good!
1562
+ &lt;/div>
1563
+ &lt;/div>
1564
+ &lt;/div>
1565
+
1566
+ &lt;div class="form-group row mb-6">
1567
+ &lt;label for="staticEmail" class="col-sm-4 col-form-label">Input with warning&lt;/label>
1568
+ &lt;div class="col-sm-8">
1569
+ &lt;input type="text" class="form-control border-warning" id="validationServer01" placeholder="First name" required>
1570
+ &lt;div class="text-warning small mt-1">
1571
+ Looks good!
1572
+ &lt;/div>
1573
+ &lt;/div>
1574
+ &lt;/div>
1575
+
1576
+ &lt;div class="form-group row mb-6">
1577
+ &lt;label for="staticEmail" class="col-sm-4 col-form-label">Input with danger&lt;/label>
1578
+ &lt;div class="col-sm-8">
1579
+ &lt;input type="text" class="form-control border-danger" id="validationServer01" placeholder="First name" required>
1580
+ &lt;div class="text-danger small mt-1">
1581
+ Looks good!
1582
+ &lt;/div>
1583
+ &lt;/div>
1584
+ &lt;/div>
1585
+
1586
+ &lt;button class="btn btn-primary btn-pill mr-2" type="submit">Submit&lt;/button>
1587
+ &lt;button class="btn btn-light btn-pill" type="submit">Cancel&lt;/button>
1588
+ &lt;/form>
1589
+ </code>
1590
+ </pre>
1591
+ </div>
1592
+
1593
+ <form>
1594
+ <div class="form-group row mb-6">
1595
+ <label for="staticEmail" class="col-sm-4 col-form-label">Input with success</label>
1596
+ <div class="col-sm-8">
1597
+ <input type="text" class="form-control border-success" id="validationServer01" placeholder="First name" required>
1598
+ <div class="text-success small mt-1">
1599
+ Looks good!
1600
+ </div>
1601
+ </div>
1602
+ </div>
1603
+
1604
+ <div class="form-group row mb-6">
1605
+ <label for="staticEmail" class="col-sm-4 col-form-label">Input with info</label>
1606
+ <div class="col-sm-8">
1607
+ <input type="text" class="form-control border-info" id="validationServer01" placeholder="First name" required>
1608
+ <div class="text-info small mt-1">
1609
+ Looks good!
1610
+ </div>
1611
+ </div>
1612
+ </div>
1613
+
1614
+ <div class="form-group row mb-6">
1615
+ <label for="staticEmail" class="col-sm-4 col-form-label">Input with warning</label>
1616
+ <div class="col-sm-8">
1617
+ <input type="text" class="form-control border-warning" id="validationServer01" placeholder="First name" required>
1618
+ <div class="text-warning small mt-1">
1619
+ Looks good!
1620
+ </div>
1621
+ </div>
1622
+ </div>
1623
+
1624
+ <div class="form-group row mb-6">
1625
+ <label for="staticEmail" class="col-sm-4 col-form-label">Input with danger</label>
1626
+ <div class="col-sm-8">
1627
+ <input type="text" class="form-control border-danger" id="validationServer01" placeholder="First name" required>
1628
+ <div class="text-danger small mt-1">
1629
+ Looks good!
1630
+ </div>
1631
+ </div>
1632
+ </div>
1633
+
1634
+ <button class="btn btn-primary btn-pill mr-2" type="submit">Submit</button>
1635
+ <button class="btn btn-light btn-pill" type="submit">Cancel</button>
1636
+ </form>
1637
+
1638
+ </div>
1639
+ </div>
1640
+
1641
+ <!-- Button Addons Validation -->
1642
+ <div class="card card-default">
1643
+ <div class="card-header">
1644
+ <h2>Button Addons Validation</h2>
1645
+
1646
+ <a class="btn mdi mdi-code-tags" data-toggle="collapse" href="#collapse-button-addons-validation" role="button"
1647
+ aria-expanded="false" aria-controls="collapse-button-addons-validation"> </a>
1648
+
1649
+
1650
+ </div>
1651
+ <div class="card-body">
1652
+ <div class="collapse" id="collapse-button-addons-validation">
1653
+ <pre class="language-html mb-4">
1654
+ <code >
1655
+ &lt;form>
1656
+ &lt;div class="mb-5">
1657
+ &lt;label for="validationServer01">Left Addon&lt;/label>
1658
+ &lt;div class="input-group">
1659
+ &lt;div class="input-group-prepend">
1660
+ &lt;button class="btn btn-primary" type="button">go&lt;/button>
1661
+ &lt;/div>
1662
+ &lt;input type="text" class="form-control" placeholder="Username" aria-label="Username"
1663
+ aria-describedby="basic-addon1">
1664
+ &lt;/div>
1665
+ &lt;div class="text-success small mt-1">
1666
+ Looks good!
1667
+ &lt;/div>
1668
+ &lt;/div>
1669
+
1670
+ &lt;div class="mb-5">
1671
+ &lt;label for="validationServer01">Right Addon&lt;/label>
1672
+ &lt;div class="input-group">
1673
+ &lt;input type="text" class="form-control" placeholder="settings" aria-label="Recipient's username"
1674
+ aria-describedby="basic-addon2" placeholder="Search for...">
1675
+ &lt;div class="input-group-prepend">
1676
+ &lt;button class="btn btn-primary" type="button">go&lt;/button>
1677
+ &lt;/div>
1678
+ &lt;/div>
1679
+
1680
+ &lt;div class="text-warning small mt-1">
1681
+ Shucks, check the formatting of that and try again.
1682
+ &lt;/div>
1683
+ &lt;/div>
1684
+
1685
+ &lt;div class="mb-5">
1686
+ &lt;label for="validationServer01">Input with danger&lt;/label>
1687
+ &lt;div class="input-group">
1688
+ &lt;div class="input-group-prepend">
1689
+ &lt;button class="btn btn-primary" type="button">go&lt;/button>
1690
+ &lt;/div>
1691
+ &lt;input type="text" class="form-control" aria-label="Amount (to the nearest dollar)">
1692
+ &lt;div class="input-group-append">
1693
+ &lt;button class="btn btn-danger" type="button">go&lt;/button>
1694
+ &lt;/div>
1695
+ &lt;/div>
1696
+ &lt;div class="text-danger small mt-1">
1697
+ Sorry, that username's taken. Try another?
1698
+ &lt;/div>
1699
+ &lt;/div>
1700
+
1701
+ &lt;button class="btn btn-primary btn-pill mr-2" type="submit">Submit&lt;/button>
1702
+ &lt;button class="btn btn-light btn-pill" type="submit">Cancel&lt;/button>
1703
+
1704
+ &lt;/form>
1705
+ </code>
1706
+ </pre>
1707
+ </div>
1708
+
1709
+ <form>
1710
+ <div class="mb-5">
1711
+ <label for="validationServer01">Left Addon</label>
1712
+ <div class="input-group">
1713
+ <div class="input-group-prepend">
1714
+ <button class="btn btn-primary" type="button">go</button>
1715
+ </div>
1716
+ <input type="text" class="form-control" placeholder="Username" aria-label="Username"
1717
+ aria-describedby="basic-addon1">
1718
+ </div>
1719
+ <div class="text-success small mt-1">
1720
+ Looks good!
1721
+ </div>
1722
+ </div>
1723
+
1724
+ <div class="mb-5">
1725
+ <label for="validationServer01">Right Addon</label>
1726
+ <div class="input-group">
1727
+ <input type="text" class="form-control" placeholder="settings" aria-label="Recipient's username"
1728
+ aria-describedby="basic-addon2" placeholder="Search for...">
1729
+ <div class="input-group-prepend">
1730
+ <button class="btn btn-primary" type="button">go</button>
1731
+ </div>
1732
+ </div>
1733
+
1734
+ <div class="text-warning small mt-1">
1735
+ Shucks, check the formatting of that and try again.
1736
+ </div>
1737
+ </div>
1738
+
1739
+ <div class="mb-5">
1740
+ <label for="validationServer01">Input with danger</label>
1741
+ <div class="input-group">
1742
+ <div class="input-group-prepend">
1743
+ <button class="btn btn-primary" type="button">go</button>
1744
+ </div>
1745
+ <input type="text" class="form-control" aria-label="Amount (to the nearest dollar)">
1746
+ <div class="input-group-append">
1747
+ <button class="btn btn-danger" type="button">go</button>
1748
+ </div>
1749
+ </div>
1750
+ <div class="text-danger small mt-1">
1751
+ Sorry, that username's taken. Try another?
1752
+ </div>
1753
+ </div>
1754
+
1755
+ <button class="btn btn-primary btn-pill mr-2" type="submit">Submit</button>
1756
+ <button class="btn btn-light btn-pill" type="submit">Cancel</button>
1757
+
1758
+ </form>
1759
+
1760
+ </div>
1761
+ </div>
1762
+
1763
+
1764
+ </div>
1765
+ </div>
1766
+
1767
+ </div>
1768
+
1769
+ </div>
1770
+
1771
+ <!-- Footer -->
1772
+ <footer class="footer mt-auto">
1773
+ <div class="copyright bg-white">
1774
+ <p>
1775
+ &copy; <span id="copy-year"></span> Copyright Mono Dashboard Bootstrap Template by <a class="text-primary" href="http://www.iamabdus.com/" target="_blank" >Abdus</a>.
1776
+ </p>
1777
+ </div>
1778
+ <script>
1779
+ var d = new Date();
1780
+ var year = d.getFullYear();
1781
+ document.getElementById("copy-year").innerHTML = year;
1782
+ </script>
1783
+ </footer>
1784
+
1785
+ </div>
1786
+ </div>
1787
+
1788
+ <!-- Card Offcanvas -->
1789
+ <div class="card card-offcanvas" id="contact-off" >
1790
+ <div class="card-header">
1791
+ <h2>Contacts</h2>
1792
+ <a href="#" class="btn btn-primary btn-pill px-4">Add New</a>
1793
+ </div>
1794
+ <div class="card-body">
1795
+
1796
+ <div class="mb-4">
1797
+ <input type="text" class="form-control form-control-lg form-control-secondary rounded-0" placeholder="Search contacts...">
1798
+ </div>
1799
+
1800
+ <div class="media media-sm">
1801
+ <div class="media-sm-wrapper">
1802
+ <a href="user-profile.html">
1803
+ <img src="images/user/user-sm-01.jpg" alt="User Image">
1804
+ <span class="active bg-primary"></span>
1805
+ </a>
1806
+ </div>
1807
+ <div class="media-body">
1808
+ <a href="user-profile.html">
1809
+ <span class="title">Selena Wagner</span>
1810
+ <span class="discribe">Designer</span>
1811
+ </a>
1812
+ </div>
1813
+ </div>
1814
+
1815
+ <div class="media media-sm">
1816
+ <div class="media-sm-wrapper">
1817
+ <a href="user-profile.html">
1818
+ <img src="images/user/user-sm-02.jpg" alt="User Image">
1819
+ <span class="active bg-primary"></span>
1820
+ </a>
1821
+ </div>
1822
+ <div class="media-body">
1823
+ <a href="user-profile.html">
1824
+ <span class="title">Walter Reuter</span>
1825
+ <span>Developer</span>
1826
+ </a>
1827
+ </div>
1828
+ </div>
1829
+
1830
+ <div class="media media-sm">
1831
+ <div class="media-sm-wrapper">
1832
+ <a href="user-profile.html">
1833
+ <img src="images/user/user-sm-03.jpg" alt="User Image">
1834
+ </a>
1835
+ </div>
1836
+ <div class="media-body">
1837
+ <a href="user-profile.html">
1838
+ <span class="title">Larissa Gebhardt</span>
1839
+ <span>Cyber Punk</span>
1840
+ </a>
1841
+ </div>
1842
+ </div>
1843
+
1844
+ <div class="media media-sm">
1845
+ <div class="media-sm-wrapper">
1846
+ <a href="user-profile.html">
1847
+ <img src="images/user/user-sm-04.jpg" alt="User Image">
1848
+ </a>
1849
+
1850
+ </div>
1851
+ <div class="media-body">
1852
+ <a href="user-profile.html">
1853
+ <span class="title">Albrecht Straub</span>
1854
+ <span>Photographer</span>
1855
+ </a>
1856
+ </div>
1857
+ </div>
1858
+
1859
+ <div class="media media-sm">
1860
+ <div class="media-sm-wrapper">
1861
+ <a href="user-profile.html">
1862
+ <img src="images/user/user-sm-05.jpg" alt="User Image">
1863
+ <span class="active bg-danger"></span>
1864
+ </a>
1865
+ </div>
1866
+ <div class="media-body">
1867
+ <a href="user-profile.html">
1868
+ <span class="title">Leopold Ebert</span>
1869
+ <span>Fashion Designer</span>
1870
+ </a>
1871
+ </div>
1872
+ </div>
1873
+
1874
+ <div class="media media-sm">
1875
+ <div class="media-sm-wrapper">
1876
+ <a href="user-profile.html">
1877
+ <img src="images/user/user-sm-06.jpg" alt="User Image">
1878
+ <span class="active bg-primary"></span>
1879
+ </a>
1880
+ </div>
1881
+ <div class="media-body">
1882
+ <a href="user-profile.html">
1883
+ <span class="title">Selena Wagner</span>
1884
+ <span>Photographer</span>
1885
+ </a>
1886
+ </div>
1887
+ </div>
1888
+
1889
+ </div>
1890
+ </div>
1891
+
1892
+
1893
+
1894
+
1895
+ <script src="plugins/jquery/jquery.min.js"></script>
1896
+ <script src="plugins/bootstrap/js/bootstrap.bundle.min.js"></script>
1897
+ <script src="plugins/simplebar/simplebar.min.js"></script>
1898
+ <script src="https://unpkg.com/hotkeys-js/dist/hotkeys.min.js"></script>
1899
+
1900
+
1901
+
1902
+ <script src="plugins/prism/prism.js"></script>
1903
+
1904
+
1905
+ <script src="js/mono.js"></script>
1906
+ <script src="js/chart.js"></script>
1907
+ <script src="js/map.js"></script>
1908
+ <script src="js/custom.js"></script>
1909
+
1910
+
1911
+
1912
+
1913
+ <!-- -->
1914
+
1915
+
1916
+ </body>
1917
+ </html>
getting-started.html ADDED
@@ -0,0 +1,1563 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+
3
+ <!--
4
+ // WEBSITE: https://themefisher.com
5
+ // TWITTER: https://twitter.com/themefisher
6
+ // FACEBOOK: https://www.facebook.com/themefisher
7
+ // GITHUB: https://github.com/themefisher/
8
+ -->
9
+
10
+ <html lang="en" dir="ltr">
11
+ <head>
12
+ <meta charset="utf-8" />
13
+ <meta http-equiv="X-UA-Compatible" content="IE=edge" />
14
+ <meta name="viewport" content="width=device-width, initial-scale=1" />
15
+
16
+ <title>Mono - Responsive Admin & Dashboard Template</title>
17
+
18
+ <!-- GOOGLE FONTS -->
19
+ <link href="https://fonts.googleapis.com/css?family=Karla:400,700|Roboto" rel="stylesheet">
20
+ <link href="plugins/material/css/materialdesignicons.min.css" rel="stylesheet" />
21
+ <link href="plugins/simplebar/simplebar.css" rel="stylesheet" />
22
+
23
+ <!-- PLUGINS CSS STYLE -->
24
+ <link href="plugins/nprogress/nprogress.css" rel="stylesheet" />
25
+
26
+
27
+ <link href="plugins/prism/prism.css" rel="stylesheet" />
28
+
29
+
30
+ <!-- MONO CSS -->
31
+ <link id="main-css-href" rel="stylesheet" href="css/style.css" />
32
+
33
+
34
+
35
+
36
+ <!-- FAVICON -->
37
+ <link href="images/favicon.png" rel="shortcut icon" />
38
+
39
+ <!--
40
+ HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries
41
+ -->
42
+ <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
43
+ <!--[if lt IE 9]>
44
+ <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
45
+ <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
46
+ <![endif]-->
47
+ <script src="plugins/nprogress/nprogress.js"></script>
48
+ </head>
49
+
50
+
51
+ <body class="navbar-fixed sidebar-fixed" id="body">
52
+ <script>
53
+ NProgress.configure({ showSpinner: false });
54
+ NProgress.start();
55
+ </script>
56
+
57
+
58
+
59
+ <!-- ====================================
60
+ ——— WRAPPER
61
+ ===================================== -->
62
+ <div class="wrapper">
63
+
64
+
65
+ <!-- ====================================
66
+ ——— LEFT SIDEBAR WITH OUT FOOTER
67
+ ===================================== -->
68
+ <aside class="left-sidebar sidebar-dark" id="left-sidebar">
69
+ <div id="sidebar" class="sidebar sidebar-with-footer">
70
+ <!-- Aplication Brand -->
71
+ <div class="app-brand">
72
+ <a href="/index.html">
73
+ <img src="images/logo.png" alt="Mono">
74
+ <span class="brand-name">MONO</span>
75
+ </a>
76
+ </div>
77
+ <!-- begin sidebar scrollbar -->
78
+ <div class="sidebar-left" data-simplebar style="height: 100%;">
79
+ <!-- sidebar menu -->
80
+ <ul class="nav sidebar-inner" id="sidebar-menu">
81
+
82
+
83
+
84
+ <li
85
+ >
86
+ <a class="sidenav-item-link" href="index.html">
87
+ <i class="mdi mdi-briefcase-account-outline"></i>
88
+ <span class="nav-text">Business Dashboard</span>
89
+ </a>
90
+ </li>
91
+
92
+
93
+
94
+
95
+
96
+ <li
97
+ >
98
+ <a class="sidenav-item-link" href="analytics.html">
99
+ <i class="mdi mdi-chart-line"></i>
100
+ <span class="nav-text">Analytics Dashboard</span>
101
+ </a>
102
+ </li>
103
+
104
+
105
+
106
+
107
+
108
+ <li class="section-title">
109
+ Apps
110
+ </li>
111
+
112
+
113
+
114
+
115
+
116
+ <li
117
+ >
118
+ <a class="sidenav-item-link" href="chat.html">
119
+ <i class="mdi mdi-wechat"></i>
120
+ <span class="nav-text">Chat</span>
121
+ </a>
122
+ </li>
123
+
124
+
125
+
126
+
127
+
128
+ <li
129
+ >
130
+ <a class="sidenav-item-link" href="contacts.html">
131
+ <i class="mdi mdi-phone"></i>
132
+ <span class="nav-text">Contacts</span>
133
+ </a>
134
+ </li>
135
+
136
+
137
+
138
+
139
+
140
+ <li
141
+ >
142
+ <a class="sidenav-item-link" href="team.html">
143
+ <i class="mdi mdi-account-group"></i>
144
+ <span class="nav-text">Team</span>
145
+ </a>
146
+ </li>
147
+
148
+
149
+
150
+
151
+
152
+ <li
153
+ >
154
+ <a class="sidenav-item-link" href="calendar.html">
155
+ <i class="mdi mdi-calendar-check"></i>
156
+ <span class="nav-text">Calendar</span>
157
+ </a>
158
+ </li>
159
+
160
+
161
+
162
+
163
+
164
+ <li class="has-sub" >
165
+ <a class="sidenav-item-link" href="javascript:void(0)" data-toggle="collapse" data-target="#email"
166
+ aria-expanded="false" aria-controls="email">
167
+ <i class="mdi mdi-email"></i>
168
+ <span class="nav-text">email</span> <b class="caret"></b>
169
+ </a>
170
+ <ul class="collapse" id="email"
171
+ data-parent="#sidebar-menu">
172
+ <div class="sub-menu">
173
+
174
+
175
+
176
+ <li >
177
+ <a class="sidenav-item-link" href="email-inbox.html">
178
+ <span class="nav-text">Email Inbox</span>
179
+
180
+ </a>
181
+ </li>
182
+
183
+
184
+
185
+
186
+
187
+
188
+ <li >
189
+ <a class="sidenav-item-link" href="email-details.html">
190
+ <span class="nav-text">Email Details</span>
191
+
192
+ </a>
193
+ </li>
194
+
195
+
196
+
197
+
198
+
199
+
200
+ <li >
201
+ <a class="sidenav-item-link" href="email-compose.html">
202
+ <span class="nav-text">Email Compose</span>
203
+
204
+ </a>
205
+ </li>
206
+
207
+
208
+
209
+
210
+ </div>
211
+ </ul>
212
+ </li>
213
+
214
+
215
+
216
+
217
+
218
+ <li class="section-title">
219
+ UI Elements
220
+ </li>
221
+
222
+
223
+
224
+
225
+
226
+ <li class="has-sub" >
227
+ <a class="sidenav-item-link" href="javascript:void(0)" data-toggle="collapse" data-target="#ui-elements"
228
+ aria-expanded="false" aria-controls="ui-elements">
229
+ <i class="mdi mdi-folder-outline"></i>
230
+ <span class="nav-text">UI Components</span> <b class="caret"></b>
231
+ </a>
232
+ <ul class="collapse" id="ui-elements"
233
+ data-parent="#sidebar-menu">
234
+ <div class="sub-menu">
235
+
236
+
237
+
238
+ <li >
239
+ <a class="sidenav-item-link" href="alert.html">
240
+ <span class="nav-text">Alert</span>
241
+
242
+ </a>
243
+ </li>
244
+
245
+
246
+
247
+
248
+
249
+
250
+ <li >
251
+ <a class="sidenav-item-link" href="badge.html">
252
+ <span class="nav-text">Badge</span>
253
+
254
+ </a>
255
+ </li>
256
+
257
+
258
+
259
+
260
+
261
+
262
+ <li >
263
+ <a class="sidenav-item-link" href="breadcrumb.html">
264
+ <span class="nav-text">Breadcrumb</span>
265
+
266
+ </a>
267
+ </li>
268
+
269
+
270
+
271
+
272
+
273
+ <li class="has-sub" >
274
+ <a class="sidenav-item-link" href="javascript:void(0)" data-toggle="collapse" data-target="#buttons"
275
+ aria-expanded="false" aria-controls="buttons">
276
+ <span class="nav-text">Buttons</span> <b class="caret"></b>
277
+ </a>
278
+ <ul class="collapse" id="buttons">
279
+ <div class="sub-menu">
280
+
281
+ <li >
282
+ <a href="button-default.html">Button Default</a>
283
+ </li>
284
+
285
+ <li >
286
+ <a href="button-dropdown.html">Button Dropdown</a>
287
+ </li>
288
+
289
+ <li >
290
+ <a href="button-group.html">Button Group</a>
291
+ </li>
292
+
293
+ <li >
294
+ <a href="button-social.html">Button Social</a>
295
+ </li>
296
+
297
+ <li >
298
+ <a href="button-loading.html">Button Loading</a>
299
+ </li>
300
+
301
+ </div>
302
+ </ul>
303
+ </li>
304
+
305
+
306
+
307
+
308
+
309
+ <li >
310
+ <a class="sidenav-item-link" href="card.html">
311
+ <span class="nav-text">Card</span>
312
+
313
+ </a>
314
+ </li>
315
+
316
+
317
+
318
+
319
+
320
+
321
+ <li >
322
+ <a class="sidenav-item-link" href="carousel.html">
323
+ <span class="nav-text">Carousel</span>
324
+
325
+ </a>
326
+ </li>
327
+
328
+
329
+
330
+
331
+
332
+
333
+ <li >
334
+ <a class="sidenav-item-link" href="collapse.html">
335
+ <span class="nav-text">Collapse</span>
336
+
337
+ </a>
338
+ </li>
339
+
340
+
341
+
342
+
343
+
344
+
345
+ <li >
346
+ <a class="sidenav-item-link" href="editor.html">
347
+ <span class="nav-text">Editor</span>
348
+
349
+ </a>
350
+ </li>
351
+
352
+
353
+
354
+
355
+
356
+
357
+ <li >
358
+ <a class="sidenav-item-link" href="list-group.html">
359
+ <span class="nav-text">List Group</span>
360
+
361
+ </a>
362
+ </li>
363
+
364
+
365
+
366
+
367
+
368
+
369
+ <li >
370
+ <a class="sidenav-item-link" href="modal.html">
371
+ <span class="nav-text">Modal</span>
372
+
373
+ </a>
374
+ </li>
375
+
376
+
377
+
378
+
379
+
380
+
381
+ <li >
382
+ <a class="sidenav-item-link" href="pagination.html">
383
+ <span class="nav-text">Pagination</span>
384
+
385
+ </a>
386
+ </li>
387
+
388
+
389
+
390
+
391
+
392
+
393
+ <li >
394
+ <a class="sidenav-item-link" href="popover-tooltip.html">
395
+ <span class="nav-text">Popover & Tooltip</span>
396
+
397
+ </a>
398
+ </li>
399
+
400
+
401
+
402
+
403
+
404
+
405
+ <li >
406
+ <a class="sidenav-item-link" href="progress-bar.html">
407
+ <span class="nav-text">Progress Bar</span>
408
+
409
+ </a>
410
+ </li>
411
+
412
+
413
+
414
+
415
+
416
+
417
+ <li >
418
+ <a class="sidenav-item-link" href="spinner.html">
419
+ <span class="nav-text">Spinner</span>
420
+
421
+ </a>
422
+ </li>
423
+
424
+
425
+
426
+
427
+
428
+
429
+ <li >
430
+ <a class="sidenav-item-link" href="switches.html">
431
+ <span class="nav-text">Switches</span>
432
+
433
+ </a>
434
+ </li>
435
+
436
+
437
+
438
+
439
+
440
+ <li class="has-sub" >
441
+ <a class="sidenav-item-link" href="javascript:void(0)" data-toggle="collapse" data-target="#tables"
442
+ aria-expanded="false" aria-controls="tables">
443
+ <span class="nav-text">Tables</span> <b class="caret"></b>
444
+ </a>
445
+ <ul class="collapse" id="tables">
446
+ <div class="sub-menu">
447
+
448
+ <li >
449
+ <a href="bootstarp-tables.html">Bootstrap Tables</a>
450
+ </li>
451
+
452
+ <li >
453
+ <a href="data-tables.html">Data Tables</a>
454
+ </li>
455
+
456
+ </div>
457
+ </ul>
458
+ </li>
459
+
460
+
461
+
462
+
463
+
464
+ <li >
465
+ <a class="sidenav-item-link" href="tab.html">
466
+ <span class="nav-text">Tab</span>
467
+
468
+ </a>
469
+ </li>
470
+
471
+
472
+
473
+
474
+
475
+
476
+ <li >
477
+ <a class="sidenav-item-link" href="toaster.html">
478
+ <span class="nav-text">Toaster</span>
479
+
480
+ </a>
481
+ </li>
482
+
483
+
484
+
485
+
486
+
487
+ <li class="has-sub" >
488
+ <a class="sidenav-item-link" href="javascript:void(0)" data-toggle="collapse" data-target="#icons"
489
+ aria-expanded="false" aria-controls="icons">
490
+ <span class="nav-text">Icons</span> <b class="caret"></b>
491
+ </a>
492
+ <ul class="collapse" id="icons">
493
+ <div class="sub-menu">
494
+
495
+ <li >
496
+ <a href="material-icons.html">Material Icon</a>
497
+ </li>
498
+
499
+ <li >
500
+ <a href="flag-icons.html">Flag Icon</a>
501
+ </li>
502
+
503
+ </div>
504
+ </ul>
505
+ </li>
506
+
507
+
508
+
509
+
510
+ <li class="has-sub" >
511
+ <a class="sidenav-item-link" href="javascript:void(0)" data-toggle="collapse" data-target="#forms"
512
+ aria-expanded="false" aria-controls="forms">
513
+ <span class="nav-text">Forms</span> <b class="caret"></b>
514
+ </a>
515
+ <ul class="collapse" id="forms">
516
+ <div class="sub-menu">
517
+
518
+ <li >
519
+ <a href="basic-input.html">Basic Input</a>
520
+ </li>
521
+
522
+ <li >
523
+ <a href="input-group.html">Input Group</a>
524
+ </li>
525
+
526
+ <li >
527
+ <a href="checkbox-radio.html">Checkbox & Radio</a>
528
+ </li>
529
+
530
+ <li >
531
+ <a href="form-validation.html">Form Validation</a>
532
+ </li>
533
+
534
+ <li >
535
+ <a href="form-advance.html">Form Advance</a>
536
+ </li>
537
+
538
+ </div>
539
+ </ul>
540
+ </li>
541
+
542
+
543
+
544
+
545
+ <li class="has-sub" >
546
+ <a class="sidenav-item-link" href="javascript:void(0)" data-toggle="collapse" data-target="#maps"
547
+ aria-expanded="false" aria-controls="maps">
548
+ <span class="nav-text">Maps</span> <b class="caret"></b>
549
+ </a>
550
+ <ul class="collapse" id="maps">
551
+ <div class="sub-menu">
552
+
553
+ <li >
554
+ <a href="google-maps.html">Google Map</a>
555
+ </li>
556
+
557
+ <li >
558
+ <a href="vector-maps.html">Vector Map</a>
559
+ </li>
560
+
561
+ </div>
562
+ </ul>
563
+ </li>
564
+
565
+
566
+
567
+
568
+ <li class="has-sub" >
569
+ <a class="sidenav-item-link" href="javascript:void(0)" data-toggle="collapse" data-target="#widgets"
570
+ aria-expanded="false" aria-controls="widgets">
571
+ <span class="nav-text">Widgets</span> <b class="caret"></b>
572
+ </a>
573
+ <ul class="collapse" id="widgets">
574
+ <div class="sub-menu">
575
+
576
+ <li >
577
+ <a href="widgets-general.html">General Widget</a>
578
+ </li>
579
+
580
+ <li >
581
+ <a href="widgets-chart.html">Chart Widget</a>
582
+ </li>
583
+
584
+ </div>
585
+ </ul>
586
+ </li>
587
+
588
+
589
+
590
+ </div>
591
+ </ul>
592
+ </li>
593
+
594
+
595
+
596
+
597
+
598
+ <li class="has-sub" >
599
+ <a class="sidenav-item-link" href="javascript:void(0)" data-toggle="collapse" data-target="#charts"
600
+ aria-expanded="false" aria-controls="charts">
601
+ <i class="mdi mdi-chart-pie"></i>
602
+ <span class="nav-text">Charts</span> <b class="caret"></b>
603
+ </a>
604
+ <ul class="collapse" id="charts"
605
+ data-parent="#sidebar-menu">
606
+ <div class="sub-menu">
607
+
608
+
609
+
610
+ <li >
611
+ <a class="sidenav-item-link" href="apex-charts.html">
612
+ <span class="nav-text">Apex Charts</span>
613
+
614
+ </a>
615
+ </li>
616
+
617
+
618
+
619
+
620
+ </div>
621
+ </ul>
622
+ </li>
623
+
624
+
625
+
626
+
627
+
628
+ <li class="section-title">
629
+ Pages
630
+ </li>
631
+
632
+
633
+
634
+
635
+
636
+ <li class="has-sub" >
637
+ <a class="sidenav-item-link" href="javascript:void(0)" data-toggle="collapse" data-target="#users"
638
+ aria-expanded="false" aria-controls="users">
639
+ <i class="mdi mdi-image-filter-none"></i>
640
+ <span class="nav-text">User</span> <b class="caret"></b>
641
+ </a>
642
+ <ul class="collapse" id="users"
643
+ data-parent="#sidebar-menu">
644
+ <div class="sub-menu">
645
+
646
+
647
+
648
+ <li >
649
+ <a class="sidenav-item-link" href="user-profile.html">
650
+ <span class="nav-text">User Profile</span>
651
+
652
+ </a>
653
+ </li>
654
+
655
+
656
+
657
+
658
+
659
+
660
+ <li >
661
+ <a class="sidenav-item-link" href="user-activities.html">
662
+ <span class="nav-text">User Activities</span>
663
+
664
+ </a>
665
+ </li>
666
+
667
+
668
+
669
+
670
+
671
+
672
+ <li >
673
+ <a class="sidenav-item-link" href="user-profile-settings.html">
674
+ <span class="nav-text">User Profile Settings</span>
675
+
676
+ </a>
677
+ </li>
678
+
679
+
680
+
681
+
682
+
683
+
684
+ <li >
685
+ <a class="sidenav-item-link" href="user-account-settings.html">
686
+ <span class="nav-text">User Account Settings</span>
687
+
688
+ </a>
689
+ </li>
690
+
691
+
692
+
693
+
694
+
695
+
696
+ <li >
697
+ <a class="sidenav-item-link" href="user-planing-settings.html">
698
+ <span class="nav-text">User Planing Settings</span>
699
+
700
+ </a>
701
+ </li>
702
+
703
+
704
+
705
+
706
+
707
+
708
+ <li >
709
+ <a class="sidenav-item-link" href="user-billing.html">
710
+ <span class="nav-text">User billing</span>
711
+
712
+ </a>
713
+ </li>
714
+
715
+
716
+
717
+
718
+
719
+
720
+ <li >
721
+ <a class="sidenav-item-link" href="user-notify-settings.html">
722
+ <span class="nav-text">User Notify Settings</span>
723
+
724
+ </a>
725
+ </li>
726
+
727
+
728
+
729
+
730
+ </div>
731
+ </ul>
732
+ </li>
733
+
734
+
735
+
736
+
737
+
738
+ <li class="has-sub" >
739
+ <a class="sidenav-item-link" href="javascript:void(0)" data-toggle="collapse" data-target="#authentication"
740
+ aria-expanded="false" aria-controls="authentication">
741
+ <i class="mdi mdi-account"></i>
742
+ <span class="nav-text">Authentication</span> <b class="caret"></b>
743
+ </a>
744
+ <ul class="collapse" id="authentication"
745
+ data-parent="#sidebar-menu">
746
+ <div class="sub-menu">
747
+
748
+
749
+
750
+ <li >
751
+ <a class="sidenav-item-link" href="sign-in.html">
752
+ <span class="nav-text">Sign In</span>
753
+
754
+ </a>
755
+ </li>
756
+
757
+
758
+
759
+
760
+
761
+
762
+ <li >
763
+ <a class="sidenav-item-link" href="sign-up.html">
764
+ <span class="nav-text">Sign Up</span>
765
+
766
+ </a>
767
+ </li>
768
+
769
+
770
+
771
+
772
+
773
+
774
+ <li >
775
+ <a class="sidenav-item-link" href="reset-password.html">
776
+ <span class="nav-text">Reset Password</span>
777
+
778
+ </a>
779
+ </li>
780
+
781
+
782
+
783
+
784
+ </div>
785
+ </ul>
786
+ </li>
787
+
788
+
789
+
790
+
791
+
792
+ <li class="has-sub" >
793
+ <a class="sidenav-item-link" href="javascript:void(0)" data-toggle="collapse" data-target="#other-page"
794
+ aria-expanded="false" aria-controls="other-page">
795
+ <i class="mdi mdi-file-multiple"></i>
796
+ <span class="nav-text">Other pages</span> <b class="caret"></b>
797
+ </a>
798
+ <ul class="collapse" id="other-page"
799
+ data-parent="#sidebar-menu">
800
+ <div class="sub-menu">
801
+
802
+
803
+
804
+ <li >
805
+ <a class="sidenav-item-link" href="invoice.html">
806
+ <span class="nav-text">Invoice</span>
807
+
808
+ </a>
809
+ </li>
810
+
811
+
812
+
813
+
814
+
815
+
816
+ <li >
817
+ <a class="sidenav-item-link" href="404.html">
818
+ <span class="nav-text">404 page</span>
819
+
820
+ </a>
821
+ </li>
822
+
823
+
824
+
825
+
826
+
827
+
828
+ <li >
829
+ <a class="sidenav-item-link" href="page-comingsoon.html">
830
+ <span class="nav-text">Coming Soon</span>
831
+
832
+ </a>
833
+ </li>
834
+
835
+
836
+
837
+
838
+
839
+
840
+ <li >
841
+ <a class="sidenav-item-link" href="page-maintenance.html">
842
+ <span class="nav-text">Maintenance</span>
843
+
844
+ </a>
845
+ </li>
846
+
847
+
848
+
849
+
850
+ </div>
851
+ </ul>
852
+ </li>
853
+
854
+
855
+
856
+
857
+
858
+ <li class="section-title">
859
+ Documentation
860
+ </li>
861
+
862
+
863
+
864
+
865
+
866
+ <li
867
+ class="active"
868
+ >
869
+ <a class="sidenav-item-link" href="getting-started.html">
870
+ <i class="mdi mdi-airplane"></i>
871
+ <span class="nav-text">Getting Started</span>
872
+ </a>
873
+ </li>
874
+
875
+
876
+
877
+
878
+
879
+ <li class="has-sub" >
880
+ <a class="sidenav-item-link" href="javascript:void(0)" data-toggle="collapse" data-target="#customization"
881
+ aria-expanded="false" aria-controls="customization">
882
+ <i class="mdi mdi-square-edit-outline"></i>
883
+ <span class="nav-text">Customization</span> <b class="caret"></b>
884
+ </a>
885
+ <ul class="collapse" id="customization"
886
+ data-parent="#sidebar-menu">
887
+ <div class="sub-menu">
888
+
889
+
890
+
891
+ <li >
892
+ <a class="sidenav-item-link" href="navbar-customization.html">
893
+ <span class="nav-text">Navbar</span>
894
+
895
+ </a>
896
+ </li>
897
+
898
+
899
+
900
+
901
+
902
+
903
+ <li >
904
+ <a class="sidenav-item-link" href="sidebar-customization.html">
905
+ <span class="nav-text">Sidebar</span>
906
+
907
+ </a>
908
+ </li>
909
+
910
+
911
+
912
+
913
+
914
+
915
+ <li >
916
+ <a class="sidenav-item-link" href="styling.html">
917
+ <span class="nav-text">Styling</span>
918
+
919
+ </a>
920
+ </li>
921
+
922
+
923
+
924
+
925
+ </div>
926
+ </ul>
927
+ </li>
928
+
929
+
930
+
931
+ </ul>
932
+
933
+ </div>
934
+
935
+ <div class="sidebar-footer">
936
+ <div class="sidebar-footer-content">
937
+ <ul class="d-flex">
938
+ <li>
939
+ <a href="user-account-settings.html" data-toggle="tooltip" title="Profile settings"><i class="mdi mdi-settings"></i></a></li>
940
+ <li>
941
+ <a href="#" data-toggle="tooltip" title="No chat messages"><i class="mdi mdi-chat-processing"></i></a>
942
+ </li>
943
+ </ul>
944
+ </div>
945
+ </div>
946
+ </div>
947
+ </aside>
948
+
949
+
950
+
951
+ <!-- ====================================
952
+ ——— PAGE WRAPPER
953
+ ===================================== -->
954
+ <div class="page-wrapper">
955
+
956
+ <!-- Header -->
957
+ <header class="main-header" id="header">
958
+ <nav class="navbar navbar-expand-lg navbar-light" id="navbar">
959
+ <!-- Sidebar toggle button -->
960
+ <button id="sidebar-toggler" class="sidebar-toggle">
961
+ <span class="sr-only">Toggle navigation</span>
962
+ </button>
963
+
964
+ <span class="page-title"></span>
965
+
966
+ <div class="navbar-right ">
967
+
968
+ <!-- search form -->
969
+ <div class="search-form">
970
+ <form action="index.html" method="get">
971
+ <div class="input-group input-group-sm" id="input-group-search">
972
+ <input type="text" autocomplete="off" name="query" id="search-input" class="form-control" placeholder="Search..." />
973
+ <div class="input-group-append">
974
+ <button class="btn" type="button">/</button>
975
+ </div>
976
+ </div>
977
+ </form>
978
+ <ul class="dropdown-menu dropdown-menu-search">
979
+
980
+ <li class="nav-item">
981
+ <a class="nav-link" href="index.html">Morbi leo risus</a>
982
+ </li>
983
+ <li class="nav-item">
984
+ <a class="nav-link" href="index.html">Dapibus ac facilisis in</a>
985
+ </li>
986
+ <li class="nav-item">
987
+ <a class="nav-link" href="index.html">Porta ac consectetur ac</a>
988
+ </li>
989
+ <li class="nav-item">
990
+ <a class="nav-link" href="index.html">Vestibulum at eros</a>
991
+ </li>
992
+
993
+ </ul>
994
+
995
+ </div>
996
+
997
+ <ul class="nav navbar-nav">
998
+ <!-- Offcanvas -->
999
+ <li class="custom-dropdown">
1000
+ <a class="offcanvas-toggler active custom-dropdown-toggler" data-offcanvas="contact-off" href="javascript:" >
1001
+ <i class="mdi mdi-contacts icon"></i>
1002
+ </a>
1003
+ </li>
1004
+ <li class="custom-dropdown">
1005
+ <button class="notify-toggler custom-dropdown-toggler">
1006
+ <i class="mdi mdi-bell-outline icon"></i>
1007
+ <span class="badge badge-xs rounded-circle">21</span>
1008
+ </button>
1009
+ <div class="dropdown-notify">
1010
+
1011
+ <header>
1012
+ <div class="nav nav-underline" id="nav-tab" role="tablist">
1013
+ <a class="nav-item nav-link active" id="all-tabs" data-toggle="tab" href="#all" role="tab" aria-controls="nav-home"
1014
+ aria-selected="true">All (5)</a>
1015
+ <a class="nav-item nav-link" id="message-tab" data-toggle="tab" href="#message" role="tab" aria-controls="nav-profile"
1016
+ aria-selected="false">Msgs (4)</a>
1017
+ <a class="nav-item nav-link" id="other-tab" data-toggle="tab" href="#other" role="tab" aria-controls="nav-contact"
1018
+ aria-selected="false">Others (3)</a>
1019
+ </div>
1020
+ </header>
1021
+
1022
+ <div class="" data-simplebar style="height: 325px;">
1023
+ <div class="tab-content" id="myTabContent">
1024
+
1025
+ <div class="tab-pane fade show active" id="all" role="tabpanel" aria-labelledby="all-tabs">
1026
+
1027
+ <div class="media media-sm bg-warning-10 p-4 mb-0">
1028
+ <div class="media-sm-wrapper">
1029
+ <a href="user-profile.html">
1030
+ <img src="images/user/user-sm-02.jpg" alt="User Image">
1031
+ </a>
1032
+ </div>
1033
+ <div class="media-body">
1034
+ <a href="user-profile.html">
1035
+ <span class="title mb-0">John Doe</span>
1036
+ <span class="discribe">Extremity sweetness difficult behaviour he of. On disposal of as landlord horrible. Afraid at highly months do things on at.</span>
1037
+ <span class="time">
1038
+ <time>Just now</time>...
1039
+ </span>
1040
+ </a>
1041
+ </div>
1042
+ </div>
1043
+
1044
+ <div class="media media-sm p-4 bg-light mb-0">
1045
+ <div class="media-sm-wrapper bg-primary">
1046
+ <a href="user-profile.html">
1047
+ <i class="mdi mdi-calendar-check-outline"></i>
1048
+ </a>
1049
+ </div>
1050
+ <div class="media-body">
1051
+ <a href="user-profile.html">
1052
+ <span class="title mb-0">New event added</span>
1053
+ <span class="discribe">1/3/2014 (1pm - 2pm)</span>
1054
+ <span class="time">
1055
+ <time>10 min ago...</time>...
1056
+ </span>
1057
+ </a>
1058
+ </div>
1059
+ </div>
1060
+
1061
+ <div class="media media-sm p-4 mb-0">
1062
+ <div class="media-sm-wrapper">
1063
+ <a href="user-profile.html">
1064
+ <img src="images/user/user-sm-03.jpg" alt="User Image">
1065
+ </a>
1066
+ </div>
1067
+ <div class="media-body">
1068
+ <a href="user-profile.html">
1069
+ <span class="title mb-0">Sagge Hudson</span>
1070
+ <span class="discribe">On disposal of as landlord Afraid at highly months do things on at.</span>
1071
+ <span class="time">
1072
+ <time>1 hrs ago</time>...
1073
+ </span>
1074
+ </a>
1075
+ </div>
1076
+ </div>
1077
+
1078
+ <div class="media media-sm p-4 mb-0">
1079
+ <div class="media-sm-wrapper bg-info-dark">
1080
+ <a href="user-profile.html">
1081
+ <i class="mdi mdi-account-multiple-check"></i>
1082
+ </a>
1083
+ </div>
1084
+ <div class="media-body">
1085
+ <a href="user-profile.html">
1086
+ <span class="title mb-0">Add request</span>
1087
+ <span class="discribe">Add Dany Jones as your contact.</span>
1088
+ <div class="buttons">
1089
+ <a href="#" class="btn btn-sm btn-success shadow-none text-white">accept</a>
1090
+ <a href="#" class="btn btn-sm shadow-none">delete</a>
1091
+ </div>
1092
+ <span class="time">
1093
+ <time>6 hrs ago</time>...
1094
+ </span>
1095
+ </a>
1096
+ </div>
1097
+ </div>
1098
+
1099
+ <div class="media media-sm p-4 mb-0">
1100
+ <div class="media-sm-wrapper bg-info">
1101
+ <a href="user-profile.html">
1102
+ <i class="mdi mdi-playlist-check"></i>
1103
+ </a>
1104
+ </div>
1105
+ <div class="media-body">
1106
+ <a href="user-profile.html">
1107
+ <span class="title mb-0">Task complete</span>
1108
+ <span class="discribe">Afraid at highly months do things on at.</span>
1109
+ <span class="time">
1110
+ <time>1 hrs ago</time>...
1111
+ </span>
1112
+ </a>
1113
+ </div>
1114
+ </div>
1115
+
1116
+ </div>
1117
+
1118
+ <div class="tab-pane fade" id="message" role="tabpanel" aria-labelledby="message-tab">
1119
+
1120
+ <div class="media media-sm p-4 mb-0">
1121
+ <div class="media-sm-wrapper">
1122
+ <a href="user-profile.html">
1123
+ <img src="images/user/user-sm-01.jpg" alt="User Image">
1124
+ </a>
1125
+ </div>
1126
+ <div class="media-body">
1127
+ <a href="user-profile.html">
1128
+ <span class="title mb-0">Selena Wagner</span>
1129
+ <span class="discribe">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</span>
1130
+ <span class="time">
1131
+ <time>15 min ago</time>...
1132
+ </span>
1133
+ </a>
1134
+ </div>
1135
+ </div>
1136
+
1137
+ <div class="media media-sm p-4 mb-0">
1138
+ <div class="media-sm-wrapper">
1139
+ <a href="user-profile.html">
1140
+ <img src="images/user/user-sm-03.jpg" alt="User Image">
1141
+ </a>
1142
+ </div>
1143
+ <div class="media-body">
1144
+ <a href="user-profile.html">
1145
+ <span class="title mb-0">Sagge Hudson</span>
1146
+ <span class="discribe">On disposal of as landlord Afraid at highly months do things on at.</span>
1147
+ <span class="time">
1148
+ <time>1 hrs ago</time>...
1149
+ </span>
1150
+ </a>
1151
+ </div>
1152
+ </div>
1153
+
1154
+ <div class="media media-sm bg-warning-10 p-4 mb-0">
1155
+ <div class="media-sm-wrapper">
1156
+ <a href="user-profile.html">
1157
+ <img src="images/user/user-sm-02.jpg" alt="User Image">
1158
+ </a>
1159
+ </div>
1160
+ <div class="media-body">
1161
+ <a href="user-profile.html">
1162
+ <span class="title mb-0">John Doe</span>
1163
+ <span class="discribe">Extremity sweetness difficult behaviour he of. On disposal of as landlord horrible. Afraid
1164
+ at highly months do things on at.</span>
1165
+ <span class="time">
1166
+ <time>Just now</time>...
1167
+ </span>
1168
+ </a>
1169
+ </div>
1170
+ </div>
1171
+
1172
+ <div class="media media-sm p-4 mb-0">
1173
+ <div class="media-sm-wrapper">
1174
+ <a href="user-profile.html">
1175
+ <img src="images/user/user-sm-04.jpg" alt="User Image">
1176
+ </a>
1177
+ </div>
1178
+ <div class="media-body">
1179
+ <a href="user-profile.html">
1180
+ <span class="title mb-0">Albrecht Straub</span>
1181
+ <span class="discribe"> Beatae quia natus assumenda laboriosam, nisi perferendis aliquid consectetur expedita non tenetur.</span>
1182
+ <span class="time">
1183
+ <time>Just now</time>...
1184
+ </span>
1185
+ </a>
1186
+ </div>
1187
+ </div>
1188
+
1189
+ </div>
1190
+ <div class="tab-pane fade" id="other" role="tabpanel" aria-labelledby="contact-tab">
1191
+
1192
+ <div class="media media-sm p-4 bg-light mb-0">
1193
+ <div class="media-sm-wrapper bg-primary">
1194
+ <a href="user-profile.html">
1195
+ <i class="mdi mdi-calendar-check-outline"></i>
1196
+ </a>
1197
+ </div>
1198
+ <div class="media-body">
1199
+ <a href="user-profile.html">
1200
+ <span class="title mb-0">New event added</span>
1201
+ <span class="discribe">1/3/2014 (1pm - 2pm)</span>
1202
+ <span class="time">
1203
+ <time>10 min ago...</time>...
1204
+ </span>
1205
+ </a>
1206
+ </div>
1207
+ </div>
1208
+
1209
+ <div class="media media-sm p-4 mb-0">
1210
+ <div class="media-sm-wrapper bg-info-dark">
1211
+ <a href="user-profile.html">
1212
+ <i class="mdi mdi-account-multiple-check"></i>
1213
+ </a>
1214
+ </div>
1215
+ <div class="media-body">
1216
+ <a href="user-profile.html">
1217
+ <span class="title mb-0">Add request</span>
1218
+ <span class="discribe">Add Dany Jones as your contact.</span>
1219
+ <div class="buttons">
1220
+ <a href="#" class="btn btn-sm btn-success shadow-none text-white">accept</a>
1221
+ <a href="#" class="btn btn-sm shadow-none">delete</a>
1222
+ </div>
1223
+ <span class="time">
1224
+ <time>6 hrs ago</time>...
1225
+ </span>
1226
+ </a>
1227
+ </div>
1228
+ </div>
1229
+
1230
+ <div class="media media-sm p-4 mb-0">
1231
+ <div class="media-sm-wrapper bg-info">
1232
+ <a href="user-profile.html">
1233
+ <i class="mdi mdi-playlist-check"></i>
1234
+ </a>
1235
+ </div>
1236
+ <div class="media-body">
1237
+ <a href="user-profile.html">
1238
+ <span class="title mb-0">Task complete</span>
1239
+ <span class="discribe">Afraid at highly months do things on at.</span>
1240
+ <span class="time">
1241
+ <time>1 hrs ago</time>...
1242
+ </span>
1243
+ </a>
1244
+ </div>
1245
+ </div>
1246
+
1247
+ </div>
1248
+ </div>
1249
+ </div>
1250
+
1251
+ <footer class="border-top dropdown-notify-footer">
1252
+ <div class="d-flex justify-content-between align-items-center py-2 px-4">
1253
+ <span>Last updated 3 min ago</span>
1254
+ <a id="refress-button" href="javascript:" class="btn mdi mdi-cached btn-refress"></a>
1255
+ </div>
1256
+ </footer>
1257
+ </div>
1258
+ </li>
1259
+ <!-- User Account -->
1260
+ <li class="dropdown user-menu">
1261
+ <button class="dropdown-toggle nav-link" data-toggle="dropdown">
1262
+ <img src="images/user/user-xs-01.jpg" class="user-image rounded-circle" alt="User Image" />
1263
+ <span class="d-none d-lg-inline-block">John Doe</span>
1264
+ </button>
1265
+ <ul class="dropdown-menu dropdown-menu-right">
1266
+ <li>
1267
+ <a class="dropdown-link-item" href="user-profile.html">
1268
+ <i class="mdi mdi-account-outline"></i>
1269
+ <span class="nav-text">My Profile</span>
1270
+ </a>
1271
+ </li>
1272
+ <li>
1273
+ <a class="dropdown-link-item" href="email-inbox.html">
1274
+ <i class="mdi mdi-email-outline"></i>
1275
+ <span class="nav-text">Message</span>
1276
+ <span class="badge badge-pill badge-primary">24</span>
1277
+ </a>
1278
+ </li>
1279
+ <li>
1280
+ <a class="dropdown-link-item" href="user-activities.html">
1281
+ <i class="mdi mdi-diamond-stone"></i>
1282
+ <span class="nav-text">Activitise</span></a>
1283
+ </li>
1284
+ <li>
1285
+ <a class="dropdown-link-item" href="user-account-settings.html">
1286
+ <i class="mdi mdi-settings"></i>
1287
+ <span class="nav-text">Account Setting</span>
1288
+ </a>
1289
+ </li>
1290
+
1291
+ <li class="dropdown-footer">
1292
+ <a class="dropdown-link-item" href="sign-in.html"> <i class="mdi mdi-logout"></i> Log Out </a>
1293
+ </li>
1294
+ </ul>
1295
+ </li>
1296
+ </ul>
1297
+ </div>
1298
+ </nav>
1299
+
1300
+
1301
+ </header>
1302
+
1303
+ <!-- ====================================
1304
+ ——— CONTENT WRAPPER
1305
+ ===================================== -->
1306
+ <div class="content-wrapper">
1307
+ <div class="content"> <div class="row">
1308
+ <div class="col-lg-12">
1309
+ <div class="card card-default text-dark">
1310
+ <div class="card-header">
1311
+ <h1 class="mb-3">Introduction</h1>
1312
+ <p style="text-transform:none">Thank you for purchasing Mono dashboard, a fully featured admin template and UI kit built on top of awesome Bootstrap 4. It is a very useful bootstrap admin dashboard, which allows you to build products like admin panels, content managements systems and CRMs. It is fully responsive and easily customizable. Its UI elements can be used very easily on any page.</p>
1313
+ </div>
1314
+
1315
+ <div class="card-body pt-4">
1316
+ <h2 class="mt-2 mb-2">Getting Started</h2>
1317
+ <p> This documentation will give you an understanding of how <strong>Mono Dashboard</strong> is structured and guide you in performing common functions. If you require further assistance not covered in this documentation, please contact me at <a href="mailto:theme@iamabdus.com">theme@iamabdus.com</a></p>
1318
+
1319
+ </div>
1320
+
1321
+ <div class="card-body pt-4">
1322
+ <h2 class="mt-2 mb-2">Set up</h2>
1323
+ <p class="mb-1">Mono uses gulp for workflow automation. It's a toolkit for automating painful or time-consuming tasks in your development workflow, so you can stop messing around and build something. </p><br><br>
1324
+ <p class="mb-1">
1325
+ <strong>Step-1:</strong> Make sure you have a recent version of <a target="_blank"
1326
+ href="https://nodejs.org/en/">Node.js</a> installed in your local machine.
1327
+ </p>
1328
+ <p class="mb-1">
1329
+ <strong>Step-2:</strong> Open <strong>terminal</strong> in the project root directory.
1330
+ </p>
1331
+ <p class="mb-4">
1332
+ <strong>Step-3:</strong> Then run the following commands accordingly into terminal:
1333
+ <pre class="language-javascript">
1334
+ //install gulp-cli globally
1335
+ $ npm install gulp-cli -g
1336
+
1337
+ //install devDependencies
1338
+ $ npm install
1339
+
1340
+ //run project
1341
+ $ gulp
1342
+ </pre>
1343
+ <br>
1344
+ This will fire default gulp task which includes: launching BrowserSync, build all html files, javascript
1345
+ minification, sass compilation and lanching watch task. BrowserSync will create dev server and sync your browser
1346
+ with your code editor.
1347
+ </p>
1348
+ <p class="mt-2">
1349
+ You are all done to edit SCSS files and gulp will compile your SCSS to CSS.
1350
+ </p>
1351
+
1352
+ </div>
1353
+
1354
+ <div class="card-body pt-4">
1355
+ <h2 class="mt-2 mb-5">File Structure</h2>
1356
+ <ul>
1357
+ <li>
1358
+ <strong> <i class="mdi mdi-folder text-warning"></i> dist</strong>
1359
+ </li>
1360
+ <li>
1361
+ <strong><i class="mdi mdi-folder text-warning"></i> node_modules</strong>
1362
+ </li>
1363
+ <li>
1364
+ <strong><i class="mdi mdi-folder text-warning"></i> src</strong>
1365
+ <ul class="ml-6">
1366
+ <li>
1367
+ <strong><i class="mdi mdi-folder text-warning"></i> assets</strong>
1368
+ <ul class="ml-5">
1369
+ <li>
1370
+ <strong><i class="mdi mdi-folder text-warning"></i> img</strong>
1371
+ </li>
1372
+ <li>
1373
+ <strong><i class="mdi mdi-folder text-warning"></i> js</strong>
1374
+ </li>
1375
+ <li>
1376
+ <strong><i class="mdi mdi-folder text-warning"></i> plugins </strong>
1377
+ </li>
1378
+ <li>
1379
+ <strong><i class="mdi mdi-folder text-warning"></i> scss</strong>
1380
+ </li>
1381
+ </ul>
1382
+ </li>
1383
+ <li>
1384
+ <strong><i class="mdi mdi-file-document text-color"></i> index.html</strong>
1385
+ </li>
1386
+ </ul>
1387
+ </li>
1388
+ <li>
1389
+ <strong><i class="mdi mdi-file-document text-color"></i> gulpfile.js</strong>
1390
+ </li>
1391
+ <li>
1392
+ <strong><i class="mdi mdi-file-document text-color"></i> package.json</strong>
1393
+ </li>
1394
+ <li>
1395
+ <strong><i class="mdi mdi-file-document text-color"></i> .gitignore</strong>
1396
+ </li>
1397
+ </ul>
1398
+
1399
+ </div>
1400
+
1401
+ <!-- Button -->
1402
+ <div class="d-flex justify-content-end pb-6 px-6">
1403
+
1404
+ <a href="navbar-customization.html" class="btn btn-primary btn-pill">navbar customization
1405
+ <i class="mdi mdi-arrow-right"></i>
1406
+ </a>
1407
+
1408
+ </div>
1409
+ </div>
1410
+ </div>
1411
+
1412
+ </div>
1413
+ </div>
1414
+
1415
+ </div>
1416
+
1417
+ <!-- Footer -->
1418
+ <footer class="footer mt-auto">
1419
+ <div class="copyright bg-white">
1420
+ <p>
1421
+ &copy; <span id="copy-year"></span> Copyright Mono Dashboard Bootstrap Template by <a class="text-primary" href="http://www.iamabdus.com/" target="_blank" >Abdus</a>.
1422
+ </p>
1423
+ </div>
1424
+ <script>
1425
+ var d = new Date();
1426
+ var year = d.getFullYear();
1427
+ document.getElementById("copy-year").innerHTML = year;
1428
+ </script>
1429
+ </footer>
1430
+
1431
+ </div>
1432
+ </div>
1433
+
1434
+ <!-- Card Offcanvas -->
1435
+ <div class="card card-offcanvas" id="contact-off" >
1436
+ <div class="card-header">
1437
+ <h2>Contacts</h2>
1438
+ <a href="#" class="btn btn-primary btn-pill px-4">Add New</a>
1439
+ </div>
1440
+ <div class="card-body">
1441
+
1442
+ <div class="mb-4">
1443
+ <input type="text" class="form-control form-control-lg form-control-secondary rounded-0" placeholder="Search contacts...">
1444
+ </div>
1445
+
1446
+ <div class="media media-sm">
1447
+ <div class="media-sm-wrapper">
1448
+ <a href="user-profile.html">
1449
+ <img src="images/user/user-sm-01.jpg" alt="User Image">
1450
+ <span class="active bg-primary"></span>
1451
+ </a>
1452
+ </div>
1453
+ <div class="media-body">
1454
+ <a href="user-profile.html">
1455
+ <span class="title">Selena Wagner</span>
1456
+ <span class="discribe">Designer</span>
1457
+ </a>
1458
+ </div>
1459
+ </div>
1460
+
1461
+ <div class="media media-sm">
1462
+ <div class="media-sm-wrapper">
1463
+ <a href="user-profile.html">
1464
+ <img src="images/user/user-sm-02.jpg" alt="User Image">
1465
+ <span class="active bg-primary"></span>
1466
+ </a>
1467
+ </div>
1468
+ <div class="media-body">
1469
+ <a href="user-profile.html">
1470
+ <span class="title">Walter Reuter</span>
1471
+ <span>Developer</span>
1472
+ </a>
1473
+ </div>
1474
+ </div>
1475
+
1476
+ <div class="media media-sm">
1477
+ <div class="media-sm-wrapper">
1478
+ <a href="user-profile.html">
1479
+ <img src="images/user/user-sm-03.jpg" alt="User Image">
1480
+ </a>
1481
+ </div>
1482
+ <div class="media-body">
1483
+ <a href="user-profile.html">
1484
+ <span class="title">Larissa Gebhardt</span>
1485
+ <span>Cyber Punk</span>
1486
+ </a>
1487
+ </div>
1488
+ </div>
1489
+
1490
+ <div class="media media-sm">
1491
+ <div class="media-sm-wrapper">
1492
+ <a href="user-profile.html">
1493
+ <img src="images/user/user-sm-04.jpg" alt="User Image">
1494
+ </a>
1495
+
1496
+ </div>
1497
+ <div class="media-body">
1498
+ <a href="user-profile.html">
1499
+ <span class="title">Albrecht Straub</span>
1500
+ <span>Photographer</span>
1501
+ </a>
1502
+ </div>
1503
+ </div>
1504
+
1505
+ <div class="media media-sm">
1506
+ <div class="media-sm-wrapper">
1507
+ <a href="user-profile.html">
1508
+ <img src="images/user/user-sm-05.jpg" alt="User Image">
1509
+ <span class="active bg-danger"></span>
1510
+ </a>
1511
+ </div>
1512
+ <div class="media-body">
1513
+ <a href="user-profile.html">
1514
+ <span class="title">Leopold Ebert</span>
1515
+ <span>Fashion Designer</span>
1516
+ </a>
1517
+ </div>
1518
+ </div>
1519
+
1520
+ <div class="media media-sm">
1521
+ <div class="media-sm-wrapper">
1522
+ <a href="user-profile.html">
1523
+ <img src="images/user/user-sm-06.jpg" alt="User Image">
1524
+ <span class="active bg-primary"></span>
1525
+ </a>
1526
+ </div>
1527
+ <div class="media-body">
1528
+ <a href="user-profile.html">
1529
+ <span class="title">Selena Wagner</span>
1530
+ <span>Photographer</span>
1531
+ </a>
1532
+ </div>
1533
+ </div>
1534
+
1535
+ </div>
1536
+ </div>
1537
+
1538
+
1539
+
1540
+
1541
+ <script src="plugins/jquery/jquery.min.js"></script>
1542
+ <script src="plugins/bootstrap/js/bootstrap.bundle.min.js"></script>
1543
+ <script src="plugins/simplebar/simplebar.min.js"></script>
1544
+ <script src="https://unpkg.com/hotkeys-js/dist/hotkeys.min.js"></script>
1545
+
1546
+
1547
+
1548
+ <script src="plugins/prism/prism.js"></script>
1549
+
1550
+
1551
+ <script src="js/mono.js"></script>
1552
+ <script src="js/chart.js"></script>
1553
+ <script src="js/map.js"></script>
1554
+ <script src="js/custom.js"></script>
1555
+
1556
+
1557
+
1558
+
1559
+ <!-- -->
1560
+
1561
+
1562
+ </body>
1563
+ </html>
google-maps.html ADDED
@@ -0,0 +1,1609 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+
3
+ <!--
4
+ // WEBSITE: https://themefisher.com
5
+ // TWITTER: https://twitter.com/themefisher
6
+ // FACEBOOK: https://www.facebook.com/themefisher
7
+ // GITHUB: https://github.com/themefisher/
8
+ -->
9
+
10
+ <html lang="en" dir="ltr">
11
+ <head>
12
+ <meta charset="utf-8" />
13
+ <meta http-equiv="X-UA-Compatible" content="IE=edge" />
14
+ <meta name="viewport" content="width=device-width, initial-scale=1" />
15
+
16
+ <title>Mono - Responsive Admin & Dashboard Template</title>
17
+
18
+ <!-- GOOGLE FONTS -->
19
+ <link href="https://fonts.googleapis.com/css?family=Karla:400,700|Roboto" rel="stylesheet">
20
+ <link href="plugins/material/css/materialdesignicons.min.css" rel="stylesheet" />
21
+ <link href="plugins/simplebar/simplebar.css" rel="stylesheet" />
22
+
23
+ <!-- PLUGINS CSS STYLE -->
24
+ <link href="plugins/nprogress/nprogress.css" rel="stylesheet" />
25
+
26
+
27
+ <link href="plugins/prism/prism.css" rel="stylesheet" />
28
+
29
+
30
+
31
+
32
+ <!-- MONO CSS -->
33
+ <link id="main-css-href" rel="stylesheet" href="css/style.css" />
34
+
35
+
36
+
37
+
38
+ <!-- FAVICON -->
39
+ <link href="images/favicon.png" rel="shortcut icon" />
40
+
41
+ <!--
42
+ HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries
43
+ -->
44
+ <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
45
+ <!--[if lt IE 9]>
46
+ <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
47
+ <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
48
+ <![endif]-->
49
+ <script src="plugins/nprogress/nprogress.js"></script>
50
+ </head>
51
+
52
+
53
+ <body class="navbar-fixed sidebar-fixed" id="body">
54
+ <script>
55
+ NProgress.configure({ showSpinner: false });
56
+ NProgress.start();
57
+ </script>
58
+
59
+
60
+
61
+ <!-- ====================================
62
+ ——— WRAPPER
63
+ ===================================== -->
64
+ <div class="wrapper">
65
+
66
+
67
+ <!-- ====================================
68
+ ——— LEFT SIDEBAR WITH OUT FOOTER
69
+ ===================================== -->
70
+ <aside class="left-sidebar sidebar-dark" id="left-sidebar">
71
+ <div id="sidebar" class="sidebar sidebar-with-footer">
72
+ <!-- Aplication Brand -->
73
+ <div class="app-brand">
74
+ <a href="/index.html">
75
+ <img src="images/logo.png" alt="Mono">
76
+ <span class="brand-name">MONO</span>
77
+ </a>
78
+ </div>
79
+ <!-- begin sidebar scrollbar -->
80
+ <div class="sidebar-left" data-simplebar style="height: 100%;">
81
+ <!-- sidebar menu -->
82
+ <ul class="nav sidebar-inner" id="sidebar-menu">
83
+
84
+
85
+
86
+ <li
87
+ >
88
+ <a class="sidenav-item-link" href="index.html">
89
+ <i class="mdi mdi-briefcase-account-outline"></i>
90
+ <span class="nav-text">Business Dashboard</span>
91
+ </a>
92
+ </li>
93
+
94
+
95
+
96
+
97
+
98
+ <li
99
+ >
100
+ <a class="sidenav-item-link" href="analytics.html">
101
+ <i class="mdi mdi-chart-line"></i>
102
+ <span class="nav-text">Analytics Dashboard</span>
103
+ </a>
104
+ </li>
105
+
106
+
107
+
108
+
109
+
110
+ <li class="section-title">
111
+ Apps
112
+ </li>
113
+
114
+
115
+
116
+
117
+
118
+ <li
119
+ >
120
+ <a class="sidenav-item-link" href="chat.html">
121
+ <i class="mdi mdi-wechat"></i>
122
+ <span class="nav-text">Chat</span>
123
+ </a>
124
+ </li>
125
+
126
+
127
+
128
+
129
+
130
+ <li
131
+ >
132
+ <a class="sidenav-item-link" href="contacts.html">
133
+ <i class="mdi mdi-phone"></i>
134
+ <span class="nav-text">Contacts</span>
135
+ </a>
136
+ </li>
137
+
138
+
139
+
140
+
141
+
142
+ <li
143
+ >
144
+ <a class="sidenav-item-link" href="team.html">
145
+ <i class="mdi mdi-account-group"></i>
146
+ <span class="nav-text">Team</span>
147
+ </a>
148
+ </li>
149
+
150
+
151
+
152
+
153
+
154
+ <li
155
+ >
156
+ <a class="sidenav-item-link" href="calendar.html">
157
+ <i class="mdi mdi-calendar-check"></i>
158
+ <span class="nav-text">Calendar</span>
159
+ </a>
160
+ </li>
161
+
162
+
163
+
164
+
165
+
166
+ <li class="has-sub" >
167
+ <a class="sidenav-item-link" href="javascript:void(0)" data-toggle="collapse" data-target="#email"
168
+ aria-expanded="false" aria-controls="email">
169
+ <i class="mdi mdi-email"></i>
170
+ <span class="nav-text">email</span> <b class="caret"></b>
171
+ </a>
172
+ <ul class="collapse" id="email"
173
+ data-parent="#sidebar-menu">
174
+ <div class="sub-menu">
175
+
176
+
177
+
178
+ <li >
179
+ <a class="sidenav-item-link" href="email-inbox.html">
180
+ <span class="nav-text">Email Inbox</span>
181
+
182
+ </a>
183
+ </li>
184
+
185
+
186
+
187
+
188
+
189
+
190
+ <li >
191
+ <a class="sidenav-item-link" href="email-details.html">
192
+ <span class="nav-text">Email Details</span>
193
+
194
+ </a>
195
+ </li>
196
+
197
+
198
+
199
+
200
+
201
+
202
+ <li >
203
+ <a class="sidenav-item-link" href="email-compose.html">
204
+ <span class="nav-text">Email Compose</span>
205
+
206
+ </a>
207
+ </li>
208
+
209
+
210
+
211
+
212
+ </div>
213
+ </ul>
214
+ </li>
215
+
216
+
217
+
218
+
219
+
220
+ <li class="section-title">
221
+ UI Elements
222
+ </li>
223
+
224
+
225
+
226
+
227
+
228
+ <li class="has-sub active expand" >
229
+ <a class="sidenav-item-link" href="javascript:void(0)" data-toggle="collapse" data-target="#ui-elements"
230
+ aria-expanded="false" aria-controls="ui-elements">
231
+ <i class="mdi mdi-folder-outline"></i>
232
+ <span class="nav-text">UI Components</span> <b class="caret"></b>
233
+ </a>
234
+ <ul class="collapse show" id="ui-elements"
235
+ data-parent="#sidebar-menu">
236
+ <div class="sub-menu">
237
+
238
+
239
+
240
+ <li >
241
+ <a class="sidenav-item-link" href="alert.html">
242
+ <span class="nav-text">Alert</span>
243
+
244
+ </a>
245
+ </li>
246
+
247
+
248
+
249
+
250
+
251
+
252
+ <li >
253
+ <a class="sidenav-item-link" href="badge.html">
254
+ <span class="nav-text">Badge</span>
255
+
256
+ </a>
257
+ </li>
258
+
259
+
260
+
261
+
262
+
263
+
264
+ <li >
265
+ <a class="sidenav-item-link" href="breadcrumb.html">
266
+ <span class="nav-text">Breadcrumb</span>
267
+
268
+ </a>
269
+ </li>
270
+
271
+
272
+
273
+
274
+
275
+ <li class="has-sub" >
276
+ <a class="sidenav-item-link" href="javascript:void(0)" data-toggle="collapse" data-target="#buttons"
277
+ aria-expanded="false" aria-controls="buttons">
278
+ <span class="nav-text">Buttons</span> <b class="caret"></b>
279
+ </a>
280
+ <ul class="collapse" id="buttons">
281
+ <div class="sub-menu">
282
+
283
+ <li >
284
+ <a href="button-default.html">Button Default</a>
285
+ </li>
286
+
287
+ <li >
288
+ <a href="button-dropdown.html">Button Dropdown</a>
289
+ </li>
290
+
291
+ <li >
292
+ <a href="button-group.html">Button Group</a>
293
+ </li>
294
+
295
+ <li >
296
+ <a href="button-social.html">Button Social</a>
297
+ </li>
298
+
299
+ <li >
300
+ <a href="button-loading.html">Button Loading</a>
301
+ </li>
302
+
303
+ </div>
304
+ </ul>
305
+ </li>
306
+
307
+
308
+
309
+
310
+
311
+ <li >
312
+ <a class="sidenav-item-link" href="card.html">
313
+ <span class="nav-text">Card</span>
314
+
315
+ </a>
316
+ </li>
317
+
318
+
319
+
320
+
321
+
322
+
323
+ <li >
324
+ <a class="sidenav-item-link" href="carousel.html">
325
+ <span class="nav-text">Carousel</span>
326
+
327
+ </a>
328
+ </li>
329
+
330
+
331
+
332
+
333
+
334
+
335
+ <li >
336
+ <a class="sidenav-item-link" href="collapse.html">
337
+ <span class="nav-text">Collapse</span>
338
+
339
+ </a>
340
+ </li>
341
+
342
+
343
+
344
+
345
+
346
+
347
+ <li >
348
+ <a class="sidenav-item-link" href="editor.html">
349
+ <span class="nav-text">Editor</span>
350
+
351
+ </a>
352
+ </li>
353
+
354
+
355
+
356
+
357
+
358
+
359
+ <li >
360
+ <a class="sidenav-item-link" href="list-group.html">
361
+ <span class="nav-text">List Group</span>
362
+
363
+ </a>
364
+ </li>
365
+
366
+
367
+
368
+
369
+
370
+
371
+ <li >
372
+ <a class="sidenav-item-link" href="modal.html">
373
+ <span class="nav-text">Modal</span>
374
+
375
+ </a>
376
+ </li>
377
+
378
+
379
+
380
+
381
+
382
+
383
+ <li >
384
+ <a class="sidenav-item-link" href="pagination.html">
385
+ <span class="nav-text">Pagination</span>
386
+
387
+ </a>
388
+ </li>
389
+
390
+
391
+
392
+
393
+
394
+
395
+ <li >
396
+ <a class="sidenav-item-link" href="popover-tooltip.html">
397
+ <span class="nav-text">Popover & Tooltip</span>
398
+
399
+ </a>
400
+ </li>
401
+
402
+
403
+
404
+
405
+
406
+
407
+ <li >
408
+ <a class="sidenav-item-link" href="progress-bar.html">
409
+ <span class="nav-text">Progress Bar</span>
410
+
411
+ </a>
412
+ </li>
413
+
414
+
415
+
416
+
417
+
418
+
419
+ <li >
420
+ <a class="sidenav-item-link" href="spinner.html">
421
+ <span class="nav-text">Spinner</span>
422
+
423
+ </a>
424
+ </li>
425
+
426
+
427
+
428
+
429
+
430
+
431
+ <li >
432
+ <a class="sidenav-item-link" href="switches.html">
433
+ <span class="nav-text">Switches</span>
434
+
435
+ </a>
436
+ </li>
437
+
438
+
439
+
440
+
441
+
442
+ <li class="has-sub" >
443
+ <a class="sidenav-item-link" href="javascript:void(0)" data-toggle="collapse" data-target="#tables"
444
+ aria-expanded="false" aria-controls="tables">
445
+ <span class="nav-text">Tables</span> <b class="caret"></b>
446
+ </a>
447
+ <ul class="collapse" id="tables">
448
+ <div class="sub-menu">
449
+
450
+ <li >
451
+ <a href="bootstarp-tables.html">Bootstrap Tables</a>
452
+ </li>
453
+
454
+ <li >
455
+ <a href="data-tables.html">Data Tables</a>
456
+ </li>
457
+
458
+ </div>
459
+ </ul>
460
+ </li>
461
+
462
+
463
+
464
+
465
+
466
+ <li >
467
+ <a class="sidenav-item-link" href="tab.html">
468
+ <span class="nav-text">Tab</span>
469
+
470
+ </a>
471
+ </li>
472
+
473
+
474
+
475
+
476
+
477
+
478
+ <li >
479
+ <a class="sidenav-item-link" href="toaster.html">
480
+ <span class="nav-text">Toaster</span>
481
+
482
+ </a>
483
+ </li>
484
+
485
+
486
+
487
+
488
+
489
+ <li class="has-sub" >
490
+ <a class="sidenav-item-link" href="javascript:void(0)" data-toggle="collapse" data-target="#icons"
491
+ aria-expanded="false" aria-controls="icons">
492
+ <span class="nav-text">Icons</span> <b class="caret"></b>
493
+ </a>
494
+ <ul class="collapse" id="icons">
495
+ <div class="sub-menu">
496
+
497
+ <li >
498
+ <a href="material-icons.html">Material Icon</a>
499
+ </li>
500
+
501
+ <li >
502
+ <a href="flag-icons.html">Flag Icon</a>
503
+ </li>
504
+
505
+ </div>
506
+ </ul>
507
+ </li>
508
+
509
+
510
+
511
+
512
+ <li class="has-sub" >
513
+ <a class="sidenav-item-link" href="javascript:void(0)" data-toggle="collapse" data-target="#forms"
514
+ aria-expanded="false" aria-controls="forms">
515
+ <span class="nav-text">Forms</span> <b class="caret"></b>
516
+ </a>
517
+ <ul class="collapse" id="forms">
518
+ <div class="sub-menu">
519
+
520
+ <li >
521
+ <a href="basic-input.html">Basic Input</a>
522
+ </li>
523
+
524
+ <li >
525
+ <a href="input-group.html">Input Group</a>
526
+ </li>
527
+
528
+ <li >
529
+ <a href="checkbox-radio.html">Checkbox & Radio</a>
530
+ </li>
531
+
532
+ <li >
533
+ <a href="form-validation.html">Form Validation</a>
534
+ </li>
535
+
536
+ <li >
537
+ <a href="form-advance.html">Form Advance</a>
538
+ </li>
539
+
540
+ </div>
541
+ </ul>
542
+ </li>
543
+
544
+
545
+
546
+
547
+ <li class="has-sub active expand" >
548
+ <a class="sidenav-item-link" href="javascript:void(0)" data-toggle="collapse" data-target="#maps"
549
+ aria-expanded="false" aria-controls="maps">
550
+ <span class="nav-text">Maps</span> <b class="caret"></b>
551
+ </a>
552
+ <ul class="collapse show" id="maps">
553
+ <div class="sub-menu">
554
+
555
+ <li class="active" >
556
+ <a href="google-maps.html">Google Map</a>
557
+ </li>
558
+
559
+ <li >
560
+ <a href="vector-maps.html">Vector Map</a>
561
+ </li>
562
+
563
+ </div>
564
+ </ul>
565
+ </li>
566
+
567
+
568
+
569
+
570
+ <li class="has-sub" >
571
+ <a class="sidenav-item-link" href="javascript:void(0)" data-toggle="collapse" data-target="#widgets"
572
+ aria-expanded="false" aria-controls="widgets">
573
+ <span class="nav-text">Widgets</span> <b class="caret"></b>
574
+ </a>
575
+ <ul class="collapse" id="widgets">
576
+ <div class="sub-menu">
577
+
578
+ <li >
579
+ <a href="widgets-general.html">General Widget</a>
580
+ </li>
581
+
582
+ <li >
583
+ <a href="widgets-chart.html">Chart Widget</a>
584
+ </li>
585
+
586
+ </div>
587
+ </ul>
588
+ </li>
589
+
590
+
591
+
592
+ </div>
593
+ </ul>
594
+ </li>
595
+
596
+
597
+
598
+
599
+
600
+ <li class="has-sub" >
601
+ <a class="sidenav-item-link" href="javascript:void(0)" data-toggle="collapse" data-target="#charts"
602
+ aria-expanded="false" aria-controls="charts">
603
+ <i class="mdi mdi-chart-pie"></i>
604
+ <span class="nav-text">Charts</span> <b class="caret"></b>
605
+ </a>
606
+ <ul class="collapse" id="charts"
607
+ data-parent="#sidebar-menu">
608
+ <div class="sub-menu">
609
+
610
+
611
+
612
+ <li >
613
+ <a class="sidenav-item-link" href="apex-charts.html">
614
+ <span class="nav-text">Apex Charts</span>
615
+
616
+ </a>
617
+ </li>
618
+
619
+
620
+
621
+
622
+ </div>
623
+ </ul>
624
+ </li>
625
+
626
+
627
+
628
+
629
+
630
+ <li class="section-title">
631
+ Pages
632
+ </li>
633
+
634
+
635
+
636
+
637
+
638
+ <li class="has-sub" >
639
+ <a class="sidenav-item-link" href="javascript:void(0)" data-toggle="collapse" data-target="#users"
640
+ aria-expanded="false" aria-controls="users">
641
+ <i class="mdi mdi-image-filter-none"></i>
642
+ <span class="nav-text">User</span> <b class="caret"></b>
643
+ </a>
644
+ <ul class="collapse" id="users"
645
+ data-parent="#sidebar-menu">
646
+ <div class="sub-menu">
647
+
648
+
649
+
650
+ <li >
651
+ <a class="sidenav-item-link" href="user-profile.html">
652
+ <span class="nav-text">User Profile</span>
653
+
654
+ </a>
655
+ </li>
656
+
657
+
658
+
659
+
660
+
661
+
662
+ <li >
663
+ <a class="sidenav-item-link" href="user-activities.html">
664
+ <span class="nav-text">User Activities</span>
665
+
666
+ </a>
667
+ </li>
668
+
669
+
670
+
671
+
672
+
673
+
674
+ <li >
675
+ <a class="sidenav-item-link" href="user-profile-settings.html">
676
+ <span class="nav-text">User Profile Settings</span>
677
+
678
+ </a>
679
+ </li>
680
+
681
+
682
+
683
+
684
+
685
+
686
+ <li >
687
+ <a class="sidenav-item-link" href="user-account-settings.html">
688
+ <span class="nav-text">User Account Settings</span>
689
+
690
+ </a>
691
+ </li>
692
+
693
+
694
+
695
+
696
+
697
+
698
+ <li >
699
+ <a class="sidenav-item-link" href="user-planing-settings.html">
700
+ <span class="nav-text">User Planing Settings</span>
701
+
702
+ </a>
703
+ </li>
704
+
705
+
706
+
707
+
708
+
709
+
710
+ <li >
711
+ <a class="sidenav-item-link" href="user-billing.html">
712
+ <span class="nav-text">User billing</span>
713
+
714
+ </a>
715
+ </li>
716
+
717
+
718
+
719
+
720
+
721
+
722
+ <li >
723
+ <a class="sidenav-item-link" href="user-notify-settings.html">
724
+ <span class="nav-text">User Notify Settings</span>
725
+
726
+ </a>
727
+ </li>
728
+
729
+
730
+
731
+
732
+ </div>
733
+ </ul>
734
+ </li>
735
+
736
+
737
+
738
+
739
+
740
+ <li class="has-sub" >
741
+ <a class="sidenav-item-link" href="javascript:void(0)" data-toggle="collapse" data-target="#authentication"
742
+ aria-expanded="false" aria-controls="authentication">
743
+ <i class="mdi mdi-account"></i>
744
+ <span class="nav-text">Authentication</span> <b class="caret"></b>
745
+ </a>
746
+ <ul class="collapse" id="authentication"
747
+ data-parent="#sidebar-menu">
748
+ <div class="sub-menu">
749
+
750
+
751
+
752
+ <li >
753
+ <a class="sidenav-item-link" href="sign-in.html">
754
+ <span class="nav-text">Sign In</span>
755
+
756
+ </a>
757
+ </li>
758
+
759
+
760
+
761
+
762
+
763
+
764
+ <li >
765
+ <a class="sidenav-item-link" href="sign-up.html">
766
+ <span class="nav-text">Sign Up</span>
767
+
768
+ </a>
769
+ </li>
770
+
771
+
772
+
773
+
774
+
775
+
776
+ <li >
777
+ <a class="sidenav-item-link" href="reset-password.html">
778
+ <span class="nav-text">Reset Password</span>
779
+
780
+ </a>
781
+ </li>
782
+
783
+
784
+
785
+
786
+ </div>
787
+ </ul>
788
+ </li>
789
+
790
+
791
+
792
+
793
+
794
+ <li class="has-sub" >
795
+ <a class="sidenav-item-link" href="javascript:void(0)" data-toggle="collapse" data-target="#other-page"
796
+ aria-expanded="false" aria-controls="other-page">
797
+ <i class="mdi mdi-file-multiple"></i>
798
+ <span class="nav-text">Other pages</span> <b class="caret"></b>
799
+ </a>
800
+ <ul class="collapse" id="other-page"
801
+ data-parent="#sidebar-menu">
802
+ <div class="sub-menu">
803
+
804
+
805
+
806
+ <li >
807
+ <a class="sidenav-item-link" href="invoice.html">
808
+ <span class="nav-text">Invoice</span>
809
+
810
+ </a>
811
+ </li>
812
+
813
+
814
+
815
+
816
+
817
+
818
+ <li >
819
+ <a class="sidenav-item-link" href="404.html">
820
+ <span class="nav-text">404 page</span>
821
+
822
+ </a>
823
+ </li>
824
+
825
+
826
+
827
+
828
+
829
+
830
+ <li >
831
+ <a class="sidenav-item-link" href="page-comingsoon.html">
832
+ <span class="nav-text">Coming Soon</span>
833
+
834
+ </a>
835
+ </li>
836
+
837
+
838
+
839
+
840
+
841
+
842
+ <li >
843
+ <a class="sidenav-item-link" href="page-maintenance.html">
844
+ <span class="nav-text">Maintenance</span>
845
+
846
+ </a>
847
+ </li>
848
+
849
+
850
+
851
+
852
+ </div>
853
+ </ul>
854
+ </li>
855
+
856
+
857
+
858
+
859
+
860
+ <li class="section-title">
861
+ Documentation
862
+ </li>
863
+
864
+
865
+
866
+
867
+
868
+ <li
869
+ >
870
+ <a class="sidenav-item-link" href="getting-started.html">
871
+ <i class="mdi mdi-airplane"></i>
872
+ <span class="nav-text">Getting Started</span>
873
+ </a>
874
+ </li>
875
+
876
+
877
+
878
+
879
+
880
+ <li class="has-sub" >
881
+ <a class="sidenav-item-link" href="javascript:void(0)" data-toggle="collapse" data-target="#customization"
882
+ aria-expanded="false" aria-controls="customization">
883
+ <i class="mdi mdi-square-edit-outline"></i>
884
+ <span class="nav-text">Customization</span> <b class="caret"></b>
885
+ </a>
886
+ <ul class="collapse" id="customization"
887
+ data-parent="#sidebar-menu">
888
+ <div class="sub-menu">
889
+
890
+
891
+
892
+ <li >
893
+ <a class="sidenav-item-link" href="navbar-customization.html">
894
+ <span class="nav-text">Navbar</span>
895
+
896
+ </a>
897
+ </li>
898
+
899
+
900
+
901
+
902
+
903
+
904
+ <li >
905
+ <a class="sidenav-item-link" href="sidebar-customization.html">
906
+ <span class="nav-text">Sidebar</span>
907
+
908
+ </a>
909
+ </li>
910
+
911
+
912
+
913
+
914
+
915
+
916
+ <li >
917
+ <a class="sidenav-item-link" href="styling.html">
918
+ <span class="nav-text">Styling</span>
919
+
920
+ </a>
921
+ </li>
922
+
923
+
924
+
925
+
926
+ </div>
927
+ </ul>
928
+ </li>
929
+
930
+
931
+
932
+ </ul>
933
+
934
+ </div>
935
+
936
+ <div class="sidebar-footer">
937
+ <div class="sidebar-footer-content">
938
+ <ul class="d-flex">
939
+ <li>
940
+ <a href="user-account-settings.html" data-toggle="tooltip" title="Profile settings"><i class="mdi mdi-settings"></i></a></li>
941
+ <li>
942
+ <a href="#" data-toggle="tooltip" title="No chat messages"><i class="mdi mdi-chat-processing"></i></a>
943
+ </li>
944
+ </ul>
945
+ </div>
946
+ </div>
947
+ </div>
948
+ </aside>
949
+
950
+
951
+
952
+ <!-- ====================================
953
+ ——— PAGE WRAPPER
954
+ ===================================== -->
955
+ <div class="page-wrapper">
956
+
957
+ <!-- Header -->
958
+ <header class="main-header" id="header">
959
+ <nav class="navbar navbar-expand-lg navbar-light" id="navbar">
960
+ <!-- Sidebar toggle button -->
961
+ <button id="sidebar-toggler" class="sidebar-toggle">
962
+ <span class="sr-only">Toggle navigation</span>
963
+ </button>
964
+
965
+ <span class="page-title">google maps</span>
966
+
967
+ <div class="navbar-right ">
968
+
969
+ <!-- search form -->
970
+ <div class="search-form">
971
+ <form action="index.html" method="get">
972
+ <div class="input-group input-group-sm" id="input-group-search">
973
+ <input type="text" autocomplete="off" name="query" id="search-input" class="form-control" placeholder="Search..." />
974
+ <div class="input-group-append">
975
+ <button class="btn" type="button">/</button>
976
+ </div>
977
+ </div>
978
+ </form>
979
+ <ul class="dropdown-menu dropdown-menu-search">
980
+
981
+ <li class="nav-item">
982
+ <a class="nav-link" href="index.html">Morbi leo risus</a>
983
+ </li>
984
+ <li class="nav-item">
985
+ <a class="nav-link" href="index.html">Dapibus ac facilisis in</a>
986
+ </li>
987
+ <li class="nav-item">
988
+ <a class="nav-link" href="index.html">Porta ac consectetur ac</a>
989
+ </li>
990
+ <li class="nav-item">
991
+ <a class="nav-link" href="index.html">Vestibulum at eros</a>
992
+ </li>
993
+
994
+ </ul>
995
+
996
+ </div>
997
+
998
+ <ul class="nav navbar-nav">
999
+ <!-- Offcanvas -->
1000
+ <li class="custom-dropdown">
1001
+ <a class="offcanvas-toggler active custom-dropdown-toggler" data-offcanvas="contact-off" href="javascript:" >
1002
+ <i class="mdi mdi-contacts icon"></i>
1003
+ </a>
1004
+ </li>
1005
+ <li class="custom-dropdown">
1006
+ <button class="notify-toggler custom-dropdown-toggler">
1007
+ <i class="mdi mdi-bell-outline icon"></i>
1008
+ <span class="badge badge-xs rounded-circle">21</span>
1009
+ </button>
1010
+ <div class="dropdown-notify">
1011
+
1012
+ <header>
1013
+ <div class="nav nav-underline" id="nav-tab" role="tablist">
1014
+ <a class="nav-item nav-link active" id="all-tabs" data-toggle="tab" href="#all" role="tab" aria-controls="nav-home"
1015
+ aria-selected="true">All (5)</a>
1016
+ <a class="nav-item nav-link" id="message-tab" data-toggle="tab" href="#message" role="tab" aria-controls="nav-profile"
1017
+ aria-selected="false">Msgs (4)</a>
1018
+ <a class="nav-item nav-link" id="other-tab" data-toggle="tab" href="#other" role="tab" aria-controls="nav-contact"
1019
+ aria-selected="false">Others (3)</a>
1020
+ </div>
1021
+ </header>
1022
+
1023
+ <div class="" data-simplebar style="height: 325px;">
1024
+ <div class="tab-content" id="myTabContent">
1025
+
1026
+ <div class="tab-pane fade show active" id="all" role="tabpanel" aria-labelledby="all-tabs">
1027
+
1028
+ <div class="media media-sm bg-warning-10 p-4 mb-0">
1029
+ <div class="media-sm-wrapper">
1030
+ <a href="user-profile.html">
1031
+ <img src="images/user/user-sm-02.jpg" alt="User Image">
1032
+ </a>
1033
+ </div>
1034
+ <div class="media-body">
1035
+ <a href="user-profile.html">
1036
+ <span class="title mb-0">John Doe</span>
1037
+ <span class="discribe">Extremity sweetness difficult behaviour he of. On disposal of as landlord horrible. Afraid at highly months do things on at.</span>
1038
+ <span class="time">
1039
+ <time>Just now</time>...
1040
+ </span>
1041
+ </a>
1042
+ </div>
1043
+ </div>
1044
+
1045
+ <div class="media media-sm p-4 bg-light mb-0">
1046
+ <div class="media-sm-wrapper bg-primary">
1047
+ <a href="user-profile.html">
1048
+ <i class="mdi mdi-calendar-check-outline"></i>
1049
+ </a>
1050
+ </div>
1051
+ <div class="media-body">
1052
+ <a href="user-profile.html">
1053
+ <span class="title mb-0">New event added</span>
1054
+ <span class="discribe">1/3/2014 (1pm - 2pm)</span>
1055
+ <span class="time">
1056
+ <time>10 min ago...</time>...
1057
+ </span>
1058
+ </a>
1059
+ </div>
1060
+ </div>
1061
+
1062
+ <div class="media media-sm p-4 mb-0">
1063
+ <div class="media-sm-wrapper">
1064
+ <a href="user-profile.html">
1065
+ <img src="images/user/user-sm-03.jpg" alt="User Image">
1066
+ </a>
1067
+ </div>
1068
+ <div class="media-body">
1069
+ <a href="user-profile.html">
1070
+ <span class="title mb-0">Sagge Hudson</span>
1071
+ <span class="discribe">On disposal of as landlord Afraid at highly months do things on at.</span>
1072
+ <span class="time">
1073
+ <time>1 hrs ago</time>...
1074
+ </span>
1075
+ </a>
1076
+ </div>
1077
+ </div>
1078
+
1079
+ <div class="media media-sm p-4 mb-0">
1080
+ <div class="media-sm-wrapper bg-info-dark">
1081
+ <a href="user-profile.html">
1082
+ <i class="mdi mdi-account-multiple-check"></i>
1083
+ </a>
1084
+ </div>
1085
+ <div class="media-body">
1086
+ <a href="user-profile.html">
1087
+ <span class="title mb-0">Add request</span>
1088
+ <span class="discribe">Add Dany Jones as your contact.</span>
1089
+ <div class="buttons">
1090
+ <a href="#" class="btn btn-sm btn-success shadow-none text-white">accept</a>
1091
+ <a href="#" class="btn btn-sm shadow-none">delete</a>
1092
+ </div>
1093
+ <span class="time">
1094
+ <time>6 hrs ago</time>...
1095
+ </span>
1096
+ </a>
1097
+ </div>
1098
+ </div>
1099
+
1100
+ <div class="media media-sm p-4 mb-0">
1101
+ <div class="media-sm-wrapper bg-info">
1102
+ <a href="user-profile.html">
1103
+ <i class="mdi mdi-playlist-check"></i>
1104
+ </a>
1105
+ </div>
1106
+ <div class="media-body">
1107
+ <a href="user-profile.html">
1108
+ <span class="title mb-0">Task complete</span>
1109
+ <span class="discribe">Afraid at highly months do things on at.</span>
1110
+ <span class="time">
1111
+ <time>1 hrs ago</time>...
1112
+ </span>
1113
+ </a>
1114
+ </div>
1115
+ </div>
1116
+
1117
+ </div>
1118
+
1119
+ <div class="tab-pane fade" id="message" role="tabpanel" aria-labelledby="message-tab">
1120
+
1121
+ <div class="media media-sm p-4 mb-0">
1122
+ <div class="media-sm-wrapper">
1123
+ <a href="user-profile.html">
1124
+ <img src="images/user/user-sm-01.jpg" alt="User Image">
1125
+ </a>
1126
+ </div>
1127
+ <div class="media-body">
1128
+ <a href="user-profile.html">
1129
+ <span class="title mb-0">Selena Wagner</span>
1130
+ <span class="discribe">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</span>
1131
+ <span class="time">
1132
+ <time>15 min ago</time>...
1133
+ </span>
1134
+ </a>
1135
+ </div>
1136
+ </div>
1137
+
1138
+ <div class="media media-sm p-4 mb-0">
1139
+ <div class="media-sm-wrapper">
1140
+ <a href="user-profile.html">
1141
+ <img src="images/user/user-sm-03.jpg" alt="User Image">
1142
+ </a>
1143
+ </div>
1144
+ <div class="media-body">
1145
+ <a href="user-profile.html">
1146
+ <span class="title mb-0">Sagge Hudson</span>
1147
+ <span class="discribe">On disposal of as landlord Afraid at highly months do things on at.</span>
1148
+ <span class="time">
1149
+ <time>1 hrs ago</time>...
1150
+ </span>
1151
+ </a>
1152
+ </div>
1153
+ </div>
1154
+
1155
+ <div class="media media-sm bg-warning-10 p-4 mb-0">
1156
+ <div class="media-sm-wrapper">
1157
+ <a href="user-profile.html">
1158
+ <img src="images/user/user-sm-02.jpg" alt="User Image">
1159
+ </a>
1160
+ </div>
1161
+ <div class="media-body">
1162
+ <a href="user-profile.html">
1163
+ <span class="title mb-0">John Doe</span>
1164
+ <span class="discribe">Extremity sweetness difficult behaviour he of. On disposal of as landlord horrible. Afraid
1165
+ at highly months do things on at.</span>
1166
+ <span class="time">
1167
+ <time>Just now</time>...
1168
+ </span>
1169
+ </a>
1170
+ </div>
1171
+ </div>
1172
+
1173
+ <div class="media media-sm p-4 mb-0">
1174
+ <div class="media-sm-wrapper">
1175
+ <a href="user-profile.html">
1176
+ <img src="images/user/user-sm-04.jpg" alt="User Image">
1177
+ </a>
1178
+ </div>
1179
+ <div class="media-body">
1180
+ <a href="user-profile.html">
1181
+ <span class="title mb-0">Albrecht Straub</span>
1182
+ <span class="discribe"> Beatae quia natus assumenda laboriosam, nisi perferendis aliquid consectetur expedita non tenetur.</span>
1183
+ <span class="time">
1184
+ <time>Just now</time>...
1185
+ </span>
1186
+ </a>
1187
+ </div>
1188
+ </div>
1189
+
1190
+ </div>
1191
+ <div class="tab-pane fade" id="other" role="tabpanel" aria-labelledby="contact-tab">
1192
+
1193
+ <div class="media media-sm p-4 bg-light mb-0">
1194
+ <div class="media-sm-wrapper bg-primary">
1195
+ <a href="user-profile.html">
1196
+ <i class="mdi mdi-calendar-check-outline"></i>
1197
+ </a>
1198
+ </div>
1199
+ <div class="media-body">
1200
+ <a href="user-profile.html">
1201
+ <span class="title mb-0">New event added</span>
1202
+ <span class="discribe">1/3/2014 (1pm - 2pm)</span>
1203
+ <span class="time">
1204
+ <time>10 min ago...</time>...
1205
+ </span>
1206
+ </a>
1207
+ </div>
1208
+ </div>
1209
+
1210
+ <div class="media media-sm p-4 mb-0">
1211
+ <div class="media-sm-wrapper bg-info-dark">
1212
+ <a href="user-profile.html">
1213
+ <i class="mdi mdi-account-multiple-check"></i>
1214
+ </a>
1215
+ </div>
1216
+ <div class="media-body">
1217
+ <a href="user-profile.html">
1218
+ <span class="title mb-0">Add request</span>
1219
+ <span class="discribe">Add Dany Jones as your contact.</span>
1220
+ <div class="buttons">
1221
+ <a href="#" class="btn btn-sm btn-success shadow-none text-white">accept</a>
1222
+ <a href="#" class="btn btn-sm shadow-none">delete</a>
1223
+ </div>
1224
+ <span class="time">
1225
+ <time>6 hrs ago</time>...
1226
+ </span>
1227
+ </a>
1228
+ </div>
1229
+ </div>
1230
+
1231
+ <div class="media media-sm p-4 mb-0">
1232
+ <div class="media-sm-wrapper bg-info">
1233
+ <a href="user-profile.html">
1234
+ <i class="mdi mdi-playlist-check"></i>
1235
+ </a>
1236
+ </div>
1237
+ <div class="media-body">
1238
+ <a href="user-profile.html">
1239
+ <span class="title mb-0">Task complete</span>
1240
+ <span class="discribe">Afraid at highly months do things on at.</span>
1241
+ <span class="time">
1242
+ <time>1 hrs ago</time>...
1243
+ </span>
1244
+ </a>
1245
+ </div>
1246
+ </div>
1247
+
1248
+ </div>
1249
+ </div>
1250
+ </div>
1251
+
1252
+ <footer class="border-top dropdown-notify-footer">
1253
+ <div class="d-flex justify-content-between align-items-center py-2 px-4">
1254
+ <span>Last updated 3 min ago</span>
1255
+ <a id="refress-button" href="javascript:" class="btn mdi mdi-cached btn-refress"></a>
1256
+ </div>
1257
+ </footer>
1258
+ </div>
1259
+ </li>
1260
+ <!-- User Account -->
1261
+ <li class="dropdown user-menu">
1262
+ <button class="dropdown-toggle nav-link" data-toggle="dropdown">
1263
+ <img src="images/user/user-xs-01.jpg" class="user-image rounded-circle" alt="User Image" />
1264
+ <span class="d-none d-lg-inline-block">John Doe</span>
1265
+ </button>
1266
+ <ul class="dropdown-menu dropdown-menu-right">
1267
+ <li>
1268
+ <a class="dropdown-link-item" href="user-profile.html">
1269
+ <i class="mdi mdi-account-outline"></i>
1270
+ <span class="nav-text">My Profile</span>
1271
+ </a>
1272
+ </li>
1273
+ <li>
1274
+ <a class="dropdown-link-item" href="email-inbox.html">
1275
+ <i class="mdi mdi-email-outline"></i>
1276
+ <span class="nav-text">Message</span>
1277
+ <span class="badge badge-pill badge-primary">24</span>
1278
+ </a>
1279
+ </li>
1280
+ <li>
1281
+ <a class="dropdown-link-item" href="user-activities.html">
1282
+ <i class="mdi mdi-diamond-stone"></i>
1283
+ <span class="nav-text">Activitise</span></a>
1284
+ </li>
1285
+ <li>
1286
+ <a class="dropdown-link-item" href="user-account-settings.html">
1287
+ <i class="mdi mdi-settings"></i>
1288
+ <span class="nav-text">Account Setting</span>
1289
+ </a>
1290
+ </li>
1291
+
1292
+ <li class="dropdown-footer">
1293
+ <a class="dropdown-link-item" href="sign-in.html"> <i class="mdi mdi-logout"></i> Log Out </a>
1294
+ </li>
1295
+ </ul>
1296
+ </li>
1297
+ </ul>
1298
+ </div>
1299
+ </nav>
1300
+
1301
+
1302
+ </header>
1303
+
1304
+ <!-- ====================================
1305
+ ——— CONTENT WRAPPER
1306
+ ===================================== -->
1307
+ <div class="content-wrapper">
1308
+ <div class="content"><!-- For Components documentaion -->
1309
+ <div class="card card-default">
1310
+ <div class="px-6 py-4">
1311
+ <p>Mono provides a variety of <span class="text-secondary text-capitalize"> Google Map </span> components with a
1312
+ little customization that suits its design standards. For more information, please see the official <a
1313
+ class="font-weight-bold" href="https://developers.google.com/maps/documentation/javascript/tutorial" target="_blank">Google Map Documentaion.</a></p>
1314
+ </div>
1315
+ </div>
1316
+
1317
+ <div class="row" id="google-map">
1318
+ <div class="col-lg-6">
1319
+ <!-- Basic Demo -->
1320
+ <div class="card card-default">
1321
+ <div class="card-header">
1322
+ <h2>Basic Demo</h2>
1323
+
1324
+ <a class="btn mdi mdi-code-tags" data-toggle="collapse" href="#collapse-google-map-basic" role="button"
1325
+ aria-expanded="false" aria-controls="collapse-google-map-basic"> </a>
1326
+
1327
+
1328
+ </div>
1329
+
1330
+ <div class="card-body">
1331
+ <div class="collapse" id="collapse-google-map-basic">
1332
+ <pre class="language-html mb-4">
1333
+ <code >
1334
+ &lt;div id="basicMap" class="map-container">&lt;/div>
1335
+ </code>
1336
+ </pre>
1337
+ </div>
1338
+ <div id="basicMap" class="map-container"></div>
1339
+ </div>
1340
+ </div>
1341
+
1342
+ <!-- Polygonal Map -->
1343
+ <div class="card card-default">
1344
+ <div class="card-header">
1345
+ <h2>Polygonal Map</h2>
1346
+ <a class="btn mdi mdi-code-tags" data-toggle="collapse" href="#collapse-google-map-polygonal"
1347
+ role="button" aria-expanded="false" aria-controls="collapse-google-map-polygonal"> </a>
1348
+
1349
+
1350
+ </div>
1351
+ <div class="card-body">
1352
+ <div class="collapse" id="collapse-google-map-polygonal">
1353
+ <pre class="language-html mb-4">
1354
+ <code >
1355
+ &lt;div id="polygonalMap" class="map-container">&lt;/div>
1356
+ </code>
1357
+ </pre>
1358
+ </div>
1359
+ <div id="polygonalMap" class="map-container"></div>
1360
+ </div>
1361
+ </div>
1362
+
1363
+ </div>
1364
+
1365
+ <div class="col-lg-6">
1366
+ <!-- Map Marker -->
1367
+ <div class="card card-default">
1368
+ <div class="card-header">
1369
+ <h2>Map Marker</h2>
1370
+ <a class="btn mdi mdi-code-tags" data-toggle="collapse" href="#collapse-google-map-marker" role="button"
1371
+ aria-expanded="false" aria-controls="collapse-google-map-marker"> </a>
1372
+
1373
+
1374
+ </div>
1375
+ <div class="card-body">
1376
+ <div class="collapse" id="collapse-google-map-marker">
1377
+ <pre class="language-html mb-4">
1378
+ <code >
1379
+ &lt;div id="mapMarker" class="map-container">&lt;/div>
1380
+ </code>
1381
+ </pre>
1382
+ </div>
1383
+ <div id="mapMarker" class="map-container"></div>
1384
+ </div>
1385
+ </div>
1386
+
1387
+ <!-- Routes Map -->
1388
+ <div class="card card-default">
1389
+ <div class="card-header">
1390
+ <h2>Routes Map</h2>
1391
+ <a class="btn mdi mdi-code-tags" data-toggle="collapse" href="#collapse-google-map-routes"
1392
+ role="button" aria-expanded="false" aria-controls="collapse-google-map-routes"> </a>
1393
+
1394
+
1395
+ </div>
1396
+ <div class="card-body">
1397
+ <div class="collapse" id="collapse-google-map-routes">
1398
+ <pre class="language-html mb-4">
1399
+ <code >
1400
+ &lt;div id="polylineMap" class="map-container">&lt;/div>
1401
+ </code>
1402
+ </pre>
1403
+ </div>
1404
+ <div id="polylineMap" class="map-container"></div>
1405
+ </div>
1406
+ </div>
1407
+ </div>
1408
+
1409
+ <div class="col-md-12">
1410
+ <!-- Multiple Marker Map -->
1411
+ <div class="card card-default">
1412
+ <div class="card-header">
1413
+ <h2>Multiple Marker Map</h2>
1414
+ <a class="btn mdi mdi-code-tags" data-toggle="collapse" href="#collapse-google-map-multiple-marker" role="button"
1415
+ aria-expanded="false" aria-controls="collapse-google-map-multiple-marker"> </a>
1416
+
1417
+
1418
+ </div>
1419
+ <div class="card-body">
1420
+ <div class="collapse" id="collapse-google-map-multiple-marker">
1421
+ <pre class="language-html mb-4">
1422
+ <code >
1423
+ &lt;div id="multiMarkerMap" class="map-container">&lt;/div>
1424
+ </code>
1425
+ </pre>
1426
+ </div>
1427
+ <div id="multiMarkerMap" class="map-container"></div>
1428
+ </div>
1429
+ </div>
1430
+ </div>
1431
+
1432
+ <div class="col-md-12">
1433
+ <!-- Styled Map -->
1434
+ <div class="card card-default">
1435
+ <div class="card-header">
1436
+ <h2>Styled Map</h2>
1437
+ <a class="btn mdi mdi-code-tags" data-toggle="collapse" href="#collapse-google-style-map" role="button"
1438
+ aria-expanded="false" aria-controls="collapse-google-style-map"> </a>
1439
+
1440
+
1441
+ </div>
1442
+ <div class="card-body">
1443
+ <div class="collapse" id="collapse-google-style-map">
1444
+ <pre class="language-html mb-4">
1445
+ <code >
1446
+ &lt;div id="styleMap" class="map-container">&lt;/div>
1447
+ </code>
1448
+ </pre>
1449
+ </div>
1450
+ <div id="styleMap" class="map-container"></div>
1451
+ </div>
1452
+ </div>
1453
+ </div>
1454
+ </div>
1455
+ </div>
1456
+
1457
+ </div>
1458
+
1459
+ <!-- Footer -->
1460
+ <footer class="footer mt-auto">
1461
+ <div class="copyright bg-white">
1462
+ <p>
1463
+ &copy; <span id="copy-year"></span> Copyright Mono Dashboard Bootstrap Template by <a class="text-primary" href="http://www.iamabdus.com/" target="_blank" >Abdus</a>.
1464
+ </p>
1465
+ </div>
1466
+ <script>
1467
+ var d = new Date();
1468
+ var year = d.getFullYear();
1469
+ document.getElementById("copy-year").innerHTML = year;
1470
+ </script>
1471
+ </footer>
1472
+
1473
+ </div>
1474
+ </div>
1475
+
1476
+ <!-- Card Offcanvas -->
1477
+ <div class="card card-offcanvas" id="contact-off" >
1478
+ <div class="card-header">
1479
+ <h2>Contacts</h2>
1480
+ <a href="#" class="btn btn-primary btn-pill px-4">Add New</a>
1481
+ </div>
1482
+ <div class="card-body">
1483
+
1484
+ <div class="mb-4">
1485
+ <input type="text" class="form-control form-control-lg form-control-secondary rounded-0" placeholder="Search contacts...">
1486
+ </div>
1487
+
1488
+ <div class="media media-sm">
1489
+ <div class="media-sm-wrapper">
1490
+ <a href="user-profile.html">
1491
+ <img src="images/user/user-sm-01.jpg" alt="User Image">
1492
+ <span class="active bg-primary"></span>
1493
+ </a>
1494
+ </div>
1495
+ <div class="media-body">
1496
+ <a href="user-profile.html">
1497
+ <span class="title">Selena Wagner</span>
1498
+ <span class="discribe">Designer</span>
1499
+ </a>
1500
+ </div>
1501
+ </div>
1502
+
1503
+ <div class="media media-sm">
1504
+ <div class="media-sm-wrapper">
1505
+ <a href="user-profile.html">
1506
+ <img src="images/user/user-sm-02.jpg" alt="User Image">
1507
+ <span class="active bg-primary"></span>
1508
+ </a>
1509
+ </div>
1510
+ <div class="media-body">
1511
+ <a href="user-profile.html">
1512
+ <span class="title">Walter Reuter</span>
1513
+ <span>Developer</span>
1514
+ </a>
1515
+ </div>
1516
+ </div>
1517
+
1518
+ <div class="media media-sm">
1519
+ <div class="media-sm-wrapper">
1520
+ <a href="user-profile.html">
1521
+ <img src="images/user/user-sm-03.jpg" alt="User Image">
1522
+ </a>
1523
+ </div>
1524
+ <div class="media-body">
1525
+ <a href="user-profile.html">
1526
+ <span class="title">Larissa Gebhardt</span>
1527
+ <span>Cyber Punk</span>
1528
+ </a>
1529
+ </div>
1530
+ </div>
1531
+
1532
+ <div class="media media-sm">
1533
+ <div class="media-sm-wrapper">
1534
+ <a href="user-profile.html">
1535
+ <img src="images/user/user-sm-04.jpg" alt="User Image">
1536
+ </a>
1537
+
1538
+ </div>
1539
+ <div class="media-body">
1540
+ <a href="user-profile.html">
1541
+ <span class="title">Albrecht Straub</span>
1542
+ <span>Photographer</span>
1543
+ </a>
1544
+ </div>
1545
+ </div>
1546
+
1547
+ <div class="media media-sm">
1548
+ <div class="media-sm-wrapper">
1549
+ <a href="user-profile.html">
1550
+ <img src="images/user/user-sm-05.jpg" alt="User Image">
1551
+ <span class="active bg-danger"></span>
1552
+ </a>
1553
+ </div>
1554
+ <div class="media-body">
1555
+ <a href="user-profile.html">
1556
+ <span class="title">Leopold Ebert</span>
1557
+ <span>Fashion Designer</span>
1558
+ </a>
1559
+ </div>
1560
+ </div>
1561
+
1562
+ <div class="media media-sm">
1563
+ <div class="media-sm-wrapper">
1564
+ <a href="user-profile.html">
1565
+ <img src="images/user/user-sm-06.jpg" alt="User Image">
1566
+ <span class="active bg-primary"></span>
1567
+ </a>
1568
+ </div>
1569
+ <div class="media-body">
1570
+ <a href="user-profile.html">
1571
+ <span class="title">Selena Wagner</span>
1572
+ <span>Photographer</span>
1573
+ </a>
1574
+ </div>
1575
+ </div>
1576
+
1577
+ </div>
1578
+ </div>
1579
+
1580
+
1581
+
1582
+
1583
+ <script src="plugins/jquery/jquery.min.js"></script>
1584
+ <script src="plugins/bootstrap/js/bootstrap.bundle.min.js"></script>
1585
+ <script src="plugins/simplebar/simplebar.min.js"></script>
1586
+ <script src="https://unpkg.com/hotkeys-js/dist/hotkeys.min.js"></script>
1587
+
1588
+
1589
+
1590
+ <script src="plugins/prism/prism.js"></script>
1591
+
1592
+
1593
+
1594
+ <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDCn8TFXGg17HAUcNpkwtxxyT9Io9B_NcM" defer></script>
1595
+
1596
+
1597
+ <script src="js/mono.js"></script>
1598
+ <script src="js/chart.js"></script>
1599
+ <script src="js/map.js"></script>
1600
+ <script src="js/custom.js"></script>
1601
+
1602
+
1603
+
1604
+
1605
+ <!-- -->
1606
+
1607
+
1608
+ </body>
1609
+ </html>
images/elements/cc1.jpg ADDED
images/elements/cc1a.jpg ADDED
images/elements/cc1b.jpg ADDED
images/elements/cc1c.jpg ADDED
images/elements/cc2a.jpg ADDED
images/elements/cc2b.jpg ADDED
images/elements/cc2c.jpg ADDED
images/elements/cc3a.jpg ADDED
images/elements/cc3b.jpg ADDED
images/elements/cc3c.jpg ADDED
images/elements/cc4a.jpg ADDED
images/elements/cc4b.jpg ADDED
images/elements/cc4c.jpg ADDED
images/elements/client.png ADDED
images/elements/hc1.jpg ADDED
images/elements/hc2.jpg ADDED